@rivet-health/design-system 41.0.2 → 41.1.1

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

@@ -3897,8 +3897,8 @@ var LoadingCoverComponent = class LoadingCoverComponent {
 				errorMessage: "errorMessage"
 			},
 			ngImport: i0,
-			template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n  <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n  *ngIf=\"errorMessage\"\n  class=\"cover\"\n  [style.z-index]=\"zIndexOverride ?? null\"\n>\n  <span class=\"error-icon\">🙁</span>\n  <span>{{ errorMessage }}</span>\n</div>\n",
-			styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"],
+			template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n  <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n  *ngIf=\"errorMessage\"\n  class=\"cover error\"\n  [style.z-index]=\"zIndexOverride ?? null\"\n>\n  <div class=\"illustration riv-illustration-unplugged\"></div>\n  <span>{{ errorMessage }}</span>\n</div>\n",
+			styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error{container-type:size;gap:var(--size-medium)}.illustration{width:min(100%,calc(var(--base-grid-size) * 60));max-height:50%;aspect-ratio:657 / 483}@container (height < 200px){.illustration{display:none}}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: i1.NgIf,
@@ -3929,8 +3929,8 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "riv-loading-cover",
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			standalone: false,
-			template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n  <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n  *ngIf=\"errorMessage\"\n  class=\"cover\"\n  [style.z-index]=\"zIndexOverride ?? null\"\n>\n  <span class=\"error-icon\">🙁</span>\n  <span>{{ errorMessage }}</span>\n</div>\n",
-			styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"]
+			template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n  <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n  *ngIf=\"errorMessage\"\n  class=\"cover error\"\n  [style.z-index]=\"zIndexOverride ?? null\"\n>\n  <div class=\"illustration riv-illustration-unplugged\"></div>\n  <span>{{ errorMessage }}</span>\n</div>\n",
+			styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error{container-type:size;gap:var(--size-medium)}.illustration{width:min(100%,calc(var(--base-grid-size) * 60));max-height:50%;aspect-ratio:657 / 483}@container (height < 200px){.illustration{display:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -6127,11 +6127,16 @@ var DateComponent = class DateComponent extends InputLabelComponent {
 	}
 	onDocumentMouseDown(target) {
 		if (!this.open$.getValue() || !(target instanceof Element)) return;
-		if (this.host.nativeElement.contains(target)) return;
-		if (target.closest(".callout, .scrim, .overlay-container")) return;
+		if (this.isInsidePicker(target)) return;
 		this.open$.next(false);
 		this.cdr.markForCheck();
 	}
+	isInsidePicker(target) {
+		const host = this.host.nativeElement;
+		if (host.contains(target)) return true;
+		const layer = target.closest(".callout, .scrim, .overlay-container");
+		return !!layer && !layer.contains(host);
+	}
 	clearValue() {
 		this.commit(void 0);
 		this.open$.next(false);
@@ -6162,7 +6167,7 @@ var DateComponent = class DateComponent extends InputLabelComponent {
 		else this.syncInputText();
 		this.previewValue = void 0;
 		const nextTarget = event?.relatedTarget;
-		if (!(nextTarget instanceof Element && (this.host.nativeElement.contains(nextTarget) || !!nextTarget.closest(".callout, .scrim, .overlay-container")))) this.open$.next(false);
+		if (!(nextTarget instanceof Element && this.isInsidePicker(nextTarget))) this.open$.next(false);
 		this.cdr.markForCheck();
 	}
 	onDateSelect(date) {
@@ -12220,6 +12225,138 @@ i0.ɵɵngDeclareClassMetadata({
 		"info"
 	];
 })(BannerComponent || (BannerComponent = {}));
+var ErrorPageComponent = class ErrorPageComponent {
+	constructor() {
+		this.status = 500;
+		this.retry = new EventEmitter();
+		this.contactSupport = new EventEmitter();
+	}
+	get page() {
+		return ErrorPageComponent.Pages[this.status];
+	}
+	get illustration() {
+		return ErrorPageComponent.illustrationFor(this.status);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: ErrorPageComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			type: ErrorPageComponent,
+			isStandalone: false,
+			selector: "riv-error-page",
+			inputs: { status: "status" },
+			outputs: {
+				retry: "retry",
+				contactSupport: "contactSupport"
+			},
+			ngImport: i0,
+			template: "<div class=\"content\">\n  <h1 class=\"heading\">\n    <span class=\"status\">{{ status }}</span>\n    <span class=\"title\">{{ page.title }}</span>\n  </h1>\n  <div class=\"body\">\n    <p class=\"message\">{{ page.message }}</p>\n    <div class=\"actions\">\n      <button\n        *ngIf=\"page.retryable\"\n        type=\"button\"\n        rivButton\n        (click)=\"retry.emit()\"\n      >\n        Try again\n      </button>\n      <button type=\"button\" rivButton (click)=\"contactSupport.emit()\">\n        Contact support\n      </button>\n    </div>\n  </div>\n</div>\n<div class=\"illustration riv-illustration-{{ illustration }}\"></div>\n",
+			styles: [":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--size-xlarge);padding:var(--size-xxlarge);background-color:var(--purp-10)}.content{display:flex;flex-direction:column;gap:var(--size-xlarge);max-width:calc(var(--base-grid-size) * 88)}.heading{display:flex;flex-direction:column;gap:var(--size-xsmall)}.status{font:var(--font-weight-heavy) calc(var(--base-grid-size) * 41) / 1 var(--font-stack);color:#9980c1}.title{font:var(--title-06)}.body{display:flex;flex-direction:column;gap:var(--size-large)}.message{font:var(--body-medium)}.actions{display:flex;flex-wrap:wrap;gap:var(--size-small)}.illustration{flex:1 1 calc(var(--base-grid-size) * 75)}.riv-illustration-searching{max-width:461px;aspect-ratio:461 / 451}.riv-illustration-unplugged{max-width:657px;aspect-ratio:657 / 483}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: i1.NgIf,
+				selector: "[ngIf]",
+				inputs: [
+					"ngIf",
+					"ngIfThen",
+					"ngIfElse"
+				]
+			}, {
+				kind: "component",
+				type: ButtonComponent,
+				selector: "[rivButton]",
+				inputs: [
+					"locked",
+					"disabled",
+					"loading",
+					"full",
+					"size",
+					"variant",
+					"icon",
+					"iconPosition",
+					"current"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ErrorPageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "riv-error-page",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			standalone: false,
+			template: "<div class=\"content\">\n  <h1 class=\"heading\">\n    <span class=\"status\">{{ status }}</span>\n    <span class=\"title\">{{ page.title }}</span>\n  </h1>\n  <div class=\"body\">\n    <p class=\"message\">{{ page.message }}</p>\n    <div class=\"actions\">\n      <button\n        *ngIf=\"page.retryable\"\n        type=\"button\"\n        rivButton\n        (click)=\"retry.emit()\"\n      >\n        Try again\n      </button>\n      <button type=\"button\" rivButton (click)=\"contactSupport.emit()\">\n        Contact support\n      </button>\n    </div>\n  </div>\n</div>\n<div class=\"illustration riv-illustration-{{ illustration }}\"></div>\n",
+			styles: [":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--size-xlarge);padding:var(--size-xxlarge);background-color:var(--purp-10)}.content{display:flex;flex-direction:column;gap:var(--size-xlarge);max-width:calc(var(--base-grid-size) * 88)}.heading{display:flex;flex-direction:column;gap:var(--size-xsmall)}.status{font:var(--font-weight-heavy) calc(var(--base-grid-size) * 41) / 1 var(--font-stack);color:#9980c1}.title{font:var(--title-06)}.body{display:flex;flex-direction:column;gap:var(--size-large)}.message{font:var(--body-medium)}.actions{display:flex;flex-wrap:wrap;gap:var(--size-small)}.illustration{flex:1 1 calc(var(--base-grid-size) * 75)}.riv-illustration-searching{max-width:461px;aspect-ratio:461 / 451}.riv-illustration-unplugged{max-width:657px;aspect-ratio:657 / 483}\n"]
+		}]
+	}],
+	propDecorators: {
+		status: [{ type: Input }],
+		retry: [{ type: Output }],
+		contactSupport: [{ type: Output }]
+	}
+});
+(function(ErrorPageComponent) {
+	ErrorPageComponent.Statuses = [
+		400,
+		403,
+		404,
+		500,
+		503
+	];
+	ErrorPageComponent.Illustrations = ["searching", "unplugged"];
+	ErrorPageComponent.Pages = {
+		400: {
+			title: "Bad page request",
+			message: "We ran into a problem with your request, likely due to incorrect or missing information. Try refreshing the page, submitting your request again, or clearing your browser cache.",
+			retryable: true
+		},
+		403: {
+			title: "Access denied",
+			message: "You don't have access to this page. If you think you should, ask your account admin for access or contact support.",
+			retryable: false
+		},
+		404: {
+			title: "Page not found",
+			message: "We couldn't find that page. It may have moved, been renamed, or the link is outdated. Double check the URL or return to Rivet to keep going.",
+			retryable: false
+		},
+		500: {
+			title: "Internal server error",
+			message: "We hit an unexpected error processing your request. Our engineering team has been automatically alerted. Don't worry - any actions you've taken or data you've submitted haven't been lost.",
+			retryable: true
+		},
+		503: {
+			title: "Service unavailable",
+			message: "The app is temporarily unavailable due to scheduled maintenance or high traffic. It should be back up shortly.",
+			retryable: true
+		}
+	};
+	function statusFor(httpStatus) {
+		return ErrorPageComponent.Statuses.find((status) => status === httpStatus) ?? (httpStatus >= 400 && httpStatus < 500 ? 400 : 500);
+	}
+	ErrorPageComponent.statusFor = statusFor;
+	function illustrationFor(status) {
+		return status < 500 ? "searching" : "unplugged";
+	}
+	ErrorPageComponent.illustrationFor = illustrationFor;
+})(ErrorPageComponent || (ErrorPageComponent = {}));
 const mapIndicators = {
 	SingleSmall: `<svg aria-label="single small map-indicator" width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg" filter="drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25))"><path d="M11.9949 6.4C11.8159 10.8779 5.99968 16 5.99968 16C5.99968 16 0.174787 10.968 0.00444185 6.4C-0.12727 2.86798 2.6886 0 5.99968 0C9.31074 0 12.1361 2.86837 11.9949 6.4Z" fill="white"/></svg>`,
 	SingleRegular: `<svg aria-label="single regular map-indicator" width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg" filter="drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25))"><path d="M18 8.8C18 14.08 9 22 9 22C9 22 0 14.08 0 8.8C0 3.93989 4.02943 0 9 0C13.9705 0 18 3.93989 18 8.8Z" fill="white"/></svg>`,
@@ -12642,7 +12779,7 @@ i0.ɵɵngDeclareClassMetadata({
 		"select:not([disabled])",
 		"textarea:not([disabled])",
 		"[contenteditable=\"true\"]"
-	].map((field) => `.body ${field}`).join(", ");
+	].map((field) => `.body ${field}:not([aria-haspopup])`).join(", ");
 	function focusInitial(dialog) {
 		if (!dialog.contains(document.activeElement)) (dialog.querySelector(initialFocusSelector) ?? dialog).focus();
 	}
@@ -22873,6 +23010,7 @@ var RivModule = class RivModule {
 				DonutComponent,
 				EditableHeadingComponent,
 				EditViewComponent,
+				ErrorPageComponent,
 				FilterChipComponent,
 				FilterDropdownComponent,
 				FormDialogComponent,
@@ -22989,6 +23127,7 @@ var RivModule = class RivModule {
 				DonutComponent,
 				EditableHeadingComponent,
 				EditViewComponent,
+				ErrorPageComponent,
 				FilterChipComponent,
 				FilterDropdownComponent,
 				FormDialogComponent,
@@ -23122,6 +23261,7 @@ i0.ɵɵngDeclareClassMetadata({
 				DonutComponent,
 				EditableHeadingComponent,
 				EditViewComponent,
+				ErrorPageComponent,
 				FilterChipComponent,
 				FilterDropdownComponent,
 				FormDialogComponent,
@@ -23237,6 +23377,7 @@ i0.ɵɵngDeclareClassMetadata({
 				DonutComponent,
 				EditableHeadingComponent,
 				EditViewComponent,
+				ErrorPageComponent,
 				FilterChipComponent,
 				FilterDropdownComponent,
 				FormDialogComponent,
@@ -23320,6 +23461,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
-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, FilterDropdownComponent, FormDialogComponent, 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, SettingRowComponent, SideSheetComponent, SimpleSelectComponent, SimpleTabComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SimpleTabsComponent, SizeDirective, SmallCurrencyPipe, SmallNumberPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableCollapseAllComponent, 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, ErrorPageComponent, FilterChipComponent, FilterDropdownComponent, FormDialogComponent, 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, SettingRowComponent, SideSheetComponent, SimpleSelectComponent, SimpleTabComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SimpleTabsComponent, SizeDirective, SmallCurrencyPipe, SmallNumberPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableCollapseAllComponent, 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