@rivet-health/design-system 40.35.0 → 40.35.2

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

@@ -8910,6 +8910,50 @@ var TableResultHelpers;
 
 var TableSearchHelpers;
 (function (TableSearchHelpers) {
+    /**
+     * The configured fuse options, without the keys for columns search does not
+     * cover: the ones marked `searchable: false` and the ones turned off in
+     * "Search in". Keys that don't belong to a column are left alone.
+     */
+    function fuseOptionsForSearchColumns(fuseOptions, columns, query) {
+        if (!fuseOptions?.keys)
+            return fuseOptions;
+        const excludedPaths = new Set(Array.from(columns.entries())
+            .filter(([key, column]) => column.searchable === false ||
+            query.searchColumns.get(key) === false)
+            .map(([key, column]) => columnPath(key, column)));
+        return {
+            ...fuseOptions,
+            keys: fuseOptions.keys.filter(key => !excludedPaths.has(fuseKeyPath(key))),
+        };
+    }
+    TableSearchHelpers.fuseOptionsForSearchColumns = fuseOptionsForSearchColumns;
+    /**
+     * Marks the columns with no key in `fuseOptions.keys` as `searchable: false`,
+     * so "Search in" only offers columns that search can cover.
+     */
+    function markColumnsOutsideFuseKeysUnsearchable(columns, fuseOptions) {
+        if (!fuseOptions?.keys)
+            return columns;
+        const keyPaths = new Set(fuseOptions.keys.map(fuseKeyPath));
+        return new Map(Array.from(columns.entries()).map(([key, column]) => [
+            key,
+            keyPaths.has(columnPath(key, column))
+                ? column
+                : { ...column, searchable: false },
+        ]));
+    }
+    TableSearchHelpers.markColumnsOutsideFuseKeysUnsearchable = markColumnsOutsideFuseKeysUnsearchable;
+    function columnPath(key, column) {
+        return column.orderKey?.toString() ?? key.toString();
+    }
+    function fuseKeyPath(key) {
+        if (typeof key === 'string')
+            return key;
+        if (Array.isArray(key))
+            return key.join('.');
+        return Array.isArray(key.name) ? key.name.join('.') : key.name;
+    }
     function getSearchColumnsSelectedState(state, expectedValue) {
         switch (expectedValue) {
             case 'all':
@@ -10034,43 +10078,15 @@ var RivTable;
      */
     RivTable.NestedPaginateByOptions = ['bottomRows', 'topRows'];
     function createInMemoryManager(fetchDataset, columns, pluralEntityName, options) {
+        columns = TableSearchHelpers.markColumnsOutsideFuseKeysUnsearchable(columns, options?.fuseOptions);
         let data;
         let fuse;
         const source = async (query, mostRecentAction) => {
-            //For inMemoryManagers that do not utilize searchColumns,
-            //we do not want to overwrite their fuseOptions
-            if (mostRecentAction.type === 'load') {
-                //Prevent searching on columns that are in fuse options but not supported by search.
-                const nonSearchableColumnsKeys = options?.fuseOptions?.keys
-                    ? Array.from(columns.entries())
-                        .filter(([key, column]) => {
-                        return column.searchable == false;
-                    })
-                        .map(([key, column]) => {
-                        return column.orderKey?.toString() || key.toString();
-                    })
-                    : undefined;
-                const fuseOptions = options?.fuseOptions && nonSearchableColumnsKeys
-                    ? {
-                        ...options?.fuseOptions,
-                        keys: options?.fuseOptions?.keys?.filter(k => !nonSearchableColumnsKeys.includes(k.toString())),
-                    }
-                    : options?.fuseOptions;
-                data = await fetchDataset();
-                fuse = new Fuse(data, fuseOptions);
-            }
-            if (mostRecentAction.type === 'searchColumnsChange' ||
+            if (mostRecentAction.type === 'load' ||
+                mostRecentAction.type === 'searchColumnsChange' ||
                 mostRecentAction.type === 'toggleAllSearchColumns') {
                 data = await fetchDataset();
-                fuse = new Fuse(data, {
-                    ...options?.fuseOptions,
-                    keys: Array.from(query.searchColumns.entries())
-                        .filter(([_, value]) => !!value)
-                        .map(([key, _]) => {
-                        const columnKey = columns.get(key);
-                        return columnKey?.orderKey || key;
-                    }),
-                });
+                fuse = new Fuse(data, TableSearchHelpers.fuseOptionsForSearchColumns(options?.fuseOptions, columns, query));
             }
             const orderColumn = query.order
                 ? columns.get(query.order.column)?.orderKey
@@ -10126,47 +10142,18 @@ var RivTable;
     }
     RivTable.createInMemoryManager = createInMemoryManager;
     function createInMemoryManagerNested(fetchDataset, columns, pluralEntityName, options) {
+        columns = TableSearchHelpers.markColumnsOutsideFuseKeysUnsearchable(columns, options?.fuseOptions);
         let data;
         let rowsFromData;
         // The fuse will search the individual rows
         let fuse;
         const source = async (query, mostRecentAction) => {
-            //For inMemoryManagers that do not utilize searchColumns,
-            //we do not want to overwrite their fuseOptions
-            if (mostRecentAction.type === 'load') {
-                //Prevent searching on columns that are in fuse options but not supported by search.
-                const nonSearchableColumnsKeys = options?.fuseOptions?.keys
-                    ? Array.from(columns.entries())
-                        .filter(([key, column]) => {
-                        return column.searchable == false;
-                    })
-                        .map(([key, column]) => {
-                        return column.orderKey?.toString() || key.toString();
-                    })
-                    : undefined;
-                const fuseOptions = options?.fuseOptions && nonSearchableColumnsKeys
-                    ? {
-                        ...options?.fuseOptions,
-                        keys: options?.fuseOptions?.keys?.filter(k => !nonSearchableColumnsKeys.includes(k.toString())),
-                    }
-                    : options?.fuseOptions;
-                data = await fetchDataset();
-                rowsFromData = TableResultHelpers.getAllRowsFromNestedHeaders(data);
-                fuse = new Fuse(rowsFromData, fuseOptions);
-            }
-            if (mostRecentAction.type === 'searchColumnsChange' ||
+            if (mostRecentAction.type === 'load' ||
+                mostRecentAction.type === 'searchColumnsChange' ||
                 mostRecentAction.type === 'toggleAllSearchColumns') {
                 data = await fetchDataset();
                 rowsFromData = TableResultHelpers.getAllRowsFromNestedHeaders(data);
-                fuse = new Fuse(rowsFromData, {
-                    ...options?.fuseOptions,
-                    keys: Array.from(query.searchColumns.entries())
-                        .filter(([_, value]) => !!value)
-                        .map(([key, _]) => {
-                        const columnKey = columns.get(key);
-                        return columnKey?.orderKey || key;
-                    }),
-                });
+                fuse = new Fuse(rowsFromData, TableSearchHelpers.fuseOptionsForSearchColumns(options?.fuseOptions, columns, query));
             }
             const orderColumn = query.order
                 ? columns.get(query.order.column)?.orderKey
@@ -11781,10 +11768,10 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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]=\"s.display.columnsAreReorderable\"\n                    droppable=\"true\"\n                    class=\"drop-zone\"\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                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i\n                    \"\n                  >\n                    <div\n                      *ngIf=\"\n                        !column.orderable &&\n                        !column.filterable &&\n                        !s.display.columnsAreFreezable &&\n                        !s.display.columnsAreHideable\n                      \"\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                    </div>\n                    <riv-menu\n                      *ngIf=\"\n                        column.orderable ||\n                        column.filterable ||\n                        s.display.columnsAreFreezable ||\n                        s.display.columnsAreHideable\n                      \"\n                    >\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                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (s.display.columnsAreFreezable ||\n                            s.display.columnsAreHideable)\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"s.display.columnsAreFreezable\">\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=\"s.display.columnsAreHideable\"\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>\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                          {{ headerRow.headerText }}\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                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <riv-icon\n                            *ngIf=\"\n                              showChevronForCell(columnIndex, hasSubRows, depth)\n                            \"\n                            class=\"prevent-shrink chevron\"\n                            [name]=\"\n                              rowIsCollapsed ? 'ChevronDown' : 'ChevronUp'\n                            \"\n                            [size]=\"16\"\n                          ></riv-icon>\n\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                        </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{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)}td.toggle-header{text-align:left}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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: 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: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: SrOnlyComponent, selector: "riv-sr-only" }, { kind: "component", type: TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: ["dragResize"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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]=\"s.display.columnsAreReorderable\"\n                    droppable=\"true\"\n                    class=\"drop-zone\"\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                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i\n                    \"\n                  >\n                    <div\n                      *ngIf=\"\n                        !column.orderable &&\n                        !column.filterable &&\n                        !s.display.columnsAreFreezable &&\n                        !s.display.columnsAreHideable\n                      \"\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                    </div>\n                    <riv-menu\n                      *ngIf=\"\n                        column.orderable ||\n                        column.filterable ||\n                        s.display.columnsAreFreezable ||\n                        s.display.columnsAreHideable\n                      \"\n                    >\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                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (s.display.columnsAreFreezable ||\n                            s.display.columnsAreHideable)\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"s.display.columnsAreFreezable\">\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=\"s.display.columnsAreHideable\"\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>\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                          {{ headerRow.headerText }}\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{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}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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: 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: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: SrOnlyComponent, selector: "riv-sr-only" }, { kind: "component", type: TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: ["dragResize"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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]=\"s.display.columnsAreReorderable\"\n                    droppable=\"true\"\n                    class=\"drop-zone\"\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                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i\n                    \"\n                  >\n                    <div\n                      *ngIf=\"\n                        !column.orderable &&\n                        !column.filterable &&\n                        !s.display.columnsAreFreezable &&\n                        !s.display.columnsAreHideable\n                      \"\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                    </div>\n                    <riv-menu\n                      *ngIf=\"\n                        column.orderable ||\n                        column.filterable ||\n                        s.display.columnsAreFreezable ||\n                        s.display.columnsAreHideable\n                      \"\n                    >\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                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (s.display.columnsAreFreezable ||\n                            s.display.columnsAreHideable)\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"s.display.columnsAreFreezable\">\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=\"s.display.columnsAreHideable\"\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>\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                          {{ headerRow.headerText }}\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                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <riv-icon\n                            *ngIf=\"\n                              showChevronForCell(columnIndex, hasSubRows, depth)\n                            \"\n                            class=\"prevent-shrink chevron\"\n                            [name]=\"\n                              rowIsCollapsed ? 'ChevronDown' : 'ChevronUp'\n                            \"\n                            [size]=\"16\"\n                          ></riv-icon>\n\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                        </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{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)}td.toggle-header{text-align:left}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"] }]
+            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]=\"s.display.columnsAreReorderable\"\n                    droppable=\"true\"\n                    class=\"drop-zone\"\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                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i\n                    \"\n                  >\n                    <div\n                      *ngIf=\"\n                        !column.orderable &&\n                        !column.filterable &&\n                        !s.display.columnsAreFreezable &&\n                        !s.display.columnsAreHideable\n                      \"\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                    </div>\n                    <riv-menu\n                      *ngIf=\"\n                        column.orderable ||\n                        column.filterable ||\n                        s.display.columnsAreFreezable ||\n                        s.display.columnsAreHideable\n                      \"\n                    >\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                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (s.display.columnsAreFreezable ||\n                            s.display.columnsAreHideable)\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"s.display.columnsAreFreezable\">\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=\"s.display.columnsAreHideable\"\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>\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                          {{ headerRow.headerText }}\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{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}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: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { manager: [{
                 type: Input
             }], cellTemplate: [{