@rivet-health/design-system 40.0.0 → 40.2.0

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

@@ -4104,6 +4104,7 @@ class DateComponent extends InputLabelComponent {
         this.placeholder = 'Select date';
         this.disabled = false;
         this.size = 'medium';
+        this.showClearButton = true;
         this.activeYearMonth = timeMonth.floor(new Date());
         this.open$ = new BehaviorSubject(false);
         this.valueChange = new EventEmitter();
@@ -4128,12 +4129,16 @@ class DateComponent extends InputLabelComponent {
     get open() {
         return this.open$.getValue();
     }
+    clearValue() {
+        this.valueChange.emit(undefined);
+        this.open$.next(false);
+    }
 }
 DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", open: "open" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <button\n    #trigger\n    class=\"trigger\"\n    [class.xsmall]=\"size === 'xsmall'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [class.xlarge]=\"size === 'xlarge'\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled\"\n    type=\"button\"\n  >\n    <ng-container *ngIf=\"value; else placeholderValue\">\n      <span class=\"value\">{{ value | rivDate }}</span>\n    </ng-container>\n    <ng-template #placeholderValue>\n      <span class=\"value placeholder\">{{ placeholder }}</span>\n    </ng-template>\n    <span class=\"chevron\">\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </span>\n  </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"trigger\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [allowedPositions]=\"[\n      'top-left',\n      'top-right',\n      'bottom-right',\n      'bottom-left'\n    ]\"\n    [preferredPosition]=\"'bottom-right'\"\n    (close)=\"open$.next(false)\"\n  >\n    <header *ngIf=\"headerTemplate\">\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    </header>\n    <div class=\"content\">\n      <riv-calendar\n        [activeYearMonth]=\"activeYearMonth\"\n        (activeYearMonthChange)=\"activeYearMonth = $event\"\n        [displayMin]=\"min\"\n        [displayMax]=\"max\"\n        [selectableMin]=\"min\"\n        [selectableMax]=\"max\"\n        [selectedValue]=\"value\"\n        (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n      ></riv-calendar>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-large)}\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: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "rivDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", showClearButton: "showClearButton", open: "open" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <button\n    #trigger\n    class=\"trigger\"\n    [class.xsmall]=\"size === 'xsmall'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [class.xlarge]=\"size === 'xlarge'\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled\"\n    type=\"button\"\n  >\n    <ng-container *ngIf=\"value; else placeholderValue\">\n      <span class=\"value\">{{ value | rivDate }}</span>\n    </ng-container>\n    <ng-template #placeholderValue>\n      <span class=\"value placeholder\">{{ placeholder }}</span>\n    </ng-template>\n    <span class=\"chevron\">\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </span>\n  </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"trigger\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [allowedPositions]=\"[\n      'top-left',\n      'top-right',\n      'bottom-right',\n      'bottom-left'\n    ]\"\n    [preferredPosition]=\"'bottom-right'\"\n    (close)=\"open$.next(false)\"\n  >\n    <header *ngIf=\"headerTemplate\">\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    </header>\n    <div class=\"content\">\n      <riv-calendar\n        [activeYearMonth]=\"activeYearMonth\"\n        (activeYearMonthChange)=\"activeYearMonth = $event\"\n        [displayMin]=\"min\"\n        [displayMax]=\"max\"\n        [selectableMin]=\"min\"\n        [selectableMax]=\"max\"\n        [selectedValue]=\"value\"\n        (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n      ></riv-calendar>\n    </div>\n    <footer *ngIf=\"showClearButton\" class=\"buttons\">\n      <button\n        rivButton\n        [size]=\"'small'\"\n        [variant]=\"'ghost'\"\n        (click)=\"clearValue()\"\n        type=\"button\"\n      >\n        Clear\n      </button>\n    </footer>\n  </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-large)}.buttons{padding:var(--size-small);display:flex;justify-content:space-between}\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: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "rivDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <button\n    #trigger\n    class=\"trigger\"\n    [class.xsmall]=\"size === 'xsmall'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [class.xlarge]=\"size === 'xlarge'\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled\"\n    type=\"button\"\n  >\n    <ng-container *ngIf=\"value; else placeholderValue\">\n      <span class=\"value\">{{ value | rivDate }}</span>\n    </ng-container>\n    <ng-template #placeholderValue>\n      <span class=\"value placeholder\">{{ placeholder }}</span>\n    </ng-template>\n    <span class=\"chevron\">\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </span>\n  </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"trigger\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [allowedPositions]=\"[\n      'top-left',\n      'top-right',\n      'bottom-right',\n      'bottom-left'\n    ]\"\n    [preferredPosition]=\"'bottom-right'\"\n    (close)=\"open$.next(false)\"\n  >\n    <header *ngIf=\"headerTemplate\">\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    </header>\n    <div class=\"content\">\n      <riv-calendar\n        [activeYearMonth]=\"activeYearMonth\"\n        (activeYearMonthChange)=\"activeYearMonth = $event\"\n        [displayMin]=\"min\"\n        [displayMax]=\"max\"\n        [selectableMin]=\"min\"\n        [selectableMax]=\"max\"\n        [selectedValue]=\"value\"\n        (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n      ></riv-calendar>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-large)}\n"] }]
+            args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <button\n    #trigger\n    class=\"trigger\"\n    [class.xsmall]=\"size === 'xsmall'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [class.xlarge]=\"size === 'xlarge'\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled\"\n    type=\"button\"\n  >\n    <ng-container *ngIf=\"value; else placeholderValue\">\n      <span class=\"value\">{{ value | rivDate }}</span>\n    </ng-container>\n    <ng-template #placeholderValue>\n      <span class=\"value placeholder\">{{ placeholder }}</span>\n    </ng-template>\n    <span class=\"chevron\">\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </span>\n  </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"trigger\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [allowedPositions]=\"[\n      'top-left',\n      'top-right',\n      'bottom-right',\n      'bottom-left'\n    ]\"\n    [preferredPosition]=\"'bottom-right'\"\n    (close)=\"open$.next(false)\"\n  >\n    <header *ngIf=\"headerTemplate\">\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    </header>\n    <div class=\"content\">\n      <riv-calendar\n        [activeYearMonth]=\"activeYearMonth\"\n        (activeYearMonthChange)=\"activeYearMonth = $event\"\n        [displayMin]=\"min\"\n        [displayMax]=\"max\"\n        [selectableMin]=\"min\"\n        [selectableMax]=\"max\"\n        [selectedValue]=\"value\"\n        (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n      ></riv-calendar>\n    </div>\n    <footer *ngIf=\"showClearButton\" class=\"buttons\">\n      <button\n        rivButton\n        [size]=\"'small'\"\n        [variant]=\"'ghost'\"\n        (click)=\"clearValue()\"\n        type=\"button\"\n      >\n        Clear\n      </button>\n    </footer>\n  </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-large)}.buttons{padding:var(--size-small);display:flex;justify-content:space-between}\n"] }]
         }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -4146,6 +4151,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], size: [{
                 type: Input
+            }], showClearButton: [{
+                type: Input
             }], headerTemplate: [{
                 type: ContentChild,
                 args: ['header']
@@ -5930,6 +5937,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;
     }
@@ -5941,14 +5950,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: [{
@@ -6203,7 +6216,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"] }]