@rivet-health/design-system 40.35.2 → 40.37.0

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

@@ -6351,6 +6351,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.
@@ -8432,10 +8536,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'
@@ -8547,11 +8651,21 @@ 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;
-        return Object.assign(Object.assign({}, state), { display: Object.assign(Object.assign({}, state.display), { columnSettings: orderIntentionally(allColumns.map(c => (Object.assign(Object.assign({}, c), { enabled: enabled, 
-                    // Unpin if being unchecked
-                    pinned: !enabled ? false : c.pinned }))), columnNameMap) }) });
+        }
+        const updatedColumnSettings = allColumns.map(currentColumnSettings => {
+            var _a;
+            const currentColumnMetadata = columns.get(currentColumnSettings.key);
+            const isColumnAlwaysVisible = (_a = currentColumnMetadata === null || currentColumnMetadata === void 0 ? void 0 : currentColumnMetadata.alwaysVisible) !== null && _a !== void 0 ? _a : false;
+            if (isColumnAlwaysVisible) {
+                return Object.assign(Object.assign({}, currentColumnSettings), { enabled: true });
+            }
+            return Object.assign(Object.assign({}, currentColumnSettings), { enabled: enabled, 
+                // Unpin if being unchecked
+                pinned: !enabled ? false : currentColumnSettings.pinned });
+        });
+        return Object.assign(Object.assign({}, state), { display: Object.assign(Object.assign({}, state.display), { columnSettings: orderIntentionally(updatedColumnSettings, columnNameMap) }) });
     }
     TableColumnHelpers.enableAllColumns = enableAllColumns;
     function changeColumnWidth(state, columns, columnNameMap, column, preferredWidth) {
@@ -8577,10 +8691,29 @@ 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) => {
+            var _a, _b;
+            const nextColumnPinned = i + 2 <= columnsLength
+                ? state.display.allColumns[i + 1].pinned
+                : false;
+            const currentColumnMetadata = allColumnMetadata.find(metadata => metadata.key === column.key);
+            return Object.assign(Object.assign({}, column), { resolvedName: (_a = state.display.columnNameMap.get(column.key)) !== null && _a !== void 0 ? _a : column.key, stateIndex: i, isLastPinnedColumn: column.pinned && !nextColumnPinned, alwaysVisible: (_b = currentColumnMetadata === null || currentColumnMetadata === void 0 ? void 0 : currentColumnMetadata.alwaysVisible) !== null && _b !== void 0 ? _b : false, tooltipForHideIcon: currentColumnMetadata === null || currentColumnMetadata === void 0 ? void 0 : currentColumnMetadata.tooltipForHideIcon, highlightIndices: [] });
+        });
+        return allColumns;
+    }
+    TableColumnHelpers.getColumnSettingsColumnList = getColumnSettingsColumnList;
 })(TableColumnHelpers || (TableColumnHelpers = {}));
 
 var TableResultHelpers;
@@ -9384,7 +9517,8 @@ var RivTable;
         const csvExportAllowed = !((options === null || options === void 0 ? void 0 : options.getRowSpanForCell) || (options === null || options === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : options.allowSelection));
+            const resolvedColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!(options === null || options === void 0 ? void 0 : options.allowSelection), 'enabled');
+            const resolvedDisabledColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!(options === null || options === void 0 ? void 0 : options.allowSelection), 'disabled');
             if (TableResultHelpers.isGroupResult(s.result)) {
                 return deriveFullStateFromGroupResult({
                     s,
@@ -9394,6 +9528,7 @@ var RivTable;
                     pluralEntityName,
                     columnNameMap,
                     resolvedColumns,
+                    resolvedDisabledColumns,
                     searchableColumnMap,
                     csvExportAllowed,
                     options,
@@ -9408,6 +9543,7 @@ var RivTable;
                     pluralEntityName,
                     columnNameMap,
                     resolvedColumns,
+                    resolvedDisabledColumns,
                     searchableColumnMap,
                     csvExportAllowed,
                     options,
@@ -9422,6 +9558,7 @@ var RivTable;
                     pluralEntityName,
                     columnNameMap,
                     resolvedColumns,
+                    resolvedDisabledColumns,
                     searchableColumnMap,
                     csvExportAllowed,
                     options,
@@ -9443,7 +9580,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 === null || options === void 0 ? void 0 : options.getRowSpanForCell) {
             // eslint-disable-next-line no-console
             console.warn('Heads up! Custom row spans are not supported for grouped tables.');
@@ -9474,7 +9611,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 }) => { var _a; return (_a = columnNameMap.get(key)) !== null && _a !== void 0 ? _a : key; }));
                 if (groupCellFormatter) {
@@ -9506,13 +9643,14 @@ var RivTable;
                 pluralEntityName: pluralEntityName,
                 columnNameMap: columnNameMap,
                 resolvedColumns: resolvedColumns,
+                resolvedDisabledColumns: resolvedDisabledColumns,
                 searchableColumnMap: searchableColumnMap,
                 csvExportAllowed: csvExportAllowed,
                 options: options,
             }), selection: derivedFullStateSelection(s, options), result: Object.assign(Object.assign({}, stateResult), { isGrouped: true, resultType: 'table-grouping', rowGroups, rows: rowGroups.flatMap(group => group.rows), csvData, csvFilename: TableResultHelpers.getCsvFilename(pluralEntityName, options) }) });
     }
     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 === null || options === void 0 ? void 0 : options.getRowSpanForCell) {
             // eslint-disable-next-line no-console
             console.warn('Heads up! Custom row spans are not supported for tables with nested data.');
@@ -9546,7 +9684,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 }) => { var _a; return (_a = columnNameMap.get(key)) !== null && _a !== void 0 ? _a : key; }));
                 const allRows = TableResultHelpers.getAllRowsFromResult(dataSet);
@@ -9570,13 +9708,14 @@ var RivTable;
                 pluralEntityName: pluralEntityName,
                 columnNameMap: columnNameMap,
                 resolvedColumns: resolvedColumns,
+                resolvedDisabledColumns: resolvedDisabledColumns,
                 searchableColumnMap: searchableColumnMap,
                 csvExportAllowed: csvExportAllowed,
                 options: options,
             }), selection: derivedFullStateSelection(s, options), result: Object.assign(Object.assign({}, stateResult), { rows: [], isGrouped: false, resultType: 'nested-rows', nestedHeaderRows: fullNestedHeaderRows, csvData, csvFilename: TableResultHelpers.getCsvFilename(pluralEntityName, options) }) });
     }
     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 => (Object.assign(Object.assign({}, row), { rowLink: (options === null || options === void 0 ? void 0 : options.rowLink) ? options.rowLink(row) : null, selected: TableSelectionHelpers.isRowSelected(s, row.id), isCollapsed: false })));
         const cellRowSpanCache = TableDisplayHelpers.memoizedCellRowSpan(s, resolvedColumns, options);
         const cellRowSpan = (rowIndex, column) => { var _a, _b; return (_b = (_a = cellRowSpanCache === null || cellRowSpanCache === void 0 ? void 0 : cellRowSpanCache.get(column)) === null || _a === void 0 ? void 0 : _a[rowIndex]) !== null && _b !== void 0 ? _b : 1; };
@@ -9603,7 +9742,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 }) => { var _a; return (_a = columnNameMap.get(key)) !== null && _a !== void 0 ? _a : key; }));
                 for (const record of dataSet.currentPageData) {
@@ -9627,6 +9766,7 @@ var RivTable;
                 pluralEntityName: pluralEntityName,
                 columnNameMap: columnNameMap,
                 resolvedColumns: resolvedColumns,
+                resolvedDisabledColumns: resolvedDisabledColumns,
                 searchableColumnMap: searchableColumnMap,
                 csvExportAllowed: csvExportAllowed,
                 options: options,
@@ -9656,8 +9796,8 @@ var RivTable;
     }
     function derivedFullStateDisplay(props, partialDisplay = {}) {
         var _a;
-        const { coreState, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
-        return Object.assign(Object.assign(Object.assign({}, coreState.display), { columns: resolvedColumns, allColumns: TableColumnHelpers.getAllColumns(coreState, columns, columnNameMap), columnNameMap: columnNameMap, searchableColumnMap: searchableColumnMap, zeroStateMessage: TableDisplayHelpers.getZeroStateMessage(coreState, pluralEntityName), columnsAreFreezable: !!(options === null || options === void 0 ? void 0 : options.columnsAreFreezable), columnsAreHideable: !!(options === null || options === void 0 ? void 0 : options.columnsAreHideable), columnsAreReorderable: (_a = options === null || options === void 0 ? void 0 : options.columnsAreReorderable) !== null && _a !== void 0 ? _a : true, rowsAreGrayed: !!(options === null || options === void 0 ? void 0 : options.rowsAreGrayed), customSummaryRow: !!(options === null || options === void 0 ? void 0 : options.customSummaryRow), csvExportAllowed: csvExportAllowed, enabledCount: resolvedColumns.length, hidePageSizeSelector: !!(options === null || options === void 0 ? void 0 : options.hidePageSizeSelector), cellRowSpan: (_i, _column) => 1, needsRightBorder: () => false }), partialDisplay);
+        const { coreState, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
+        return Object.assign(Object.assign(Object.assign({}, coreState.display), { columns: resolvedColumns, disabledColumns: resolvedDisabledColumns, allColumns: TableColumnHelpers.getAllColumns(coreState, columns, columnNameMap), columnNameMap: columnNameMap, searchableColumnMap: searchableColumnMap, zeroStateMessage: TableDisplayHelpers.getZeroStateMessage(coreState, pluralEntityName), columnsAreFreezable: !!(options === null || options === void 0 ? void 0 : options.columnsAreFreezable), columnsAreHideable: !!(options === null || options === void 0 ? void 0 : options.columnsAreHideable), columnsAreReorderable: (_a = options === null || options === void 0 ? void 0 : options.columnsAreReorderable) !== null && _a !== void 0 ? _a : true, rowsAreGrayed: !!(options === null || options === void 0 ? void 0 : options.rowsAreGrayed), customSummaryRow: !!(options === null || options === void 0 ? void 0 : options.customSummaryRow), csvExportAllowed: csvExportAllowed, enabledCount: resolvedColumns.length, hidePageSizeSelector: !!(options === null || options === void 0 ? void 0 : options.hidePageSizeSelector), cellRowSpan: (_i, _column) => 1, needsRightBorder: () => false }), partialDisplay);
     }
     function derivedFullStateSelection(coreState, options) {
         var _a;
@@ -10300,14 +10440,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) => {
-                    var _a;
-                    const nextColumnPinned = i + 2 <= columnsLength
-                        ? s.display.allColumns[i + 1].pinned
-                        : false;
-                    return Object.assign(Object.assign({}, column), { resolvedName: (_a = s.display.columnNameMap.get(column.key)) !== null && _a !== void 0 ? _a : column.key, stateIndex: i, isLastPinnedColumn: column.pinned && !nextColumnPinned });
-                });
+                const allColumns = TableColumnHelpers.getColumnSettingsColumnList(s);
                 const fuse = new Fuse(allColumns, {
                     keys: ['resolvedName'],
                     ignoreLocation: true,
@@ -10333,9 +10466,9 @@ class TableColumnSettingsSideSheetComponent {
                     disabledColumns,
                 };
             }
-            const allVisableColumns = allColumns.map(column => (Object.assign(Object.assign({}, column), { highlightIndices: [] })));
-            const enabledColumns = allVisableColumns.filter(column => column.enabled);
-            const disabledColumns = allVisableColumns.filter(column => !column.enabled);
+            const allVisibleColumns = allColumns.map(column => (Object.assign(Object.assign({}, column), { highlightIndices: [] })));
+            const enabledColumns = allVisibleColumns.filter(column => column.enabled);
+            const disabledColumns = allVisibleColumns.filter(column => !column.enabled);
             return {
                 enabledColumns: enabledColumns,
                 disabledColumns: disabledColumns,
@@ -10460,10 +10593,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: [{
@@ -17634,6 +17767,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         SelectComponent,
         SelectNodeComponent,
         SentenceCasePipe,
+        SettingRowComponent,
         SideSheetComponent,
         SimpleSelectComponent,
         SimpleTabComponent,
@@ -17742,6 +17876,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         SearchSelectComponent,
         SelectComponent,
         SentenceCasePipe,
+        SettingRowComponent,
         SideSheetComponent,
         SimpleSelectComponent,
         SimpleTabComponent,
@@ -17858,6 +17993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         SelectComponent,
                         SelectNodeComponent,
                         SentenceCasePipe,
+                        SettingRowComponent,
                         SideSheetComponent,
                         SimpleSelectComponent,
                         SimpleTabComponent,
@@ -17969,6 +18105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         SearchSelectComponent,
                         SelectComponent,
                         SentenceCasePipe,
+                        SettingRowComponent,
                         SideSheetComponent,
                         SimpleSelectComponent,
                         SimpleTabComponent,
@@ -18017,5 +18154,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