@rivet-health/design-system 40.40.0 → 40.41.0

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

@@ -8846,6 +8846,24 @@ var TableColumnHelpers;
         return allColumns;
     }
     TableColumnHelpers.getColumnSettingsColumnList = getColumnSettingsColumnList;
+    function createUnavailableColumns(unvailableColumnKeys) {
+        return unvailableColumnKeys.map(columnKey => {
+            return {
+                key: columnKey,
+                resolvedName: columnKey,
+                enabled: false,
+                pinned: false,
+                isLastPinnedColumn: false,
+                alwaysVisible: false,
+                alwaysPinned: false,
+                preferredWidth: 'auto',
+                highlightIndices: [],
+                stateIndex: -1,
+                isUnavailable: true,
+            };
+        });
+    }
+    TableColumnHelpers.createUnavailableColumns = createUnavailableColumns;
 })(TableColumnHelpers || (TableColumnHelpers = {}));
 
 var TableResultHelpers;
@@ -9927,9 +9945,9 @@ var RivTable;
         return Object.assign(Object.assign({}, coreState.query.pagination), { previous: TablePaginationHelpers.getPreviousPage(coreState), pages: TablePaginationHelpers.getPages(coreState), next: TablePaginationHelpers.getNextPage(coreState), pageCount: TablePaginationHelpers.getPageCount(coreState), showControls: TablePaginationHelpers.getShowPaginationControls(coreState), pageRowStart: TablePaginationHelpers.getPageRowStart(coreState), pageRowEnd: TablePaginationHelpers.getPageRowEnd(coreState) });
     }
     function derivedFullStateDisplay(props, partialDisplay = {}) {
-        var _a;
+        var _a, _b, _c;
         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);
+        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, unavailableColumnKeys: (_b = options === null || options === void 0 ? void 0 : options.unavailableColumnKeys) !== null && _b !== void 0 ? _b : [], unavailableFolderTitle: (_c = options === null || options === void 0 ? void 0 : options.unavailableFolderTitle) !== null && _c !== void 0 ? _c : 'Unavailable' }), partialDisplay);
     }
     function derivedFullStateSelection(coreState, options) {
         var _a;
@@ -10568,6 +10586,7 @@ class TableColumnSettingsSideSheetComponent {
         this.draggedColumnIdx = null;
         this.draggedColumnKey = null;
         this.draggedOverColumnIdx = null;
+        this.unavailableFolderCollapsed = false;
     }
     ngOnInit() {
         this.columnList = combineLatest([
@@ -10579,10 +10598,17 @@ class TableColumnSettingsSideSheetComponent {
                     threshold: 0,
                     includeMatches: true,
                 });
-                return { fuse, allColumns };
+                const unavailableColumns = TableColumnHelpers.createUnavailableColumns(s.display.unavailableColumnKeys);
+                const unavailableFolderTitle = s.display.unavailableFolderTitle;
+                return {
+                    fuse,
+                    allColumns,
+                    unavailableColumns,
+                    unavailableFolderTitle,
+                };
             })),
             this.filterQuery,
-        ]).pipe(map(([{ fuse, allColumns }, filterQuery]) => {
+        ]).pipe(map(([{ fuse, allColumns, unavailableColumns, unavailableFolderTitle }, filterQuery,]) => {
             if (filterQuery) {
                 const matches = fuse.search(filterQuery).map(match => {
                     var _a;
@@ -10596,6 +10622,8 @@ class TableColumnSettingsSideSheetComponent {
                 return {
                     enabledColumns,
                     disabledColumns,
+                    unavailableColumns: unavailableColumns,
+                    unavailableFolderTitle: unavailableFolderTitle,
                 };
             }
             const allVisibleColumns = allColumns.map(column => (Object.assign(Object.assign({}, column), { highlightIndices: [] })));
@@ -10604,6 +10632,8 @@ class TableColumnSettingsSideSheetComponent {
             return {
                 enabledColumns: enabledColumns,
                 disabledColumns: disabledColumns,
+                unavailableColumns: unavailableColumns,
+                unavailableFolderTitle: unavailableFolderTitle,
             };
         }));
         document.addEventListener('dragover', this.handleDragOver);
@@ -10723,12 +10753,24 @@ class TableColumnSettingsSideSheetComponent {
     disabledColumnsWithOffset(index) {
         return index;
     }
+    hasDisabledColumnsSection(columns) {
+        return columns.disabledColumns.length > 0;
+    }
+    hasEnabledColumnsSection(columns) {
+        return columns.enabledColumns.length > 0;
+    }
+    hasNoColumnsShownSection(columns, searching) {
+        return columns.enabledColumns.length === 0 && searching === false;
+    }
+    hasUnavailableColumnsSection(columns, searching) {
+        return columns.unavailableColumns.length > 0 && searching === false;
+    }
 }
 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\n      [label]=\"'Columns'\"\n      (close)=\"open.next(false); filterQuery.next('')\"\n    >\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\"\n                  [attr.draggable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [attr.droppable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [class.drop-zone]=\"!column.alwaysPinned\"\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                    !column.alwaysPinned\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i &&\n                    !column.alwaysPinned\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]=\"\n                      !column.alwaysPinned\n                        ? 'Un-freeze columns'\n                        : 'The above columns cannot be unfrozen'\n                    \"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled || column.alwaysPinned\"\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                  !column.alwaysPinned\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns) &&\n                  !column.alwaysPinned\n                \"\n                [class.drop-zone]=\"\n                  !disableEnablingColumns(columns) && !column.alwaysPinned\n                \"\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=\"\n          (column.enabled || !disableEnablingColumns(columns)) &&\n          !column.alwaysPinned\n        \"\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  <ng-container *ngIf=\"(searching | async) === false\">\n    <span\n      *ngIf=\"!column.alwaysPinned\"\n      class=\"reorder\"\n      [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n    </span>\n\n    <span\n      *ngIf=\"column.alwaysPinned\"\n      class=\"reorder-locked\"\n      [class.disabled]=\"true\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n  <button\n    *ngIf=\"!column.alwaysVisible && !column.alwaysPinned\"\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 || column.alwaysPinned\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"column.tooltipForHideIcon\"\n    [disabled]=\"true\"\n    [class.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}.reorder-locked{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);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", "label"], 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\n      [label]=\"'Columns'\"\n      (close)=\"open.next(false); filterQuery.next('')\"\n    >\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=\"hasEnabledColumnsSection(columns)\">\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\"\n                  [attr.draggable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [attr.droppable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [class.drop-zone]=\"!column.alwaysPinned\"\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                    !column.alwaysPinned\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i &&\n                    !column.alwaysPinned\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]=\"\n                      !column.alwaysPinned\n                        ? 'Un-freeze columns'\n                        : 'The above columns cannot be unfrozen'\n                    \"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled || column.alwaysPinned\"\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              hasNoColumnsShownSection(columns, (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              hasDisabledColumnsSection(columns) &&\n              (hasEnabledColumnsSection(columns) ||\n                hasNoColumnsShownSection(columns, (searching | async) ?? false))\n            \"\n          ></div>\n          <div\n            *ngIf=\"hasDisabledColumnsSection(columns)\"\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                  !column.alwaysPinned\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns) &&\n                  !column.alwaysPinned\n                \"\n                [class.drop-zone]=\"\n                  !disableEnablingColumns(columns) && !column.alwaysPinned\n                \"\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            class=\"divider\"\n            *ngIf=\"\n              hasUnavailableColumnsSection(\n                columns,\n                (searching | async) ?? false\n              ) &&\n              (hasDisabledColumnsSection(columns) ||\n                hasEnabledColumnsSection(columns) ||\n                hasNoColumnsShownSection(columns, (searching | async) ?? false))\n            \"\n          ></div>\n          <div\n            *ngIf=\"\n              hasUnavailableColumnsSection(\n                columns,\n                (searching | async) ?? false\n              )\n            \"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">\n                {{ columns.unavailableFolderTitle }}\n              </span>\n\n              <button\n                type=\"button\"\n                rivButton\n                class=\"chevron\"\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"\n                  unavailableFolderCollapsed ? 'ChevronDown' : 'ChevronUp'\n                \"\n                (click)=\"\n                  unavailableFolderCollapsed = !unavailableFolderCollapsed\n                \"\n              ></button>\n            </div>\n\n            <div *ngIf=\"!unavailableFolderCollapsed\" class=\"options\">\n              <div\n                *ngFor=\"let column of columns.unavailableColumns; let i = index\"\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\" [class.unavailable]=\"column.isUnavailable\">\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=\"\n          (column.enabled || !disableEnablingColumns(columns)) &&\n          !column.alwaysPinned &&\n          !column.isUnavailable\n        \"\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  <ng-container *ngIf=\"(searching | async) === false\">\n    <span\n      *ngIf=\"!column.alwaysPinned && !column.isUnavailable\"\n      class=\"reorder\"\n      [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n    </span>\n\n    <span\n      *ngIf=\"column.alwaysPinned || column.isUnavailable\"\n      class=\"reorder-locked\"\n      [class.disabled]=\"true\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n  <button\n    *ngIf=\"\n      !column.alwaysVisible && !column.alwaysPinned && !column.isUnavailable\n    \"\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 || column.alwaysPinned || column.isUnavailable\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"column.tooltipForHideIcon\"\n    [disabled]=\"true\"\n    [class.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,.column.unavailable{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}.reorder-locked{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);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)}.chevron{cursor:pointer}\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", "label"], 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\n      [label]=\"'Columns'\"\n      (close)=\"open.next(false); filterQuery.next('')\"\n    >\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\"\n                  [attr.draggable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [attr.droppable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [class.drop-zone]=\"!column.alwaysPinned\"\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                    !column.alwaysPinned\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i &&\n                    !column.alwaysPinned\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]=\"\n                      !column.alwaysPinned\n                        ? 'Un-freeze columns'\n                        : 'The above columns cannot be unfrozen'\n                    \"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled || column.alwaysPinned\"\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                  !column.alwaysPinned\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns) &&\n                  !column.alwaysPinned\n                \"\n                [class.drop-zone]=\"\n                  !disableEnablingColumns(columns) && !column.alwaysPinned\n                \"\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=\"\n          (column.enabled || !disableEnablingColumns(columns)) &&\n          !column.alwaysPinned\n        \"\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  <ng-container *ngIf=\"(searching | async) === false\">\n    <span\n      *ngIf=\"!column.alwaysPinned\"\n      class=\"reorder\"\n      [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n    </span>\n\n    <span\n      *ngIf=\"column.alwaysPinned\"\n      class=\"reorder-locked\"\n      [class.disabled]=\"true\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n  <button\n    *ngIf=\"!column.alwaysVisible && !column.alwaysPinned\"\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 || column.alwaysPinned\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"column.tooltipForHideIcon\"\n    [disabled]=\"true\"\n    [class.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}.reorder-locked{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);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\n      [label]=\"'Columns'\"\n      (close)=\"open.next(false); filterQuery.next('')\"\n    >\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=\"hasEnabledColumnsSection(columns)\">\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\"\n                  [attr.draggable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [attr.droppable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [class.drop-zone]=\"!column.alwaysPinned\"\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                    !column.alwaysPinned\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i &&\n                    !column.alwaysPinned\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]=\"\n                      !column.alwaysPinned\n                        ? 'Un-freeze columns'\n                        : 'The above columns cannot be unfrozen'\n                    \"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled || column.alwaysPinned\"\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              hasNoColumnsShownSection(columns, (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              hasDisabledColumnsSection(columns) &&\n              (hasEnabledColumnsSection(columns) ||\n                hasNoColumnsShownSection(columns, (searching | async) ?? false))\n            \"\n          ></div>\n          <div\n            *ngIf=\"hasDisabledColumnsSection(columns)\"\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                  !column.alwaysPinned\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns) &&\n                  !column.alwaysPinned\n                \"\n                [class.drop-zone]=\"\n                  !disableEnablingColumns(columns) && !column.alwaysPinned\n                \"\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            class=\"divider\"\n            *ngIf=\"\n              hasUnavailableColumnsSection(\n                columns,\n                (searching | async) ?? false\n              ) &&\n              (hasDisabledColumnsSection(columns) ||\n                hasEnabledColumnsSection(columns) ||\n                hasNoColumnsShownSection(columns, (searching | async) ?? false))\n            \"\n          ></div>\n          <div\n            *ngIf=\"\n              hasUnavailableColumnsSection(\n                columns,\n                (searching | async) ?? false\n              )\n            \"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">\n                {{ columns.unavailableFolderTitle }}\n              </span>\n\n              <button\n                type=\"button\"\n                rivButton\n                class=\"chevron\"\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"\n                  unavailableFolderCollapsed ? 'ChevronDown' : 'ChevronUp'\n                \"\n                (click)=\"\n                  unavailableFolderCollapsed = !unavailableFolderCollapsed\n                \"\n              ></button>\n            </div>\n\n            <div *ngIf=\"!unavailableFolderCollapsed\" class=\"options\">\n              <div\n                *ngFor=\"let column of columns.unavailableColumns; let i = index\"\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\" [class.unavailable]=\"column.isUnavailable\">\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=\"\n          (column.enabled || !disableEnablingColumns(columns)) &&\n          !column.alwaysPinned &&\n          !column.isUnavailable\n        \"\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  <ng-container *ngIf=\"(searching | async) === false\">\n    <span\n      *ngIf=\"!column.alwaysPinned && !column.isUnavailable\"\n      class=\"reorder\"\n      [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n    </span>\n\n    <span\n      *ngIf=\"column.alwaysPinned || column.isUnavailable\"\n      class=\"reorder-locked\"\n      [class.disabled]=\"true\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n  <button\n    *ngIf=\"\n      !column.alwaysVisible && !column.alwaysPinned && !column.isUnavailable\n    \"\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 || column.alwaysPinned || column.isUnavailable\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"column.tooltipForHideIcon\"\n    [disabled]=\"true\"\n    [class.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,.column.unavailable{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}.reorder-locked{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);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)}.chevron{cursor:pointer}\n"] }]
         }], propDecorators: { manager: [{
                 type: Input
             }], anchor: [{