{"version":3,"file":"rivet-health-design-system.mjs","sources":["../../../projects/riv/src/lib/accessibility/sr-only/sr-only.component.ts","../../../projects/riv/src/lib/accessibility/sr-only/sr-only.component.html","../../../projects/riv/src/lib/download/download.service.ts","../../../projects/riv/src/lib/format/pipes/common.ts","../../../projects/riv/src/lib/format/pipes/date.pipe.ts","../../../projects/riv/src/lib/format/pipes/days.pipe.ts","../../../projects/riv/src/lib/format/pipes/dollars.pipe.ts","../../../projects/riv/src/lib/format/pipes/number.pipe.ts","../../../projects/riv/src/lib/format/pipes/percentage.pipe.ts","../../../projects/riv/src/lib/format/pipes/sentence-case.pipe.ts","../../../projects/riv/src/lib/format/pipes/small-currency.pipe.ts","../../../projects/riv/src/lib/overlay/callout/callout.helpers.ts","../../../projects/riv/src/lib/overlay/callout/lock-scroll.directive.ts","../../../projects/riv/src/lib/size/size.directive.ts","../../../projects/riv/src/lib/overlay/callout/callout.component.ts","../../../projects/riv/src/lib/overlay/callout/callout.component.html","../../../projects/riv/src/lib/overlay/overlay.service.ts","../../../projects/riv/src/lib/overlay/overlay.directive.ts","../../../projects/riv/src/lib/overlay/callout/tooltip/tooltip.component.ts","../../../projects/riv/src/lib/overlay/callout/tooltip/tooltip.component.html","../../../projects/riv/src/lib/overlay/callout/tooltip/tooltip.directive.ts","../../../projects/riv/src/lib/format/svg-text-truncate/svg-text-truncate.directive.ts","../../../projects/riv/src/lib/format/truncate/truncate.component.ts","../../../projects/riv/src/lib/format/truncate/truncate.component.html","../../../projects/riv/src/lib/icon/dom-cache.ts","../../../projects/riv/src/lib/icon/icons.ts","../../../projects/riv/src/lib/icon/icon.component.ts","../../../projects/riv/src/lib/icon/icon.component.html","../../../projects/riv/src/lib/overlay/callout/help/help.component.ts","../../../projects/riv/src/lib/overlay/callout/help/help.component.html","../../../projects/riv/src/lib/navigation/link/link.component.ts","../../../projects/riv/src/lib/navigation/link/link.component.html","../../../projects/riv/src/lib/input/validation-message/validation-message.component.ts","../../../projects/riv/src/lib/input/validation-message/validation-message.component.html","../../../projects/riv/src/lib/input/input-label/input-label.component.ts","../../../projects/riv/src/lib/input/input-label/input-label.component.html","../../../projects/riv/src/lib/input/auto-focus/auto-focus.directive.ts","../../../projects/riv/src/lib/input/text-field/text-field.component.ts","../../../projects/riv/src/lib/input/text-field/text-field.component.html","../../../projects/riv/src/lib/input/alphabetic-field/alphabetic-field.component.ts","../../../projects/riv/src/lib/input/button-group/button-group.component.ts","../../../projects/riv/src/lib/input/button-group/button-group.component.html","../../../projects/riv/src/lib/load/loading/loading.component.ts","../../../projects/riv/src/lib/load/loading/loading.component.html","../../../projects/riv/src/lib/input/button/button.component.ts","../../../projects/riv/src/lib/input/button/button.component.html","../../../projects/riv/src/lib/input/checkbox/checkbox.component.ts","../../../projects/riv/src/lib/input/checkbox/checkbox.component.html","../../../projects/riv/src/lib/input/card-checkbox/card-checkbox.component.ts","../../../projects/riv/src/lib/input/card-checkbox/card-checkbox.component.html","../../../projects/riv/src/lib/input/number-field/number-field.component.ts","../../../projects/riv/src/lib/input/number-field/number-field.component.html","../../../projects/riv/src/lib/input/currency-field/currency-field.component.ts","../../../projects/riv/src/lib/input/currency-field/currency-field.component.html","../../../projects/riv/src/lib/util/local-storage.ts","../../../projects/riv/src/lib/overlay/callout/select-callout-defaults.ts","../../../projects/riv/src/lib/input/select/state.ts","../../../projects/riv/src/lib/load/loading-cover/loading-cover.component.ts","../../../projects/riv/src/lib/load/loading-cover/loading-cover.component.html","../../../projects/riv/src/lib/input/search/search.component.ts","../../../projects/riv/src/lib/input/search/search.component.html","../../../projects/riv/src/lib/visualization/highlight/highlight.helpers.ts","../../../projects/riv/src/lib/visualization/highlight/highlight.component.ts","../../../projects/riv/src/lib/visualization/highlight/highlight.component.html","../../../projects/riv/src/lib/input/select/select-node/select-node.component.ts","../../../projects/riv/src/lib/input/select/select-node/select-node.component.html","../../../projects/riv/src/lib/visualization/zero-state/zero-state.component.ts","../../../projects/riv/src/lib/visualization/zero-state/zero-state.component.html","../../../projects/riv/src/lib/input/select/select/select.component.ts","../../../projects/riv/src/lib/input/select/select/select.component.html","../../../projects/riv/src/lib/input/simple-select/simple-select.component.ts","../../../projects/riv/src/lib/input/simple-select/simple-select.component.html","../../../projects/riv/src/lib/input/simple-select/option-group.pipe.ts","../../../projects/riv/src/lib/input/calendar/calendar.component.ts","../../../projects/riv/src/lib/input/calendar/calendar.component.html","../../../projects/riv/src/lib/input/date-range/date-range.component.ts","../../../projects/riv/src/lib/input/date-range/date-range.component.html","../../../projects/riv/src/lib/input/date/date.component.ts","../../../projects/riv/src/lib/input/date/date.component.html","../../../projects/riv/src/lib/input/filter-chip/filter-chip.component.ts","../../../projects/riv/src/lib/input/filter-chip/filter-chip.component.html","../../../projects/riv/src/lib/input/mentions-input/mentions-input.component.ts","../../../projects/riv/src/lib/input/mentions-input/mentions-input.component.html","../../../projects/riv/src/lib/input/percentage-field/percentage-field.component.ts","../../../projects/riv/src/lib/input/percentage-field/percentage-field.component.html","../../../projects/riv/src/lib/input/phone-field/phone-field.component.ts","../../../projects/riv/src/lib/input/radio/radio.component.ts","../../../projects/riv/src/lib/input/radio/radio.component.html","../../../projects/riv/src/lib/input/search-select/search-select.component.ts","../../../projects/riv/src/lib/input/search-select/search-select.component.html","../../../projects/riv/src/lib/input/switch-checkbox/switch-checkbox.component.ts","../../../projects/riv/src/lib/input/switch-checkbox/switch-checkbox.component.html","../../../projects/riv/src/lib/input/textarea-field/textarea-field.component.ts","../../../projects/riv/src/lib/input/textarea-field/textarea-field.component.html","../../../projects/riv/src/lib/layout/card/card-actions.component.ts","../../../projects/riv/src/lib/layout/card/card-actions.component.html","../../../projects/riv/src/lib/layout/card/card.component.ts","../../../projects/riv/src/lib/layout/card/card.component.html","../../../projects/riv/src/lib/layout/card/card-content.component.ts","../../../projects/riv/src/lib/layout/card/card-content.component.html","../../../projects/riv/src/lib/layout/card/card-header.component.ts","../../../projects/riv/src/lib/layout/card/card-header.component.html","../../../projects/riv/src/lib/layout/card/card-link.component.ts","../../../projects/riv/src/lib/layout/card/card-link.component.html","../../../projects/riv/src/lib/layout/card/card-media.component.ts","../../../projects/riv/src/lib/layout/card/card-media.component.html","../../../projects/riv/src/lib/navigation/editable-heading/editable-heading.component.ts","../../../projects/riv/src/lib/navigation/editable-heading/editable-heading.component.html","../../../projects/riv/src/lib/navigation/page-header/page-header.component.ts","../../../projects/riv/src/lib/navigation/page-header/page-header.component.html","../../../projects/riv/src/lib/navigation/tabs/tab/tab.component.ts","../../../projects/riv/src/lib/navigation/tabs/tab/tab.component.html","../../../projects/riv/src/lib/navigation/tabs/tabs/tabs.component.ts","../../../projects/riv/src/lib/navigation/tabs/tabs/tabs.component.html","../../../projects/riv/src/lib/navigation/views/state.ts","../../../projects/riv/src/lib/overlay/overlay-outlet.component.ts","../../../projects/riv/src/lib/overlay/overlay-outlet.component.html","../../../projects/riv/src/lib/overlay/modal/modal.component.ts","../../../projects/riv/src/lib/overlay/modal/modal.component.html","../../../projects/riv/src/lib/overlay/modal/side-sheet/side-sheet.component.ts","../../../projects/riv/src/lib/overlay/modal/side-sheet/side-sheet.component.html","../../../projects/riv/src/lib/overlay/modal/dialog/dialog.component.ts","../../../projects/riv/src/lib/overlay/modal/dialog/dialog.component.html","../../../projects/riv/src/lib/navigation/views/permission-picker/permission-picker.component.ts","../../../projects/riv/src/lib/navigation/views/permission-picker/permission-picker.component.html","../../../projects/riv/src/lib/navigation/views/edit-view/edit-view.component.ts","../../../projects/riv/src/lib/navigation/views/edit-view/edit-view.component.html","../../../projects/riv/src/lib/overlay/callout/menu/menu.component.ts","../../../projects/riv/src/lib/overlay/callout/menu/menu.component.html","../../../projects/riv/src/lib/overlay/callout/menu/menu-item/menu-item.component.ts","../../../projects/riv/src/lib/overlay/callout/menu/menu-item/menu-item.component.html","../../../projects/riv/src/lib/navigation/views/view-menu/view-menu.component.ts","../../../projects/riv/src/lib/navigation/views/view-menu/view-menu.component.html","../../../projects/riv/src/lib/navigation/views/all-views-modal/all-views-modal.component.ts","../../../projects/riv/src/lib/navigation/views/all-views-modal/all-views-modal.component.html","../../../projects/riv/src/lib/overlay/toast/toast.component.ts","../../../projects/riv/src/lib/overlay/toast/toast.component.html","../../../projects/riv/src/lib/navigation/views/views/views.component.ts","../../../projects/riv/src/lib/navigation/views/views/views.component.html","../../../projects/riv/src/lib/notification/badge/badge.component.ts","../../../projects/riv/src/lib/notification/badge/badge.component.html","../../../projects/riv/src/lib/notification/banner/banner-action.component.ts","../../../projects/riv/src/lib/notification/banner/banner-action.component.html","../../../projects/riv/src/lib/notification/banner/banner.component.ts","../../../projects/riv/src/lib/notification/banner/banner.component.html","../../../projects/riv/src/lib/notification/map-indicator/map-indicators.ts","../../../projects/riv/src/lib/notification/map-indicator/map-indicator.component.ts","../../../projects/riv/src/lib/notification/map-indicator/map-indicator.component.html","../../../projects/riv/src/lib/notification/notification-badge/notification-badge.component.ts","../../../projects/riv/src/lib/overlay/callout/tooltip/locked-tooltip.directive.ts","../../../projects/riv/src/lib/overlay/toast/toast-action.component.ts","../../../projects/riv/src/lib/overlay/toast/toast-action.component.html","../../../projects/riv/src/lib/table/simple-table/simple-table-cell.component.ts","../../../projects/riv/src/lib/table/simple-table/simple-table-cell.component.html","../../../projects/riv/src/lib/table/simple-table/simple-table-header-cell.component.ts","../../../projects/riv/src/lib/table/simple-table/simple-table-header-cell.component.html","../../../projects/riv/src/lib/table/simple-table/simple-table-row.component.ts","../../../projects/riv/src/lib/table/simple-table/simple-table-row.component.html","../../../projects/riv/src/lib/table/table/state.ts","../../../projects/riv/src/lib/table/simple-table/coordinate-helper.ts","../../../projects/riv/src/lib/table/simple-table/simple-table.component.ts","../../../projects/riv/src/lib/table/simple-table/simple-table.component.html","../../../projects/riv/src/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.ts","../../../projects/riv/src/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.html","../../../projects/riv/src/lib/table/table/table-column-settings/table-column-settings.component.ts","../../../projects/riv/src/lib/table/table/table-column-settings/table-column-settings.component.html","../../../projects/riv/src/lib/table/table/table-csv-export/table-csv-export.component.ts","../../../projects/riv/src/lib/table/table/table-csv-export/table-csv-export.component.html","../../../projects/riv/src/lib/table/table/table-header-resize-handle/table-header-resize-handle.component.ts","../../../projects/riv/src/lib/table/table/table-header-resize-handle/table-header-resize-handle.component.html","../../../projects/riv/src/lib/table/table/table-search-columns/table-search-columns.component.ts","../../../projects/riv/src/lib/table/table/table-search-columns/table-search-columns.component.html","../../../projects/riv/src/lib/table/table/table-search/table-search.component.ts","../../../projects/riv/src/lib/table/table/table-search/table-search.component.html","../../../projects/riv/src/lib/table/table/clipboard.ts","../../../projects/riv/src/lib/table/table/table/table.component.ts","../../../projects/riv/src/lib/table/table/table/table.component.html","../../../projects/riv/src/lib/visibility/visibility.directive.ts","../../../projects/riv/src/lib/visualization/chart/chart-scaling.ts","../../../projects/riv/src/lib/visualization/chart/chart.ts","../../../projects/riv/src/lib/visualization/issue/issue.component.ts","../../../projects/riv/src/lib/visualization/issue/issue.component.html","../../../projects/riv/src/lib/visualization/legend-item/legend-item.component.ts","../../../projects/riv/src/lib/visualization/legend-item/legend-item.component.html","../../../projects/riv/src/lib/visualization/chart/chart.component.ts","../../../projects/riv/src/lib/visualization/chart/chart.component.html","../../../projects/riv/src/lib/visualization/data-table/data-table-row.component.ts","../../../projects/riv/src/lib/visualization/data-table/data-table-cell.component.ts","../../../projects/riv/src/lib/visualization/data-table/data-table-header-cell.component.ts","../../../projects/riv/src/lib/visualization/data-table/data-table.component.ts","../../../projects/riv/src/lib/visualization/donut/donut.component.ts","../../../projects/riv/src/lib/visualization/donut/donut.component.html","../../../projects/riv/src/lib/visualization/funnel-chart/funnel-chart.helpers.ts","../../../projects/riv/src/lib/visualization/metric/metric.component.ts","../../../projects/riv/src/lib/visualization/metric/metric.component.html","../../../projects/riv/src/lib/visualization/trend/trend.component.ts","../../../projects/riv/src/lib/visualization/trend/trend.component.html","../../../projects/riv/src/lib/visualization/funnel-chart/funnel-chart.component.ts","../../../projects/riv/src/lib/visualization/funnel-chart/funnel-chart.component.html","../../../projects/riv/src/lib/visualization/mini-pie/mini-pie.component.ts","../../../projects/riv/src/lib/visualization/mini-pie/mini-pie.component.html","../../../projects/riv/src/lib/visualization/progress/progress.component.ts","../../../projects/riv/src/lib/visualization/progress/progress.component.html","../../../projects/riv/src/lib/visualization/intervals.ts","../../../projects/riv/src/lib/visualization/stacked-column/stacked-column.helpers.ts","../../../projects/riv/src/lib/visualization/stacked-column/stacked-column.component.ts","../../../projects/riv/src/lib/visualization/stacked-column/stacked-column.component.html","../../../projects/riv/src/lib/visualization/stacked-row/stacked-row.helpers.ts","../../../projects/riv/src/lib/visualization/stacked-row/stacked-row.component.ts","../../../projects/riv/src/lib/visualization/stacked-row/stacked-row.component.html","../../../projects/riv/src/lib/visualization/time-series/time-series.helpers.ts","../../../projects/riv/src/lib/visualization/time-series/time-series.component.ts","../../../projects/riv/src/lib/visualization/time-series/time-series.component.html","../../../projects/riv/src/lib/riv.module.ts","../../../projects/riv/src/rivet-health-design-system.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/**\n * A utility component that visually hides content while keeping it accessible\n * to screen readers. Use this component to provide context to assistive\n * technology users that is not needed visually. The content is hidden using\n * CSS positioning techniques that keep it in the DOM and accessible to screen\n * readers, but that remove it from the visual flow.\n */\n@Component({\n selector: 'riv-sr-only',\n templateUrl: './sr-only.component.html',\n styleUrls: ['./sr-only.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SrOnlyComponent {}\n","\n","import { DOCUMENT } from '@angular/common';\nimport { Inject, Injectable } from '@angular/core';\n\n@Injectable({ providedIn: 'root' })\nexport class DownloadService {\n constructor(@Inject(DOCUMENT) private readonly documentRef: Document) {}\n\n async downloadUrl(url: string, filename?: string, target?: string) {\n const a = this.documentRef.createElement('a');\n if (filename) {\n a.download = filename;\n }\n if (target) {\n a.target = target;\n }\n a.href = url;\n document.body.appendChild(a);\n a.click();\n await new Promise(resolve =>\n setTimeout(() => {\n a.remove();\n URL.revokeObjectURL(a.href);\n resolve();\n }, 0),\n );\n }\n\n async downloadBlob(blob: Blob, filename: string) {\n const a = this.documentRef.createElement('a');\n a.download = filename;\n a.href = URL.createObjectURL(blob);\n document.body.appendChild(a);\n a.click();\n await new Promise(resolve =>\n setTimeout(() => {\n a.remove();\n URL.revokeObjectURL(a.href);\n resolve();\n }, 0),\n );\n }\n}\n","export const NO_DATA_FALLBACK = '-';\n","import { DatePipe as AngularDatePipe } from '@angular/common';\nimport { Pipe, PipeTransform } from '@angular/core';\nimport { NO_DATA_FALLBACK } from './common';\n\n@Pipe({ name: 'rivDate' })\nexport class DatePipe implements PipeTransform {\n private readonly inner = new AngularDatePipe('en-US');\n transform(\n value?: string | number | Date | null,\n format?: string,\n timezone?: string,\n ) {\n return (\n this.inner.transform(value, format ?? 'shortDate', timezone) ??\n NO_DATA_FALLBACK\n );\n }\n}\n","import { DecimalPipe } from '@angular/common';\nimport { Pipe, PipeTransform } from '@angular/core';\nimport { NO_DATA_FALLBACK } from './common';\n\n@Pipe({ name: 'rivDays' })\nexport class DaysPipe implements PipeTransform {\n private readonly inner = new DecimalPipe('en-us');\n transform(value?: string | number | null, digitsInfo?: string) {\n const ret = this.inner.transform(value, digitsInfo ?? '1.0-2');\n return ret ? ret + (value === 1 ? ' day' : ' days') : NO_DATA_FALLBACK;\n }\n}\n","import { CurrencyPipe } from '@angular/common';\nimport { Pipe, PipeTransform } from '@angular/core';\nimport { NO_DATA_FALLBACK } from './common';\n\n@Pipe({ name: 'rivDollars' })\nexport class DollarsPipe implements PipeTransform {\n readonly inner = new CurrencyPipe('en-us');\n public transform(value?: number | string | null, digitsInfo?: string) {\n return (\n this.inner.transform(\n value,\n undefined,\n undefined,\n digitsInfo ?? '1.2-2',\n ) ?? NO_DATA_FALLBACK\n );\n }\n}\n","import { DecimalPipe } from '@angular/common';\nimport { Pipe, PipeTransform } from '@angular/core';\nimport { NO_DATA_FALLBACK } from './common';\n\n@Pipe({ name: 'rivNumber' })\nexport class NumberPipe implements PipeTransform {\n private readonly inner = new DecimalPipe('en-us');\n transform(value?: string | number | null, digitsInfo?: string) {\n return (\n this.inner.transform(value, digitsInfo ?? '1.0-0') ?? NO_DATA_FALLBACK\n );\n }\n}\n","import { PercentPipe } from '@angular/common';\nimport { Pipe, PipeTransform } from '@angular/core';\nimport { NO_DATA_FALLBACK } from './common';\n\n@Pipe({ name: 'rivPercentage' })\nexport class PercentagePipe implements PipeTransform {\n private readonly inner = new PercentPipe('en-us');\n transform(value?: string | number | null, digitsInfo?: string) {\n return (\n this.inner.transform(value, digitsInfo ?? '1.1-1') ?? NO_DATA_FALLBACK\n );\n }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nconst ACRONYMS = new Set([\n 'API',\n 'AWS',\n 'CBSA',\n 'COB',\n 'CPT',\n 'CSV',\n 'DOS',\n 'DRG',\n 'EHR',\n 'EIN',\n 'FTP',\n 'HTML',\n 'HTTP',\n 'HTTPS',\n 'ID',\n 'JSON',\n 'MS',\n 'NPI',\n 'NPPES',\n 'OOP',\n 'PDF',\n 'SQL',\n 'SSN',\n 'URL',\n 'XML',\n]) as ReadonlySet;\n\nexport function toSentenceCase(value?: string | null | unknown): string {\n if (value == null || value === '') return '';\n\n const stringValue = String(value);\n const trimmed = stringValue.trim();\n if (trimmed.length === 0) return '';\n\n const words = trimmed.split(/\\s+/);\n const transformedWords = words.map((word, index) => {\n const upperWord = word.toUpperCase();\n if (ACRONYMS.has(upperWord)) {\n return upperWord;\n }\n if (index === 0) {\n return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();\n }\n return word.toLowerCase();\n });\n\n return transformedWords.join(' ');\n}\n\n@Pipe({ name: 'rivSentenceCase' })\nexport class SentenceCasePipe implements PipeTransform {\n transform(value?: string | null | unknown): string {\n return toSentenceCase(value);\n }\n}\n","import { CurrencyPipe } from '@angular/common';\nimport { Pipe, PipeTransform } from '@angular/core';\nimport { NO_DATA_FALLBACK } from './common';\n\n@Pipe({ name: 'rivSmallCurrency' })\nexport class SmallCurrencyPipe implements PipeTransform {\n private readonly inner = new CurrencyPipe('en-us');\n public transform(value?: number | string | null, digitsInfo?: string) {\n if (value === null || value === undefined) {\n return NO_DATA_FALLBACK;\n }\n\n const num: number =\n typeof value == 'string' ? Number.parseFloat(value) : value;\n const magnitude = Math.log10(Math.abs(num));\n\n if (num === 0) {\n return (\n this.inner.transform(\n num,\n undefined,\n undefined,\n digitsInfo ?? '1.0-0',\n ) ?? NO_DATA_FALLBACK\n );\n }\n if (magnitude >= 9) {\n return (\n (this.inner.transform(\n num / 1_000_000_000,\n undefined,\n undefined,\n digitsInfo ?? num / 1_000_000_000 >= 100 ? '1.0-0' : '1.0-2',\n ) ?? NO_DATA_FALLBACK) + 'B'\n );\n }\n if (magnitude >= 6) {\n return (\n (this.inner.transform(\n num / 1_000_000,\n undefined,\n undefined,\n digitsInfo ?? num / 1_000_000 >= 100 ? '1.0-0' : '1.0-2',\n ) ?? NO_DATA_FALLBACK) + 'M'\n );\n }\n if (magnitude >= 3) {\n return (\n (this.inner.transform(\n num / 1_000,\n undefined,\n undefined,\n digitsInfo ?? num / 1_000 >= 100 ? '1.0-0' : '1.0-2',\n ) ?? NO_DATA_FALLBACK) + 'K'\n );\n }\n return (\n this.inner.transform(\n num,\n undefined,\n undefined,\n digitsInfo ?? num >= 100 ? '1.0-0' : '1.0-2',\n ) ?? NO_DATA_FALLBACK\n );\n }\n}\n","import { CalloutComponent } from './callout.component';\n\ntype Dimensions = {\n width: number;\n height: number;\n};\n\ntype Point = {\n x: number;\n y: number;\n};\n\nexport type Box = Point & Dimensions;\n\nexport type Anchor = Point & { position: CalloutComponent.AnchoredPosition };\n\nexport function getOrigin(\n anchor: Box,\n client: Dimensions,\n viewportSize: Dimensions,\n preferredPosition: CalloutComponent.AnchoredPosition,\n allowedPositions: CalloutComponent.AnchoredPosition[] | null = null,\n fallbackDirection: CalloutComponent.Direction,\n additionalOffset: number,\n): Anchor {\n let position = preferredPosition;\n const allowed =\n !allowedPositions || allowedPositions.length === 0\n ? CalloutComponent.AnchoredPositions\n : allowedPositions;\n let index = allowed.indexOf(position);\n let leastClippedIndex = index;\n let origin = originAtPosition(anchor, client, position, additionalOffset);\n let currentClippedX;\n let currentClippedY;\n let leastClipped = Infinity;\n let foundUnclipped = false;\n // Iterate through allowed positions. The first one we find that doesn't clip out of view, we use.\n // If all of the positions clip, use the one which clipped the least.\n for (\n let checkCount = 0;\n checkCount <= allowed.length && !foundUnclipped;\n checkCount++,\n index =\n fallbackDirection === 'clockwise'\n ? (index + 1) % allowed.length\n : (index - 1 + allowed.length) % allowed.length\n ) {\n position = allowed[index];\n origin = originAtPosition(anchor, client, position, additionalOffset);\n currentClippedX =\n -1 *\n Math.min(origin.x, viewportSize.width - (origin.x + client.width), 0);\n currentClippedY =\n -1 *\n Math.min(origin.y, viewportSize.height - (origin.y + client.height), 0);\n if (currentClippedX > 0 || currentClippedY > 0) {\n const clippedArea =\n currentClippedX * currentClippedY +\n currentClippedX * (client.height - currentClippedY) +\n currentClippedY * (client.width - currentClippedX);\n if (leastClipped > clippedArea) {\n leastClipped = clippedArea;\n leastClippedIndex = index;\n }\n } else {\n foundUnclipped = true;\n }\n }\n if (!foundUnclipped) {\n position = allowed[leastClippedIndex];\n origin = originAtPosition(anchor, client, position, additionalOffset);\n origin.y = origin.y < 0 ? 4 : origin.y;\n }\n return { ...origin, position };\n}\n\nexport function originAtPosition(\n anchor: Box,\n client: Dimensions,\n position: CalloutComponent.AnchoredPosition,\n offset: number,\n): Point {\n switch (position) {\n case 'top-left':\n return {\n x: anchor.x + anchor.width - client.width,\n y: anchor.y - client.height - offset,\n };\n case 'top-center':\n return {\n x: anchor.x + anchor.width / 2 - client.width / 2,\n y: anchor.y - client.height - offset,\n };\n case 'top-right':\n return {\n x: anchor.x,\n y: anchor.y - client.height - offset,\n };\n case 'right-top':\n return {\n x: anchor.x + anchor.width + offset,\n y: anchor.y,\n };\n case 'center-right':\n return {\n x: anchor.x + anchor.width + offset,\n y: anchor.y + anchor.height / 2 - client.height / 2,\n };\n case 'right-bottom':\n return {\n x: anchor.x + anchor.width + offset,\n y: anchor.y + anchor.height - client.height,\n };\n case 'bottom-right':\n return {\n x: anchor.x,\n y: anchor.y + anchor.height + offset,\n };\n case 'bottom-center':\n return {\n x: anchor.x + anchor.width / 2 - client.width / 2,\n y: anchor.y + anchor.height + offset,\n };\n case 'bottom-left':\n return {\n x: anchor.x + anchor.width - client.width,\n y: anchor.y + anchor.height + offset,\n };\n case 'left-bottom':\n return {\n x: anchor.x - client.width - offset,\n y: anchor.y + anchor.height - client.height,\n };\n case 'center-left':\n return {\n x: anchor.x - client.width - offset,\n y: anchor.y + anchor.height / 2 - client.height / 2,\n };\n case 'left-top':\n return {\n x: anchor.x - client.width - offset,\n y: anchor.y,\n };\n }\n}\n","import { Directive, Injectable, Input, OnDestroy, OnInit } from '@angular/core';\n\n@Injectable({ providedIn: 'root' })\nexport class LockScrollContextService {\n private stack = 0;\n\n getContext() {\n return this.stack;\n }\n\n pushContext() {\n return ++this.stack;\n }\n\n popContext() {\n return --this.stack;\n }\n\n public scrollPosition: number = 0;\n}\n\n@Directive({ selector: '[rivLockScroll]' })\nexport class LockScrollDirective implements OnInit, OnDestroy {\n constructor(private readonly context: LockScrollContextService) {}\n\n @Input('rivLockScroll')\n lock: boolean = false;\n\n ngOnInit() {\n if (this.lock) {\n const oldContext = this.context.getContext();\n const newContext = this.context.pushContext();\n if (oldContext === 0 && newContext === 1) {\n this.lockScroll();\n }\n }\n }\n\n ngOnDestroy() {\n if (this.lock) {\n const oldContext = this.context.getContext();\n const newContext = this.context.popContext();\n if (oldContext === 1 && newContext === 0) {\n this.unlockScroll();\n }\n }\n }\n\n private lockScroll() {\n this.context.scrollPosition = document.documentElement.scrollTop;\n document.body.style.position = 'fixed';\n document.body.style.overflow = 'hidden';\n document.body.style.width = '100%';\n document.body.style.height = '100%';\n document.body.style.top = `${this.context.scrollPosition * -1}px`;\n }\n\n private unlockScroll() {\n document.body.removeAttribute('style');\n document.documentElement.scrollTop = this.context.scrollPosition;\n }\n}\n","import {\n Directive,\n ElementRef,\n EventEmitter,\n NgZone,\n OnDestroy,\n OnInit,\n Output,\n} from '@angular/core';\n\n@Directive({\n selector: '[rivClientSize]',\n})\nexport class SizeDirective implements OnInit, OnDestroy {\n private resizeObserver: ResizeObserver;\n\n @Output()\n rivClientSize = new EventEmitter();\n\n constructor(\n private readonly elementRef: ElementRef,\n zone: NgZone,\n ) {\n this.resizeObserver = new ResizeObserver(entries => {\n zone.run(() => {\n for (const entry of entries) {\n this.rivClientSize.emit(entry.target.getBoundingClientRect());\n }\n });\n });\n }\n\n ngOnInit() {\n this.rivClientSize.emit(\n this.elementRef.nativeElement.getBoundingClientRect(),\n );\n this.resizeObserver.observe(this.elementRef.nativeElement);\n }\n\n ngOnDestroy() {\n this.resizeObserver.unobserve(this.elementRef.nativeElement);\n }\n}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { getOrigin } from './callout.helpers';\n\n// TODO: once we upgrade to Angular 16, this component can be cleaned up with\n// signals instead of lifecycle hooks.\n// https://www.notion.so/rivet/Resolve-TODOs-after-Angular-upgrade-1f2667eb2a3180b79f6ad92a7e576f08\n@Component({\n selector: 'riv-callout',\n templateUrl: './callout.component.html',\n styleUrls: ['./callout.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CalloutComponent implements AfterViewInit, OnChanges {\n constructor(private readonly cdr: ChangeDetectorRef) {}\n\n @Input()\n anchor: Element | DOMRect | null = null;\n\n @Input()\n isModal: boolean = true;\n\n @Input()\n preferredPosition: CalloutComponent.AnchoredPosition = 'bottom-right';\n\n @Input()\n allowedPositions: CalloutComponent.AnchoredPosition[] = [\n ...CalloutComponent.AnchoredPositions,\n ];\n\n @Input()\n fallbackDirection: CalloutComponent.Direction = 'counter-clockwise';\n\n @Input()\n showCaret: boolean = true;\n\n @Input()\n theme: CalloutComponent.Theme = 'dark';\n\n @ViewChild('content')\n content: ElementRef | null = null;\n\n @ViewChild('scrim', { static: false })\n scrim: ElementRef | null = null;\n\n private mouseDownInsideContent: boolean = false;\n\n scrimMouseDown(evt: MouseEvent) {\n this.mouseDownInsideContent =\n this.content?.nativeElement.contains(evt.target as Node) ?? false;\n }\n\n scrimClick(evt: MouseEvent) {\n // A click always starts with a mousedown. If a user mouse downs inside the\n // content and then drags to the scrim, this will trigger a click on the scrim.\n // This can happen if the user selects text and drags too far, leading to a\n // bad experience. To prevent that, we track if the mousedown started inside\n // the content. If it did, we ignore the click on the scrim. If it didn't,\n // we allow the click to close the callout.\n if (evt.target === evt.currentTarget && !this.mouseDownInsideContent) {\n this.close.emit();\n }\n // always reset the flag after a click\n this.mouseDownInsideContent = false;\n }\n\n left: number = 0;\n top: number = 0;\n resolvedPosition: CalloutComponent.AnchoredPosition = this.preferredPosition;\n\n ngAfterViewInit() {\n this.setPosition();\n }\n ngOnChanges() {\n this.setPosition();\n }\n onContentSizeChanges() {\n this.setPosition();\n }\n\n setPosition() {\n const windowSize = {\n width: window.innerWidth,\n height: window.innerHeight,\n };\n\n if (this.anchor === null || this.content === null || this.scrim === null)\n return;\n\n const scrimRect = this.scrim.nativeElement.getBoundingClientRect();\n\n const anchorRect =\n this.anchor instanceof Element\n ? this.anchor.getBoundingClientRect()\n : this.anchor;\n\n const anchorBounds = {\n x: anchorRect.left - scrimRect.left, // In most cases, the scrim will be positioned at (0,0), but if it's not, this will make sure the callout is positioned correctly regardless.\n y: anchorRect.top - scrimRect.top,\n width: anchorRect.right - anchorRect.left,\n height: anchorRect.bottom - anchorRect.top,\n };\n\n const calloutSize = {\n width: this.content.nativeElement.clientWidth,\n height: this.content.nativeElement.clientHeight,\n };\n\n const calloutOrigin = getOrigin(\n anchorBounds,\n calloutSize,\n windowSize,\n this.preferredPosition,\n this.allowedPositions,\n this.fallbackDirection,\n this.showCaret ? 8 : 0,\n );\n\n this.left = calloutOrigin.x;\n this.top = calloutOrigin.y;\n this.resolvedPosition = calloutOrigin.position;\n this.cdr.detectChanges();\n }\n\n @Output()\n readonly close = new EventEmitter();\n}\n\nexport namespace CalloutComponent {\n export const Themes = ['light', 'dark'] as const;\n export type Theme = (typeof Themes)[number];\n\n export const AnchoredPositions = [\n 'top-left',\n 'top-center',\n 'top-right',\n 'right-top',\n 'center-right',\n 'right-bottom',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left',\n 'left-bottom',\n 'center-left',\n 'left-top',\n ] as const;\n export type AnchoredPosition = (typeof AnchoredPositions)[number];\n\n export const Directions = ['clockwise', 'counter-clockwise'] as const;\n export type Direction = (typeof Directions)[number];\n}\n","\n \n \n \n\n","import { Injectable, TemplateRef } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\nexport type Overlays = Map>;\n\n@Injectable({ providedIn: 'root' })\nexport class OverlayService {\n public overlays = new BehaviorSubject(new Map());\n\n // Note: these functions are async because Angular's change detection fails\n // to detect changes properly when the source of an event is from within a\n // template that is being removed as a result of that event. The Angular\n // template sees a cached version of the overlays Map (even though the\n // component TypeScript picks up on the changed Map), regardless of trying to\n // trigger change detection manually. Moving the change to the next tick with\n // this faux async fixes the issue. We may be able to remove them after an\n // Angular upgrade (TODO).\n // https://www.notion.so/rivet/Resolve-TODOs-after-Angular-upgrade-1f2667eb2a3180b79f6ad92a7e576f08\n public async add(overlay: TemplateRef): Promise {\n await Promise.resolve();\n const key = Symbol();\n const overlays = new Map(this.overlays.getValue());\n overlays.set(key, overlay);\n this.overlays.next(overlays);\n return key;\n }\n public async remove(key: Symbol) {\n await Promise.resolve();\n const overlays = new Map(this.overlays.getValue());\n overlays.delete(key);\n this.overlays.next(overlays);\n }\n}\n","import { Directive, OnDestroy, OnInit, TemplateRef } from '@angular/core';\nimport { OverlayService } from './overlay.service';\n\n@Directive({\n selector: '[riv-overlay]',\n})\nexport class OverlayDirective implements OnInit, OnDestroy {\n constructor(\n private readonly template: TemplateRef,\n private readonly overlayService: OverlayService,\n ) {}\n\n private key?: Promise;\n\n ngOnInit() {\n this.key = this.overlayService.add(this.template);\n }\n\n ngOnDestroy() {\n if (this.key) this.key.then(k => this.overlayService.remove(k));\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n TemplateRef,\n} from '@angular/core';\nimport { CalloutComponent } from '../callout.component';\n\nfunction isTemplate(v: string | TemplateRef): v is TemplateRef {\n return typeof v !== 'string';\n}\n\n@Component({\n selector: 'riv-tooltip',\n templateUrl: './tooltip.component.html',\n styleUrls: ['./tooltip.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TooltipComponent {\n @Input()\n anchor: Element | DOMRect | null = null;\n\n @Input()\n content?: string | TemplateRef;\n\n @Input()\n theme: CalloutComponent.Theme = 'dark';\n\n @Input()\n maxWidth: string = 'calc(var(--base-grid-size) * 50)';\n\n @Input()\n preferredPosition: TooltipComponent.AnchoredPosition = 'top-center';\n\n @Output()\n onMouseEnter = new EventEmitter();\n\n @Output()\n onMouseLeave = new EventEmitter();\n\n _onMouseLeave(evt: MouseEvent) {\n this.onMouseLeave.emit(evt);\n }\n\n _onMouseEnter(evt: MouseEvent) {\n this.onMouseEnter.emit(evt);\n }\n\n readonly isTemplate = isTemplate;\n readonly allowedPositions = [...TooltipComponent.AnchoredPositions];\n}\n\nexport namespace TooltipComponent {\n export const AnchoredPositions = [\n 'top-center',\n 'center-right',\n 'bottom-center',\n 'center-left',\n ] as const;\n export type AnchoredPosition = Extract<\n (typeof AnchoredPositions)[number],\n CalloutComponent.AnchoredPosition\n >;\n}\n","\n \n \n \n \n \n {{ content }}\n
\n \n\n","import {\n ApplicationRef,\n ComponentRef,\n Directive,\n ElementRef,\n HostListener,\n Input,\n OnDestroy,\n TemplateRef,\n ViewContainerRef,\n} from '@angular/core';\nimport { TooltipComponent } from './tooltip.component';\n\n@Directive({\n selector: '[rivTooltip]',\n})\nexport class TooltipDirective implements OnDestroy {\n constructor(\n protected readonly el: ElementRef,\n protected readonly applicationRef: ApplicationRef,\n ) {}\n\n private _rivTooltip?: string | TemplateRef;\n\n @Input()\n set rivTooltip(value: string | TemplateRef | undefined) {\n this._rivTooltip = value;\n if (!value) {\n this.cancelOpen();\n this.discardOpenProgress();\n this.closeImmediately();\n }\n }\n\n get rivTooltip(): string | TemplateRef | undefined {\n return this._rivTooltip;\n }\n\n @Input()\n rivTooltipTheme: 'dark' | 'light' = 'dark';\n\n @Input()\n rivTooltipMaxWidth = 'calc(var(--base-grid-size) * 50)';\n\n @Input()\n rivTooltipPreferredPosition: TooltipComponent.AnchoredPosition = 'top-center';\n\n @Input()\n rivTooltipCloseDelay: number = 100;\n\n @Input()\n rivTooltipOpenDelay: number = 500;\n\n /**\n * Window after the pointer leaves in which the time already spent hovering is\n * kept. Coming back within it resumes the open countdown rather than starting\n * it over, so brushing off a small target — a 16px `riv-help` icon, say — and\n * returning does not cost another full `rivTooltipOpenDelay`.\n */\n @Input()\n rivTooltipGracePeriod: number = 300;\n\n private tooltipRef?: ComponentRef;\n private closeTimeout?: number;\n private openTimeout?: number;\n private graceTimeout?: number;\n /** Hover time already served toward `rivTooltipOpenDelay`. */\n private servedDelay = 0;\n /** When the pending open countdown started. */\n private openStartedAt = 0;\n\n @HostListener('mouseenter') onMouseEnter() {\n if (!this.rivTooltip) return;\n if (this.tooltipRef) {\n this.cancelClose();\n } else if (!this.openTimeout) {\n window.clearTimeout(this.graceTimeout);\n this.openStartedAt = Date.now();\n this.openTimeout = window.setTimeout(() => {\n const tooltip = this.applicationRef.components[0].injector\n .get(ViewContainerRef)\n .createComponent(TooltipComponent);\n tooltip.instance.anchor = this.el.nativeElement;\n tooltip.instance.content = this.rivTooltip;\n tooltip.instance.theme = this.rivTooltipTheme;\n tooltip.instance.maxWidth = this.rivTooltipMaxWidth;\n tooltip.instance.preferredPosition = this.rivTooltipPreferredPosition;\n tooltip.instance.onMouseEnter.subscribe(this.cancelClose.bind(this));\n tooltip.instance.onMouseLeave.subscribe(this.initiateClose.bind(this));\n this.tooltipRef = tooltip;\n this.openTimeout = undefined;\n this.servedDelay = 0;\n }, Math.max(0, this.rivTooltipOpenDelay - this.servedDelay));\n }\n }\n\n @HostListener('mouseleave') onMouseLeave() {\n this.holdOpenProgress();\n this.cancelOpen();\n if (this.tooltipRef) {\n this.initiateClose();\n }\n }\n\n ngOnDestroy(): void {\n this.cancelOpen();\n this.discardOpenProgress();\n this.initiateClose();\n }\n\n private initiateClose() {\n this.closeTimeout = window.setTimeout(() => {\n this.tooltipRef?.destroy();\n this.tooltipRef = undefined;\n }, this.rivTooltipCloseDelay);\n }\n\n private cancelClose() {\n window.clearTimeout(this.closeTimeout);\n }\n\n private cancelOpen() {\n window.clearTimeout(this.openTimeout);\n this.openTimeout = undefined;\n }\n\n /**\n * Banks the hover time served so far and starts the grace period, after which\n * the countdown starts from zero again.\n */\n private holdOpenProgress() {\n if (!this.openTimeout) return;\n this.servedDelay += Date.now() - this.openStartedAt;\n this.graceTimeout = window.setTimeout(\n () => (this.servedDelay = 0),\n this.rivTooltipGracePeriod,\n );\n }\n\n private discardOpenProgress() {\n window.clearTimeout(this.graceTimeout);\n this.servedDelay = 0;\n }\n\n private closeImmediately() {\n window.clearTimeout(this.closeTimeout);\n this.tooltipRef?.destroy();\n this.tooltipRef = undefined;\n }\n}\n","import {\n AfterViewInit,\n ApplicationRef,\n Directive,\n ElementRef,\n Input,\n} from '@angular/core';\nimport { TooltipDirective } from '../../overlay/callout/tooltip/tooltip.directive';\n\n// Credit to boneskull on Github, whose work I used as a reference\n@Directive({\n selector: 'svg text[rivSVGTextTruncate]',\n})\nexport class SVGTextTruncateDirective\n extends TooltipDirective\n implements AfterViewInit\n{\n @Input()\n text: string = '';\n\n @Input()\n width: number = 50;\n\n constructor(\n protected override readonly el: ElementRef,\n protected override readonly applicationRef: ApplicationRef,\n ) {\n super(el, applicationRef);\n }\n\n ngAfterViewInit(): void {\n this.svgTruncate(this.el.nativeElement);\n }\n\n // Truncate through setting strings as the text-content and testing their width\n svgTruncate(element: SVGTextContentElement) {\n element.textContent = this.text;\n let currentLength: number = element.textContent.length;\n\n // If the text can fit in the given width, no truncation needed.\n if (currentLength > 0 && element.getComputedTextLength() <= this.width) {\n element.textContent = this.text;\n this.rivTooltip = '';\n } else {\n /*\n Test the length of each \"substring + ...\" combo until we find one that fits.\n Start by making room for the elipses by subtracting 3 from the length.\n */\n currentLength = currentLength - 3;\n let currentTextFitsInWidth: boolean = false;\n while (currentLength > 0 && !currentTextFitsInWidth) {\n const currentTextToTry: string =\n this.text.slice(0, currentLength) + '...';\n\n element.textContent = currentTextToTry;\n\n if (\n element.getSubStringLength(0, currentTextToTry.length) <= this.width\n ) {\n currentTextFitsInWidth = true;\n } else {\n currentLength--;\n }\n }\n\n // If we end up not finding a width of text that works, display just the ellipses.\n if (!currentTextFitsInWidth) {\n element.textContent = '...';\n }\n this.rivTooltip = this.text;\n }\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostListener,\n Input,\n Self,\n} from '@angular/core';\nimport { TooltipDirective } from '../../overlay/callout/tooltip/tooltip.directive';\n\nfunction scrolled(element: HTMLElement): boolean {\n return element.offsetWidth < element.scrollWidth;\n}\n\n/**\n * Truncate the text to one line. When truncated, display the full text in a tooltip.\n */\n@Component({\n selector: '[rivTruncate]',\n styleUrls: ['./truncate.component.css'],\n templateUrl: './truncate.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n viewProviders: [TooltipDirective],\n})\nexport class TruncateComponent {\n constructor(\n private readonly element: ElementRef,\n // For performance reasons, take more control\n @Self() private readonly tooltip: TooltipDirective,\n ) {}\n\n @Input()\n maxTooltipWidth: string = '200px';\n\n @HostListener('mouseenter')\n enter() {\n if (scrolled(this.element.nativeElement)) {\n this.tooltip.rivTooltip = this.element.nativeElement.textContent;\n this.tooltip.rivTooltipMaxWidth = this.maxTooltipWidth;\n this.tooltip.onMouseEnter();\n }\n }\n\n @HostListener('mouseleave')\n leave() {\n this.tooltip.onMouseLeave();\n }\n\n // For the auto-complete textbox.\n scrollIntoView() {\n this.element.nativeElement.scrollIntoView(false);\n }\n}\n","\n","export interface CacheResult {\n value: V;\n cleanup: () => void;\n}\n\n/**\n * DOM cache that clones existing elements if available.\n */\nexport class DomCache {\n private readonly nodes = new Map>();\n\n constructor(private readonly create: (key: T) => V) {}\n\n get(key: T): CacheResult {\n let set = this.nodes.get(key);\n let result: V;\n if (set) {\n result = set.values().next().value.cloneNode(true);\n } else {\n result = this.create(key);\n set = new Set();\n this.nodes.set(key, set);\n }\n\n set.add(result);\n\n return {\n value: result,\n cleanup: () => {\n set!.delete(result);\n if (!set!.size) {\n this.nodes.delete(key);\n }\n },\n };\n }\n}\n","const AlertCircle = ``;\nconst AlertTriangle = ``;\nconst AlignLeft = ``;\nconst Archive = ``;\nconst ArrowDown = ``;\nconst ArrowDownLeft = ``;\nconst ArrowLeft = ``;\nconst ArrowLeftCircle = ``;\nconst ArrowRight = ``;\nconst ArrowUp = ``;\nconst ArrowUpRight = ``;\nconst AtSign = ``;\nconst BarChart2 = ``;\nconst Beaker = ``;\nconst Bell = ``;\nconst BellAlert = ``;\nconst BookOpen = ``;\nconst Briefcase = ``;\nconst BuildingLibrary = ``;\nconst Calendar = ``;\nconst Chart = ``;\nconst Check = ``;\nconst CheckCircle = ``;\nconst ChevronDown = ``;\nconst ChevronLeft = ``;\nconst ChevronRight = ``;\nconst ChevronsLeft = ``;\nconst ChevronsRight = ``;\nconst ChevronUp = ``;\nconst Clipboard = ``;\nconst ClipboardList = ``;\nconst Clock = ``;\nconst Collections = ``;\nconst ColumnChart = ``;\nconst Copy = ``;\nconst CornerLeftUp = ``;\nconst CreditCard = ``;\nconst Dashboard = ``;\nconst DocumentCurrencyDollar = ``;\nconst Documents = ``;\nconst DollarSign = ``;\nconst DollarSign2 = ``;\nconst Download = ``;\nconst DownloadCloud = ``;\nconst DownloadLeft = ``;\nconst DownloadRight = ``;\nconst Edit = ``;\nconst Edit2 = ``;\nconst ExternalLink = ``;\nconst Eye = ``;\nconst EyeOff = ``;\nconst File = ``;\nconst FilePlus = ``;\nconst FileText = ``;\nconst Filter = ``;\nconst Filter2 = ``;\nconst Flow = ``;\nconst Folder = ``;\nconst HandThumbDown = ``;\nconst HandThumbUp = ``;\nconst Hashtag = ``;\nconst Heart = ``;\nconst HeartActive = ``;\nconst HelpCircle = ``;\nconst HorizontalBarChart = ``;\nconst Inbox = ``;\nconst Info = ``;\nconst Key = ``;\nconst Layers = ``;\nconst LineChart = ``;\nconst Link2 = ``;\nconst List = ``;\nconst Lock = ``;\nconst Mail = ``;\nconst MapPin = ``;\nconst Maximize2 = ``;\nconst Menu = ``;\nconst MessageCircle = ``;\nconst MessageCircleActive = ``;\nconst MessageCircleEllipsis = ``;\nconst MessageCircleEllipsisActive = ``;\nconst Minimize2 = ``;\nconst Minus = ``;\nconst MinusCircle = ``;\nconst MoreHorizontal = ``;\nconst MoreVertical = ``;\nconst Paperclip = ``;\nconst Percent = ``;\nconst Phone = ``;\nconst PieChart = ``;\nconst PinActive = ``;\nconst PinInactive = ``;\nconst Plus = ``;\nconst Printer = ``;\nconst Productivity = ``;\nconst QueueList = ``;\nconst RefreshCw = ``;\nconst Reorder = ``;\nconst Reply = ``;\nconst ReplyAll = ``;\nconst RotateCw = ``;\nconst Search = ``;\nconst Send = ``;\nconst Settings = ``;\nconst Shield = ``;\nconst Sidebar = ``;\nconst Slash = ``;\nconst Sliders = ``;\nconst Sparkles = ``;\nconst StackedColumnChart = ``;\nconst StackedHorizontalBarChart = ``;\nconst StackedLineChart = ``;\nconst Star = ``;\nconst Stop = ``;\nconst SupportChat = ``;\nconst Table = ``;\nconst Tag = ``;\nconst Target = ``;\nconst Trash2 = ``;\nconst TrendingDown = ``;\nconst TrendingUp = ``;\nconst Type = ``;\nconst UploadCloud = ``;\nconst User = ``;\nconst UserCheck = ``;\nconst Users = ``;\nconst X = ``;\nconst XCircle = ``;\nconst Zap = ``;\nconst ZoomIn = ``;\nconst ZoomOut = ``;\n\nexport const icons = {\n AlertCircle,\n AlertTriangle,\n AlignLeft,\n Archive,\n ArrowDown,\n ArrowDownLeft,\n ArrowLeft,\n ArrowLeftCircle,\n ArrowRight,\n ArrowUp,\n ArrowUpRight,\n AtSign,\n BarChart2,\n Beaker,\n Bell,\n BellAlert,\n BookOpen,\n Briefcase,\n BuildingLibrary,\n Calendar,\n Chart,\n Check,\n CheckCircle,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n ChevronsLeft,\n ChevronsRight,\n ChevronUp,\n Clipboard,\n ClipboardList,\n Clock,\n Collections,\n ColumnChart,\n Copy,\n CornerLeftUp,\n CreditCard,\n Dashboard,\n DocumentCurrencyDollar,\n Documents,\n DollarSign,\n DollarSign2,\n Download,\n DownloadCloud,\n DownloadLeft,\n DownloadRight,\n Edit,\n Edit2,\n ExternalLink,\n Eye,\n EyeOff,\n File,\n FilePlus,\n FileText,\n Filter,\n Filter2,\n Flow,\n Folder,\n HandThumbDown,\n HandThumbUp,\n Hashtag,\n Heart,\n HeartActive,\n HelpCircle,\n HorizontalBarChart,\n Inbox,\n Info,\n Key,\n Layers,\n LineChart,\n Link2,\n List,\n Lock,\n Mail,\n MapPin,\n Maximize2,\n Menu,\n MessageCircle,\n MessageCircleActive,\n MessageCircleEllipsis,\n MessageCircleEllipsisActive,\n Minimize2,\n Minus,\n MinusCircle,\n MoreHorizontal,\n MoreVertical,\n Paperclip,\n Percent,\n Phone,\n PieChart,\n PinActive,\n PinInactive,\n Plus,\n Printer,\n Productivity,\n QueueList,\n RefreshCw,\n Reorder,\n Reply,\n ReplyAll,\n RotateCw,\n Search,\n Send,\n Settings,\n Shield,\n Sidebar,\n Slash,\n Sliders,\n Sparkles,\n StackedColumnChart,\n StackedHorizontalBarChart,\n StackedLineChart,\n Star,\n Stop,\n SupportChat,\n Table,\n Tag,\n Target,\n Trash2,\n TrendingDown,\n TrendingUp,\n Type,\n UploadCloud,\n User,\n UserCheck,\n Users,\n X,\n XCircle,\n Zap,\n ZoomIn,\n ZoomOut,\n};\n\nexport const iconsMap: { [key: string]: string } = {};\nfor (const key in icons) {\n iconsMap[key] = icons[key];\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n} from '@angular/core';\nimport { CacheResult, DomCache } from './dom-cache';\nimport { icons, iconsMap } from './icons';\n\ntype IconPlusColor = {\n name: IconComponent.Name;\n color: string | undefined;\n};\n\nconst cache = new DomCache(value => {\n const svgText = iconsMap[value.name];\n const parser = new DOMParser();\n const svg = parser.parseFromString(svgText, 'text/xml');\n return svg.documentElement;\n});\n\n@Component({\n selector: 'riv-icon',\n templateUrl: './icon.component.html',\n styleUrls: ['./icon.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IconComponent implements OnDestroy {\n private cached: CacheResult | undefined;\n\n constructor(private readonly element: ElementRef) {}\n\n name$: IconComponent.Name | null = null;\n @Input()\n set name(value: IconComponent.Name | null) {\n this.name$ = value;\n this.clearCached();\n\n if (value == null) {\n return;\n }\n\n this.addIconToScreenAndCache(value, this.fillColor$);\n }\n\n fillColor$: string | undefined;\n @Input()\n set fillColor(value: string | undefined) {\n this.fillColor$ = value;\n this.clearCached();\n\n if (this.name$ == null) {\n return;\n }\n\n this.addIconToScreenAndCache(this.name$, value);\n }\n\n @Input()\n size: IconComponent.Size = 24;\n\n @Input()\n customSize: number | undefined;\n\n @HostBinding('style.width.px')\n @HostBinding('style.height.px')\n get iconSize() {\n return this.customSize ? this.customSize : this.size;\n }\n\n @Input()\n strokeWidth: number | undefined;\n\n @HostBinding('style.stroke-width')\n get calculateStrokeWidth() {\n return this.strokeWidth ? this.strokeWidth : 24 / this.iconSize;\n }\n\n ngOnDestroy() {\n this.name = null;\n }\n\n clearCached() {\n if (this.cached) {\n this.cached.value.remove();\n this.cached.cleanup();\n this.cached = undefined;\n }\n }\n\n addIconToScreenAndCache(\n iconName: IconComponent.Name,\n color: string | undefined,\n ) {\n let valueToCache = cache.get({ name: iconName, color: color });\n if (color) {\n valueToCache.value.style.fill = color;\n }\n this.cached = valueToCache;\n this.element.nativeElement.append(this.cached.value);\n }\n}\n\nexport namespace IconComponent {\n export type Name = keyof typeof icons;\n\n export const Sizes = [8, 12, 16, 20, 24] as const;\n export type Size = (typeof Sizes)[number];\n}\n","","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n selector: 'riv-help',\n templateUrl: './help.component.html',\n styleUrls: ['./help.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HelpComponent {\n @Input() help?: string;\n @Input() size: HelpComponent.Size = 16;\n}\n\nexport namespace HelpComponent {\n export const Sizes = [12, 16] as const;\n export type Size = (typeof HelpComponent.Sizes)[number];\n}\n","\n","import {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n Input,\n Optional,\n} from '@angular/core';\nimport { CalloutComponent } from '../../overlay/callout/callout.component';\n\n@Component({\n selector: '[rivLink]',\n templateUrl: './link.component.html',\n styleUrls: ['./link.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LinkComponent {\n constructor(@Optional() private readonly parentCallout?: CalloutComponent) {}\n\n @Input()\n disabled: boolean = false;\n\n @Input()\n locked: boolean = false;\n\n @Input()\n theme: LinkComponent.Theme = 'light';\n\n @Input()\n variant: LinkComponent.Variant = 'basic';\n\n @HostBinding('class')\n get classes() {\n return Object.entries({\n disabled: this.disabled || this.locked,\n theme: this.theme === 'dark' || this.parentCallout?.theme === 'dark',\n [this.variant]: true,\n })\n .filter(([_, v]) => v)\n .map(([k]) => k)\n .join(' ');\n }\n}\n\nexport namespace LinkComponent {\n export const Themes = ['light', 'dark'] as const;\n export type Theme = (typeof Themes)[number];\n\n export const Variants = ['basic', 'ghost'] as const;\n export type Variant = (typeof Variants)[number];\n}\n","\n\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n selector: 'riv-validation-message',\n templateUrl: './validation-message.component.html',\n styleUrls: ['./validation-message.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ValidationMessageComponent {\n @Input()\n message: string = '';\n}\n","\n \n {{ message }}\n\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\n@Component({\n selector: 'riv-input-label',\n templateUrl: './input-label.component.html',\n styleUrls: ['./input-label.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputLabelComponent {\n @Input()\n label?: string;\n\n @Input()\n help?: string;\n\n @Input()\n required: boolean = false;\n\n @Input()\n labelActionText?: string;\n\n @Input()\n errorMessage: string = '';\n\n @Input()\n state: InputLabelComponent.State = 'valid';\n\n @Output()\n labelAction = new EventEmitter();\n}\n\nexport namespace InputLabelComponent {\n export const States = ['valid', 'warning', 'error'] as const;\n export type State = (typeof States)[number];\n}\n","\n
\n\n","import {\n AfterViewInit,\n Directive,\n ElementRef,\n Input,\n OnChanges,\n} from '@angular/core';\n\n@Directive({\n selector: '[riv-auto-focus]',\n})\nexport class AutoFocusDirective implements AfterViewInit, OnChanges {\n constructor(private readonly el: ElementRef) {}\n\n @Input('riv-auto-focus')\n autoActionActive: AutoFocusDirective.AutoAction = true;\n\n private deferActionUntilActive: boolean = false;\n\n ngAfterViewInit() {\n if (this.autoActionActive) {\n this.focus();\n } else {\n this.deferActionUntilActive = true;\n }\n }\n\n ngOnChanges() {\n if (this.deferActionUntilActive && this.autoActionActive) {\n this.deferActionUntilActive = false;\n this.focus();\n }\n }\n\n private focus() {\n if (this.el && this.el.nativeElement) {\n const element = this.el.nativeElement;\n if (!element.hasAttribute('tabindex')) {\n element.tabIndex = 0;\n }\n element.focus();\n\n if (\n this.autoActionActive === 'select' &&\n typeof element.select === 'function'\n ) {\n element.select();\n }\n }\n }\n}\n\nexport namespace AutoFocusDirective {\n /**\n * false: do nothing\n * true: focus the input only\n * 'select': focus the input and select all contents\n */\n export type AutoAction = boolean | 'select';\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n} from '@angular/core';\nimport { AutoFocusDirective } from '../auto-focus/auto-focus.directive';\nimport { InputLabelComponent } from '../input-label/input-label.component';\n\n@Component({\n selector: 'riv-text-field',\n templateUrl: './text-field.component.html',\n styleUrls: ['./text-field.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TextFieldComponent\n extends InputLabelComponent\n implements OnChanges\n{\n @Input()\n disabled: boolean = false;\n\n @Input()\n readonly: boolean = false;\n\n @Input()\n placeholder: string = '';\n\n @Input()\n casing: TextFieldComponent.Casing = 'user';\n\n @Input()\n type: TextFieldComponent.Type = 'text';\n\n @Input()\n size: TextFieldComponent.Size = 'medium';\n\n @Input()\n autoFocus: AutoFocusDirective.AutoAction = false;\n\n @Input()\n name?: string;\n\n @Input()\n minLength?: number;\n\n @Input()\n maxLength?: number;\n\n protected _value: string = '';\n @Input()\n set value(v: string) {\n this._value = v;\n }\n\n protected setText() {\n if (\n TextFieldComponent.clean(this._value, this.casing) ===\n TextFieldComponent.clean(this._text, this.casing)\n )\n return;\n this._text = TextFieldComponent.format(this._value, this.casing);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['value'] || changes['casing']) {\n this.setText();\n }\n }\n\n @Output()\n valueChange = new EventEmitter();\n\n @Output()\n blur = new EventEmitter();\n\n protected _text: string = '';\n\n set text(t: string) {\n // The user is setting the value. We'll keep the internal state exactly as\n // the user has typed it, but emit the clean value. Even if the cleaned\n // value is passed directly back to us, we won't override the user's work\n // (see comment in value setter above).\n this._text = t;\n this.valueChange.emit(TextFieldComponent.clean(t, this.casing));\n }\n get text(): string {\n return this._text;\n }\n\n inputBlur() {\n // Now that the user is done editing and has left the field, we can safely\n // update the internal state to match the cleaned/formatted version of\n // their input.\n this._text = TextFieldComponent.format(this._text, this.casing);\n this.blur.emit(TextFieldComponent.clean(this._text, this.casing));\n }\n}\n\nexport namespace TextFieldComponent {\n export const Casings = ['user', 'upper', 'lower'] as const;\n export type Casing = (typeof Casings)[number];\n\n export const Types = [\n 'text',\n 'email',\n 'password',\n 'search',\n 'tel',\n 'url',\n ] as const;\n export type Type = (typeof Types)[number];\n\n export const Sizes = ['small', 'medium', 'large'] as const;\n export type Size = (typeof Sizes)[number];\n\n export function clean(v: string, casing: Casing): string {\n switch (casing) {\n case 'lower':\n return v.toLowerCase();\n case 'upper':\n return v.toUpperCase();\n case 'user':\n return v;\n }\n }\n\n // For the basic text component, formatting is a simple pass-through to\n // clean(). More advanced inputs will implement more complicated formatting.\n export function format(v: string, casing: Casing): string {\n return clean(v, casing);\n }\n}\n","\n \n\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { TextFieldComponent } from '../text-field/text-field.component';\n\n@Component({\n selector: 'riv-alphabetic-field',\n templateUrl: '../text-field/text-field.component.html',\n styleUrls: ['../text-field/text-field.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AlphabeticFieldComponent extends TextFieldComponent {\n protected override setText() {\n if (\n AlphabeticFieldComponent.clean(this._value, this.casing) ===\n AlphabeticFieldComponent.clean(this._text, this.casing)\n )\n return;\n this._text = AlphabeticFieldComponent.format(this._value, this.casing);\n }\n\n override set text(t: string) {\n this._text = t;\n this.valueChange.emit(AlphabeticFieldComponent.clean(t, this.casing));\n }\n override get text(): string {\n return this._text;\n }\n\n override inputBlur() {\n this._text = AlphabeticFieldComponent.format(this._text, this.casing);\n this.blur.emit(AlphabeticFieldComponent.clean(this._text, this.casing));\n }\n}\n\nexport namespace AlphabeticFieldComponent {\n export function clean(v: string, casing: TextFieldComponent.Casing): string {\n const cleaned = v.replaceAll(/[^A-Za-z]/g, '');\n return TextFieldComponent.clean(cleaned, casing);\n }\n\n export function format(v: string, casing: TextFieldComponent.Casing): string {\n return clean(v, casing);\n }\n}\n","import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';\n\n@Component({\n selector: 'riv-button-group',\n templateUrl: './button-group.component.html',\n styleUrls: ['./button-group.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonGroupComponent {\n constructor(private readonly el: ElementRef) {}\n\n public isFirst(btn: ElementRef): boolean {\n const child = this.getDirectChildOfGroup(btn);\n return this.el.nativeElement.firstElementChild === child;\n }\n\n public isLast(btn: ElementRef): boolean {\n const child = this.getDirectChildOfGroup(btn);\n return this.el.nativeElement.lastElementChild === child;\n }\n\n /*\n rivButton may not always be a *direct* descendant of the button group (like\n in cases where a custom rivButton trigger is used for a riv-select as part\n of a button group), so we traverse the tree until we get up to the direct\n child of the group for calculating whether or not the button is first or\n last (or neither), for proper styling.\n */\n private getDirectChildOfGroup(\n btn: ElementRef,\n ): HTMLElement | null {\n const buttonElement = btn.nativeElement;\n const hostElement = this.el.nativeElement;\n\n let possibleChild = buttonElement;\n while (\n possibleChild.parentElement &&\n possibleChild.parentElement !== hostElement\n ) {\n possibleChild = possibleChild.parentElement;\n }\n\n return possibleChild;\n }\n}\n","\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n selector: 'riv-loading',\n templateUrl: './loading.component.html',\n styleUrls: ['./loading.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LoadingComponent {\n static readonly STROKE_WIDTH = 1.5;\n static readonly ARC_START_RADIANS = (Math.PI * 22.5) / 180;\n\n @Input()\n size: LoadingComponent.Size = 40;\n\n @Input()\n variant: LoadingComponent.Variant = 'dark';\n\n getPathData() {\n const size = this.size;\n const halfSize = size / 2;\n\n const stroke = LoadingComponent.STROKE_WIDTH;\n const halfStroke = stroke / 2;\n\n const top = halfStroke;\n const right = size - stroke;\n const radius = (size - stroke * 2) / 2;\n\n const commands = [\n `M${halfSize},${top}`,\n `L${right},${top}`,\n `L${right},${halfSize}`,\n `A ${radius} ${radius},0,1,1,${halfSize} ${top}`,\n ];\n return commands.join(' ');\n }\n\n readonly strokeWidth = LoadingComponent.STROKE_WIDTH;\n}\n\nexport namespace LoadingComponent {\n export const Sizes = [16, 40, 80] as const;\n export type Size = (typeof LoadingComponent.Sizes)[number];\n\n export const Variants = ['light', 'dark'] as const;\n export type Variant = (typeof LoadingComponent.Variants)[number];\n}\n","\n \n\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnChanges,\n Optional,\n Renderer2,\n SimpleChanges,\n} from '@angular/core';\nimport { IconComponent } from '../../icon/icon.component';\nimport { LoadingComponent } from '../../load/loading/loading.component';\nimport { ButtonGroupComponent } from '../button-group/button-group.component';\n\n@Component({\n selector: '[rivButton]',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements OnChanges {\n constructor(\n private readonly el: ElementRef,\n private readonly renderer: Renderer2,\n @Optional() private readonly group: ButtonGroupComponent,\n ) {}\n\n @Input()\n locked?: boolean;\n\n @Input()\n disabled?: boolean;\n\n @Input()\n loading?: boolean;\n\n @Input()\n full?: boolean;\n\n @Input()\n size: ButtonComponent.Size = 'medium';\n\n @Input()\n variant: ButtonComponent.Variant = 'basic';\n\n @Input()\n icon?: IconComponent.Name;\n\n @Input()\n iconPosition: ButtonComponent.IconPosition = 'first';\n\n @Input()\n current?: boolean;\n\n @HostBinding('class')\n get classes() {\n return Object.entries({\n disabled: this.disabled || this.locked,\n full: this.full,\n loading: this.loading,\n [this.variant]: true,\n [this.size]: true,\n stacked: this.iconPosition === 'stacked',\n grouped: !!this.group,\n first: !!this.group?.isFirst(this.el),\n last: !!this.group?.isLast(this.el),\n current: !!this.current,\n })\n .filter(([_, v]) => v)\n .map(([k]) => k)\n .join(' ');\n }\n\n getLoadingVariant(): LoadingComponent.Variant {\n switch (this.variant) {\n case 'basic':\n case 'caution':\n case 'ghost':\n case 'stateful':\n return 'dark';\n case 'danger':\n case 'primary':\n return this.disabled ? 'dark' : 'light';\n }\n }\n\n getIconSize(): IconComponent.Size {\n switch (this.size) {\n case 'xsmall':\n case 'small':\n return 16;\n case 'medium':\n return 20;\n case 'large':\n case 'xlarge':\n return 24;\n }\n }\n\n private disableNativeElement: boolean = false;\n private lockNativeElement: boolean = false;\n\n ngOnChanges(changes: SimpleChanges) {\n const accessChange: boolean = !!changes['disabled'] || !!changes['locked'];\n if (accessChange) {\n if (changes['disabled']) {\n this.disableNativeElement = changes['disabled'].currentValue;\n }\n if (changes['locked']) {\n this.lockNativeElement = changes['locked'].currentValue;\n }\n if ('disabled' in this.el.nativeElement) {\n if (this.disableNativeElement || this.lockNativeElement) {\n this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'true');\n } else {\n this.renderer.removeAttribute(this.el.nativeElement, 'disabled');\n }\n }\n }\n\n const currentOrVariantChange: boolean =\n !!changes['current'] || !!changes['variant'];\n if (currentOrVariantChange) {\n if (this.current !== undefined && this.variant !== 'stateful') {\n // eslint-disable-next-line no-console\n console.warn(\n `ButtonComponent: The 'current' input is only valid when variant is 'stateful'. Variant: '${this.variant}'`,\n );\n }\n }\n }\n}\n\nexport namespace ButtonComponent {\n export const Sizes = [\n 'xsmall',\n 'small',\n 'medium',\n 'large',\n 'xlarge',\n ] as const;\n export type Size = (typeof Sizes)[number];\n\n export const Variants = [\n 'basic',\n 'ghost',\n 'primary',\n 'danger',\n 'caution',\n 'stateful',\n ] as const;\n export type Variant = (typeof Variants)[number];\n\n export const IconPositions = ['first', 'last', 'stacked'] as const;\n export type IconPosition = (typeof IconPositions)[number];\n}\n","\n\n\n\n\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n ViewChild,\n} from '@angular/core';\nimport { InputLabelComponent } from '../input-label/input-label.component';\n\n@Component({\n selector: 'riv-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CheckboxComponent implements OnChanges {\n @Input()\n name?: string;\n\n @Input()\n identifier?: string;\n\n @Input()\n value: boolean = false;\n\n @Input()\n checkedColorToken: string = '--purp-60';\n\n @Input()\n indeterminateColorToken: string = '--purp-60';\n\n @Input()\n checkboxTooltip?: string;\n\n @Input()\n indeterminate: boolean = false;\n\n @Input()\n disabled: boolean = false;\n\n @Input()\n required: boolean = false;\n\n @Input()\n state: InputLabelComponent.State = 'valid';\n\n @Input()\n errorMessage: string = '';\n\n @Output()\n valueChange = new EventEmitter();\n\n emit(v: boolean) {\n this.valueChange.emit(v);\n this.ensureSynchronizedState(this.value);\n }\n\n @ViewChild('label', { static: true }) label?: ElementRef;\n\n @ViewChild('input', { static: true }) input?: ElementRef;\n\n /**\n * Used to control the aria-label of the input in cases where no label\n * content is provided.\n */\n @Input()\n ariaLabel: string = 'Checkbox';\n\n ensureSynchronizedState(v: boolean) {\n if (this.input) {\n this.input.nativeElement.checked = v;\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if ('value' in changes)\n this.ensureSynchronizedState(changes['value'].currentValue);\n }\n\n isCheckboxOnly(): boolean {\n return !this.label || this.label.nativeElement.childNodes.length === 1;\n }\n\n getCheckedBackgroundColor(): string {\n return `var(${this.checkedColorToken})`;\n }\n\n getIndeterminateBackgroundColor(): string {\n return `var(${this.indeterminateColorToken})`;\n }\n}\n","\n \n \n\n\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { CheckboxComponent } from '../checkbox/checkbox.component';\n\n@Component({\n selector: 'riv-card-checkbox',\n templateUrl: './card-checkbox.component.html',\n styleUrls: ['./card-checkbox.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardCheckboxComponent extends CheckboxComponent {}\n","\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n} from '@angular/core';\nimport { AutoFocusDirective } from '../auto-focus/auto-focus.directive';\nimport { InputLabelComponent } from '../input-label/input-label.component';\nimport { TextFieldComponent } from '../text-field/text-field.component';\n\n@Component({\n selector: 'riv-number-field',\n templateUrl: './number-field.component.html',\n styleUrls: ['./number-field.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NumberFieldComponent\n extends InputLabelComponent\n implements OnChanges\n{\n @Input()\n disabled: boolean = false;\n\n @Input()\n readonly: boolean = false;\n\n @Input()\n placeholder: string = '';\n\n @Input()\n maximumFractionDigits: number = 0;\n\n @Input()\n minimumFractionDigits: number = 0;\n\n @Input()\n min: number = -Infinity;\n\n @Input()\n max: number = Infinity;\n\n @Input()\n align: NumberFieldComponent.Alignment = 'left';\n\n @Input()\n size: TextFieldComponent.Size = 'medium';\n\n @Input()\n autoFocus: AutoFocusDirective.AutoAction = false;\n\n @Input()\n name?: string;\n\n private _value: number | null = null;\n @Input()\n set value(v: number | null) {\n this._value = v;\n }\n\n private setText() {\n const value =\n typeof this._value === 'number' ? this._value.toString() : null;\n if (\n NumberFieldComponent.clean(\n value,\n this.maximumFractionDigits,\n this.min,\n this.max,\n ) ===\n NumberFieldComponent.clean(\n this._text,\n this.maximumFractionDigits,\n this.min,\n this.max,\n )\n )\n return;\n this._text = NumberFieldComponent.format(\n value,\n this.minimumFractionDigits,\n this.maximumFractionDigits,\n this.min,\n this.max,\n );\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (\n changes['value'] ||\n changes['maximumFractionDigits'] ||\n changes['minimumFractionDigits'] ||\n changes['min'] ||\n changes['max']\n ) {\n this.setText();\n }\n }\n\n @Output()\n valueChange = new EventEmitter();\n\n @Output()\n blur = new EventEmitter();\n\n protected _text: string = '';\n\n set text(t: string) {\n this._text = t;\n this.valueChange.emit(\n NumberFieldComponent.clean(\n t,\n this.maximumFractionDigits,\n this.min,\n this.max,\n ),\n );\n }\n get text(): string {\n return this._text;\n }\n\n inputBlur() {\n this._text = NumberFieldComponent.format(\n this._text,\n this.minimumFractionDigits,\n this.maximumFractionDigits,\n this.min,\n this.max,\n );\n this.blur.emit(\n NumberFieldComponent.clean(\n this._text,\n this.maximumFractionDigits,\n this.min,\n this.max,\n ),\n );\n }\n}\n\nexport namespace NumberFieldComponent {\n export const Alignments = ['left', 'center', 'right'] as const;\n export type Alignment = (typeof Alignments)[number];\n\n export function clean(\n v: string | null,\n maximumFractionDigits: number,\n min: number,\n max: number,\n ): number | null {\n function digitsOnly(str: string): string {\n return str.replace(/\\D/g, '');\n }\n\n if (!v) return null;\n const decimalPointIdx = v.indexOf('.');\n const signIdx = v.indexOf('-');\n const cleanedString: string =\n (signIdx > -1 ? '-' : '') +\n (decimalPointIdx > -1\n ? digitsOnly(v.substring(0, decimalPointIdx)) +\n '.' +\n digitsOnly(v.substring(decimalPointIdx + 1))\n : digitsOnly(v));\n if (\n cleanedString === '.' ||\n cleanedString === '-' ||\n cleanedString === '-.'\n ) {\n return null;\n }\n const cleaned = Number(\n Number(cleanedString).toFixed(maximumFractionDigits),\n );\n return Math.max(min, Math.min(max, cleaned));\n }\n\n export function format(\n v: string | null,\n minimumFractionDigits: number,\n maximumFractionDigits: number,\n min: number,\n max: number,\n ): string {\n const cleaned = clean(v, maximumFractionDigits, min, max);\n if (cleaned === null) return '';\n return new Intl.NumberFormat('en-US', {\n minimumFractionDigits,\n maximumFractionDigits,\n }).format(cleaned);\n }\n}\n","\n \n\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { NumberFieldComponent } from '../number-field/number-field.component';\n\n@Component({\n selector: 'riv-currency-field',\n templateUrl: './currency-field.component.html',\n styleUrls: ['./currency-field.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CurrencyFieldComponent extends NumberFieldComponent {\n @Input()\n override placeholder: string = '0.00';\n\n @Input()\n override minimumFractionDigits: number = 2;\n\n @Input()\n override maximumFractionDigits: number = 2;\n}\n","\n $\n \n\n","import { BehaviorSubject } from 'rxjs';\n\n/**\n * A BehaviorSubject backed by localStorage.\n */\nexport class LocalStorage<\n T extends LocalStorage.Serializable,\n> extends BehaviorSubject {\n constructor(private readonly key: string, defaultValue: T) {\n const rawValue = localStorage.getItem(key);\n const value = rawValue ? JSON.parse(rawValue) : undefined;\n super(value ?? defaultValue);\n }\n\n override next(value: T) {\n localStorage.setItem(this.key, JSON.stringify(value));\n super.next(value);\n }\n}\n\nexport namespace LocalStorage {\n export type Serializable =\n | string\n | number\n | boolean\n | null\n | { [property: string]: Serializable }\n | Serializable[];\n}\n","/**\n * Subset of callout anchored positions used by riv-select and riv-simple-select.\n * Omits side positions from the full CalloutComponent.AnchoredPositions list.\n */\nexport const defaultSelectAllowedCalloutPositions = [\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left',\n] as const;\n","import Fuse, {\n FuseResult,\n FuseResultMatch,\n IFuseOptions,\n RangeTuple,\n} from 'fuse.js';\nimport { defaultsDeep, flattenDeep, isNumber, sortBy } from 'lodash';\nimport {\n connectable,\n Connectable,\n map,\n merge,\n Observable,\n ReplaySubject,\n scan,\n startWith,\n Subject,\n} from 'rxjs';\nimport { DeepPartial } from 'utility-types';\nimport { NumberPipe } from '../../format/pipes/number.pipe';\nimport { HighlightComponent } from '../../visualization/highlight/highlight.component';\n\nexport namespace RivSelect {\n /////////////\n // Options //\n /////////////\n\n /**\n * ┌─────────────────────-------------------───┐\n * │ BaseOption │\n * │ │\n * │ The core data required for each option │\n * │ (such as id and title). │\n * ├──────────────────────-------------------──┤\n * │ Option (BaseOption + children) │\n * │ │\n * │ Provides recursive type safety to the │\n * │ type safety to the BaseOption. │\n * └─------------------┬-------────────────────┘\n * |\n * ┌───────────────────▼───────────────────────┐\n * │ SourceOption (Option + search highlights) │\n * │ │\n * │ Adds search highlights to the Option and │\n * │ is the return type for the option Source │\n * │ (data fetcher) function. │\n * └───────────────────┬───────────────────────┘\n * |\n * ┌───────────────────▼───────────────────────┐\n * │ FullOption (SourceOption + UI state) │\n * │ │\n * │ Augments the SourceOption with all of the │\n * │ UI information from other parts of the │\n * │ state, such as selection status, whether │\n * │ or not the node is expanded, etc. │\n * └───────────────────────────────────────────┘\n *\n * Note that the usages of Omit<...> in this section are not required, but\n * do help in-editor type hints to be more clear and direct.\n */\n\n export type BaseOption = {\n id: string | number;\n title: string;\n subtitle?: string;\n help?: string;\n count?: number;\n disabled?: boolean;\n };\n export type Option = O & {\n children?: Option[];\n };\n\n export type SourceOption = Omit<\n Option,\n 'children'\n > & {\n titleHighlightIndices?: HighlightComponent.HighlightIndices[];\n subtitleHighlightIndices?: HighlightComponent.HighlightIndices[];\n children?: SourceOption[];\n };\n\n export type MultiSelectionState = boolean | 'indeterminate';\n\n export type FullOption = Omit<\n SourceOption,\n 'children'\n > & {\n selected: MultiSelectionState;\n expanded: boolean;\n selectable: boolean;\n expandable: boolean;\n children?: FullOption[];\n };\n\n ///////////////////\n // Option groups //\n ///////////////////\n\n /**\n * The relationships between OptionGroup, SourceOptionGroup, and\n * FullOptionGroup is analogous to the option types above.\n *\n * As with before, the use of Omit<...> is not required but helpful.\n */\n\n export type OptionGroup = {\n header?: string;\n /** Info icon + tooltip shown beside the header. No-op without a header. */\n help?: string;\n options: Option[];\n };\n\n export type SourceOptionGroup = Omit<\n OptionGroup,\n 'options'\n > & {\n options: SourceOption[];\n };\n\n export type FullOptionGroup = Omit<\n SourceOptionGroup,\n 'options'\n > & {\n options: FullOption[];\n };\n\n /**\n * The OptionSet class provides Set-like functionality, but uniqueness is\n * determined by the option's ID rather than the object reference.\n */\n export class OptionSet extends Set> {\n // Parallel id → option map so has()/add()/delete() are O(1) instead of\n // spreading the Set and linear-scanning it. Rebuilding an O(N²) lookup\n // for a 16k-option selection was the primary cause of the multi-minute\n // freeze that surfaced RVT-25383's tree-select scale problem.\n private readonly byId = new Map>();\n\n constructor(values?: Iterable> | null) {\n super();\n if (values) {\n for (const value of values) {\n this.add(value);\n }\n }\n }\n\n override has(option: SourceOption | FullOption) {\n return this.byId.has(option.id);\n }\n\n override add(option: SourceOption) {\n const existing = this.byId.get(option.id);\n if (existing === option) {\n // Same object reference — nothing to update. Ancestor re-adds\n // during a selection snapshot hit this path repeatedly, so keeping\n // it O(1) is what prevents the tree-select N² blow-up seen in\n // RVT-25470.\n return this;\n }\n if (existing !== undefined) {\n // Different reference, same id — swap the stored ref while\n // preserving Set insertion order. The rebuild is O(N), but this\n // path is rare in practice (the hot ancestor-snapshot loop takes\n // the identity fast-path above).\n const items = [...this].map(o => (o.id === option.id ? option : o));\n this.byId.set(option.id, option);\n super.clear();\n for (const item of items) super.add(item);\n } else {\n this.byId.set(option.id, option);\n super.add(option);\n }\n return this;\n }\n\n override delete(option: SourceOption) {\n const existing = this.byId.get(option.id);\n if (existing) {\n this.byId.delete(option.id);\n super.delete(existing);\n return true;\n } else {\n return false;\n }\n }\n\n override clear() {\n this.byId.clear();\n super.clear();\n }\n }\n\n ///////////\n // State //\n ///////////\n\n /**\n * The CoreState provides all of the foundational pieces of state required\n * for a working component. FullState is a pure derivation of CoreState plus\n * the configuration options, and provides conveniences for rendering the\n * components. Actions and the core state are passed to the reducer to\n * produce new CoreStates (which are then used to calculate new FullStates).\n *\n * ┌──────┐\n * │ UI ◄────────┐\n * └──┬───┘ │\n * │ │\n * ┌──▼────────┐ │\n * │ Actions │ │\n * └──┬────────┘ │\n * │ │\n * ┌──▼────────────┴─┐\n * │ State reducer │\n * └─────────────────┘\n */\n\n export type OrderBy = 'title' | 'count' | 'source';\n\n const MIN_OPTIONS_FOR_CONTROLS = 5;\n\n const DEFAULT_DISPLAY_LIMIT = 100;\n\n export type CoreState = {\n query: {\n search: string;\n order: OrderBy;\n };\n load: {\n loading: boolean;\n error: unknown | null;\n };\n sourceOptionGroups: SourceOptionGroup[];\n /**\n * Stores the unfiltered original option groups when search filtering is active.\n * Used by `allowSelectNonLeafDuringSearch` to select all children of a parent,\n * including those not visible in the filtered search results.\n */\n originalOptionGroups: SourceOptionGroup[];\n selection: {\n selected: OptionSet;\n };\n display: {\n placeholder: string;\n open: boolean;\n expandedOptions: Set;\n };\n };\n\n export type FullState = CoreState & {\n query: {\n showSearch: boolean;\n searchPlaceholder: string;\n showOrder: boolean;\n };\n fullOptionGroups: FullOptionGroup[];\n selection: {\n allowMultiSelect: boolean;\n allowSelectAll: boolean;\n visibleSelectionState: MultiSelectionState;\n };\n display: {\n formattedSelectedOptions: string;\n zeroStateMessage: string | null;\n dividers: boolean;\n inline: boolean;\n maxHeight: string | null;\n maxWidth: string | null;\n minHeight: string | null;\n minWidth: string | null;\n displayLimitMessage: string | null;\n showSingleSelected: boolean;\n pillCount: number;\n };\n };\n\n /////////////\n // Actions //\n /////////////\n\n export type Action =\n | { type: 'load' }\n | { type: 'openChange'; open: boolean }\n | { type: 'searchChange'; payload: string }\n | { type: 'orderChange'; payload: OrderBy }\n | {\n type: 'selectionChange';\n payload: CoreState['selection'];\n }\n | {\n type: 'toggleOptionSelected';\n id: O['id'];\n }\n | {\n type: 'setSelectedOption';\n id: O['id'];\n }\n | {\n type: 'visibleSelectedChange';\n }\n | {\n type: 'toggleOptionExpanded';\n id: O['id'];\n };\n\n type InternalAction =\n | {\n type: 'loadComplete';\n data: SourceOptionGroup[];\n /** Original unfiltered data, provided when search is active */\n originalData?: SourceOptionGroup[];\n }\n | { type: 'loadError'; error: unknown };\n\n ////////////\n // Source //\n ////////////\n\n /**\n * The Source's job is to fetch options (based on the current state) which\n * then blend with the other pieces of state to produce the FullState.\n */\n\n export type SourceResult =\n | SourceOptionGroup[]\n | {\n data: SourceOptionGroup[];\n /**\n * Original unfiltered data, provided when search filtering is active.\n * Used by `allowSelectNonLeafDuringSearch` to select all children of\n * a parent, including those not visible in the filtered search results.\n */\n originalData?: SourceOptionGroup[];\n };\n\n export type Source = (\n query: CoreState['query'],\n mostRecentAction: Action,\n ) => Promise>;\n\n /////////////\n // Manager //\n /////////////\n\n export type Manager = {\n actions: Subject>;\n state: Connectable>;\n };\n\n export type ManagerOptions = {\n initialState?: DeepPartial>;\n allowMultiSelect?: boolean;\n allowSearch?: boolean;\n allowSelectAll?: boolean;\n allowOrder?: boolean;\n searchPlaceholder?: string;\n dividers?: boolean;\n inline?: boolean;\n maxHeight?: string | null;\n maxWidth?: string | null;\n minHeight?: string | null;\n minWidth?: string | null;\n displayLimit?: number;\n selectedOptionLimit?: number;\n showSingleSelected?: boolean;\n useTopLevelOptionsForDisplay?: boolean;\n getCustomOptionDisplay?: (selectedOptions: SourceOption[]) => string;\n /**\n * When true, non-leaf nodes (parents) remain selectable during search,\n * and selecting them will select/deselect ALL children from the original\n * dataset, not just the visible filtered results.\n *\n * Default: false (current behavior - parents are not selectable during search)\n */\n allowSelectNonLeafDuringSearch?: boolean;\n };\n\n export function createManager(\n source: Source,\n options?: ManagerOptions,\n ): Manager {\n const defaultState: CoreState = {\n query: {\n search: '',\n order: 'title',\n },\n load: {\n loading: false,\n error: null,\n },\n sourceOptionGroups: [],\n originalOptionGroups: [],\n selection: {\n selected: new OptionSet(),\n },\n display: {\n placeholder: 'Select',\n open: false,\n expandedOptions: new Set(),\n },\n };\n const defaultedInitialState: CoreState = defaultsDeep(\n {},\n options?.initialState,\n defaultState,\n );\n\n const actions: Subject> = new Subject();\n const internalActions: Subject> = new Subject();\n\n const coreStateWithSelectionSnapshot: Observable<\n [CoreState, OptionSet]\n > = merge(actions, internalActions).pipe(\n scan | InternalAction, [CoreState, OptionSet]>(\n ([state, snapshot], action) => {\n const newState = sideEffects(\n reduce(state, action, options),\n action,\n source,\n internalActions,\n );\n\n const newSelectionSnapshot =\n (action.type === 'openChange' && action.open) ||\n (action.type === 'loadComplete' &&\n (newState.display.open || options?.inline))\n ? createSelectionSnapshotWithAncestors(newState)\n : snapshot;\n\n return [newState, newSelectionSnapshot];\n },\n [defaultedInitialState, new OptionSet()],\n ),\n startWith<[CoreState, OptionSet]>([\n defaultedInitialState,\n new OptionSet(),\n ]),\n );\n\n const state: Connectable> = connectable(\n coreStateWithSelectionSnapshot.pipe(\n map(([s, selectionAtOpen]) => {\n const allOptionGroups: FullOptionGroup[] =\n s.sourceOptionGroups.map(optionGroup => {\n return {\n ...optionGroup,\n options: optionGroup.options.map(option =>\n augmentOptionToFullOption(s, option, options),\n ),\n };\n });\n\n const topLevelOptions = getTopLevelOptions(allOptionGroups);\n\n const sortedOptionGroups = options?.allowMultiSelect\n ? sortOptionsByPreviouslySelectedState(\n allOptionGroups,\n selectionAtOpen,\n )\n : allOptionGroups;\n\n const displayLimit = options?.displayLimit ?? DEFAULT_DISPLAY_LIMIT;\n const displayLimitedOptionGroups = applyDisplayLimit(\n sortedOptionGroups,\n displayLimit,\n );\n const fullOptionGroups = applySelectedOptionLimit(\n s,\n displayLimitedOptionGroups,\n topLevelOptions,\n options,\n );\n\n return {\n ...s,\n query: {\n ...s.query,\n showSearch:\n !!s.query.search ||\n (!!options?.allowSearch &&\n countAllOptions(allOptionGroups) >\n MIN_OPTIONS_FOR_CONTROLS) ||\n countAllOptions(allOptionGroups) > displayLimit,\n searchPlaceholder: options?.searchPlaceholder ?? 'Search',\n showOrder:\n !!options?.allowOrder &&\n !s.query.search &&\n countAllOptions(allOptionGroups) > MIN_OPTIONS_FOR_CONTROLS,\n },\n fullOptionGroups,\n selection: {\n ...s.selection,\n allowMultiSelect: !!options?.allowMultiSelect,\n allowSelectAll:\n !!options?.allowSelectAll &&\n options?.selectedOptionLimit == undefined,\n visibleSelectionState:\n getParentMultiSelectionState(topLevelOptions),\n },\n display: {\n ...s.display,\n formattedSelectedOptions: getFormattedOptionsForDisplay(\n s,\n topLevelOptions,\n options,\n ),\n zeroStateMessage: getZeroStateMessage(s),\n dividers: !!options?.dividers,\n inline: !!options?.inline,\n maxHeight: options?.maxHeight ?? null,\n maxWidth: options?.maxWidth ?? null,\n minHeight: options?.minHeight ?? null,\n minWidth: options?.minWidth ?? null,\n displayLimitMessage: getDisplayLimitMessage(\n countVisibleOptions(fullOptionGroups, !!s.query.search),\n countVisibleOptions(allOptionGroups, !!s.query.search),\n s.query,\n ),\n showSingleSelected: !!options?.showSingleSelected,\n pillCount: getPillCountForDisplay(s, topLevelOptions, options),\n },\n };\n }),\n ),\n {\n connector: () => new ReplaySubject(1),\n resetOnDisconnect: false,\n },\n );\n state.connect();\n\n // Load the options immediately for selects that are displayed inline.\n if (options?.inline) actions.next({ type: 'load' });\n\n return { actions, state };\n }\n\n export type InMemoryManagerOptions =\n ManagerOptions & {\n fuseOptions?: IFuseOptions;\n };\n\n export function createInMemoryManager(\n fetchDataset: () => Promise[]> | OptionGroup[],\n options?: InMemoryManagerOptions,\n ): Manager {\n let data: OptionGroup[];\n let fuse: Fuse;\n let exactMatch: boolean = false;\n let parents: Map;\n let children: Map;\n\n const source: Source = async (query, mostRecentAction) => {\n /*\n Re-fetch the options on the load action, and rebuild the state\n derived from the option data.\n */\n if (\n mostRecentAction.type === 'load' ||\n mostRecentAction.type === 'openChange'\n ) {\n data = await fetchDataset();\n const topLevelOptions = getTopLevelOptions(data);\n\n fuse = new Fuse(flattenOptions(topLevelOptions, false), {\n threshold: 0.2,\n keys: ['title'],\n includeScore: true,\n includeMatches: true,\n ...options?.fuseOptions,\n });\n\n exactMatch = options?.fuseOptions?.threshold == 0;\n [parents, children] = getRelationshipMaps(topLevelOptions);\n }\n\n // Leading/trailing whitespace shouldn't affect fuzzy matching (Fuse\n // scores the pattern's length against the text's, so a stray space\n // changes results in surprising ways); a search string of only\n // whitespace is treated the same as no search.\n const search = query.search.trim();\n\n /*\n If the user is not searching options, return the full set of options\n sorted appropriately.\n */\n if (!search) {\n /*\n The `source` order property allows for opting out of automatic\n sorting, returning the data in its natural input order.\n */\n if (query.order === 'source') return data;\n\n /*\n Sort the options by title and subtitle.\n */\n if (query.order === 'title') {\n function sortByTitle(options: Option[]): Option[] {\n return sortBy(options, [\n (o: Option) => o.title.toLowerCase(),\n (o: Option) => o.subtitle?.toLowerCase() ?? '',\n ]).map(option => ({\n ...option,\n children: option.children?.length\n ? sortByTitle(option.children)\n : undefined,\n }));\n }\n\n return data.map(group => ({\n ...group,\n options: sortByTitle(group.options),\n }));\n }\n\n /*\n Sort the options by count, then by title, then by subtitle.\n */\n if (query.order === 'count') {\n function sortByCount(options: Option[]): Option[] {\n return sortBy(options, [\n (o: Option) => (isNumber(o.count) ? -o.count : Infinity),\n (o: Option) => o.title.toLowerCase(),\n (o: Option) => o.subtitle?.toLowerCase() ?? '',\n ]).map(option => ({\n ...option,\n children: option.children?.length\n ? sortByCount(option.children)\n : undefined,\n }));\n }\n\n return data.map(group => ({\n ...group,\n options: sortByCount(group.options),\n }));\n }\n }\n\n /*\n Execute the search with fuse. Once we have the search match data,\n rebuild just as much of the tree as is needed to render the search\n results. Specifically, any match will need all of its ancestors (so\n that matched leaf nodes are shown nested under their ancestors) and all\n of its children (because a matching parent means that all of its\n descendants match too, per the design specification), whether they\n themselves matched or not.\n */\n const matchedOptions: FuseResult[] = fuse.search(search);\n const matchedIds: Set = new Set(\n matchedOptions.map(result => result.item.id),\n );\n\n const matchAncestors: Set = new Set();\n function collectAncestors(ids: O['id'][]) {\n for (const id of ids) {\n const parentId = parents.get(id);\n if (parentId) {\n matchAncestors.add(parentId);\n collectAncestors([parentId]);\n }\n }\n }\n collectAncestors([...matchedIds]);\n\n const matchDescendants: Set = new Set();\n function collectDescendants(ids: O['id'][]) {\n for (const id of ids) {\n const childrenIds = children.get(id);\n if (childrenIds) {\n for (const child of childrenIds) {\n matchDescendants.add(child);\n }\n collectDescendants(childrenIds);\n }\n }\n }\n collectDescendants([...matchedIds]);\n\n /*\n Next, we'll combine all the matched IDs with their direct ancestors and\n descandants, and filter the original data set down to just these\n options.\n */\n const filteredIds: Set = new Set([\n ...matchedIds,\n ...matchAncestors,\n ...matchDescendants,\n ]);\n\n function filterOptions(options: Option[]): Option[] {\n const filteredOptions: Option[] = [];\n for (const option of options) {\n if (filteredIds.has(option.id)) {\n filteredOptions.push({\n ...option,\n children: option.children?.length\n ? filterOptions(option.children)\n : undefined,\n });\n }\n }\n return filteredOptions;\n }\n const filteredOptions = filterOptions(getTopLevelOptions(data));\n\n /*\n At this point, we have an array of distinct trees (top-level options),\n filtered down to only the options matching the search query. Note that\n we don't care about section headers when searching since results should\n be ordered by relevance. To calculate the order of these trees, we'll\n take the total match scores for options found in the tree, divided by\n the count of matches in the tree (the best average match score).\n */\n\n const scoreMap: Map = new Map(\n matchedOptions.map(result => [result.item.id, result.score ?? 0]),\n );\n const ordered = sortBy(filteredOptions, (option: Option): number => {\n function calculateScore(option: Option): number {\n return (\n (scoreMap.get(option.id) ?? 0) +\n (option.children ?? []).reduce(\n (score, child) => score + calculateScore(child),\n 0,\n )\n );\n }\n function calculateCount(option: Option): number {\n return (\n 1 +\n (option.children ?? []).reduce(\n (count, child) => count + calculateCount(child),\n 0,\n )\n );\n }\n const totalScore = calculateScore(option);\n const totalCount = calculateCount(option);\n return totalScore / totalCount;\n });\n\n /*\n Finally, we'll add highlight indices to the matches so that they can be\n displayed to the user.\n */\n\n type Highlights = {\n titleHighlightIndices?: HighlightComponent.HighlightIndices[];\n subtitleHighlightIndices?: HighlightComponent.HighlightIndices[];\n };\n const highlightMap: Map = new Map(\n matchedOptions.map(result => {\n const highlights: Highlights = {};\n for (const match of result.matches ?? []) {\n // filter out inexact matches\n if (exactMatch && match.value != null) {\n match.indices = match.indices.filter(\n isFuseMatchExact(match, search),\n );\n }\n if (match.key === 'title') {\n highlights.titleHighlightIndices = [...match.indices];\n }\n if (match.key === 'subtitle') {\n highlights.subtitleHighlightIndices = [...match.indices];\n }\n }\n return [result.item.id, highlights];\n }),\n );\n function addHighlightsToOption(options: Option[]): SourceOption[] {\n return options.map(option => ({\n ...option,\n ...highlightMap.get(option.id),\n ...(option.children?.length\n ? { children: addHighlightsToOption(option.children) }\n : null),\n }));\n }\n\n return {\n data: [{ options: addHighlightsToOption(ordered) }],\n originalData: data,\n };\n };\n\n return createManager(source, options);\n }\n\n export function isFuseMatchExact(\n match: FuseResultMatch,\n search: string,\n ): (\n value: RangeTuple,\n index: number,\n array: readonly RangeTuple[],\n ) => boolean {\n return matchedIndices => {\n const matchedValue = match\n .value!.slice(matchedIndices[0], matchedIndices[1] + 1)\n .toLowerCase();\n // fuse is weird with it's matches. For a text of \"planning\" and a search string of \"plan\"\n // the matched value will be \"plann\" with the extra 'n' because of its fuzzy matching.\n // so just make sure the matched value at least starts with the search string.\n // it's extra weird because for a text of \"analytics\" and a search string of \"nalytics\",\n // the matched value will be \"analytics\". So we just need to make sure the the matched value\n // includes the search string because there might be extra stuff on the front or the end.\n return matchedValue.includes(search.toLowerCase());\n };\n }\n\n //////////////////////////////////\n // State reducer (with helpers) //\n //////////////////////////////////\n\n function createSelectionSnapshotWithAncestors(\n state: CoreState,\n ): OptionSet {\n const snapshot = new OptionSet(state.selection.selected);\n const topLevelOptions = getTopLevelOptions(state.sourceOptionGroups);\n const [parents] = getRelationshipMaps(topLevelOptions);\n\n // Sibling leaves share ancestors, so once we've walked up through a\n // given parent id we can stop — anything above it has already been\n // added by a previous iteration. Without this short-circuit the loop\n // re-runs findOption (which is a full tree walk) once per shared\n // ancestor edge, which was the #2 hotspot behind OptionSet.add in\n // RVT-25470's profile.\n const visited = new Set();\n for (const selectedOption of state.selection.selected) {\n let parentId = parents.get(selectedOption.id);\n while (parentId !== undefined && !visited.has(parentId)) {\n visited.add(parentId);\n const parentOption = findOption(topLevelOptions, parentId);\n if (parentOption) {\n snapshot.add(parentOption);\n }\n parentId = parents.get(parentId);\n }\n }\n\n return snapshot;\n }\n\n function getDisplayLimitMessage(\n displayedOptionCount: number,\n totalOptionCount: number,\n query: CoreState['query'],\n ): string | null {\n if (displayedOptionCount === totalOptionCount) return null;\n const rivNumber = new NumberPipe();\n const displayed = rivNumber.transform(displayedOptionCount);\n const total = rivNumber.transform(totalOptionCount);\n const start = `Showing ${displayed} of ${total} options`;\n return query.search ? `${start} matching \"${query.search}\"` : start;\n }\n\n function countVisibleOptions(\n optionGroups: FullOptionGroup[],\n leafOnly: boolean,\n ): number {\n function count(options: FullOption[]): number {\n return options.reduce((acc, option) => {\n if (option.expanded && option.children?.length) {\n return acc + (leafOnly ? 0 : 1) + count(option.children);\n }\n return acc + 1;\n }, 0);\n }\n\n return optionGroups.reduce(\n (total, group) => total + count(group.options),\n 0,\n );\n }\n\n function countAllOptions(\n optionGroups: FullOptionGroup[],\n ): number {\n function count(options: FullOption[]): number {\n return options.reduce((acc, option) => {\n if (option.children?.length) {\n return acc + 1 + count(option.children);\n }\n return acc + 1;\n }, 0);\n }\n\n return optionGroups.reduce(\n (total, group) => total + count(group.options),\n 0,\n );\n }\n\n function applyDisplayLimit(\n optionGroups: FullOptionGroup[],\n displayLimit: number,\n ): FullOptionGroup[] {\n type DisplayLimitOptions = [FullOption[], number];\n function filterWithLimit(\n options: FullOption[],\n remaining: number,\n ): DisplayLimitOptions {\n let left = remaining;\n const visibleOptions: FullOption[] = [];\n for (const option of options) {\n if (left <= 0) break;\n\n if (option.expanded && option.children?.length) {\n const [childOptions, childRemaining] = filterWithLimit(\n option.children,\n left - 1,\n );\n visibleOptions.push({\n ...option,\n children: childOptions,\n });\n left = childRemaining;\n } else {\n visibleOptions.push(option);\n left--;\n }\n }\n return [visibleOptions, left];\n }\n\n type DisplayLimitGroups = [FullOptionGroup[], number];\n const startingValue: DisplayLimitGroups = [[], displayLimit];\n const [resolvedGroups] = optionGroups.reduce(\n ([groups, remaining], group) => {\n const [options, leftAfter] = filterWithLimit(group.options, remaining);\n if (options.length) {\n return [[...groups, { ...group, options }], leftAfter];\n } else {\n return [groups, remaining];\n }\n },\n startingValue,\n );\n\n return resolvedGroups;\n }\n\n /*\n Sort options so that previously selected options (from prior sessions)\n appear at the top of their peer/sibling lists.\n */\n function sortOptionsByPreviouslySelectedState(\n optionGroups: FullOptionGroup[],\n selectionAtOpen: OptionSet,\n ): FullOptionGroup[] {\n function sortOptions(options: FullOption[]): FullOption[] {\n return sortBy(options, option => !selectionAtOpen.has(option)).map(\n option => {\n if (option.children) {\n return {\n ...option,\n children: sortOptions(option.children),\n };\n } else return option;\n },\n );\n }\n\n return optionGroups.map(group => ({\n ...group,\n options: sortOptions(group.options),\n }));\n }\n\n /*\n If we are restricting how many options are selected to a specific limit,\n when we are at that limit, disable all options not currently selected.\n */\n function applySelectedOptionLimit(\n state: CoreState,\n optionGroups: FullOptionGroup[],\n topLevelOptions: FullOption[],\n options?: ManagerOptions,\n ): FullOptionGroup[] {\n if (options?.selectedOptionLimit === undefined) {\n return optionGroups;\n }\n\n // When useTopLevelOptionsForDisplay is true and search is active, count\n // selected top-level options from the original (unfiltered) data to ensure\n // already-selected options that don't match the search are still counted.\n const useOriginalForCounting =\n options?.useTopLevelOptionsForDisplay &&\n state.query.search &&\n state.originalOptionGroups.length > 0;\n\n const topOptionsForCounting = useOriginalForCounting\n ? getTopLevelOptions(state.originalOptionGroups).map(option =>\n augmentOptionToFullOption(state, option, options),\n )\n : topLevelOptions;\n\n const selectedOrIndeterminateTopOptions = topOptionsForCounting.filter(\n option => option.selected != false,\n );\n const numSelectedOptions: number = options?.useTopLevelOptionsForDisplay\n ? selectedOrIndeterminateTopOptions.length\n : state.selection.selected.size;\n\n const selectedOptionLimit: number = options.selectedOptionLimit;\n\n // If we have less items selected than the limit, business as usual.\n if (numSelectedOptions < selectedOptionLimit) {\n return optionGroups;\n }\n\n // If we have equal items selected to the limit (or more), prevent users from selecting more options.\n function disableUnselectedItems(\n currentOptions: FullOption[],\n optionsAreChildrenOfSelectedGroup: boolean,\n ): FullOption[] {\n const updatedItems: FullOption[] = [];\n for (const option of currentOptions) {\n const isDisabledOrUnselected: boolean =\n !!option.disabled || (option.selectable && option.selected == false);\n\n const isCurrentOptionSelected: boolean =\n option.selectable && option.selected != false;\n const isCurrentOrParentOptionSelected: boolean =\n isCurrentOptionSelected || optionsAreChildrenOfSelectedGroup;\n\n const forceEnabledBasedOnParent: boolean =\n !!options?.useTopLevelOptionsForDisplay &&\n optionsAreChildrenOfSelectedGroup;\n const markDisabled: boolean =\n isDisabledOrUnselected && !forceEnabledBasedOnParent;\n\n if (option.children?.length) {\n const childOptions = disableUnselectedItems(\n option.children,\n isCurrentOrParentOptionSelected,\n );\n updatedItems.push({\n ...option,\n disabled: !!markDisabled,\n children: childOptions,\n });\n } else {\n updatedItems.push({\n ...option,\n disabled: !!markDisabled,\n });\n }\n }\n return updatedItems;\n }\n\n const groupsAfterLimit: FullOptionGroup[] = [];\n for (const currentGroup of optionGroups) {\n groupsAfterLimit.push({\n ...currentGroup,\n options: disableUnselectedItems(currentGroup.options, false),\n });\n }\n\n return groupsAfterLimit;\n }\n\n function getRelationshipMaps(\n options: Option[],\n ): [Map, Map] {\n const parents = new Map();\n function buildParentsMap(options: Option[], parent?: Option): void {\n for (const option of options) {\n if (parent) {\n parents.set(option.id, parent.id);\n }\n if (option.children?.length) {\n buildParentsMap(option.children, option);\n }\n }\n }\n buildParentsMap(options);\n\n const children = new Map();\n function buildChildrenMap(options: Option[]): void {\n for (const option of options) {\n if (option.children?.length) {\n children.set(\n option.id,\n option.children.map(({ id }) => id),\n );\n buildChildrenMap(option.children);\n }\n }\n }\n buildChildrenMap(options);\n\n return [parents, children];\n }\n\n function getTopLevelOptions(\n optionGroups: FullOptionGroup[],\n ): FullOption[];\n function getTopLevelOptions(\n optionGroups: SourceOptionGroup[],\n ): SourceOption[];\n function getTopLevelOptions(\n optionGroups: OptionGroup[],\n ): Option[];\n function getTopLevelOptions<\n O extends BaseOption,\n G extends { options: readonly T[] },\n T = G extends FullOptionGroup\n ? FullOption\n : G extends SourceOptionGroup\n ? SourceOption\n : Option,\n >(optionGroups: G[]): T[] {\n return optionGroups.reduce(\n (options, group) => [...options, ...group.options],\n [],\n );\n }\n\n function getParentMultiSelectionState(\n children: FullOption[],\n ): MultiSelectionState {\n if (children.every(child => child.selected === true)) return true;\n if (children.every(child => child.selected === false)) return false;\n return 'indeterminate';\n }\n\n function augmentOptionToFullOption(\n state: CoreState,\n option: SourceOption,\n managerOptions?: ManagerOptions,\n ): FullOption {\n if (option.children?.length) {\n const augmentedChildren = option.children.map(child =>\n augmentOptionToFullOption(state, child, managerOptions),\n );\n const selectableWhenSearching =\n managerOptions?.allowSelectNonLeafDuringSearch ?? false;\n\n // When allowSelectNonLeafDuringSearch is enabled and search is active,\n // calculate selection state from ALL original children, not just the\n // filtered ones visible in search results.\n const useOriginalForSelectionState =\n managerOptions?.allowSelectNonLeafDuringSearch &&\n state.query.search &&\n state.originalOptionGroups.length > 0;\n\n let selected: MultiSelectionState;\n if (useOriginalForSelectionState) {\n const originalOption = findOption(\n getTopLevelOptions(state.originalOptionGroups),\n option.id,\n );\n if (originalOption) {\n const allLeaves = flattenOptions([originalOption], true);\n const selectedCount = allLeaves.filter(leaf =>\n state.selection.selected.has(leaf),\n ).length;\n if (selectedCount === 0) {\n selected = false;\n } else if (selectedCount === allLeaves.length) {\n selected = true;\n } else {\n selected = 'indeterminate';\n }\n } else {\n selected = getParentMultiSelectionState(augmentedChildren);\n }\n } else {\n selected = getParentMultiSelectionState(augmentedChildren);\n }\n\n return {\n ...option,\n children: augmentedChildren,\n selected,\n expanded: state.query.search\n ? true\n : state.display.expandedOptions.has(option.id),\n selectable: !state.query.search || selectableWhenSearching,\n expandable: !state.query.search,\n };\n }\n return {\n ...option,\n children: undefined,\n selected: state.selection.selected.has(option),\n expanded: false,\n selectable: true,\n expandable: false,\n };\n }\n\n function getFormattedOptionsForDisplay(\n state: CoreState,\n topLevelOptions: FullOption[],\n options?: ManagerOptions,\n ): string {\n // If we have a custom display function, use it\n if (options?.getCustomOptionDisplay) {\n return options.getCustomOptionDisplay([...state.selection.selected]);\n }\n if (options?.useTopLevelOptionsForDisplay) {\n return getTopLevelFormattedOptionsForDisplay(topLevelOptions);\n }\n // Otherwise, use the default display for options - titles separated by commas.\n return [...state.selection.selected].map(({ title }) => title).join(', ');\n }\n\n function getTopLevelFormattedOptionsForDisplay(\n topLevelOptions: FullOption[],\n ): string {\n if (!topLevelOptions || topLevelOptions.length == 0) {\n return '';\n }\n const selectedOrIndeterminateTopOptions = topLevelOptions.filter(\n option => option.selected != false,\n );\n return selectedOrIndeterminateTopOptions\n .map(({ title }) => title)\n .join(', ');\n }\n\n function getPillCountForDisplay(\n state: CoreState,\n topLevelOptions: FullOption[],\n options?: ManagerOptions,\n ): number {\n if (options?.useTopLevelOptionsForDisplay) {\n const selectedOrIndeterminateTopOptions = topLevelOptions.filter(\n option => option.selected != false,\n );\n return selectedOrIndeterminateTopOptions.length;\n }\n return state.selection.selected.size;\n }\n\n function getZeroStateMessage(\n state: CoreState,\n ): string | null {\n if (state.sourceOptionGroups.every(group => group.options.length === 0)) {\n if (state.query.search) return 'No results found.';\n return 'No options.';\n }\n return null;\n }\n\n function findOption(\n options: SourceOption[],\n id: O['id'],\n ): SourceOption | null {\n for (const option of options) {\n if (option.id === id) return option;\n if (option.children?.length) {\n const child = findOption(option.children, id);\n if (child) return child;\n }\n }\n return null;\n }\n\n function flattenOptions(\n options: Option[],\n leafOnly: boolean,\n ): O[] {\n return flattenDeep(\n options.map(option => {\n if (option.children?.length) {\n const descendants = option.children.map(child =>\n flattenOptions([child], leafOnly),\n );\n return leafOnly ? descendants : [option, ...descendants];\n } else {\n return [option];\n }\n }),\n );\n }\n\n function toggleSelected(\n state: CoreState,\n id: O['id'],\n managerOptions?: ManagerOptions,\n ): CoreState {\n const topLevelOptions = getTopLevelOptions(state.sourceOptionGroups);\n const option = findOption(topLevelOptions, id);\n if (!option) return state;\n\n const newSelection = new OptionSet(state.selection.selected);\n\n const newValue = !(\n augmentOptionToFullOption(state, option, managerOptions).selected === true\n );\n\n // When allowSelectNonLeafDuringSearch is enabled and search is active,\n // use the original (unfiltered) data to get all children, not just\n // those visible in the filtered search results.\n const useOriginalData =\n managerOptions?.allowSelectNonLeafDuringSearch &&\n state.query.search &&\n state.originalOptionGroups.length > 0;\n\n const optionForLeaves = useOriginalData\n ? findOption(getTopLevelOptions(state.originalOptionGroups), id) ?? option\n : option;\n\n const leaves = flattenOptions([optionForLeaves], true);\n for (const leaf of leaves) {\n if (newValue) {\n newSelection.add(leaf);\n } else {\n newSelection.delete(leaf);\n }\n }\n\n return {\n ...state,\n selection: {\n selected: newSelection,\n },\n };\n }\n\n function setSelectedOption