@rivet-health/design-system 40.19.1 → 40.19.2

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

@@ -3048,6 +3048,8 @@ class SelectComponent extends InputLabelComponent {
         this.size = 'medium';
         this.disabled = false;
         this.locked = false;
+        /** Stretches a custom trigger to fill the width of this component. */
+        this.grow = false;
         this.allowedCalloutPositions = [
             ...defaultSelectAllowedCalloutPositions,
         ];
@@ -3151,10 +3153,10 @@ class SelectComponent extends InputLabelComponent {
     }
 }
 SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked", allowedCalloutPositions: "allowedCalloutPositions", preferredCalloutPosition: "preferredCalloutPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-template #content>\n    <riv-loading-cover [loading]=\"s.load.loading\">\n      <div\n        class=\"content-body\"\n        [class.inline]=\"s.display.inline\"\n        [ngStyle]=\"{\n          'max-height': s.display.maxHeight,\n          'max-width': s.display.maxWidth,\n          'min-height': s.display.minHeight,\n          'min-width': s.display.minWidth\n        }\"\n      >\n        <header *ngIf=\"headerTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n          ></ng-container>\n        </header>\n        <riv-search\n          *ngIf=\"s.query.showSearch\"\n          [value]=\"s.query.search\"\n          [placeholder]=\"s.query.searchPlaceholder\"\n          [autoFocus]=\"true\"\n          (valueChange)=\"searchChange($event)\"\n        ></riv-search>\n        <div *ngIf=\"s.query.showOrder\">\n          <span class=\"order-by\">Sort by:</span>\n          <riv-select [manager]=\"orderByManager\">\n            <ng-template #trigger let-state=\"state\">\n              <button\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </button>\n            </ng-template>\n          </riv-select>\n        </div>\n        <div class=\"options\">\n          <riv-select-node\n            *ngIf=\"\n              s.selection.allowMultiSelect &&\n              s.selection.allowSelectAll &&\n              !s.display.zeroStateMessage\n            \"\n            [mode]=\"'multi'\"\n            [node]=\"{\n              id: '__NOOP__',\n              title: s.query.search ? 'Select all matching' : 'Select all',\n              selected: s.selection.visibleSelectionState,\n              selectable: true,\n              expandable: false,\n              expanded: false\n            }\"\n            (selectChange)=\"\n              manager?.actions?.next({ type: 'visibleSelectedChange' })\n            \"\n          ></riv-select-node>\n          <div\n            *ngFor=\"let group of s.fullOptionGroups; trackBy: trackBySymbol\"\n            class=\"group\"\n            [class.divider]=\"s.display.dividers\"\n          >\n            <span *ngIf=\"group.header; let header\" class=\"header\">\n              {{ header }}\n              <riv-help\n                *ngIf=\"group.help; let help\"\n                [help]=\"help\"\n                [size]=\"12\"\n              ></riv-help>\n            </span>\n            <ng-container\n              *ngFor=\"let option of group.options; trackBy: trackByOption\"\n            >\n              <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTemplate\"\n                  [ngTemplateOutletContext]=\"{ node: option }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <riv-select-node\n                  [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n                  [node]=\"option\"\n                  [showSingleSelected]=\"s.display.showSingleSelected\"\n                  (selectChange)=\"\n                    selectChange(s.selection.allowMultiSelect, $event)\n                  \"\n                  (expandChange)=\"\n                    manager?.actions?.next({\n                      type: 'toggleOptionExpanded',\n                      id: $event\n                    })\n                  \"\n                ></riv-select-node>\n              </ng-template>\n            </ng-container>\n          </div>\n          <span\n            *ngIf=\"s.display.displayLimitMessage; let message\"\n            class=\"display-limit\"\n          >\n            {{ message }}\n          </span>\n          <riv-zero-state\n            *ngIf=\"s.display.zeroStateMessage; let message\"\n            [message]=\"message\"\n          ></riv-zero-state>\n        </div>\n        <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n          <ng-container\n            *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n          ></ng-container>\n        </footer>\n      </div>\n    </riv-loading-cover>\n  </ng-template>\n\n  <ng-container *ngIf=\"!s.display.inline; else content\">\n    <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n      <button\n        #customTriggerButton\n        (click)=\"allowedOpen()\"\n        [disabled]=\"disabled || locked\"\n        [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"triggerTemplate\"\n          [ngTemplateOutletContext]=\"{ state: s }\"\n        ></ng-container>\n      </button>\n    </ng-container>\n    <ng-template #standardTrigger>\n      <riv-input-label\n        [label]=\"label\"\n        [help]=\"help\"\n        [required]=\"required\"\n        [state]=\"state\"\n        [errorMessage]=\"errorMessage\"\n        [labelActionText]=\"labelActionText\"\n        (labelAction)=\"labelAction.emit($event)\"\n      >\n        <button\n          #standardTriggerButton\n          class=\"trigger\"\n          [class.small]=\"size === 'small'\"\n          [class.large]=\"size === 'large'\"\n          [class.warning]=\"state === 'warning'\"\n          [class.error]=\"state === 'error'\"\n          (click)=\"allowedOpen()\"\n          [disabled]=\"disabled || locked\"\n          [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n          type=\"button\"\n        >\n          <ng-container\n            *ngIf=\"s.selection.selected.size; else placeholderValue\"\n          >\n            <ng-container\n              *ngIf=\"\n                customSelectedOptionsTemplate;\n                else standardSelectedOptionsTemplate\n              \"\n            >\n              <span class=\"value\">\n                <ng-container\n                  [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n                  [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n                ></ng-container>\n              </span>\n            </ng-container>\n            <ng-template #standardSelectedOptionsTemplate>\n              <span class=\"value\">{{\n                s.display.formattedSelectedOptions\n              }}</span>\n              <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n                {{ s.display.pillCount | rivNumber }}\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-template #placeholderValue>\n            <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n          </ng-template>\n          <span class=\"chevron\">\n            <riv-icon\n              *ngIf=\"!locked\"\n              [name]=\"s.display.open ? 'ChevronUp' : 'ChevronDown'\"\n              [size]=\"20\"\n            ></riv-icon>\n            <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n          </span>\n        </button>\n      </riv-input-label>\n    </ng-template>\n\n    <ng-container *ngIf=\"s.display.open\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"getTrigger()\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [allowedPositions]=\"allowedCalloutPositions\"\n        [preferredPosition]=\"preferredCalloutPosition\"\n        (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-low-contrast)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0;display:flex;align-items:center;gap:var(--size-small)}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { 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: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked", grow: "grow", allowedCalloutPositions: "allowedCalloutPositions", preferredCalloutPosition: "preferredCalloutPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-template #content>\n    <riv-loading-cover [loading]=\"s.load.loading\">\n      <div\n        class=\"content-body\"\n        [class.inline]=\"s.display.inline\"\n        [ngStyle]=\"{\n          'max-height': s.display.maxHeight,\n          'max-width': s.display.maxWidth,\n          'min-height': s.display.minHeight,\n          'min-width': s.display.minWidth\n        }\"\n      >\n        <header *ngIf=\"headerTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n          ></ng-container>\n        </header>\n        <riv-search\n          *ngIf=\"s.query.showSearch\"\n          [value]=\"s.query.search\"\n          [placeholder]=\"s.query.searchPlaceholder\"\n          [autoFocus]=\"true\"\n          (valueChange)=\"searchChange($event)\"\n        ></riv-search>\n        <div *ngIf=\"s.query.showOrder\">\n          <span class=\"order-by\">Sort by:</span>\n          <riv-select [manager]=\"orderByManager\">\n            <ng-template #trigger let-state=\"state\">\n              <button\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </button>\n            </ng-template>\n          </riv-select>\n        </div>\n        <div class=\"options\">\n          <riv-select-node\n            *ngIf=\"\n              s.selection.allowMultiSelect &&\n              s.selection.allowSelectAll &&\n              !s.display.zeroStateMessage\n            \"\n            [mode]=\"'multi'\"\n            [node]=\"{\n              id: '__NOOP__',\n              title: s.query.search ? 'Select all matching' : 'Select all',\n              selected: s.selection.visibleSelectionState,\n              selectable: true,\n              expandable: false,\n              expanded: false\n            }\"\n            (selectChange)=\"\n              manager?.actions?.next({ type: 'visibleSelectedChange' })\n            \"\n          ></riv-select-node>\n          <div\n            *ngFor=\"let group of s.fullOptionGroups; trackBy: trackBySymbol\"\n            class=\"group\"\n            [class.divider]=\"s.display.dividers\"\n          >\n            <span *ngIf=\"group.header; let header\" class=\"header\">\n              {{ header }}\n              <riv-help\n                *ngIf=\"group.help; let help\"\n                [help]=\"help\"\n                [size]=\"12\"\n              ></riv-help>\n            </span>\n            <ng-container\n              *ngFor=\"let option of group.options; trackBy: trackByOption\"\n            >\n              <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTemplate\"\n                  [ngTemplateOutletContext]=\"{ node: option }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <riv-select-node\n                  [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n                  [node]=\"option\"\n                  [showSingleSelected]=\"s.display.showSingleSelected\"\n                  (selectChange)=\"\n                    selectChange(s.selection.allowMultiSelect, $event)\n                  \"\n                  (expandChange)=\"\n                    manager?.actions?.next({\n                      type: 'toggleOptionExpanded',\n                      id: $event\n                    })\n                  \"\n                ></riv-select-node>\n              </ng-template>\n            </ng-container>\n          </div>\n          <span\n            *ngIf=\"s.display.displayLimitMessage; let message\"\n            class=\"display-limit\"\n          >\n            {{ message }}\n          </span>\n          <riv-zero-state\n            *ngIf=\"s.display.zeroStateMessage; let message\"\n            [message]=\"message\"\n          ></riv-zero-state>\n        </div>\n        <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n          <ng-container\n            *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n          ></ng-container>\n        </footer>\n      </div>\n    </riv-loading-cover>\n  </ng-template>\n\n  <ng-container *ngIf=\"!s.display.inline; else content\">\n    <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n      <button\n        #customTriggerButton\n        (click)=\"allowedOpen()\"\n        [disabled]=\"disabled || locked\"\n        [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n        [class.grow]=\"grow\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"triggerTemplate\"\n          [ngTemplateOutletContext]=\"{ state: s }\"\n        ></ng-container>\n      </button>\n    </ng-container>\n    <ng-template #standardTrigger>\n      <riv-input-label\n        [label]=\"label\"\n        [help]=\"help\"\n        [required]=\"required\"\n        [state]=\"state\"\n        [errorMessage]=\"errorMessage\"\n        [labelActionText]=\"labelActionText\"\n        (labelAction)=\"labelAction.emit($event)\"\n      >\n        <button\n          #standardTriggerButton\n          class=\"trigger\"\n          [class.small]=\"size === 'small'\"\n          [class.large]=\"size === 'large'\"\n          [class.warning]=\"state === 'warning'\"\n          [class.error]=\"state === 'error'\"\n          (click)=\"allowedOpen()\"\n          [disabled]=\"disabled || locked\"\n          [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n          type=\"button\"\n        >\n          <ng-container\n            *ngIf=\"s.selection.selected.size; else placeholderValue\"\n          >\n            <ng-container\n              *ngIf=\"\n                customSelectedOptionsTemplate;\n                else standardSelectedOptionsTemplate\n              \"\n            >\n              <span class=\"value\">\n                <ng-container\n                  [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n                  [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n                ></ng-container>\n              </span>\n            </ng-container>\n            <ng-template #standardSelectedOptionsTemplate>\n              <span class=\"value\">{{\n                s.display.formattedSelectedOptions\n              }}</span>\n              <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n                {{ s.display.pillCount | rivNumber }}\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-template #placeholderValue>\n            <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n          </ng-template>\n          <span class=\"chevron\">\n            <riv-icon\n              *ngIf=\"!locked\"\n              [name]=\"s.display.open ? 'ChevronUp' : 'ChevronDown'\"\n              [size]=\"20\"\n            ></riv-icon>\n            <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n          </span>\n        </button>\n      </riv-input-label>\n    </ng-template>\n\n    <ng-container *ngIf=\"s.display.open\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"getTrigger()\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [allowedPositions]=\"allowedCalloutPositions\"\n        [preferredPosition]=\"preferredCalloutPosition\"\n        (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-low-contrast)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.custom-trigger-button.grow{display:flex;flex-direction:column;width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0;display:flex;align-items:center;gap:var(--size-small)}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { 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: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-template #content>\n    <riv-loading-cover [loading]=\"s.load.loading\">\n      <div\n        class=\"content-body\"\n        [class.inline]=\"s.display.inline\"\n        [ngStyle]=\"{\n          'max-height': s.display.maxHeight,\n          'max-width': s.display.maxWidth,\n          'min-height': s.display.minHeight,\n          'min-width': s.display.minWidth\n        }\"\n      >\n        <header *ngIf=\"headerTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n          ></ng-container>\n        </header>\n        <riv-search\n          *ngIf=\"s.query.showSearch\"\n          [value]=\"s.query.search\"\n          [placeholder]=\"s.query.searchPlaceholder\"\n          [autoFocus]=\"true\"\n          (valueChange)=\"searchChange($event)\"\n        ></riv-search>\n        <div *ngIf=\"s.query.showOrder\">\n          <span class=\"order-by\">Sort by:</span>\n          <riv-select [manager]=\"orderByManager\">\n            <ng-template #trigger let-state=\"state\">\n              <button\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </button>\n            </ng-template>\n          </riv-select>\n        </div>\n        <div class=\"options\">\n          <riv-select-node\n            *ngIf=\"\n              s.selection.allowMultiSelect &&\n              s.selection.allowSelectAll &&\n              !s.display.zeroStateMessage\n            \"\n            [mode]=\"'multi'\"\n            [node]=\"{\n              id: '__NOOP__',\n              title: s.query.search ? 'Select all matching' : 'Select all',\n              selected: s.selection.visibleSelectionState,\n              selectable: true,\n              expandable: false,\n              expanded: false\n            }\"\n            (selectChange)=\"\n              manager?.actions?.next({ type: 'visibleSelectedChange' })\n            \"\n          ></riv-select-node>\n          <div\n            *ngFor=\"let group of s.fullOptionGroups; trackBy: trackBySymbol\"\n            class=\"group\"\n            [class.divider]=\"s.display.dividers\"\n          >\n            <span *ngIf=\"group.header; let header\" class=\"header\">\n              {{ header }}\n              <riv-help\n                *ngIf=\"group.help; let help\"\n                [help]=\"help\"\n                [size]=\"12\"\n              ></riv-help>\n            </span>\n            <ng-container\n              *ngFor=\"let option of group.options; trackBy: trackByOption\"\n            >\n              <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTemplate\"\n                  [ngTemplateOutletContext]=\"{ node: option }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <riv-select-node\n                  [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n                  [node]=\"option\"\n                  [showSingleSelected]=\"s.display.showSingleSelected\"\n                  (selectChange)=\"\n                    selectChange(s.selection.allowMultiSelect, $event)\n                  \"\n                  (expandChange)=\"\n                    manager?.actions?.next({\n                      type: 'toggleOptionExpanded',\n                      id: $event\n                    })\n                  \"\n                ></riv-select-node>\n              </ng-template>\n            </ng-container>\n          </div>\n          <span\n            *ngIf=\"s.display.displayLimitMessage; let message\"\n            class=\"display-limit\"\n          >\n            {{ message }}\n          </span>\n          <riv-zero-state\n            *ngIf=\"s.display.zeroStateMessage; let message\"\n            [message]=\"message\"\n          ></riv-zero-state>\n        </div>\n        <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n          <ng-container\n            *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n          ></ng-container>\n        </footer>\n      </div>\n    </riv-loading-cover>\n  </ng-template>\n\n  <ng-container *ngIf=\"!s.display.inline; else content\">\n    <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n      <button\n        #customTriggerButton\n        (click)=\"allowedOpen()\"\n        [disabled]=\"disabled || locked\"\n        [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"triggerTemplate\"\n          [ngTemplateOutletContext]=\"{ state: s }\"\n        ></ng-container>\n      </button>\n    </ng-container>\n    <ng-template #standardTrigger>\n      <riv-input-label\n        [label]=\"label\"\n        [help]=\"help\"\n        [required]=\"required\"\n        [state]=\"state\"\n        [errorMessage]=\"errorMessage\"\n        [labelActionText]=\"labelActionText\"\n        (labelAction)=\"labelAction.emit($event)\"\n      >\n        <button\n          #standardTriggerButton\n          class=\"trigger\"\n          [class.small]=\"size === 'small'\"\n          [class.large]=\"size === 'large'\"\n          [class.warning]=\"state === 'warning'\"\n          [class.error]=\"state === 'error'\"\n          (click)=\"allowedOpen()\"\n          [disabled]=\"disabled || locked\"\n          [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n          type=\"button\"\n        >\n          <ng-container\n            *ngIf=\"s.selection.selected.size; else placeholderValue\"\n          >\n            <ng-container\n              *ngIf=\"\n                customSelectedOptionsTemplate;\n                else standardSelectedOptionsTemplate\n              \"\n            >\n              <span class=\"value\">\n                <ng-container\n                  [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n                  [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n                ></ng-container>\n              </span>\n            </ng-container>\n            <ng-template #standardSelectedOptionsTemplate>\n              <span class=\"value\">{{\n                s.display.formattedSelectedOptions\n              }}</span>\n              <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n                {{ s.display.pillCount | rivNumber }}\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-template #placeholderValue>\n            <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n          </ng-template>\n          <span class=\"chevron\">\n            <riv-icon\n              *ngIf=\"!locked\"\n              [name]=\"s.display.open ? 'ChevronUp' : 'ChevronDown'\"\n              [size]=\"20\"\n            ></riv-icon>\n            <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n          </span>\n        </button>\n      </riv-input-label>\n    </ng-template>\n\n    <ng-container *ngIf=\"s.display.open\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"getTrigger()\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [allowedPositions]=\"allowedCalloutPositions\"\n        [preferredPosition]=\"preferredCalloutPosition\"\n        (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-low-contrast)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0;display:flex;align-items:center;gap:var(--size-small)}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
+            args: [{ selector: 'riv-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-template #content>\n    <riv-loading-cover [loading]=\"s.load.loading\">\n      <div\n        class=\"content-body\"\n        [class.inline]=\"s.display.inline\"\n        [ngStyle]=\"{\n          'max-height': s.display.maxHeight,\n          'max-width': s.display.maxWidth,\n          'min-height': s.display.minHeight,\n          'min-width': s.display.minWidth\n        }\"\n      >\n        <header *ngIf=\"headerTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n          ></ng-container>\n        </header>\n        <riv-search\n          *ngIf=\"s.query.showSearch\"\n          [value]=\"s.query.search\"\n          [placeholder]=\"s.query.searchPlaceholder\"\n          [autoFocus]=\"true\"\n          (valueChange)=\"searchChange($event)\"\n        ></riv-search>\n        <div *ngIf=\"s.query.showOrder\">\n          <span class=\"order-by\">Sort by:</span>\n          <riv-select [manager]=\"orderByManager\">\n            <ng-template #trigger let-state=\"state\">\n              <button\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </button>\n            </ng-template>\n          </riv-select>\n        </div>\n        <div class=\"options\">\n          <riv-select-node\n            *ngIf=\"\n              s.selection.allowMultiSelect &&\n              s.selection.allowSelectAll &&\n              !s.display.zeroStateMessage\n            \"\n            [mode]=\"'multi'\"\n            [node]=\"{\n              id: '__NOOP__',\n              title: s.query.search ? 'Select all matching' : 'Select all',\n              selected: s.selection.visibleSelectionState,\n              selectable: true,\n              expandable: false,\n              expanded: false\n            }\"\n            (selectChange)=\"\n              manager?.actions?.next({ type: 'visibleSelectedChange' })\n            \"\n          ></riv-select-node>\n          <div\n            *ngFor=\"let group of s.fullOptionGroups; trackBy: trackBySymbol\"\n            class=\"group\"\n            [class.divider]=\"s.display.dividers\"\n          >\n            <span *ngIf=\"group.header; let header\" class=\"header\">\n              {{ header }}\n              <riv-help\n                *ngIf=\"group.help; let help\"\n                [help]=\"help\"\n                [size]=\"12\"\n              ></riv-help>\n            </span>\n            <ng-container\n              *ngFor=\"let option of group.options; trackBy: trackByOption\"\n            >\n              <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTemplate\"\n                  [ngTemplateOutletContext]=\"{ node: option }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <riv-select-node\n                  [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n                  [node]=\"option\"\n                  [showSingleSelected]=\"s.display.showSingleSelected\"\n                  (selectChange)=\"\n                    selectChange(s.selection.allowMultiSelect, $event)\n                  \"\n                  (expandChange)=\"\n                    manager?.actions?.next({\n                      type: 'toggleOptionExpanded',\n                      id: $event\n                    })\n                  \"\n                ></riv-select-node>\n              </ng-template>\n            </ng-container>\n          </div>\n          <span\n            *ngIf=\"s.display.displayLimitMessage; let message\"\n            class=\"display-limit\"\n          >\n            {{ message }}\n          </span>\n          <riv-zero-state\n            *ngIf=\"s.display.zeroStateMessage; let message\"\n            [message]=\"message\"\n          ></riv-zero-state>\n        </div>\n        <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n          <ng-container\n            *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n          ></ng-container>\n        </footer>\n      </div>\n    </riv-loading-cover>\n  </ng-template>\n\n  <ng-container *ngIf=\"!s.display.inline; else content\">\n    <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n      <button\n        #customTriggerButton\n        (click)=\"allowedOpen()\"\n        [disabled]=\"disabled || locked\"\n        [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n        [class.grow]=\"grow\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"triggerTemplate\"\n          [ngTemplateOutletContext]=\"{ state: s }\"\n        ></ng-container>\n      </button>\n    </ng-container>\n    <ng-template #standardTrigger>\n      <riv-input-label\n        [label]=\"label\"\n        [help]=\"help\"\n        [required]=\"required\"\n        [state]=\"state\"\n        [errorMessage]=\"errorMessage\"\n        [labelActionText]=\"labelActionText\"\n        (labelAction)=\"labelAction.emit($event)\"\n      >\n        <button\n          #standardTriggerButton\n          class=\"trigger\"\n          [class.small]=\"size === 'small'\"\n          [class.large]=\"size === 'large'\"\n          [class.warning]=\"state === 'warning'\"\n          [class.error]=\"state === 'error'\"\n          (click)=\"allowedOpen()\"\n          [disabled]=\"disabled || locked\"\n          [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n          type=\"button\"\n        >\n          <ng-container\n            *ngIf=\"s.selection.selected.size; else placeholderValue\"\n          >\n            <ng-container\n              *ngIf=\"\n                customSelectedOptionsTemplate;\n                else standardSelectedOptionsTemplate\n              \"\n            >\n              <span class=\"value\">\n                <ng-container\n                  [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n                  [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n                ></ng-container>\n              </span>\n            </ng-container>\n            <ng-template #standardSelectedOptionsTemplate>\n              <span class=\"value\">{{\n                s.display.formattedSelectedOptions\n              }}</span>\n              <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n                {{ s.display.pillCount | rivNumber }}\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-template #placeholderValue>\n            <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n          </ng-template>\n          <span class=\"chevron\">\n            <riv-icon\n              *ngIf=\"!locked\"\n              [name]=\"s.display.open ? 'ChevronUp' : 'ChevronDown'\"\n              [size]=\"20\"\n            ></riv-icon>\n            <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n          </span>\n        </button>\n      </riv-input-label>\n    </ng-template>\n\n    <ng-container *ngIf=\"s.display.open\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"getTrigger()\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [allowedPositions]=\"allowedCalloutPositions\"\n        [preferredPosition]=\"preferredCalloutPosition\"\n        (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-low-contrast)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.custom-trigger-button.grow{display:flex;flex-direction:column;width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0;display:flex;align-items:center;gap:var(--size-small)}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
         }], propDecorators: { manager: [{
                 type: Input
             }], size: [{
@@ -3163,6 +3165,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], locked: [{
                 type: Input
+            }], grow: [{
+                type: Input
             }], allowedCalloutPositions: [{
                 type: Input
             }], preferredCalloutPosition: [{
@@ -3300,10 +3304,10 @@ class SimpleSelectComponent extends InputLabelComponent {
     }
 }
 SimpleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SimpleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: { optionGroups: "optionGroups", selectedOption: "selectedOption", size: "size", disabled: "disabled", locked: "locked", filterabilityOptions: "filterabilityOptions", orderBy: "orderBy", placeholder: "placeholder", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", dividers: "dividers", sortSelectedToTop: "sortSelectedToTop", grow: "grow", preferredCalloutPosition: "preferredCalloutPosition", allowedCalloutPositions: "allowedCalloutPositions" }, outputs: { selectedOptionChange: "selectedOptionChange" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\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  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\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: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SimpleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: { optionGroups: "optionGroups", selectedOption: "selectedOption", size: "size", disabled: "disabled", locked: "locked", filterabilityOptions: "filterabilityOptions", orderBy: "orderBy", placeholder: "placeholder", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", dividers: "dividers", sortSelectedToTop: "sortSelectedToTop", grow: "grow", preferredCalloutPosition: "preferredCalloutPosition", allowedCalloutPositions: "allowedCalloutPositions" }, outputs: { selectedOptionChange: "selectedOptionChange" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [grow]=\"grow\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\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  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\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: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-simple-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\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  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"] }]
+            args: [{ selector: 'riv-simple-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [grow]=\"grow\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\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  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"] }]
         }], propDecorators: { optionGroups: [{
                 type: Input
             }], selectedOption: [{
@@ -7242,7 +7246,7 @@ class PermissionPickerComponent {
     }
 }
 PermissionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PermissionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PermissionPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 });
+PermissionPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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"] }]