@rivet-health/design-system 40.12.2 → 40.14.0

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

@@ -2140,6 +2140,7 @@ var RivSelect;
     }
     RivSelect.OptionSet = OptionSet;
     const MIN_OPTIONS_FOR_CONTROLS = 5;
+    const DEFAULT_DISPLAY_LIMIT = 100;
     function createManager(source, options) {
         const defaultState = {
             query: {
@@ -2187,15 +2188,18 @@ var RivSelect;
             const sortedOptionGroups = options?.allowMultiSelect
                 ? sortOptionsByPreviouslySelectedState(allOptionGroups, selectionAtOpen)
                 : allOptionGroups;
-            const displayLimitedOptionGroups = applyDisplayLimit(sortedOptionGroups, options?.displayLimit ?? 100);
+            const displayLimit = options?.displayLimit ?? DEFAULT_DISPLAY_LIMIT;
+            const displayLimitedOptionGroups = applyDisplayLimit(sortedOptionGroups, displayLimit);
             const fullOptionGroups = applySelectedOptionLimit(s, displayLimitedOptionGroups, topLevelOptions, options);
             return {
                 ...s,
                 query: {
                     ...s.query,
-                    showSearch: !!options?.allowSearch &&
-                        (!!s.query.search ||
-                            countAllOptions(allOptionGroups) > MIN_OPTIONS_FOR_CONTROLS),
+                    showSearch: !!s.query.search ||
+                        (!!options?.allowSearch &&
+                            countAllOptions(allOptionGroups) >
+                                MIN_OPTIONS_FOR_CONTROLS) ||
+                        countAllOptions(allOptionGroups) > displayLimit,
                     searchPlaceholder: options?.searchPlaceholder ?? 'Search',
                     showOrder: !!options?.allowOrder &&
                         !s.query.search &&
@@ -4399,6 +4403,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     DateComponent.isValidDate = isValidDate;
 })(DateComponent || (DateComponent = {}));
 
+class FilterChipComponent {
+    constructor() {
+        this.selected$ = new BehaviorSubject(false);
+        this.chipClicked = new EventEmitter();
+    }
+    set selected(v) {
+        if (v !== this.selected$.getValue()) {
+            this.selected$.next(v);
+        }
+    }
+    get selected() {
+        return this.selected$.getValue();
+    }
+    get classes() {
+        return Object.entries({
+            selected: this.selected,
+        })
+            .filter(([_, v]) => v)
+            .map(([k]) => k)
+            .join(' ');
+    }
+    onClick(e) {
+        this.chipClicked.emit(!this.selected);
+    }
+}
+FilterChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FilterChipComponent, selector: "riv-filter-chip", inputs: { selected: "selected" }, outputs: { chipClicked: "chipClicked" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.classes" } }, ngImport: i0, template: "<riv-icon\n  *ngIf=\"selected\"\n  class=\"checkmark\"\n  [name]=\"'Check'\"\n  [size]=\"12\"\n></riv-icon>\n<ng-content></ng-content>\n", styles: [":host{--badge-multiplier: 4;display:inline-flex;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);white-space:nowrap;border-radius:calc(var(--base-grid-size) * var(--badge-multiplier));min-width:calc(var(--base-grid-size) * var(--badge-multiplier));min-height:calc(var(--base-grid-size) * var(--badge-multiplier));max-width:100%;background-color:var(--badge-background-color);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xsmall) var(--size-medium)}:host:not(.selected){--badge-background-color: var(--surface-light-0)}:host.selected{--badge-background-color: var(--baloo-05)}.checkmark{padding-right:var(--size-xsmall)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n  *ngIf=\"selected\"\n  class=\"checkmark\"\n  [name]=\"'Check'\"\n  [size]=\"12\"\n></riv-icon>\n<ng-content></ng-content>\n", styles: [":host{--badge-multiplier: 4;display:inline-flex;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);white-space:nowrap;border-radius:calc(var(--base-grid-size) * var(--badge-multiplier));min-width:calc(var(--base-grid-size) * var(--badge-multiplier));min-height:calc(var(--base-grid-size) * var(--badge-multiplier));max-width:100%;background-color:var(--badge-background-color);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xsmall) var(--size-medium)}:host:not(.selected){--badge-background-color: var(--surface-light-0)}:host.selected{--badge-background-color: var(--baloo-05)}.checkmark{padding-right:var(--size-xsmall)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { selected: [{
+                type: Input
+            }], chipClicked: [{
+                type: Output
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 const ZWS = '​';
 const ZWS_REGEX = /​/g;
 /**
@@ -15036,54 +15082,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     DonutComponent.Sizes = ['xsmall', 'small', 'medium', 'large'];
 })(DonutComponent || (DonutComponent = {}));
 
-class MiniPieComponent {
-    constructor() {
-        this.value = 0;
-        this.size = 'small';
-        this.colorToken = '--purp-60';
-    }
-    get classes() {
-        return this.size;
-    }
-    get clampedValue() {
-        return Math.max(0, Math.min(100, this.value));
-    }
-    get fillColor() {
-        return `var(${this.colorToken})`;
-    }
-    get isFull() {
-        return this.clampedValue >= 100;
-    }
-    get wedgePath() {
-        const pct = this.clampedValue / 100;
-        if (pct <= 0 || pct >= 1)
-            return '';
-        const angle = pct * 2 * Math.PI;
-        const x = Math.sin(angle) * 8;
-        const y = -Math.cos(angle) * 8;
-        const largeArc = pct > 0.5 ? 1 : 0;
-        return `M 0 0 L 0 -8 A 8 8 0 ${largeArc} 1 ${x} ${y} Z`;
-    }
-}
-MiniPieComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MiniPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MiniPieComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MiniPieComponent, selector: "riv-mini-pie", inputs: { value: "value", size: "size", colorToken: "colorToken" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-10 -10 20 20\">\n  <circle cx=\"0\" cy=\"0\" r=\"8\" class=\"track\" />\n  <circle *ngIf=\"isFull\" cx=\"0\" cy=\"0\" r=\"8\" [attr.fill]=\"fillColor\" />\n  <path\n    *ngIf=\"clampedValue > 0 && !isFull\"\n    [attr.d]=\"wedgePath\"\n    [attr.fill]=\"fillColor\"\n  />\n</svg>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}:host.small{width:20px;height:20px}:host.medium{width:24px;height:24px}:host.large{width:32px;height:32px}svg{width:100%;height:100%}.track{fill:var(--border-light)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MiniPieComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'riv-mini-pie', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-10 -10 20 20\">\n  <circle cx=\"0\" cy=\"0\" r=\"8\" class=\"track\" />\n  <circle *ngIf=\"isFull\" cx=\"0\" cy=\"0\" r=\"8\" [attr.fill]=\"fillColor\" />\n  <path\n    *ngIf=\"clampedValue > 0 && !isFull\"\n    [attr.d]=\"wedgePath\"\n    [attr.fill]=\"fillColor\"\n  />\n</svg>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}:host.small{width:20px;height:20px}:host.medium{width:24px;height:24px}:host.large{width:32px;height:32px}svg{width:100%;height:100%}.track{fill:var(--border-light)}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], colorToken: [{
-                type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-(function (MiniPieComponent) {
-    MiniPieComponent.Sizes = ['small', 'medium', 'large'];
-})(MiniPieComponent || (MiniPieComponent = {}));
-
 function aggregateValues(values) {
     return values.map((v, ix) => v + values.slice(ix + 1).reduce((acc, n) => acc + n, 0));
 }
@@ -15278,6 +15276,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+class MiniPieComponent {
+    constructor() {
+        this.value = 0;
+        this.size = 'small';
+        this.colorToken = '--purp-60';
+    }
+    get classes() {
+        return this.size;
+    }
+    get clampedValue() {
+        return Math.max(0, Math.min(100, this.value));
+    }
+    get fillColor() {
+        return `var(${this.colorToken})`;
+    }
+    get isFull() {
+        return this.clampedValue >= 100;
+    }
+    get wedgePath() {
+        const pct = this.clampedValue / 100;
+        if (pct <= 0 || pct >= 1)
+            return '';
+        const angle = pct * 2 * Math.PI;
+        const x = Math.sin(angle) * 8;
+        const y = -Math.cos(angle) * 8;
+        const largeArc = pct > 0.5 ? 1 : 0;
+        return `M 0 0 L 0 -8 A 8 8 0 ${largeArc} 1 ${x} ${y} Z`;
+    }
+}
+MiniPieComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MiniPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MiniPieComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MiniPieComponent, selector: "riv-mini-pie", inputs: { value: "value", size: "size", colorToken: "colorToken" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-10 -10 20 20\">\n  <circle cx=\"0\" cy=\"0\" r=\"8\" class=\"track\" />\n  <circle *ngIf=\"isFull\" cx=\"0\" cy=\"0\" r=\"8\" [attr.fill]=\"fillColor\" />\n  <path\n    *ngIf=\"clampedValue > 0 && !isFull\"\n    [attr.d]=\"wedgePath\"\n    [attr.fill]=\"fillColor\"\n  />\n</svg>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}:host.small{width:20px;height:20px}:host.medium{width:24px;height:24px}:host.large{width:32px;height:32px}svg{width:100%;height:100%}.track{fill:var(--border-light)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MiniPieComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-mini-pie', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-10 -10 20 20\">\n  <circle cx=\"0\" cy=\"0\" r=\"8\" class=\"track\" />\n  <circle *ngIf=\"isFull\" cx=\"0\" cy=\"0\" r=\"8\" [attr.fill]=\"fillColor\" />\n  <path\n    *ngIf=\"clampedValue > 0 && !isFull\"\n    [attr.d]=\"wedgePath\"\n    [attr.fill]=\"fillColor\"\n  />\n</svg>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}:host.small{width:20px;height:20px}:host.medium{width:24px;height:24px}:host.large{width:32px;height:32px}svg{width:100%;height:100%}.track{fill:var(--border-light)}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], colorToken: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+(function (MiniPieComponent) {
+    MiniPieComponent.Sizes = ['small', 'medium', 'large'];
+})(MiniPieComponent || (MiniPieComponent = {}));
+
 class ProgressComponent {
     constructor() {
         this.value = 0;
@@ -16478,6 +16524,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         DonutComponent,
         EditableHeadingComponent,
         EditViewComponent,
+        FilterChipComponent,
         FunnelChartComponent,
         HelpComponent,
         HighlightComponent,
@@ -16582,6 +16629,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         DonutComponent,
         EditableHeadingComponent,
         EditViewComponent,
+        FilterChipComponent,
         FunnelChartComponent,
         HelpComponent,
         HighlightComponent,
@@ -16690,6 +16738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DonutComponent,
                         EditableHeadingComponent,
                         EditViewComponent,
+                        FilterChipComponent,
                         FunnelChartComponent,
                         HelpComponent,
                         HighlightComponent,
@@ -16797,6 +16846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DonutComponent,
                         EditableHeadingComponent,
                         EditViewComponent,
+                        FilterChipComponent,
                         FunnelChartComponent,
                         HelpComponent,
                         HighlightComponent,
@@ -16876,5 +16926,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardActionsComponent, CardCheckboxComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardLinkComponent, CardMediaComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, EditableHeadingComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PermissionPickerComponent, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
+export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardActionsComponent, CardCheckboxComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardLinkComponent, CardMediaComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, EditableHeadingComponent, FilterChipComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PermissionPickerComponent, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
 //# sourceMappingURL=rivet-health-design-system.mjs.map