ngwr 6.0.0 → 7.0.0

package/fesm2022/ngwr-table.mjs

@@ -1,38 +1,42 @@
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { NgTemplateOutlet, KeyValuePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, EventEmitter, signal, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, numberAttribute, model, HostBinding, HostListener, ContentChildren } from '@angular/core';
-import { WrDropdownDirective, WrDropdownMenuComponent } from 'ngwr/dropdown';
-import { provideWrIcons, checkmark, filter, WrIconComponent, arrowTop, infoCircleOutline } from 'ngwr/icon';
-import { WrPaginationComponent } from 'ngwr/pagination';
-import { NewArrayPipe } from 'ngwr/pipes';
-import { WrSpinnerComponent } from 'ngwr/spinner';
-import * as i1 from '@angular/forms';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { startWith } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { WrAbstractBase } from 'ngwr/cdk';
+import { input, inject, TemplateRef, Directive, output, signal, computed, ViewEncapsulation, Component, model, contentChildren } from '@angular/core';
+import { WrPagination } from 'ngwr/pagination';
+import { WrSpinner } from 'ngwr/spinner';
+import { WrDropdown, WrDropdownMenu } from 'ngwr/dropdown';
 
-var WrTableOrder;
-(function (WrTableOrder) {
-    WrTableOrder[WrTableOrder["REMOVE"] = 0] = "REMOVE";
-    WrTableOrder[WrTableOrder["ASC"] = 1] = "ASC";
-    WrTableOrder[WrTableOrder["DESC"] = 2] = "DESC";
-})(WrTableOrder || (WrTableOrder = {}));
-
-class WrTableCellDirective {
-    constructor() {
-        this.columnKey = input.required({ alias: 'wrTableCell' });
-        this.template = inject((TemplateRef));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: WrTableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: WrTableCellDirective, isStandalone: true, selector: "[wrTableCell]", inputs: { columnKey: { classPropertyName: "columnKey", publicName: "wrTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Provide a custom template for a specific column's cells.
+ *
+ * @example
+ * ```html
+ * <wr-table [columns]="columns" [items]="items">
+ *   <ng-template wrTableCell="role" let-value let-row="item">
+ *     <wr-tag [color]="value === 'admin' ? 'danger' : 'medium'">{{ value }}</wr-tag>
+ *   </ng-template>
+ * </wr-table>
+ * ```
+ */
+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.0.1", ngImport: i0, type: WrTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.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: "19.1.5", ngImport: i0, type: WrTableCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTableCell, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrTableCell]',
                 }]
-        }] });
+        }], propDecorators: { columnKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrTableCell", required: true }] }] } });
 
 /**
  * @license
@@ -40,65 +44,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-
-class WrTableFilterComponent extends WrAbstractBase {
-    constructor() {
-        super(...arguments);
-        this.items = input.required();
-        this.selectedItems = new EventEmitter();
-        this.search = new FormControl(null, { nonNullable: true });
-        this.filteredItems = signal([]);
-    }
-    get length() {
-        return this.filteredItems().filter(i => i.isSelected).length;
-    }
-    ngOnInit() {
-        this.search.valueChanges
-            .pipe(startWith(null))
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe(value => {
-            let filtered = [...this.items()];
-            if (value) {
-                filtered = this.items().filter(i => {
-                    const searchValue = value.toLowerCase();
-                    const itemTitle = i.title.toLowerCase();
-                    const itemValue = i.value.toLowerCase();
-                    const hasTitle = itemTitle.includes(searchValue);
-                    const hasValue = itemValue.includes(searchValue);
-                    return hasTitle || hasValue;
-                });
-            }
-            this.filteredItems.set(filtered);
-        });
+/**
+ * Filter dropdown rendered in a filterable column's header.
+ *
+ * @internal — used internally by `<wr-table>`.
+ */
+class WrTableFilter {
+    /** Available filter options. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Fires whenever the selection changes. */
+    selectionChange = output();
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /** Filtered + selection-tracked view of items. */
+    visible = computed(() => {
+        const q = this.query().trim().toLowerCase();
+        const all = this.items();
+        if (!q)
+            return [...all];
+        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 */
+    ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-table-filter'];
+        if (this.selectedCount() > 0)
+            parts.push('wr-table-filter--active');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onSearchInput(event) {
+        this.query.set(event.target.value);
     }
-    onItemSelect(item) {
-        const array = this.filteredItems();
-        const index = array.findIndex(i => i === item);
-        array[index].isSelected = !array[index].isSelected;
-        this.getSelectedItems();
+    onToggle(item) {
+        item.selected = !item.selected;
+        this.emitSelected();
     }
-    onResetClick() {
-        const array = [...this.filteredItems()];
-        array.map(i => (i.isSelected = false));
-        this.filteredItems.set(array);
-        this.selectedItems.emit([]);
+    onReset() {
+        for (const item of this.items())
+            item.selected = false;
+        this.selectionChange.emit([]);
     }
-    getSelectedItems() {
-        const selected = this.filteredItems().filter(i => i.isSelected);
-        this.selectedItems.emit(selected);
+    emitSelected() {
+        this.selectionChange.emit(this.items().filter(i => i.selected));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: WrTableFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: WrTableFilterComponent, isStandalone: true, selector: "wr-table-filter", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedItems: "selectedItems" }, host: { properties: { "class.wr-table-filter--active": "length > 0" }, classAttribute: "wr-table-filter" }, providers: [provideWrIcons([checkmark, filter])], usesInheritance: true, ngImport: i0, template: "<div class=\"wr-table-filter-icon\" wrDropdown [dropdownMenu]=\"tableFilterDropdown\">\n  <wr-icon class=\"wr-table-filter-icon__icon\" name=\"filter\" />\n</div>\n\n<wr-dropdown-menu #tableFilterDropdown=\"wrDropdownMenu\">\n  <div class=\"wr-table-filter-dropdown\">\n    <input class=\"wr-table-filter-dropdown__input\" [formControl]=\"search\" placeholder=\"\u041F\u043E\u0438\u0441\u043A...\" />\n\n    <div class=\"wr-table-filter-dropdown__body\">\n      @if (filteredItems(); as items) {\n        @for (item of items; track $index) {\n          <div\n            class=\"wr-table-filter-dropdown-item\"\n            [class.wr-table-filter-dropdown-item--selected]=\"item?.isSelected\"\n            (click)=\"onItemSelect(item)\"\n          >\n            <div class=\"wr-table-filter-dropdown-item-check\">\n              <wr-icon class=\"wr-table-filter-dropdown-item-check__icon\" name=\"checkmark\" />\n            </div>\n            <span class=\"wr-table-filter-dropdown-item__title\">{{ item?.title }}</span>\n          </div>\n        }\n\n        @if (items.length < 1) {\n          <div class=\"wr-table-filter-dropdown-empty\">\n            <span class=\"wr-table-filter-dropdown-empty__title\">\u041D\u0435\u0442 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432</span>\n          </div>\n        }\n      }\n    </div>\n\n    @if (length > 0) {\n      <div class=\"wr-table-filter-dropdown__reset\" (click)=\"onResetClick()\">\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C</div>\n    }\n  </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: WrIconComponent, selector: "wr-icon", inputs: ["name"] }, { kind: "directive", type: WrDropdownDirective, selector: "[wrDropdown]", inputs: ["dropdownMenu", "trigger", "position"] }, { kind: "component", type: WrDropdownMenuComponent, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrTableFilter, isStandalone: true, selector: "wr-table-filter", inputs: { 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\" aria-label=\"Filter column\">\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\">No matches</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"], outputs: ["opened", "closed"] }, { kind: "component", type: WrDropdownMenu, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: WrTableFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTableFilter, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ReactiveFormsModule, WrIconComponent, WrDropdownDirective, WrDropdownMenuComponent], providers: [provideWrIcons([checkmark, filter])], host: {
-                        class: 'wr-table-filter',
-                        '[class.wr-table-filter--active]': 'length > 0',
-                    }, template: "<div class=\"wr-table-filter-icon\" wrDropdown [dropdownMenu]=\"tableFilterDropdown\">\n  <wr-icon class=\"wr-table-filter-icon__icon\" name=\"filter\" />\n</div>\n\n<wr-dropdown-menu #tableFilterDropdown=\"wrDropdownMenu\">\n  <div class=\"wr-table-filter-dropdown\">\n    <input class=\"wr-table-filter-dropdown__input\" [formControl]=\"search\" placeholder=\"\u041F\u043E\u0438\u0441\u043A...\" />\n\n    <div class=\"wr-table-filter-dropdown__body\">\n      @if (filteredItems(); as items) {\n        @for (item of items; track $index) {\n          <div\n            class=\"wr-table-filter-dropdown-item\"\n            [class.wr-table-filter-dropdown-item--selected]=\"item?.isSelected\"\n            (click)=\"onItemSelect(item)\"\n          >\n            <div class=\"wr-table-filter-dropdown-item-check\">\n              <wr-icon class=\"wr-table-filter-dropdown-item-check__icon\" name=\"checkmark\" />\n            </div>\n            <span class=\"wr-table-filter-dropdown-item__title\">{{ item?.title }}</span>\n          </div>\n        }\n\n        @if (items.length < 1) {\n          <div class=\"wr-table-filter-dropdown-empty\">\n            <span class=\"wr-table-filter-dropdown-empty__title\">\u041D\u0435\u0442 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432</span>\n          </div>\n        }\n      }\n    </div>\n\n    @if (length > 0) {\n      <div class=\"wr-table-filter-dropdown__reset\" (click)=\"onResetClick()\">\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C</div>\n    }\n  </div>\n</wr-dropdown-menu>\n" }]
-        }], propDecorators: { selectedItems: [{
-                type: Output
-            }] } });
+            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\" aria-label=\"Filter column\">\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\">No matches</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: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 /**
  * @license
@@ -106,23 +104,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-
-class WrTableSortComponent {
-    constructor() {
-        this.order = input();
-        this.TableOrder = WrTableOrder;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: WrTableSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: WrTableSortComponent, isStandalone: true, selector: "wr-table-sort", inputs: { order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-table-sort--asc": "order() === TableOrder.ASC", "class.wr-table-sort--desc": "order() === TableOrder.DESC" }, classAttribute: "wr-table-sort" }, providers: [provideWrIcons([arrowTop])], ngImport: i0, template: "<wr-icon class=\"wr-table-sort__icon\" name=\"arrow-top\" />\n", dependencies: [{ kind: "component", type: WrIconComponent, selector: "wr-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+/**
+ * Sort indicator rendered in a sortable column's header.
+ *
+ * @internal — used internally by `<wr-table>`. Parent listens for clicks
+ * on the indicator to cycle direction.
+ */
+class WrTableSort {
+    direction = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-table-sort'];
+        const dir = this.direction();
+        if (dir)
+            parts.push(`wr-table-sort--${dir}`);
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTableSort, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.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: "19.1.5", ngImport: i0, type: WrTableSortComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTableSort, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-table-sort', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [provideWrIcons([arrowTop])], imports: [WrIconComponent], host: {
-                        class: 'wr-table-sort',
-                        '[class.wr-table-sort--asc]': 'order() === TableOrder.ASC',
-                        '[class.wr-table-sort--desc]': 'order() === TableOrder.DESC',
-                    }, template: "<wr-icon class=\"wr-table-sort__icon\" name=\"arrow-top\" />\n" }]
-        }] });
+            args: [{
+                    selector: 'wr-table-sort',
+                    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>',
+                    encapsulation: ViewEncapsulation.None,
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }] } });
 
 /**
  * @license
@@ -130,129 +140,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-
-class WrTableComponent {
-    constructor() {
-        this.columns = input.required();
-        this.items = input.required();
-        this.loading = input();
-        this.pagination = input(false);
-        this.total = input(1, { transform: numberAttribute });
-        this.currentPage = model(1);
-        this.pageSize = model(15);
-        this.pageSizeOptions = input([15, 25, 50]);
-        this.ordering = model();
-        this.filterChange = new EventEmitter();
-        this.cellTemplates = new Map();
-        /**
-         * We need to pass null to save original order for keyvalue pipe
-         * https://angular.dev/api/common/KeyValuePipe?tab=description
-         */
-        this.keepOrder = () => null;
-    }
-    get styles() {
-        return {
-            '--wr-table-columns': Object.keys(this.columns).length,
-        };
-    }
-    onKeypress(evt) {
-        const isCtrl = evt.ctrlKey;
-        const isPeriod = evt.code === 'Period';
-        const isComma = evt.code === 'Comma';
-        if (isCtrl && isPeriod) {
-            const totalPages = Math.ceil(this.total() / this.pageSize());
-            if (this.currentPage() < totalPages) {
-                this.currentPage.update(value => ++value);
-            }
-        }
-        if (isCtrl && isComma) {
-            if (this.currentPage() > 1) {
-                this.currentPage.update(value => --value);
-            }
-        }
-    }
-    ngAfterContentInit() {
-        this.customCells?.forEach(cell => {
-            this.cellTemplates.set(cell.columnKey(), cell.template);
-        });
+/**
+ * Data table with sortable / filterable headers and custom cell templates.
+ *
+ * Columns are defined via the `columns` input (a `Record<key, column>`).
+ * Rows are objects whose property names match the column keys. Cells can
+ * be customised by projecting an `[wrTableCell]="key"` template.
+ *
+ * @example
+ * ```html
+ * <wr-table
+ *   [columns]="columns"
+ *   [items]="rows"
+ *   [(sort)]="sort"
+ *   (filterChange)="onFilter($event)"
+ * >
+ *   <ng-template wrTableCell="role" let-value>
+ *     <wr-tag [color]="value === 'admin' ? 'danger' : 'medium'">{{ value }}</wr-tag>
+ *   </ng-template>
+ * </wr-table>
+ * ```
+ *
+ * @see https://ngwr.dev/components/table
+ */
+class WrTable {
+    /** Column definitions, keyed by row property name. */
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Row items. `null`/`undefined` → loading skeleton. */
+    items = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Show the loading spinner overlay. @default false */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Two-way bindable sort array. Order in array = application order. */
+    sort = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    /** Fires whenever a column's filter selection changes. */
+    filterChange = output();
+    /**
+     * Rows per page. Set to `0` (default) to disable client-side pagination
+     * and render every row at once.
+     */
+    pageSize = input(0, { ...(ngDevMode ? { debugName: "pageSize" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    /** Two-way bindable 1-based current page. */
+    page = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    /**
+     * Total row count for server-side pagination — when set, the table
+     * shows the pager but does NOT slice `items` (you provide the current
+     * page's slice yourself and react to `(page)` changes).
+     */
+    totalItems = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    /** Total row count derived for the pager (server-mode wins). */
+    resolvedTotal = computed(() => {
+        const server = this.totalItems();
+        if (server !== null)
+            return server;
+        return this.items()?.length ?? 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTotal" }] : /* istanbul ignore next */ []));
+    /** Items visible on the current page (client mode slices; server mode passes through). */
+    visibleItems = computed(() => {
+        const items = this.items();
+        if (!items)
+            return items;
+        const size = this.pageSize();
+        if (size <= 0 || this.totalItems() !== null)
+            return items;
+        const start = (this.page() - 1) * size;
+        return items.slice(start, start + size);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    /** Show the pager footer only when paging is enabled and rows overflow. */
+    showPager = computed(() => {
+        const size = this.pageSize();
+        return size > 0 && this.resolvedTotal() > size;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPager" }] : /* istanbul ignore next */ []));
+    cellTemplates = contentChildren(WrTableCell, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
+    /** Map of column key → custom template (if provided via `[wrTableCell]`). */
+    cellMap = computed(() => {
+        const map = new Map();
+        for (const cell of this.cellTemplates())
+            map.set(cell.columnKey(), cell.template);
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellMap" }] : /* istanbul ignore next */ []));
+    /** Keep KeyValuePipe in declaration order (comparator that treats all keys as equal). */
+    keepOrder = () => 0;
+    directionFor(key) {
+        return this.sort().find(s => s.key === key)?.direction ?? null;
     }
-    getCellTemplate(columnKey) {
-        return this.cellTemplates.get(columnKey) || null;
+    cycleSort(key) {
+        const current = this.directionFor(key);
+        const next = current === null ? 'asc' : current === 'asc' ? 'desc' : null;
+        const list = this.sort().filter(s => s.key !== key);
+        if (next !== null)
+            list.push({ key, direction: next });
+        this.sort.set(list);
     }
-    hasCellTemplate(columnKey) {
-        return this.cellTemplates.has(columnKey);
+    onFilter(key, items) {
+        this.filterChange.emit({ key, items });
     }
-    getOrder(key) {
-        return this.ordering()?.find(o => o.key === key)?.order ?? WrTableOrder.REMOVE;
+    cellContext(item, key, column) {
+        return { $implicit: item[key], item, column: column };
     }
-    onOrderChange(key) {
-        const item = this.ordering()?.find(o => o.key === key);
-        let order;
-        switch (item?.order) {
-            case WrTableOrder.ASC:
-                order = WrTableOrder.DESC;
-                break;
-            case WrTableOrder.DESC:
-                order = WrTableOrder.REMOVE;
-                break;
-            default:
-                order = WrTableOrder.ASC;
-        }
-        const orderingItem = {
-            key,
-            order,
-        };
-        this.ordering.update(ordering => {
-            const orderingMap = new Map(ordering?.map(item => [item.key, item]) ?? []);
-            orderingMap.set(key, orderingItem);
-            return Array.from(orderingMap.values());
-        });
+    getValue(item, key) {
+        return item[String(key)];
     }
-    onFilterChange(key, items) {
-        this.filterChange.emit({ key, items });
+    templateFor(key) {
+        return this.cellMap().get(String(key));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: WrTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: WrTableComponent, 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: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, ordering: { classPropertyName: "ordering", publicName: "ordering", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", ordering: "orderingChange", filterChange: "filterChange" }, host: { listeners: { "document:keydown": "onKeypress($event)" }, properties: { "style": "this.styles" }, classAttribute: "wr-table" }, providers: [provideWrIcons([infoCircleOutline])], queries: [{ propertyName: "customCells", predicate: WrTableCellDirective }], ngImport: i0, template: "@if (pagination()) {\n  <div class=\"wr-table-top\">\n    @if (loading()) {\n      <wr-spinner class=\"wr-table__spinner\" />\n    }\n\n    <div class=\"wr-table-hint\" wrDropdown [dropdownMenu]=\"tablePaginationHelpDropdown\">\n      <wr-icon class=\"wr-table-hint__icon\" name=\"info-circle-outline\" />\n    </div>\n\n    <ng-template [ngTemplateOutlet]=\"tablePagination\" />\n  </div>\n}\n\n<div class=\"wr-table-head\">\n  <div class=\"wr-table-head__wrapper\">\n    @for (item of columns() | keyvalue: keepOrder; track item.key) {\n      @if (item.value; as column) {\n        <div class=\"wr-table-head-cell\">\n          <span class=\"wr-table-head-cell__title\">{{ column.title }}</span>\n\n          @if (column.sortable) {\n            <wr-table-sort [order]=\"getOrder(item.key)\" (click)=\"onOrderChange(item.key)\" />\n          }\n          @if (column.filterItems && column.filterItems.length > 0) {\n            <wr-table-filter [items]=\"column.filterItems\" (selectedItems)=\"onFilterChange(item.key, $event)\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-table-body\">\n  @if (items()?.length) {\n    @for (item of items(); track $index) {\n      <div class=\"wr-table-body__row\">\n        @for (column of columns() | keyvalue: keepOrder; track column.key) {\n          <div class=\"wr-table-body-cell\">\n            @if (hasCellTemplate(column.key)) {\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(column.key)!\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: item[column.key],\n                  item: item,\n                  column: column.value,\n                }\"\n              />\n            } @else {\n              <span>{{ item[column.key] }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    <div class=\"wr-table-body__loader\">\n      <wr-spinner size=\"large\"></wr-spinner>\n    </div>\n\n    @for (i of pageSize() | newArray; track $index) {\n      <div class=\"wr-table-body__row\">\n        @for (column of columns() | keyvalue; track column.key) {\n          <div class=\"wr-table-body-item\">\n            <span>&nbsp;</span>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n\n@if (pagination()) {\n  <div class=\"wr-table-bot\">\n    <ng-template [ngTemplateOutlet]=\"tablePagination\" />\n  </div>\n}\n\n<ng-template #tablePagination>\n  <wr-pagination\n    class=\"wr-table__pagination\"\n    [showSizeChanger]=\"true\"\n    [disabled]=\"!!loading()\"\n    [total]=\"total()\"\n    [(currentPage)]=\"currentPage\"\n    [(pageSize)]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n  />\n</ng-template>\n\n<wr-dropdown-menu #tablePaginationHelpDropdown=\"wrDropdownMenu\">\n  <div class=\"wr-table-hint-dropdown\">\n    <div class=\"wr-table-hint-dropdown-item\">\n      <span class=\"wr-table-hint-dropdown-item__title\">Next:</span>\n      <div class=\"wr-table-hint-dropdown-item__keys\">\n        <span class=\"wr-table-hint-dropdown-item__key\">Ctrl</span>\n        <span>+</span>\n        <span class=\"wr-table-hint-dropdown-item__key\">{{ '>' }}</span>\n      </div>\n    </div>\n\n    <div class=\"wr-table-hint-dropdown-item\">\n      <span class=\"wr-table-hint-dropdown-item__title\">Prev:</span>\n      <div class=\"wr-table-hint-dropdown-item__keys\">\n        <span class=\"wr-table-hint-dropdown-item__key\">Ctrl</span>\n        <span>+</span>\n        <span class=\"wr-table-hint-dropdown-item__key\">{{ '<' }}</span>\n      </div>\n    </div>\n  </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: NewArrayPipe, name: "newArray" }, { kind: "component", type: WrIconComponent, selector: "wr-icon", inputs: ["name"] }, { kind: "component", type: WrSpinnerComponent, selector: "wr-spinner", inputs: ["size"] }, { kind: "directive", type: WrDropdownDirective, selector: "[wrDropdown]", inputs: ["dropdownMenu", "trigger", "position"] }, { kind: "component", type: WrDropdownMenuComponent, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }, { kind: "component", type: WrPaginationComponent, selector: "wr-pagination", inputs: ["currentPage", "total", "pageSize", "pageSizeOptions", "showSizeChanger", "showTotal", "position", "disabled", "ofLabel"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrTableSortComponent, selector: "wr-table-sort", inputs: ["order"] }, { kind: "component", type: WrTableFilterComponent, selector: "wr-table-filter", inputs: ["items"], outputs: ["selectedItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 }, sort: { classPropertyName: "sort", publicName: "sort", 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 } }, outputs: { sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div class=\"wr-table__scroll\">\n  <table class=\"wr-table__table\">\n    <thead>\n      <tr>\n        @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n          <th class=\"wr-table__th\">\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ entry.value.title }}</span>\n\n              @if (entry.value.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  aria-label=\"Sort column\"\n                  (click)=\"cycleSort(entry.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(entry.key)\" />\n                </button>\n              }\n\n              @if (entry.value.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(entry.key, $event)\" />\n                }\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems(); as rows) {\n        @for (row of rows; track $index) {\n          <tr class=\"wr-table__tr\">\n            @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n              <td class=\"wr-table__td\">\n                @if (templateFor(entry.key); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"cellContext(row, entry.key, entry.value)\"\n                  />\n                } @else {\n                  {{ getValue(row, entry.key) }}\n                }\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"(columns() | keyvalue).length\">No data</td>\n          </tr>\n        }\n      }\n    </tbody>\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: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel"], 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: ["items"], outputs: ["selectionChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: WrTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrTable, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        NgTemplateOutlet,
-                        KeyValuePipe,
-                        NewArrayPipe,
-                        WrIconComponent,
-                        WrSpinnerComponent,
-                        WrDropdownDirective,
-                        WrDropdownMenuComponent,
-                        WrPaginationComponent,
-                        WrTableSortComponent,
-                        WrTableFilterComponent,
-                    ], providers: [provideWrIcons([infoCircleOutline])], host: {
-                        class: 'wr-table',
-                    }, template: "@if (pagination()) {\n  <div class=\"wr-table-top\">\n    @if (loading()) {\n      <wr-spinner class=\"wr-table__spinner\" />\n    }\n\n    <div class=\"wr-table-hint\" wrDropdown [dropdownMenu]=\"tablePaginationHelpDropdown\">\n      <wr-icon class=\"wr-table-hint__icon\" name=\"info-circle-outline\" />\n    </div>\n\n    <ng-template [ngTemplateOutlet]=\"tablePagination\" />\n  </div>\n}\n\n<div class=\"wr-table-head\">\n  <div class=\"wr-table-head__wrapper\">\n    @for (item of columns() | keyvalue: keepOrder; track item.key) {\n      @if (item.value; as column) {\n        <div class=\"wr-table-head-cell\">\n          <span class=\"wr-table-head-cell__title\">{{ column.title }}</span>\n\n          @if (column.sortable) {\n            <wr-table-sort [order]=\"getOrder(item.key)\" (click)=\"onOrderChange(item.key)\" />\n          }\n          @if (column.filterItems && column.filterItems.length > 0) {\n            <wr-table-filter [items]=\"column.filterItems\" (selectedItems)=\"onFilterChange(item.key, $event)\" />\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-table-body\">\n  @if (items()?.length) {\n    @for (item of items(); track $index) {\n      <div class=\"wr-table-body__row\">\n        @for (column of columns() | keyvalue: keepOrder; track column.key) {\n          <div class=\"wr-table-body-cell\">\n            @if (hasCellTemplate(column.key)) {\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(column.key)!\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: item[column.key],\n                  item: item,\n                  column: column.value,\n                }\"\n              />\n            } @else {\n              <span>{{ item[column.key] }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    <div class=\"wr-table-body__loader\">\n      <wr-spinner size=\"large\"></wr-spinner>\n    </div>\n\n    @for (i of pageSize() | newArray; track $index) {\n      <div class=\"wr-table-body__row\">\n        @for (column of columns() | keyvalue; track column.key) {\n          <div class=\"wr-table-body-item\">\n            <span>&nbsp;</span>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n\n@if (pagination()) {\n  <div class=\"wr-table-bot\">\n    <ng-template [ngTemplateOutlet]=\"tablePagination\" />\n  </div>\n}\n\n<ng-template #tablePagination>\n  <wr-pagination\n    class=\"wr-table__pagination\"\n    [showSizeChanger]=\"true\"\n    [disabled]=\"!!loading()\"\n    [total]=\"total()\"\n    [(currentPage)]=\"currentPage\"\n    [(pageSize)]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n  />\n</ng-template>\n\n<wr-dropdown-menu #tablePaginationHelpDropdown=\"wrDropdownMenu\">\n  <div class=\"wr-table-hint-dropdown\">\n    <div class=\"wr-table-hint-dropdown-item\">\n      <span class=\"wr-table-hint-dropdown-item__title\">Next:</span>\n      <div class=\"wr-table-hint-dropdown-item__keys\">\n        <span class=\"wr-table-hint-dropdown-item__key\">Ctrl</span>\n        <span>+</span>\n        <span class=\"wr-table-hint-dropdown-item__key\">{{ '>' }}</span>\n      </div>\n    </div>\n\n    <div class=\"wr-table-hint-dropdown-item\">\n      <span class=\"wr-table-hint-dropdown-item__title\">Prev:</span>\n      <div class=\"wr-table-hint-dropdown-item__keys\">\n        <span class=\"wr-table-hint-dropdown-item__key\">Ctrl</span>\n        <span>+</span>\n        <span class=\"wr-table-hint-dropdown-item__key\">{{ '<' }}</span>\n      </div>\n    </div>\n  </div>\n</wr-dropdown-menu>\n" }]
-        }], propDecorators: { filterChange: [{
-                type: Output
-            }], styles: [{
-                type: HostBinding,
-                args: ['style']
-            }], onKeypress: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }], customCells: [{
-                type: ContentChildren,
-                args: [WrTableCellDirective]
-            }] } });
-
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
- */
+            args: [{ selector: 'wr-table', encapsulation: ViewEncapsulation.None, host: { class: 'wr-table' }, imports: [NgTemplateOutlet, KeyValuePipe, WrPagination, WrSpinner, WrTableSort, WrTableFilter], template: "@if (loading()) {\n  <div class=\"wr-table__loading\">\n    <wr-spinner size=\"lg\" />\n  </div>\n}\n\n<div class=\"wr-table__scroll\">\n  <table class=\"wr-table__table\">\n    <thead>\n      <tr>\n        @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n          <th class=\"wr-table__th\">\n            <div class=\"wr-table__th-inner\">\n              <span class=\"wr-table__title\">{{ entry.value.title }}</span>\n\n              @if (entry.value.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"wr-table__sort-btn\"\n                  aria-label=\"Sort column\"\n                  (click)=\"cycleSort(entry.key)\"\n                >\n                  <wr-table-sort [direction]=\"directionFor(entry.key)\" />\n                </button>\n              }\n\n              @if (entry.value.filterItems; as filterItems) {\n                @if (filterItems.length) {\n                  <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(entry.key, $event)\" />\n                }\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody>\n      @if (visibleItems(); as rows) {\n        @for (row of rows; track $index) {\n          <tr class=\"wr-table__tr\">\n            @for (entry of columns() | keyvalue: keepOrder; track entry.key) {\n              <td class=\"wr-table__td\">\n                @if (templateFor(entry.key); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"cellContext(row, entry.key, entry.value)\"\n                  />\n                } @else {\n                  {{ getValue(row, entry.key) }}\n                }\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"wr-table__empty\" [attr.colspan]=\"(columns() | keyvalue).length\">No data</td>\n          </tr>\n        }\n      }\n    </tbody>\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" }]
+        }], 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 }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], 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 }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrTableCell), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrTableCellDirective, WrTableComponent, WrTableFilterComponent, WrTableOrder, WrTableSortComponent };
+export { WrTable, WrTableCell, WrTableFilter, WrTableSort };
 //# sourceMappingURL=ngwr-table.mjs.map