@rivet-health/design-system 40.3.0 → 40.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/input/date/date.component.mjs +16 -3
- package/esm2020/lib/navigation/views/edit-view/edit-view.component.mjs +44 -85
- package/esm2020/lib/navigation/views/permission-picker/permission-picker.component.mjs +151 -0
- package/esm2020/lib/navigation/views/state.mjs +2 -2
- package/esm2020/lib/riv.module.mjs +6 -1
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/rivet-health-design-system.mjs +163 -48
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +169 -48
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/date/date.component.d.ts +4 -1
- package/lib/navigation/views/edit-view/edit-view.component.d.ts +8 -21
- package/lib/navigation/views/permission-picker/permission-picker.component.d.ts +37 -0
- package/lib/navigation/views/state.d.ts +1 -1
- package/lib/riv.module.d.ts +48 -47
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -9,6 +9,7 @@ import { timeFormat, utcFormat } from 'd3-time-format';
|
|
|
9
9
|
import { defaultsDeep, sortBy, isNumber, flattenDeep, debounce, isEqual, cloneDeep, orderBy, range, toInteger, difference, union, sum, uniq } from 'lodash';
|
|
10
10
|
import Fuse from 'fuse.js';
|
|
11
11
|
import { query, style, animate, trigger, transition, group } from '@angular/animations';
|
|
12
|
+
import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
|
|
12
13
|
import * as i2 from '@angular/router';
|
|
13
14
|
import { RouterModule } from '@angular/router';
|
|
14
15
|
import * as p from 'papaparse';
|
|
@@ -4018,6 +4019,7 @@ class DateComponent extends InputLabelComponent {
|
|
|
4018
4019
|
this.disabled = false;
|
|
4019
4020
|
this.size = 'medium';
|
|
4020
4021
|
this.showClearButton = true;
|
|
4022
|
+
this.showTodayButton = true;
|
|
4021
4023
|
this.activeYearMonth = timeMonth.floor(new Date());
|
|
4022
4024
|
this.open$ = new BehaviorSubject(false);
|
|
4023
4025
|
this.valueChange = new EventEmitter();
|
|
@@ -4063,6 +4065,16 @@ class DateComponent extends InputLabelComponent {
|
|
|
4063
4065
|
this.commit(undefined);
|
|
4064
4066
|
this.open$.next(false);
|
|
4065
4067
|
}
|
|
4068
|
+
selectToday() {
|
|
4069
|
+
const today = timeDay.floor(new Date());
|
|
4070
|
+
if (!DateComponent.isValidDate(today, this.min, this.max))
|
|
4071
|
+
return;
|
|
4072
|
+
this.commit(today);
|
|
4073
|
+
this.open$.next(false);
|
|
4074
|
+
}
|
|
4075
|
+
get isTodaySelectable() {
|
|
4076
|
+
return DateComponent.isValidDate(timeDay.floor(new Date()), this.min, this.max);
|
|
4077
|
+
}
|
|
4066
4078
|
onInputChange(value) {
|
|
4067
4079
|
this.inputText = value;
|
|
4068
4080
|
const parsed = this.parseInput(value);
|
|
@@ -4137,10 +4149,10 @@ class DateComponent extends InputLabelComponent {
|
|
|
4137
4149
|
}
|
|
4138
4150
|
}
|
|
4139
4151
|
DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4140
|
-
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" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" } }, 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 <div\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 [class.disabled]=\"disabled\"\n >\n <input\n #input\n class=\"value\"\n [placeholder]=\"placeholder\"\n [value]=\"inputText\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label || null\"\n [attr.aria-expanded]=\"open$ | async\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n aria-autocomplete=\"none\"\n (input)=\"onInputChange(input.value)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus()\"\n (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n type=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n />\n <button\n class=\"chevron\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleCalendar()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </button>\n </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [isModal]=\"false\"\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 <div (mousedown)=\"$event.preventDefault()\">\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]=\"previewValue ?? value\"\n (dateSelect)=\"onDateSelect($event); input.blur()\"\n ></riv-calendar>\n </div>\n <footer *ngIf=\"showClearButton\" class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"clearValue(); input.blur()\"\n type=\"button\"\n >\n Clear\n </button>\n </footer>\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);padding-left:var(--size-small);position:relative}.trigger:focus-within{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;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-disabled)}.value:disabled{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);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.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-
|
|
4152
|
+
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", showTodayButton: "showTodayButton", open: "open" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" } }, 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 <div\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 [class.disabled]=\"disabled\"\n >\n <input\n #input\n class=\"value\"\n [placeholder]=\"placeholder\"\n [value]=\"inputText\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label || null\"\n [attr.aria-expanded]=\"open$ | async\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n aria-autocomplete=\"none\"\n (input)=\"onInputChange(input.value)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus()\"\n (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n type=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n />\n <button\n class=\"chevron\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleCalendar()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </button>\n </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [isModal]=\"false\"\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 <div (mousedown)=\"$event.preventDefault()\">\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]=\"previewValue ?? value\"\n (dateSelect)=\"onDateSelect($event); input.blur()\"\n ></riv-calendar>\n </div>\n <footer *ngIf=\"showClearButton || showTodayButton\" class=\"buttons\">\n <button\n *ngIf=\"showClearButton\"\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"clearValue(); input.blur()\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n *ngIf=\"showTodayButton\"\n class=\"today\"\n rivButton\n [size]=\"'small'\"\n [variant]=\"'basic'\"\n [disabled]=\"!isTodaySelectable\"\n (click)=\"selectToday(); input.blur()\"\n type=\"button\"\n >\n Today\n </button>\n </footer>\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);padding-left:var(--size-small);position:relative}.trigger:focus-within{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;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-disabled)}.value:disabled{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);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.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-xlarge)}.buttons{padding:0 var(--size-xlarge) var(--size-xlarge);display:flex;justify-content:space-between}.buttons .today{margin-left:auto}\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4141
4153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
|
|
4142
4154
|
type: Component,
|
|
4143
|
-
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 <div\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 [class.disabled]=\"disabled\"\n >\n <input\n #input\n class=\"value\"\n [placeholder]=\"placeholder\"\n [value]=\"inputText\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label || null\"\n [attr.aria-expanded]=\"open$ | async\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n aria-autocomplete=\"none\"\n (input)=\"onInputChange(input.value)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus()\"\n (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n type=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n />\n <button\n class=\"chevron\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleCalendar()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </button>\n </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [isModal]=\"false\"\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 <div (mousedown)=\"$event.preventDefault()\">\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]=\"previewValue ?? value\"\n (dateSelect)=\"onDateSelect($event); input.blur()\"\n ></riv-calendar>\n </div>\n <footer *ngIf=\"showClearButton\" class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"clearValue(); input.blur()\"\n type=\"button\"\n >\n Clear\n </button>\n </footer>\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);padding-left:var(--size-small);position:relative}.trigger:focus-within{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;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-disabled)}.value:disabled{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);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.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-
|
|
4155
|
+
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 <div\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 [class.disabled]=\"disabled\"\n >\n <input\n #input\n class=\"value\"\n [placeholder]=\"placeholder\"\n [value]=\"inputText\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label || null\"\n [attr.aria-expanded]=\"open$ | async\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n aria-autocomplete=\"none\"\n (input)=\"onInputChange(input.value)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus()\"\n (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n type=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n />\n <button\n class=\"chevron\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleCalendar()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </button>\n </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [isModal]=\"false\"\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 <div (mousedown)=\"$event.preventDefault()\">\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]=\"previewValue ?? value\"\n (dateSelect)=\"onDateSelect($event); input.blur()\"\n ></riv-calendar>\n </div>\n <footer *ngIf=\"showClearButton || showTodayButton\" class=\"buttons\">\n <button\n *ngIf=\"showClearButton\"\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"clearValue(); input.blur()\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n *ngIf=\"showTodayButton\"\n class=\"today\"\n rivButton\n [size]=\"'small'\"\n [variant]=\"'basic'\"\n [disabled]=\"!isTodaySelectable\"\n (click)=\"selectToday(); input.blur()\"\n type=\"button\"\n >\n Today\n </button>\n </footer>\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);padding-left:var(--size-small);position:relative}.trigger:focus-within{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;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-disabled)}.value:disabled{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);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.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-xlarge)}.buttons{padding:0 var(--size-xlarge) var(--size-xlarge);display:flex;justify-content:space-between}.buttons .today{margin-left:auto}\n"] }]
|
|
4144
4156
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { min: [{
|
|
4145
4157
|
type: Input
|
|
4146
4158
|
}], max: [{
|
|
@@ -4155,6 +4167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4155
4167
|
type: Input
|
|
4156
4168
|
}], showClearButton: [{
|
|
4157
4169
|
type: Input
|
|
4170
|
+
}], showTodayButton: [{
|
|
4171
|
+
type: Input
|
|
4158
4172
|
}], headerTemplate: [{
|
|
4159
4173
|
type: ContentChild,
|
|
4160
4174
|
args: ['header']
|
|
@@ -5379,7 +5393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
5379
5393
|
|
|
5380
5394
|
var RivViews;
|
|
5381
5395
|
(function (RivViews) {
|
|
5382
|
-
RivViews.ViewPermissions = ['private', '
|
|
5396
|
+
RivViews.ViewPermissions = ['private', 'shared', 'public'];
|
|
5383
5397
|
RivViews.MenuContexts = ['tab', 'all-views', 'overflow'];
|
|
5384
5398
|
RivViews.UserSelectModes = ['select', 'search-select'];
|
|
5385
5399
|
function createManager({ source, save, duplicate, userSource, userSelectMode, onAddUser, newTooltip, copyLink, options, setActiveViewId, }) {
|
|
@@ -5914,15 +5928,15 @@ const subtitles = {
|
|
|
5914
5928
|
public: 'Visible to everyone',
|
|
5915
5929
|
shared: 'Only visible to those with access',
|
|
5916
5930
|
};
|
|
5917
|
-
class
|
|
5931
|
+
class PermissionPickerComponent {
|
|
5918
5932
|
constructor(cdr) {
|
|
5919
5933
|
this.cdr = cdr;
|
|
5920
|
-
this.
|
|
5934
|
+
this.permission = 'private';
|
|
5935
|
+
this.sharedUsers = [];
|
|
5921
5936
|
this.userSelectMode = 'select';
|
|
5922
|
-
this.
|
|
5923
|
-
this.
|
|
5924
|
-
this.
|
|
5925
|
-
this.close = new EventEmitter();
|
|
5937
|
+
this.disabledPermissions = [];
|
|
5938
|
+
this.permissionChange = new EventEmitter();
|
|
5939
|
+
this.sharedUsersChange = new EventEmitter();
|
|
5926
5940
|
this.permissionOptions = RivViews.ViewPermissions.map(permission => ({
|
|
5927
5941
|
value: permission,
|
|
5928
5942
|
title: titles[permission],
|
|
@@ -5931,41 +5945,28 @@ class EditViewComponent {
|
|
|
5931
5945
|
this.userOptions = [];
|
|
5932
5946
|
this.selectedUsers = [];
|
|
5933
5947
|
}
|
|
5934
|
-
resetView() {
|
|
5935
|
-
this.editedView = cloneDeep(this.view);
|
|
5936
|
-
this.setUpUserSelectManager();
|
|
5937
|
-
}
|
|
5938
5948
|
ngOnInit() {
|
|
5939
|
-
this.
|
|
5949
|
+
this.setUpUserSelectManager();
|
|
5940
5950
|
}
|
|
5941
5951
|
ngOnChanges(changes) {
|
|
5942
|
-
|
|
5943
|
-
|
|
5952
|
+
// ngOnInit performs the initial setup, so ignore first-change events here.
|
|
5953
|
+
// Rebuild only on a genuine change: a new data source, a mode switch, or a
|
|
5954
|
+
// value-level change to the seeded selection. Comparing sharedUsers by value
|
|
5955
|
+
// (rather than reference) is essential — the parent binds a fresh array each
|
|
5956
|
+
// change-detection cycle, and reacting to that reference churn would rebuild
|
|
5957
|
+
// the manager on every cycle.
|
|
5958
|
+
const userSourceChanged = changes['userSource'] && !changes['userSource'].firstChange;
|
|
5959
|
+
const userSelectModeChanged = changes['userSelectMode'] && !changes['userSelectMode'].firstChange;
|
|
5960
|
+
const sharedUsersChanged = changes['sharedUsers'] &&
|
|
5961
|
+
!changes['sharedUsers'].firstChange &&
|
|
5962
|
+
!isEqual(changes['sharedUsers'].previousValue, changes['sharedUsers'].currentValue);
|
|
5963
|
+
if (userSourceChanged || userSelectModeChanged || sharedUsersChanged) {
|
|
5964
|
+
this.setUpUserSelectManager();
|
|
5944
5965
|
}
|
|
5945
5966
|
}
|
|
5946
5967
|
ngOnDestroy() {
|
|
5947
5968
|
this.tearDownUserSelectManager();
|
|
5948
5969
|
}
|
|
5949
|
-
canEdit() {
|
|
5950
|
-
return this.mode === 'edit';
|
|
5951
|
-
}
|
|
5952
|
-
isClean() {
|
|
5953
|
-
return isEqual(this.editedView, this.view);
|
|
5954
|
-
}
|
|
5955
|
-
titleChange(value) {
|
|
5956
|
-
if (this.editedView)
|
|
5957
|
-
this.editedView.title = value;
|
|
5958
|
-
}
|
|
5959
|
-
permissionChange(value) {
|
|
5960
|
-
if (this.editedView)
|
|
5961
|
-
this.editedView.permission = value;
|
|
5962
|
-
}
|
|
5963
|
-
getSharedUsers(view) {
|
|
5964
|
-
if (RivViews.isSharedView(view)) {
|
|
5965
|
-
return view.sharedUsers;
|
|
5966
|
-
}
|
|
5967
|
-
return [];
|
|
5968
|
-
}
|
|
5969
5970
|
tearDownUserSelectManager() {
|
|
5970
5971
|
var _a;
|
|
5971
5972
|
(_a = this.userSelectSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
@@ -5979,7 +5980,7 @@ class EditViewComponent {
|
|
|
5979
5980
|
var _a;
|
|
5980
5981
|
return (Object.assign(Object.assign({}, u), { new: (_a = u.new) !== null && _a !== void 0 ? _a : false }));
|
|
5981
5982
|
});
|
|
5982
|
-
this.selectedUsers = this.
|
|
5983
|
+
this.selectedUsers = this.sharedUsers.map(u => {
|
|
5983
5984
|
var _a;
|
|
5984
5985
|
return (Object.assign(Object.assign({}, u), { new: (_a = u.new) !== null && _a !== void 0 ? _a : false }));
|
|
5985
5986
|
});
|
|
@@ -5993,24 +5994,39 @@ class EditViewComponent {
|
|
|
5993
5994
|
displayLimit: 500,
|
|
5994
5995
|
initialState: {
|
|
5995
5996
|
selection: {
|
|
5996
|
-
selected: new RivSelect.OptionSet(this.
|
|
5997
|
+
selected: new RivSelect.OptionSet(this.sharedUsers),
|
|
5997
5998
|
},
|
|
5998
5999
|
},
|
|
5999
6000
|
});
|
|
6000
|
-
this.userSelectSubscription = this.userSelectManager.state
|
|
6001
|
-
|
|
6002
|
-
|
|
6001
|
+
this.userSelectSubscription = this.userSelectManager.state
|
|
6002
|
+
.pipe(map$1(state => [...state.selection.selected]), distinctUntilChanged$1(isEqual))
|
|
6003
|
+
.subscribe(users => {
|
|
6004
|
+
// The manager replays its initial (seeded) selection synchronously on
|
|
6005
|
+
// subscribe. Emitting that back would echo the sharedUsers input to
|
|
6006
|
+
// the parent, which mutates its view and feeds a new array reference
|
|
6007
|
+
// straight back into this component — an infinite change-detection
|
|
6008
|
+
// loop. Only propagate genuine, user-driven selection changes.
|
|
6009
|
+
if (!isEqual(users, this.sharedUsers)) {
|
|
6010
|
+
this.sharedUsersChange.emit(users);
|
|
6003
6011
|
}
|
|
6004
6012
|
});
|
|
6005
6013
|
this.userSelectManager.actions.next({ type: 'load' });
|
|
6006
6014
|
}
|
|
6007
6015
|
});
|
|
6008
6016
|
}
|
|
6017
|
+
onPermissionClick(value) {
|
|
6018
|
+
if (this.isDisabled(value)) {
|
|
6019
|
+
return;
|
|
6020
|
+
}
|
|
6021
|
+
this.permissionChange.emit(value);
|
|
6022
|
+
}
|
|
6023
|
+
isDisabled(permission) {
|
|
6024
|
+
var _a, _b;
|
|
6025
|
+
return (_b = (_a = this.disabledPermissions) === null || _a === void 0 ? void 0 : _a.includes(permission)) !== null && _b !== void 0 ? _b : false;
|
|
6026
|
+
}
|
|
6009
6027
|
onSelectedUsersChange(users) {
|
|
6010
6028
|
this.selectedUsers = users;
|
|
6011
|
-
|
|
6012
|
-
this.editedView.sharedUsers = RivViews.toSharedUsers(users);
|
|
6013
|
-
}
|
|
6029
|
+
this.sharedUsersChange.emit(RivViews.toSharedUsers(users));
|
|
6014
6030
|
}
|
|
6015
6031
|
handleAddUser(searchText) {
|
|
6016
6032
|
if (!this.onAddUser)
|
|
@@ -6018,17 +6034,112 @@ class EditViewComponent {
|
|
|
6018
6034
|
const newUser = this.onAddUser(searchText);
|
|
6019
6035
|
this.userOptions = [...this.userOptions, newUser];
|
|
6020
6036
|
this.selectedUsers = [...this.selectedUsers, newUser];
|
|
6037
|
+
this.sharedUsersChange.emit(RivViews.toSharedUsers(this.selectedUsers));
|
|
6038
|
+
this.cdr.markForCheck();
|
|
6039
|
+
}
|
|
6040
|
+
}
|
|
6041
|
+
PermissionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PermissionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6042
|
+
PermissionPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PermissionPickerComponent, selector: "riv-permission-picker", inputs: { permission: "permission", sharedUsers: "sharedUsers", userSelectMode: "userSelectMode", userSource: "userSource", onAddUser: "onAddUser", newTooltip: "newTooltip", disabledPermissions: "disabledPermissions" }, outputs: { permissionChange: "permissionChange", sharedUsersChange: "sharedUsersChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"permission-picker\">\n <div class=\"permission-label\">View permissions</div>\n\n <div class=\"permission-options\">\n <button\n *ngFor=\"let option of permissionOptions\"\n class=\"permission-option\"\n [class.current]=\"permission === option.value\"\n [class.disabled]=\"isDisabled(option.value)\"\n type=\"button\"\n [attr.aria-checked]=\"permission === option.value\"\n [attr.aria-label]=\"option.title + ' permission'\"\n [attr.aria-disabled]=\"isDisabled(option.value)\"\n (click)=\"onPermissionClick(option.value)\"\n >\n <div class=\"option-content\">\n <div class=\"option-title\">\n <span>{{ option.title }}</span>\n <span class=\"option-description\">{{ option.subtitle }}</span>\n </div>\n <riv-icon\n *ngIf=\"permission === option.value\"\n class=\"permission-indicator\"\n [name]=\"'Check'\"\n [size]=\"16\"\n ></riv-icon>\n </div>\n <riv-select\n *ngIf=\"\n permission === 'shared' &&\n option.value === 'shared' &&\n userSelectMode === 'select' &&\n userSelectManager\n \"\n [label]=\"'Users with access'\"\n [manager]=\"userSelectManager\"\n ></riv-select>\n <riv-search-select\n *ngIf=\"\n permission === 'shared' &&\n option.value === 'shared' &&\n userSelectMode === 'search-select'\n \"\n (click)=\"$event.stopPropagation()\"\n [label]=\"'Users with access'\"\n [options]=\"userOptions\"\n [selected]=\"selectedUsers\"\n [placeholder]=\"'Search users'\"\n [addNewLabel]=\"'Add'\"\n [newTooltip]=\"newTooltip\"\n (selectedChange)=\"onSelectedUsersChange($event)\"\n (addNew)=\"handleAddUser($event)\"\n ></riv-search-select>\n </button>\n </div>\n</div>\n", styles: [".permission-picker{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label{font:var(--title-02)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover:not(.disabled){background-color:var(--surface-light-1)}.permission-option:active:not(.disabled),.permission-option.current{background-color:var(--surface-light-2)}.permission-option.disabled{cursor:not-allowed;opacity:.5}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SearchSelectComponent, selector: "riv-search-select", inputs: ["options", "selected", "placeholder", "addNewLabel", "newTooltip", "size", "disabled", "label", "help", "required", "state", "errorMessage", "optionTemplate", "chipTemplate"], outputs: ["selectedChange", "addNew"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6043
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PermissionPickerComponent, decorators: [{
|
|
6044
|
+
type: Component,
|
|
6045
|
+
args: [{ selector: 'riv-permission-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"permission-picker\">\n <div class=\"permission-label\">View permissions</div>\n\n <div class=\"permission-options\">\n <button\n *ngFor=\"let option of permissionOptions\"\n class=\"permission-option\"\n [class.current]=\"permission === option.value\"\n [class.disabled]=\"isDisabled(option.value)\"\n type=\"button\"\n [attr.aria-checked]=\"permission === option.value\"\n [attr.aria-label]=\"option.title + ' permission'\"\n [attr.aria-disabled]=\"isDisabled(option.value)\"\n (click)=\"onPermissionClick(option.value)\"\n >\n <div class=\"option-content\">\n <div class=\"option-title\">\n <span>{{ option.title }}</span>\n <span class=\"option-description\">{{ option.subtitle }}</span>\n </div>\n <riv-icon\n *ngIf=\"permission === option.value\"\n class=\"permission-indicator\"\n [name]=\"'Check'\"\n [size]=\"16\"\n ></riv-icon>\n </div>\n <riv-select\n *ngIf=\"\n permission === 'shared' &&\n option.value === 'shared' &&\n userSelectMode === 'select' &&\n userSelectManager\n \"\n [label]=\"'Users with access'\"\n [manager]=\"userSelectManager\"\n ></riv-select>\n <riv-search-select\n *ngIf=\"\n permission === 'shared' &&\n option.value === 'shared' &&\n userSelectMode === 'search-select'\n \"\n (click)=\"$event.stopPropagation()\"\n [label]=\"'Users with access'\"\n [options]=\"userOptions\"\n [selected]=\"selectedUsers\"\n [placeholder]=\"'Search users'\"\n [addNewLabel]=\"'Add'\"\n [newTooltip]=\"newTooltip\"\n (selectedChange)=\"onSelectedUsersChange($event)\"\n (addNew)=\"handleAddUser($event)\"\n ></riv-search-select>\n </button>\n </div>\n</div>\n", styles: [".permission-picker{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label{font:var(--title-02)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover:not(.disabled){background-color:var(--surface-light-1)}.permission-option:active:not(.disabled),.permission-option.current{background-color:var(--surface-light-2)}.permission-option.disabled{cursor:not-allowed;opacity:.5}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}\n"] }]
|
|
6046
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { permission: [{
|
|
6047
|
+
type: Input
|
|
6048
|
+
}], sharedUsers: [{
|
|
6049
|
+
type: Input
|
|
6050
|
+
}], userSelectMode: [{
|
|
6051
|
+
type: Input
|
|
6052
|
+
}], userSource: [{
|
|
6053
|
+
type: Input
|
|
6054
|
+
}], onAddUser: [{
|
|
6055
|
+
type: Input
|
|
6056
|
+
}], newTooltip: [{
|
|
6057
|
+
type: Input
|
|
6058
|
+
}], disabledPermissions: [{
|
|
6059
|
+
type: Input
|
|
6060
|
+
}], permissionChange: [{
|
|
6061
|
+
type: Output
|
|
6062
|
+
}], sharedUsersChange: [{
|
|
6063
|
+
type: Output
|
|
6064
|
+
}] } });
|
|
6065
|
+
|
|
6066
|
+
class EditViewComponent {
|
|
6067
|
+
constructor(cdr) {
|
|
6068
|
+
this.cdr = cdr;
|
|
6069
|
+
this.autoSelectName = false;
|
|
6070
|
+
this.userSelectMode = 'select';
|
|
6071
|
+
this.mode = 'edit';
|
|
6072
|
+
this.save = new EventEmitter();
|
|
6073
|
+
this.delete = new EventEmitter();
|
|
6074
|
+
this.close = new EventEmitter();
|
|
6075
|
+
}
|
|
6076
|
+
resetView() {
|
|
6077
|
+
this.editedView = cloneDeep(this.view);
|
|
6078
|
+
}
|
|
6079
|
+
ngOnInit() {
|
|
6080
|
+
this.resetView();
|
|
6081
|
+
}
|
|
6082
|
+
ngOnChanges(changes) {
|
|
6083
|
+
if (changes['view']) {
|
|
6084
|
+
this.resetView();
|
|
6085
|
+
}
|
|
6086
|
+
}
|
|
6087
|
+
canEdit() {
|
|
6088
|
+
return this.mode === 'edit';
|
|
6089
|
+
}
|
|
6090
|
+
isClean() {
|
|
6091
|
+
return isEqual(this.editedView, this.view);
|
|
6092
|
+
}
|
|
6093
|
+
titleChange(value) {
|
|
6094
|
+
if (this.editedView)
|
|
6095
|
+
this.editedView.title = value;
|
|
6096
|
+
// These handlers fire from the permission picker / text field, which render
|
|
6097
|
+
// in the overlay outlet's change-detection subtree — a different branch than
|
|
6098
|
+
// this OnPush component. Without markForCheck the updated editedView never
|
|
6099
|
+
// flows back into the child input bindings (e.g. the highlighted option).
|
|
6100
|
+
this.cdr.markForCheck();
|
|
6101
|
+
}
|
|
6102
|
+
onPermissionChange(value) {
|
|
6103
|
+
if (!this.editedView)
|
|
6104
|
+
return;
|
|
6105
|
+
if (value === 'shared') {
|
|
6106
|
+
if (!RivViews.isSharedView(this.editedView)) {
|
|
6107
|
+
this.editedView = Object.assign(Object.assign({}, this.editedView), { permission: 'shared', sharedUsers: [] });
|
|
6108
|
+
}
|
|
6109
|
+
}
|
|
6110
|
+
else {
|
|
6111
|
+
if (RivViews.isSharedView(this.editedView)) {
|
|
6112
|
+
const _a = this.editedView, { sharedUsers } = _a, rest = __rest(_a, ["sharedUsers"]);
|
|
6113
|
+
this.editedView = Object.assign(Object.assign({}, rest), { permission: value });
|
|
6114
|
+
}
|
|
6115
|
+
else {
|
|
6116
|
+
this.editedView.permission = value;
|
|
6117
|
+
}
|
|
6118
|
+
}
|
|
6119
|
+
this.cdr.markForCheck();
|
|
6120
|
+
}
|
|
6121
|
+
onSharedUsersChange(users) {
|
|
6021
6122
|
if (RivViews.isSharedView(this.editedView)) {
|
|
6022
|
-
this.editedView.sharedUsers =
|
|
6123
|
+
this.editedView.sharedUsers = users;
|
|
6023
6124
|
}
|
|
6024
6125
|
this.cdr.markForCheck();
|
|
6025
6126
|
}
|
|
6127
|
+
getSharedUsers(view) {
|
|
6128
|
+
if (RivViews.isSharedView(view)) {
|
|
6129
|
+
return view.sharedUsers;
|
|
6130
|
+
}
|
|
6131
|
+
return EditViewComponent.NO_SHARED_USERS;
|
|
6132
|
+
}
|
|
6026
6133
|
}
|
|
6134
|
+
// Stable empty-array reference for the non-shared branch, so this getter
|
|
6135
|
+
// doesn't hand the permission picker a fresh [] on every change-detection
|
|
6136
|
+
// cycle (which would churn its @Input and trigger needless work).
|
|
6137
|
+
EditViewComponent.NO_SHARED_USERS = [];
|
|
6027
6138
|
EditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6028
|
-
EditViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EditViewComponent, selector: "riv-edit-view", inputs: { anchor: "anchor", autoSelectName: "autoSelectName", view: "view", userSource: "userSource", userSelectMode: "userSelectMode", onAddUser: "onAddUser", newTooltip: "newTooltip", mode: "mode" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"editedView; let ev\">\n <riv-callout\n *riv-overlay\n [anchor]=\"anchor ?? null\"\n [isModal]=\"true\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [preferredPosition]=\"'bottom-right'\"\n [fallbackDirection]=\"'clockwise'\"\n (close)=\"close.emit()\"\n >\n <div class=\"edit-view\">\n <div class=\"name-input\">\n <span class=\"name-label\">Name * </span>\n <riv-text-field\n [autoFocus]=\"autoSelectName ? 'select' : false\"\n [value]=\"ev.title ?? ''\"\n (valueChange)=\"titleChange($event)\"\n ></riv-text-field>\n </div>\n\n <hr class=\"divider\" />\n\n <
|
|
6139
|
+
EditViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EditViewComponent, selector: "riv-edit-view", inputs: { anchor: "anchor", autoSelectName: "autoSelectName", view: "view", userSource: "userSource", userSelectMode: "userSelectMode", onAddUser: "onAddUser", newTooltip: "newTooltip", mode: "mode" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"editedView; let ev\">\n <riv-callout\n *riv-overlay\n [anchor]=\"anchor ?? null\"\n [isModal]=\"true\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [preferredPosition]=\"'bottom-right'\"\n [fallbackDirection]=\"'clockwise'\"\n (close)=\"close.emit()\"\n >\n <div class=\"edit-view\">\n <div class=\"name-input\">\n <span class=\"name-label\">Name * </span>\n <riv-text-field\n [autoFocus]=\"autoSelectName ? 'select' : false\"\n [value]=\"ev.title ?? ''\"\n (valueChange)=\"titleChange($event)\"\n ></riv-text-field>\n </div>\n\n <hr class=\"divider\" />\n\n <riv-permission-picker\n [permission]=\"ev.permission\"\n [sharedUsers]=\"getSharedUsers(ev)\"\n [userSelectMode]=\"userSelectMode\"\n [userSource]=\"userSource\"\n [onAddUser]=\"onAddUser\"\n [newTooltip]=\"newTooltip\"\n (permissionChange)=\"onPermissionChange($event)\"\n (sharedUsersChange)=\"onSharedUsersChange($event)\"\n ></riv-permission-picker>\n\n <hr class=\"divider\" />\n\n <div class=\"actions\">\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'Trash2'\"\n (click)=\"delete.emit(ev); close.emit()\"\n *ngIf=\"canEdit()\"\n >\n Delete\n </button>\n\n <div class=\"actions-spacer\"></div>\n\n <div class=\"primary-actions\">\n <button rivButton [variant]=\"'ghost'\" (click)=\"close.emit()\">\n Cancel\n </button>\n <button\n rivButton\n [variant]=\"'primary'\"\n [disabled]=\"canEdit() && isClean()\"\n (click)=\"save.emit(ev); close.emit()\"\n >\n Save\n </button>\n </div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: PermissionPickerComponent, selector: "riv-permission-picker", inputs: ["permission", "sharedUsers", "userSelectMode", "userSource", "onAddUser", "newTooltip", "disabledPermissions"], outputs: ["permissionChange", "sharedUsersChange"] }, { kind: "component", type: TextFieldComponent, selector: "riv-text-field", inputs: ["disabled", "readonly", "placeholder", "casing", "type", "size", "autoFocus", "name", "minLength", "maxLength", "value"], outputs: ["valueChange", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6029
6140
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, decorators: [{
|
|
6030
6141
|
type: Component,
|
|
6031
|
-
args: [{ selector: 'riv-edit-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"editedView; let ev\">\n <riv-callout\n *riv-overlay\n [anchor]=\"anchor ?? null\"\n [isModal]=\"true\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [preferredPosition]=\"'bottom-right'\"\n [fallbackDirection]=\"'clockwise'\"\n (close)=\"close.emit()\"\n >\n <div class=\"edit-view\">\n <div class=\"name-input\">\n <span class=\"name-label\">Name * </span>\n <riv-text-field\n [autoFocus]=\"autoSelectName ? 'select' : false\"\n [value]=\"ev.title ?? ''\"\n (valueChange)=\"titleChange($event)\"\n ></riv-text-field>\n </div>\n\n <hr class=\"divider\" />\n\n <
|
|
6142
|
+
args: [{ selector: 'riv-edit-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"editedView; let ev\">\n <riv-callout\n *riv-overlay\n [anchor]=\"anchor ?? null\"\n [isModal]=\"true\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [preferredPosition]=\"'bottom-right'\"\n [fallbackDirection]=\"'clockwise'\"\n (close)=\"close.emit()\"\n >\n <div class=\"edit-view\">\n <div class=\"name-input\">\n <span class=\"name-label\">Name * </span>\n <riv-text-field\n [autoFocus]=\"autoSelectName ? 'select' : false\"\n [value]=\"ev.title ?? ''\"\n (valueChange)=\"titleChange($event)\"\n ></riv-text-field>\n </div>\n\n <hr class=\"divider\" />\n\n <riv-permission-picker\n [permission]=\"ev.permission\"\n [sharedUsers]=\"getSharedUsers(ev)\"\n [userSelectMode]=\"userSelectMode\"\n [userSource]=\"userSource\"\n [onAddUser]=\"onAddUser\"\n [newTooltip]=\"newTooltip\"\n (permissionChange)=\"onPermissionChange($event)\"\n (sharedUsersChange)=\"onSharedUsersChange($event)\"\n ></riv-permission-picker>\n\n <hr class=\"divider\" />\n\n <div class=\"actions\">\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'Trash2'\"\n (click)=\"delete.emit(ev); close.emit()\"\n *ngIf=\"canEdit()\"\n >\n Delete\n </button>\n\n <div class=\"actions-spacer\"></div>\n\n <div class=\"primary-actions\">\n <button rivButton [variant]=\"'ghost'\" (click)=\"close.emit()\">\n Cancel\n </button>\n <button\n rivButton\n [variant]=\"'primary'\"\n [disabled]=\"canEdit() && isClean()\"\n (click)=\"save.emit(ev); close.emit()\"\n >\n Save\n </button>\n </div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"] }]
|
|
6032
6143
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
|
|
6033
6144
|
type: Input
|
|
6034
6145
|
}], autoSelectName: [{
|
|
@@ -14584,6 +14695,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
14584
14695
|
PageHeaderComponent,
|
|
14585
14696
|
PercentageFieldComponent,
|
|
14586
14697
|
PercentagePipe,
|
|
14698
|
+
PermissionPickerComponent,
|
|
14587
14699
|
PhoneFieldComponent,
|
|
14588
14700
|
ProgressComponent,
|
|
14589
14701
|
RadioComponent,
|
|
@@ -14679,6 +14791,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
14679
14791
|
PageHeaderComponent,
|
|
14680
14792
|
PercentageFieldComponent,
|
|
14681
14793
|
PercentagePipe,
|
|
14794
|
+
PermissionPickerComponent,
|
|
14682
14795
|
PhoneFieldComponent,
|
|
14683
14796
|
ProgressComponent,
|
|
14684
14797
|
RadioComponent,
|
|
@@ -14780,6 +14893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
14780
14893
|
PageHeaderComponent,
|
|
14781
14894
|
PercentageFieldComponent,
|
|
14782
14895
|
PercentagePipe,
|
|
14896
|
+
PermissionPickerComponent,
|
|
14783
14897
|
PhoneFieldComponent,
|
|
14784
14898
|
ProgressComponent,
|
|
14785
14899
|
RadioComponent,
|
|
@@ -14878,6 +14992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
14878
14992
|
PageHeaderComponent,
|
|
14879
14993
|
PercentageFieldComponent,
|
|
14880
14994
|
PercentagePipe,
|
|
14995
|
+
PermissionPickerComponent,
|
|
14881
14996
|
PhoneFieldComponent,
|
|
14882
14997
|
ProgressComponent,
|
|
14883
14998
|
RadioComponent,
|
|
@@ -14929,5 +15044,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
14929
15044
|
* Generated bundle index. Do not edit.
|
|
14930
15045
|
*/
|
|
14931
15046
|
|
|
14932
|
-
export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardCheckboxComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
|
|
15047
|
+
export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardCheckboxComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PermissionPickerComponent, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
|
|
14933
15048
|
//# sourceMappingURL=rivet-health-design-system.mjs.map
|