@rivet-health/design-system 32.0.1 → 32.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/input/select/select/select.component.mjs +16 -3
- package/esm2020/lib/input/simple-select/simple-select.component.mjs +1 -1
- package/esm2020/lib/navigation/views/edit-view/edit-view.component.mjs +1 -1
- package/fesm2015/rivet-health-design-system.mjs +17 -4
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +17 -4
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/select/select/select.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -2850,6 +2850,15 @@ class SelectComponent extends InputLabelComponent {
|
|
|
2850
2850
|
this.size = 'medium';
|
|
2851
2851
|
this.disabled = false;
|
|
2852
2852
|
this.locked = false;
|
|
2853
|
+
this.allowedCalloutPositions = [
|
|
2854
|
+
'top-left',
|
|
2855
|
+
'top-center',
|
|
2856
|
+
'top-right',
|
|
2857
|
+
'bottom-right',
|
|
2858
|
+
'bottom-center',
|
|
2859
|
+
'bottom-left',
|
|
2860
|
+
];
|
|
2861
|
+
this.preferredCalloutPosition = 'bottom-right';
|
|
2853
2862
|
this.orderByOptionGroups = [
|
|
2854
2863
|
{
|
|
2855
2864
|
options: [
|
|
@@ -2943,10 +2952,10 @@ class SelectComponent extends InputLabelComponent {
|
|
|
2943
2952
|
}
|
|
2944
2953
|
}
|
|
2945
2954
|
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2946
|
-
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked" }, 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 </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 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 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]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\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-disabled)}.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}.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: IconComponent, selector: "riv-icon", inputs: ["name", "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", "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"] }, { 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 });
|
|
2955
|
+
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 </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 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 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-disabled)}.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}.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: IconComponent, selector: "riv-icon", inputs: ["name", "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", "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 });
|
|
2947
2956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, decorators: [{
|
|
2948
2957
|
type: Component,
|
|
2949
|
-
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 </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 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 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]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\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-disabled)}.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}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
|
|
2958
|
+
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 </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 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 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-disabled)}.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}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
|
|
2950
2959
|
}], propDecorators: { manager: [{
|
|
2951
2960
|
type: Input
|
|
2952
2961
|
}], size: [{
|
|
@@ -2955,6 +2964,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2955
2964
|
type: Input
|
|
2956
2965
|
}], locked: [{
|
|
2957
2966
|
type: Input
|
|
2967
|
+
}], allowedCalloutPositions: [{
|
|
2968
|
+
type: Input
|
|
2969
|
+
}], preferredCalloutPosition: [{
|
|
2970
|
+
type: Input
|
|
2958
2971
|
}], triggerTemplate: [{
|
|
2959
2972
|
type: ContentChild,
|
|
2960
2973
|
args: ['trigger']
|
|
@@ -3078,7 +3091,7 @@ class SimpleSelectComponent extends InputLabelComponent {
|
|
|
3078
3091
|
}
|
|
3079
3092
|
}
|
|
3080
3093
|
SimpleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3081
|
-
SimpleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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" }, outputs: { selectedOptionChange: "selectedOptionChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], 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 [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 *ngIf=\"optionTemplate; let optionTpl\">\n <ng-template #option let-node=\"node\">\n <button\n class=\"custom-node\"\n [disabled]=\"node.disabled\"\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: [".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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3094
|
+
SimpleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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" }, outputs: { selectedOptionChange: "selectedOptionChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], 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 [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 *ngIf=\"optionTemplate; let optionTpl\">\n <ng-template #option let-node=\"node\">\n <button\n class=\"custom-node\"\n [disabled]=\"node.disabled\"\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: [".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 });
|
|
3082
3095
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleSelectComponent, decorators: [{
|
|
3083
3096
|
type: Component,
|
|
3084
3097
|
args: [{ selector: 'riv-simple-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-select\n [manager]=\"manager\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n [locked]=\"locked\"\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 *ngIf=\"optionTemplate; let optionTpl\">\n <ng-template #option let-node=\"node\">\n <button\n class=\"custom-node\"\n [disabled]=\"node.disabled\"\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: [".custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"] }]
|
|
@@ -5334,7 +5347,7 @@ class EditViewComponent {
|
|
|
5334
5347
|
}
|
|
5335
5348
|
}
|
|
5336
5349
|
EditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5337
|
-
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", 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 userSelectManager\n \"\n [label]=\"'Users with access'\"\n [manager]=\"userSelectManager\"\n ></riv-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", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked"] }, { 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 });
|
|
5350
|
+
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", 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 userSelectManager\n \"\n [label]=\"'Users with access'\"\n [manager]=\"userSelectManager\"\n ></riv-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", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { 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 });
|
|
5338
5351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, decorators: [{
|
|
5339
5352
|
type: Component,
|
|
5340
5353
|
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 userSelectManager\n \"\n [label]=\"'Users with access'\"\n [manager]=\"userSelectManager\"\n ></riv-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"] }]
|