ngwr 10.2.0 → 11.0.0

package/fesm2022/ngwr-table.mjs

@@ -1,10 +1,9 @@
+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';
 import * as i0 from '@angular/core';
 import { input, inject, TemplateRef, Directive, output, signal, computed, ViewEncapsulation, Component, model, contentChildren, PLATFORM_ID, viewChildren, effect, untracked, viewChild, contentChild } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import { WrCheckbox } from 'ngwr/checkbox';
 import { useI18nText } from 'ngwr/i18n';
 import { WrPagination } from 'ngwr/pagination';
@@ -33,10 +32,10 @@ class WrTableCell {
     /** Column key the template applies to. */
     columnKey = input.required({ ...(ngDevMode ? { debugName: "columnKey" } : /* istanbul ignore next */ {}), alias: 'wrTableCell' });
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: WrTableCell, isStandalone: true, selector: "[wrTableCell]", inputs: { columnKey: { classPropertyName: "columnKey", publicName: "wrTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: WrTableCell, isStandalone: true, selector: "[wrTableCell]", inputs: { columnKey: { classPropertyName: "columnKey", publicName: "wrTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTableCell, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrTableCell]',
@@ -65,10 +64,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  */
 class WrTableExpand {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableExpand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: WrTableExpand, isStandalone: true, selector: "ng-template[wrTableExpand]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTableExpand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: WrTableExpand, isStandalone: true, selector: "ng-template[wrTableExpand]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableExpand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTableExpand, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[wrTableExpand]',
@@ -111,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'];
@@ -125,20 +138,22 @@ 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() {
         this.selectionChange.emit(this.items().filter(i => i.selected));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrTableFilter, isStandalone: true, selector: "wr-table-filter", inputs: { filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, noMatchesLabel: { classPropertyName: "noMatchesLabel", publicName: "noMatchesLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" [attr.aria-label]=\"resolvedFilterLabel()\">\n  <svg\n    class=\"wr-icon__svg\"\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\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\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=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">{{ resolvedNoMatchesLabel() }}</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "directive", type: WrDropdown, selector: "[wrDropdown]", inputs: ["wrDropdown", "trigger", "position", "responsive"], outputs: ["opened", "closed"] }, { kind: "component", type: WrDropdownMenu, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrTableFilter, isStandalone: true, selector: "wr-table-filter", inputs: { filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, noMatchesLabel: { classPropertyName: "noMatchesLabel", publicName: "noMatchesLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" [attr.aria-label]=\"resolvedFilterLabel()\">\n  <svg\n    class=\"wr-icon__svg\"\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\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\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=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">{{ resolvedNoMatchesLabel() }}</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "directive", type: WrDropdown, selector: "[wrDropdown]", inputs: ["wrDropdown", "trigger", "position", "responsive"], outputs: ["opened", "closed"] }, { kind: "component", type: WrDropdownMenu, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTableFilter, decorators: [{
             type: Component,
             args: [{ selector: 'wr-table-filter', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrDropdown, WrDropdownMenu], template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" [attr.aria-label]=\"resolvedFilterLabel()\">\n  <svg\n    class=\"wr-icon__svg\"\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\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      placeholder=\"Search\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\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=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">{{ resolvedNoMatchesLabel() }}</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">Reset</button>\n    }\n  </div>\n</wr-dropdown-menu>\n" }]
         }], propDecorators: { filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], noMatchesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noMatchesLabel", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
@@ -167,10 +182,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  */
 class WrTableGroupHeader {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableGroupHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: WrTableGroupHeader, isStandalone: true, selector: "ng-template[wrTableGroupHeader]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTableGroupHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: WrTableGroupHeader, isStandalone: true, selector: "ng-template[wrTableGroupHeader]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableGroupHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTableGroupHeader, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[wrTableGroupHeader]' }]
         }] });
@@ -198,10 +213,10 @@ class WrTableSort {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableSort, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrTableSort, isStandalone: true, selector: "wr-table-sort", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<svg class="wr-icon__svg wr-table-sort__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTableSort, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrTableSort, isStandalone: true, selector: "wr-table-sort", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<svg class="wr-icon__svg wr-table-sort__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTableSort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTableSort, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-table-sort',
@@ -467,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 */ []));
@@ -491,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
@@ -564,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);
@@ -689,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) {
@@ -799,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();
@@ -816,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));
@@ -1263,26 +1334,16 @@ class WrTable {
     templateFor(key) {
         return this.cellMap().get(String(key));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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                [ngModel]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                (ngModelChange)=\"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                      [ngModel]=\"groupChecked(entry.group.rows)\"\n                      [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n                      (ngModelChange)=\"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                    [ngModel]=\"isRowSelected(entry.row)\"\n                    (ngModelChange)=\"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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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 ɵ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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTable, decorators: [{
             type: Component,
             args: [{ selector: 'wr-table', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-table',
                         '[class.wr-table--responsive]': 'responsive()',
                         '[class.wr-table--virtual]': 'virtualized()',
-                    }, imports: [
-                        NgTemplateOutlet,
-                        FormsModule,
-                        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                [ngModel]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                (ngModelChange)=\"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                      [ngModel]=\"groupChecked(entry.group.rows)\"\n                      [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n                      (ngModelChange)=\"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                    [ngModel]=\"isRowSelected(entry.row)\"\n                    (ngModelChange)=\"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" }]
+                    }, 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 }] }] } });
 
 /**