@rivet-health/design-system 40.35.2 → 40.37.0

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

@@ -6418,6 +6418,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     CardMediaComponent.Fits = ['cover', 'contain', 'fill'];
 })(CardMediaComponent || (CardMediaComponent = {}));
 
+/**
+ * One labelled setting that is read in place and edited inline.
+ *
+ * Reading shows the label, the current value, and an edit button. Editing
+ * swaps the value for a consumer-supplied field plus Cancel and Save buttons.
+ * The row holds no state of its own — bind `editing` and act on `edit`,
+ * `cancel`, and `save`.
+ *
+ * Set the value shown while reading with `value` for plain text, or project
+ * richer content such as a `riv-badge` into the `[display-value]` slot. Use
+ * one or the other: when `value` is set, the slot isn't shown.
+ *
+ * Two content slots:
+ * - `[display-value]` — content shown while reading, when `value` is empty
+ * - `#editor` template — any field component to edit the value with, such as
+ *   `riv-text-field`, `riv-currency-field`, or `riv-simple-select`. The row
+ *   wraps it in a `<label>` named after `label`, so don't give the field its
+ *   own label. Only the first control in the template gets that name, so keep
+ *   it to one field.
+ *
+ * ```html
+ * <riv-setting-row
+ *   [label]="'Threshold'"
+ *   [infoTooltip]="'Applies to new claims only'"
+ *   [editing]="editing"
+ *   [saving]="saving"
+ *   (edit)="editing = true"
+ *   (cancel)="editing = false"
+ *   (save)="save()"
+ *   [value]="threshold + '%'"
+ * >
+ *   <ng-template #editor>
+ *     <riv-text-field [(value)]="draft"></riv-text-field>
+ *   </ng-template>
+ * </riv-setting-row>
+ * ```
+ *
+ * Stack rows directly to build a settings list; each row pads itself
+ * vertically and lays out on a shared twelve-column grid so labels, values,
+ * and actions line up between rows.
+ */
+class SettingRowComponent {
+    constructor() {
+        /** Names the setting. Also gives the edit button its screen-reader name, "Edit {label}". */
+        this.label = '';
+        /**
+         * The value shown while reading, as plain text and already formatted, such
+         * as `'$250'`. For anything richer, leave this empty and project it into
+         * `[display-value]` instead.
+         */
+        this.value = '';
+        /** Explains the setting from an info icon beside the label. */
+        this.infoTooltip = '';
+        /**
+         * Whether the edit field is shown. The consumer (the parent component) owns
+         * this state, so it can keep only one row open for editing at a time.
+         */
+        this.editing = false;
+        /** Blocks Save, for a draft that is not yet valid. */
+        this.saveDisabled = false;
+        /** Shows Save as loading and blocks Save and Cancel while a save is in flight. */
+        this.saving = false;
+        this.tooltipMaxWidth = '320px';
+        this.edit = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.save = new EventEmitter();
+    }
+    get editingClass() {
+        return this.editing;
+    }
+}
+SettingRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SettingRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SettingRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SettingRowComponent, selector: "riv-setting-row", inputs: { label: "label", value: "value", infoTooltip: "infoTooltip", editing: "editing", saveDisabled: "saveDisabled", saving: "saving", tooltipMaxWidth: "tooltipMaxWidth" }, outputs: { edit: "edit", cancel: "cancel", save: "save" }, host: { properties: { "class.editing": "this.editingClass" } }, queries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<span class=\"label\">\n  <riv-icon\n    *ngIf=\"infoTooltip\"\n    [name]=\"'Info'\"\n    [size]=\"16\"\n    [rivTooltip]=\"infoTooltip\"\n    [rivTooltipMaxWidth]=\"tooltipMaxWidth\"\n  ></riv-icon>\n  {{ label }}\n</span>\n\n<ng-container *ngIf=\"!editing; else editMode\">\n  <span class=\"value\">\n    <ng-container *ngIf=\"value; else projectedValue\">{{ value }}</ng-container>\n    <ng-template #projectedValue>\n      <ng-content select=\"[display-value]\"></ng-content>\n    </ng-template>\n  </span>\n  <div class=\"actions\">\n    <button\n      rivButton\n      type=\"button\"\n      [icon]=\"'Edit2'\"\n      [rivTooltip]=\"'Edit'\"\n      [variant]=\"'ghost'\"\n      [attr.aria-label]=\"'Edit ' + label\"\n      (click)=\"edit.emit()\"\n    ></button>\n  </div>\n</ng-container>\n\n<ng-template #editMode>\n  <label class=\"field\">\n    <riv-sr-only>{{ label }}</riv-sr-only>\n    <ng-container *ngTemplateOutlet=\"editor ?? null\"></ng-container>\n  </label>\n\n  <div class=\"actions\">\n    <button\n      rivButton\n      type=\"button\"\n      [variant]=\"'basic'\"\n      [size]=\"'medium'\"\n      [disabled]=\"saving\"\n      (click)=\"cancel.emit()\"\n    >\n      Cancel\n    </button>\n    <button\n      rivButton\n      type=\"button\"\n      [variant]=\"'primary'\"\n      [size]=\"'medium'\"\n      [disabled]=\"saveDisabled || saving\"\n      [loading]=\"saving\"\n      (click)=\"save.emit()\"\n    >\n      Save\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--size-large);align-items:center;padding-block:var(--size-medium);color:var(--type-light-high-contrast)}.label,.value,.actions{display:flex;align-items:center;gap:var(--size-small)}.label{grid-column-end:span 4;font:var(--title-02)}.value{grid-column-end:span 7;font:var(--body-medium)}.field{grid-column-end:span 4}.actions{grid-column-end:span 1;justify-content:flex-end}:host.editing .actions{grid-column-end:span 4}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SrOnlyComponent, selector: "riv-sr-only" }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SettingRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-setting-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"label\">\n  <riv-icon\n    *ngIf=\"infoTooltip\"\n    [name]=\"'Info'\"\n    [size]=\"16\"\n    [rivTooltip]=\"infoTooltip\"\n    [rivTooltipMaxWidth]=\"tooltipMaxWidth\"\n  ></riv-icon>\n  {{ label }}\n</span>\n\n<ng-container *ngIf=\"!editing; else editMode\">\n  <span class=\"value\">\n    <ng-container *ngIf=\"value; else projectedValue\">{{ value }}</ng-container>\n    <ng-template #projectedValue>\n      <ng-content select=\"[display-value]\"></ng-content>\n    </ng-template>\n  </span>\n  <div class=\"actions\">\n    <button\n      rivButton\n      type=\"button\"\n      [icon]=\"'Edit2'\"\n      [rivTooltip]=\"'Edit'\"\n      [variant]=\"'ghost'\"\n      [attr.aria-label]=\"'Edit ' + label\"\n      (click)=\"edit.emit()\"\n    ></button>\n  </div>\n</ng-container>\n\n<ng-template #editMode>\n  <label class=\"field\">\n    <riv-sr-only>{{ label }}</riv-sr-only>\n    <ng-container *ngTemplateOutlet=\"editor ?? null\"></ng-container>\n  </label>\n\n  <div class=\"actions\">\n    <button\n      rivButton\n      type=\"button\"\n      [variant]=\"'basic'\"\n      [size]=\"'medium'\"\n      [disabled]=\"saving\"\n      (click)=\"cancel.emit()\"\n    >\n      Cancel\n    </button>\n    <button\n      rivButton\n      type=\"button\"\n      [variant]=\"'primary'\"\n      [size]=\"'medium'\"\n      [disabled]=\"saveDisabled || saving\"\n      [loading]=\"saving\"\n      (click)=\"save.emit()\"\n    >\n      Save\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--size-large);align-items:center;padding-block:var(--size-medium);color:var(--type-light-high-contrast)}.label,.value,.actions{display:flex;align-items:center;gap:var(--size-small)}.label{grid-column-end:span 4;font:var(--title-02)}.value{grid-column-end:span 7;font:var(--body-medium)}.field{grid-column-end:span 4}.actions{grid-column-end:span 1;justify-content:flex-end}:host.editing .actions{grid-column-end:span 4}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], infoTooltip: [{
+                type: Input
+            }], editing: [{
+                type: Input
+            }], saveDisabled: [{
+                type: Input
+            }], saving: [{
+                type: Input
+            }], tooltipMaxWidth: [{
+                type: Input
+            }], edit: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], editor: [{
+                type: ContentChild,
+                args: ['editor']
+            }], editingClass: [{
+                type: HostBinding,
+                args: ['class.editing']
+            }] } });
+
 /**
  * A borderless heading with a click-to-edit title and an optional
  * click-to-edit description, plus a projected slot for actions.
@@ -8624,10 +8728,10 @@ var TableColumnHelpers;
     function getAlignment(metadata, index, allowSelection) {
         return getColumnAlignment(metadata.dataType, index === 0 && !allowSelection);
     }
-    function resolveColumns(state, supportedColumns, columnNameMap, allowSelection) {
+    function resolveColumns(state, supportedColumns, columnNameMap, allowSelection, filterTo) {
         const allColumns = getAllColumns(state, supportedColumns, columnNameMap);
         return allColumns
-            .filter(({ enabled }) => enabled)
+            .filter(({ enabled }) => (filterTo === 'enabled' ? enabled : !enabled))
             .reduce((fullColumns, settings, i) => {
             const metadata = supportedColumns.get(settings.key);
             const resolvedWidth = settings.preferredWidth === 'auto'
@@ -8778,18 +8882,30 @@ var TableColumnHelpers;
     TableColumnHelpers.changeColumnEnabled = changeColumnEnabled;
     function enableAllColumns(state, columns, columnNameMap, enabled) {
         const allColumns = getAllColumns(state, columns, columnNameMap);
-        if (enabled && allColumns.length > RivTable.ColumnsMaxShown)
+        if (enabled && allColumns.length > RivTable.ColumnsMaxShown) {
             return state;
+        }
+        const updatedColumnSettings = allColumns.map(currentColumnSettings => {
+            const currentColumnMetadata = columns.get(currentColumnSettings.key);
+            const isColumnAlwaysVisible = currentColumnMetadata?.alwaysVisible ?? false;
+            if (isColumnAlwaysVisible) {
+                return {
+                    ...currentColumnSettings,
+                    enabled: true,
+                };
+            }
+            return {
+                ...currentColumnSettings,
+                enabled: enabled,
+                // Unpin if being unchecked
+                pinned: !enabled ? false : currentColumnSettings.pinned,
+            };
+        });
         return {
             ...state,
             display: {
                 ...state.display,
-                columnSettings: orderIntentionally(allColumns.map(c => ({
-                    ...c,
-                    enabled: enabled,
-                    // Unpin if being unchecked
-                    pinned: !enabled ? false : c.pinned,
-                })), columnNameMap),
+                columnSettings: orderIntentionally(updatedColumnSettings, columnNameMap),
             },
         };
     }
@@ -8832,10 +8948,36 @@ var TableColumnHelpers;
                 clickPreventDefault: metadata.clickPreventDefault,
                 clickStopPropagation: metadata.clickStopPropagation,
                 displayName: metadata.displayName,
+                alwaysVisible: metadata.alwaysVisible,
+                tooltipForHideIcon: metadata.tooltipForHideIcon,
             },
         ]));
     }
     TableColumnHelpers.createColumnMetadataMap = createColumnMetadataMap;
+    function getColumnSettingsColumnList(state) {
+        const allColumnMetadata = [
+            ...state.display.columns,
+            ...state.display.disabledColumns,
+        ];
+        const columnsLength = state.display.allColumns.length;
+        const allColumns = state.display.allColumns.map((column, i) => {
+            const nextColumnPinned = i + 2 <= columnsLength
+                ? state.display.allColumns[i + 1].pinned
+                : false;
+            const currentColumnMetadata = allColumnMetadata.find(metadata => metadata.key === column.key);
+            return {
+                ...column,
+                resolvedName: state.display.columnNameMap.get(column.key) ?? column.key,
+                stateIndex: i,
+                isLastPinnedColumn: column.pinned && !nextColumnPinned,
+                alwaysVisible: currentColumnMetadata?.alwaysVisible ?? false,
+                tooltipForHideIcon: currentColumnMetadata?.tooltipForHideIcon,
+                highlightIndices: [],
+            };
+        });
+        return allColumns;
+    }
+    TableColumnHelpers.getColumnSettingsColumnList = getColumnSettingsColumnList;
 })(TableColumnHelpers || (TableColumnHelpers = {}));
 
 var TableResultHelpers;
@@ -9701,7 +9843,8 @@ var RivTable;
         const csvExportAllowed = !(options?.getRowSpanForCell || options?.customSummaryRow);
         // Augment state with derived state, and subscribe.
         const state = connectable(coreState.pipe(map(({ state: s }) => {
-            const resolvedColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options?.allowSelection);
+            const resolvedColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options?.allowSelection, 'enabled');
+            const resolvedDisabledColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options?.allowSelection, 'disabled');
             if (TableResultHelpers.isGroupResult(s.result)) {
                 return deriveFullStateFromGroupResult({
                     s,
@@ -9711,6 +9854,7 @@ var RivTable;
                     pluralEntityName,
                     columnNameMap,
                     resolvedColumns,
+                    resolvedDisabledColumns,
                     searchableColumnMap,
                     csvExportAllowed,
                     options,
@@ -9725,6 +9869,7 @@ var RivTable;
                     pluralEntityName,
                     columnNameMap,
                     resolvedColumns,
+                    resolvedDisabledColumns,
                     searchableColumnMap,
                     csvExportAllowed,
                     options,
@@ -9739,6 +9884,7 @@ var RivTable;
                     pluralEntityName,
                     columnNameMap,
                     resolvedColumns,
+                    resolvedDisabledColumns,
                     searchableColumnMap,
                     csvExportAllowed,
                     options,
@@ -9760,7 +9906,7 @@ var RivTable;
     }
     RivTable.createManager = createManager;
     function deriveFullStateFromGroupResult(props) {
-        const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
+        const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
         if (options?.getRowSpanForCell) {
             // eslint-disable-next-line no-console
             console.warn('Heads up! Custom row spans are not supported for grouped tables.');
@@ -9798,7 +9944,7 @@ var RivTable;
             if (!TableResultHelpers.isGroupResult(dataSet)) {
                 throw new Error('Returned non-grouped CSV data for grouped table');
             }
-            const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection);
+            const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection, 'enabled');
             const data = [];
             data.push(fullColumns.map(({ key }) => columnNameMap.get(key) ?? key));
             if (groupCellFormatter) {
@@ -9832,6 +9978,7 @@ var RivTable;
                 pluralEntityName: pluralEntityName,
                 columnNameMap: columnNameMap,
                 resolvedColumns: resolvedColumns,
+                resolvedDisabledColumns: resolvedDisabledColumns,
                 searchableColumnMap: searchableColumnMap,
                 csvExportAllowed: csvExportAllowed,
                 options: options,
@@ -9849,7 +9996,7 @@ var RivTable;
         };
     }
     function deriveFullStateFromNestedResult(props) {
-        const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
+        const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
         if (options?.getRowSpanForCell) {
             // eslint-disable-next-line no-console
             console.warn('Heads up! Custom row spans are not supported for tables with nested data.');
@@ -9885,7 +10032,7 @@ var RivTable;
             if (TableResultHelpers.isGroupResult(dataSet)) {
                 throw new Error('Returned grouped CSV data for a nested with header result table');
             }
-            const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection);
+            const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection, 'enabled');
             const data = [];
             data.push(fullColumns.map(({ key }) => columnNameMap.get(key) ?? key));
             const allRows = TableResultHelpers.getAllRowsFromResult(dataSet);
@@ -9911,6 +10058,7 @@ var RivTable;
                 pluralEntityName: pluralEntityName,
                 columnNameMap: columnNameMap,
                 resolvedColumns: resolvedColumns,
+                resolvedDisabledColumns: resolvedDisabledColumns,
                 searchableColumnMap: searchableColumnMap,
                 csvExportAllowed: csvExportAllowed,
                 options: options,
@@ -9928,7 +10076,7 @@ var RivTable;
         };
     }
     function deriveFullStateFromRegularResult(props) {
-        const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
+        const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
         const rows = stateResult.currentPageData.map(row => ({
             ...row,
             rowLink: options?.rowLink ? options.rowLink(row) : null,
@@ -9962,7 +10110,7 @@ var RivTable;
             if (TableResultHelpers.isNestedResult(dataSet)) {
                 throw new Error('Returned nested CSV data for non-nested table');
             }
-            const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection);
+            const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection, 'enabled');
             const data = [];
             data.push(fullColumns.map(({ key }) => columnNameMap.get(key) ?? key));
             for (const record of dataSet.currentPageData) {
@@ -9988,6 +10136,7 @@ var RivTable;
                 pluralEntityName: pluralEntityName,
                 columnNameMap: columnNameMap,
                 resolvedColumns: resolvedColumns,
+                resolvedDisabledColumns: resolvedDisabledColumns,
                 searchableColumnMap: searchableColumnMap,
                 csvExportAllowed: csvExportAllowed,
                 options: options,
@@ -10041,10 +10190,11 @@ var RivTable;
         };
     }
     function derivedFullStateDisplay(props, partialDisplay = {}) {
-        const { coreState, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
+        const { coreState, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
         return {
             ...coreState.display,
             columns: resolvedColumns,
+            disabledColumns: resolvedDisabledColumns,
             allColumns: TableColumnHelpers.getAllColumns(coreState, columns, columnNameMap),
             columnNameMap: columnNameMap,
             searchableColumnMap: searchableColumnMap,
@@ -10836,18 +10986,7 @@ class TableColumnSettingsSideSheetComponent {
     ngOnInit() {
         this.columnList = combineLatest([
             this.manager.state.pipe(map(s => {
-                const columnsLength = s.display.allColumns.length;
-                const allColumns = s.display.allColumns.map((column, i) => {
-                    const nextColumnPinned = i + 2 <= columnsLength
-                        ? s.display.allColumns[i + 1].pinned
-                        : false;
-                    return {
-                        ...column,
-                        resolvedName: s.display.columnNameMap.get(column.key) ?? column.key,
-                        stateIndex: i,
-                        isLastPinnedColumn: column.pinned && !nextColumnPinned,
-                    };
-                });
+                const allColumns = TableColumnHelpers.getColumnSettingsColumnList(s);
                 const fuse = new Fuse(allColumns, {
                     keys: ['resolvedName'],
                     ignoreLocation: true,
@@ -10875,12 +11014,12 @@ class TableColumnSettingsSideSheetComponent {
                     disabledColumns,
                 };
             }
-            const allVisableColumns = allColumns.map(column => ({
+            const allVisibleColumns = allColumns.map(column => ({
                 ...column,
                 highlightIndices: [],
             }));
-            const enabledColumns = allVisableColumns.filter(column => column.enabled);
-            const disabledColumns = allVisableColumns.filter(column => !column.enabled);
+            const enabledColumns = allVisibleColumns.filter(column => column.enabled);
+            const disabledColumns = allVisibleColumns.filter(column => !column.enabled);
             return {
                 enabledColumns: enabledColumns,
                 disabledColumns: disabledColumns,
@@ -10997,10 +11136,10 @@ class TableColumnSettingsSideSheetComponent {
     }
 }
 TableColumnSettingsSideSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableColumnSettingsSideSheetComponent, selector: "riv-table-column-settings-side-sheet", inputs: { manager: "manager" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n  Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            type=\"button\"\n            rivButton\n            [variant]=\"'ghost'\"\n            [icon]=\"'X'\"\n            (click)=\"open.next(false); filterQuery.next('')\"\n          ></button>\n        </div>\n        <riv-search\n          [name]=\"'column-search'\"\n          [value]=\"(filterQuery | async) || ''\"\n          (valueChange)=\"filterQuery.next($event)\"\n        ></riv-search>\n        <riv-banner\n          *ngIf=\"\n            columns.disabledColumns.length > 0 &&\n            disableEnablingColumns(columns)\n          \"\n          [iconTooltip]=\"iconLimitTooltip()\"\n        >\n          Column limit reached\n        </riv-banner>\n        <div class=\"columns\">\n          <div *ngIf=\"columns.enabledColumns.length > 0\">\n            <div\n              class=\"column-header drop-zone\"\n              (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n              (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n            >\n              <span class=\"column-header-label\">Shown in table</span>\n              <button\n                type=\"button\"\n                *ngIf=\"(searching | async) === false\"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsEnabled(columns)\"\n                (click)=\"enableAllColumns(false)\"\n              >\n                Hide all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <ng-container\n                *ngFor=\"let column of columns.enabledColumns; let i = index\"\n              >\n                <div\n                  class=\"option drop-zone\"\n                  [attr.draggable]=\"(searching | async) === false\"\n                  [attr.droppable]=\"(searching | async) === false\"\n                  (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                  (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                  (drop)=\"\n                    drop(\n                      i,\n                      column.stateIndex,\n                      true,\n                      columns.enabledColumns.length\n                    )\n                  \"\n                  [class.dragged-over-top]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx > i\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnTemplate;\n                      context: { column, columns }\n                    \"\n                  ></ng-container>\n                </div>\n                <div\n                  *ngIf=\"\n                    column.isLastPinnedColumn && (searching | async) === false\n                  \"\n                  class=\"column scroll-padding\"\n                >\n                  <div class=\"frozen\">\n                    <span class=\"pinned\">\n                      <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n                    </span>\n                    <span>Frozen through here</span>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"'Un-freeze columns'\"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled\"\n                    [variant]=\"'ghost'\"\n                    [size]=\"'small'\"\n                    [icon]=\"'X'\"\n                    (click)=\"\n                      columnFreezeUpTo(\n                        false,\n                        column.stateIndex,\n                        'freezeDivider'\n                      )\n                    \"\n                  ></button>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              columns.enabledColumns.length === 0 &&\n              (searching | async) === false\n            \"\n            class=\"column-header drop-zone\"\n            (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <span>No columns shown</span>\n            <button\n              type=\"button\"\n              rivButton\n              [variant]=\"'ghost'\"\n              (click)=\"resetToDefault()\"\n            >\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              columns.disabledColumns.length > 0 &&\n              ((searching | async) === false ||\n                ((searching | async) && columns.enabledColumns.length > 0))\n            \"\n          ></div>\n          <div\n            *ngIf=\"columns.disabledColumns.length > 0\"\n            (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">Hidden from table</span>\n\n              <button\n                type=\"button\"\n                *ngIf=\"\n                  (searching | async) === false &&\n                  showAllColumnsVisible(columns)\n                \"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsDisabled(columns)\"\n                (click)=\"enableAllColumns(true)\"\n              >\n                Show all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <div\n                *ngFor=\"let column of columns.disabledColumns; let i = index\"\n                [attr.draggable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n                (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                (dragenter)=\"\n                  $event.preventDefault();\n                  dragOver(i + columns.enabledColumns.length)\n                \"\n                (drop)=\"\n                  drop(\n                    i + columns.enabledColumns.length,\n                    column.stateIndex,\n                    false,\n                    columns.enabledColumns.length\n                  )\n                \"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: { column, columns }\n                  \"\n                ></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </riv-side-sheet>\n  </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n  <div\n    class=\"column scroll-padding\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <div class=\"column\">\n      <span\n        class=\"reorder\"\n        *ngIf=\"(searching | async) === false\"\n        [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      >\n        <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n      </span>\n      <riv-highlight\n        [text]=\"column.resolvedName\"\n        [indices]=\"column.highlightIndices\"\n      ></riv-highlight>\n    </div>\n    <div>\n      <riv-menu\n        class=\"hidden\"\n        *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n      >\n        <button\n          type=\"button\"\n          *ngIf=\"column.enabled && !column.pinned\"\n          riv-menu-item\n          (click)=\"\n            columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n          \"\n        >\n          Freeze up to column\n        </button>\n        <button\n          type=\"button\"\n          *ngIf=\"column.enabled && column.pinned\"\n          riv-menu-item\n          (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n        >\n          Un-freeze columns\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'start')\"\n        >\n          Move to start\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'end')\"\n        >\n          Move to end\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n        >\n          {{ column.enabled ? 'Hide column' : 'Show column' }}\n        </button>\n      </riv-menu>\n      <button\n        type=\"button\"\n        rivButton\n        [rivTooltip]=\"\n          column.enabled\n            ? 'Hide column'\n            : disableEnablingColumns(columns)\n            ? limitTooltip()\n            : 'Show column'\n        \"\n        class=\"disable-override\"\n        [class.disabled]=\"!column.enabled\"\n        [disabled]=\"disableEnablingColumn(column, columns)\"\n        [variant]=\"'ghost'\"\n        [size]=\"'small'\"\n        [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n        (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n      ></button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableColumnSettingsSideSheetComponent, selector: "riv-table-column-settings-side-sheet", inputs: { manager: "manager" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n  Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            type=\"button\"\n            rivButton\n            [variant]=\"'ghost'\"\n            [icon]=\"'X'\"\n            (click)=\"open.next(false); filterQuery.next('')\"\n          ></button>\n        </div>\n        <riv-search\n          [name]=\"'column-search'\"\n          [value]=\"(filterQuery | async) || ''\"\n          (valueChange)=\"filterQuery.next($event)\"\n        ></riv-search>\n        <riv-banner\n          *ngIf=\"\n            columns.disabledColumns.length > 0 &&\n            disableEnablingColumns(columns)\n          \"\n          [iconTooltip]=\"iconLimitTooltip()\"\n        >\n          Column limit reached\n        </riv-banner>\n        <div class=\"columns\">\n          <div *ngIf=\"columns.enabledColumns.length > 0\">\n            <div\n              class=\"column-header drop-zone\"\n              (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n              (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n            >\n              <span class=\"column-header-label\">Shown in table</span>\n              <button\n                type=\"button\"\n                *ngIf=\"(searching | async) === false\"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsEnabled(columns)\"\n                (click)=\"enableAllColumns(false)\"\n              >\n                Hide all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <ng-container\n                *ngFor=\"let column of columns.enabledColumns; let i = index\"\n              >\n                <div\n                  class=\"option drop-zone\"\n                  [attr.draggable]=\"(searching | async) === false\"\n                  [attr.droppable]=\"(searching | async) === false\"\n                  (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                  (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                  (drop)=\"\n                    drop(\n                      i,\n                      column.stateIndex,\n                      true,\n                      columns.enabledColumns.length\n                    )\n                  \"\n                  [class.dragged-over-top]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx > i\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnTemplate;\n                      context: { column, columns }\n                    \"\n                  ></ng-container>\n                </div>\n                <div\n                  *ngIf=\"\n                    column.isLastPinnedColumn && (searching | async) === false\n                  \"\n                  class=\"column scroll-padding\"\n                >\n                  <div class=\"frozen\">\n                    <span class=\"pinned\">\n                      <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n                    </span>\n                    <span>Frozen through here</span>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"'Un-freeze columns'\"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled\"\n                    [variant]=\"'ghost'\"\n                    [size]=\"'small'\"\n                    [icon]=\"'X'\"\n                    (click)=\"\n                      columnFreezeUpTo(\n                        false,\n                        column.stateIndex,\n                        'freezeDivider'\n                      )\n                    \"\n                  ></button>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              columns.enabledColumns.length === 0 &&\n              (searching | async) === false\n            \"\n            class=\"column-header drop-zone\"\n            (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <span>No columns shown</span>\n            <button\n              type=\"button\"\n              rivButton\n              [variant]=\"'ghost'\"\n              (click)=\"resetToDefault()\"\n            >\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              columns.disabledColumns.length > 0 &&\n              ((searching | async) === false ||\n                ((searching | async) && columns.enabledColumns.length > 0))\n            \"\n          ></div>\n          <div\n            *ngIf=\"columns.disabledColumns.length > 0\"\n            (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">Hidden from table</span>\n\n              <button\n                type=\"button\"\n                *ngIf=\"\n                  (searching | async) === false &&\n                  showAllColumnsVisible(columns)\n                \"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsDisabled(columns)\"\n                (click)=\"enableAllColumns(true)\"\n              >\n                Show all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <div\n                *ngFor=\"let column of columns.disabledColumns; let i = index\"\n                [attr.draggable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n                (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                (dragenter)=\"\n                  $event.preventDefault();\n                  dragOver(i + columns.enabledColumns.length)\n                \"\n                (drop)=\"\n                  drop(\n                    i + columns.enabledColumns.length,\n                    column.stateIndex,\n                    false,\n                    columns.enabledColumns.length\n                  )\n                \"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: { column, columns }\n                  \"\n                ></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </riv-side-sheet>\n  </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n  <div\n    class=\"column scroll-padding\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <div class=\"column\">\n      <ng-container\n        *ngTemplateOutlet=\"reorderIcon; context: { column, columns }\"\n      ></ng-container>\n\n      <riv-highlight\n        [text]=\"column.resolvedName\"\n        [indices]=\"column.highlightIndices\"\n      ></riv-highlight>\n    </div>\n    <div>\n      <riv-menu\n        class=\"hidden\"\n        *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n      >\n        <button\n          type=\"button\"\n          *ngIf=\"column.enabled && !column.pinned\"\n          riv-menu-item\n          (click)=\"\n            columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n          \"\n        >\n          Freeze up to column\n        </button>\n        <button\n          type=\"button\"\n          *ngIf=\"column.enabled && column.pinned\"\n          riv-menu-item\n          (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n        >\n          Un-freeze columns\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'start')\"\n        >\n          Move to start\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'end')\"\n        >\n          Move to end\n        </button>\n        <button\n          *ngIf=\"!column.alwaysVisible\"\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n        >\n          {{ column.enabled ? 'Hide column' : 'Show column' }}\n        </button>\n      </riv-menu>\n\n      <ng-container\n        *ngTemplateOutlet=\"enableIcon; context: { column, columns }\"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #reorderIcon let-column=\"column\" let-columns=\"columns\">\n  <span\n    class=\"reorder\"\n    *ngIf=\"(searching | async) === false\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n  </span>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n  <button\n    *ngIf=\"!column.alwaysVisible\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"\n      column.enabled\n        ? 'Hide column'\n        : disableEnablingColumns(columns)\n        ? limitTooltip()\n        : 'Show column'\n    \"\n    class=\"disable-override\"\n    [class.disabled]=\"!column.enabled\"\n    [disabled]=\"disableEnablingColumn(column, columns)\"\n    [variant]=\"'ghost'\"\n    [size]=\"'small'\"\n    [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n    (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n  ></button>\n\n  <button\n    *ngIf=\"column.alwaysVisible\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"column.tooltipForHideIcon\"\n    [disabled]=\"true\"\n    [variant]=\"'ghost'\"\n    [size]=\"'small'\"\n    [icon]=\"'Lock'\"\n  ></button>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-table-column-settings-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n  Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            type=\"button\"\n            rivButton\n            [variant]=\"'ghost'\"\n            [icon]=\"'X'\"\n            (click)=\"open.next(false); filterQuery.next('')\"\n          ></button>\n        </div>\n        <riv-search\n          [name]=\"'column-search'\"\n          [value]=\"(filterQuery | async) || ''\"\n          (valueChange)=\"filterQuery.next($event)\"\n        ></riv-search>\n        <riv-banner\n          *ngIf=\"\n            columns.disabledColumns.length > 0 &&\n            disableEnablingColumns(columns)\n          \"\n          [iconTooltip]=\"iconLimitTooltip()\"\n        >\n          Column limit reached\n        </riv-banner>\n        <div class=\"columns\">\n          <div *ngIf=\"columns.enabledColumns.length > 0\">\n            <div\n              class=\"column-header drop-zone\"\n              (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n              (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n            >\n              <span class=\"column-header-label\">Shown in table</span>\n              <button\n                type=\"button\"\n                *ngIf=\"(searching | async) === false\"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsEnabled(columns)\"\n                (click)=\"enableAllColumns(false)\"\n              >\n                Hide all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <ng-container\n                *ngFor=\"let column of columns.enabledColumns; let i = index\"\n              >\n                <div\n                  class=\"option drop-zone\"\n                  [attr.draggable]=\"(searching | async) === false\"\n                  [attr.droppable]=\"(searching | async) === false\"\n                  (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                  (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                  (drop)=\"\n                    drop(\n                      i,\n                      column.stateIndex,\n                      true,\n                      columns.enabledColumns.length\n                    )\n                  \"\n                  [class.dragged-over-top]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx > i\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnTemplate;\n                      context: { column, columns }\n                    \"\n                  ></ng-container>\n                </div>\n                <div\n                  *ngIf=\"\n                    column.isLastPinnedColumn && (searching | async) === false\n                  \"\n                  class=\"column scroll-padding\"\n                >\n                  <div class=\"frozen\">\n                    <span class=\"pinned\">\n                      <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n                    </span>\n                    <span>Frozen through here</span>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"'Un-freeze columns'\"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled\"\n                    [variant]=\"'ghost'\"\n                    [size]=\"'small'\"\n                    [icon]=\"'X'\"\n                    (click)=\"\n                      columnFreezeUpTo(\n                        false,\n                        column.stateIndex,\n                        'freezeDivider'\n                      )\n                    \"\n                  ></button>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              columns.enabledColumns.length === 0 &&\n              (searching | async) === false\n            \"\n            class=\"column-header drop-zone\"\n            (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <span>No columns shown</span>\n            <button\n              type=\"button\"\n              rivButton\n              [variant]=\"'ghost'\"\n              (click)=\"resetToDefault()\"\n            >\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              columns.disabledColumns.length > 0 &&\n              ((searching | async) === false ||\n                ((searching | async) && columns.enabledColumns.length > 0))\n            \"\n          ></div>\n          <div\n            *ngIf=\"columns.disabledColumns.length > 0\"\n            (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">Hidden from table</span>\n\n              <button\n                type=\"button\"\n                *ngIf=\"\n                  (searching | async) === false &&\n                  showAllColumnsVisible(columns)\n                \"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsDisabled(columns)\"\n                (click)=\"enableAllColumns(true)\"\n              >\n                Show all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <div\n                *ngFor=\"let column of columns.disabledColumns; let i = index\"\n                [attr.draggable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n                (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                (dragenter)=\"\n                  $event.preventDefault();\n                  dragOver(i + columns.enabledColumns.length)\n                \"\n                (drop)=\"\n                  drop(\n                    i + columns.enabledColumns.length,\n                    column.stateIndex,\n                    false,\n                    columns.enabledColumns.length\n                  )\n                \"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: { column, columns }\n                  \"\n                ></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </riv-side-sheet>\n  </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n  <div\n    class=\"column scroll-padding\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <div class=\"column\">\n      <span\n        class=\"reorder\"\n        *ngIf=\"(searching | async) === false\"\n        [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      >\n        <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n      </span>\n      <riv-highlight\n        [text]=\"column.resolvedName\"\n        [indices]=\"column.highlightIndices\"\n      ></riv-highlight>\n    </div>\n    <div>\n      <riv-menu\n        class=\"hidden\"\n        *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n      >\n        <button\n          type=\"button\"\n          *ngIf=\"column.enabled && !column.pinned\"\n          riv-menu-item\n          (click)=\"\n            columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n          \"\n        >\n          Freeze up to column\n        </button>\n        <button\n          type=\"button\"\n          *ngIf=\"column.enabled && column.pinned\"\n          riv-menu-item\n          (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n        >\n          Un-freeze columns\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'start')\"\n        >\n          Move to start\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'end')\"\n        >\n          Move to end\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n        >\n          {{ column.enabled ? 'Hide column' : 'Show column' }}\n        </button>\n      </riv-menu>\n      <button\n        type=\"button\"\n        rivButton\n        [rivTooltip]=\"\n          column.enabled\n            ? 'Hide column'\n            : disableEnablingColumns(columns)\n            ? limitTooltip()\n            : 'Show column'\n        \"\n        class=\"disable-override\"\n        [class.disabled]=\"!column.enabled\"\n        [disabled]=\"disableEnablingColumn(column, columns)\"\n        [variant]=\"'ghost'\"\n        [size]=\"'small'\"\n        [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n        (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n      ></button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"] }]
+            args: [{ selector: 'riv-table-column-settings-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n  Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            type=\"button\"\n            rivButton\n            [variant]=\"'ghost'\"\n            [icon]=\"'X'\"\n            (click)=\"open.next(false); filterQuery.next('')\"\n          ></button>\n        </div>\n        <riv-search\n          [name]=\"'column-search'\"\n          [value]=\"(filterQuery | async) || ''\"\n          (valueChange)=\"filterQuery.next($event)\"\n        ></riv-search>\n        <riv-banner\n          *ngIf=\"\n            columns.disabledColumns.length > 0 &&\n            disableEnablingColumns(columns)\n          \"\n          [iconTooltip]=\"iconLimitTooltip()\"\n        >\n          Column limit reached\n        </riv-banner>\n        <div class=\"columns\">\n          <div *ngIf=\"columns.enabledColumns.length > 0\">\n            <div\n              class=\"column-header drop-zone\"\n              (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n              (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n            >\n              <span class=\"column-header-label\">Shown in table</span>\n              <button\n                type=\"button\"\n                *ngIf=\"(searching | async) === false\"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsEnabled(columns)\"\n                (click)=\"enableAllColumns(false)\"\n              >\n                Hide all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <ng-container\n                *ngFor=\"let column of columns.enabledColumns; let i = index\"\n              >\n                <div\n                  class=\"option drop-zone\"\n                  [attr.draggable]=\"(searching | async) === false\"\n                  [attr.droppable]=\"(searching | async) === false\"\n                  (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                  (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                  (drop)=\"\n                    drop(\n                      i,\n                      column.stateIndex,\n                      true,\n                      columns.enabledColumns.length\n                    )\n                  \"\n                  [class.dragged-over-top]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx > i\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnTemplate;\n                      context: { column, columns }\n                    \"\n                  ></ng-container>\n                </div>\n                <div\n                  *ngIf=\"\n                    column.isLastPinnedColumn && (searching | async) === false\n                  \"\n                  class=\"column scroll-padding\"\n                >\n                  <div class=\"frozen\">\n                    <span class=\"pinned\">\n                      <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n                    </span>\n                    <span>Frozen through here</span>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"'Un-freeze columns'\"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled\"\n                    [variant]=\"'ghost'\"\n                    [size]=\"'small'\"\n                    [icon]=\"'X'\"\n                    (click)=\"\n                      columnFreezeUpTo(\n                        false,\n                        column.stateIndex,\n                        'freezeDivider'\n                      )\n                    \"\n                  ></button>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              columns.enabledColumns.length === 0 &&\n              (searching | async) === false\n            \"\n            class=\"column-header drop-zone\"\n            (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <span>No columns shown</span>\n            <button\n              type=\"button\"\n              rivButton\n              [variant]=\"'ghost'\"\n              (click)=\"resetToDefault()\"\n            >\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              columns.disabledColumns.length > 0 &&\n              ((searching | async) === false ||\n                ((searching | async) && columns.enabledColumns.length > 0))\n            \"\n          ></div>\n          <div\n            *ngIf=\"columns.disabledColumns.length > 0\"\n            (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">Hidden from table</span>\n\n              <button\n                type=\"button\"\n                *ngIf=\"\n                  (searching | async) === false &&\n                  showAllColumnsVisible(columns)\n                \"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsDisabled(columns)\"\n                (click)=\"enableAllColumns(true)\"\n              >\n                Show all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <div\n                *ngFor=\"let column of columns.disabledColumns; let i = index\"\n                [attr.draggable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n                (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                (dragenter)=\"\n                  $event.preventDefault();\n                  dragOver(i + columns.enabledColumns.length)\n                \"\n                (drop)=\"\n                  drop(\n                    i + columns.enabledColumns.length,\n                    column.stateIndex,\n                    false,\n                    columns.enabledColumns.length\n                  )\n                \"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: { column, columns }\n                  \"\n                ></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </riv-side-sheet>\n  </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n  <div\n    class=\"column scroll-padding\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <div class=\"column\">\n      <ng-container\n        *ngTemplateOutlet=\"reorderIcon; context: { column, columns }\"\n      ></ng-container>\n\n      <riv-highlight\n        [text]=\"column.resolvedName\"\n        [indices]=\"column.highlightIndices\"\n      ></riv-highlight>\n    </div>\n    <div>\n      <riv-menu\n        class=\"hidden\"\n        *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n      >\n        <button\n          type=\"button\"\n          *ngIf=\"column.enabled && !column.pinned\"\n          riv-menu-item\n          (click)=\"\n            columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n          \"\n        >\n          Freeze up to column\n        </button>\n        <button\n          type=\"button\"\n          *ngIf=\"column.enabled && column.pinned\"\n          riv-menu-item\n          (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n        >\n          Un-freeze columns\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'start')\"\n        >\n          Move to start\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'end')\"\n        >\n          Move to end\n        </button>\n        <button\n          *ngIf=\"!column.alwaysVisible\"\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n        >\n          {{ column.enabled ? 'Hide column' : 'Show column' }}\n        </button>\n      </riv-menu>\n\n      <ng-container\n        *ngTemplateOutlet=\"enableIcon; context: { column, columns }\"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #reorderIcon let-column=\"column\" let-columns=\"columns\">\n  <span\n    class=\"reorder\"\n    *ngIf=\"(searching | async) === false\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n  </span>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n  <button\n    *ngIf=\"!column.alwaysVisible\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"\n      column.enabled\n        ? 'Hide column'\n        : disableEnablingColumns(columns)\n        ? limitTooltip()\n        : 'Show column'\n    \"\n    class=\"disable-override\"\n    [class.disabled]=\"!column.enabled\"\n    [disabled]=\"disableEnablingColumn(column, columns)\"\n    [variant]=\"'ghost'\"\n    [size]=\"'small'\"\n    [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n    (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n  ></button>\n\n  <button\n    *ngIf=\"column.alwaysVisible\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"column.tooltipForHideIcon\"\n    [disabled]=\"true\"\n    [variant]=\"'ghost'\"\n    [size]=\"'small'\"\n    [icon]=\"'Lock'\"\n  ></button>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"] }]
         }], propDecorators: { manager: [{
                 type: Input
             }], anchor: [{
@@ -18233,6 +18372,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         SelectComponent,
         SelectNodeComponent,
         SentenceCasePipe,
+        SettingRowComponent,
         SideSheetComponent,
         SimpleSelectComponent,
         SimpleTabComponent,
@@ -18341,6 +18481,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         SearchSelectComponent,
         SelectComponent,
         SentenceCasePipe,
+        SettingRowComponent,
         SideSheetComponent,
         SimpleSelectComponent,
         SimpleTabComponent,
@@ -18457,6 +18598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         SelectComponent,
                         SelectNodeComponent,
                         SentenceCasePipe,
+                        SettingRowComponent,
                         SideSheetComponent,
                         SimpleSelectComponent,
                         SimpleTabComponent,
@@ -18568,6 +18710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         SearchSelectComponent,
                         SelectComponent,
                         SentenceCasePipe,
+                        SettingRowComponent,
                         SideSheetComponent,
                         SimpleSelectComponent,
                         SimpleTabComponent,
@@ -18616,5 +18759,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardActionsComponent, CardCheckboxComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardLinkComponent, CardMediaComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, EditableHeadingComponent, FilterChipComponent, FormDialogComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PermissionPickerComponent, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SideSheetComponent, SimpleSelectComponent, SimpleTabComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SimpleTabsComponent, SizeDirective, SmallCurrencyPipe, SmallNumberPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableCollapseAllComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
+export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardActionsComponent, CardCheckboxComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardLinkComponent, CardMediaComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, EditableHeadingComponent, FilterChipComponent, FormDialogComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PermissionPickerComponent, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SettingRowComponent, SideSheetComponent, SimpleSelectComponent, SimpleTabComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SimpleTabsComponent, SizeDirective, SmallCurrencyPipe, SmallNumberPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableCollapseAllComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
 //# sourceMappingURL=rivet-health-design-system.mjs.map