@rivet-health/design-system 40.4.0 → 40.5.0

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

@@ -8,6 +8,7 @@ import { timeFormat, utcFormat } from 'd3-time-format';
 import { defaultsDeep, sortBy, isNumber, flattenDeep, debounce, isEqual, cloneDeep, orderBy, range, toInteger, difference, union, sum, uniq } from 'lodash';
 import Fuse from 'fuse.js';
 import { query, style, animate, trigger, transition, group } from '@angular/animations';
+import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as p from 'papaparse';
@@ -5471,7 +5472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 var RivViews;
 (function (RivViews) {
-    RivViews.ViewPermissions = ['private', 'public', 'shared'];
+    RivViews.ViewPermissions = ['private', 'shared', 'public'];
     RivViews.MenuContexts = ['tab', 'all-views', 'overflow'];
     RivViews.UserSelectModes = ['select', 'search-select'];
     function createManager({ source, save, duplicate, userSource, userSelectMode, onAddUser, newTooltip, copyLink, options, setActiveViewId, }) {
@@ -6109,15 +6110,15 @@ const subtitles = {
     public: 'Visible to everyone',
     shared: 'Only visible to those with access',
 };
-class EditViewComponent {
+class PermissionPickerComponent {
     constructor(cdr) {
         this.cdr = cdr;
-        this.autoSelectName = false;
+        this.permission = 'private';
+        this.sharedUsers = [];
         this.userSelectMode = 'select';
-        this.mode = 'edit';
-        this.save = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.close = new EventEmitter();
+        this.disabledPermissions = [];
+        this.permissionChange = new EventEmitter();
+        this.sharedUsersChange = new EventEmitter();
         this.permissionOptions = RivViews.ViewPermissions.map(permission => ({
             value: permission,
             title: titles[permission],
@@ -6126,41 +6127,28 @@ class EditViewComponent {
         this.userOptions = [];
         this.selectedUsers = [];
     }
-    resetView() {
-        this.editedView = cloneDeep(this.view);
-        this.setUpUserSelectManager();
-    }
     ngOnInit() {
-        this.resetView();
+        this.setUpUserSelectManager();
     }
     ngOnChanges(changes) {
-        if (changes['view']) {
-            this.resetView();
+        // ngOnInit performs the initial setup, so ignore first-change events here.
+        // Rebuild only on a genuine change: a new data source, a mode switch, or a
+        // value-level change to the seeded selection. Comparing sharedUsers by value
+        // (rather than reference) is essential — the parent binds a fresh array each
+        // change-detection cycle, and reacting to that reference churn would rebuild
+        // the manager on every cycle.
+        const userSourceChanged = changes['userSource'] && !changes['userSource'].firstChange;
+        const userSelectModeChanged = changes['userSelectMode'] && !changes['userSelectMode'].firstChange;
+        const sharedUsersChanged = changes['sharedUsers'] &&
+            !changes['sharedUsers'].firstChange &&
+            !isEqual(changes['sharedUsers'].previousValue, changes['sharedUsers'].currentValue);
+        if (userSourceChanged || userSelectModeChanged || sharedUsersChanged) {
+            this.setUpUserSelectManager();
         }
     }
     ngOnDestroy() {
         this.tearDownUserSelectManager();
     }
-    canEdit() {
-        return this.mode === 'edit';
-    }
-    isClean() {
-        return isEqual(this.editedView, this.view);
-    }
-    titleChange(value) {
-        if (this.editedView)
-            this.editedView.title = value;
-    }
-    permissionChange(value) {
-        if (this.editedView)
-            this.editedView.permission = value;
-    }
-    getSharedUsers(view) {
-        if (RivViews.isSharedView(view)) {
-            return view.sharedUsers;
-        }
-        return [];
-    }
     tearDownUserSelectManager() {
         this.userSelectSubscription?.unsubscribe();
     }
@@ -6172,7 +6160,7 @@ class EditViewComponent {
                 ...u,
                 new: u.new ?? false,
             }));
-            this.selectedUsers = this.getSharedUsers(this.editedView).map(u => ({
+            this.selectedUsers = this.sharedUsers.map(u => ({
                 ...u,
                 new: u.new ?? false,
             }));
@@ -6186,23 +6174,37 @@ class EditViewComponent {
                 displayLimit: 500,
                 initialState: {
                     selection: {
-                        selected: new RivSelect.OptionSet(this.getSharedUsers(this.editedView)),
+                        selected: new RivSelect.OptionSet(this.sharedUsers),
                     },
                 },
             });
-            this.userSelectSubscription = this.userSelectManager.state.subscribe(state => {
-                if (RivViews.isSharedView(this.editedView)) {
-                    this.editedView.sharedUsers = [...state.selection.selected];
+            this.userSelectSubscription = this.userSelectManager.state
+                .pipe(map$1(state => [...state.selection.selected]), distinctUntilChanged$1(isEqual))
+                .subscribe(users => {
+                // The manager replays its initial (seeded) selection synchronously on
+                // subscribe. Emitting that back would echo the sharedUsers input to
+                // the parent, which mutates its view and feeds a new array reference
+                // straight back into this component — an infinite change-detection
+                // loop. Only propagate genuine, user-driven selection changes.
+                if (!isEqual(users, this.sharedUsers)) {
+                    this.sharedUsersChange.emit(users);
                 }
             });
             this.userSelectManager.actions.next({ type: 'load' });
         }
     }
+    onPermissionClick(value) {
+        if (this.isDisabled(value)) {
+            return;
+        }
+        this.permissionChange.emit(value);
+    }
+    isDisabled(permission) {
+        return this.disabledPermissions?.includes(permission) ?? false;
+    }
     onSelectedUsersChange(users) {
         this.selectedUsers = users;
-        if (RivViews.isSharedView(this.editedView)) {
-            this.editedView.sharedUsers = RivViews.toSharedUsers(users);
-        }
+        this.sharedUsersChange.emit(RivViews.toSharedUsers(users));
     }
     handleAddUser(searchText) {
         if (!this.onAddUser)
@@ -6210,17 +6212,119 @@ class EditViewComponent {
         const newUser = this.onAddUser(searchText);
         this.userOptions = [...this.userOptions, newUser];
         this.selectedUsers = [...this.selectedUsers, newUser];
+        this.sharedUsersChange.emit(RivViews.toSharedUsers(this.selectedUsers));
+        this.cdr.markForCheck();
+    }
+}
+PermissionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PermissionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PermissionPickerComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { permission: [{
+                type: Input
+            }], sharedUsers: [{
+                type: Input
+            }], userSelectMode: [{
+                type: Input
+            }], userSource: [{
+                type: Input
+            }], onAddUser: [{
+                type: Input
+            }], newTooltip: [{
+                type: Input
+            }], disabledPermissions: [{
+                type: Input
+            }], permissionChange: [{
+                type: Output
+            }], sharedUsersChange: [{
+                type: Output
+            }] } });
+
+class EditViewComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.autoSelectName = false;
+        this.userSelectMode = 'select';
+        this.mode = 'edit';
+        this.save = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.close = new EventEmitter();
+    }
+    resetView() {
+        this.editedView = cloneDeep(this.view);
+    }
+    ngOnInit() {
+        this.resetView();
+    }
+    ngOnChanges(changes) {
+        if (changes['view']) {
+            this.resetView();
+        }
+    }
+    canEdit() {
+        return this.mode === 'edit';
+    }
+    isClean() {
+        return isEqual(this.editedView, this.view);
+    }
+    titleChange(value) {
+        if (this.editedView)
+            this.editedView.title = value;
+        // These handlers fire from the permission picker / text field, which render
+        // in the overlay outlet's change-detection subtree — a different branch than
+        // this OnPush component. Without markForCheck the updated editedView never
+        // flows back into the child input bindings (e.g. the highlighted option).
+        this.cdr.markForCheck();
+    }
+    onPermissionChange(value) {
+        if (!this.editedView)
+            return;
+        if (value === 'shared') {
+            if (!RivViews.isSharedView(this.editedView)) {
+                this.editedView = {
+                    ...this.editedView,
+                    permission: 'shared',
+                    sharedUsers: [],
+                };
+            }
+        }
+        else {
+            if (RivViews.isSharedView(this.editedView)) {
+                const { sharedUsers, ...rest } = this.editedView;
+                this.editedView = {
+                    ...rest,
+                    permission: value,
+                };
+            }
+            else {
+                this.editedView.permission = value;
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    onSharedUsersChange(users) {
         if (RivViews.isSharedView(this.editedView)) {
-            this.editedView.sharedUsers = RivViews.toSharedUsers(this.selectedUsers);
+            this.editedView.sharedUsers = users;
         }
         this.cdr.markForCheck();
     }
+    getSharedUsers(view) {
+        if (RivViews.isSharedView(view)) {
+            return view.sharedUsers;
+        }
+        return EditViewComponent.NO_SHARED_USERS;
+    }
 }
+// Stable empty-array reference for the non-shared branch, so this getter
+// doesn't hand the permission picker a fresh [] on every change-detection
+// cycle (which would churn its @Input and trigger needless work).
+EditViewComponent.NO_SHARED_USERS = [];
 EditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-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 });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
                 type: Input
             }], autoSelectName: [{
@@ -15161,6 +15265,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         PageHeaderComponent,
         PercentageFieldComponent,
         PercentagePipe,
+        PermissionPickerComponent,
         PhoneFieldComponent,
         ProgressComponent,
         RadioComponent,
@@ -15256,6 +15361,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         PageHeaderComponent,
         PercentageFieldComponent,
         PercentagePipe,
+        PermissionPickerComponent,
         PhoneFieldComponent,
         ProgressComponent,
         RadioComponent,
@@ -15357,6 +15463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         PageHeaderComponent,
                         PercentageFieldComponent,
                         PercentagePipe,
+                        PermissionPickerComponent,
                         PhoneFieldComponent,
                         ProgressComponent,
                         RadioComponent,
@@ -15455,6 +15562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         PageHeaderComponent,
                         PercentageFieldComponent,
                         PercentagePipe,
+                        PermissionPickerComponent,
                         PhoneFieldComponent,
                         ProgressComponent,
                         RadioComponent,
@@ -15506,5 +15614,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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 };
 //# sourceMappingURL=rivet-health-design-system.mjs.map