@rivet-health/design-system 40.44.2 → 40.44.4

package/esm2022/lib/table/table/table/table.component.mjs

@@ -328,10 +328,10 @@ export class TableComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, selector: "riv-table", inputs: { manager: "manager" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:copy": "onCopy($event)" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary"], descendants: true }, { propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selection"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: ["subheader"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n    <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"position\"\n        [isModal]=\"false\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [preferredPosition]=\"'top-right'\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n        ></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n  <div class=\"loading-container\">\n    <div class=\"header\" *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </div>\n    <riv-loading-cover\n      class=\"container-loader-wrapper\"\n      [loading]=\"s.load.loading\"\n      [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n    >\n      <div\n        class=\"container\"\n        tabindex=\"0\"\n        [ngClass]=\"{\n          'container-ungrouped': !isGroupResult(s.result),\n          'has-header': !isGroupResult(s.result) && headerTemplate,\n          'without-columns': s.display.columns.length === 0\n        }\"\n        (rivClientSize)=\"containerSize.next($event)\"\n      >\n        <riv-zero-state\n          *ngIf=\"s.display.columns.length === 0\"\n          class=\"no-columns-message\"\n          [message]=\"\n            'All columns disabled. Enable at least one column to view table data.'\n          \"\n        ></riv-zero-state>\n\n        <!--\n          An overview of the templates we are using:\n\n          headersAndTableBody - helps us create multiple tables for grouped results\n            headerRowWithSubRows - helps us create header rows for nested with header results\n              nestedRowWithSubRows - helps us create nested rows for the nested result types\n                rowWrappedWithRowLink - helps us add a rowlink to a row\n                  rowBody - displays the row content\n        -->\n\n        <!-- When we are grouped, we show one table per group -->\n        <ng-container\n          *ngIf=\"\n            isGroupResult(s.result) && s.result.resultType === 'table-grouping'\n          \"\n        >\n          <ng-container\n            *ngFor=\"\n              let group of s.result.rowGroups;\n              trackBy: trackByGroup;\n              let last = last\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                headersAndTableBody;\n                context: { group: group, last: last }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!-- When we aren't grouped, we show one table -->\n        <ng-container\n          *ngIf=\"isRegularResult(s.result) || isNestedResult(s.result)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              headersAndTableBody;\n              context: { group: null, last: true }\n            \"\n          ></ng-container>\n        </ng-container>\n\n        <ng-template let-group=\"group\" let-last=\"last\" #headersAndTableBody>\n          <ng-container *ngIf=\"isGroupResult(s.result) && group !== null\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                subheaderTemplate || null;\n                context: { state: s, group }\n              \"\n            ></ng-container>\n          </ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': isGroupResult(s.result) }\">\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    *ngIf=\"!!s.selection.allowSelection\"\n                    class=\"selection-head\"\n                  >\n                    <riv-sr-only>Select rows</riv-sr-only>\n                    <div\n                      *ngIf=\"\n                        s.selection.allowSelection !== 'individual' &&\n                        s.selection.allowSelection === true\n                      \"\n                      class=\"checkbox-wrapper\"\n                    >\n                      <riv-checkbox\n                        *ngIf=\"!isGroupResult(s.result)\"\n                        [value]=\"s.selection.isAllSelected === true\"\n                        [indeterminate]=\"\n                          s.selection.isAllSelected === 'indeterminate'\n                        \"\n                        (valueChange)=\"\n                          manager?.actions?.next({ type: 'allSelectedChange' })\n                        \"\n                        ariaLabel=\"Select all rows\"\n                      ></riv-checkbox>\n                      <riv-checkbox\n                        *ngIf=\"isGroupResult(s.result) && group !== null\"\n                        [value]=\"group.selected === true\"\n                        [indeterminate]=\"group.selected === 'indeterminate'\"\n                        (valueChange)=\"\n                          manager?.actions?.next({\n                            type: 'groupSelectionChange',\n                            payload: group\n                          })\n                        \"\n                        ariaLabel=\"Select group rows\"\n                      ></riv-checkbox>\n                    </div>\n                  </th>\n                  <th\n                    *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                    class=\"toggle-head\"\n                  >\n                    <!-- Add a column for the chevrons, if we have togglable headers -->\n                    <riv-sr-only>Toggles</riv-sr-only>\n                  </th>\n                  <th\n                    *ngFor=\"let column of s.display.columns; let i = index\"\n                    [class.pinned]=\"column.pinned\"\n                    [style.left.px]=\"column.left\"\n                    [style.width.px]=\"getWidth(column)\"\n                    [attr.draggable]=\"\n                      s.display.columnsAreReorderable && !column.alwaysPinned\n                    \"\n                    [attr.droppable]=\"!column.alwaysPinned\"\n                    [class.drop-zone]=\"!column.alwaysPinned\"\n                    (dragstart)=\"dragStart(i, column.key)\"\n                    (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                    (drop)=\"drop(i, s.display.enabledCount)\"\n                    [class.dragged-over-left]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx > i &&\n                      !column.alwaysPinned\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i &&\n                      !column.alwaysPinned\n                    \"\n                  >\n                    <div\n                      *ngIf=\"!showMenuOnColumnName(s, column)\"\n                      class=\"header-wrapper\"\n                      [class.left]=\"column.alignment === 'left'\"\n                      [class.right]=\"column.alignment === 'right'\"\n                    >\n                      {{ s.display.columnNameMap.get(column.key) }}\n                      <riv-table-header-resize-handle\n                        (dragResize)=\"setWidth(column.key, $event)\"\n                      ></riv-table-header-resize-handle>\n                    </div>\n                    <riv-menu *ngIf=\"showMenuOnColumnName(s, column)\">\n                      <ng-template #trigger>\n                        <span\n                          class=\"header-wrapper\"\n                          [class.left]=\"column.alignment === 'left'\"\n                          [class.right]=\"column.alignment === 'right'\"\n                          [class.active]=\"s.query.order?.column === column.key\"\n                        >\n                          {{ s.display.columnNameMap.get(column.key) }}\n                          <span class=\"icon-container\">\n                            <riv-icon\n                              [size]=\"12\"\n                              [name]=\"\n                                s.query.order?.direction === 'desc'\n                                  ? 'ArrowDown'\n                                  : 'ArrowUp'\n                              \"\n                            ></riv-icon>\n                          </span>\n                        </span>\n                        <riv-table-header-resize-handle\n                          (dragResize)=\"setWidth(column.key, $event)\"\n                        ></riv-table-header-resize-handle>\n                      </ng-template>\n                      <ng-container *ngIf=\"column.orderable\">\n                        <button\n                          type=\"button\"\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'asc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'asc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort ascending\n                        </button>\n                        <button\n                          type=\"button\"\n                          *ngIf=\"s.query.order?.column === column.key\"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: null\n                            })\n                          \"\n                        >\n                          Remove sort\n                        </button>\n                        <button\n                          type=\"button\"\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'desc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'desc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort descending\n                        </button>\n                      </ng-container>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"column.orderable && column.filterable\"\n                      ></div>\n                      <button\n                        type=\"button\"\n                        *ngIf=\"column.filterable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'filterAdd',\n                            columnKey: column.key\n                          })\n                        \"\n                      >\n                        Add a filter\n                      </button>\n                      <!-- We only show the divider when we will have an item both above and below the divider. -->\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (columnCanFreeze(s, column) ||\n                            columnCanHide(s, column))\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"columnCanFreeze(s, column)\">\n                        <button\n                          type=\"button\"\n                          *ngIf=\"!column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: true,\n                              index: i,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Freeze up to column\n                        </button>\n                        <button\n                          type=\"button\"\n                          *ngIf=\"column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: false,\n                              index: 0,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Un-freeze columns\n                        </button>\n                      </ng-container>\n                      <button\n                        type=\"button\"\n                        *ngIf=\"columnCanHide(s, column)\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'columnEnabledChange',\n                            column: column.key,\n                            enabled: false,\n                            source: 'headerMenu'\n                          })\n                        \"\n                      >\n                        Hide column\n                      </button>\n                    </riv-menu>\n                  </th>\n                  <th *ngIf=\"menuTemplate\" class=\"menu-head\">\n                    <riv-sr-only>Menu</riv-sr-only>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <ng-container\n                  *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n                >\n                  <!-- Grouped results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"isGroupResult(s.result) && group !== null\"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of group.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Regular results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isRegularResult(s.result) &&\n                      s.result.resultType === 'normal-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of s.result.rowsAsGroup.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Nested with header results have subrows and headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isNestedResult(s.result) &&\n                      s.result.resultType === 'nested-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let headerRow of s.result.nestedHeaderRows;\n                        trackBy: trackByNestedHeader\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          headerRowWithSubRows;\n                          context: { headerRow: headerRow }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <ng-template let-headerRow=\"headerRow\" #headerRowWithSubRows>\n                    <!-- Display the header -->\n                    <ng-container *ngIf=\"headerRow.headerText !== null\">\n                      <tr\n                        class=\"toggle-header-row\"\n                        (click)=\"toggleHeaderCollapse(headerRow.id)\"\n                      >\n                        <td class=\"toggle-body\">\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <riv-icon\n                            class=\"prevent-shrink chevron\"\n                            [name]=\"\n                              headerRow.isCollapsed\n                                ? 'ChevronDown'\n                                : 'ChevronUp'\n                            \"\n                            [size]=\"16\"\n                          ></riv-icon>\n                        </td>\n                        <td\n                          class=\"toggle-header\"\n                          [attr.colspan]=\"s.display.columns.length\"\n                        >\n                          <span class=\"toggle-header-text\">\n                            {{ headerRow.headerText }}\n                          </span>\n                        </td>\n                        <td *ngIf=\"menuTemplate\"></td>\n                      </tr>\n                    </ng-container>\n\n                    <!-- If a header is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !headerRow.isCollapsed && headerRow.subRows.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let nestedRow of headerRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            nestedRowWithSubRows;\n                            context: { nestedRow: nestedRow, depth: 0 }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-nestedRow=\"nestedRow\"\n                    let-depth=\"depth\"\n                    #nestedRowWithSubRows\n                  >\n                    <!-- Display the current row -->\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowWrappedWithRowLink\"\n                      [ngTemplateOutletContext]=\"{\n                        row: nestedRow.data,\n                        rowIndex: -1,\n                        depth: depth,\n                        hasSubRows: nestedRow.subRows?.length > 0,\n                        rowIsCollapsed: nestedRow.isCollapsed\n                      }\"\n                    >\n                    </ng-container>\n\n                    <!-- If a row is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !nestedRow.isCollapsed && nestedRow.subRows?.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let subRow of nestedRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          [ngTemplateOutlet]=\"nestedRowWithSubRows\"\n                          [ngTemplateOutletContext]=\"{\n                            nestedRow: subRow,\n                            depth: depth + 1\n                          }\"\n                        >\n                        </ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowWrappedWithRowLink\n                  >\n                    <ng-container\n                      *ngIf=\"{\n                        row: row,\n                        rowIndex: rowIndex,\n                        depth: depth,\n                        hasSubRows: hasSubRows,\n                        rowIsCollapsed: rowIsCollapsed\n                      } as rowContext\"\n                    >\n                      <ng-container *ngIf=\"row.rowLink; let rl\">\n                        <a\n                          *ngIf=\"isExternalRowLink(rl)\"\n                          [href]=\"rl.href\"\n                          draggable=\"false\"\n                          class=\"row-link\"\n                          [class.grayed]=\"s.display.rowsAreGrayed\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                          ></ng-container>\n                        </a>\n                        <a\n                          *ngIf=\"isInternalRowLink(rl)\"\n                          draggable=\"false\"\n                          [routerLink]=\"rl.routerLink\"\n                          [queryParams]=\"rl.queryParams\"\n                          [queryParamsHandling]=\"rl.queryParamsHandling\"\n                          class=\"row-link\"\n                          [class.grayed]=\"s.display.rowsAreGrayed\"\n                          [class.active]=\"rl.active\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                          ></ng-container>\n                        </a>\n                      </ng-container>\n                      <tr\n                        *ngIf=\"!row.rowLink\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                        ></ng-container>\n                      </tr>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowBody\n                  >\n                    <td\n                      *ngIf=\"\n                        s.selection.allowSelection === true ||\n                        s.selection.allowSelection === 'individual'\n                      \"\n                      class=\"selection-body\"\n                      (click)=\"$event.preventDefault()\"\n                    >\n                      <label\n                        class=\"checkbox-wrapper\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <riv-checkbox\n                          [identifier]=\"'riv-table-selection-' + row.id\"\n                          [value]=\"row.selected\"\n                          (valueChange)=\"selectionChange(row.id, $event)\"\n                          ariaLabel=\"Select row\"\n                        ></riv-checkbox>\n                      </label>\n                    </td>\n                    <td\n                      *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                      class=\"toggle-body\"\n                    >\n                      <!-- This td lines up with the header chevron column -->\n                    </td>\n                    <ng-container\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        index as columnIndex;\n                        trackBy: trackByColumn\n                      \"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          s.display.cellRowSpan(rowIndex, column.key) as span\n                        \"\n                      >\n                        <td\n                          *ngIf=\"span > 0\"\n                          [attr.rowspan]=\"span\"\n                          [class.rs-right-border]=\"\n                            s.display.needsRightBorder(rowIndex, column.key)\n                          \"\n                          [class.pinned]=\"column.pinned\"\n                          [class.advanced]=\"column.dataType === 'advanced'\"\n                          [class.toggleable-cell]=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                          \"\n                          [style.left.px]=\"column.left\"\n                          [style.text-align]=\"column.alignment\"\n                          (click)=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                              ? toggleRowCollapse(row.id)\n                              : handleClick($event, column)\n                          \"\n                        >\n                          <ng-template #cellContent>\n                            <ng-container\n                              *ngIf=\"!blankCellDueToNesting(columnIndex, depth)\"\n                            >\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  cellTemplate || null;\n                                  context: { row: row, column: column }\n                                \"\n                              ></ng-container>\n                            </ng-container>\n                          </ng-template>\n\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <div\n                            *ngIf=\"\n                              showChevronForCell(\n                                columnIndex,\n                                hasSubRows,\n                                depth\n                              );\n                              else cellContent\n                            \"\n                            class=\"toggleable-cell-content\"\n                          >\n                            <riv-icon\n                              class=\"prevent-shrink chevron\"\n                              [name]=\"\n                                rowIsCollapsed ? 'ChevronDown' : 'ChevronUp'\n                              \"\n                              [size]=\"16\"\n                            ></riv-icon>\n                            <div class=\"toggleable-cell-value\">\n                              <ng-container\n                                *ngTemplateOutlet=\"cellContent\"\n                              ></ng-container>\n                            </div>\n                          </div>\n                        </td>\n                      </ng-container>\n                    </ng-container>\n                    <td\n                      *ngIf=\"menuTemplate\"\n                      class=\"menu-body\"\n                      (click)=\"\n                        $event.stopPropagation(); $event.preventDefault()\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          menuTemplate || null;\n                          context: { row: row }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </ng-template>\n\n                  <tr *ngIf=\"s.display.customSummaryRow\">\n                    <td\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        trackBy: trackByColumn\n                      \"\n                      [class.pinned]=\"column.pinned\"\n                      [class.advanced]=\"column.dataType === 'advanced'\"\n                      [style.left.px]=\"column.left\"\n                      [style.text-align]=\"column.alignment\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          summaryTemplate || null;\n                          context: { column: column }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                </ng-container>\n                <ng-template #empty>\n                  <tr>\n                    <td [attr.colspan]=\"s.display.columns.length\">\n                      <riv-zero-state\n                        *ngIf=\"s.display.zeroStateMessage; let message\"\n                        [message]=\"message\"\n                      ></riv-zero-state>\n                    </td>\n                  </tr>\n                </ng-template>\n              </tbody>\n            </table>\n          </div>\n          <div\n            class=\"footer\"\n            *ngIf=\"\n              isGroupResult(s.result) &&\n              group !== null &&\n              group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n              group.rows.length === s.query.grouping.countPerGroup\n            \"\n          >\n            <span\n              rivLink\n              class=\"footer-link\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'viewMoreKeyChange',\n                  viewMoreKey: group.groupData.key.toString()\n                })\n              \"\n              >View all {{ group.totalMatchingRowCount }}</span\n            >\n          </div>\n          <br *ngIf=\"!last\" />\n        </ng-template>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!isGroupResult(s.result) && !s.display.hidePageSizeSelector\"\n          >\n            <span> Results per page: </span>\n            <riv-simple-select\n              [selectedOption]=\"{\n                id: s.query.pagination.pageSize.toString(),\n                title: s.query.pagination.pageSize.toString(),\n                value: s.query.pagination.pageSize\n              }\"\n              (selectedOptionChange)=\"\n                manager?.actions?.next({\n                  type: 'pageSizeChange',\n                  size: $event?.value || 25\n                })\n              \"\n              [optionGroups]=\"pageSizeOptions\"\n              [size]=\"'small'\"\n              [orderBy]=\"'source'\"\n            ></riv-simple-select>\n          </ng-container>\n        </div>\n        <span\n          *ngIf=\"s.result.totalMatchingRowCount > 0 && !isGroupResult(s.result)\"\n          class=\"page-data-indicator\"\n        >\n          {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n            s.query.pagination.pageRowEnd | rivNumber\n          }}\n          of\n          {{ s.result.totalMatchingRowCount | rivNumber }}\n        </span>\n        <div\n          *ngIf=\"s.query.pagination.showControls\"\n          class=\"pagination-controls\"\n        >\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowLeft'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.previous === null\"\n            (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n          ></button>\n          <span\n            *ngIf=\"s.query.pagination.pages[0] > 0\"\n            class=\"truncated-pages left\"\n          >\n            &hellip;\n          </span>\n          <button\n            *ngFor=\"let page of s.query.pagination.pages\"\n            class=\"page\"\n            type=\"button\"\n            [disabled]=\"page === s.query.pagination.page\"\n            [attr.aria-disabled]=\"\n              page === s.query.pagination.page ? 'true' : null\n            \"\n            (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n          >\n            {{ page + 1 }}\n          </button>\n          <span\n            *ngIf=\"\n              s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n              s.query.pagination.pageCount - 1\n            \"\n            class=\"truncated-pages right\"\n          >\n            &hellip;\n          </span>\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowRight'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.next === null\"\n            (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n          ></button>\n        </div>\n      </div>\n    </riv-loading-cover>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}.loading-container{width:100%;display:flex;flex-direction:column;min-height:0}.header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}.header:has(+div>.subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}.header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{flex:1 1 auto;min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+.footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th.toggle-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0}th>riv-menu{width:100%}.header-wrapper{font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}span.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}span.header-wrapper:hover{background-color:var(--black-20)}span.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}span.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}span.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}span.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit;-webkit-user-select:text;user-select:text}a.row-link td{transition:background-color var(--short-transition);-webkit-user-select:text;user-select:text}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td.rs-hover{background-color:var(--surface-light-2)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body,td.toggle-body{padding:0;vertical-align:middle}td.selection-body,td.toggle-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}td[rowspan]:not([rowspan=\"1\"]){border-right:var(--border-width) solid var(--border-light)}td.rs-right-border{border-right:var(--border-width) solid var(--border-light)}a.row-link.active>td{background-color:var(--surface-light-selected)}.prevent-shrink{flex-shrink:0}td.toggleable-cell{cursor:pointer;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);font-weight:var(--font-weight-heavy)}td riv-icon.chevron{vertical-align:middle;margin-right:var(--size-xsmall)}.toggleable-cell-content{display:flex;align-items:center}.toggleable-cell-value{flex:1 1 auto;min-width:0}td.toggle-header{text-align:left}.toggle-header-text{position:sticky;z-index:1;left:calc(var(--size-xxlarge) + var(--size-small))}tr.toggle-header-row td{cursor:pointer;background-color:var(--surface-light-1);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: i8.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "component", type: i9.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: i10.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "directive", type: i11.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i12.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i13.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i14.SrOnlyComponent, selector: "riv-sr-only" }, { kind: "component", type: i15.TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: ["dragResize"] }, { kind: "component", type: i16.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i17.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TableComponent, selector: "riv-table", inputs: { manager: "manager" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:copy": "onCopy($event)" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary"], descendants: true }, { propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selection"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: ["subheader"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n    <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"position\"\n        [isModal]=\"false\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [preferredPosition]=\"'top-right'\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n        ></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n  <div class=\"loading-container\">\n    <div class=\"header\" *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </div>\n    <riv-loading-cover\n      class=\"container-loader-wrapper\"\n      [loading]=\"s.load.loading\"\n      [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n    >\n      <div\n        class=\"container\"\n        tabindex=\"0\"\n        [ngClass]=\"{\n          'container-ungrouped': !isGroupResult(s.result),\n          'has-header': !isGroupResult(s.result) && headerTemplate,\n          'without-columns': s.display.columns.length === 0\n        }\"\n        (rivClientSize)=\"containerSize.next($event)\"\n      >\n        <riv-zero-state\n          *ngIf=\"s.display.columns.length === 0\"\n          class=\"no-columns-message\"\n          [message]=\"\n            'All columns disabled. Enable at least one column to view table data.'\n          \"\n        ></riv-zero-state>\n\n        <!--\n          An overview of the templates we are using:\n\n          headersAndTableBody - helps us create multiple tables for grouped results\n            headerRowWithSubRows - helps us create header rows for nested with header results\n              nestedRowWithSubRows - helps us create nested rows for the nested result types\n                rowWrappedWithRowLink - helps us add a rowlink to a row\n                  rowBody - displays the row content\n        -->\n\n        <!-- When we are grouped, we show one table per group -->\n        <ng-container\n          *ngIf=\"\n            isGroupResult(s.result) && s.result.resultType === 'table-grouping'\n          \"\n        >\n          <ng-container\n            *ngFor=\"\n              let group of s.result.rowGroups;\n              trackBy: trackByGroup;\n              let last = last\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                headersAndTableBody;\n                context: { group: group, last: last }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!-- When we aren't grouped, we show one table -->\n        <ng-container\n          *ngIf=\"isRegularResult(s.result) || isNestedResult(s.result)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              headersAndTableBody;\n              context: { group: null, last: true }\n            \"\n          ></ng-container>\n        </ng-container>\n\n        <ng-template let-group=\"group\" let-last=\"last\" #headersAndTableBody>\n          <ng-container *ngIf=\"isGroupResult(s.result) && group !== null\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                subheaderTemplate || null;\n                context: { state: s, group }\n              \"\n            ></ng-container>\n          </ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': isGroupResult(s.result) }\">\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    *ngIf=\"!!s.selection.allowSelection\"\n                    class=\"selection-head\"\n                  >\n                    <riv-sr-only>Select rows</riv-sr-only>\n                    <div\n                      *ngIf=\"\n                        s.selection.allowSelection !== 'individual' &&\n                        s.selection.allowSelection === true\n                      \"\n                      class=\"checkbox-wrapper\"\n                    >\n                      <riv-checkbox\n                        *ngIf=\"!isGroupResult(s.result)\"\n                        [value]=\"s.selection.isAllSelected === true\"\n                        [indeterminate]=\"\n                          s.selection.isAllSelected === 'indeterminate'\n                        \"\n                        (valueChange)=\"\n                          manager?.actions?.next({ type: 'allSelectedChange' })\n                        \"\n                        ariaLabel=\"Select all rows\"\n                      ></riv-checkbox>\n                      <riv-checkbox\n                        *ngIf=\"isGroupResult(s.result) && group !== null\"\n                        [value]=\"group.selected === true\"\n                        [indeterminate]=\"group.selected === 'indeterminate'\"\n                        (valueChange)=\"\n                          manager?.actions?.next({\n                            type: 'groupSelectionChange',\n                            payload: group\n                          })\n                        \"\n                        ariaLabel=\"Select group rows\"\n                      ></riv-checkbox>\n                    </div>\n                  </th>\n                  <th\n                    *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                    class=\"toggle-head\"\n                  >\n                    <!-- Add a column for the chevrons, if we have togglable headers -->\n                    <riv-sr-only>Toggles</riv-sr-only>\n                  </th>\n                  <th\n                    *ngFor=\"let column of s.display.columns; let i = index\"\n                    [class.pinned]=\"column.pinned\"\n                    [style.left.px]=\"column.left\"\n                    [style.width.px]=\"getWidth(column)\"\n                    [attr.draggable]=\"\n                      s.display.columnsAreReorderable && !column.alwaysPinned\n                    \"\n                    [attr.droppable]=\"!column.alwaysPinned\"\n                    [class.drop-zone]=\"!column.alwaysPinned\"\n                    (dragstart)=\"dragStart(i, column.key)\"\n                    (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                    (drop)=\"drop(i, s.display.enabledCount)\"\n                    [class.dragged-over-left]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx > i &&\n                      !column.alwaysPinned\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i &&\n                      !column.alwaysPinned\n                    \"\n                  >\n                    <div\n                      *ngIf=\"!showMenuOnColumnName(s, column)\"\n                      class=\"header-wrapper\"\n                      [class.left]=\"column.alignment === 'left'\"\n                      [class.right]=\"column.alignment === 'right'\"\n                    >\n                      {{ s.display.columnNameMap.get(column.key) }}\n                      <riv-table-header-resize-handle\n                        (dragResize)=\"setWidth(column.key, $event)\"\n                      ></riv-table-header-resize-handle>\n                    </div>\n                    <riv-menu *ngIf=\"showMenuOnColumnName(s, column)\">\n                      <ng-template #trigger>\n                        <span\n                          class=\"header-wrapper\"\n                          [class.left]=\"column.alignment === 'left'\"\n                          [class.right]=\"column.alignment === 'right'\"\n                          [class.active]=\"s.query.order?.column === column.key\"\n                        >\n                          {{ s.display.columnNameMap.get(column.key) }}\n                          <span class=\"icon-container\">\n                            <riv-icon\n                              [size]=\"12\"\n                              [name]=\"\n                                s.query.order?.direction === 'desc'\n                                  ? 'ArrowDown'\n                                  : 'ArrowUp'\n                              \"\n                            ></riv-icon>\n                          </span>\n                        </span>\n                        <riv-table-header-resize-handle\n                          (dragResize)=\"setWidth(column.key, $event)\"\n                        ></riv-table-header-resize-handle>\n                      </ng-template>\n                      <ng-container *ngIf=\"column.orderable\">\n                        <button\n                          type=\"button\"\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'asc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'asc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort ascending\n                        </button>\n                        <button\n                          type=\"button\"\n                          *ngIf=\"s.query.order?.column === column.key\"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: null\n                            })\n                          \"\n                        >\n                          Remove sort\n                        </button>\n                        <button\n                          type=\"button\"\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'desc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'desc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort descending\n                        </button>\n                      </ng-container>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"column.orderable && column.filterable\"\n                      ></div>\n                      <button\n                        type=\"button\"\n                        *ngIf=\"column.filterable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'filterAdd',\n                            columnKey: column.key\n                          })\n                        \"\n                      >\n                        Add a filter\n                      </button>\n                      <!-- We only show the divider when we will have an item both above and below the divider. -->\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (columnCanFreeze(s, column) ||\n                            columnCanHide(s, column))\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"columnCanFreeze(s, column)\">\n                        <button\n                          type=\"button\"\n                          *ngIf=\"!column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: true,\n                              index: i,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Freeze up to column\n                        </button>\n                        <button\n                          type=\"button\"\n                          *ngIf=\"column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: false,\n                              index: 0,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Un-freeze columns\n                        </button>\n                      </ng-container>\n                      <button\n                        type=\"button\"\n                        *ngIf=\"columnCanHide(s, column)\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'columnEnabledChange',\n                            column: column.key,\n                            enabled: false,\n                            source: 'headerMenu'\n                          })\n                        \"\n                      >\n                        Hide column\n                      </button>\n                    </riv-menu>\n                  </th>\n                  <th *ngIf=\"menuTemplate\" class=\"menu-head\">\n                    <riv-sr-only>Menu</riv-sr-only>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <ng-container\n                  *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n                >\n                  <!-- Grouped results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"isGroupResult(s.result) && group !== null\"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of group.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Regular results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isRegularResult(s.result) &&\n                      s.result.resultType === 'normal-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of s.result.rowsAsGroup.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Nested with header results have subrows and headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isNestedResult(s.result) &&\n                      s.result.resultType === 'nested-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let headerRow of s.result.nestedHeaderRows;\n                        trackBy: trackByNestedHeader\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          headerRowWithSubRows;\n                          context: { headerRow: headerRow }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <ng-template let-headerRow=\"headerRow\" #headerRowWithSubRows>\n                    <!-- Display the header -->\n                    <ng-container *ngIf=\"headerRow.headerText !== null\">\n                      <tr\n                        class=\"toggle-header-row\"\n                        (click)=\"toggleHeaderCollapse(headerRow.id)\"\n                      >\n                        <td class=\"toggle-body\">\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <riv-icon\n                            class=\"prevent-shrink chevron\"\n                            [name]=\"\n                              headerRow.isCollapsed\n                                ? 'ChevronDown'\n                                : 'ChevronUp'\n                            \"\n                            [size]=\"16\"\n                          ></riv-icon>\n                        </td>\n                        <td\n                          class=\"toggle-header\"\n                          [attr.colspan]=\"s.display.columns.length\"\n                        >\n                          <span class=\"toggle-header-text\">\n                            {{ headerRow.headerText }}\n                          </span>\n                        </td>\n                        <td *ngIf=\"menuTemplate\"></td>\n                      </tr>\n                    </ng-container>\n\n                    <!-- If a header is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !headerRow.isCollapsed && headerRow.subRows.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let nestedRow of headerRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            nestedRowWithSubRows;\n                            context: { nestedRow: nestedRow, depth: 0 }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-nestedRow=\"nestedRow\"\n                    let-depth=\"depth\"\n                    #nestedRowWithSubRows\n                  >\n                    <!-- Display the current row -->\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowWrappedWithRowLink\"\n                      [ngTemplateOutletContext]=\"{\n                        row: nestedRow.data,\n                        rowIndex: -1,\n                        depth: depth,\n                        hasSubRows: nestedRow.subRows?.length > 0,\n                        rowIsCollapsed: nestedRow.isCollapsed\n                      }\"\n                    >\n                    </ng-container>\n\n                    <!-- If a row is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !nestedRow.isCollapsed && nestedRow.subRows?.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let subRow of nestedRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          [ngTemplateOutlet]=\"nestedRowWithSubRows\"\n                          [ngTemplateOutletContext]=\"{\n                            nestedRow: subRow,\n                            depth: depth + 1\n                          }\"\n                        >\n                        </ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowWrappedWithRowLink\n                  >\n                    <ng-container\n                      *ngIf=\"{\n                        row: row,\n                        rowIndex: rowIndex,\n                        depth: depth,\n                        hasSubRows: hasSubRows,\n                        rowIsCollapsed: rowIsCollapsed\n                      } as rowContext\"\n                    >\n                      <ng-container *ngIf=\"row.rowLink; let rl\">\n                        <a\n                          *ngIf=\"isExternalRowLink(rl)\"\n                          [href]=\"rl.href\"\n                          draggable=\"false\"\n                          class=\"row-link\"\n                          [class.grayed]=\"s.display.rowsAreGrayed\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                          ></ng-container>\n                        </a>\n                        <a\n                          *ngIf=\"isInternalRowLink(rl)\"\n                          draggable=\"false\"\n                          [routerLink]=\"rl.routerLink\"\n                          [queryParams]=\"rl.queryParams\"\n                          [queryParamsHandling]=\"rl.queryParamsHandling\"\n                          class=\"row-link\"\n                          [class.grayed]=\"s.display.rowsAreGrayed\"\n                          [class.active]=\"rl.active\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                          ></ng-container>\n                        </a>\n                      </ng-container>\n                      <tr\n                        *ngIf=\"!row.rowLink\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                        ></ng-container>\n                      </tr>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowBody\n                  >\n                    <td\n                      *ngIf=\"\n                        s.selection.allowSelection === true ||\n                        s.selection.allowSelection === 'individual'\n                      \"\n                      class=\"selection-body\"\n                      (click)=\"$event.preventDefault()\"\n                    >\n                      <label\n                        class=\"checkbox-wrapper\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <riv-checkbox\n                          [identifier]=\"'riv-table-selection-' + row.id\"\n                          [value]=\"row.selected\"\n                          (valueChange)=\"selectionChange(row.id, $event)\"\n                          ariaLabel=\"Select row\"\n                        ></riv-checkbox>\n                      </label>\n                    </td>\n                    <td\n                      *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                      class=\"toggle-body\"\n                    >\n                      <!-- This td lines up with the header chevron column -->\n                    </td>\n                    <ng-container\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        index as columnIndex;\n                        trackBy: trackByColumn\n                      \"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          s.display.cellRowSpan(rowIndex, column.key) as span\n                        \"\n                      >\n                        <td\n                          *ngIf=\"span > 0\"\n                          [attr.rowspan]=\"span\"\n                          [class.rs-right-border]=\"\n                            s.display.needsRightBorder(rowIndex, column.key)\n                          \"\n                          [class.pinned]=\"column.pinned\"\n                          [class.advanced]=\"column.dataType === 'advanced'\"\n                          [class.toggleable-cell]=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                          \"\n                          [style.left.px]=\"column.left\"\n                          [style.text-align]=\"column.alignment\"\n                          (click)=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                              ? toggleRowCollapse(row.id)\n                              : handleClick($event, column)\n                          \"\n                        >\n                          <ng-template #cellContent>\n                            <ng-container\n                              *ngIf=\"!blankCellDueToNesting(columnIndex, depth)\"\n                            >\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  cellTemplate || null;\n                                  context: { row: row, column: column }\n                                \"\n                              ></ng-container>\n                            </ng-container>\n                          </ng-template>\n\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <div\n                            *ngIf=\"\n                              showChevronForCell(\n                                columnIndex,\n                                hasSubRows,\n                                depth\n                              );\n                              else cellContent\n                            \"\n                            class=\"toggleable-cell-content\"\n                          >\n                            <riv-icon\n                              class=\"prevent-shrink chevron\"\n                              [name]=\"\n                                rowIsCollapsed ? 'ChevronDown' : 'ChevronUp'\n                              \"\n                              [size]=\"16\"\n                            ></riv-icon>\n                            <div class=\"toggleable-cell-value\">\n                              <ng-container\n                                *ngTemplateOutlet=\"cellContent\"\n                              ></ng-container>\n                            </div>\n                          </div>\n                        </td>\n                      </ng-container>\n                    </ng-container>\n                    <td\n                      *ngIf=\"menuTemplate\"\n                      class=\"menu-body\"\n                      (click)=\"\n                        $event.stopPropagation(); $event.preventDefault()\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          menuTemplate || null;\n                          context: { row: row }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </ng-template>\n\n                  <tr *ngIf=\"s.display.customSummaryRow\">\n                    <td\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        trackBy: trackByColumn\n                      \"\n                      [class.pinned]=\"column.pinned\"\n                      [class.advanced]=\"column.dataType === 'advanced'\"\n                      [style.left.px]=\"column.left\"\n                      [style.text-align]=\"column.alignment\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          summaryTemplate || null;\n                          context: { column: column }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                </ng-container>\n                <ng-template #empty>\n                  <tr>\n                    <td [attr.colspan]=\"s.display.columns.length\">\n                      <riv-zero-state\n                        *ngIf=\"s.display.zeroStateMessage; let message\"\n                        [message]=\"message\"\n                      ></riv-zero-state>\n                    </td>\n                  </tr>\n                </ng-template>\n              </tbody>\n            </table>\n          </div>\n          <div\n            class=\"footer\"\n            *ngIf=\"\n              isGroupResult(s.result) &&\n              group !== null &&\n              group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n              group.rows.length === s.query.grouping.countPerGroup\n            \"\n          >\n            <span\n              rivLink\n              class=\"footer-link\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'viewMoreKeyChange',\n                  viewMoreKey: group.groupData.key.toString()\n                })\n              \"\n              >View all {{ group.totalMatchingRowCount }}</span\n            >\n          </div>\n          <br *ngIf=\"!last\" />\n        </ng-template>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!isGroupResult(s.result) && !s.display.hidePageSizeSelector\"\n          >\n            <span> Results per page: </span>\n            <riv-simple-select\n              [selectedOption]=\"{\n                id: s.query.pagination.pageSize.toString(),\n                title: s.query.pagination.pageSize.toString(),\n                value: s.query.pagination.pageSize\n              }\"\n              (selectedOptionChange)=\"\n                manager?.actions?.next({\n                  type: 'pageSizeChange',\n                  size: $event?.value || 25\n                })\n              \"\n              [optionGroups]=\"pageSizeOptions\"\n              [size]=\"'small'\"\n              [orderBy]=\"'source'\"\n            ></riv-simple-select>\n          </ng-container>\n        </div>\n        <span\n          *ngIf=\"s.result.totalMatchingRowCount > 0 && !isGroupResult(s.result)\"\n          class=\"page-data-indicator\"\n        >\n          {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n            s.query.pagination.pageRowEnd | rivNumber\n          }}\n          of\n          {{ s.result.totalMatchingRowCount | rivNumber }}\n        </span>\n        <div\n          *ngIf=\"s.query.pagination.showControls\"\n          class=\"pagination-controls\"\n        >\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowLeft'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.previous === null\"\n            (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n          ></button>\n          <span\n            *ngIf=\"s.query.pagination.pages[0] > 0\"\n            class=\"truncated-pages left\"\n          >\n            &hellip;\n          </span>\n          <button\n            *ngFor=\"let page of s.query.pagination.pages\"\n            class=\"page\"\n            type=\"button\"\n            [disabled]=\"page === s.query.pagination.page\"\n            [attr.aria-disabled]=\"\n              page === s.query.pagination.page ? 'true' : null\n            \"\n            (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n          >\n            {{ page + 1 }}\n          </button>\n          <span\n            *ngIf=\"\n              s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n              s.query.pagination.pageCount - 1\n            \"\n            class=\"truncated-pages right\"\n          >\n            &hellip;\n          </span>\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowRight'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.next === null\"\n            (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n          ></button>\n        </div>\n      </div>\n    </riv-loading-cover>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}.loading-container{width:100%;display:flex;flex-direction:column;min-height:0}.header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}.header:has(+div>.subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}.header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{flex:1 1 auto;min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+.footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th.toggle-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0}th>riv-menu{width:100%}.header-wrapper{font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}span.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}span.header-wrapper:hover{background-color:var(--black-20)}span.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}span.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}span.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}span.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit;-webkit-user-select:text;user-select:text}a.row-link td{transition:background-color var(--short-transition);-webkit-user-select:text;user-select:text}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td.rs-hover{background-color:var(--surface-light-2)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body,td.toggle-body{padding:0;vertical-align:middle}td.selection-body,td.toggle-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}td[rowspan]:not([rowspan=\"1\"]){border-right:var(--border-width) solid var(--border-light)}td.rs-right-border{border-right:var(--border-width) solid var(--border-light)}a.row-link.active>td{background-color:var(--surface-light-selected)}.prevent-shrink{flex-shrink:0}td.toggleable-cell{cursor:pointer;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);font-weight:var(--font-weight-heavy)}td riv-icon.chevron{vertical-align:middle;margin-right:var(--size-xsmall)}.toggleable-cell-content{display:flex;align-items:center}.toggleable-cell-value{flex:1 1 auto;min-width:0}td.toggle-header{text-align:left}.toggle-header-text{position:sticky;z-index:1;left:calc(var(--size-xxlarge) + var(--size-small))}tr.toggle-header-row td{cursor:pointer;background-color:var(--surface-light-1);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: i8.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "component", type: i9.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: i10.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "directive", type: i11.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i12.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i13.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i14.SrOnlyComponent, selector: "riv-sr-only" }, { kind: "component", type: i15.TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: ["dragResize"] }, { kind: "component", type: i16.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i17.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n    <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"position\"\n        [isModal]=\"false\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [preferredPosition]=\"'top-right'\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n        ></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n  <div class=\"loading-container\">\n    <div class=\"header\" *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </div>\n    <riv-loading-cover\n      class=\"container-loader-wrapper\"\n      [loading]=\"s.load.loading\"\n      [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n    >\n      <div\n        class=\"container\"\n        tabindex=\"0\"\n        [ngClass]=\"{\n          'container-ungrouped': !isGroupResult(s.result),\n          'has-header': !isGroupResult(s.result) && headerTemplate,\n          'without-columns': s.display.columns.length === 0\n        }\"\n        (rivClientSize)=\"containerSize.next($event)\"\n      >\n        <riv-zero-state\n          *ngIf=\"s.display.columns.length === 0\"\n          class=\"no-columns-message\"\n          [message]=\"\n            'All columns disabled. Enable at least one column to view table data.'\n          \"\n        ></riv-zero-state>\n\n        <!--\n          An overview of the templates we are using:\n\n          headersAndTableBody - helps us create multiple tables for grouped results\n            headerRowWithSubRows - helps us create header rows for nested with header results\n              nestedRowWithSubRows - helps us create nested rows for the nested result types\n                rowWrappedWithRowLink - helps us add a rowlink to a row\n                  rowBody - displays the row content\n        -->\n\n        <!-- When we are grouped, we show one table per group -->\n        <ng-container\n          *ngIf=\"\n            isGroupResult(s.result) && s.result.resultType === 'table-grouping'\n          \"\n        >\n          <ng-container\n            *ngFor=\"\n              let group of s.result.rowGroups;\n              trackBy: trackByGroup;\n              let last = last\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                headersAndTableBody;\n                context: { group: group, last: last }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!-- When we aren't grouped, we show one table -->\n        <ng-container\n          *ngIf=\"isRegularResult(s.result) || isNestedResult(s.result)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              headersAndTableBody;\n              context: { group: null, last: true }\n            \"\n          ></ng-container>\n        </ng-container>\n\n        <ng-template let-group=\"group\" let-last=\"last\" #headersAndTableBody>\n          <ng-container *ngIf=\"isGroupResult(s.result) && group !== null\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                subheaderTemplate || null;\n                context: { state: s, group }\n              \"\n            ></ng-container>\n          </ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': isGroupResult(s.result) }\">\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    *ngIf=\"!!s.selection.allowSelection\"\n                    class=\"selection-head\"\n                  >\n                    <riv-sr-only>Select rows</riv-sr-only>\n                    <div\n                      *ngIf=\"\n                        s.selection.allowSelection !== 'individual' &&\n                        s.selection.allowSelection === true\n                      \"\n                      class=\"checkbox-wrapper\"\n                    >\n                      <riv-checkbox\n                        *ngIf=\"!isGroupResult(s.result)\"\n                        [value]=\"s.selection.isAllSelected === true\"\n                        [indeterminate]=\"\n                          s.selection.isAllSelected === 'indeterminate'\n                        \"\n                        (valueChange)=\"\n                          manager?.actions?.next({ type: 'allSelectedChange' })\n                        \"\n                        ariaLabel=\"Select all rows\"\n                      ></riv-checkbox>\n                      <riv-checkbox\n                        *ngIf=\"isGroupResult(s.result) && group !== null\"\n                        [value]=\"group.selected === true\"\n                        [indeterminate]=\"group.selected === 'indeterminate'\"\n                        (valueChange)=\"\n                          manager?.actions?.next({\n                            type: 'groupSelectionChange',\n                            payload: group\n                          })\n                        \"\n                        ariaLabel=\"Select group rows\"\n                      ></riv-checkbox>\n                    </div>\n                  </th>\n                  <th\n                    *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                    class=\"toggle-head\"\n                  >\n                    <!-- Add a column for the chevrons, if we have togglable headers -->\n                    <riv-sr-only>Toggles</riv-sr-only>\n                  </th>\n                  <th\n                    *ngFor=\"let column of s.display.columns; let i = index\"\n                    [class.pinned]=\"column.pinned\"\n                    [style.left.px]=\"column.left\"\n                    [style.width.px]=\"getWidth(column)\"\n                    [attr.draggable]=\"\n                      s.display.columnsAreReorderable && !column.alwaysPinned\n                    \"\n                    [attr.droppable]=\"!column.alwaysPinned\"\n                    [class.drop-zone]=\"!column.alwaysPinned\"\n                    (dragstart)=\"dragStart(i, column.key)\"\n                    (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                    (drop)=\"drop(i, s.display.enabledCount)\"\n                    [class.dragged-over-left]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx > i &&\n                      !column.alwaysPinned\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i &&\n                      !column.alwaysPinned\n                    \"\n                  >\n                    <div\n                      *ngIf=\"!showMenuOnColumnName(s, column)\"\n                      class=\"header-wrapper\"\n                      [class.left]=\"column.alignment === 'left'\"\n                      [class.right]=\"column.alignment === 'right'\"\n                    >\n                      {{ s.display.columnNameMap.get(column.key) }}\n                      <riv-table-header-resize-handle\n                        (dragResize)=\"setWidth(column.key, $event)\"\n                      ></riv-table-header-resize-handle>\n                    </div>\n                    <riv-menu *ngIf=\"showMenuOnColumnName(s, column)\">\n                      <ng-template #trigger>\n                        <span\n                          class=\"header-wrapper\"\n                          [class.left]=\"column.alignment === 'left'\"\n                          [class.right]=\"column.alignment === 'right'\"\n                          [class.active]=\"s.query.order?.column === column.key\"\n                        >\n                          {{ s.display.columnNameMap.get(column.key) }}\n                          <span class=\"icon-container\">\n                            <riv-icon\n                              [size]=\"12\"\n                              [name]=\"\n                                s.query.order?.direction === 'desc'\n                                  ? 'ArrowDown'\n                                  : 'ArrowUp'\n                              \"\n                            ></riv-icon>\n                          </span>\n                        </span>\n                        <riv-table-header-resize-handle\n                          (dragResize)=\"setWidth(column.key, $event)\"\n                        ></riv-table-header-resize-handle>\n                      </ng-template>\n                      <ng-container *ngIf=\"column.orderable\">\n                        <button\n                          type=\"button\"\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'asc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'asc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort ascending\n                        </button>\n                        <button\n                          type=\"button\"\n                          *ngIf=\"s.query.order?.column === column.key\"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: null\n                            })\n                          \"\n                        >\n                          Remove sort\n                        </button>\n                        <button\n                          type=\"button\"\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'desc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'desc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort descending\n                        </button>\n                      </ng-container>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"column.orderable && column.filterable\"\n                      ></div>\n                      <button\n                        type=\"button\"\n                        *ngIf=\"column.filterable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'filterAdd',\n                            columnKey: column.key\n                          })\n                        \"\n                      >\n                        Add a filter\n                      </button>\n                      <!-- We only show the divider when we will have an item both above and below the divider. -->\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (columnCanFreeze(s, column) ||\n                            columnCanHide(s, column))\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"columnCanFreeze(s, column)\">\n                        <button\n                          type=\"button\"\n                          *ngIf=\"!column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: true,\n                              index: i,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Freeze up to column\n                        </button>\n                        <button\n                          type=\"button\"\n                          *ngIf=\"column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: false,\n                              index: 0,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Un-freeze columns\n                        </button>\n                      </ng-container>\n                      <button\n                        type=\"button\"\n                        *ngIf=\"columnCanHide(s, column)\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'columnEnabledChange',\n                            column: column.key,\n                            enabled: false,\n                            source: 'headerMenu'\n                          })\n                        \"\n                      >\n                        Hide column\n                      </button>\n                    </riv-menu>\n                  </th>\n                  <th *ngIf=\"menuTemplate\" class=\"menu-head\">\n                    <riv-sr-only>Menu</riv-sr-only>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <ng-container\n                  *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n                >\n                  <!-- Grouped results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"isGroupResult(s.result) && group !== null\"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of group.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Regular results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isRegularResult(s.result) &&\n                      s.result.resultType === 'normal-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of s.result.rowsAsGroup.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Nested with header results have subrows and headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isNestedResult(s.result) &&\n                      s.result.resultType === 'nested-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let headerRow of s.result.nestedHeaderRows;\n                        trackBy: trackByNestedHeader\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          headerRowWithSubRows;\n                          context: { headerRow: headerRow }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <ng-template let-headerRow=\"headerRow\" #headerRowWithSubRows>\n                    <!-- Display the header -->\n                    <ng-container *ngIf=\"headerRow.headerText !== null\">\n                      <tr\n                        class=\"toggle-header-row\"\n                        (click)=\"toggleHeaderCollapse(headerRow.id)\"\n                      >\n                        <td class=\"toggle-body\">\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <riv-icon\n                            class=\"prevent-shrink chevron\"\n                            [name]=\"\n                              headerRow.isCollapsed\n                                ? 'ChevronDown'\n                                : 'ChevronUp'\n                            \"\n                            [size]=\"16\"\n                          ></riv-icon>\n                        </td>\n                        <td\n                          class=\"toggle-header\"\n                          [attr.colspan]=\"s.display.columns.length\"\n                        >\n                          <span class=\"toggle-header-text\">\n                            {{ headerRow.headerText }}\n                          </span>\n                        </td>\n                        <td *ngIf=\"menuTemplate\"></td>\n                      </tr>\n                    </ng-container>\n\n                    <!-- If a header is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !headerRow.isCollapsed && headerRow.subRows.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let nestedRow of headerRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            nestedRowWithSubRows;\n                            context: { nestedRow: nestedRow, depth: 0 }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-nestedRow=\"nestedRow\"\n                    let-depth=\"depth\"\n                    #nestedRowWithSubRows\n                  >\n                    <!-- Display the current row -->\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowWrappedWithRowLink\"\n                      [ngTemplateOutletContext]=\"{\n                        row: nestedRow.data,\n                        rowIndex: -1,\n                        depth: depth,\n                        hasSubRows: nestedRow.subRows?.length > 0,\n                        rowIsCollapsed: nestedRow.isCollapsed\n                      }\"\n                    >\n                    </ng-container>\n\n                    <!-- If a row is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !nestedRow.isCollapsed && nestedRow.subRows?.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let subRow of nestedRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          [ngTemplateOutlet]=\"nestedRowWithSubRows\"\n                          [ngTemplateOutletContext]=\"{\n                            nestedRow: subRow,\n                            depth: depth + 1\n                          }\"\n                        >\n                        </ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowWrappedWithRowLink\n                  >\n                    <ng-container\n                      *ngIf=\"{\n                        row: row,\n                        rowIndex: rowIndex,\n                        depth: depth,\n                        hasSubRows: hasSubRows,\n                        rowIsCollapsed: rowIsCollapsed\n                      } as rowContext\"\n                    >\n                      <ng-container *ngIf=\"row.rowLink; let rl\">\n                        <a\n                          *ngIf=\"isExternalRowLink(rl)\"\n                          [href]=\"rl.href\"\n                          draggable=\"false\"\n                          class=\"row-link\"\n                          [class.grayed]=\"s.display.rowsAreGrayed\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                          ></ng-container>\n                        </a>\n                        <a\n                          *ngIf=\"isInternalRowLink(rl)\"\n                          draggable=\"false\"\n                          [routerLink]=\"rl.routerLink\"\n                          [queryParams]=\"rl.queryParams\"\n                          [queryParamsHandling]=\"rl.queryParamsHandling\"\n                          class=\"row-link\"\n                          [class.grayed]=\"s.display.rowsAreGrayed\"\n                          [class.active]=\"rl.active\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                          ></ng-container>\n                        </a>\n                      </ng-container>\n                      <tr\n                        *ngIf=\"!row.rowLink\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                        ></ng-container>\n                      </tr>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowBody\n                  >\n                    <td\n                      *ngIf=\"\n                        s.selection.allowSelection === true ||\n                        s.selection.allowSelection === 'individual'\n                      \"\n                      class=\"selection-body\"\n                      (click)=\"$event.preventDefault()\"\n                    >\n                      <label\n                        class=\"checkbox-wrapper\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <riv-checkbox\n                          [identifier]=\"'riv-table-selection-' + row.id\"\n                          [value]=\"row.selected\"\n                          (valueChange)=\"selectionChange(row.id, $event)\"\n                          ariaLabel=\"Select row\"\n                        ></riv-checkbox>\n                      </label>\n                    </td>\n                    <td\n                      *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                      class=\"toggle-body\"\n                    >\n                      <!-- This td lines up with the header chevron column -->\n                    </td>\n                    <ng-container\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        index as columnIndex;\n                        trackBy: trackByColumn\n                      \"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          s.display.cellRowSpan(rowIndex, column.key) as span\n                        \"\n                      >\n                        <td\n                          *ngIf=\"span > 0\"\n                          [attr.rowspan]=\"span\"\n                          [class.rs-right-border]=\"\n                            s.display.needsRightBorder(rowIndex, column.key)\n                          \"\n                          [class.pinned]=\"column.pinned\"\n                          [class.advanced]=\"column.dataType === 'advanced'\"\n                          [class.toggleable-cell]=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                          \"\n                          [style.left.px]=\"column.left\"\n                          [style.text-align]=\"column.alignment\"\n                          (click)=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                              ? toggleRowCollapse(row.id)\n                              : handleClick($event, column)\n                          \"\n                        >\n                          <ng-template #cellContent>\n                            <ng-container\n                              *ngIf=\"!blankCellDueToNesting(columnIndex, depth)\"\n                            >\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  cellTemplate || null;\n                                  context: { row: row, column: column }\n                                \"\n                              ></ng-container>\n                            </ng-container>\n                          </ng-template>\n\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <div\n                            *ngIf=\"\n                              showChevronForCell(\n                                columnIndex,\n                                hasSubRows,\n                                depth\n                              );\n                              else cellContent\n                            \"\n                            class=\"toggleable-cell-content\"\n                          >\n                            <riv-icon\n                              class=\"prevent-shrink chevron\"\n                              [name]=\"\n                                rowIsCollapsed ? 'ChevronDown' : 'ChevronUp'\n                              \"\n                              [size]=\"16\"\n                            ></riv-icon>\n                            <div class=\"toggleable-cell-value\">\n                              <ng-container\n                                *ngTemplateOutlet=\"cellContent\"\n                              ></ng-container>\n                            </div>\n                          </div>\n                        </td>\n                      </ng-container>\n                    </ng-container>\n                    <td\n                      *ngIf=\"menuTemplate\"\n                      class=\"menu-body\"\n                      (click)=\"\n                        $event.stopPropagation(); $event.preventDefault()\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          menuTemplate || null;\n                          context: { row: row }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </ng-template>\n\n                  <tr *ngIf=\"s.display.customSummaryRow\">\n                    <td\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        trackBy: trackByColumn\n                      \"\n                      [class.pinned]=\"column.pinned\"\n                      [class.advanced]=\"column.dataType === 'advanced'\"\n                      [style.left.px]=\"column.left\"\n                      [style.text-align]=\"column.alignment\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          summaryTemplate || null;\n                          context: { column: column }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                </ng-container>\n                <ng-template #empty>\n                  <tr>\n                    <td [attr.colspan]=\"s.display.columns.length\">\n                      <riv-zero-state\n                        *ngIf=\"s.display.zeroStateMessage; let message\"\n                        [message]=\"message\"\n                      ></riv-zero-state>\n                    </td>\n                  </tr>\n                </ng-template>\n              </tbody>\n            </table>\n          </div>\n          <div\n            class=\"footer\"\n            *ngIf=\"\n              isGroupResult(s.result) &&\n              group !== null &&\n              group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n              group.rows.length === s.query.grouping.countPerGroup\n            \"\n          >\n            <span\n              rivLink\n              class=\"footer-link\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'viewMoreKeyChange',\n                  viewMoreKey: group.groupData.key.toString()\n                })\n              \"\n              >View all {{ group.totalMatchingRowCount }}</span\n            >\n          </div>\n          <br *ngIf=\"!last\" />\n        </ng-template>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!isGroupResult(s.result) && !s.display.hidePageSizeSelector\"\n          >\n            <span> Results per page: </span>\n            <riv-simple-select\n              [selectedOption]=\"{\n                id: s.query.pagination.pageSize.toString(),\n                title: s.query.pagination.pageSize.toString(),\n                value: s.query.pagination.pageSize\n              }\"\n              (selectedOptionChange)=\"\n                manager?.actions?.next({\n                  type: 'pageSizeChange',\n                  size: $event?.value || 25\n                })\n              \"\n              [optionGroups]=\"pageSizeOptions\"\n              [size]=\"'small'\"\n              [orderBy]=\"'source'\"\n            ></riv-simple-select>\n          </ng-container>\n        </div>\n        <span\n          *ngIf=\"s.result.totalMatchingRowCount > 0 && !isGroupResult(s.result)\"\n          class=\"page-data-indicator\"\n        >\n          {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n            s.query.pagination.pageRowEnd | rivNumber\n          }}\n          of\n          {{ s.result.totalMatchingRowCount | rivNumber }}\n        </span>\n        <div\n          *ngIf=\"s.query.pagination.showControls\"\n          class=\"pagination-controls\"\n        >\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowLeft'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.previous === null\"\n            (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n          ></button>\n          <span\n            *ngIf=\"s.query.pagination.pages[0] > 0\"\n            class=\"truncated-pages left\"\n          >\n            &hellip;\n          </span>\n          <button\n            *ngFor=\"let page of s.query.pagination.pages\"\n            class=\"page\"\n            type=\"button\"\n            [disabled]=\"page === s.query.pagination.page\"\n            [attr.aria-disabled]=\"\n              page === s.query.pagination.page ? 'true' : null\n            \"\n            (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n          >\n            {{ page + 1 }}\n          </button>\n          <span\n            *ngIf=\"\n              s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n              s.query.pagination.pageCount - 1\n            \"\n            class=\"truncated-pages right\"\n          >\n            &hellip;\n          </span>\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowRight'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.next === null\"\n            (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n          ></button>\n        </div>\n      </div>\n    </riv-loading-cover>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}.loading-container{width:100%;display:flex;flex-direction:column;min-height:0}.header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}.header:has(+div>.subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}.header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{flex:1 1 auto;min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+.footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th.toggle-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0}th>riv-menu{width:100%}.header-wrapper{font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}span.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}span.header-wrapper:hover{background-color:var(--black-20)}span.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}span.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}span.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}span.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit;-webkit-user-select:text;user-select:text}a.row-link td{transition:background-color var(--short-transition);-webkit-user-select:text;user-select:text}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td.rs-hover{background-color:var(--surface-light-2)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body,td.toggle-body{padding:0;vertical-align:middle}td.selection-body,td.toggle-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}td[rowspan]:not([rowspan=\"1\"]){border-right:var(--border-width) solid var(--border-light)}td.rs-right-border{border-right:var(--border-width) solid var(--border-light)}a.row-link.active>td{background-color:var(--surface-light-selected)}.prevent-shrink{flex-shrink:0}td.toggleable-cell{cursor:pointer;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);font-weight:var(--font-weight-heavy)}td riv-icon.chevron{vertical-align:middle;margin-right:var(--size-xsmall)}.toggleable-cell-content{display:flex;align-items:center}.toggleable-cell-value{flex:1 1 auto;min-width:0}td.toggle-header{text-align:left}.toggle-header-text{position:sticky;z-index:1;left:calc(var(--size-xxlarge) + var(--size-small))}tr.toggle-header-row td{cursor:pointer;background-color:var(--surface-light-1);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);font-weight:var(--font-weight-heavy)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { manager: [{

package/esm2022/lib/table/table/table-collapse-all/table-collapse-all.component.mjs

@@ -13,10 +13,10 @@ export class TableCollapseAllComponent {
     isAllExpanded(collapseState) {
         return TableCollapseHelpers.isAllExpanded(collapseState);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableCollapseAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableCollapseAllComponent, selector: "riv-table-collapse-all", inputs: { manager: "manager" }, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <button type=\"button\" rivButton (click)=\"toggleAllCollapsed()\">\n    {{ isAllExpanded(s.collapseState) ? 'Collapse all' : 'Expand all' }}\n  </button>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableCollapseAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TableCollapseAllComponent, selector: "riv-table-collapse-all", inputs: { manager: "manager" }, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <button type=\"button\" rivButton (click)=\"toggleAllCollapsed()\">\n    {{ isAllExpanded(s.collapseState) ? 'Collapse all' : 'Expand all' }}\n  </button>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableCollapseAllComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableCollapseAllComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-collapse-all', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <button type=\"button\" rivButton (click)=\"toggleAllCollapsed()\">\n    {{ isAllExpanded(s.collapseState) ? 'Collapse all' : 'Expand all' }}\n  </button>\n</ng-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { manager: [{

package/esm2022/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.mjs

@@ -212,10 +212,10 @@ export class TableColumnSettingsSideSheetComponent {
     hasUnavailableColumnsSection(columns, searching) {
         return columns.unavailableColumns.length > 0 && searching === false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: i2.BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i6.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: i7.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: i8.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i9.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure", "label"], outputs: ["close"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: i2.BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i6.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: i7.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: i8.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i9.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure", "label"], outputs: ["close"] }, { kind: "directive", type: i10.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: "17.3.12", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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=\"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: [{