@3kles/kles-material-table-v2 21.6.0 → 21.7.0

package/fesm2022/3kles-kles-material-table-v2.mjs

@@ -24,7 +24,7 @@ import * as i24 from '@angular/cdk/drag-drop';
 import { CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i25 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, defer, defaultIfEmpty, merge, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
+import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, defer, defaultIfEmpty, fromEvent, skip, merge, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as _ from 'lodash';
 import ___default from 'lodash';
@@ -97,6 +97,7 @@ const ROW_DRAG_DROP = new InjectionToken('ROW_DRAG_DROP');
 const DRAG_DROP_CONFIG = new InjectionToken('DRAG_DROP_CONFIG');
 const KLES_DRAG_DROP_ROW_CONTEXT = new InjectionToken('KLES_DRAG_DROP_ROW_CONTEXT');
 const PAGINATOR_CONFIG = new InjectionToken('PAGINATOR_CONFIG');
+const INFINITE_SCROLL_CONFIG = new InjectionToken('INFINITE_SCROLL_CONFIG');
 const SORT_CONFIG = new InjectionToken('SORT_CONFIG');
 const HEADER_SERVICE = new InjectionToken('HEADER_SERVICE');
 const LOADER_SERVICE = new InjectionToken('LOADER_SERVICE');
@@ -3231,14 +3232,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Injectable
         }] });
 
+class InfiniteScrollService {
+    constructor(config, loaderConfig, loader, linesService, paginatorStore, sortStore, filterStore, form, scrollbarService, eventsService, destroyRef) {
+        this.config = config;
+        this.loaderConfig = loaderConfig;
+        this.loader = loader;
+        this.linesService = linesService;
+        this.paginatorStore = paginatorStore;
+        this.sortStore = sortStore;
+        this.filterStore = filterStore;
+        this.form = form;
+        this.scrollbarService = scrollbarService;
+        this.eventsService = eventsService;
+        this.destroyRef = destroyRef;
+        this.registered = false;
+        this.loading = false;
+        this.lastLoadedPage = 0;
+        this._loadingMore = signal(false, ...(ngDevMode ? [{ debugName: "_loadingMore" }] : /* istanbul ignore next */ []));
+        this.loadingMore = this._loadingMore.asReadonly();
+    }
+    register(element) {
+        this.element = element;
+        if (this.registered)
+            return;
+        this.registered = true;
+        fromEvent(element, 'scroll', { passive: true })
+            .pipe(auditTime(this.config.scrollDebounceTime ?? 100), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.loadNextPageIfNeeded());
+        this.loader
+            .load()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((response) => {
+            this.loading = response.loading;
+            if (!response.loading) {
+                this._loadingMore.set(false);
+                if (!response.error) {
+                    this.lastLoadedPage = this.paginatorStore.snapshot().page;
+                    this.checkViewportAfterRender();
+                }
+            }
+        });
+        this.sortStore.sort$.pipe(skip(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.reset());
+        this.filterStore.filters$.pipe(skip(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.reset());
+        this.eventsService.events$
+            .pipe(filter((event) => event.type === 'refresh'), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.reset());
+        const params$ = this.loaderConfig.lines.params?.();
+        params$?.pipe(skip(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.reset());
+    }
+    loadNextPageIfNeeded() {
+        const element = this.element;
+        if (!element || this.loading || this._loadingMore())
+            return;
+        const remaining = element.scrollHeight - element.scrollTop - element.clientHeight;
+        if (remaining > (this.config.scrollThreshold ?? 200))
+            return;
+        const loadedRows = this.form.getRows().length;
+        const total = this.linesService.total();
+        if (total === 0 || loadedRows >= total)
+            return;
+        const previousPage = this.lastLoadedPage;
+        const pageSize = this.paginatorStore.snapshot().perPage;
+        const pageIndex = previousPage + 1;
+        this._loadingMore.set(true);
+        this.paginatorStore.setPage({ page: pageIndex, perPage: pageSize });
+        this.eventsService.emit('pageChange', {
+            pageIndex,
+            previousPageIndex: previousPage,
+            pageSize,
+            totalItems: total,
+        });
+    }
+    reset() {
+        const pagination = this.paginatorStore.snapshot();
+        this.lastLoadedPage = 0;
+        this._loadingMore.set(false);
+        this.scrollbarService.toTop('instant');
+        if (pagination.page !== 0) {
+            this.paginatorStore.setPage({ page: 0, perPage: pagination.perPage });
+        }
+    }
+    checkViewportAfterRender() {
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(() => this.loadNextPageIfNeeded());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollService, deps: [{ token: INFINITE_SCROLL_CONFIG }, { token: LOADER_CONFIG }, { token: LOADER_SERVICE }, { token: LINES_SERVICE }, { token: PaginatorStore }, { token: SortStore }, { token: FilterStore }, { token: KlesForm }, { token: ScrollbarService }, { token: EventsService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [INFINITE_SCROLL_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOADER_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOADER_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LINES_SERVICE]
+                }] }, { type: PaginatorStore }, { type: SortStore }, { type: FilterStore }, { type: KlesForm }, { type: ScrollbarService }, { type: EventsService }, { type: i0.DestroyRef }] });
+
 class InfiniteScrollTableComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: InfiniteScrollTableComponent, isStandalone: true, selector: "kles-infinite-scroll-table", ngImport: i0, template: "" }); }
+    constructor(infiniteScrollService) {
+        this.infiniteScrollService = infiniteScrollService;
+        this.loadingMore = infiniteScrollService.loadingMore;
+    }
+    ngAfterViewInit() {
+        this.infiniteScrollService.register(this.table.formElemRef.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, deps: [{ token: InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InfiniteScrollTableComponent, isStandalone: true, selector: "kles-infinite-scroll-table", viewQueries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true, static: true }], ngImport: i0, template: "<kles-table></kles-table>\n\n@if (loadingMore()) {\n    <div class=\"loading-more-indicator\" role=\"status\" aria-label=\"Loading more rows\">\n        <mat-spinner [diameter]=\"24\"></mat-spinner>\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;height:100%;overflow:hidden}kles-table{min-height:0;flex:1 1 auto}.loading-more-indicator{position:absolute;inset-inline-start:50%;bottom:24px;z-index:600;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--mat-sys-outline-variant);border-radius:50%;background:var(--mat-sys-surface-container-high);box-shadow:var(--mat-sys-level3);transform:translate(-50%);pointer-events:none}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "kles-table" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i25.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kles-infinite-scroll-table', standalone: true, imports: [], template: "" }]
-        }] });
+            args: [{ selector: 'kles-infinite-scroll-table', standalone: true, imports: [TableComponent, MatProgressSpinnerModule], template: "<kles-table></kles-table>\n\n@if (loadingMore()) {\n    <div class=\"loading-more-indicator\" role=\"status\" aria-label=\"Loading more rows\">\n        <mat-spinner [diameter]=\"24\"></mat-spinner>\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;height:100%;overflow:hidden}kles-table{min-height:0;flex:1 1 auto}.loading-more-indicator{position:absolute;inset-inline-start:50%;bottom:24px;z-index:600;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--mat-sys-outline-variant);border-radius:50%;background:var(--mat-sys-surface-container-high);box-shadow:var(--mat-sys-level3);transform:translate(-50%);pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: InfiniteScrollService }], propDecorators: { table: [{
+                type: ViewChild,
+                args: [TableComponent, { static: true }]
+            }] } });
 
 class SelectionLoaderService {
     constructor(selectionConfig) {
@@ -4365,6 +4480,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     type: Inject,
                     args: [LOADER_SERVICE]
                 }] }, { type: KlesForm }, { type: ColumnsService }, { type: RowFormFactory }, { type: ExtraRowService }, { type: PaginatorService }, { type: EventsService }] });
+class LinesInfiniteService {
+    constructor(loader, fm, columnsService, rowFactory, extraRowService, paginatorStore, eventsService) {
+        this.loader = loader;
+        this.fm = fm;
+        this.columnsService = columnsService;
+        this.rowFactory = rowFactory;
+        this.extraRowService = extraRowService;
+        this.paginatorStore = paginatorStore;
+        this.eventsService = eventsService;
+        this.destroyRef = inject(DestroyRef);
+        this._total = 0;
+        this._loaded = new EventEmitter();
+        this._loading = new EventEmitter();
+    }
+    register() {
+        this.loader
+            .load()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((response) => {
+            if (response.loading) {
+                this._loading.emit();
+                this.eventsService.emit('loadStart');
+                return;
+            }
+            if (response.error) {
+                this.eventsService.emit('loadError', {
+                    error: response.error,
+                    message: response.error?.message,
+                });
+                return;
+            }
+            const rows = this.rowFactory.createRows(this.columnsService
+                .columns()
+                .map((column) => ({ ...column.cell?.field, name: column.columnDef }))
+                .concat(this.extraRowService.extraFields()), response.items ?? []);
+            if (this.paginatorStore.snapshot().page === 0) {
+                this.fm.setRows(rows);
+            }
+            else {
+                this.fm.insertRows(rows);
+            }
+            this._total = response.total ?? 0;
+            this._loaded.emit();
+            this.eventsService.emit('loadSuccess', {
+                total: this._total,
+                values: response.items ?? [],
+                rawValues: this.fm.getRows().getRawValue(),
+                rows: this.fm.getRows().controls,
+            });
+        });
+    }
+    total() {
+        return this._total;
+    }
+    loaded() {
+        return this._loaded;
+    }
+    loading() {
+        return this._loading;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesInfiniteService, deps: [{ token: LOADER_SERVICE }, { token: KlesForm }, { token: ColumnsService }, { token: RowFormFactory }, { token: ExtraRowService }, { token: PaginatorStore }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesInfiniteService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: LinesInfiniteService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: LoaderLazyService, decorators: [{
+                    type: Inject,
+                    args: [LOADER_SERVICE]
+                }] }, { type: KlesForm }, { type: ColumnsService }, { type: RowFormFactory }, { type: ExtraRowService }, { type: PaginatorStore }, { type: EventsService }] });
 
 class LoadingOrchestratorService {
     constructor(loader, loadingService) {
@@ -4397,6 +4581,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     type: Inject,
                     args: [LOADER_SERVICE]
                 }] }, { type: LoadingService }] });
+class InfiniteLoadingOrchestratorService {
+    constructor(loader, loadingService, form) {
+        this.loader = loader;
+        this.loadingService = loadingService;
+        this.form = form;
+        this.destroyRef = inject(DestroyRef);
+    }
+    register() {
+        this.loader
+            .load()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((response) => {
+            if (response.loading && this.form.getRows().length === 0) {
+                this.loadingService.start();
+            }
+            else {
+                this.loadingService.stop();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteLoadingOrchestratorService, deps: [{ token: LOADER_SERVICE }, { token: LoadingService }, { token: KlesForm }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteLoadingOrchestratorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteLoadingOrchestratorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOADER_SERVICE]
+                }] }, { type: LoadingService }, { type: KlesForm }] });
 
 class TableService {
     constructor(klesForm, columnsService, datasourceService, linesService, headerService, selectionService, loadingOrchestratorService, scrollbarOrchestratorService) {
@@ -4539,6 +4752,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     type: Inject,
                     args: [LINES_SERVICE]
                 }] }, { type: ScrollbarService }] });
+class ScrollbarInfiniteOrchestratorService {
+    constructor(linesService, scrollbarService) {
+        this.linesService = linesService;
+        this.scrollbarService = scrollbarService;
+        this.destroyRef = inject(DestroyRef);
+    }
+    register() {
+        this.linesService
+            .loaded()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.scrollbarService.showScrollbar());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarInfiniteOrchestratorService, deps: [{ token: LINES_SERVICE }, { token: ScrollbarService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarInfiniteOrchestratorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScrollbarInfiniteOrchestratorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LINES_SERVICE]
+                }] }, { type: ScrollbarService }] });
 
 class DynamicTableLoaderDirective {
     constructor(viewContainerRef) {
@@ -4566,6 +4800,9 @@ class DynamicTableLoaderDirective {
         this.clearComponent();
     }
     loadComponent() {
+        if (this.tableConfig().infinite && !this.tableConfig().lazy) {
+            throw new Error('KlesMaterialTable: infinite scrolling requires a lazy lines loader.');
+        }
         if (this.componentRef) {
             this.clearComponent();
         }
@@ -4594,7 +4831,13 @@ class DynamicTableLoaderDirective {
         }
     }
     initInjector() {
-        const storeProviders = [RowContextStore, SortStore, FilterStore, ...(this.tableConfig().paginator ? [PaginatorStore] : []), ExpandedRowStore];
+        const storeProviders = [
+            RowContextStore,
+            SortStore,
+            FilterStore,
+            ...(this.tableConfig().paginator || this.tableConfig().infinite ? [PaginatorStore] : []),
+            ExpandedRowStore,
+        ];
         const emptyState = this.tableConfig().emptyState;
         const emptyStateIntl = typeof emptyState === 'object' && emptyState !== null ? emptyState.intl : undefined;
         const configProviders = [
@@ -4638,6 +4881,15 @@ class DynamicTableLoaderDirective {
                     pageSizeOptions: this.tableConfig().pageSizeOptions,
                 },
             },
+            {
+                provide: INFINITE_SCROLL_CONFIG,
+                useValue: {
+                    infinite: this.tableConfig().infinite ?? false,
+                    pageSize: this.tableConfig().pageSize,
+                    scrollThreshold: this.tableConfig().scrollThreshold,
+                    scrollDebounceTime: this.tableConfig().scrollDebounceTime,
+                },
+            },
             ...(this.tableConfig().customMatPaginatorIntl
                 ? [
                     {
@@ -4660,20 +4912,32 @@ class DynamicTableLoaderDirective {
                 : []),
         ];
         const orchestratorProviders = [
-            LoadingOrchestratorService,
-            ...(this.tableConfig().lazy
+            this.tableConfig().infinite
+                ? {
+                    provide: LoadingOrchestratorService,
+                    useClass: InfiniteLoadingOrchestratorService,
+                }
+                : LoadingOrchestratorService,
+            ...(this.tableConfig().infinite
                 ? [
                     {
                         provide: SCROLLBAR_ORCHESTRATOR_SERVICE,
-                        useClass: ScrollbarLazyOrchestratorService,
+                        useClass: ScrollbarInfiniteOrchestratorService,
                     },
                 ]
-                : [
-                    {
-                        provide: SCROLLBAR_ORCHESTRATOR_SERVICE,
-                        useClass: ScrollbarOrchestratorService,
-                    },
-                ]),
+                : this.tableConfig().lazy
+                    ? [
+                        {
+                            provide: SCROLLBAR_ORCHESTRATOR_SERVICE,
+                            useClass: ScrollbarLazyOrchestratorService,
+                        },
+                    ]
+                    : [
+                        {
+                            provide: SCROLLBAR_ORCHESTRATOR_SERVICE,
+                            useClass: ScrollbarOrchestratorService,
+                        },
+                    ]),
         ];
         const datasourceProvider = this.tableConfig().lazy
             ? [
@@ -4698,6 +4962,7 @@ class DynamicTableLoaderDirective {
             ColumnsService,
             FooterService,
             ScrollbarService,
+            ...(this.tableConfig().infinite ? [InfiniteScrollService] : []),
             EventsService,
             RowService,
             CellService,
@@ -4722,7 +4987,7 @@ class DynamicTableLoaderDirective {
                     },
                     {
                         provide: LINES_SERVICE,
-                        useClass: LinesLazyService,
+                        useClass: this.tableConfig().infinite ? LinesInfiniteService : LinesLazyService,
                     },
                     {
                         provide: SELECTION_SERVICE,
@@ -5040,5 +5305,5 @@ var AlignCell;
  * Generated bundle index. Do not edit.
  */
 
-export { AlignCell, COLUMNS, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, KLES_DRAG_DROP_ROW_CONTEXT, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, MULTI_UNFOLD, PAGINATOR_CONFIG, ROW_DRAG_DROP, SCROLLBAR_ORCHESTRATOR_SERVICE, SELECTION_CONFIG, SELECTION_SERVICE, SORT_CONFIG, SORT_SERVICE, Span, TABLE_SERVICE, TableComponent, linesLazyLoader, linesLoader, selectionConfig };
+export { AlignCell, COLUMNS, DATASOURCE_SERVICE, DRAG_DROP_CONFIG, EMPTY_STATE_CONFIG, EXTRA_ROWS, FOOTER, HEADER_SERVICE, INFINITE_SCROLL_CONFIG, KLES_DRAG_DROP_ROW_CONTEXT, KlesMaterialTableModule, KlesTableComponent, KlesTableEmptyStateComponent, KlesTableIntl, LINES_SERVICE, LOADER_CONFIG, LOADER_SERVICE, MULTI_UNFOLD, PAGINATOR_CONFIG, ROW_DRAG_DROP, SCROLLBAR_ORCHESTRATOR_SERVICE, SELECTION_CONFIG, SELECTION_SERVICE, SORT_CONFIG, SORT_SERVICE, Span, TABLE_SERVICE, TableComponent, linesLazyLoader, linesLoader, selectionConfig };
 //# sourceMappingURL=3kles-kles-material-table-v2.mjs.map