@rivet-health/design-system 40.4.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.
@@ -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';
@@ -5392,7 +5393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
5392
5393
 
5393
5394
  var RivViews;
5394
5395
  (function (RivViews) {
5395
- RivViews.ViewPermissions = ['private', 'public', 'shared'];
5396
+ RivViews.ViewPermissions = ['private', 'shared', 'public'];
5396
5397
  RivViews.MenuContexts = ['tab', 'all-views', 'overflow'];
5397
5398
  RivViews.UserSelectModes = ['select', 'search-select'];
5398
5399
  function createManager({ source, save, duplicate, userSource, userSelectMode, onAddUser, newTooltip, copyLink, options, setActiveViewId, }) {
@@ -5927,15 +5928,15 @@ const subtitles = {
5927
5928
  public: 'Visible to everyone',
5928
5929
  shared: 'Only visible to those with access',
5929
5930
  };
5930
- class EditViewComponent {
5931
+ class PermissionPickerComponent {
5931
5932
  constructor(cdr) {
5932
5933
  this.cdr = cdr;
5933
- this.autoSelectName = false;
5934
+ this.permission = 'private';
5935
+ this.sharedUsers = [];
5934
5936
  this.userSelectMode = 'select';
5935
- this.mode = 'edit';
5936
- this.save = new EventEmitter();
5937
- this.delete = new EventEmitter();
5938
- this.close = new EventEmitter();
5937
+ this.disabledPermissions = [];
5938
+ this.permissionChange = new EventEmitter();
5939
+ this.sharedUsersChange = new EventEmitter();
5939
5940
  this.permissionOptions = RivViews.ViewPermissions.map(permission => ({
5940
5941
  value: permission,
5941
5942
  title: titles[permission],
@@ -5944,41 +5945,28 @@ class EditViewComponent {
5944
5945
  this.userOptions = [];
5945
5946
  this.selectedUsers = [];
5946
5947
  }
5947
- resetView() {
5948
- this.editedView = cloneDeep(this.view);
5949
- this.setUpUserSelectManager();
5950
- }
5951
5948
  ngOnInit() {
5952
- this.resetView();
5949
+ this.setUpUserSelectManager();
5953
5950
  }
5954
5951
  ngOnChanges(changes) {
5955
- if (changes['view']) {
5956
- this.resetView();
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();
5957
5965
  }
5958
5966
  }
5959
5967
  ngOnDestroy() {
5960
5968
  this.tearDownUserSelectManager();
5961
5969
  }
5962
- canEdit() {
5963
- return this.mode === 'edit';
5964
- }
5965
- isClean() {
5966
- return isEqual(this.editedView, this.view);
5967
- }
5968
- titleChange(value) {
5969
- if (this.editedView)
5970
- this.editedView.title = value;
5971
- }
5972
- permissionChange(value) {
5973
- if (this.editedView)
5974
- this.editedView.permission = value;
5975
- }
5976
- getSharedUsers(view) {
5977
- if (RivViews.isSharedView(view)) {
5978
- return view.sharedUsers;
5979
- }
5980
- return [];
5981
- }
5982
5970
  tearDownUserSelectManager() {
5983
5971
  var _a;
5984
5972
  (_a = this.userSelectSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
@@ -5992,7 +5980,7 @@ class EditViewComponent {
5992
5980
  var _a;
5993
5981
  return (Object.assign(Object.assign({}, u), { new: (_a = u.new) !== null && _a !== void 0 ? _a : false }));
5994
5982
  });
5995
- this.selectedUsers = this.getSharedUsers(this.editedView).map(u => {
5983
+ this.selectedUsers = this.sharedUsers.map(u => {
5996
5984
  var _a;
5997
5985
  return (Object.assign(Object.assign({}, u), { new: (_a = u.new) !== null && _a !== void 0 ? _a : false }));
5998
5986
  });
@@ -6006,24 +5994,39 @@ class EditViewComponent {
6006
5994
  displayLimit: 500,
6007
5995
  initialState: {
6008
5996
  selection: {
6009
- selected: new RivSelect.OptionSet(this.getSharedUsers(this.editedView)),
5997
+ selected: new RivSelect.OptionSet(this.sharedUsers),
6010
5998
  },
6011
5999
  },
6012
6000
  });
6013
- this.userSelectSubscription = this.userSelectManager.state.subscribe(state => {
6014
- if (RivViews.isSharedView(this.editedView)) {
6015
- this.editedView.sharedUsers = [...state.selection.selected];
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);
6016
6011
  }
6017
6012
  });
6018
6013
  this.userSelectManager.actions.next({ type: 'load' });
6019
6014
  }
6020
6015
  });
6021
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
+ }
6022
6027
  onSelectedUsersChange(users) {
6023
6028
  this.selectedUsers = users;
6024
- if (RivViews.isSharedView(this.editedView)) {
6025
- this.editedView.sharedUsers = RivViews.toSharedUsers(users);
6026
- }
6029
+ this.sharedUsersChange.emit(RivViews.toSharedUsers(users));
6027
6030
  }
6028
6031
  handleAddUser(searchText) {
6029
6032
  if (!this.onAddUser)
@@ -6031,17 +6034,112 @@ class EditViewComponent {
6031
6034
  const newUser = this.onAddUser(searchText);
6032
6035
  this.userOptions = [...this.userOptions, newUser];
6033
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) {
6034
6122
  if (RivViews.isSharedView(this.editedView)) {
6035
- this.editedView.sharedUsers = RivViews.toSharedUsers(this.selectedUsers);
6123
+ this.editedView.sharedUsers = users;
6036
6124
  }
6037
6125
  this.cdr.markForCheck();
6038
6126
  }
6127
+ getSharedUsers(view) {
6128
+ if (RivViews.isSharedView(view)) {
6129
+ return view.sharedUsers;
6130
+ }
6131
+ return EditViewComponent.NO_SHARED_USERS;
6132
+ }
6039
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 = [];
6040
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 });
6041
- 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 <div class=\"permissions\">\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]=\"ev.permission === option.value\"\n type=\"button\"\n [attr.aria-checked]=\"ev.permission === option.value\"\n [attr.aria-label]=\"option.title + ' permission'\"\n (click)=\"permissionChange(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=\"ev.permission === option.value\"\n class=\"permission-indicator\"\n [name]=\"'Check'\"\n [size]=\"16\"\n ></riv-icon>\n </div>\n <riv-select\n *ngIf=\"\n ev.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 ev.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\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%}.permissions{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label,.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.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{background-color:var(--surface-light-1)}.permission-option:active,.permission-option.current{background-color:var(--surface-light-2)}.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)}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { 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"] }, { 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 });
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 });
6042
6140
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, decorators: [{
6043
6141
  type: Component,
6044
- 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 <div class=\"permissions\">\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]=\"ev.permission === option.value\"\n type=\"button\"\n [attr.aria-checked]=\"ev.permission === option.value\"\n [attr.aria-label]=\"option.title + ' permission'\"\n (click)=\"permissionChange(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=\"ev.permission === option.value\"\n class=\"permission-indicator\"\n [name]=\"'Check'\"\n [size]=\"16\"\n ></riv-icon>\n </div>\n <riv-select\n *ngIf=\"\n ev.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 ev.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\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%}.permissions{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label,.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.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{background-color:var(--surface-light-1)}.permission-option:active,.permission-option.current{background-color:var(--surface-light-2)}.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)}.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"] }]
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"] }]
6045
6143
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
6046
6144
  type: Input
6047
6145
  }], autoSelectName: [{
@@ -14597,6 +14695,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
14597
14695
  PageHeaderComponent,
14598
14696
  PercentageFieldComponent,
14599
14697
  PercentagePipe,
14698
+ PermissionPickerComponent,
14600
14699
  PhoneFieldComponent,
14601
14700
  ProgressComponent,
14602
14701
  RadioComponent,
@@ -14692,6 +14791,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
14692
14791
  PageHeaderComponent,
14693
14792
  PercentageFieldComponent,
14694
14793
  PercentagePipe,
14794
+ PermissionPickerComponent,
14695
14795
  PhoneFieldComponent,
14696
14796
  ProgressComponent,
14697
14797
  RadioComponent,
@@ -14793,6 +14893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
14793
14893
  PageHeaderComponent,
14794
14894
  PercentageFieldComponent,
14795
14895
  PercentagePipe,
14896
+ PermissionPickerComponent,
14796
14897
  PhoneFieldComponent,
14797
14898
  ProgressComponent,
14798
14899
  RadioComponent,
@@ -14891,6 +14992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
14891
14992
  PageHeaderComponent,
14892
14993
  PercentageFieldComponent,
14893
14994
  PercentagePipe,
14995
+ PermissionPickerComponent,
14894
14996
  PhoneFieldComponent,
14895
14997
  ProgressComponent,
14896
14998
  RadioComponent,
@@ -14942,5 +15044,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
14942
15044
  * Generated bundle index. Do not edit.
14943
15045
  */
14944
15046
 
14945
- 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 };
14946
15048
  //# sourceMappingURL=rivet-health-design-system.mjs.map