ngwr 10.2.1 → 11.0.0

package/fesm2022/ngwr-table-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-table-testing.mjs","sources":["../../../projects/lib/table/testing/wr-table-harness-text.ts","../../../projects/lib/table/testing/wr-table-cell-harness.ts","../../../projects/lib/table/testing/wr-table-header-cell-harness.ts","../../../projects/lib/table/testing/wr-table-row-harness.ts","../../../projects/lib/table/testing/wr-table-harness.ts","../../../projects/lib/table/testing/ngwr-table-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * Collapse the whitespace inside a table cell to what a user reads on one line.\n *\n * `TestElement.text()` only trims the ends, and a `<td>` is rarely one text node:\n * the tree column puts a toggle in front of the value, a `[wrTableExpand]` detail\n * cell holds whatever the consumer projected. The template's own indentation is\n * NOT the problem — Angular's default `preserveWhitespaces: false` drops\n * whitespace-only text nodes at compile time, so `'\\n  Ada\\n'` never reaches\n * `textContent`. What does reach it is whitespace inside a VALUE (`'first\\n\\n\n * programmer'` out of a textarea or an API) and, in a consumer app compiled with\n * `preserveWhitespaces: true`, the indentation after all. Every run becomes one\n * space so a spec can assert the rendered line either way.\n */\nexport function wrTableHarnessText(text: string): string {\n  return text.replace(/\\s+/g, ' ').trim();\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrTableCellHarnessFilters } from './interfaces';\nimport { wrTableHarnessText } from './wr-table-harness-text';\n\n/**\n * Test harness for one data cell of a `<wr-table>` row.\n *\n * A CONTENT CONTAINER, because a cell is where a consumer's own components end\n * up: a `[wrTableCell]` template can render a `<wr-tag>`, a button, an input, and\n * `cell.getHarness(WrButtonHarness…)` resolves those INSIDE this cell — so the\n * \"Delete\" button of row 3 cannot be mistaken for the one in row 1.\n *\n * @example\n * ```ts\n * const [row] = await table.getRows({ cellText: 'Ada' });\n * const [status] = await row.getCells({ columnTitle: 'Status' });\n *\n * expect(await status.getText()).toBe('active');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrTableCellHarness extends ContentContainerComponentHarness {\n  /**\n   * Data cells only. The lead selection and expand cells carry the same\n   * `.wr-table__td` class — they hold the row's controls, not its data — so a cell\n   * list that swept them in would no longer line up with the header list.\n   */\n  static hostSelector = '.wr-table__td:not(.wr-table__td--select):not(.wr-table__td--expand)';\n\n  /** Build a predicate that narrows the query. */\n  static with(options: WrTableCellHarnessFilters = {}): HarnessPredicate<WrTableCellHarness> {\n    return new HarnessPredicate(WrTableCellHarness, options)\n      .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))\n      .addOption('columnTitle', options.columnTitle, (harness, title) =>\n        HarnessPredicate.stringMatches(harness.getColumnTitle(), title)\n      );\n  }\n\n  /** The cell's text, with the template's indentation collapsed to single spaces. */\n  async getText(): Promise<string> {\n    return wrTableHarnessText(await (await this.host()).text());\n  }\n\n  /**\n   * The title of the column this cell belongs to.\n   *\n   * Read from `data-label` — the attribute responsive card mode prints in front of\n   * each value — because it is the only place a cell says which column it is in.\n   * The column KEY is never in the DOM at all.\n   */\n  async getColumnTitle(): Promise<string | null> {\n    return (await this.host()).getAttribute('data-label');\n  }\n\n  /** Which edge the cell's column is frozen against, or `null` when it scrolls. */\n  async getPin(): Promise<'left' | 'right' | null> {\n    const host = await this.host();\n    if (await host.hasClass('wr-table__td--pin-left')) return 'left';\n    if (await host.hasClass('wr-table__td--pin-right')) return 'right';\n    return null;\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrTableHeaderCellHarnessFilters } from './interfaces';\n\n/**\n * Test harness for one column header of a `<wr-table>`.\n *\n * The selector deliberately skips the two LEAD headers — selection and expand —\n * which carry the same `.wr-table__th` class but hold a checkbox or nothing at\n * all. What is left lines up index-for-index with the data columns, so a header's\n * position is its column's position.\n *\n * Columns are addressed by their TITLE here and everywhere else in this harness\n * family, never by their `columns` key: the key never reaches the DOM. Only the\n * title does — in this header and in every cell's `data-label` — so it is the one\n * handle a spec and the rendered table share.\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrTableHeaderCellHarness extends ComponentHarness {\n  static hostSelector = '.wr-table__th:not(.wr-table__th--select):not(.wr-table__th--expand)';\n\n  /** Build a predicate that narrows the query. */\n  static with(options: WrTableHeaderCellHarnessFilters = {}): HarnessPredicate<WrTableHeaderCellHarness> {\n    return new HarnessPredicate(WrTableHeaderCellHarness, options)\n      .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))\n      .addOption('sortable', options.sortable, async (harness, sortable) => (await harness.isSortable()) === sortable);\n  }\n\n  /** The column title, trimmed. The sort and filter controls are not part of it. */\n  async getText(): Promise<string> {\n    return (await this.locatorFor('.wr-table__title')()).text();\n  }\n\n  /**\n   * The direction this column announces, exactly as `aria-sort` puts it — or\n   * `null` when the column does not sort.\n   *\n   * `null` is not \"unsorted\": a sortable column with no direction announces\n   * `'none'`, and only a plain column omits the attribute entirely. Claiming\n   * sortability a column does not have is the bug that distinction prevents.\n   */\n  async getSortDirection(): Promise<'ascending' | 'descending' | 'none' | null> {\n    const sort = await (await this.host()).getAttribute('aria-sort');\n    return sort as 'ascending' | 'descending' | 'none' | null;\n  }\n\n  /** Whether the column offers sorting at all. */\n  async isSortable(): Promise<boolean> {\n    return (await this.getSortDirection()) !== null;\n  }\n\n  /**\n   * Advance the sort one step — none → ascending → descending → none, the cycle a\n   * click on the indicator drives.\n   *\n   * Throws on a column with no sort control rather than doing nothing: the quiet\n   * version of this leaves a spec asserting an unchanged direction and passing.\n   */\n  async sort(): Promise<void> {\n    const button = await this.locatorForOptional('.wr-table__sort-btn')();\n    if (!button) {\n      throw new Error(\n        `WrTableHeaderCellHarness.sort(): the \"${await this.getText()}\" column has no sort control — ` +\n          'its column definition needs `sortable: true`.'\n      );\n    }\n    await button.click();\n  }\n\n  /** Whether the column offers a filter dropdown (its definition carries a NON-EMPTY `filterItems`). */\n  async isFilterable(): Promise<boolean> {\n    return (await this.locatorForOptional('wr-table-filter')()) !== null;\n  }\n\n  /** Which edge the column is frozen against, or `null` when it scrolls with the rest. */\n  async getPin(): Promise<'left' | 'right' | null> {\n    const host = await this.host();\n    if (await host.hasClass('wr-table__th--pin-left')) return 'left';\n    if (await host.hasClass('wr-table__th--pin-right')) return 'right';\n    return null;\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrTableCellHarnessFilters, WrTableRowHarnessFilters } from './interfaces';\nimport { WrTableCellHarness } from './wr-table-cell-harness';\n\n/**\n * Test harness for one body row of a `<wr-table>` — flat, grouped or tree.\n *\n * Also a CONTENT CONTAINER, so `row.getHarness(WrButtonHarness…)` reaches the\n * consumer's own components anywhere in the row without leaving this row.\n *\n * @example\n * ```ts\n * const [ada] = await table.getRows({ cellText: 'Ada' });\n *\n * await ada.select();\n * await (await ada.getHarness(WrButtonHarness.with({ text: 'Edit' }))).click();\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrTableRowHarness extends ContentContainerComponentHarness {\n  /**\n   * `.wr-table__tr` is the DATA row and nothing else.\n   *\n   * Everything else a `<tbody>` can hold is a `<tr>` too: the group band\n   * (`.wr-table__group-row`), its subtotal row, the detail row a `[wrTableExpand]`\n   * template renders, the two virtual spacers, and the \"no data\" row. Querying\n   * `tbody tr` would hand every one of those back as a row with no cells.\n   */\n  static hostSelector = '.wr-table__tr';\n\n  /** Build a predicate that narrows the query. */\n  static with(options: WrTableRowHarnessFilters = {}): HarnessPredicate<WrTableRowHarness> {\n    return new HarnessPredicate(WrTableRowHarness, options)\n      .addOption('cellText', options.cellText, async (harness, text) => {\n        for (const cell of await harness.getCellTexts()) {\n          if (await HarnessPredicate.stringMatches(cell, text)) return true;\n        }\n        return false;\n      })\n      .addOption('selected', options.selected, async (harness, selected) => (await harness.isSelected()) === selected)\n      .addOption('expanded', options.expanded, async (harness, expanded) => (await harness.isExpanded()) === expanded)\n      .addOption('level', options.level, async (harness, level) => (await harness.getLevel()) === level);\n  }\n\n  private readonly selectBox = this.locatorForOptional('.wr-table__td--select input.wr-checkbox__input');\n\n  /**\n   * The row's disclosure control, whichever of the two the table gave it: the lead\n   * button of a `[wrTableExpand]` table, or the tree toggle inside the tree column.\n   * The two never coexist — a tree row owns its own disclosure, so the component\n   * refuses the pair.\n   *\n   * `button` in the tree selector is load-bearing. A leaf renders a `<span>` with\n   * the same `.wr-table__tree-toggle` class purely to hold the indent, and taking\n   * that for a control would report every leaf as expandable.\n   */\n  private readonly disclosure = this.locatorForOptional('.wr-table__expand-btn, button.wr-table__tree-toggle');\n\n  /** The row's data cells, in DOM order. The lead control cells are not cells. */\n  async getCells(filters: WrTableCellHarnessFilters = {}): Promise<WrTableCellHarness[]> {\n    return this.locatorForAll(WrTableCellHarness.with(filters))();\n  }\n\n  /** The text of every data cell, in DOM order. */\n  async getCellTexts(): Promise<string[]> {\n    const cells = await this.getCells();\n    return Promise.all(cells.map(cell => cell.getText()));\n  }\n\n  /**\n   * Whether the row is selected.\n   *\n   * Read from the `--selected` modifier, which is what the row looks like and what\n   * a consumer styles against. It also means a row is not \"selected\" while\n   * `rowSelection` is off, however many keys the `selection` model holds — nothing\n   * on screen says otherwise.\n   */\n  async isSelected(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-table__tr--selected');\n  }\n\n  /** Whether the row offers a selection checkbox at all. */\n  async isSelectable(): Promise<boolean> {\n    return (await this.selectBox()) !== null;\n  }\n\n  /** Flip the row's checkbox. Throws when the table has no selection column. */\n  async toggleSelection(): Promise<void> {\n    const box = await this.selectBox();\n    if (!box) {\n      throw new Error(\n        'WrTableRowHarness.toggleSelection(): this row has no checkbox — the table needs ' +\n          \"`rowSelection` set to 'single' or 'multiple'.\"\n      );\n    }\n    await box.click();\n  }\n\n  /** Select the row if it is not already selected. */\n  async select(): Promise<void> {\n    if (!(await this.isSelected())) await this.toggleSelection();\n  }\n\n  /** Deselect the row if it is selected. */\n  async deselect(): Promise<void> {\n    if (await this.isSelected()) await this.toggleSelection();\n  }\n\n  /**\n   * Whether the row has something to open — a detail template's disclosure, or\n   * children in a tree. A tree leaf answers `false`.\n   */\n  async isExpandable(): Promise<boolean> {\n    return (await this.disclosure()) !== null;\n  }\n\n  /** Whether the row is open, from the disclosure's `aria-expanded`. */\n  async isExpanded(): Promise<boolean> {\n    const toggle = await this.disclosure();\n    return toggle !== null && (await toggle.getAttribute('aria-expanded')) === 'true';\n  }\n\n  /** Open or close the row. Throws when it has nothing to open. */\n  async toggleExpand(): Promise<void> {\n    const toggle = await this.disclosure();\n    if (!toggle) {\n      throw new Error(\n        'WrTableRowHarness.toggleExpand(): this row has no disclosure control — a flat table needs a ' +\n          '`[wrTableExpand]` template, and a tree row with no children is a leaf.'\n      );\n    }\n    await toggle.click();\n  }\n\n  /**\n   * The row's depth as the table announces it — 1-based `aria-level`, `null` in a\n   * flat table, where depth is not a thing that exists.\n   */\n  async getLevel(): Promise<number | null> {\n    return this.numericAttribute('aria-level');\n  }\n\n  /** The row's 1-based position among its siblings (`aria-posinset`), or `null` when flat. */\n  async getPosInSet(): Promise<number | null> {\n    return this.numericAttribute('aria-posinset');\n  }\n\n  /** How many rows are in the row's sibling set, itself included (`aria-setsize`); `null` when flat. */\n  async getSetSize(): Promise<number | null> {\n    return this.numericAttribute('aria-setsize');\n  }\n\n  /**\n   * The row's 1-based index in the FULL dataset (`aria-rowindex`, header included),\n   * or `null` when the table is not virtualized.\n   *\n   * Only a windowed table publishes it, and that is precisely when it matters: the\n   * rows in the DOM are a slice, so their DOM order says nothing about where they\n   * sit in the data.\n   */\n  async getRowIndex(): Promise<number | null> {\n    return this.numericAttribute('aria-rowindex');\n  }\n\n  private async numericAttribute(name: string): Promise<number | null> {\n    const value = await (await this.host()).getAttribute(name);\n    return value === null ? null : Number.parseInt(value, 10);\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate, type TestElement } from '@angular/cdk/testing';\n\nimport type { WrTableHarnessFilters, WrTableHeaderCellHarnessFilters, WrTableRowHarnessFilters } from './interfaces';\nimport { wrTableHarnessText } from './wr-table-harness-text';\nimport { WrTableHeaderCellHarness } from './wr-table-header-cell-harness';\nimport { WrTableRowHarness } from './wr-table-row-harness';\n\n/**\n * Test harness for `<wr-table>` — the root of a small family, since a table is a\n * tree and not one control: {@link WrTableHeaderCellHarness} for a column header,\n * {@link WrTableRowHarness} for a body row, and `WrTableCellHarness` for a cell.\n *\n * Columns are addressed by their header TITLE, never by their `columns` key: the\n * key never reaches the DOM.\n *\n * What this harness deliberately does NOT do:\n * - open a column's filter dropdown. The panel is a `wr-dropdown` in the overlay\n *   container, and driving it belongs to a dropdown harness rather than this one;\n *   {@link WrTableHeaderCellHarness.isFilterable} reports that a column offers one.\n * - scroll a virtualized body. See {@link getRows}.\n *\n * @example\n * ```ts\n * const table = await loader.getHarness(WrTableHarness);\n *\n * expect(await table.getHeaderTexts()).toEqual(['Name', 'Role']);\n * await table.sortByColumn('Name');\n * expect(await table.getSortDirection('Name')).toBe('ascending');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrTableHarness extends ComponentHarness {\n  static hostSelector = 'wr-table';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrTableHarnessFilters = {}): HarnessPredicate<WrTableHarness> {\n    return new HarnessPredicate(WrTableHarness, options)\n      .addOption('columnTitle', options.columnTitle, async (harness, title) => {\n        for (const header of await harness.getHeaderTexts()) {\n          if (await HarnessPredicate.stringMatches(header, title)) return true;\n        }\n        return false;\n      })\n      .addOption('tree', options.tree, async (harness, tree) => (await harness.isTree()) === tree);\n  }\n\n  private readonly tableEl = this.locatorFor('table.wr-table__table');\n  private readonly selectAllBox = this.locatorForOptional('.wr-table__th--select input.wr-checkbox__input');\n\n  /**\n   * The role the table announces.\n   *\n   * A flat table sets no `role` at all, so it announces the native `table` role —\n   * NOT `grid`, which would promise cell-by-cell keyboard navigation it does not\n   * implement. `childrenKey` turns it into a `treegrid`, and that role is the only\n   * place the hierarchy exists for a screen-reader user: the indent is decoration.\n   */\n  async getRole(): Promise<'treegrid' | 'table'> {\n    return (await (await this.tableEl()).getAttribute('role')) === 'treegrid' ? 'treegrid' : 'table';\n  }\n\n  /** Whether the rows are a hierarchy rather than a flat list. */\n  async isTree(): Promise<boolean> {\n    return (await this.getRole()) === 'treegrid';\n  }\n\n  /**\n   * Whether the body is WINDOWED right now.\n   *\n   * Read from the host modifier rather than from the input, and that is the point:\n   * `virtualScroll` is a request, not a promise. The table falls back to rendering\n   * every row whenever the layout stops being uniform — grouping, a detail\n   * template, responsive card mode, a visible pager, a tree — so this answers what\n   * actually happened.\n   */\n  async isVirtual(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-table--virtual');\n  }\n\n  /** Whether the loading spinner is covering the table. */\n  async isLoading(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-table__loading')()) !== null;\n  }\n\n  /** The column headers, in render order — which `columnOrder` and a drag can change. */\n  async getHeaderCells(filters: WrTableHeaderCellHarnessFilters = {}): Promise<WrTableHeaderCellHarness[]> {\n    return this.locatorForAll(WrTableHeaderCellHarness.with(filters))();\n  }\n\n  /**\n   * The column titles, in render order.\n   *\n   * The selection and expand headers are not columns and are not here, so this\n   * list stays as wide as every row from {@link getCellTexts}.\n   */\n  async getHeaderTexts(): Promise<string[]> {\n    const headers = await this.getHeaderCells();\n    return Promise.all(headers.map(header => header.getText()));\n  }\n\n  /** The direction a column announces via `aria-sort`, or `null` when it does not sort. */\n  async getSortDirection(columnTitle: string): Promise<'ascending' | 'descending' | 'none' | null> {\n    return (await this.headerCellFor(columnTitle)).getSortDirection();\n  }\n\n  /**\n   * Advance a column's sort one step — none → ascending → descending → none.\n   *\n   * Sorting is the host's job: `<wr-table>` publishes the intent through its `sort`\n   * model and never reorders `items` itself, so a spec that expects the rows to\n   * move has to sort the data the way the app does.\n   */\n  async sortByColumn(columnTitle: string): Promise<void> {\n    await (await this.headerCellFor(columnTitle)).sort();\n  }\n\n  /**\n   * The body rows currently rendered, in DOM order.\n   *\n   * \"Currently rendered\" is the whole caveat of a virtualized table: while\n   * {@link isVirtual} is true the `<tbody>` holds only the window around the scroll\n   * offset, padded by a spacer row at each end that still has rows to stand in for\n   * (one of them, at the top or the bottom of the list), so this returns the\n   * WINDOW — not the dataset.\n   * {@link getAriaRowCount} is the total the table announces and\n   * {@link WrTableRowHarness.getRowIndex} says where a row sits in it. Nothing here\n   * scrolls that window on purpose: the viewport has no layout in a unit test, so a\n   * `scrollTo` would silently do nothing. Reach for `WrTable.scrollToRow()` in a\n   * real browser, or narrow the data instead.\n   *\n   * Group bands, per-group subtotals, detail rows and the \"no data\" row are not\n   * rows and never appear here.\n   */\n  async getRows(filters: WrTableRowHarnessFilters = {}): Promise<WrTableRowHarness[]> {\n    return this.locatorForAll(WrTableRowHarness.with(filters))();\n  }\n\n  /** The whole body as a matrix of cell text — one array per row, one entry per column. */\n  async getCellTexts(): Promise<string[][]> {\n    const rows = await this.getRows();\n    return Promise.all(rows.map(row => row.getCellTexts()));\n  }\n\n  /**\n   * The `<tfoot>` summary cells, one per column and `''` for a column with no\n   * `summary`. Empty when no column defines one.\n   *\n   * The lead cells are dropped so this lines up with {@link getHeaderTexts}. A\n   * per-group subtotal row is NOT here — it lives in the body, under its band.\n   */\n  async getFooterTexts(): Promise<string[]> {\n    const cells = await this.locatorForAll('tfoot .wr-table__foot-cell:not(.wr-table__foot-cell--lead)')();\n    return Promise.all(cells.map(async cell => wrTableHarnessText(await cell.text())));\n  }\n\n  /** The \"no data\" message, or `null` while the table has rows to show. */\n  async getEmptyText(): Promise<string | null> {\n    const empty = await this.locatorForOptional('.wr-table__empty')();\n    return empty ? wrTableHarnessText(await empty.text()) : null;\n  }\n\n  /**\n   * The row count the table announces (`aria-rowcount` — header and summary row\n   * included), or `null` when it is not virtualized and every row is in the DOM.\n   */\n  async getAriaRowCount(): Promise<number | null> {\n    const count = await (await this.tableEl()).getAttribute('aria-rowcount');\n    return count === null ? null : Number.parseInt(count, 10);\n  }\n\n  /** Whether the header offers a select-all box — only `rowSelection=\"multiple\"` does. */\n  async hasSelectAll(): Promise<boolean> {\n    return (await this.selectAllBox()) !== null;\n  }\n\n  /** Whether every row in the select-all scope is selected — see {@link toggleSelectAll}. */\n  async isAllSelected(): Promise<boolean> {\n    return (await this.selectAllHost()).getProperty<boolean>('checked');\n  }\n\n  /**\n   * Whether some rows are selected and others are not — the box's third state.\n   *\n   * `indeterminate` is a DOM PROPERTY, not an attribute: reading the attribute\n   * reports `null` for a box that is visibly dashed.\n   */\n  async isPartiallySelected(): Promise<boolean> {\n    return (await this.selectAllHost()).getProperty<boolean>('indeterminate');\n  }\n\n  /**\n   * Click the select-all box, once.\n   *\n   * Its scope is the rows the table RENDERS — the current page, and a collapsed\n   * group's rows are out because collapsing drops them from that list. A\n   * virtualized table's off-window rows are IN, though: the window is a slice\n   * taken after the list is built, so one click selects the whole dataset and not\n   * just what is in the DOM. And the third state is worth knowing about before\n   * asserting: while the selection is partial the box reads unchecked, so one\n   * click selects everything rather than clearing it.\n   */\n  async toggleSelectAll(): Promise<void> {\n    await (await this.selectAllHost()).click();\n  }\n\n  /**\n   * The text of each open detail row, in row order.\n   *\n   * A detail row is a full-width `<tr>` NEXT TO the row it belongs to, not inside\n   * it — which is why it is neither one of {@link getRows} nor one of a row's\n   * cells.\n   */\n  async getDetailTexts(): Promise<string[]> {\n    const details = await this.locatorForAll('.wr-table__detail')();\n    return Promise.all(details.map(async detail => wrTableHarnessText(await detail.text())));\n  }\n\n  /**\n   * The group band labels, in order.\n   *\n   * Empty when `groupBy` is off — and also when a `[wrTableGroupHeader]` template\n   * replaced the built-in band, since the label is then the consumer's own markup.\n   * Reach for that through {@link getRows}' siblings or your own component's\n   * harness.\n   */\n  async getGroupLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-table__group-label')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n\n  /** Whether the band with this label is collapsed. */\n  async isGroupCollapsed(label: string): Promise<boolean> {\n    const toggle = await this.groupToggleFor(label);\n    return (await toggle.getAttribute('aria-expanded')) === 'false';\n  }\n\n  /** Collapse or expand the band with this label. */\n  async toggleGroup(label: string): Promise<void> {\n    await (await this.groupToggleFor(label)).click();\n  }\n\n  /** The header for a column title, or a failure that says which titles do exist. */\n  private async headerCellFor(columnTitle: string): Promise<WrTableHeaderCellHarness> {\n    const [header] = await this.getHeaderCells({ text: columnTitle });\n    if (!header) {\n      const titles = await this.getHeaderTexts();\n      throw new Error(\n        `WrTableHarness: no column headed \"${columnTitle}\". Columns are addressed by their title, ` +\n          `not by their key — this table shows [${titles.join(', ')}].`\n      );\n    }\n    return header;\n  }\n\n  /**\n   * The collapse toggle of one band.\n   *\n   * Paired by index rather than by containment: both lists are emitted once per\n   * band by the same loop, in the same order, and a `TestElement` cannot be\n   * queried into.\n   */\n  private async groupToggleFor(label: string): Promise<TestElement> {\n    const index = (await this.getGroupLabels()).indexOf(label);\n    if (index < 0) {\n      throw new Error(\n        `WrTableHarness: no group band labelled \"${label}\" — is \\`groupBy\\` set, and is the band the ` +\n          'built-in one rather than a `[wrTableGroupHeader]` template?'\n      );\n    }\n    return (await this.locatorForAll('.wr-table__group-toggle')())[index];\n  }\n\n  /** The select-all input, or a failure naming both reasons it is missing. */\n  private async selectAllHost(): Promise<TestElement> {\n    const box = await this.selectAllBox();\n    if (!box) {\n      throw new Error(\n        'WrTableHarness: this table has no select-all box — `rowSelection` is off, or it is ' +\n          \"'single', which has no select-all by design.\"\n      );\n    }\n    return box;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-table.mjs

@@ -1,3 +1,4 @@
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import { isPlatformBrowser, DOCUMENT, NgTemplateOutlet } from '@angular/common';
@@ -109,7 +110,21 @@ class WrTableFilter {
         return all.filter(i => i.title.toLowerCase().includes(q));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    selectedCount = computed(() => this.items().filter(i => i.selected).length, /* @ts-ignore */
+    /**
+     * Bumped on every selection change.
+     *
+     * `items` belongs to the CONSUMER — the column definition hands the same array
+     * back on every render — and this component flips `selected` on those objects in
+     * place. No signal sees a property mutation, so `selectedCount` memoised its
+     * first answer: the count badge never appeared and the `--active` class never
+     * arrived, however many boxes were ticked.
+     */
+    selectionVersion = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionVersion" }] : /* istanbul ignore next */ []));
+    selectedCount = computed(() => {
+        this.selectionVersion();
+        return this.items().filter(i => i.selected).length;
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-table-filter'];
@@ -123,11 +138,13 @@ class WrTableFilter {
     }
     onToggle(item) {
         item.selected = !item.selected;
+        this.selectionVersion.update(v => v + 1);
         this.emitSelected();
     }
     onReset() {
         for (const item of this.items())
             item.selected = false;
+        this.selectionVersion.update(v => v + 1);
         this.selectionChange.emit([]);
     }
     emitSelected() {
@@ -465,7 +482,13 @@ class WrTable {
         const size = this.pageSize();
         if (size <= 0 || this.totalItems() !== null)
             return items;
-        const start = (this.page() - 1) * size;
+        // Clamped, because `page` is a model the host owns and the data can shrink
+        // under it — a filter or a delete used to leave the table showing an empty
+        // slice with no way back except paging by hand. The pager clamps its own
+        // number; this covers the case where the data drops below one page and the
+        // pager is not even rendered.
+        const lastPage = Math.max(1, Math.ceil(items.length / size));
+        const start = (Math.min(this.page(), lastPage) - 1) * size;
         return items.slice(start, start + size);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
@@ -489,6 +512,19 @@ class WrTable {
     platformId = inject(PLATFORM_ID);
     headerCells = viewChildren('thCell', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerCells" }] : /* istanbul ignore next */ []));
+    /**
+     * Ambient reading direction, for the two header gestures that travel the
+     * inline axis: the resize drag and the CDK's drop-slot index.
+     *
+     * Optional so a bare `TestBed` — or a consumer who never set a direction —
+     * needs no provider; `Directionality` is root-provided anyway, and a missing
+     * one reads as `ltr`. Read per gesture rather than cached, so a runtime `dir`
+     * flip needs no subscription to `change`.
+     */
+    dir = inject(Directionality, { optional: true });
+    isRtl() {
+        return this.dir?.value === 'rtl';
+    }
     /**
      * Columns in render order — declaration order, overridden by `columnOrder`
      * once reordered; new keys append, removed keys drop out. Pin and resize
@@ -562,17 +598,27 @@ class WrTable {
         effect(() => {
             const active = this.virtualized();
             this.displayColumns(); // re-run on a structural column change
+            // Both view queries are read TRACKED, and that is the whole point: a
+            // constructor effect's first run happens before the view's first update
+            // pass, so reading them inside `untracked` meant this ran once against an
+            // empty DOM — no header cells to freeze, no row to measure — and never
+            // again on a statically-configured table. The row height then silently
+            // stayed on the 40px fallback and the column widths were never captured.
+            const cells = this.headerCells();
+            const scroll = this.scrollEl();
             if (!active) {
                 this.virtualFixed.set(false);
                 return;
             }
             if (!isPlatformBrowser(this.platformId))
                 return;
+            if (cells.length === 0 || !scroll)
+                return; // the view is not up yet; this re-runs when it is
             untracked(() => {
                 this.freezeColumnWidths(); // captured while still auto-layout = natural widths
                 this.virtualFixed.set(true); // now fixed, with those exact widths (no jump)
                 if (this.rowHeight() === 0) {
-                    const row = this.scrollEl()?.nativeElement.querySelector('.wr-table__tr');
+                    const row = scroll.nativeElement.querySelector('.wr-table__tr');
                     const h = row?.offsetHeight ?? 0;
                     if (h > 0)
                         this.measuredRowPx.set(h);
@@ -687,10 +733,22 @@ class WrTable {
         this.resizeStartWidth = th.offsetWidth;
         event.target.setPointerCapture(event.pointerId);
     }
+    /**
+     * Pointer travel along the INLINE axis since the drag started, in px.
+     *
+     * The grip sits on each column's inline-END edge, so a column grows as the
+     * pointer moves away from that column's start: rightward in LTR, leftward in
+     * RTL. Signed here once rather than sprinkled through the width maths — and
+     * this sign is the pair of `inset-inline-end` on `.wr-table__resize-handle`,
+     * so the two must move together.
+     */
+    resizeDelta(clientX) {
+        return this.isRtl() ? this.resizeStartX - clientX : clientX - this.resizeStartX;
+    }
     onResizeMove(event) {
         if (this.resizeKey === null)
             return;
-        const width = Math.max(48, this.resizeStartWidth + (event.clientX - this.resizeStartX));
+        const width = Math.max(48, this.resizeStartWidth + this.resizeDelta(event.clientX));
         this.resizeWidths.set(new Map(this.resizeWidths()).set(this.resizeKey, width));
     }
     onResizeEnd(event) {
@@ -797,8 +855,23 @@ class WrTable {
     /**
      * Keep pinned columns anchored — a drop can't land on a pinned column's slot,
      * so a scrollable column can't be dragged into the frozen region at either edge.
+     *
+     * The index the CDK hands over is a slot in the pointer sweep it does along
+     * the header, and that sweep is always left-to-right (`SingleAxisSortStrategy`
+     * caches item rects sorted by `clientRect.left`). `displayColumns()` is DOM
+     * order, which under `dir="rtl"` runs the other way — so without the mirror
+     * the guard is asked about the column at the opposite end of the header, and
+     * a drop lands on the pinned one it was meant to protect.
+     *
+     * The drop event itself needs no such mapping: `previousIndex` /
+     * `currentIndex` come from `getItemIndex`, which the CDK already un-mirrors
+     * back to DOM order.
      */
-    sortPredicate = (index) => !this.displayColumns()[index]?.column.pin;
+    sortPredicate = (index) => {
+        const cols = this.displayColumns();
+        const slot = this.isRtl() ? cols.length - 1 - index : index;
+        return !cols[slot]?.column.pin;
+    };
     // --- Row selection --------------------------------------------------------
     rowKeyOf(row) {
         const rk = this.rowKey();
@@ -814,14 +887,14 @@ class WrTable {
      * that is every VISIBLE node — a collapsed subtree is not on screen and is not
      * swept in, which keeps the checkbox honest about what it just did.
      */
-    pageRowKeys = computed(() => {
-        if (this.treeMode()) {
-            return this.renderRows()
-                .filter((entry) => entry.kind === 'row')
-                .map(entry => this.rowKeyOf(entry.row));
-        }
-        return (this.visibleItems() ?? []).map(row => this.rowKeyOf(row));
-    }, /* @ts-ignore */
+    pageRowKeys = computed(() => 
+    // `renderRows()` in EVERY mode, not only tree: it is the list that reaches the
+    // screen. Reading `visibleItems()` outside tree mode swept in the rows of a
+    // COLLAPSED group — invisible rows, silently selected, which is exactly what
+    // the paragraph above promises does not happen.
+    this.renderRows()
+        .filter((entry) => entry.kind === 'row')
+        .map(entry => this.rowKeyOf(entry.row)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageRowKeys" }] : /* istanbul ignore next */ []));
     isRowSelected(row) {
         return this.selectionSet().has(this.rowKeyOf(row));
@@ -1262,7 +1335,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"] }, { 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 }, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTable, decorators: [{
             type: Component,