@rivet-health/design-system 40.0.0 → 40.2.0

package/esm2020/lib/input/date/date.component.mjs

@@ -5,12 +5,13 @@ import { CalendarComponent } from '../calendar/calendar.component';
 import { InputLabelComponent } from '../input-label/input-label.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "../calendar/calendar.component";
-import * as i3 from "../../overlay/callout/callout.component";
-import * as i4 from "../../icon/icon.component";
-import * as i5 from "../input-label/input-label.component";
-import * as i6 from "../../overlay/overlay.directive";
-import * as i7 from "../../format/pipes/date.pipe";
+import * as i2 from "../button/button.component";
+import * as i3 from "../calendar/calendar.component";
+import * as i4 from "../../overlay/callout/callout.component";
+import * as i5 from "../../icon/icon.component";
+import * as i6 from "../input-label/input-label.component";
+import * as i7 from "../../overlay/overlay.directive";
+import * as i8 from "../../format/pipes/date.pipe";
 export class DateComponent extends InputLabelComponent {
     constructor() {
         super(...arguments);
@@ -19,6 +20,7 @@ export 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();
@@ -43,12 +45,16 @@ export 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: i2.CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: i3.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.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: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i6.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i7.OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.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: [{
@@ -61,6 +67,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']
@@ -78,4 +86,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         'xlarge',
     ];
 })(DateComponent || (DateComponent = {}));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9pbnB1dC9kYXRlL2RhdGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvaW5wdXQvZGF0ZS9kYXRlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FFUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ3BDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDdkMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDbkUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7Ozs7Ozs7OztBQVEzRSxNQUFNLE9BQU8sYUFBYyxTQUFRLG1CQUFtQjtJQU50RDs7UUFRRSxRQUFHLEdBQVMsaUJBQWlCLENBQUMsVUFBVSxDQUFDO1FBR3pDLFFBQUcsR0FBUyxpQkFBaUIsQ0FBQyxVQUFVLENBQUM7UUFtQnpDLGdCQUFXLEdBQVcsYUFBYSxDQUFDO1FBR3BDLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFHMUIsU0FBSSxHQUF1QixRQUFRLENBQUM7UUFLcEMsb0JBQWUsR0FBRyxTQUFTLENBQUMsS0FBSyxDQUFDLElBQUksSUFBSSxFQUFFLENBQUMsQ0FBQztRQUVyQyxVQUFLLEdBQUcsSUFBSSxlQUFlLENBQVUsS0FBSyxDQUFDLENBQUM7UUFVckQsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBQ3hDO0lBekNDLElBQ0ksS0FBSyxDQUFDLENBQW1CO1FBQzNCLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFO1lBQUUsT0FBTztRQUNwRCxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztRQUNoQixJQUFJLENBQUMsRUFBRTtZQUNMLE1BQU0sS0FBSyxHQUFHLFNBQVMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDakMsSUFBSSxLQUFLLENBQUMsT0FBTyxFQUFFLEtBQUssSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLEVBQUUsRUFBRTtnQkFDdEQsSUFBSSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7YUFDOUI7U0FDRjtJQUNILENBQUM7SUFDRCxJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQWtCRCxJQUNJLElBQUksQ0FBQyxDQUFVO1FBQ2pCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3JCLENBQUM7SUFDRCxJQUFJLElBQUk7UUFDTixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDL0IsQ0FBQzs7MEdBNUNVLGFBQWE7OEZBQWIsYUFBYSx3VkNwQjFCLCs2REFpRUE7MkZEN0NhLGFBQWE7a0JBTnpCLFNBQVM7K0JBQ0UsVUFBVSxtQkFHSCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUkvQyxHQUFHO3NCQURGLEtBQUs7Z0JBSU4sR0FBRztzQkFERixLQUFLO2dCQUlGLEtBQUs7c0JBRFIsS0FBSztnQkFpQk4sV0FBVztzQkFEVixLQUFLO2dCQUlOLFFBQVE7c0JBRFAsS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUs7Z0JBSU4sY0FBYztzQkFEYixZQUFZO3VCQUFDLFFBQVE7Z0JBT2xCLElBQUk7c0JBRFAsS0FBSztnQkFTTixXQUFXO3NCQURWLE1BQU07O0FBSVQsV0FBaUIsYUFBYTtJQUNmLG1CQUFLLEdBQUc7UUFDbkIsUUFBUTtRQUNSLE9BQU87UUFDUCxRQUFRO1FBQ1IsT0FBTztRQUNQLFFBQVE7S0FDQSxDQUFDO0FBRWIsQ0FBQyxFQVRnQixhQUFhLEtBQWIsYUFBYSxRQVM3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBUZW1wbGF0ZVJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyB0aW1lTW9udGggfSBmcm9tICdkMy10aW1lJztcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQ2FsZW5kYXJDb21wb25lbnQgfSBmcm9tICcuLi9jYWxlbmRhci9jYWxlbmRhci5jb21wb25lbnQnO1xuaW1wb3J0IHsgSW5wdXRMYWJlbENvbXBvbmVudCB9IGZyb20gJy4uL2lucHV0LWxhYmVsL2lucHV0LWxhYmVsLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Jpdi1kYXRlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RhdGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kYXRlLmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIERhdGVDb21wb25lbnQgZXh0ZW5kcyBJbnB1dExhYmVsQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgbWluOiBEYXRlID0gQ2FsZW5kYXJDb21wb25lbnQuZGVmYXVsdE1pbjtcblxuICBASW5wdXQoKVxuICBtYXg6IERhdGUgPSBDYWxlbmRhckNvbXBvbmVudC5kZWZhdWx0TWF4O1xuXG4gIEBJbnB1dCgpXG4gIHNldCB2YWx1ZSh2OiBEYXRlIHwgdW5kZWZpbmVkKSB7XG4gICAgaWYgKHRoaXMuX3ZhbHVlPy5nZXRUaW1lKCkgPT09IHY/LmdldFRpbWUoKSkgcmV0dXJuO1xuICAgIHRoaXMuX3ZhbHVlID0gdjtcbiAgICBpZiAodikge1xuICAgICAgY29uc3QgbW9udGggPSB0aW1lTW9udGguZmxvb3Iodik7XG4gICAgICBpZiAobW9udGguZ2V0VGltZSgpICE9PSB0aGlzLmFjdGl2ZVllYXJNb250aC5nZXRUaW1lKCkpIHtcbiAgICAgICAgdGhpcy5hY3RpdmVZZWFyTW9udGggPSBtb250aDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbiAgZ2V0IHZhbHVlKCk6IERhdGUgfCB1bmRlZmluZWQge1xuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgfVxuICBwcml2YXRlIF92YWx1ZT86IERhdGU7XG5cbiAgQElucHV0KClcbiAgcGxhY2Vob2xkZXI6IHN0cmluZyA9ICdTZWxlY3QgZGF0ZSc7XG5cbiAgQElucHV0KClcbiAgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBzaXplOiBEYXRlQ29tcG9uZW50LlNpemUgPSAnbWVkaXVtJztcblxuICBAQ29udGVudENoaWxkKCdoZWFkZXInKVxuICBoZWFkZXJUZW1wbGF0ZT86IFRlbXBsYXRlUmVmPHZvaWQ+O1xuXG4gIGFjdGl2ZVllYXJNb250aCA9IHRpbWVNb250aC5mbG9vcihuZXcgRGF0ZSgpKTtcblxuICByZWFkb25seSBvcGVuJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8Ym9vbGVhbj4oZmFsc2UpO1xuICBASW5wdXQoKVxuICBzZXQgb3Blbih2OiBib29sZWFuKSB7XG4gICAgdGhpcy5vcGVuJC5uZXh0KHYpO1xuICB9XG4gIGdldCBvcGVuKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLm9wZW4kLmdldFZhbHVlKCk7XG4gIH1cblxuICBAT3V0cHV0KClcbiAgdmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPERhdGU+KCk7XG59XG5cbmV4cG9ydCBuYW1lc3BhY2UgRGF0ZUNvbXBvbmVudCB7XG4gIGV4cG9ydCBjb25zdCBTaXplcyA9IFtcbiAgICAneHNtYWxsJyxcbiAgICAnc21hbGwnLFxuICAgICdtZWRpdW0nLFxuICAgICdsYXJnZScsXG4gICAgJ3hsYXJnZScsXG4gIF0gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIFNpemUgPSAodHlwZW9mIFNpemVzKVtudW1iZXJdO1xufVxuIiwiPHJpdi1pbnB1dC1sYWJlbFxuICBbbGFiZWxdPVwibGFiZWxcIlxuICBbaGVscF09XCJoZWxwXCJcbiAgW3JlcXVpcmVkXT1cInJlcXVpcmVkXCJcbiAgW3N0YXRlXT1cInN0YXRlXCJcbiAgW2Vycm9yTWVzc2FnZV09XCJlcnJvck1lc3NhZ2VcIlxuICBbbGFiZWxBY3Rpb25UZXh0XT1cImxhYmVsQWN0aW9uVGV4dFwiXG4gIChsYWJlbEFjdGlvbik9XCJsYWJlbEFjdGlvbi5lbWl0KCRldmVudClcIlxuPlxuICA8YnV0dG9uXG4gICAgI3RyaWdnZXJcbiAgICBjbGFzcz1cInRyaWdnZXJcIlxuICAgIFtjbGFzcy54c21hbGxdPVwic2l6ZSA9PT0gJ3hzbWFsbCdcIlxuICAgIFtjbGFzcy5zbWFsbF09XCJzaXplID09PSAnc21hbGwnXCJcbiAgICBbY2xhc3MubGFyZ2VdPVwic2l6ZSA9PT0gJ2xhcmdlJ1wiXG4gICAgW2NsYXNzLnhsYXJnZV09XCJzaXplID09PSAneGxhcmdlJ1wiXG4gICAgW2NsYXNzLndhcm5pbmddPVwic3RhdGUgPT09ICd3YXJuaW5nJ1wiXG4gICAgW2NsYXNzLmVycm9yXT1cInN0YXRlID09PSAnZXJyb3InXCJcbiAgICAoY2xpY2spPVwib3BlbiQubmV4dCh0cnVlKVwiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJ2YWx1ZTsgZWxzZSBwbGFjZWhvbGRlclZhbHVlXCI+XG4gICAgICA8c3BhbiBjbGFzcz1cInZhbHVlXCI+e3sgdmFsdWUgfCByaXZEYXRlIH19PC9zcGFuPlxuICAgIDwvbmctY29udGFpbmVyPlxuICAgIDxuZy10ZW1wbGF0ZSAjcGxhY2Vob2xkZXJWYWx1ZT5cbiAgICAgIDxzcGFuIGNsYXNzPVwidmFsdWUgcGxhY2Vob2xkZXJcIj57eyBwbGFjZWhvbGRlciB9fTwvc3Bhbj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICAgIDxzcGFuIGNsYXNzPVwiY2hldnJvblwiPlxuICAgICAgPHJpdi1pY29uIFtuYW1lXT1cIidDYWxlbmRhcidcIiBbc2l6ZV09XCIxNlwiPjwvcml2LWljb24+XG4gICAgPC9zcGFuPlxuICA8L2J1dHRvbj5cbjwvcml2LWlucHV0LWxhYmVsPlxuPG5nLWNvbnRhaW5lciAqbmdJZj1cIm9wZW4kIHwgYXN5bmNcIj5cbiAgPHJpdi1jYWxsb3V0XG4gICAgKnJpdi1vdmVybGF5XG4gICAgW2FuY2hvcl09XCJ0cmlnZ2VyXCJcbiAgICBbc2hvd0NhcmV0XT1cImZhbHNlXCJcbiAgICBbdGhlbWVdPVwiJ2xpZ2h0J1wiXG4gICAgW2FsbG93ZWRQb3NpdGlvbnNdPVwiW1xuICAgICAgJ3RvcC1sZWZ0JyxcbiAgICAgICd0b3AtcmlnaHQnLFxuICAgICAgJ2JvdHRvbS1yaWdodCcsXG4gICAgICAnYm90dG9tLWxlZnQnXG4gICAgXVwiXG4gICAgW3ByZWZlcnJlZFBvc2l0aW9uXT1cIidib3R0b20tcmlnaHQnXCJcbiAgICAoY2xvc2UpPVwib3BlbiQubmV4dChmYWxzZSlcIlxuICA+XG4gICAgPGhlYWRlciAqbmdJZj1cImhlYWRlclRlbXBsYXRlXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaGVhZGVyVGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L2hlYWRlcj5cbiAgICA8ZGl2IGNsYXNzPVwiY29udGVudFwiPlxuICAgICAgPHJpdi1jYWxlbmRhclxuICAgICAgICBbYWN0aXZlWWVhck1vbnRoXT1cImFjdGl2ZVllYXJNb250aFwiXG4gICAgICAgIChhY3RpdmVZZWFyTW9udGhDaGFuZ2UpPVwiYWN0aXZlWWVhck1vbnRoID0gJGV2ZW50XCJcbiAgICAgICAgW2Rpc3BsYXlNaW5dPVwibWluXCJcbiAgICAgICAgW2Rpc3BsYXlNYXhdPVwibWF4XCJcbiAgICAgICAgW3NlbGVjdGFibGVNaW5dPVwibWluXCJcbiAgICAgICAgW3NlbGVjdGFibGVNYXhdPVwibWF4XCJcbiAgICAgICAgW3NlbGVjdGVkVmFsdWVdPVwidmFsdWVcIlxuICAgICAgICAoZGF0ZVNlbGVjdCk9XCJ2YWx1ZUNoYW5nZS5uZXh0KCRldmVudCk7IG9wZW4kLm5leHQoZmFsc2UpXCJcbiAgICAgID48L3Jpdi1jYWxlbmRhcj5cbiAgICA8L2Rpdj5cbiAgPC9yaXYtY2FsbG91dD5cbjwvbmctY29udGFpbmVyPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9pbnB1dC9kYXRlL2RhdGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvaW5wdXQvZGF0ZS9kYXRlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FFUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ3BDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDdkMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDbkUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7Ozs7Ozs7Ozs7QUFRM0UsTUFBTSxPQUFPLGFBQWMsU0FBUSxtQkFBbUI7SUFOdEQ7O1FBUUUsUUFBRyxHQUFTLGlCQUFpQixDQUFDLFVBQVUsQ0FBQztRQUd6QyxRQUFHLEdBQVMsaUJBQWlCLENBQUMsVUFBVSxDQUFDO1FBbUJ6QyxnQkFBVyxHQUFXLGFBQWEsQ0FBQztRQUdwQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRzFCLFNBQUksR0FBdUIsUUFBUSxDQUFDO1FBR3BDLG9CQUFlLEdBQVksSUFBSSxDQUFDO1FBS2hDLG9CQUFlLEdBQUcsU0FBUyxDQUFDLEtBQUssQ0FBQyxJQUFJLElBQUksRUFBRSxDQUFDLENBQUM7UUFFckMsVUFBSyxHQUFHLElBQUksZUFBZSxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBVXJELGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7S0FNcEQ7SUFqREMsSUFDSSxLQUFLLENBQUMsQ0FBbUI7UUFDM0IsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUU7WUFBRSxPQUFPO1FBQ3BELElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ2hCLElBQUksQ0FBQyxFQUFFO1lBQ0wsTUFBTSxLQUFLLEdBQUcsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNqQyxJQUFJLEtBQUssQ0FBQyxPQUFPLEVBQUUsS0FBSyxJQUFJLENBQUMsZUFBZSxDQUFDLE9BQU8sRUFBRSxFQUFFO2dCQUN0RCxJQUFJLENBQUMsZUFBZSxHQUFHLEtBQUssQ0FBQzthQUM5QjtTQUNGO0lBQ0gsQ0FBQztJQUNELElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBcUJELElBQ0ksSUFBSSxDQUFDLENBQVU7UUFDakIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDckIsQ0FBQztJQUNELElBQUksSUFBSTtRQUNOLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMvQixDQUFDO0lBS0QsVUFBVTtRQUNSLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQ2pDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pCLENBQUM7OzBHQXZEVSxhQUFhOzhGQUFiLGFBQWEsNFhDcEIxQix5ckVBNEVBOzJGRHhEYSxhQUFhO2tCQU56QixTQUFTOytCQUNFLFVBQVUsbUJBR0gsdUJBQXVCLENBQUMsTUFBTTs4QkFJL0MsR0FBRztzQkFERixLQUFLO2dCQUlOLEdBQUc7c0JBREYsS0FBSztnQkFJRixLQUFLO3NCQURSLEtBQUs7Z0JBaUJOLFdBQVc7c0JBRFYsS0FBSztnQkFJTixRQUFRO3NCQURQLEtBQUs7Z0JBSU4sSUFBSTtzQkFESCxLQUFLO2dCQUlOLGVBQWU7c0JBRGQsS0FBSztnQkFJTixjQUFjO3NCQURiLFlBQVk7dUJBQUMsUUFBUTtnQkFPbEIsSUFBSTtzQkFEUCxLQUFLO2dCQVNOLFdBQVc7c0JBRFYsTUFBTTs7QUFTVCxXQUFpQixhQUFhO0lBQ2YsbUJBQUssR0FBRztRQUNuQixRQUFRO1FBQ1IsT0FBTztRQUNQLFFBQVE7UUFDUixPQUFPO1FBQ1AsUUFBUTtLQUNBLENBQUM7QUFFYixDQUFDLEVBVGdCLGFBQWEsS0FBYixhQUFhLFFBUzdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFRlbXBsYXRlUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IHRpbWVNb250aCB9IGZyb20gJ2QzLXRpbWUnO1xuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBDYWxlbmRhckNvbXBvbmVudCB9IGZyb20gJy4uL2NhbGVuZGFyL2NhbGVuZGFyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJbnB1dExhYmVsQ29tcG9uZW50IH0gZnJvbSAnLi4vaW5wdXQtbGFiZWwvaW5wdXQtbGFiZWwuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LWRhdGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGF0ZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2RhdGUuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgRGF0ZUNvbXBvbmVudCBleHRlbmRzIElucHV0TGFiZWxDb21wb25lbnQge1xuICBASW5wdXQoKVxuICBtaW46IERhdGUgPSBDYWxlbmRhckNvbXBvbmVudC5kZWZhdWx0TWluO1xuXG4gIEBJbnB1dCgpXG4gIG1heDogRGF0ZSA9IENhbGVuZGFyQ29tcG9uZW50LmRlZmF1bHRNYXg7XG5cbiAgQElucHV0KClcbiAgc2V0IHZhbHVlKHY6IERhdGUgfCB1bmRlZmluZWQpIHtcbiAgICBpZiAodGhpcy5fdmFsdWU/LmdldFRpbWUoKSA9PT0gdj8uZ2V0VGltZSgpKSByZXR1cm47XG4gICAgdGhpcy5fdmFsdWUgPSB2O1xuICAgIGlmICh2KSB7XG4gICAgICBjb25zdCBtb250aCA9IHRpbWVNb250aC5mbG9vcih2KTtcbiAgICAgIGlmIChtb250aC5nZXRUaW1lKCkgIT09IHRoaXMuYWN0aXZlWWVhck1vbnRoLmdldFRpbWUoKSkge1xuICAgICAgICB0aGlzLmFjdGl2ZVllYXJNb250aCA9IG1vbnRoO1xuICAgICAgfVxuICAgIH1cbiAgfVxuICBnZXQgdmFsdWUoKTogRGF0ZSB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhbHVlO1xuICB9XG4gIHByaXZhdGUgX3ZhbHVlPzogRGF0ZTtcblxuICBASW5wdXQoKVxuICBwbGFjZWhvbGRlcjogc3RyaW5nID0gJ1NlbGVjdCBkYXRlJztcblxuICBASW5wdXQoKVxuICBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIHNpemU6IERhdGVDb21wb25lbnQuU2l6ZSA9ICdtZWRpdW0nO1xuXG4gIEBJbnB1dCgpXG4gIHNob3dDbGVhckJ1dHRvbjogYm9vbGVhbiA9IHRydWU7XG5cbiAgQENvbnRlbnRDaGlsZCgnaGVhZGVyJylcbiAgaGVhZGVyVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjx2b2lkPjtcblxuICBhY3RpdmVZZWFyTW9udGggPSB0aW1lTW9udGguZmxvb3IobmV3IERhdGUoKSk7XG5cbiAgcmVhZG9ubHkgb3BlbiQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PGJvb2xlYW4+KGZhbHNlKTtcbiAgQElucHV0KClcbiAgc2V0IG9wZW4odjogYm9vbGVhbikge1xuICAgIHRoaXMub3BlbiQubmV4dCh2KTtcbiAgfVxuICBnZXQgb3BlbigpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5vcGVuJC5nZXRWYWx1ZSgpO1xuICB9XG5cbiAgQE91dHB1dCgpXG4gIHZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxEYXRlIHwgdW5kZWZpbmVkPigpO1xuXG4gIGNsZWFyVmFsdWUoKTogdm9pZCB7XG4gICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KHVuZGVmaW5lZCk7XG4gICAgdGhpcy5vcGVuJC5uZXh0KGZhbHNlKTtcbiAgfVxufVxuXG5leHBvcnQgbmFtZXNwYWNlIERhdGVDb21wb25lbnQge1xuICBleHBvcnQgY29uc3QgU2l6ZXMgPSBbXG4gICAgJ3hzbWFsbCcsXG4gICAgJ3NtYWxsJyxcbiAgICAnbWVkaXVtJyxcbiAgICAnbGFyZ2UnLFxuICAgICd4bGFyZ2UnLFxuICBdIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBTaXplID0gKHR5cGVvZiBTaXplcylbbnVtYmVyXTtcbn1cbiIsIjxyaXYtaW5wdXQtbGFiZWxcbiAgW2xhYmVsXT1cImxhYmVsXCJcbiAgW2hlbHBdPVwiaGVscFwiXG4gIFtyZXF1aXJlZF09XCJyZXF1aXJlZFwiXG4gIFtzdGF0ZV09XCJzdGF0ZVwiXG4gIFtlcnJvck1lc3NhZ2VdPVwiZXJyb3JNZXNzYWdlXCJcbiAgW2xhYmVsQWN0aW9uVGV4dF09XCJsYWJlbEFjdGlvblRleHRcIlxuICAobGFiZWxBY3Rpb24pPVwibGFiZWxBY3Rpb24uZW1pdCgkZXZlbnQpXCJcbj5cbiAgPGJ1dHRvblxuICAgICN0cmlnZ2VyXG4gICAgY2xhc3M9XCJ0cmlnZ2VyXCJcbiAgICBbY2xhc3MueHNtYWxsXT1cInNpemUgPT09ICd4c21hbGwnXCJcbiAgICBbY2xhc3Muc21hbGxdPVwic2l6ZSA9PT0gJ3NtYWxsJ1wiXG4gICAgW2NsYXNzLmxhcmdlXT1cInNpemUgPT09ICdsYXJnZSdcIlxuICAgIFtjbGFzcy54bGFyZ2VdPVwic2l6ZSA9PT0gJ3hsYXJnZSdcIlxuICAgIFtjbGFzcy53YXJuaW5nXT1cInN0YXRlID09PSAnd2FybmluZydcIlxuICAgIFtjbGFzcy5lcnJvcl09XCJzdGF0ZSA9PT0gJ2Vycm9yJ1wiXG4gICAgKGNsaWNrKT1cIm9wZW4kLm5leHQodHJ1ZSlcIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgdHlwZT1cImJ1dHRvblwiXG4gID5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidmFsdWU7IGVsc2UgcGxhY2Vob2xkZXJWYWx1ZVwiPlxuICAgICAgPHNwYW4gY2xhc3M9XCJ2YWx1ZVwiPnt7IHZhbHVlIHwgcml2RGF0ZSB9fTwvc3Bhbj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8bmctdGVtcGxhdGUgI3BsYWNlaG9sZGVyVmFsdWU+XG4gICAgICA8c3BhbiBjbGFzcz1cInZhbHVlIHBsYWNlaG9sZGVyXCI+e3sgcGxhY2Vob2xkZXIgfX08L3NwYW4+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8c3BhbiBjbGFzcz1cImNoZXZyb25cIj5cbiAgICAgIDxyaXYtaWNvbiBbbmFtZV09XCInQ2FsZW5kYXInXCIgW3NpemVdPVwiMTZcIj48L3Jpdi1pY29uPlxuICAgIDwvc3Bhbj5cbiAgPC9idXR0b24+XG48L3Jpdi1pbnB1dC1sYWJlbD5cbjxuZy1jb250YWluZXIgKm5nSWY9XCJvcGVuJCB8IGFzeW5jXCI+XG4gIDxyaXYtY2FsbG91dFxuICAgICpyaXYtb3ZlcmxheVxuICAgIFthbmNob3JdPVwidHJpZ2dlclwiXG4gICAgW3Nob3dDYXJldF09XCJmYWxzZVwiXG4gICAgW3RoZW1lXT1cIidsaWdodCdcIlxuICAgIFthbGxvd2VkUG9zaXRpb25zXT1cIltcbiAgICAgICd0b3AtbGVmdCcsXG4gICAgICAndG9wLXJpZ2h0JyxcbiAgICAgICdib3R0b20tcmlnaHQnLFxuICAgICAgJ2JvdHRvbS1sZWZ0J1xuICAgIF1cIlxuICAgIFtwcmVmZXJyZWRQb3NpdGlvbl09XCInYm90dG9tLXJpZ2h0J1wiXG4gICAgKGNsb3NlKT1cIm9wZW4kLm5leHQoZmFsc2UpXCJcbiAgPlxuICAgIDxoZWFkZXIgKm5nSWY9XCJoZWFkZXJUZW1wbGF0ZVwiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImhlYWRlclRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9oZWFkZXI+XG4gICAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIj5cbiAgICAgIDxyaXYtY2FsZW5kYXJcbiAgICAgICAgW2FjdGl2ZVllYXJNb250aF09XCJhY3RpdmVZZWFyTW9udGhcIlxuICAgICAgICAoYWN0aXZlWWVhck1vbnRoQ2hhbmdlKT1cImFjdGl2ZVllYXJNb250aCA9ICRldmVudFwiXG4gICAgICAgIFtkaXNwbGF5TWluXT1cIm1pblwiXG4gICAgICAgIFtkaXNwbGF5TWF4XT1cIm1heFwiXG4gICAgICAgIFtzZWxlY3RhYmxlTWluXT1cIm1pblwiXG4gICAgICAgIFtzZWxlY3RhYmxlTWF4XT1cIm1heFwiXG4gICAgICAgIFtzZWxlY3RlZFZhbHVlXT1cInZhbHVlXCJcbiAgICAgICAgKGRhdGVTZWxlY3QpPVwidmFsdWVDaGFuZ2UubmV4dCgkZXZlbnQpOyBvcGVuJC5uZXh0KGZhbHNlKVwiXG4gICAgICA+PC9yaXYtY2FsZW5kYXI+XG4gICAgPC9kaXY+XG4gICAgPGZvb3RlciAqbmdJZj1cInNob3dDbGVhckJ1dHRvblwiIGNsYXNzPVwiYnV0dG9uc1wiPlxuICAgICAgPGJ1dHRvblxuICAgICAgICByaXZCdXR0b25cbiAgICAgICAgW3NpemVdPVwiJ3NtYWxsJ1wiXG4gICAgICAgIFt2YXJpYW50XT1cIidnaG9zdCdcIlxuICAgICAgICAoY2xpY2spPVwiY2xlYXJWYWx1ZSgpXCJcbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICA+XG4gICAgICAgIENsZWFyXG4gICAgICA8L2J1dHRvbj5cbiAgICA8L2Zvb3Rlcj5cbiAgPC9yaXYtY2FsbG91dD5cbjwvbmctY29udGFpbmVyPlxuIl19

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

@@ -4015,6 +4015,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();
@@ -4040,12 +4041,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: [{
@@ -4058,6 +4063,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']
@@ -5747,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;
     }
@@ -5758,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: [{
@@ -6023,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"] }]