ngwr 11.1.0 → 11.2.0

package/fesm2022/ngwr-table.mjs

@@ -404,7 +404,17 @@ class WrTable {
     /** Accessible name of a group band's collapse toggle. Falls back to `table.toggleGroup`. */
     toggleGroupLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toggleGroupLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the loading overlay. Falls back to `table.loading`. */
+    loadingLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
     resolvedEmptyLabel = useI18nText(this.emptyLabel, 'table.empty', 'No data');
+    /**
+     * The loading overlay was a bare spinner in a `<div>` — a busy state with no
+     * accessible name, which a screen reader reports as nothing at all while the
+     * table sits empty. `table.loading` shipped in both catalogs for it and was
+     * never read.
+     */
+    resolvedLoadingLabel = useI18nText(this.loadingLabel, 'table.loading', 'Loading…');
     resolvedSortLabel = useI18nText(this.sortLabel, 'table.sort', 'Sort column');
     resolvedSelectAllLabel = useI18nText(this.selectAllLabel, 'table.selectAll', 'Select all rows');
     resolvedSelectRowLabel = useI18nText(this.selectRowLabel, 'table.selectRow', 'Select row');
@@ -1335,7 +1345,7 @@ class WrTable {
         return this.cellMap().get(String(key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrTable, isStandalone: true, selector: "wr-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columnOrder: { classPropertyName: "columnOrder", publicName: "columnOrder", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, treeColumn: { classPropertyName: "treeColumn", publicName: "treeColumn", isSignal: true, isRequired: false, transformFunction: null }, toggleRowLabel: { classPropertyName: "toggleRowLabel", publicName: "toggleRowLabel", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, groupSummary: { classPropertyName: "groupSummary", publicName: "groupSummary", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowLabel: { classPropertyName: "selectRowLabel", publicName: "selectRowLabel", isSignal: true, isRequired: false, transformFunction: null }, expandRowLabel: { classPropertyName: "expandRowLabel", publicName: "expandRowLabel", isSignal: true, isRequired: false, transformFunction: null }, selectGroupLabel: { classPropertyName: "selectGroupLabel", publicName: "selectGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleGroupLabel: { classPropertyName: "toggleGroupLabel", publicName: "toggleGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnOrder: "columnOrderChange", selection: "selectionChange", expanded: "expandedChange", collapsedGroups: "collapsedGroupsChange", sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { properties: { "class.wr-table--responsive": "responsive()", "class.wr-table--virtual": "virtualized()" }, classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }, { propertyName: "expandTpl", first: true, predicate: WrTableExpand, descendants: true, isSignal: true }, { propertyName: "groupTpl", first: true, predicate: WrTableGroupHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerCells", predicate: ["thCell"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div\n  class=\"wr-table__scroll\"\n  #scroll\n  [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n  [attr.tabindex]=\"virtualized() ? 0 : null\"\n>\n  <table\n    class=\"wr-table__table\"\n    [class.wr-table__table--fixed]=\"fixedLayoutActive()\"\n    [style.--wr-table-row-h.px]=\"virtualized() ? effRowH() : null\"\n    [attr.aria-rowcount]=\"virtualized() ? renderRows().length + 1 + (hasSummary() && items()?.length ? 1 : 0) : null\"\n    [attr.role]=\"treeMode() ? 'treegrid' : null\"\n  >\n    <colgroup>\n      @if (rowSelection()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @if (expandable()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @for (col of displayColumns(); track col.key) {\n        <col [style.width.px]=\"colWidth(col.key)\" />\n      }\n    </colgroup>\n    <thead>\n      <tr\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        [cdkDropListSortPredicate]=\"sortPredicate\"\n        (cdkDropListDropped)=\"onColumnDrop($event)\"\n      >\n        @if (rowSelection()) {\n          <th class=\"wr-table__th wr-table__th--select\">\n            @if (rowSelection() === 'multiple') {\n              <wr-checkbox\n                size=\"sm\"\n                [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                (checkedChange)=\"toggleAll($event)\"\n                [ariaLabel]=\"resolvedSelectAllLabel()\"\n              />\n            }\n          </th>\n        }\n        @if (expandable()) {\n          <th class=\"wr-table__th wr-table__th--expand\"></th>\n        }\n        @for (col of displayColumns(); track col.key) {\n          <th\n            #thCell\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderable() || !!col.column.pin\"\n            class=\"wr-table__th\"\n            [attr.aria-sort]=\"ariaSortFor(col.key, col.column.sortable)\"\n            [class.wr-table__th--draggable]=\"reorderable() && !col.column.pin\"\n            [class.wr-table__th--pin-left]=\"col.column.pin === 'left'\"\n            [class.wr-table__th--pin-right]=\"col.column.pin === 'right'\"\n            [class.wr-table__th--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n            [class.wr-table__th--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n            [style.left.px]=\"leftPin(col.key)\"\n            [style.right.px]=\"rightPin(col.key)\"\n          >\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ col.column.title }}</span>\n\n              @if (col.column.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  [attr.aria-label]=\"resolvedSortLabel()\"\n                  (click)=\"cycleSort(col.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(col.key)\" />\n                </button>\n              }\n\n              @if (col.column.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(col.key, $event)\" />\n                }\n              }\n            </div>\n\n            @if (col.column.resizable) {\n              <span\n                class=\"wr-table__resize-handle\"\n                aria-hidden=\"true\"\n                (pointerdown)=\"onResizeStart($event, col.key, thCell)\"\n                (pointermove)=\"onResizeMove($event)\"\n                (pointerup)=\"onResizeEnd($event)\"\n                (pointercancel)=\"onResizeEnd($event)\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems()) {\n        @if (virtualized() && virtualWindow().padTop > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padTop\"></td>\n          </tr>\n        }\n        @for (entry of windowRows(); track entry.id; let i = $index) {\n          @if (entry.kind === 'group') {\n            <tr class=\"wr-table__group-row\" [class.wr-table__group-row--collapsed]=\"entry.group.collapsed\">\n              <td class=\"wr-table__group-cell\" [attr.colspan]=\"totalCols()\">\n                <!-- The cell spans the full table width; this inner box is what sticks. -->\n                <div class=\"wr-table__group-inner\">\n                  @if (rowSelection() === 'multiple') {\n                    <wr-checkbox\n                      class=\"wr-table__group-select\"\n                      size=\"sm\"\n                      [checked]=\"groupChecked(entry.group.rows)\"\n                      [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n                      (checkedChange)=\"toggleGroupSelection(entry.group.rows, $event)\"\n                      [ariaLabel]=\"resolvedSelectGroupLabel()\"\n                    />\n                  }\n                  @if (groupTemplate(); as tpl) {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle wr-table__group-toggle--icon\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      [attr.aria-label]=\"resolvedToggleGroupLabel()\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                    </button>\n                    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"entry.group\" />\n                  } @else {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                      <span class=\"wr-table__group-label\">{{ entry.group.label }}</span>\n                      @if (showGroupCount()) {\n                        <span class=\"wr-table__group-count\">{{ entry.group.count }}</span>\n                      }\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          } @else if (entry.kind === 'group-foot') {\n            <tr class=\"wr-table__group-foot-row\">\n              @if (rowSelection()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__foot-cell\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                >\n                  {{ entry.summaries.get(col.key) ?? '' }}\n                </td>\n              }\n            </tr>\n          } @else {\n            <tr\n              class=\"wr-table__tr\"\n              [class.wr-table__tr--selected]=\"rowSelection() && isRowSelected(entry.row)\"\n              [class.wr-table__tr--child]=\"entry.depth > 0\"\n              [attr.aria-rowindex]=\"virtualized() ? windowStart() + i + 2 : null\"\n              [attr.aria-level]=\"treeMode() ? entry.depth + 1 : null\"\n              [attr.aria-posinset]=\"treeMode() ? entry.posinset : null\"\n              [attr.aria-setsize]=\"treeMode() ? entry.setsize : null\"\n              [attr.aria-expanded]=\"entry.open\"\n              [style.--wr-table-depth]=\"treeMode() ? entry.depth : null\"\n            >\n              @if (rowSelection()) {\n                <td class=\"wr-table__td wr-table__td--select\">\n                  <wr-checkbox\n                    size=\"sm\"\n                    [checked]=\"isRowSelected(entry.row)\"\n                    (checkedChange)=\"toggleRow(entry.row, $event)\"\n                    [ariaLabel]=\"resolvedSelectRowLabel()\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__td wr-table__td--expand\">\n                  <button\n                    type=\"button\"\n                    class=\"wr-table__expand-btn\"\n                    [class.wr-table__expand-btn--open]=\"isExpanded(entry.row)\"\n                    [attr.aria-expanded]=\"isExpanded(entry.row)\"\n                    [attr.aria-label]=\"resolvedExpandRowLabel()\"\n                    (click)=\"toggleExpand(entry.row)\"\n                  >\n                    <svg\n                      class=\"wr-icon__svg wr-table__expand-icon\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"m9 18 6-6-6-6\" />\n                    </svg>\n                  </button>\n                </td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__td\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                  [attr.data-label]=\"col.column.title\"\n                >\n                  @if (treeMode() && col.key === treeColumnKey()) {\n                    <span class=\"wr-table__tree-lead\">\n                      @if (entry.parent) {\n                        <button\n                          type=\"button\"\n                          class=\"wr-table__tree-toggle\"\n                          [class.wr-table__tree-toggle--open]=\"entry.open\"\n                          [attr.aria-expanded]=\"entry.open\"\n                          [attr.aria-label]=\"resolvedToggleRowLabel()\"\n                          (click)=\"toggleTreeRow(entry.row)\"\n                        >\n                          <svg\n                            class=\"wr-icon__svg wr-table__tree-icon\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"2\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                            aria-hidden=\"true\"\n                          >\n                            <path d=\"m9 18 6-6-6-6\" />\n                          </svg>\n                        </button>\n                      } @else {\n                        <span class=\"wr-table__tree-toggle wr-table__tree-toggle--leaf\" aria-hidden=\"true\"></span>\n                      }\n                    </span>\n                  }\n                  @if (templateFor(col.key); as tpl) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tpl\"\n                      [ngTemplateOutletContext]=\"cellContext(entry.row, col.key, col.column)\"\n                    />\n                  } @else {\n                    {{ getValue(entry.row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n            @if (expandable() && isExpanded(entry.row)) {\n              <tr class=\"wr-table__detail-row\">\n                <td class=\"wr-table__detail\" [attr.colspan]=\"totalCols()\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"expandTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"expandContext(entry.row)\"\n                  />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"totalCols()\">{{ resolvedEmptyLabel() }}</td>\n          </tr>\n        }\n        @if (virtualized() && virtualWindow().padBottom > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padBottom\"></td>\n          </tr>\n        }\n      }\n    </tbody>\n\n    @if (hasSummary() && items()?.length) {\n      <tfoot>\n        <tr class=\"wr-table__foot-row\">\n          @if (rowSelection()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @if (expandable()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @for (col of displayColumns(); track col.key) {\n            <td\n              class=\"wr-table__foot-cell\"\n              [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n              [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n              [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n              [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n              [style.left.px]=\"leftPin(col.key)\"\n              [style.right.px]=\"rightPin(col.key)\"\n            >\n              {{ summaryFor(col.key) }}\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (showPager()) {\n  <div class=\"wr-table__pager\">\n    <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: WrCheckbox, selector: "wr-checkbox", inputs: ["id", "checkboxValue", "ariaLabel", "checked", "disabled", "size", "icon", "indeterminate"], outputs: ["checkedChange", "touch"] }, { kind: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "responsive", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel", "label"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }, { kind: "component", type: WrTableSort, selector: "wr-table-sort", inputs: ["direction"] }, { kind: "component", type: WrTableFilter, selector: "wr-table-filter", inputs: ["filterLabel", "noMatchesLabel", "items"], outputs: ["selectionChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrTable, isStandalone: true, selector: "wr-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columnOrder: { classPropertyName: "columnOrder", publicName: "columnOrder", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, treeColumn: { classPropertyName: "treeColumn", publicName: "treeColumn", isSignal: true, isRequired: false, transformFunction: null }, toggleRowLabel: { classPropertyName: "toggleRowLabel", publicName: "toggleRowLabel", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, groupSummary: { classPropertyName: "groupSummary", publicName: "groupSummary", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowLabel: { classPropertyName: "selectRowLabel", publicName: "selectRowLabel", isSignal: true, isRequired: false, transformFunction: null }, expandRowLabel: { classPropertyName: "expandRowLabel", publicName: "expandRowLabel", isSignal: true, isRequired: false, transformFunction: null }, selectGroupLabel: { classPropertyName: "selectGroupLabel", publicName: "selectGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleGroupLabel: { classPropertyName: "toggleGroupLabel", publicName: "toggleGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnOrder: "columnOrderChange", selection: "selectionChange", expanded: "expandedChange", collapsedGroups: "collapsedGroupsChange", sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { properties: { "class.wr-table--responsive": "responsive()", "class.wr-table--virtual": "virtualized()" }, classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }, { propertyName: "expandTpl", first: true, predicate: WrTableExpand, descendants: true, isSignal: true }, { propertyName: "groupTpl", first: true, predicate: WrTableGroupHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerCells", predicate: ["thCell"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n  <div class=\"wr-table__loading\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel()\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div\n  class=\"wr-table__scroll\"\n  #scroll\n  [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n  [attr.tabindex]=\"virtualized() ? 0 : null\"\n>\n  <table\n    class=\"wr-table__table\"\n    [class.wr-table__table--fixed]=\"fixedLayoutActive()\"\n    [style.--wr-table-row-h.px]=\"virtualized() ? effRowH() : null\"\n    [attr.aria-rowcount]=\"virtualized() ? renderRows().length + 1 + (hasSummary() && items()?.length ? 1 : 0) : null\"\n    [attr.role]=\"treeMode() ? 'treegrid' : null\"\n  >\n    <colgroup>\n      @if (rowSelection()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @if (expandable()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @for (col of displayColumns(); track col.key) {\n        <col [style.width.px]=\"colWidth(col.key)\" />\n      }\n    </colgroup>\n    <thead>\n      <tr\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        [cdkDropListSortPredicate]=\"sortPredicate\"\n        (cdkDropListDropped)=\"onColumnDrop($event)\"\n      >\n        @if (rowSelection()) {\n          <th class=\"wr-table__th wr-table__th--select\">\n            @if (rowSelection() === 'multiple') {\n              <wr-checkbox\n                size=\"sm\"\n                [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                (checkedChange)=\"toggleAll($event)\"\n                [ariaLabel]=\"resolvedSelectAllLabel()\"\n              />\n            }\n          </th>\n        }\n        @if (expandable()) {\n          <th class=\"wr-table__th wr-table__th--expand\"></th>\n        }\n        @for (col of displayColumns(); track col.key) {\n          <th\n            #thCell\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderable() || !!col.column.pin\"\n            class=\"wr-table__th\"\n            [attr.aria-sort]=\"ariaSortFor(col.key, col.column.sortable)\"\n            [class.wr-table__th--draggable]=\"reorderable() && !col.column.pin\"\n            [class.wr-table__th--pin-left]=\"col.column.pin === 'left'\"\n            [class.wr-table__th--pin-right]=\"col.column.pin === 'right'\"\n            [class.wr-table__th--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n            [class.wr-table__th--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n            [style.left.px]=\"leftPin(col.key)\"\n            [style.right.px]=\"rightPin(col.key)\"\n          >\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ col.column.title }}</span>\n\n              @if (col.column.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  [attr.aria-label]=\"resolvedSortLabel()\"\n                  (click)=\"cycleSort(col.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(col.key)\" />\n                </button>\n              }\n\n              @if (col.column.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(col.key, $event)\" />\n                }\n              }\n            </div>\n\n            @if (col.column.resizable) {\n              <span\n                class=\"wr-table__resize-handle\"\n                aria-hidden=\"true\"\n                (pointerdown)=\"onResizeStart($event, col.key, thCell)\"\n                (pointermove)=\"onResizeMove($event)\"\n                (pointerup)=\"onResizeEnd($event)\"\n                (pointercancel)=\"onResizeEnd($event)\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems()) {\n        @if (virtualized() && virtualWindow().padTop > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padTop\"></td>\n          </tr>\n        }\n        @for (entry of windowRows(); track entry.id; let i = $index) {\n          @if (entry.kind === 'group') {\n            <tr class=\"wr-table__group-row\" [class.wr-table__group-row--collapsed]=\"entry.group.collapsed\">\n              <td class=\"wr-table__group-cell\" [attr.colspan]=\"totalCols()\">\n                <!-- The cell spans the full table width; this inner box is what sticks. -->\n                <div class=\"wr-table__group-inner\">\n                  @if (rowSelection() === 'multiple') {\n                    <wr-checkbox\n                      class=\"wr-table__group-select\"\n                      size=\"sm\"\n                      [checked]=\"groupChecked(entry.group.rows)\"\n                      [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n                      (checkedChange)=\"toggleGroupSelection(entry.group.rows, $event)\"\n                      [ariaLabel]=\"resolvedSelectGroupLabel()\"\n                    />\n                  }\n                  @if (groupTemplate(); as tpl) {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle wr-table__group-toggle--icon\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      [attr.aria-label]=\"resolvedToggleGroupLabel()\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                    </button>\n                    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"entry.group\" />\n                  } @else {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                      <span class=\"wr-table__group-label\">{{ entry.group.label }}</span>\n                      @if (showGroupCount()) {\n                        <span class=\"wr-table__group-count\">{{ entry.group.count }}</span>\n                      }\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          } @else if (entry.kind === 'group-foot') {\n            <tr class=\"wr-table__group-foot-row\">\n              @if (rowSelection()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__foot-cell\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                >\n                  {{ entry.summaries.get(col.key) ?? '' }}\n                </td>\n              }\n            </tr>\n          } @else {\n            <tr\n              class=\"wr-table__tr\"\n              [class.wr-table__tr--selected]=\"rowSelection() && isRowSelected(entry.row)\"\n              [class.wr-table__tr--child]=\"entry.depth > 0\"\n              [attr.aria-rowindex]=\"virtualized() ? windowStart() + i + 2 : null\"\n              [attr.aria-level]=\"treeMode() ? entry.depth + 1 : null\"\n              [attr.aria-posinset]=\"treeMode() ? entry.posinset : null\"\n              [attr.aria-setsize]=\"treeMode() ? entry.setsize : null\"\n              [attr.aria-expanded]=\"entry.open\"\n              [style.--wr-table-depth]=\"treeMode() ? entry.depth : null\"\n            >\n              @if (rowSelection()) {\n                <td class=\"wr-table__td wr-table__td--select\">\n                  <wr-checkbox\n                    size=\"sm\"\n                    [checked]=\"isRowSelected(entry.row)\"\n                    (checkedChange)=\"toggleRow(entry.row, $event)\"\n                    [ariaLabel]=\"resolvedSelectRowLabel()\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__td wr-table__td--expand\">\n                  <button\n                    type=\"button\"\n                    class=\"wr-table__expand-btn\"\n                    [class.wr-table__expand-btn--open]=\"isExpanded(entry.row)\"\n                    [attr.aria-expanded]=\"isExpanded(entry.row)\"\n                    [attr.aria-label]=\"resolvedExpandRowLabel()\"\n                    (click)=\"toggleExpand(entry.row)\"\n                  >\n                    <svg\n                      class=\"wr-icon__svg wr-table__expand-icon\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"m9 18 6-6-6-6\" />\n                    </svg>\n                  </button>\n                </td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__td\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                  [attr.data-label]=\"col.column.title\"\n                >\n                  @if (treeMode() && col.key === treeColumnKey()) {\n                    <span class=\"wr-table__tree-lead\">\n                      @if (entry.parent) {\n                        <button\n                          type=\"button\"\n                          class=\"wr-table__tree-toggle\"\n                          [class.wr-table__tree-toggle--open]=\"entry.open\"\n                          [attr.aria-expanded]=\"entry.open\"\n                          [attr.aria-label]=\"resolvedToggleRowLabel()\"\n                          (click)=\"toggleTreeRow(entry.row)\"\n                        >\n                          <svg\n                            class=\"wr-icon__svg wr-table__tree-icon\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"2\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                            aria-hidden=\"true\"\n                          >\n                            <path d=\"m9 18 6-6-6-6\" />\n                          </svg>\n                        </button>\n                      } @else {\n                        <span class=\"wr-table__tree-toggle wr-table__tree-toggle--leaf\" aria-hidden=\"true\"></span>\n                      }\n                    </span>\n                  }\n                  @if (templateFor(col.key); as tpl) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tpl\"\n                      [ngTemplateOutletContext]=\"cellContext(entry.row, col.key, col.column)\"\n                    />\n                  } @else {\n                    {{ getValue(entry.row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n            @if (expandable() && isExpanded(entry.row)) {\n              <tr class=\"wr-table__detail-row\">\n                <td class=\"wr-table__detail\" [attr.colspan]=\"totalCols()\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"expandTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"expandContext(entry.row)\"\n                  />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"totalCols()\">{{ resolvedEmptyLabel() }}</td>\n          </tr>\n        }\n        @if (virtualized() && virtualWindow().padBottom > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padBottom\"></td>\n          </tr>\n        }\n      }\n    </tbody>\n\n    @if (hasSummary() && items()?.length) {\n      <tfoot>\n        <tr class=\"wr-table__foot-row\">\n          @if (rowSelection()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @if (expandable()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @for (col of displayColumns(); track col.key) {\n            <td\n              class=\"wr-table__foot-cell\"\n              [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n              [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n              [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n              [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n              [style.left.px]=\"leftPin(col.key)\"\n              [style.right.px]=\"rightPin(col.key)\"\n            >\n              {{ summaryFor(col.key) }}\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (showPager()) {\n  <div class=\"wr-table__pager\">\n    <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: WrCheckbox, selector: "wr-checkbox", inputs: ["id", "checkboxValue", "ariaLabel", "checked", "disabled", "size", "icon", "indeterminate"], outputs: ["checkedChange", "touch"] }, { kind: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "responsive", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel", "label"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }, { kind: "component", type: WrTableSort, selector: "wr-table-sort", inputs: ["direction"] }, { kind: "component", type: WrTableFilter, selector: "wr-table-filter", inputs: ["filterLabel", "noMatchesLabel", "items"], outputs: ["selectionChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTable, decorators: [{
             type: Component,
@@ -1343,8 +1353,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         class: 'wr-table',
                         '[class.wr-table--responsive]': 'responsive()',
                         '[class.wr-table--virtual]': 'virtualized()',
-                    }, imports: [NgTemplateOutlet, CdkDropList, CdkDrag, WrCheckbox, WrPagination, WrSpinner, WrTableSort, WrTableFilter], template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div\n  class=\"wr-table__scroll\"\n  #scroll\n  [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n  [attr.tabindex]=\"virtualized() ? 0 : null\"\n>\n  <table\n    class=\"wr-table__table\"\n    [class.wr-table__table--fixed]=\"fixedLayoutActive()\"\n    [style.--wr-table-row-h.px]=\"virtualized() ? effRowH() : null\"\n    [attr.aria-rowcount]=\"virtualized() ? renderRows().length + 1 + (hasSummary() && items()?.length ? 1 : 0) : null\"\n    [attr.role]=\"treeMode() ? 'treegrid' : null\"\n  >\n    <colgroup>\n      @if (rowSelection()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @if (expandable()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @for (col of displayColumns(); track col.key) {\n        <col [style.width.px]=\"colWidth(col.key)\" />\n      }\n    </colgroup>\n    <thead>\n      <tr\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        [cdkDropListSortPredicate]=\"sortPredicate\"\n        (cdkDropListDropped)=\"onColumnDrop($event)\"\n      >\n        @if (rowSelection()) {\n          <th class=\"wr-table__th wr-table__th--select\">\n            @if (rowSelection() === 'multiple') {\n              <wr-checkbox\n                size=\"sm\"\n                [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                (checkedChange)=\"toggleAll($event)\"\n                [ariaLabel]=\"resolvedSelectAllLabel()\"\n              />\n            }\n          </th>\n        }\n        @if (expandable()) {\n          <th class=\"wr-table__th wr-table__th--expand\"></th>\n        }\n        @for (col of displayColumns(); track col.key) {\n          <th\n            #thCell\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderable() || !!col.column.pin\"\n            class=\"wr-table__th\"\n            [attr.aria-sort]=\"ariaSortFor(col.key, col.column.sortable)\"\n            [class.wr-table__th--draggable]=\"reorderable() && !col.column.pin\"\n            [class.wr-table__th--pin-left]=\"col.column.pin === 'left'\"\n            [class.wr-table__th--pin-right]=\"col.column.pin === 'right'\"\n            [class.wr-table__th--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n            [class.wr-table__th--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n            [style.left.px]=\"leftPin(col.key)\"\n            [style.right.px]=\"rightPin(col.key)\"\n          >\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ col.column.title }}</span>\n\n              @if (col.column.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  [attr.aria-label]=\"resolvedSortLabel()\"\n                  (click)=\"cycleSort(col.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(col.key)\" />\n                </button>\n              }\n\n              @if (col.column.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(col.key, $event)\" />\n                }\n              }\n            </div>\n\n            @if (col.column.resizable) {\n              <span\n                class=\"wr-table__resize-handle\"\n                aria-hidden=\"true\"\n                (pointerdown)=\"onResizeStart($event, col.key, thCell)\"\n                (pointermove)=\"onResizeMove($event)\"\n                (pointerup)=\"onResizeEnd($event)\"\n                (pointercancel)=\"onResizeEnd($event)\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems()) {\n        @if (virtualized() && virtualWindow().padTop > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padTop\"></td>\n          </tr>\n        }\n        @for (entry of windowRows(); track entry.id; let i = $index) {\n          @if (entry.kind === 'group') {\n            <tr class=\"wr-table__group-row\" [class.wr-table__group-row--collapsed]=\"entry.group.collapsed\">\n              <td class=\"wr-table__group-cell\" [attr.colspan]=\"totalCols()\">\n                <!-- The cell spans the full table width; this inner box is what sticks. -->\n                <div class=\"wr-table__group-inner\">\n                  @if (rowSelection() === 'multiple') {\n                    <wr-checkbox\n                      class=\"wr-table__group-select\"\n                      size=\"sm\"\n                      [checked]=\"groupChecked(entry.group.rows)\"\n                      [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n                      (checkedChange)=\"toggleGroupSelection(entry.group.rows, $event)\"\n                      [ariaLabel]=\"resolvedSelectGroupLabel()\"\n                    />\n                  }\n                  @if (groupTemplate(); as tpl) {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle wr-table__group-toggle--icon\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      [attr.aria-label]=\"resolvedToggleGroupLabel()\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                    </button>\n                    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"entry.group\" />\n                  } @else {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                      <span class=\"wr-table__group-label\">{{ entry.group.label }}</span>\n                      @if (showGroupCount()) {\n                        <span class=\"wr-table__group-count\">{{ entry.group.count }}</span>\n                      }\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          } @else if (entry.kind === 'group-foot') {\n            <tr class=\"wr-table__group-foot-row\">\n              @if (rowSelection()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__foot-cell\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                >\n                  {{ entry.summaries.get(col.key) ?? '' }}\n                </td>\n              }\n            </tr>\n          } @else {\n            <tr\n              class=\"wr-table__tr\"\n              [class.wr-table__tr--selected]=\"rowSelection() && isRowSelected(entry.row)\"\n              [class.wr-table__tr--child]=\"entry.depth > 0\"\n              [attr.aria-rowindex]=\"virtualized() ? windowStart() + i + 2 : null\"\n              [attr.aria-level]=\"treeMode() ? entry.depth + 1 : null\"\n              [attr.aria-posinset]=\"treeMode() ? entry.posinset : null\"\n              [attr.aria-setsize]=\"treeMode() ? entry.setsize : null\"\n              [attr.aria-expanded]=\"entry.open\"\n              [style.--wr-table-depth]=\"treeMode() ? entry.depth : null\"\n            >\n              @if (rowSelection()) {\n                <td class=\"wr-table__td wr-table__td--select\">\n                  <wr-checkbox\n                    size=\"sm\"\n                    [checked]=\"isRowSelected(entry.row)\"\n                    (checkedChange)=\"toggleRow(entry.row, $event)\"\n                    [ariaLabel]=\"resolvedSelectRowLabel()\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__td wr-table__td--expand\">\n                  <button\n                    type=\"button\"\n                    class=\"wr-table__expand-btn\"\n                    [class.wr-table__expand-btn--open]=\"isExpanded(entry.row)\"\n                    [attr.aria-expanded]=\"isExpanded(entry.row)\"\n                    [attr.aria-label]=\"resolvedExpandRowLabel()\"\n                    (click)=\"toggleExpand(entry.row)\"\n                  >\n                    <svg\n                      class=\"wr-icon__svg wr-table__expand-icon\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"m9 18 6-6-6-6\" />\n                    </svg>\n                  </button>\n                </td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__td\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                  [attr.data-label]=\"col.column.title\"\n                >\n                  @if (treeMode() && col.key === treeColumnKey()) {\n                    <span class=\"wr-table__tree-lead\">\n                      @if (entry.parent) {\n                        <button\n                          type=\"button\"\n                          class=\"wr-table__tree-toggle\"\n                          [class.wr-table__tree-toggle--open]=\"entry.open\"\n                          [attr.aria-expanded]=\"entry.open\"\n                          [attr.aria-label]=\"resolvedToggleRowLabel()\"\n                          (click)=\"toggleTreeRow(entry.row)\"\n                        >\n                          <svg\n                            class=\"wr-icon__svg wr-table__tree-icon\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"2\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                            aria-hidden=\"true\"\n                          >\n                            <path d=\"m9 18 6-6-6-6\" />\n                          </svg>\n                        </button>\n                      } @else {\n                        <span class=\"wr-table__tree-toggle wr-table__tree-toggle--leaf\" aria-hidden=\"true\"></span>\n                      }\n                    </span>\n                  }\n                  @if (templateFor(col.key); as tpl) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tpl\"\n                      [ngTemplateOutletContext]=\"cellContext(entry.row, col.key, col.column)\"\n                    />\n                  } @else {\n                    {{ getValue(entry.row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n            @if (expandable() && isExpanded(entry.row)) {\n              <tr class=\"wr-table__detail-row\">\n                <td class=\"wr-table__detail\" [attr.colspan]=\"totalCols()\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"expandTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"expandContext(entry.row)\"\n                  />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"totalCols()\">{{ resolvedEmptyLabel() }}</td>\n          </tr>\n        }\n        @if (virtualized() && virtualWindow().padBottom > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padBottom\"></td>\n          </tr>\n        }\n      }\n    </tbody>\n\n    @if (hasSummary() && items()?.length) {\n      <tfoot>\n        <tr class=\"wr-table__foot-row\">\n          @if (rowSelection()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @if (expandable()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @for (col of displayColumns(); track col.key) {\n            <td\n              class=\"wr-table__foot-cell\"\n              [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n              [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n              [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n              [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n              [style.left.px]=\"leftPin(col.key)\"\n              [style.right.px]=\"rightPin(col.key)\"\n            >\n              {{ summaryFor(col.key) }}\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (showPager()) {\n  <div class=\"wr-table__pager\">\n    <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n  </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], columnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnOrder", required: false }] }, { type: i0.Output, args: ["columnOrderChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], treeColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeColumn", required: false }] }], toggleRowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleRowLabel", required: false }] }], collapsedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedGroups", required: false }] }, { type: i0.Output, args: ["collapsedGroupsChange"] }], groupSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSummary", required: false }] }], showGroupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupCount", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], sortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortLabel", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], selectRowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectRowLabel", required: false }] }], expandRowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandRowLabel", required: false }] }], selectGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectGroupLabel", required: false }] }], toggleGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleGroupLabel", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrTableCell), { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['thCell', { isSignal: true }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: true }] }], expandTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WrTableExpand), { isSignal: true }] }], groupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WrTableGroupHeader), { isSignal: true }] }] } });
+                    }, imports: [NgTemplateOutlet, CdkDropList, CdkDrag, WrCheckbox, WrPagination, WrSpinner, WrTableSort, WrTableFilter], template: "@if (loading()) {\n  <div class=\"wr-table__loading\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel()\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div\n  class=\"wr-table__scroll\"\n  #scroll\n  [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n  [attr.tabindex]=\"virtualized() ? 0 : null\"\n>\n  <table\n    class=\"wr-table__table\"\n    [class.wr-table__table--fixed]=\"fixedLayoutActive()\"\n    [style.--wr-table-row-h.px]=\"virtualized() ? effRowH() : null\"\n    [attr.aria-rowcount]=\"virtualized() ? renderRows().length + 1 + (hasSummary() && items()?.length ? 1 : 0) : null\"\n    [attr.role]=\"treeMode() ? 'treegrid' : null\"\n  >\n    <colgroup>\n      @if (rowSelection()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @if (expandable()) {\n        <col class=\"wr-table__col--lead\" />\n      }\n      @for (col of displayColumns(); track col.key) {\n        <col [style.width.px]=\"colWidth(col.key)\" />\n      }\n    </colgroup>\n    <thead>\n      <tr\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        [cdkDropListSortPredicate]=\"sortPredicate\"\n        (cdkDropListDropped)=\"onColumnDrop($event)\"\n      >\n        @if (rowSelection()) {\n          <th class=\"wr-table__th wr-table__th--select\">\n            @if (rowSelection() === 'multiple') {\n              <wr-checkbox\n                size=\"sm\"\n                [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                (checkedChange)=\"toggleAll($event)\"\n                [ariaLabel]=\"resolvedSelectAllLabel()\"\n              />\n            }\n          </th>\n        }\n        @if (expandable()) {\n          <th class=\"wr-table__th wr-table__th--expand\"></th>\n        }\n        @for (col of displayColumns(); track col.key) {\n          <th\n            #thCell\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderable() || !!col.column.pin\"\n            class=\"wr-table__th\"\n            [attr.aria-sort]=\"ariaSortFor(col.key, col.column.sortable)\"\n            [class.wr-table__th--draggable]=\"reorderable() && !col.column.pin\"\n            [class.wr-table__th--pin-left]=\"col.column.pin === 'left'\"\n            [class.wr-table__th--pin-right]=\"col.column.pin === 'right'\"\n            [class.wr-table__th--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n            [class.wr-table__th--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n            [style.left.px]=\"leftPin(col.key)\"\n            [style.right.px]=\"rightPin(col.key)\"\n          >\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ col.column.title }}</span>\n\n              @if (col.column.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  [attr.aria-label]=\"resolvedSortLabel()\"\n                  (click)=\"cycleSort(col.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(col.key)\" />\n                </button>\n              }\n\n              @if (col.column.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(col.key, $event)\" />\n                }\n              }\n            </div>\n\n            @if (col.column.resizable) {\n              <span\n                class=\"wr-table__resize-handle\"\n                aria-hidden=\"true\"\n                (pointerdown)=\"onResizeStart($event, col.key, thCell)\"\n                (pointermove)=\"onResizeMove($event)\"\n                (pointerup)=\"onResizeEnd($event)\"\n                (pointercancel)=\"onResizeEnd($event)\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems()) {\n        @if (virtualized() && virtualWindow().padTop > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padTop\"></td>\n          </tr>\n        }\n        @for (entry of windowRows(); track entry.id; let i = $index) {\n          @if (entry.kind === 'group') {\n            <tr class=\"wr-table__group-row\" [class.wr-table__group-row--collapsed]=\"entry.group.collapsed\">\n              <td class=\"wr-table__group-cell\" [attr.colspan]=\"totalCols()\">\n                <!-- The cell spans the full table width; this inner box is what sticks. -->\n                <div class=\"wr-table__group-inner\">\n                  @if (rowSelection() === 'multiple') {\n                    <wr-checkbox\n                      class=\"wr-table__group-select\"\n                      size=\"sm\"\n                      [checked]=\"groupChecked(entry.group.rows)\"\n                      [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n                      (checkedChange)=\"toggleGroupSelection(entry.group.rows, $event)\"\n                      [ariaLabel]=\"resolvedSelectGroupLabel()\"\n                    />\n                  }\n                  @if (groupTemplate(); as tpl) {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle wr-table__group-toggle--icon\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      [attr.aria-label]=\"resolvedToggleGroupLabel()\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                    </button>\n                    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"entry.group\" />\n                  } @else {\n                    <button\n                      type=\"button\"\n                      class=\"wr-table__group-toggle\"\n                      [attr.aria-expanded]=\"!entry.group.collapsed\"\n                      (click)=\"toggleGroupCollapse(entry.group.value)\"\n                    >\n                      <svg\n                        class=\"wr-icon__svg wr-table__group-icon\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"m9 18 6-6-6-6\" />\n                      </svg>\n                      <span class=\"wr-table__group-label\">{{ entry.group.label }}</span>\n                      @if (showGroupCount()) {\n                        <span class=\"wr-table__group-count\">{{ entry.group.count }}</span>\n                      }\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          } @else if (entry.kind === 'group-foot') {\n            <tr class=\"wr-table__group-foot-row\">\n              @if (rowSelection()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__foot-cell\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                >\n                  {{ entry.summaries.get(col.key) ?? '' }}\n                </td>\n              }\n            </tr>\n          } @else {\n            <tr\n              class=\"wr-table__tr\"\n              [class.wr-table__tr--selected]=\"rowSelection() && isRowSelected(entry.row)\"\n              [class.wr-table__tr--child]=\"entry.depth > 0\"\n              [attr.aria-rowindex]=\"virtualized() ? windowStart() + i + 2 : null\"\n              [attr.aria-level]=\"treeMode() ? entry.depth + 1 : null\"\n              [attr.aria-posinset]=\"treeMode() ? entry.posinset : null\"\n              [attr.aria-setsize]=\"treeMode() ? entry.setsize : null\"\n              [attr.aria-expanded]=\"entry.open\"\n              [style.--wr-table-depth]=\"treeMode() ? entry.depth : null\"\n            >\n              @if (rowSelection()) {\n                <td class=\"wr-table__td wr-table__td--select\">\n                  <wr-checkbox\n                    size=\"sm\"\n                    [checked]=\"isRowSelected(entry.row)\"\n                    (checkedChange)=\"toggleRow(entry.row, $event)\"\n                    [ariaLabel]=\"resolvedSelectRowLabel()\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"wr-table__td wr-table__td--expand\">\n                  <button\n                    type=\"button\"\n                    class=\"wr-table__expand-btn\"\n                    [class.wr-table__expand-btn--open]=\"isExpanded(entry.row)\"\n                    [attr.aria-expanded]=\"isExpanded(entry.row)\"\n                    [attr.aria-label]=\"resolvedExpandRowLabel()\"\n                    (click)=\"toggleExpand(entry.row)\"\n                  >\n                    <svg\n                      class=\"wr-icon__svg wr-table__expand-icon\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"m9 18 6-6-6-6\" />\n                    </svg>\n                  </button>\n                </td>\n              }\n              @for (col of displayColumns(); track col.key) {\n                <td\n                  class=\"wr-table__td\"\n                  [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n                  [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n                  [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n                  [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n                  [style.left.px]=\"leftPin(col.key)\"\n                  [style.right.px]=\"rightPin(col.key)\"\n                  [attr.data-label]=\"col.column.title\"\n                >\n                  @if (treeMode() && col.key === treeColumnKey()) {\n                    <span class=\"wr-table__tree-lead\">\n                      @if (entry.parent) {\n                        <button\n                          type=\"button\"\n                          class=\"wr-table__tree-toggle\"\n                          [class.wr-table__tree-toggle--open]=\"entry.open\"\n                          [attr.aria-expanded]=\"entry.open\"\n                          [attr.aria-label]=\"resolvedToggleRowLabel()\"\n                          (click)=\"toggleTreeRow(entry.row)\"\n                        >\n                          <svg\n                            class=\"wr-icon__svg wr-table__tree-icon\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"2\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                            aria-hidden=\"true\"\n                          >\n                            <path d=\"m9 18 6-6-6-6\" />\n                          </svg>\n                        </button>\n                      } @else {\n                        <span class=\"wr-table__tree-toggle wr-table__tree-toggle--leaf\" aria-hidden=\"true\"></span>\n                      }\n                    </span>\n                  }\n                  @if (templateFor(col.key); as tpl) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tpl\"\n                      [ngTemplateOutletContext]=\"cellContext(entry.row, col.key, col.column)\"\n                    />\n                  } @else {\n                    {{ getValue(entry.row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n            @if (expandable() && isExpanded(entry.row)) {\n              <tr class=\"wr-table__detail-row\">\n                <td class=\"wr-table__detail\" [attr.colspan]=\"totalCols()\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"expandTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"expandContext(entry.row)\"\n                  />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"totalCols()\">{{ resolvedEmptyLabel() }}</td>\n          </tr>\n        }\n        @if (virtualized() && virtualWindow().padBottom > 0) {\n          <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n            <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padBottom\"></td>\n          </tr>\n        }\n      }\n    </tbody>\n\n    @if (hasSummary() && items()?.length) {\n      <tfoot>\n        <tr class=\"wr-table__foot-row\">\n          @if (rowSelection()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @if (expandable()) {\n            <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n          }\n          @for (col of displayColumns(); track col.key) {\n            <td\n              class=\"wr-table__foot-cell\"\n              [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n              [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n              [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n              [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n              [style.left.px]=\"leftPin(col.key)\"\n              [style.right.px]=\"rightPin(col.key)\"\n            >\n              {{ summaryFor(col.key) }}\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (showPager()) {\n  <div class=\"wr-table__pager\">\n    <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], columnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnOrder", required: false }] }, { type: i0.Output, args: ["columnOrderChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], treeColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeColumn", required: false }] }], toggleRowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleRowLabel", required: false }] }], collapsedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedGroups", required: false }] }, { type: i0.Output, args: ["collapsedGroupsChange"] }], groupSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSummary", required: false }] }], showGroupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupCount", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], sortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortLabel", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], selectRowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectRowLabel", required: false }] }], expandRowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandRowLabel", required: false }] }], selectGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectGroupLabel", required: false }] }], toggleGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleGroupLabel", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrTableCell), { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['thCell', { isSignal: true }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: true }] }], expandTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WrTableExpand), { isSignal: true }] }], groupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WrTableGroupHeader), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.