@one-paragon/angular-utilities 2.0.2 → 2.0.4-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/one-paragon-angular-utilities.mjs +143 -108
- package/fesm2022/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/components/generic-table/generic-table.component.d.ts +1 -0
- package/table-builder/components/scroll-strategy.d.ts +25 -10
- package/table-builder/components/table-container/virtual-scroll-container.d.ts +5 -8
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, signal, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, output, ViewChild, EnvironmentInjector, createComponent, viewChild, linkedSignal, effect, contentChild, forwardRef, contentChildren, model, runInInjectionContext, provideAppInitializer } from '@angular/core';
|
|
3
|
-
import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged,
|
|
3
|
+
import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, debounceTime, scan as scan$1, timestamp as timestamp$1, first as first$1 } from 'rxjs/operators';
|
|
4
4
|
import * as i1 from 'rxjs';
|
|
5
|
-
import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp,
|
|
5
|
+
import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp, BehaviorSubject } from 'rxjs';
|
|
6
6
|
import { ComponentStore } from '@ngrx/component-store';
|
|
7
7
|
import { toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
|
|
8
8
|
import { DatePipe, CurrencyPipe, KeyValuePipe, NgTemplateOutlet, DecimalPipe, CommonModule, AsyncPipe } from '@angular/common';
|
|
@@ -3857,8 +3857,10 @@ class GenericTableComponent {
|
|
|
3857
3857
|
});
|
|
3858
3858
|
$usePaginator = computed(() => this.state.$tableSettings().usePaginator);
|
|
3859
3859
|
$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'));
|
|
3860
|
+
$virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start);
|
|
3860
3861
|
$offsetIndex = computed(() => {
|
|
3861
|
-
const virtualStart = this
|
|
3862
|
+
const virtualStart = this.$virtualStart();
|
|
3863
|
+
console.log({ virtualStart });
|
|
3862
3864
|
const pageSize = this.state.$pageSize();
|
|
3863
3865
|
const currentPage = this.state.$currentPage();
|
|
3864
3866
|
if (this.$useVirtualScroll()) {
|
|
@@ -3974,7 +3976,7 @@ class GenericTableComponent {
|
|
|
3974
3976
|
if (val == undefined || val === 'null')
|
|
3975
3977
|
return '';
|
|
3976
3978
|
try {
|
|
3977
|
-
return this.transformCreator.createTransformer(this.state.$getMetaData(key)(), true, true)(val);
|
|
3979
|
+
return this.transformCreator.createTransformer(this.state.$getMetaData(key)(), true, true)({ [`${key}`]: val });
|
|
3978
3980
|
}
|
|
3979
3981
|
catch (error) {
|
|
3980
3982
|
return val;
|
|
@@ -4028,14 +4030,14 @@ class GenericTableComponent {
|
|
|
4028
4030
|
});
|
|
4029
4031
|
$stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual());
|
|
4030
4032
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4031
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n #table\r\n [dataSource]=\"$dataSource()\"\r\n [trackBy]=\"$trackByFunction()\"\r\n [style]=\"$tableWidth()\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n @let selection = $selection();\r\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!($masterToggleChecked())\"\r\n [indeterminate]=\"$masterToggleIndeterminate()\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index
|
|
4033
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n #table\r\n [dataSource]=\"$dataSource()\"\r\n [trackBy]=\"$trackByFunction()\"\r\n [style]=\"$tableWidth()\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n @let selection = $selection();\r\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!($masterToggleChecked())\"\r\n [indeterminate]=\"$masterToggleIndeterminate()\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n {{ 1 + i + $offsetIndex() }} {{i}} {{$offsetIndex()}}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n @if (!expanded()) {\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{ getTransform | func : row.key : row.groupHeaderDisplay }} ({{ row.length }})\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4032
4034
|
}
|
|
4033
4035
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
4034
4036
|
type: Component,
|
|
4035
4037
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4036
4038
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
4037
4039
|
MatTooltipModule, FunctionPipe,
|
|
4038
|
-
], template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n #table\r\n [dataSource]=\"$dataSource()\"\r\n [trackBy]=\"$trackByFunction()\"\r\n [style]=\"$tableWidth()\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n @let selection = $selection();\r\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!($masterToggleChecked())\"\r\n [indeterminate]=\"$masterToggleIndeterminate()\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index
|
|
4040
|
+
], template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n #table\r\n [dataSource]=\"$dataSource()\"\r\n [trackBy]=\"$trackByFunction()\"\r\n [style]=\"$tableWidth()\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n @let selection = $selection();\r\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!($masterToggleChecked())\"\r\n [indeterminate]=\"$masterToggleIndeterminate()\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n {{ 1 + i + $offsetIndex() }} {{i}} {{$offsetIndex()}}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n @let expanded = (state.$getIsExpanded | func : row.key : row.groupName );\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n @if (!expanded()) {\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{ getTransform | func : row.key : row.groupHeaderDisplay }} ({{ row.length }})\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n <mat-row [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"] }]
|
|
4039
4041
|
}] });
|
|
4040
4042
|
|
|
4041
4043
|
function downloadData(data, filename, mimeType) {
|
|
@@ -4744,7 +4746,7 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
4744
4746
|
const $pageSize = state.$pageSize;
|
|
4745
4747
|
const $virtualEnds = data.selectSignal(d => d.virtualEnds);
|
|
4746
4748
|
const $dataLength = computed(() => this.#$dataSrc().length);
|
|
4747
|
-
|
|
4749
|
+
this.$dataSize = computed(() => {
|
|
4748
4750
|
const viewType = state.$viewType();
|
|
4749
4751
|
const dataLength = $dataLength();
|
|
4750
4752
|
const currentPage = $currentPage();
|
|
@@ -4762,7 +4764,6 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
4762
4764
|
}
|
|
4763
4765
|
return ({ start: virtualEnds.start, end: virtualEnds.end });
|
|
4764
4766
|
});
|
|
4765
|
-
this.$dataSize = $dataSize;
|
|
4766
4767
|
}
|
|
4767
4768
|
connect() {
|
|
4768
4769
|
return super.connect();
|
|
@@ -5065,93 +5066,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
5065
5066
|
}] });
|
|
5066
5067
|
|
|
5067
5068
|
class TableVirtualScrollStrategy {
|
|
5068
|
-
|
|
5069
|
-
|
|
5069
|
+
constructor(scrollContainer, dataStore) {
|
|
5070
|
+
this.$rowHeight = scrollContainer.computedRowHeight;
|
|
5071
|
+
this.$headerHeight = scrollContainer.computedHeaderHeight;
|
|
5072
|
+
this.viewport = scrollContainer.viewport;
|
|
5073
|
+
this.dataStore = dataStore;
|
|
5074
|
+
this.$dataLength = scrollContainer.$dataLength;
|
|
5075
|
+
}
|
|
5076
|
+
dataStore;
|
|
5070
5077
|
indexChange = new Subject();
|
|
5078
|
+
scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
|
|
5071
5079
|
viewport;
|
|
5080
|
+
$dataLength;
|
|
5081
|
+
$dataLengthChange = linkedSignal({
|
|
5082
|
+
source: () => this.$dataLength(),
|
|
5083
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
|
|
5084
|
+
});
|
|
5072
5085
|
$rowHeight;
|
|
5073
5086
|
$rowHeightChange = linkedSignal({
|
|
5074
5087
|
source: () => this.$rowHeight(),
|
|
5075
|
-
computation: (curr, previous) =>
|
|
5088
|
+
computation: (curr, previous) => {
|
|
5089
|
+
return ({ curr, previous: previous == undefined ? curr : previous.source });
|
|
5090
|
+
}
|
|
5076
5091
|
});
|
|
5077
5092
|
$headerHeight;
|
|
5078
|
-
|
|
5079
|
-
|
|
5080
|
-
|
|
5081
|
-
|
|
5082
|
-
}
|
|
5083
|
-
attach(viewport) {
|
|
5084
|
-
this.viewport = viewport;
|
|
5085
|
-
this.onDataLengthChanged();
|
|
5086
|
-
}
|
|
5093
|
+
$headerHeightChange = linkedSignal({
|
|
5094
|
+
source: () => this.$headerHeight(),
|
|
5095
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
|
|
5096
|
+
});
|
|
5087
5097
|
contentScrolled$ = new Subject();
|
|
5088
|
-
sub = subscriber(this.contentScrolled$.pipe(
|
|
5098
|
+
sub = subscriber(this.contentScrolled$.pipe(debounceTime(20), distinctUntilChanged()), offset => {
|
|
5089
5099
|
this.updateContent('scroll');
|
|
5090
5100
|
});
|
|
5091
5101
|
onContentScrolled() {
|
|
5092
|
-
this.contentScrolled$.next();
|
|
5093
|
-
}
|
|
5094
|
-
onDataLengthChanged() {
|
|
5095
|
-
}
|
|
5096
|
-
setDataLength(length) {
|
|
5097
|
-
this.dataLength = length;
|
|
5098
|
-
if (this.viewport && this.$rowHeight) {
|
|
5099
|
-
this.viewport.setTotalContentSize(this.dataLength * this.$rowHeight());
|
|
5100
|
-
// this.updateContent('data ' + dataTrigger);
|
|
5101
|
-
}
|
|
5102
|
-
this.updateContent('data ');
|
|
5103
|
-
}
|
|
5104
|
-
detach() { }
|
|
5105
|
-
onContentRendered() { }
|
|
5106
|
-
onRenderedOffsetChanged() {
|
|
5107
|
-
}
|
|
5108
|
-
scrollToIndex(index, behavior) {
|
|
5102
|
+
this.contentScrolled$.next(this.viewport().measureScrollOffset());
|
|
5109
5103
|
}
|
|
5104
|
+
#onDataLengthChange = effect(() => {
|
|
5105
|
+
const dataLengthChange = this.$dataLengthChange();
|
|
5106
|
+
untracked(() => {
|
|
5107
|
+
console.log('data', dataLengthChange);
|
|
5108
|
+
if (dataLengthChange.curr === dataLengthChange.previous)
|
|
5109
|
+
return;
|
|
5110
|
+
this.updateContent('data length');
|
|
5111
|
+
});
|
|
5112
|
+
});
|
|
5110
5113
|
#onHeaderChange = effect(() => {
|
|
5111
|
-
|
|
5112
|
-
|
|
5114
|
+
const headerHeightChange = this.$headerHeightChange();
|
|
5115
|
+
untracked(() => {
|
|
5116
|
+
if (headerHeightChange.curr === headerHeightChange.previous)
|
|
5117
|
+
return;
|
|
5118
|
+
this.updateContent('header height');
|
|
5119
|
+
});
|
|
5113
5120
|
});
|
|
5114
5121
|
#onRowChange = effect(() => {
|
|
5115
|
-
|
|
5116
|
-
|
|
5122
|
+
const rowHeightChange = this.$rowHeightChange();
|
|
5123
|
+
untracked(() => {
|
|
5124
|
+
if (rowHeightChange.curr === rowHeightChange.previous)
|
|
5125
|
+
return;
|
|
5126
|
+
this.updateContent('row height');
|
|
5127
|
+
});
|
|
5117
5128
|
});
|
|
5129
|
+
$currentRange = signal({ start: 0, end: 0 });
|
|
5118
5130
|
updateContent(trigger) {
|
|
5119
|
-
|
|
5131
|
+
console.log('scroll - ', trigger);
|
|
5132
|
+
const viewport = this.viewport && this.viewport();
|
|
5133
|
+
if (!viewport || !this.$rowHeight) {
|
|
5120
5134
|
return;
|
|
5121
5135
|
}
|
|
5122
|
-
const currentContentHeight = +
|
|
5123
|
-
const newContentHeight = this
|
|
5136
|
+
const currentContentHeight = +viewport._totalContentHeight.replace('px', '');
|
|
5137
|
+
const newContentHeight = this.$dataLength() * this.$rowHeight();
|
|
5124
5138
|
if (currentContentHeight !== newContentHeight) {
|
|
5125
|
-
|
|
5126
|
-
|
|
5127
|
-
this.update(trigger);
|
|
5128
|
-
}, 0);
|
|
5139
|
+
viewport.setTotalContentSize(newContentHeight);
|
|
5140
|
+
this.update(trigger, viewport, true);
|
|
5129
5141
|
return;
|
|
5130
5142
|
}
|
|
5131
|
-
this.update(trigger);
|
|
5143
|
+
this.update(trigger, viewport);
|
|
5132
5144
|
}
|
|
5133
|
-
update(trigger) {
|
|
5134
|
-
if (!
|
|
5145
|
+
update(trigger, viewport, needsScroll = false) {
|
|
5146
|
+
if (!viewport.getViewportSize())
|
|
5135
5147
|
return;
|
|
5136
|
-
|
|
5148
|
+
// console.log(trigger, {
|
|
5149
|
+
// rowHeight: this.$rowHeight(),
|
|
5150
|
+
// rowHeightChange: this.$rowHeightChange().curr !== this.$rowHeightChange().previous,
|
|
5151
|
+
// headerHeight: this.$headerHeight(),
|
|
5152
|
+
// dataLength: this.$dataLength(),
|
|
5153
|
+
// viewportSize: viewport.getViewportSize(),
|
|
5154
|
+
// scrollOffset: viewport.measureScrollOffset(),
|
|
5155
|
+
// renderedRange: viewport.getRenderedRange(),
|
|
5156
|
+
// totalContentSize: viewport._totalContentHeight
|
|
5157
|
+
// });
|
|
5137
5158
|
const rowHeightChangeEvent = this.$rowHeightChange();
|
|
5138
5159
|
const rowHeight = rowHeightChangeEvent.curr;
|
|
5139
5160
|
const rowHeightAdjustment = trigger === 'row height' ? rowHeightChangeEvent.curr / rowHeightChangeEvent.previous : 1;
|
|
5140
|
-
const amountOfRows = Math.ceil((
|
|
5141
|
-
const f =
|
|
5142
|
-
const offset =
|
|
5143
|
-
|
|
5144
|
-
|
|
5145
|
-
}
|
|
5146
|
-
const buffer = 35;
|
|
5161
|
+
const amountOfRows = Math.ceil((viewport.getViewportSize() - this.$headerHeight()) / rowHeight);
|
|
5162
|
+
const f = viewport.measureScrollOffset();
|
|
5163
|
+
const offset = viewport.measureScrollOffset() * rowHeightAdjustment;
|
|
5164
|
+
const buffer = 35 + Math.round((40 - rowHeight) / 10);
|
|
5165
|
+
console.log({ buffer });
|
|
5147
5166
|
const skip = Math.round(offset / rowHeight);
|
|
5148
5167
|
const index = skip % 2 === 0 ? skip : skip - 1;
|
|
5149
5168
|
const start = Math.max(0, index - buffer);
|
|
5150
|
-
const end = Math.min(this
|
|
5151
|
-
|
|
5152
|
-
|
|
5169
|
+
const end = Math.min(this.$dataLength(), index + amountOfRows + buffer);
|
|
5170
|
+
// console.log({
|
|
5171
|
+
// start,
|
|
5172
|
+
// end,
|
|
5173
|
+
// index,
|
|
5174
|
+
// skip,
|
|
5175
|
+
// amountOfRows,
|
|
5176
|
+
// offset: rowHeight * start
|
|
5177
|
+
// });
|
|
5178
|
+
if (start > this.$dataLength()) {
|
|
5179
|
+
this.viewport().scrollToOffset(0);
|
|
5180
|
+
}
|
|
5181
|
+
else if (f !== offset) {
|
|
5182
|
+
console.log('adjust scroll');
|
|
5183
|
+
if (offset < f)
|
|
5184
|
+
viewport.scrollToOffset(offset);
|
|
5185
|
+
else
|
|
5186
|
+
setTimeout(() => {
|
|
5187
|
+
viewport.scrollToOffset(offset);
|
|
5188
|
+
}, 0);
|
|
5189
|
+
}
|
|
5190
|
+
if (this.$currentRange().start === start && this.$currentRange().end === end) {
|
|
5191
|
+
return;
|
|
5192
|
+
}
|
|
5193
|
+
this.$currentRange.set({ start, end });
|
|
5194
|
+
console.log('setting range');
|
|
5195
|
+
console.log({ offset, contentOffset: rowHeight * start });
|
|
5196
|
+
viewport.setRenderedContentOffset(rowHeight * start);
|
|
5197
|
+
this.dataStore.patchState({ virtualScrollOffset: offset });
|
|
5198
|
+
viewport.setRenderedRange({ start, end });
|
|
5153
5199
|
this.indexChange.next(index);
|
|
5154
5200
|
}
|
|
5201
|
+
attach(viewport) { }
|
|
5202
|
+
onDataLengthChanged() { }
|
|
5203
|
+
detach() { }
|
|
5204
|
+
onContentRendered() { }
|
|
5205
|
+
onRenderedOffsetChanged() { }
|
|
5206
|
+
scrollToIndex(index, behavior) { }
|
|
5155
5207
|
}
|
|
5156
5208
|
|
|
5157
5209
|
class VirtualScrollContainer {
|
|
@@ -5169,7 +5221,13 @@ class VirtualScrollContainer {
|
|
|
5169
5221
|
viewPort$ = toObservable(this.viewport).pipe(notNull());
|
|
5170
5222
|
$scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.scrolledIndexChange)));
|
|
5171
5223
|
$renderedRange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.renderedRangeStream)));
|
|
5172
|
-
$virtualScrollOptions = computed(() =>
|
|
5224
|
+
$virtualScrollOptions = computed(() => {
|
|
5225
|
+
if (this.state.$initializationState() >= InitializationState.Ready)
|
|
5226
|
+
return this.state.$tableSettings().virtualSettings;
|
|
5227
|
+
else
|
|
5228
|
+
return undefined;
|
|
5229
|
+
});
|
|
5230
|
+
$optionsSet = computed(() => !!this.$virtualScrollOptions());
|
|
5173
5231
|
$dataLength = computed(() => {
|
|
5174
5232
|
const paginated = this.$usePaginator() && !this.$showAll();
|
|
5175
5233
|
const pageSize = this.$pageSize();
|
|
@@ -5182,58 +5240,41 @@ class VirtualScrollContainer {
|
|
|
5182
5240
|
constructor() {
|
|
5183
5241
|
addEventListener('resize', this.resizeHandler);
|
|
5184
5242
|
}
|
|
5185
|
-
setViewportEffect = effect(() => {
|
|
5243
|
+
#setViewportEffect = effect(() => {
|
|
5186
5244
|
const viewport = this.viewport();
|
|
5245
|
+
const options = this.$optionsSet();
|
|
5187
5246
|
untracked(() => {
|
|
5188
|
-
if (!!viewport) {
|
|
5189
|
-
this.setSize(this.viewport().elementRef);
|
|
5247
|
+
if (!!viewport && !!options) {
|
|
5248
|
+
this.setSize(this.viewport().elementRef, 'initial');
|
|
5190
5249
|
}
|
|
5191
5250
|
;
|
|
5192
5251
|
});
|
|
5193
5252
|
});
|
|
5194
|
-
subscriber = subscriber();
|
|
5195
5253
|
#onRenderedRangeEffect = effect(() => {
|
|
5196
5254
|
const renderedRange = this.$renderedRange();
|
|
5255
|
+
const viewport = this.viewport();
|
|
5197
5256
|
if (!renderedRange)
|
|
5198
5257
|
return;
|
|
5199
5258
|
untracked(() => {
|
|
5200
5259
|
this.dataStore.patchState({
|
|
5201
5260
|
virtualEnds: {
|
|
5202
5261
|
start: renderedRange.start,
|
|
5203
|
-
end: renderedRange.end
|
|
5262
|
+
end: renderedRange.end,
|
|
5204
5263
|
}
|
|
5205
5264
|
});
|
|
5206
|
-
|
|
5207
|
-
|
|
5208
|
-
|
|
5209
|
-
#onDataLengthEffect = effect(() => {
|
|
5210
|
-
const dataLength = this.$dataLength();
|
|
5211
|
-
untracked(() => {
|
|
5212
|
-
const renderedRange = this.$renderedRange();
|
|
5213
|
-
this.scrollStrategy.setDataLength(dataLength);
|
|
5214
|
-
if ((renderedRange?.start || 0) > dataLength) {
|
|
5215
|
-
this.viewport().scrollToOffset(0);
|
|
5216
|
-
}
|
|
5217
|
-
});
|
|
5218
|
-
});
|
|
5219
|
-
#onOffsetEffect = effect(() => {
|
|
5220
|
-
const offset = this.$offset();
|
|
5221
|
-
untracked(() => {
|
|
5222
|
-
this.dataStore.patchState({ virtualScrollOffset: offset });
|
|
5265
|
+
if (!viewport)
|
|
5266
|
+
return;
|
|
5267
|
+
this.setSize(viewport.elementRef, 'rendered range');
|
|
5223
5268
|
});
|
|
5224
5269
|
});
|
|
5225
|
-
$offset = computed(() => {
|
|
5226
|
-
const viewport = this.viewport();
|
|
5227
|
-
const scrolledIndexChange = this.$scrolledIndexChange();
|
|
5228
|
-
if (!scrolledIndexChange || !viewport)
|
|
5229
|
-
return 0;
|
|
5230
|
-
return viewport.getOffsetToRenderedContentStart() ?? 0;
|
|
5231
|
-
});
|
|
5232
5270
|
ngOnDestroy() {
|
|
5233
5271
|
removeEventListener('resize', this.resizeHandler);
|
|
5234
5272
|
}
|
|
5235
|
-
setSize(el) {
|
|
5273
|
+
setSize(el, trigger) {
|
|
5274
|
+
console.log('size - ', trigger);
|
|
5236
5275
|
const virtualScrollOptions = this.$virtualScrollOptions();
|
|
5276
|
+
if (!virtualScrollOptions)
|
|
5277
|
+
return;
|
|
5237
5278
|
if (virtualScrollOptions.dynamicHeight) {
|
|
5238
5279
|
this.calcDynamic(el);
|
|
5239
5280
|
return;
|
|
@@ -5250,18 +5291,10 @@ class VirtualScrollContainer {
|
|
|
5250
5291
|
height = maxViewPortHeightPx;
|
|
5251
5292
|
this.setHeight(height, el);
|
|
5252
5293
|
}
|
|
5253
|
-
calcDynamic$ = new Subject();
|
|
5254
|
-
$calcDynamic = toSignal(this.calcDynamic$.pipe(debounceTime$1(300)));
|
|
5255
|
-
#onCalcDynamicEffect = effect(() => {
|
|
5256
|
-
const el = this.$calcDynamic();
|
|
5257
|
-
if (!el)
|
|
5258
|
-
return;
|
|
5259
|
-
untracked(() => {
|
|
5260
|
-
this.calcDynamic(el);
|
|
5261
|
-
});
|
|
5262
|
-
});
|
|
5263
5294
|
calcDynamic(el) {
|
|
5264
5295
|
const virtualScrollOptions = this.$virtualScrollOptions();
|
|
5296
|
+
if (!virtualScrollOptions)
|
|
5297
|
+
return;
|
|
5265
5298
|
const t = this.tableContainer.elementRef.nativeElement.querySelector(`#${TableContainerComponent.headerId}`);
|
|
5266
5299
|
const rect = t?.getBoundingClientRect();
|
|
5267
5300
|
const viewportHeight = window.innerHeight;
|
|
@@ -5278,11 +5311,13 @@ class VirtualScrollContainer {
|
|
|
5278
5311
|
const amountOfRowsThatWillFit = Math.floor(available / rowHeight);
|
|
5279
5312
|
const minAmountOfRows = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
|
|
5280
5313
|
const amountOfVisibleItems = Math.min(Math.max(amountOfRowsThatWillFit, minAmountOfRows), this.$dataLength());
|
|
5314
|
+
console.log(amountOfRowsThatWillFit, amountOfVisibleItems);
|
|
5281
5315
|
let height = (rowHeight * amountOfVisibleItems);
|
|
5282
|
-
height += (footerHeight + headerHeight)
|
|
5316
|
+
height += (footerHeight + headerHeight);
|
|
5283
5317
|
this.setHeight(height, el);
|
|
5284
5318
|
}
|
|
5285
5319
|
setHeight(height, el) {
|
|
5320
|
+
console.log('height - ', height);
|
|
5286
5321
|
const vsViewport = el.nativeElement;
|
|
5287
5322
|
vsViewport.setAttribute('style', `height: ${height}px !important;`);
|
|
5288
5323
|
this.viewport()?.checkViewportSize();
|
|
@@ -5290,8 +5325,8 @@ class VirtualScrollContainer {
|
|
|
5290
5325
|
this.dataStore.patchState({ virtualScrollOffset });
|
|
5291
5326
|
}
|
|
5292
5327
|
resizeHandler = () => {
|
|
5293
|
-
if (this.viewport() && this.$virtualScrollOptions()
|
|
5294
|
-
this.setSize(this.viewport().elementRef);
|
|
5328
|
+
if (this.viewport() && this.$virtualScrollOptions()?.dynamicHeight) {
|
|
5329
|
+
this.setSize(this.viewport().elementRef, 'resize');
|
|
5295
5330
|
}
|
|
5296
5331
|
};
|
|
5297
5332
|
computedRowHeight = computed(() => {
|
|
@@ -5309,7 +5344,7 @@ class VirtualScrollContainer {
|
|
|
5309
5344
|
computedFooterHeight = computed(() => {
|
|
5310
5345
|
return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
|
|
5311
5346
|
});
|
|
5312
|
-
scrollStrategy = new TableVirtualScrollStrategy(this);
|
|
5347
|
+
scrollStrategy = new TableVirtualScrollStrategy(this, this.dataStore);
|
|
5313
5348
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5314
5349
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.0", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", queries: [{ propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
5315
5350
|
<cdk-virtual-scroll-viewport>
|