@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
|
@@ -8,6 +8,7 @@ import { timeFormat, utcFormat } from 'd3-time-format';
|
|
|
8
8
|
import { defaultsDeep, sortBy, isNumber, flattenDeep, debounce, isEqual, cloneDeep, orderBy, range, toInteger, difference, union, sum, uniq } from 'lodash';
|
|
9
9
|
import Fuse from 'fuse.js';
|
|
10
10
|
import { query, style, animate, trigger, transition, group } from '@angular/animations';
|
|
11
|
+
import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
|
|
11
12
|
import * as i2 from '@angular/router';
|
|
12
13
|
import { RouterModule } from '@angular/router';
|
|
13
14
|
import * as p from 'papaparse';
|
|
@@ -4107,6 +4108,7 @@ class DateComponent extends InputLabelComponent {
|
|
|
4107
4108
|
this.disabled = false;
|
|
4108
4109
|
this.size = 'medium';
|
|
4109
4110
|
this.showClearButton = true;
|
|
4111
|
+
this.showTodayButton = true;
|
|
4110
4112
|
this.activeYearMonth = timeMonth.floor(new Date());
|
|
4111
4113
|
this.open$ = new BehaviorSubject(false);
|
|
4112
4114
|
this.valueChange = new EventEmitter();
|
|
@@ -4151,6 +4153,16 @@ class DateComponent extends InputLabelComponent {
|
|
|
4151
4153
|
this.commit(undefined);
|
|
4152
4154
|
this.open$.next(false);
|
|
4153
4155
|
}
|
|
4156
|
+
selectToday() {
|
|
4157
|
+
const today = timeDay.floor(new Date());
|
|
4158
|
+
if (!DateComponent.isValidDate(today, this.min, this.max))
|
|
4159
|
+
return;
|
|
4160
|
+
this.commit(today);
|
|
4161
|
+
this.open$.next(false);
|
|
4162
|
+
}
|
|
4163
|
+
get isTodaySelectable() {
|
|
4164
|
+
return DateComponent.isValidDate(timeDay.floor(new Date()), this.min, this.max);
|
|
4165
|
+
}
|
|
4154
4166
|
onInputChange(value) {
|
|
4155
4167
|
this.inputText = value;
|
|
4156
4168
|
const parsed = this.parseInput(value);
|
|
@@ -4224,10 +4236,10 @@ class DateComponent extends InputLabelComponent {
|
|
|
4224
4236
|
}
|
|
4225
4237
|
}
|
|
4226
4238
|
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 });
|
|
4227
|
-
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-
|
|
4239
|
+
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 });
|
|
4228
4240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
|
|
4229
4241
|
type: Component,
|
|
4230
|
-
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-
|
|
4242
|
+
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"] }]
|
|
4231
4243
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { min: [{
|
|
4232
4244
|
type: Input
|
|
4233
4245
|
}], max: [{
|
|
@@ -4242,6 +4254,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4242
4254
|
type: Input
|
|
4243
4255
|
}], showClearButton: [{
|
|
4244
4256
|
type: Input
|
|
4257
|
+
}], showTodayButton: [{
|
|
4258
|
+
type: Input
|
|
4245
4259
|
}], headerTemplate: [{
|
|
4246
4260
|
type: ContentChild,
|
|
4247
4261
|
args: ['header']
|
|
@@ -5458,7 +5472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
5458
5472
|
|
|
5459
5473
|
var RivViews;
|
|
5460
5474
|
(function (RivViews) {
|
|
5461
|
-
RivViews.ViewPermissions = ['private', '
|
|
5475
|
+
RivViews.ViewPermissions = ['private', 'shared', 'public'];
|
|
5462
5476
|
RivViews.MenuContexts = ['tab', 'all-views', 'overflow'];
|
|
5463
5477
|
RivViews.UserSelectModes = ['select', 'search-select'];
|
|
5464
5478
|
function createManager({ source, save, duplicate, userSource, userSelectMode, onAddUser, newTooltip, copyLink, options, setActiveViewId, }) {
|
|
@@ -6096,15 +6110,15 @@ const subtitles = {
|
|
|
6096
6110
|
public: 'Visible to everyone',
|
|
6097
6111
|
shared: 'Only visible to those with access',
|
|
6098
6112
|
};
|
|
6099
|
-
class
|
|
6113
|
+
class PermissionPickerComponent {
|
|
6100
6114
|
constructor(cdr) {
|
|
6101
6115
|
this.cdr = cdr;
|
|
6102
|
-
this.
|
|
6116
|
+
this.permission = 'private';
|
|
6117
|
+
this.sharedUsers = [];
|
|
6103
6118
|
this.userSelectMode = 'select';
|
|
6104
|
-
this.
|
|
6105
|
-
this.
|
|
6106
|
-
this.
|
|
6107
|
-
this.close = new EventEmitter();
|
|
6119
|
+
this.disabledPermissions = [];
|
|
6120
|
+
this.permissionChange = new EventEmitter();
|
|
6121
|
+
this.sharedUsersChange = new EventEmitter();
|
|
6108
6122
|
this.permissionOptions = RivViews.ViewPermissions.map(permission => ({
|
|
6109
6123
|
value: permission,
|
|
6110
6124
|
title: titles[permission],
|
|
@@ -6113,41 +6127,28 @@ class EditViewComponent {
|
|
|
6113
6127
|
this.userOptions = [];
|
|
6114
6128
|
this.selectedUsers = [];
|
|
6115
6129
|
}
|
|
6116
|
-
resetView() {
|
|
6117
|
-
this.editedView = cloneDeep(this.view);
|
|
6118
|
-
this.setUpUserSelectManager();
|
|
6119
|
-
}
|
|
6120
6130
|
ngOnInit() {
|
|
6121
|
-
this.
|
|
6131
|
+
this.setUpUserSelectManager();
|
|
6122
6132
|
}
|
|
6123
6133
|
ngOnChanges(changes) {
|
|
6124
|
-
|
|
6125
|
-
|
|
6134
|
+
// ngOnInit performs the initial setup, so ignore first-change events here.
|
|
6135
|
+
// Rebuild only on a genuine change: a new data source, a mode switch, or a
|
|
6136
|
+
// value-level change to the seeded selection. Comparing sharedUsers by value
|
|
6137
|
+
// (rather than reference) is essential — the parent binds a fresh array each
|
|
6138
|
+
// change-detection cycle, and reacting to that reference churn would rebuild
|
|
6139
|
+
// the manager on every cycle.
|
|
6140
|
+
const userSourceChanged = changes['userSource'] && !changes['userSource'].firstChange;
|
|
6141
|
+
const userSelectModeChanged = changes['userSelectMode'] && !changes['userSelectMode'].firstChange;
|
|
6142
|
+
const sharedUsersChanged = changes['sharedUsers'] &&
|
|
6143
|
+
!changes['sharedUsers'].firstChange &&
|
|
6144
|
+
!isEqual(changes['sharedUsers'].previousValue, changes['sharedUsers'].currentValue);
|
|
6145
|
+
if (userSourceChanged || userSelectModeChanged || sharedUsersChanged) {
|
|
6146
|
+
this.setUpUserSelectManager();
|
|
6126
6147
|
}
|
|
6127
6148
|
}
|
|
6128
6149
|
ngOnDestroy() {
|
|
6129
6150
|
this.tearDownUserSelectManager();
|
|
6130
6151
|
}
|
|
6131
|
-
canEdit() {
|
|
6132
|
-
return this.mode === 'edit';
|
|
6133
|
-
}
|
|
6134
|
-
isClean() {
|
|
6135
|
-
return isEqual(this.editedView, this.view);
|
|
6136
|
-
}
|
|
6137
|
-
titleChange(value) {
|
|
6138
|
-
if (this.editedView)
|
|
6139
|
-
this.editedView.title = value;
|
|
6140
|
-
}
|
|
6141
|
-
permissionChange(value) {
|
|
6142
|
-
if (this.editedView)
|
|
6143
|
-
this.editedView.permission = value;
|
|
6144
|
-
}
|
|
6145
|
-
getSharedUsers(view) {
|
|
6146
|
-
if (RivViews.isSharedView(view)) {
|
|
6147
|
-
return view.sharedUsers;
|
|
6148
|
-
}
|
|
6149
|
-
return [];
|
|
6150
|
-
}
|
|
6151
6152
|
tearDownUserSelectManager() {
|
|
6152
6153
|
this.userSelectSubscription?.unsubscribe();
|
|
6153
6154
|
}
|
|
@@ -6159,7 +6160,7 @@ class EditViewComponent {
|
|
|
6159
6160
|
...u,
|
|
6160
6161
|
new: u.new ?? false,
|
|
6161
6162
|
}));
|
|
6162
|
-
this.selectedUsers = this.
|
|
6163
|
+
this.selectedUsers = this.sharedUsers.map(u => ({
|
|
6163
6164
|
...u,
|
|
6164
6165
|
new: u.new ?? false,
|
|
6165
6166
|
}));
|
|
@@ -6173,23 +6174,37 @@ class EditViewComponent {
|
|
|
6173
6174
|
displayLimit: 500,
|
|
6174
6175
|
initialState: {
|
|
6175
6176
|
selection: {
|
|
6176
|
-
selected: new RivSelect.OptionSet(this.
|
|
6177
|
+
selected: new RivSelect.OptionSet(this.sharedUsers),
|
|
6177
6178
|
},
|
|
6178
6179
|
},
|
|
6179
6180
|
});
|
|
6180
|
-
this.userSelectSubscription = this.userSelectManager.state
|
|
6181
|
-
|
|
6182
|
-
|
|
6181
|
+
this.userSelectSubscription = this.userSelectManager.state
|
|
6182
|
+
.pipe(map$1(state => [...state.selection.selected]), distinctUntilChanged$1(isEqual))
|
|
6183
|
+
.subscribe(users => {
|
|
6184
|
+
// The manager replays its initial (seeded) selection synchronously on
|
|
6185
|
+
// subscribe. Emitting that back would echo the sharedUsers input to
|
|
6186
|
+
// the parent, which mutates its view and feeds a new array reference
|
|
6187
|
+
// straight back into this component — an infinite change-detection
|
|
6188
|
+
// loop. Only propagate genuine, user-driven selection changes.
|
|
6189
|
+
if (!isEqual(users, this.sharedUsers)) {
|
|
6190
|
+
this.sharedUsersChange.emit(users);
|
|
6183
6191
|
}
|
|
6184
6192
|
});
|
|
6185
6193
|
this.userSelectManager.actions.next({ type: 'load' });
|
|
6186
6194
|
}
|
|
6187
6195
|
}
|
|
6196
|
+
onPermissionClick(value) {
|
|
6197
|
+
if (this.isDisabled(value)) {
|
|
6198
|
+
return;
|
|
6199
|
+
}
|
|
6200
|
+
this.permissionChange.emit(value);
|
|
6201
|
+
}
|
|
6202
|
+
isDisabled(permission) {
|
|
6203
|
+
return this.disabledPermissions?.includes(permission) ?? false;
|
|
6204
|
+
}
|
|
6188
6205
|
onSelectedUsersChange(users) {
|
|
6189
6206
|
this.selectedUsers = users;
|
|
6190
|
-
|
|
6191
|
-
this.editedView.sharedUsers = RivViews.toSharedUsers(users);
|
|
6192
|
-
}
|
|
6207
|
+
this.sharedUsersChange.emit(RivViews.toSharedUsers(users));
|
|
6193
6208
|
}
|
|
6194
6209
|
handleAddUser(searchText) {
|
|
6195
6210
|
if (!this.onAddUser)
|
|
@@ -6197,17 +6212,119 @@ class EditViewComponent {
|
|
|
6197
6212
|
const newUser = this.onAddUser(searchText);
|
|
6198
6213
|
this.userOptions = [...this.userOptions, newUser];
|
|
6199
6214
|
this.selectedUsers = [...this.selectedUsers, newUser];
|
|
6215
|
+
this.sharedUsersChange.emit(RivViews.toSharedUsers(this.selectedUsers));
|
|
6216
|
+
this.cdr.markForCheck();
|
|
6217
|
+
}
|
|
6218
|
+
}
|
|
6219
|
+
PermissionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PermissionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6220
|
+
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 });
|
|
6221
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PermissionPickerComponent, decorators: [{
|
|
6222
|
+
type: Component,
|
|
6223
|
+
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"] }]
|
|
6224
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { permission: [{
|
|
6225
|
+
type: Input
|
|
6226
|
+
}], sharedUsers: [{
|
|
6227
|
+
type: Input
|
|
6228
|
+
}], userSelectMode: [{
|
|
6229
|
+
type: Input
|
|
6230
|
+
}], userSource: [{
|
|
6231
|
+
type: Input
|
|
6232
|
+
}], onAddUser: [{
|
|
6233
|
+
type: Input
|
|
6234
|
+
}], newTooltip: [{
|
|
6235
|
+
type: Input
|
|
6236
|
+
}], disabledPermissions: [{
|
|
6237
|
+
type: Input
|
|
6238
|
+
}], permissionChange: [{
|
|
6239
|
+
type: Output
|
|
6240
|
+
}], sharedUsersChange: [{
|
|
6241
|
+
type: Output
|
|
6242
|
+
}] } });
|
|
6243
|
+
|
|
6244
|
+
class EditViewComponent {
|
|
6245
|
+
constructor(cdr) {
|
|
6246
|
+
this.cdr = cdr;
|
|
6247
|
+
this.autoSelectName = false;
|
|
6248
|
+
this.userSelectMode = 'select';
|
|
6249
|
+
this.mode = 'edit';
|
|
6250
|
+
this.save = new EventEmitter();
|
|
6251
|
+
this.delete = new EventEmitter();
|
|
6252
|
+
this.close = new EventEmitter();
|
|
6253
|
+
}
|
|
6254
|
+
resetView() {
|
|
6255
|
+
this.editedView = cloneDeep(this.view);
|
|
6256
|
+
}
|
|
6257
|
+
ngOnInit() {
|
|
6258
|
+
this.resetView();
|
|
6259
|
+
}
|
|
6260
|
+
ngOnChanges(changes) {
|
|
6261
|
+
if (changes['view']) {
|
|
6262
|
+
this.resetView();
|
|
6263
|
+
}
|
|
6264
|
+
}
|
|
6265
|
+
canEdit() {
|
|
6266
|
+
return this.mode === 'edit';
|
|
6267
|
+
}
|
|
6268
|
+
isClean() {
|
|
6269
|
+
return isEqual(this.editedView, this.view);
|
|
6270
|
+
}
|
|
6271
|
+
titleChange(value) {
|
|
6272
|
+
if (this.editedView)
|
|
6273
|
+
this.editedView.title = value;
|
|
6274
|
+
// These handlers fire from the permission picker / text field, which render
|
|
6275
|
+
// in the overlay outlet's change-detection subtree — a different branch than
|
|
6276
|
+
// this OnPush component. Without markForCheck the updated editedView never
|
|
6277
|
+
// flows back into the child input bindings (e.g. the highlighted option).
|
|
6278
|
+
this.cdr.markForCheck();
|
|
6279
|
+
}
|
|
6280
|
+
onPermissionChange(value) {
|
|
6281
|
+
if (!this.editedView)
|
|
6282
|
+
return;
|
|
6283
|
+
if (value === 'shared') {
|
|
6284
|
+
if (!RivViews.isSharedView(this.editedView)) {
|
|
6285
|
+
this.editedView = {
|
|
6286
|
+
...this.editedView,
|
|
6287
|
+
permission: 'shared',
|
|
6288
|
+
sharedUsers: [],
|
|
6289
|
+
};
|
|
6290
|
+
}
|
|
6291
|
+
}
|
|
6292
|
+
else {
|
|
6293
|
+
if (RivViews.isSharedView(this.editedView)) {
|
|
6294
|
+
const { sharedUsers, ...rest } = this.editedView;
|
|
6295
|
+
this.editedView = {
|
|
6296
|
+
...rest,
|
|
6297
|
+
permission: value,
|
|
6298
|
+
};
|
|
6299
|
+
}
|
|
6300
|
+
else {
|
|
6301
|
+
this.editedView.permission = value;
|
|
6302
|
+
}
|
|
6303
|
+
}
|
|
6304
|
+
this.cdr.markForCheck();
|
|
6305
|
+
}
|
|
6306
|
+
onSharedUsersChange(users) {
|
|
6200
6307
|
if (RivViews.isSharedView(this.editedView)) {
|
|
6201
|
-
this.editedView.sharedUsers =
|
|
6308
|
+
this.editedView.sharedUsers = users;
|
|
6202
6309
|
}
|
|
6203
6310
|
this.cdr.markForCheck();
|
|
6204
6311
|
}
|
|
6312
|
+
getSharedUsers(view) {
|
|
6313
|
+
if (RivViews.isSharedView(view)) {
|
|
6314
|
+
return view.sharedUsers;
|
|
6315
|
+
}
|
|
6316
|
+
return EditViewComponent.NO_SHARED_USERS;
|
|
6317
|
+
}
|
|
6205
6318
|
}
|
|
6319
|
+
// Stable empty-array reference for the non-shared branch, so this getter
|
|
6320
|
+
// doesn't hand the permission picker a fresh [] on every change-detection
|
|
6321
|
+
// cycle (which would churn its @Input and trigger needless work).
|
|
6322
|
+
EditViewComponent.NO_SHARED_USERS = [];
|
|
6206
6323
|
EditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6207
|
-
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 <
|
|
6324
|
+
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 });
|
|
6208
6325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, decorators: [{
|
|
6209
6326
|
type: Component,
|
|
6210
|
-
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 <
|
|
6327
|
+
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"] }]
|
|
6211
6328
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
|
|
6212
6329
|
type: Input
|
|
6213
6330
|
}], autoSelectName: [{
|
|
@@ -15148,6 +15265,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
15148
15265
|
PageHeaderComponent,
|
|
15149
15266
|
PercentageFieldComponent,
|
|
15150
15267
|
PercentagePipe,
|
|
15268
|
+
PermissionPickerComponent,
|
|
15151
15269
|
PhoneFieldComponent,
|
|
15152
15270
|
ProgressComponent,
|
|
15153
15271
|
RadioComponent,
|
|
@@ -15243,6 +15361,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
15243
15361
|
PageHeaderComponent,
|
|
15244
15362
|
PercentageFieldComponent,
|
|
15245
15363
|
PercentagePipe,
|
|
15364
|
+
PermissionPickerComponent,
|
|
15246
15365
|
PhoneFieldComponent,
|
|
15247
15366
|
ProgressComponent,
|
|
15248
15367
|
RadioComponent,
|
|
@@ -15344,6 +15463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
15344
15463
|
PageHeaderComponent,
|
|
15345
15464
|
PercentageFieldComponent,
|
|
15346
15465
|
PercentagePipe,
|
|
15466
|
+
PermissionPickerComponent,
|
|
15347
15467
|
PhoneFieldComponent,
|
|
15348
15468
|
ProgressComponent,
|
|
15349
15469
|
RadioComponent,
|
|
@@ -15442,6 +15562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
15442
15562
|
PageHeaderComponent,
|
|
15443
15563
|
PercentageFieldComponent,
|
|
15444
15564
|
PercentagePipe,
|
|
15565
|
+
PermissionPickerComponent,
|
|
15445
15566
|
PhoneFieldComponent,
|
|
15446
15567
|
ProgressComponent,
|
|
15447
15568
|
RadioComponent,
|
|
@@ -15493,5 +15614,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
15493
15614
|
* Generated bundle index. Do not edit.
|
|
15494
15615
|
*/
|
|
15495
15616
|
|
|
15496
|
-
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 };
|
|
15617
|
+
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 };
|
|
15497
15618
|
//# sourceMappingURL=rivet-health-design-system.mjs.map
|