@ngneers/controls 0.0.1-next.0 → 0.0.1-next.2

package/fesm2022/ngneers-controls-switch.mjs

@@ -9,7 +9,7 @@ import { switchControlTemplate } from '@ngneers/controls-themes/templates/switch
 class NgnSwitch extends ValueControlBase {
     theme = this.injectThemeTemplate(switchControlTemplate, {
         root: true,
-        invalid: () => this.invalid(),
+        invalid: () => this.invalidState(),
     });
     changed(event) {
         const target = event.target;
@@ -24,11 +24,11 @@ class NgnSwitch extends ValueControlBase {
         super();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: NgnSwitch, isStandalone: true, selector: "ngn-switch", providers: [provideSelf(NgnSwitch)], usesInheritance: true, ngImport: i0, template: "<div [ptInt]=\"this\" [ptClass]=\"{ track: true, 'track-checked': !!value() }\">\n  <div [ptInt]=\"this\" [ptClass]=\"'thumb'\"></div>\n</div>\n<input\n  type=\"checkbox\"\n  [checked]=\"value()\"\n  (change)=\"changed($event)\"\n  (click)=\"onClick($event)\"\n  [ptInt]=\"this\"\n  [ptClass]=\"'input'\"\n  [attr.disabled]=\"disabled() ? '' : undefined\"\n  [ariaReadOnly]=\"readonly() ? '' : undefined\"\n  [ariaInvalid]=\"invalid() ? 'true' : undefined\"\n  [attr.aria-label]=\"label()\"\n  [ariaLabelledByElements]=\"labelledBy()\"\n  (blur)=\"touched.set(true)\"\n  [id]=\"inputId()\"\n/>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: NgnSwitch, isStandalone: true, selector: "ngn-switch", providers: [provideSelf(NgnSwitch)], usesInheritance: true, ngImport: i0, template: "<div [ptInt]=\"this\" [ptClass]=\"{ track: true, 'track-checked': !!value() }\">\n  <div [ptInt]=\"this\" [ptClass]=\"'thumb'\"></div>\n</div>\n<input\n  type=\"checkbox\"\n  [checked]=\"value()\"\n  (change)=\"changed($event)\"\n  (click)=\"onClick($event)\"\n  [ptInt]=\"this\"\n  [ptClass]=\"'input'\"\n  [attr.disabled]=\"disabled() ? '' : undefined\"\n  [ariaReadOnly]=\"readonly() ? '' : undefined\"\n  [ariaInvalid]=\"invalidState() ? 'true' : undefined\"\n  [attr.aria-label]=\"label()\"\n  [ariaLabelledByElements]=\"labelledBy()\"\n  [id]=\"inputId()\"\n  (blur)=\"markTouched()\"\n/>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSwitch, decorators: [{
             type: Component,
-            args: [{ selector: 'ngn-switch', imports: [NgnPt], providers: [provideSelf(NgnSwitch)], template: "<div [ptInt]=\"this\" [ptClass]=\"{ track: true, 'track-checked': !!value() }\">\n  <div [ptInt]=\"this\" [ptClass]=\"'thumb'\"></div>\n</div>\n<input\n  type=\"checkbox\"\n  [checked]=\"value()\"\n  (change)=\"changed($event)\"\n  (click)=\"onClick($event)\"\n  [ptInt]=\"this\"\n  [ptClass]=\"'input'\"\n  [attr.disabled]=\"disabled() ? '' : undefined\"\n  [ariaReadOnly]=\"readonly() ? '' : undefined\"\n  [ariaInvalid]=\"invalid() ? 'true' : undefined\"\n  [attr.aria-label]=\"label()\"\n  [ariaLabelledByElements]=\"labelledBy()\"\n  (blur)=\"touched.set(true)\"\n  [id]=\"inputId()\"\n/>\n" }]
+            args: [{ selector: 'ngn-switch', imports: [NgnPt], providers: [provideSelf(NgnSwitch)], template: "<div [ptInt]=\"this\" [ptClass]=\"{ track: true, 'track-checked': !!value() }\">\n  <div [ptInt]=\"this\" [ptClass]=\"'thumb'\"></div>\n</div>\n<input\n  type=\"checkbox\"\n  [checked]=\"value()\"\n  (change)=\"changed($event)\"\n  (click)=\"onClick($event)\"\n  [ptInt]=\"this\"\n  [ptClass]=\"'input'\"\n  [attr.disabled]=\"disabled() ? '' : undefined\"\n  [ariaReadOnly]=\"readonly() ? '' : undefined\"\n  [ariaInvalid]=\"invalidState() ? 'true' : undefined\"\n  [attr.aria-label]=\"label()\"\n  [ariaLabelledByElements]=\"labelledBy()\"\n  [id]=\"inputId()\"\n  (blur)=\"markTouched()\"\n/>\n" }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/ngneers-controls-switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngneers-controls-switch.mjs","sources":["../../src/switch/switch.ts","../../src/switch/switch.html","../../src/switch/ngneers-controls-switch.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { NgnPt, provideSelf, ValueControlBase } from '@ngneers/controls/base';\nimport { switchControlTemplate } from '@ngneers/controls-themes/templates/switch';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-switch',\n  templateUrl: './switch.html',\n  imports: [NgnPt],\n  providers: [provideSelf(NgnSwitch)],\n})\nexport class NgnSwitch extends ValueControlBase<'switch', boolean> {\n  protected readonly theme = this.injectThemeTemplate(switchControlTemplate, {\n    root: true,\n    invalid: () => this.invalid(),\n  });\n\n  protected changed(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.value.set(target.checked);\n  }\n\n  protected onClick(event: Event) {\n    if (this.readonly() || this.disabled()) {\n      event.preventDefault();\n    }\n  }\n\n  constructor() {\n    super();\n  }\n}\n","<div [ptInt]=\"this\" [ptClass]=\"{ track: true, 'track-checked': !!value() }\">\n  <div [ptInt]=\"this\" [ptClass]=\"'thumb'\"></div>\n</div>\n<input\n  type=\"checkbox\"\n  [checked]=\"value()\"\n  (change)=\"changed($event)\"\n  (click)=\"onClick($event)\"\n  [ptInt]=\"this\"\n  [ptClass]=\"'input'\"\n  [attr.disabled]=\"disabled() ? '' : undefined\"\n  [ariaReadOnly]=\"readonly() ? '' : undefined\"\n  [ariaInvalid]=\"invalid() ? 'true' : undefined\"\n  [attr.aria-label]=\"label()\"\n  [ariaLabelledByElements]=\"labelledBy()\"\n  (blur)=\"touched.set(true)\"\n  [id]=\"inputId()\"\n/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;AAEG;AAOG,MAAO,SAAU,SAAQ,gBAAmC,CAAA;AAC7C,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;AACzE,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE;AAC9B,KAAA,CAAC;AAEQ,IAAA,OAAO,CAAC,KAAY,EAAA;AAC5B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;QAC/C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;IAChC;AAEU,IAAA,OAAO,CAAC,KAAY,EAAA;QAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACtC,KAAK,CAAC,cAAc,EAAE;QACxB;IACF;AAEA,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;IACT;uGAnBW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAFT,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXrC,qlBAkBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDRY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGJ,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EAEb,CAAC,KAAK,CAAC,aACL,CAAC,WAAW,WAAW,CAAC,EAAA,QAAA,EAAA,qlBAAA,EAAA;;;AEXrC;;AAEG;;;;"}
+{"version":3,"file":"ngneers-controls-switch.mjs","sources":["../../src/switch/switch.ts","../../src/switch/switch.html","../../src/switch/ngneers-controls-switch.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { NgnPt, provideSelf, ValueControlBase } from '@ngneers/controls/base';\nimport { switchControlTemplate } from '@ngneers/controls-themes/templates/switch';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-switch',\n  templateUrl: './switch.html',\n  imports: [NgnPt],\n  providers: [provideSelf(NgnSwitch)],\n})\nexport class NgnSwitch extends ValueControlBase<'switch', boolean> {\n  protected readonly theme = this.injectThemeTemplate(switchControlTemplate, {\n    root: true,\n    invalid: () => this.invalidState(),\n  });\n\n  protected changed(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.value.set(target.checked);\n  }\n\n  protected onClick(event: Event) {\n    if (this.readonly() || this.disabled()) {\n      event.preventDefault();\n    }\n  }\n\n  constructor() {\n    super();\n  }\n}\n","<div [ptInt]=\"this\" [ptClass]=\"{ track: true, 'track-checked': !!value() }\">\n  <div [ptInt]=\"this\" [ptClass]=\"'thumb'\"></div>\n</div>\n<input\n  type=\"checkbox\"\n  [checked]=\"value()\"\n  (change)=\"changed($event)\"\n  (click)=\"onClick($event)\"\n  [ptInt]=\"this\"\n  [ptClass]=\"'input'\"\n  [attr.disabled]=\"disabled() ? '' : undefined\"\n  [ariaReadOnly]=\"readonly() ? '' : undefined\"\n  [ariaInvalid]=\"invalidState() ? 'true' : undefined\"\n  [attr.aria-label]=\"label()\"\n  [ariaLabelledByElements]=\"labelledBy()\"\n  [id]=\"inputId()\"\n  (blur)=\"markTouched()\"\n/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;AAEG;AAOG,MAAO,SAAU,SAAQ,gBAAmC,CAAA;AAC7C,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;AACzE,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE;AACnC,KAAA,CAAC;AAEQ,IAAA,OAAO,CAAC,KAAY,EAAA;AAC5B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;QAC/C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;IAChC;AAEU,IAAA,OAAO,CAAC,KAAY,EAAA;QAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACtC,KAAK,CAAC,cAAc,EAAE;QACxB;IACF;AAEA,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;IACT;uGAnBW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAFT,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXrC,slBAkBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDRY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGJ,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EAEb,CAAC,KAAK,CAAC,aACL,CAAC,WAAW,WAAW,CAAC,EAAA,QAAA,EAAA,slBAAA,EAAA;;;AEXrC;;AAEG;;;;"}

package/fesm2022/ngneers-controls-table.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { signal, computed, afterRenderEffect, input, inject, ElementRef, effect, Directive, contentChild, Component, viewChild, model, booleanAttribute, afterNextRender, Renderer2, ViewContainerRef, viewChildren, EnvironmentInjector, ApplicationRef, createComponent, NgModule } from '@angular/core';
+import { signal, computed, afterRenderEffect, input, inject, ElementRef, effect, Directive, contentChild, Component, viewChild, model, booleanAttribute, untracked, afterNextRender, Renderer2, ViewContainerRef, viewChildren, EnvironmentInjector, ApplicationRef, createComponent, NgModule } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { elementSizeSignal, injectThemeTemplate, templateTypesFn, NgnTemplate, domEventHandler, setComponentInput } from '@ngneers/controls/api/ng';
 import { NgnBase, NgnPt, provideSelf, getNearestNgnInstance, getNearestNgnInstanceSig } from '@ngneers/controls/base';
+import { NgnButton, NgnActionButton } from '@ngneers/controls/button';
 import { I18n } from '@ngneers/controls/i18n';
 import { NgnIcon } from '@ngneers/controls/icon';
 import { NgnPaginator } from '@ngneers/controls/paginator';
@@ -14,7 +15,6 @@ import { toggleClass, NgnError } from '@ngneers/controls/utils';
 import { setInputSignalValue } from '@ngneers/controls/utils-ng';
 import { executeMultiFilter } from '@ngneers/controls/api';
 import { openMenuAt } from '@ngneers/controls/menu';
-import { NgnActionButton } from '@ngneers/controls/button';
 import { NgnCheckbox } from '@ngneers/controls/checkbox';
 import { NgnFilter } from '@ngneers/controls/filter';
 
@@ -514,6 +514,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { ngnTableGroupHeaderTr: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableGroupHeaderTr", required: true }] }], ngnScrollerItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnScrollerItem", required: false }] }] } });
 
+/**
+ * Owns lazy-loading state for {@link NgnTable}: the loaded row window,
+ * request status, per-page cache, and an epoch that invalidates on
+ * sort/filter/pageSize/dataSource change. Plain signal class (no DI), mirroring
+ * `TableSelectionModel`.
+ */
+class TableLazyModel {
+    _deps;
+    loaded = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+    status = signal('idle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    error = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    total = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    hasMore = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+    /** page index -> result, valid within the current epoch. */
+    _cache = new Map();
+    _epoch = 0;
+    _controller = null;
+    _lastState = null;
+    _nextWindow = 0;
+    /** The most recent load attempt, replayed by {@link retry}. */
+    _lastLoad = null;
+    constructor(_deps) {
+        this._deps = _deps;
+    }
+    /** Load (or serve from cache) the page described by `state`. */
+    async setPage(state) {
+        this._lastState = state;
+        const cached = this._cache.get(state.page.current);
+        if (cached) {
+            // Supersede any in-flight load so it can't resolve over the cached page.
+            this._controller?.abort();
+            this._controller = null;
+            this.loaded.set(cached.rows);
+            this.total.set(cached.total);
+            this.hasMore.set(cached.hasMore);
+            this.status.set('idle');
+            this.error.set(null);
+            return;
+        }
+        await this._load(state, 'replace');
+    }
+    /**
+     * Invalidate everything and refetch the current page/window from scratch.
+     * No-op if {@link setPage} has never been called (nothing to refetch yet).
+     */
+    async reload() {
+        const state = this._lastState;
+        // Capture the cursor before _bumpEpoch clears the cache it's read from.
+        const cursor = state ? this.cursorFor(state.page.current) : undefined;
+        this._bumpEpoch();
+        if (state)
+            await this._load(state, 'replace', cursor);
+    }
+    /** Called by the component when sort/filter/pageSize/dataSource change. */
+    invalidate() {
+        this._bumpEpoch();
+    }
+    /**
+     * Infinite scroll: load and append the next window of `pageSize` rows.
+     * No-op while a load is in flight or when `hasMore` is false.
+     */
+    async loadNext(pageSize) {
+        if (this.status() === 'loading' || !this.hasMore())
+            return;
+        const current = this._nextWindow;
+        const state = {
+            page: { current, size: pageSize },
+            slice: { skip: current * pageSize, take: pageSize },
+        };
+        await this._load(state, 'append');
+    }
+    /** Re-issue the last load attempt after a rejection; keeps loaded rows in infinite scroll. */
+    async retry() {
+        const last = this._lastLoad;
+        if (last)
+            await this._load(last.state, last.apply, last.cursor);
+    }
+    cursorFor(pageIndex) {
+        return this._cache.get(pageIndex - 1)?.cursor;
+    }
+    _bumpEpoch() {
+        this._epoch++;
+        this._cache.clear();
+        this._controller?.abort();
+        this._controller = null;
+        this.loaded.set([]);
+        this.total.set(undefined);
+        this.hasMore.set(true);
+        this.status.set('idle');
+        this.error.set(null);
+        this._nextWindow = 0;
+        this._lastLoad = null;
+    }
+    async _load(state, apply, cursorOverride) {
+        const loader = this._deps.dataSource();
+        if (!loader)
+            return;
+        const cursor = cursorOverride ?? this.cursorFor(state.page.current);
+        this._lastLoad = { state, apply, cursor };
+        const epoch = this._epoch;
+        this._controller?.abort();
+        const controller = new AbortController();
+        this._controller = controller;
+        this.status.set('loading');
+        this.error.set(null);
+        try {
+            const result = await loader({
+                pagination: state,
+                sort: this._deps.sort(),
+                filters: this._deps.filters(),
+                cursor,
+                signal: controller.signal,
+            });
+            if (epoch !== this._epoch || controller !== this._controller)
+                return; // superseded
+            this._cache.set(state.page.current, result);
+            this.total.set(result.total);
+            this.hasMore.set(result.hasMore);
+            this.loaded.set(apply === 'append' ? [...this.loaded(), ...result.rows] : result.rows);
+            // Advance only on success, so a failed append retries the same window.
+            if (apply === 'append')
+                this._nextWindow = state.page.current + 1;
+            this.status.set('idle');
+        }
+        catch (err) {
+            if (epoch !== this._epoch || controller !== this._controller || controller.signal.aborted)
+                return;
+            this.error.set(err);
+            this.status.set('error');
+        }
+    }
+}
+
 /** Applies the active multi-column filter set. Returns the input untouched when no filters are set. */
 function filterRows(rows, filters) {
     if (!filters) {
@@ -935,23 +1073,32 @@ class NgnTableTemplates extends NgnBase {
     ...(ngDevMode ? [{ debugName: "_bodyTemplate" }] : /* istanbul ignore next */ []));
     _groupHeaderTemplate = contentChild('groupHeader', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_groupHeaderTemplate" }] : /* istanbul ignore next */ []));
+    _loadingTemplate = contentChild('loading', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loadingTemplate" }] : /* istanbul ignore next */ []));
+    _errorTemplate = contentChild('error', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_errorTemplate" }] : /* istanbul ignore next */ []));
     headerTemplate = this._headerTemplate;
     bodyTemplate = this._bodyTemplate;
     groupHeaderTemplate = this._groupHeaderTemplate;
+    /** Custom rows shown while a lazy load is in flight, via `<ng-template #loading>`. */
+    loadingTemplate = this._loadingTemplate;
+    /** Custom error row via `<ng-template #error>`; receives `{ error, retry }`, where `retry` re-issues the failed load. */
+    errorTemplate = this._errorTemplate;
     /**
      * Types for the table templates.
      */
     templateTypes = templateTypesFn();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableTemplates, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: NgnTableTemplates, isStandalone: true, selector: "ng-component", queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "_groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: NgnTableTemplates, isStandalone: true, selector: "ng-component", queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "_groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, isSignal: true }, { propertyName: "_loadingTemplate", first: true, predicate: ["loading"], descendants: true, isSignal: true }, { propertyName: "_errorTemplate", first: true, predicate: ["error"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableTemplates, decorators: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }], propDecorators: { _headerTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], _bodyTemplate: [{ type: i0.ContentChild, args: ['body', { isSignal: true }] }], _groupHeaderTemplate: [{ type: i0.ContentChild, args: ['groupHeader', { isSignal: true }] }] } });
+        }], propDecorators: { _headerTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], _bodyTemplate: [{ type: i0.ContentChild, args: ['body', { isSignal: true }] }], _groupHeaderTemplate: [{ type: i0.ContentChild, args: ['groupHeader', { isSignal: true }] }], _loadingTemplate: [{ type: i0.ContentChild, args: ['loading', { isSignal: true }] }], _errorTemplate: [{ type: i0.ContentChild, args: ['error', { isSignal: true }] }] } });
 
+const DEFAULT_LAZY_PAGE_SIZE = 25;
 /**
  * @category control
  */
@@ -963,10 +1110,11 @@ class NgnTable extends NgnTableTemplates {
         selectable: () => !!this.selectionMode(),
         reorderable: () => this.reorderable(),
         reordering: () => this._columns?.isReordering() ?? false,
+        loading: () => this.loadStatus() === 'loading',
     });
     _scroller = viewChild.required(NgnScroller);
-    /** The data rows to render. */
-    rows = input.required(/* @ts-ignore */
+    /** The data rows to render in client-side mode. Ignored when {@link dataSource} is set. */
+    rows = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     /**
      * When {@link virtual} is enabled, this defines the height of each row in pixels.
@@ -1000,6 +1148,27 @@ class NgnTable extends NgnTableTemplates {
      */
     paginator = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paginator" }] : /* istanbul ignore next */ []));
+    /**
+     * A loader callback for server-driven lazy loading. When set, the table fetches
+     * rows on demand instead of reading {@link rows}, and client-side sort/filter are
+     * delegated to the loader. With {@link paginator} it pages lazily; without, it
+     * infinite-scrolls. Incompatible with {@link groupBy} (throws).
+     *
+     * @remarks Bind to a stable reference (a class field/method), not an inline
+     * arrow — a new function identity each change-detection cycle invalidates the
+     * page cache and refetches every cycle.
+     * @default null
+     */
+    dataSource = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    /**
+     * Infinite scroll only: set by the header select-all checkbox to request a
+     * "select everything matching the current filters" bulk operation, since the
+     * full set is not loaded. Two-way bindable.
+     * @default false
+     */
+    selectAllMatching = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectAllMatching" }] : /* istanbul ignore next */ []));
     /**
      * The selection mode for the table.
      * - `'single'`: Only one row can be selected at a time.
@@ -1091,6 +1260,21 @@ class NgnTable extends NgnTableTemplates {
     ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
     pageState = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []));
+    // --- Lazy (server-driven) loading ---
+    lazy = computed(() => !!this.dataSource(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    lazyMode = computed(() => this.paginator() ? 'paginate' : 'infinite', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazyMode" }] : /* istanbul ignore next */ []));
+    _lazyModel = new TableLazyModel({
+        dataSource: this.dataSource,
+        sort: this.sort,
+        filters: computed(() => this.filters()),
+        mode: this.lazyMode,
+    });
+    loadStatus = this._lazyModel.status;
+    loadError = this._lazyModel.error;
+    loadTotal = this._lazyModel.total;
+    lazyHasMore = this._lazyModel.hasMore;
     i18n = inject(I18n).translations;
     /**
      * Polite live-region text announcing sort / filter / pagination / selection
@@ -1144,6 +1328,15 @@ class NgnTable extends NgnTableTemplates {
      */
     totalColumnCount = computed(() => this._columns.columnCount() + (this._columns.hasSelectionColumn() ? 1 : 0), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "totalColumnCount" }] : /* istanbul ignore next */ []));
+    /** Number of placeholder rows to show while a lazy load is in flight. */
+    skeletonRows = computed(() => {
+        if (this.loadStatus() !== 'loading')
+            return 0;
+        return this.paginator()
+            ? (this.pageState()?.page.size ?? DEFAULT_LAZY_PAGE_SIZE)
+            : this.virtualPadding() * 2 + 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
     formattedRows = computed(() => {
         const groupBy = this.groupBy();
         if (groupBy) {
@@ -1166,15 +1359,27 @@ class NgnTable extends NgnTableTemplates {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_groupedRows" }] : /* istanbul ignore next */ []));
     pagedRows = computed(() => {
-        if (!this.paginator()) {
+        // Lazy pagination clears rows while fetching so skeletons replace the page.
+        if (this.lazy() && this.lazyMode() === 'paginate' && this.loadStatus() === 'loading') {
+            return [];
+        }
+        // Lazy loaders return exactly one page — never re-slice client-side.
+        if (!this.paginator() || this.lazy()) {
             return this.formattedRows();
         }
         return [...paginateRows(this.formattedRows(), this.pageState())];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pagedRows" }] : /* istanbul ignore next */ []));
-    _filteredRows = computed(() => filterRows(this.rows(), this.filters()), /* @ts-ignore */
+    _baseRows = computed(() => this.lazy() ? this._lazyModel.loaded() : this.rows(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_baseRows" }] : /* istanbul ignore next */ []));
+    _filteredRows = computed(() => this.lazy() ? this._baseRows() : filterRows(this._baseRows(), this.filters()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_filteredRows" }] : /* istanbul ignore next */ []));
-    _sortedRows = computed(() => sortRows(this._filteredRows(), this.sort(), this.sortComparator()), /* @ts-ignore */
+    /** Page size only — page navigation must not invalidate the per-page cache. */
+    _lazyPageSize = computed(() => this.pageState()?.page.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lazyPageSize" }] : /* istanbul ignore next */ []));
+    _sortedRows = computed(() => this.lazy()
+        ? this._baseRows()
+        : sortRows(this._filteredRows(), this.sort(), this.sortComparator()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_sortedRows" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
@@ -1197,7 +1402,9 @@ class NgnTable extends NgnTableTemplates {
             openMenu: index => this.getRowActions(index)?.openMenuFromKeyboard() ?? false,
             focusHost: () => this.element.nativeElement.focus(),
         });
-        this.headerCheckboxValue = computed(() => this._selection.headerCheckboxValue(), /* @ts-ignore */
+        this.headerCheckboxValue = computed(() => this.lazy() && this.lazyMode() === 'infinite'
+            ? this.selectAllMatching()
+            : this._selection.headerCheckboxValue(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerCheckboxValue" }] : /* istanbul ignore next */ []));
         // Minor #3: clear the current-row highlight whenever the underlying row
         // set changes identity (sort/filter/rows replaced), so it never lingers
@@ -1221,9 +1428,13 @@ class NgnTable extends NgnTableTemplates {
         let prevSelCount = 0;
         effect(() => {
             const sort = this.sort();
-            const filterCount = this._filteredRows().length;
+            // Lazy: announce the server total; fall back to the loaded window count.
+            const filterCount = this.lazy()
+                ? (this.loadTotal() ?? this._filteredRows().length)
+                : this._filteredRows().length;
             const page = this.pageState();
             const selCount = this.selection().length;
+            const selTotal = this.lazy() ? (this.loadTotal() ?? this.rows().length) : this.rows().length;
             const sortKey = sort ? `${sort.column}:${sort.direction}` : '';
             const pageKey = page ? `${page.page.current}/${page.page.size}` : '';
             if (!seeded) {
@@ -1254,7 +1465,7 @@ class NgnTable extends NgnTableTemplates {
                 message = this.i18n['table_page']({ page: (page?.page.current ?? 0) + 1, pages });
             }
             else if (selCount !== prevSelCount) {
-                message = this.i18n['table_selectedCount']({ count: selCount, total: this.rows().length });
+                message = this.i18n['table_selectedCount']({ count: selCount, total: selTotal });
             }
             [prevSort, prevFilterCount, prevPageKey, prevSelCount] = [
                 sortKey,
@@ -1266,6 +1477,57 @@ class NgnTable extends NgnTableTemplates {
                 this.liveAnnouncement.set(message);
             }
         });
+        // Lazy grouping needs the full row set, which lazy mode never has.
+        effect(() => {
+            if (this.lazy() && this.groupBy()) {
+                throw new NgnError('table', 'groupBy is not supported with a lazy dataSource (v1)');
+            }
+        });
+        // Reset the lazy cache when sort, filter, page size or dataSource change.
+        effect(() => {
+            this.sort();
+            this.filters();
+            this._lazyPageSize();
+            this.dataSource();
+            if (!this.lazy())
+                return;
+            untracked(() => this._lazyModel.invalidate());
+        });
+        // Lazy pagination: load the current page when it, sort, filters or dataSource change.
+        effect(() => {
+            const state = this.pageState();
+            this.sort();
+            this.filters();
+            this.dataSource();
+            if (!this.lazy() || this.lazyMode() !== 'paginate' || !state)
+                return;
+            untracked(() => void this._lazyModel.setPage(state));
+        });
+        // Infinite scroll: load the next window when the viewport nears the end.
+        effect(() => {
+            if (!this.lazy() || this.lazyMode() !== 'infinite')
+                return;
+            const distance = this._scroller().distanceFromEnd();
+            const threshold = (this.rowHeight() ?? 40) * this.virtualPadding();
+            const pageSize = this.pageState()?.page.size ?? DEFAULT_LAZY_PAGE_SIZE;
+            if (distance <= threshold) {
+                untracked(() => void this._lazyModel.loadNext(pageSize));
+            }
+        });
+    }
+    /** Force a lazy refetch, clearing the page cache. No-op in client-side mode. */
+    reload() {
+        // Infinite scroll has no current page — restart from the first window.
+        if (this.lazy() && this.lazyMode() === 'infinite') {
+            this._lazyModel.invalidate();
+            void this._lazyModel.loadNext(this.pageState()?.page.size ?? DEFAULT_LAZY_PAGE_SIZE);
+            return;
+        }
+        void this._lazyModel.reload();
+    }
+    /** Retry the failed load, keeping already-loaded rows in infinite scroll. */
+    retryLoad() {
+        void this._lazyModel.retry();
     }
     pageChanged(event) {
         this.pageState.set(event);
@@ -1341,6 +1603,10 @@ class NgnTable extends NgnTableTemplates {
         this._selection.handleCheckboxChange(row);
     }
     toggleSelectAll() {
+        if (this.lazy() && this.lazyMode() === 'infinite') {
+            this.selectAllMatching.update(v => !v);
+            return;
+        }
         this._selection.toggleSelectAll();
     }
     // --- Row actions registry ---
@@ -1405,7 +1671,7 @@ class NgnTable extends NgnTableTemplates {
         this.toggleGroup(row.groupKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnTable, isStandalone: true, selector: "ngn-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, virtualPadding: { classPropertyName: "virtualPadding", publicName: "virtualPadding", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, expandedGroups: { classPropertyName: "expandedGroups", publicName: "expandedGroups", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, lockSizes: { classPropertyName: "lockSizes", publicName: "lockSizes", 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 }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, sortComparator: { classPropertyName: "sortComparator", publicName: "sortComparator", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", expandedGroups: "expandedGroupsChange", columnOrder: "columnOrderChange", sort: "sortChange", filters: "filtersChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" } }, providers: [provideSelf(NgnTable)], viewQueries: [{ propertyName: "_scroller", first: true, predicate: NgnScroller, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<span\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n  style=\"\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    white-space: nowrap;\n    border: 0;\n  \"\n  >{{ liveAnnouncement() }}</span\n>\n<table\n  #scrollContainer\n  role=\"grid\"\n  ngnScrollShadow=\"horizontal\"\n  [ptInt]=\"this\"\n  [ptClass]=\"{ table: true, striped: striped() }\"\n  [attr.aria-multiselectable]=\"selectionMode() === 'multi' ? true : null\"\n  [attr.aria-rowcount]=\"formattedRows().length\"\n  [style.--ngn-table-column-count]=\"totalColumnCount()\"\n  [style.--ngn-table-selection-offset]=\"showCheckboxes() ? 1 : 0\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\n  [style.--ngn-table-row-height.px]=\"rowHeight()\"\n>\n  <thead role=\"rowgroup\" [ptInt]=\"this\" [ptClass]=\"'head'\">\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n  </thead>\n  @if (dropIndicatorState()) {\n    <div\n      [ptInt]=\"this\"\n      [ptClass]=\"'drop-indicator'\"\n      [style.left.px]=\"dropIndicatorState()!.leftPx\"\n      [style.top.px]=\"dropIndicatorState()!.topPx\"\n      [style.height.px]=\"dropIndicatorState()!.heightPx\"\n    ></div>\n  }\n\n  <tbody\n    role=\"rowgroup\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'body'\"\n    [ptDep]=\"'scroller'\"\n    ngn-scroller\n    #scroller\n    [scrollContainer]=\"scrollContainer\"\n    [virtual]=\"virtual()\"\n    [items]=\"pagedRows()\"\n    [fieldId]=\"'id'\"\n    [itemHeight]=\"rowHeight() || 0\"\n    [virtualPadding]=\"virtualPadding()\"\n    [style.--ngn-table-item-start-index]=\"scroller.itemStartIndex()\"\n  >\n    <ng-template #item [ngnTemplate]=\"scroller.templateTypes.item\" let-item let-index=\"index\">\n      @if (item.kind === 'group-header') {\n        @if (groupHeaderTemplate(); as customGroupHeader) {\n          <ng-container\n            [ngTemplateOutlet]=\"customGroupHeader\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: {\n                groupKey: item.groupKey,\n                groupValue: item.groupValue,\n                count: item.count,\n                expanded: item.expanded,\n              },\n            }\"\n          ></ng-container>\n        } @else {\n          <tr\n            [ngnTableGroupHeaderTr]=\"item\"\n            [class]=\"theme.classes({ 'group-expanded': item.expanded })\"\n            [attr.aria-expanded]=\"item.expanded\"\n            role=\"row\"\n            (click)=\"toggleGroupFromRow(item)\"\n          >\n            <td [class]=\"theme.class('group-header-cell')\" role=\"gridcell\">\n              <ngn-icon\n                [ptInt]=\"this\"\n                [ptClass]=\"'group-toggle'\"\n                [ptDep]=\"'group-toggle-icon'\"\n                [defaultIcon]=\"'table-group-toggle'\"\n              />\n              <span>{{ item.groupValue }}</span>\n              <span>({{ item.count }})</span>\n            </td>\n          </tr>\n        }\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"bodyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        ></ng-container>\n      }\n    </ng-template>\n  </tbody>\n</table>\n@if (paginator()) {\n  <ngn-paginator\n    [ptInt]=\"this\"\n    [ptDep]=\"'paginator'\"\n    [totalItems]=\"rows().length\"\n    (value)=\"pageChanged($event)\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnScroller, selector: "ngn-scroller, [ngn-scroller]", inputs: ["items", "fieldId", "virtual", "itemHeight", "virtualPadding", "focusable", "fieldSticky"] }, { kind: "component", type: NgnPaginator, selector: "ngn-paginator", inputs: ["totalItems", "pageSize", "possiblePageSizes", "fixedPageSize", "page"], outputs: ["pageSizeChange", "value", "pageChange"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: NgnTableGroupHeaderTr, selector: "[ngnTableGroupHeaderTr]", inputs: ["ngnTableGroupHeaderTr", "ngnScrollerItem"] }, { kind: "directive", type: NgnScrollShadow, selector: "[ngnScrollShadow]", inputs: ["ngnScrollShadow", "scrollShadowTarget"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnTable, isStandalone: true, selector: "ngn-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, virtualPadding: { classPropertyName: "virtualPadding", publicName: "virtualPadding", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, selectAllMatching: { classPropertyName: "selectAllMatching", publicName: "selectAllMatching", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, expandedGroups: { classPropertyName: "expandedGroups", publicName: "expandedGroups", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, lockSizes: { classPropertyName: "lockSizes", publicName: "lockSizes", 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 }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, sortComparator: { classPropertyName: "sortComparator", publicName: "sortComparator", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAllMatching: "selectAllMatchingChange", selection: "selectionChange", expandedGroups: "expandedGroupsChange", columnOrder: "columnOrderChange", sort: "sortChange", filters: "filtersChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" } }, providers: [provideSelf(NgnTable)], viewQueries: [{ propertyName: "_scroller", first: true, predicate: NgnScroller, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<span\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n  style=\"\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    white-space: nowrap;\n    border: 0;\n  \"\n  >{{ liveAnnouncement() }}</span\n>\n<table\n  #scrollContainer\n  role=\"grid\"\n  ngnScrollShadow=\"horizontal\"\n  ngnScrollShadowUnstyled\n  [ptInt]=\"this\"\n  [ptClass]=\"{ table: true, striped: striped() }\"\n  [attr.aria-multiselectable]=\"selectionMode() === 'multi' ? true : null\"\n  [attr.aria-rowcount]=\"formattedRows().length\"\n  [style.--ngn-table-column-count]=\"totalColumnCount()\"\n  [style.--ngn-table-selection-offset]=\"showCheckboxes() ? 1 : 0\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\n  [style.--ngn-table-row-height.px]=\"rowHeight()\"\n>\n  <thead role=\"rowgroup\" [ptInt]=\"this\" [ptClass]=\"'head'\">\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n  </thead>\n  @if (dropIndicatorState()) {\n    <div\n      [ptInt]=\"this\"\n      [ptClass]=\"'drop-indicator'\"\n      [style.left.px]=\"dropIndicatorState()!.leftPx\"\n      [style.top.px]=\"dropIndicatorState()!.topPx\"\n      [style.height.px]=\"dropIndicatorState()!.heightPx\"\n    ></div>\n  }\n\n  <tbody\n    role=\"rowgroup\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'body'\"\n    [ptDep]=\"'scroller'\"\n    ngn-scroller\n    #scroller\n    [scrollContainer]=\"scrollContainer\"\n    [virtual]=\"virtual()\"\n    [items]=\"pagedRows()\"\n    [fieldId]=\"'id'\"\n    [itemHeight]=\"rowHeight() || 0\"\n    [virtualPadding]=\"virtualPadding()\"\n    [style.--ngn-table-item-start-index]=\"scroller.itemStartIndex()\"\n  >\n    <ng-template #item [ngnTemplate]=\"scroller.templateTypes.item\" let-item let-index=\"index\">\n      @if (item.kind === 'group-header') {\n        @if (groupHeaderTemplate(); as customGroupHeader) {\n          <ng-container\n            [ngTemplateOutlet]=\"customGroupHeader\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: {\n                groupKey: item.groupKey,\n                groupValue: item.groupValue,\n                count: item.count,\n                expanded: item.expanded,\n              },\n            }\"\n          ></ng-container>\n        } @else {\n          <tr\n            [ngnTableGroupHeaderTr]=\"item\"\n            [class]=\"theme.classes({ 'group-expanded': item.expanded })\"\n            [attr.aria-expanded]=\"item.expanded\"\n            role=\"row\"\n            (click)=\"toggleGroupFromRow(item)\"\n          >\n            <td [class]=\"theme.class('group-header-cell')\" role=\"gridcell\">\n              <ngn-icon\n                [ptInt]=\"this\"\n                [ptClass]=\"'group-toggle'\"\n                [ptDep]=\"'group-toggle-icon'\"\n                [defaultIcon]=\"'table-group-toggle'\"\n              />\n              <span>{{ item.groupValue }}</span>\n              <span>({{ item.count }})</span>\n            </td>\n          </tr>\n        }\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"bodyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        ></ng-container>\n      }\n    </ng-template>\n    @if (skeletonRows() > 0) {\n      @if (loadingTemplate(); as customLoading) {\n        <ng-container [ngTemplateOutlet]=\"customLoading\"></ng-container>\n      } @else {\n        @for (i of [].constructor(skeletonRows()); track $index) {\n          <tr [class]=\"theme.class('skeleton-row')\" role=\"row\" aria-hidden=\"true\">\n            <td [class]=\"theme.class('skeleton-cell')\" role=\"gridcell\"></td>\n          </tr>\n        }\n      }\n    }\n    @if (loadStatus() === 'error') {\n      @if (errorTemplate(); as customError) {\n        <ng-container\n          [ngTemplateOutlet]=\"customError\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: { error: loadError(), retry: retryLoad.bind(this) },\n          }\"\n        ></ng-container>\n      } @else {\n        <tr [class]=\"theme.class('error-row')\" role=\"row\">\n          <td [attr.colspan]=\"totalColumnCount()\" role=\"gridcell\">\n            <span>{{ i18n['table_loadError']() }}</span>\n            <button ngnButton [kind]=\"'text'\" (click)=\"retryLoad()\">\n              {{ i18n['table_retry']() }}\n            </button>\n          </td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n@if (paginator()) {\n  <ngn-paginator\n    [ptInt]=\"this\"\n    [ptDep]=\"'paginator'\"\n    [mode]=\"lazy() && loadTotal() === undefined ? 'compact' : 'pages'\"\n    [totalItems]=\"lazy() ? (loadTotal() ?? 0) : rows().length\"\n    [hasNext]=\"lazyHasMore()\"\n    (value)=\"pageChanged($event)\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnScroller, selector: "ngn-scroller, [ngn-scroller]", inputs: ["items", "fieldId", "virtual", "itemHeight", "virtualPadding", "focusable", "fieldSticky"] }, { kind: "component", type: NgnPaginator, selector: "ngn-paginator", inputs: ["totalItems", "pageSize", "mode", "hasNext", "possiblePageSizes", "fixedPageSize", "page"], outputs: ["pageSizeChange", "value", "pageChange"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: NgnTableGroupHeaderTr, selector: "[ngnTableGroupHeaderTr]", inputs: ["ngnTableGroupHeaderTr", "ngnScrollerItem"] }, { kind: "directive", type: NgnScrollShadow, selector: "[ngnScrollShadow]", inputs: ["ngnScrollShadow", "scrollShadowTarget", "ngnScrollShadowUnstyled"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["ngnButtonInline"], exportAs: ["ngnButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTable, decorators: [{
             type: Component,
@@ -1418,11 +1684,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         NgnIcon,
                         NgnTableGroupHeaderTr,
                         NgnScrollShadow,
+                        NgnButton,
                     ], providers: [provideSelf(NgnTable)], host: {
                         tabindex: '0',
                         '(keydown)': 'onKeyDown($event)',
-                    }, template: "<span\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n  style=\"\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    white-space: nowrap;\n    border: 0;\n  \"\n  >{{ liveAnnouncement() }}</span\n>\n<table\n  #scrollContainer\n  role=\"grid\"\n  ngnScrollShadow=\"horizontal\"\n  [ptInt]=\"this\"\n  [ptClass]=\"{ table: true, striped: striped() }\"\n  [attr.aria-multiselectable]=\"selectionMode() === 'multi' ? true : null\"\n  [attr.aria-rowcount]=\"formattedRows().length\"\n  [style.--ngn-table-column-count]=\"totalColumnCount()\"\n  [style.--ngn-table-selection-offset]=\"showCheckboxes() ? 1 : 0\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\n  [style.--ngn-table-row-height.px]=\"rowHeight()\"\n>\n  <thead role=\"rowgroup\" [ptInt]=\"this\" [ptClass]=\"'head'\">\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n  </thead>\n  @if (dropIndicatorState()) {\n    <div\n      [ptInt]=\"this\"\n      [ptClass]=\"'drop-indicator'\"\n      [style.left.px]=\"dropIndicatorState()!.leftPx\"\n      [style.top.px]=\"dropIndicatorState()!.topPx\"\n      [style.height.px]=\"dropIndicatorState()!.heightPx\"\n    ></div>\n  }\n\n  <tbody\n    role=\"rowgroup\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'body'\"\n    [ptDep]=\"'scroller'\"\n    ngn-scroller\n    #scroller\n    [scrollContainer]=\"scrollContainer\"\n    [virtual]=\"virtual()\"\n    [items]=\"pagedRows()\"\n    [fieldId]=\"'id'\"\n    [itemHeight]=\"rowHeight() || 0\"\n    [virtualPadding]=\"virtualPadding()\"\n    [style.--ngn-table-item-start-index]=\"scroller.itemStartIndex()\"\n  >\n    <ng-template #item [ngnTemplate]=\"scroller.templateTypes.item\" let-item let-index=\"index\">\n      @if (item.kind === 'group-header') {\n        @if (groupHeaderTemplate(); as customGroupHeader) {\n          <ng-container\n            [ngTemplateOutlet]=\"customGroupHeader\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: {\n                groupKey: item.groupKey,\n                groupValue: item.groupValue,\n                count: item.count,\n                expanded: item.expanded,\n              },\n            }\"\n          ></ng-container>\n        } @else {\n          <tr\n            [ngnTableGroupHeaderTr]=\"item\"\n            [class]=\"theme.classes({ 'group-expanded': item.expanded })\"\n            [attr.aria-expanded]=\"item.expanded\"\n            role=\"row\"\n            (click)=\"toggleGroupFromRow(item)\"\n          >\n            <td [class]=\"theme.class('group-header-cell')\" role=\"gridcell\">\n              <ngn-icon\n                [ptInt]=\"this\"\n                [ptClass]=\"'group-toggle'\"\n                [ptDep]=\"'group-toggle-icon'\"\n                [defaultIcon]=\"'table-group-toggle'\"\n              />\n              <span>{{ item.groupValue }}</span>\n              <span>({{ item.count }})</span>\n            </td>\n          </tr>\n        }\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"bodyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        ></ng-container>\n      }\n    </ng-template>\n  </tbody>\n</table>\n@if (paginator()) {\n  <ngn-paginator\n    [ptInt]=\"this\"\n    [ptDep]=\"'paginator'\"\n    [totalItems]=\"rows().length\"\n    (value)=\"pageChanged($event)\"\n  />\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { _scroller: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnScroller), { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: true }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], virtualPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualPadding", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], expandedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedGroups", required: false }] }, { type: i0.Output, args: ["expandedGroupsChange"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], resizeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMode", required: false }] }], lockSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockSizes", 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"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sortComparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortComparator", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }] } });
+                    }, template: "<span\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n  style=\"\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    white-space: nowrap;\n    border: 0;\n  \"\n  >{{ liveAnnouncement() }}</span\n>\n<table\n  #scrollContainer\n  role=\"grid\"\n  ngnScrollShadow=\"horizontal\"\n  ngnScrollShadowUnstyled\n  [ptInt]=\"this\"\n  [ptClass]=\"{ table: true, striped: striped() }\"\n  [attr.aria-multiselectable]=\"selectionMode() === 'multi' ? true : null\"\n  [attr.aria-rowcount]=\"formattedRows().length\"\n  [style.--ngn-table-column-count]=\"totalColumnCount()\"\n  [style.--ngn-table-selection-offset]=\"showCheckboxes() ? 1 : 0\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\n  [style.--ngn-table-row-height.px]=\"rowHeight()\"\n>\n  <thead role=\"rowgroup\" [ptInt]=\"this\" [ptClass]=\"'head'\">\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n  </thead>\n  @if (dropIndicatorState()) {\n    <div\n      [ptInt]=\"this\"\n      [ptClass]=\"'drop-indicator'\"\n      [style.left.px]=\"dropIndicatorState()!.leftPx\"\n      [style.top.px]=\"dropIndicatorState()!.topPx\"\n      [style.height.px]=\"dropIndicatorState()!.heightPx\"\n    ></div>\n  }\n\n  <tbody\n    role=\"rowgroup\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'body'\"\n    [ptDep]=\"'scroller'\"\n    ngn-scroller\n    #scroller\n    [scrollContainer]=\"scrollContainer\"\n    [virtual]=\"virtual()\"\n    [items]=\"pagedRows()\"\n    [fieldId]=\"'id'\"\n    [itemHeight]=\"rowHeight() || 0\"\n    [virtualPadding]=\"virtualPadding()\"\n    [style.--ngn-table-item-start-index]=\"scroller.itemStartIndex()\"\n  >\n    <ng-template #item [ngnTemplate]=\"scroller.templateTypes.item\" let-item let-index=\"index\">\n      @if (item.kind === 'group-header') {\n        @if (groupHeaderTemplate(); as customGroupHeader) {\n          <ng-container\n            [ngTemplateOutlet]=\"customGroupHeader\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: {\n                groupKey: item.groupKey,\n                groupValue: item.groupValue,\n                count: item.count,\n                expanded: item.expanded,\n              },\n            }\"\n          ></ng-container>\n        } @else {\n          <tr\n            [ngnTableGroupHeaderTr]=\"item\"\n            [class]=\"theme.classes({ 'group-expanded': item.expanded })\"\n            [attr.aria-expanded]=\"item.expanded\"\n            role=\"row\"\n            (click)=\"toggleGroupFromRow(item)\"\n          >\n            <td [class]=\"theme.class('group-header-cell')\" role=\"gridcell\">\n              <ngn-icon\n                [ptInt]=\"this\"\n                [ptClass]=\"'group-toggle'\"\n                [ptDep]=\"'group-toggle-icon'\"\n                [defaultIcon]=\"'table-group-toggle'\"\n              />\n              <span>{{ item.groupValue }}</span>\n              <span>({{ item.count }})</span>\n            </td>\n          </tr>\n        }\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"bodyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        ></ng-container>\n      }\n    </ng-template>\n    @if (skeletonRows() > 0) {\n      @if (loadingTemplate(); as customLoading) {\n        <ng-container [ngTemplateOutlet]=\"customLoading\"></ng-container>\n      } @else {\n        @for (i of [].constructor(skeletonRows()); track $index) {\n          <tr [class]=\"theme.class('skeleton-row')\" role=\"row\" aria-hidden=\"true\">\n            <td [class]=\"theme.class('skeleton-cell')\" role=\"gridcell\"></td>\n          </tr>\n        }\n      }\n    }\n    @if (loadStatus() === 'error') {\n      @if (errorTemplate(); as customError) {\n        <ng-container\n          [ngTemplateOutlet]=\"customError\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: { error: loadError(), retry: retryLoad.bind(this) },\n          }\"\n        ></ng-container>\n      } @else {\n        <tr [class]=\"theme.class('error-row')\" role=\"row\">\n          <td [attr.colspan]=\"totalColumnCount()\" role=\"gridcell\">\n            <span>{{ i18n['table_loadError']() }}</span>\n            <button ngnButton [kind]=\"'text'\" (click)=\"retryLoad()\">\n              {{ i18n['table_retry']() }}\n            </button>\n          </td>\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n@if (paginator()) {\n  <ngn-paginator\n    [ptInt]=\"this\"\n    [ptDep]=\"'paginator'\"\n    [mode]=\"lazy() && loadTotal() === undefined ? 'compact' : 'pages'\"\n    [totalItems]=\"lazy() ? (loadTotal() ?? 0) : rows().length\"\n    [hasNext]=\"lazyHasMore()\"\n    (value)=\"pageChanged($event)\"\n  />\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { _scroller: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnScroller), { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: true }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], virtualPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualPadding", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], selectAllMatching: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllMatching", required: false }] }, { type: i0.Output, args: ["selectAllMatchingChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], expandedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedGroups", required: false }] }, { type: i0.Output, args: ["expandedGroupsChange"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], resizeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMode", required: false }] }], lockSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockSizes", 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"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sortComparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortComparator", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }] } });
 
 /**
  * Lightweight body-cell directive. Deliberately does **not** extend `NgnBase`: