@one-paragon/angular-utilities 2.0.4-beta.1 → 2.0.4
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 +106 -141
- 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 +0 -1
- package/table-builder/components/scroll-strategy.d.ts +10 -25
- package/table-builder/components/table-container/virtual-scroll-container.d.ts +8 -5
|
@@ -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, debounceTime, scan as scan$1, timestamp as timestamp$1, first as first$1 } from 'rxjs/operators';
|
|
3
|
+
import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, observeOn, 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, BehaviorSubject } 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, animationFrameScheduler, debounceTime as debounceTime$1, 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,10 +3857,8 @@ 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);
|
|
3861
3860
|
$offsetIndex = computed(() => {
|
|
3862
|
-
const virtualStart = this
|
|
3863
|
-
console.log({ virtualStart });
|
|
3861
|
+
const virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start)();
|
|
3864
3862
|
const pageSize = this.state.$pageSize();
|
|
3865
3863
|
const currentPage = this.state.$currentPage();
|
|
3866
3864
|
if (this.$useVirtualScroll()) {
|
|
@@ -4030,14 +4028,14 @@ class GenericTableComponent {
|
|
|
4030
4028
|
});
|
|
4031
4029
|
$stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual());
|
|
4032
4030
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
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;\" class=\"index-column\">\r\n {{ 1 + 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 });
|
|
4034
4032
|
}
|
|
4035
4033
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
4036
4034
|
type: Component,
|
|
4037
4035
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4038
4036
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
4039
4037
|
MatTooltipModule, FunctionPipe,
|
|
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
|
|
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;\" class=\"index-column\">\r\n {{ 1 + 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"] }]
|
|
4041
4039
|
}] });
|
|
4042
4040
|
|
|
4043
4041
|
function downloadData(data, filename, mimeType) {
|
|
@@ -4746,7 +4744,7 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
4746
4744
|
const $pageSize = state.$pageSize;
|
|
4747
4745
|
const $virtualEnds = data.selectSignal(d => d.virtualEnds);
|
|
4748
4746
|
const $dataLength = computed(() => this.#$dataSrc().length);
|
|
4749
|
-
|
|
4747
|
+
const $dataSize = computed(() => {
|
|
4750
4748
|
const viewType = state.$viewType();
|
|
4751
4749
|
const dataLength = $dataLength();
|
|
4752
4750
|
const currentPage = $currentPage();
|
|
@@ -4764,6 +4762,7 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
4764
4762
|
}
|
|
4765
4763
|
return ({ start: virtualEnds.start, end: virtualEnds.end });
|
|
4766
4764
|
});
|
|
4765
|
+
this.$dataSize = $dataSize;
|
|
4767
4766
|
}
|
|
4768
4767
|
connect() {
|
|
4769
4768
|
return super.connect();
|
|
@@ -5066,144 +5065,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
5066
5065
|
}] });
|
|
5067
5066
|
|
|
5068
5067
|
class TableVirtualScrollStrategy {
|
|
5069
|
-
|
|
5070
|
-
|
|
5071
|
-
this.$headerHeight = scrollContainer.computedHeaderHeight;
|
|
5072
|
-
this.viewport = scrollContainer.viewport;
|
|
5073
|
-
this.dataStore = dataStore;
|
|
5074
|
-
this.$dataLength = scrollContainer.$dataLength;
|
|
5075
|
-
}
|
|
5076
|
-
dataStore;
|
|
5068
|
+
scrolledIndexChange;
|
|
5069
|
+
dataLength = 0;
|
|
5077
5070
|
indexChange = new Subject();
|
|
5078
|
-
scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
|
|
5079
5071
|
viewport;
|
|
5080
|
-
$dataLength;
|
|
5081
|
-
$dataLengthChange = linkedSignal({
|
|
5082
|
-
source: () => this.$dataLength(),
|
|
5083
|
-
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
|
|
5084
|
-
});
|
|
5085
5072
|
$rowHeight;
|
|
5086
5073
|
$rowHeightChange = linkedSignal({
|
|
5087
5074
|
source: () => this.$rowHeight(),
|
|
5088
|
-
computation: (curr, previous) => {
|
|
5089
|
-
return ({ curr, previous: previous == undefined ? curr : previous.source });
|
|
5090
|
-
}
|
|
5075
|
+
computation: (curr, previous) => ({ curr, previous: previous?.source || curr })
|
|
5091
5076
|
});
|
|
5092
5077
|
$headerHeight;
|
|
5093
|
-
|
|
5094
|
-
|
|
5095
|
-
|
|
5096
|
-
|
|
5078
|
+
constructor(scrollContainer) {
|
|
5079
|
+
this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
|
|
5080
|
+
this.$rowHeight = scrollContainer.computedRowHeight;
|
|
5081
|
+
this.$headerHeight = scrollContainer.computedHeaderHeight;
|
|
5082
|
+
}
|
|
5083
|
+
attach(viewport) {
|
|
5084
|
+
this.viewport = viewport;
|
|
5085
|
+
this.onDataLengthChanged();
|
|
5086
|
+
}
|
|
5097
5087
|
contentScrolled$ = new Subject();
|
|
5098
|
-
sub = subscriber(this.contentScrolled$.pipe(
|
|
5088
|
+
sub = subscriber(this.contentScrolled$.pipe(observeOn(animationFrameScheduler), debounceTime(20)), () => {
|
|
5099
5089
|
this.updateContent('scroll');
|
|
5100
5090
|
});
|
|
5101
5091
|
onContentScrolled() {
|
|
5102
|
-
this.contentScrolled$.next(
|
|
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) {
|
|
5103
5109
|
}
|
|
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
|
-
});
|
|
5113
5110
|
#onHeaderChange = effect(() => {
|
|
5114
|
-
|
|
5115
|
-
|
|
5116
|
-
if (headerHeightChange.curr === headerHeightChange.previous)
|
|
5117
|
-
return;
|
|
5118
|
-
this.updateContent('header height');
|
|
5119
|
-
});
|
|
5111
|
+
this.$headerHeight && this.$headerHeight();
|
|
5112
|
+
this.updateContent('header height');
|
|
5120
5113
|
});
|
|
5121
5114
|
#onRowChange = effect(() => {
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
if (rowHeightChange.curr === rowHeightChange.previous)
|
|
5125
|
-
return;
|
|
5126
|
-
this.updateContent('row height');
|
|
5127
|
-
});
|
|
5115
|
+
this.$rowHeight && this.$rowHeight();
|
|
5116
|
+
this.updateContent('row height');
|
|
5128
5117
|
});
|
|
5129
|
-
$currentRange = signal({ start: 0, end: 0 });
|
|
5130
5118
|
updateContent(trigger) {
|
|
5131
|
-
|
|
5132
|
-
const viewport = this.viewport && this.viewport();
|
|
5133
|
-
if (!viewport || !this.$rowHeight) {
|
|
5119
|
+
if (!this.viewport || !this.$rowHeight) {
|
|
5134
5120
|
return;
|
|
5135
5121
|
}
|
|
5136
|
-
const currentContentHeight = +viewport._totalContentHeight.replace('px', '');
|
|
5137
|
-
const newContentHeight = this
|
|
5122
|
+
const currentContentHeight = +this.viewport._totalContentHeight.replace('px', '');
|
|
5123
|
+
const newContentHeight = this.dataLength * this.$rowHeight();
|
|
5138
5124
|
if (currentContentHeight !== newContentHeight) {
|
|
5139
|
-
viewport.setTotalContentSize(newContentHeight);
|
|
5140
|
-
|
|
5125
|
+
this.viewport.setTotalContentSize(newContentHeight);
|
|
5126
|
+
setTimeout(() => {
|
|
5127
|
+
this.update(trigger);
|
|
5128
|
+
}, 0);
|
|
5141
5129
|
return;
|
|
5142
5130
|
}
|
|
5143
|
-
this.update(trigger
|
|
5131
|
+
this.update(trigger);
|
|
5144
5132
|
}
|
|
5145
|
-
update(trigger
|
|
5146
|
-
if (!viewport
|
|
5133
|
+
update(trigger) {
|
|
5134
|
+
if (!this.viewport || !this.$rowHeight) {
|
|
5147
5135
|
return;
|
|
5148
|
-
|
|
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
|
-
// });
|
|
5136
|
+
}
|
|
5158
5137
|
const rowHeightChangeEvent = this.$rowHeightChange();
|
|
5159
5138
|
const rowHeight = rowHeightChangeEvent.curr;
|
|
5160
5139
|
const rowHeightAdjustment = trigger === 'row height' ? rowHeightChangeEvent.curr / rowHeightChangeEvent.previous : 1;
|
|
5161
|
-
const amountOfRows = Math.ceil((viewport.getViewportSize() - this.$headerHeight()) / rowHeight);
|
|
5162
|
-
const f = viewport.measureScrollOffset();
|
|
5163
|
-
const offset = viewport.measureScrollOffset() * rowHeightAdjustment;
|
|
5164
|
-
|
|
5165
|
-
|
|
5140
|
+
const amountOfRows = Math.ceil((this.viewport.getViewportSize() - this.$headerHeight()) / rowHeight);
|
|
5141
|
+
const f = this.viewport.measureScrollOffset();
|
|
5142
|
+
const offset = this.viewport.measureScrollOffset() * rowHeightAdjustment;
|
|
5143
|
+
if (offset !== f) {
|
|
5144
|
+
this.viewport.scrollToOffset(offset);
|
|
5145
|
+
}
|
|
5146
|
+
const buffer = 35;
|
|
5166
5147
|
const skip = Math.round(offset / rowHeight);
|
|
5167
5148
|
const index = skip % 2 === 0 ? skip : skip - 1;
|
|
5168
5149
|
const start = Math.max(0, index - buffer);
|
|
5169
|
-
const end = Math.min(this
|
|
5170
|
-
|
|
5171
|
-
|
|
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 });
|
|
5150
|
+
const end = Math.min(this.dataLength, index + amountOfRows + buffer);
|
|
5151
|
+
this.viewport.setRenderedContentOffset(rowHeight * start);
|
|
5152
|
+
this.viewport.setRenderedRange({ start, end });
|
|
5199
5153
|
this.indexChange.next(index);
|
|
5200
5154
|
}
|
|
5201
|
-
attach(viewport) { }
|
|
5202
|
-
onDataLengthChanged() { }
|
|
5203
|
-
detach() { }
|
|
5204
|
-
onContentRendered() { }
|
|
5205
|
-
onRenderedOffsetChanged() { }
|
|
5206
|
-
scrollToIndex(index, behavior) { }
|
|
5207
5155
|
}
|
|
5208
5156
|
|
|
5209
5157
|
class VirtualScrollContainer {
|
|
@@ -5221,13 +5169,7 @@ class VirtualScrollContainer {
|
|
|
5221
5169
|
viewPort$ = toObservable(this.viewport).pipe(notNull());
|
|
5222
5170
|
$scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.scrolledIndexChange)));
|
|
5223
5171
|
$renderedRange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.renderedRangeStream)));
|
|
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());
|
|
5172
|
+
$virtualScrollOptions = computed(() => this.state.$tableSettings().virtualSettings);
|
|
5231
5173
|
$dataLength = computed(() => {
|
|
5232
5174
|
const paginated = this.$usePaginator() && !this.$showAll();
|
|
5233
5175
|
const pageSize = this.$pageSize();
|
|
@@ -5240,41 +5182,58 @@ class VirtualScrollContainer {
|
|
|
5240
5182
|
constructor() {
|
|
5241
5183
|
addEventListener('resize', this.resizeHandler);
|
|
5242
5184
|
}
|
|
5243
|
-
|
|
5185
|
+
setViewportEffect = effect(() => {
|
|
5244
5186
|
const viewport = this.viewport();
|
|
5245
|
-
const options = this.$optionsSet();
|
|
5246
5187
|
untracked(() => {
|
|
5247
|
-
if (!!viewport
|
|
5248
|
-
this.setSize(this.viewport().elementRef
|
|
5188
|
+
if (!!viewport) {
|
|
5189
|
+
this.setSize(this.viewport().elementRef);
|
|
5249
5190
|
}
|
|
5250
5191
|
;
|
|
5251
5192
|
});
|
|
5252
5193
|
});
|
|
5194
|
+
subscriber = subscriber();
|
|
5253
5195
|
#onRenderedRangeEffect = effect(() => {
|
|
5254
5196
|
const renderedRange = this.$renderedRange();
|
|
5255
|
-
const viewport = this.viewport();
|
|
5256
5197
|
if (!renderedRange)
|
|
5257
5198
|
return;
|
|
5258
5199
|
untracked(() => {
|
|
5259
5200
|
this.dataStore.patchState({
|
|
5260
5201
|
virtualEnds: {
|
|
5261
5202
|
start: renderedRange.start,
|
|
5262
|
-
end: renderedRange.end,
|
|
5203
|
+
end: renderedRange.end + 25,
|
|
5263
5204
|
}
|
|
5264
5205
|
});
|
|
5265
|
-
|
|
5266
|
-
return;
|
|
5267
|
-
this.setSize(viewport.elementRef, 'rendered range');
|
|
5206
|
+
this.setSize(this.viewport().elementRef);
|
|
5268
5207
|
});
|
|
5269
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 });
|
|
5223
|
+
});
|
|
5224
|
+
});
|
|
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
|
+
});
|
|
5270
5232
|
ngOnDestroy() {
|
|
5271
5233
|
removeEventListener('resize', this.resizeHandler);
|
|
5272
5234
|
}
|
|
5273
|
-
setSize(el
|
|
5274
|
-
console.log('size - ', trigger);
|
|
5235
|
+
setSize(el) {
|
|
5275
5236
|
const virtualScrollOptions = this.$virtualScrollOptions();
|
|
5276
|
-
if (!virtualScrollOptions)
|
|
5277
|
-
return;
|
|
5278
5237
|
if (virtualScrollOptions.dynamicHeight) {
|
|
5279
5238
|
this.calcDynamic(el);
|
|
5280
5239
|
return;
|
|
@@ -5291,10 +5250,18 @@ class VirtualScrollContainer {
|
|
|
5291
5250
|
height = maxViewPortHeightPx;
|
|
5292
5251
|
this.setHeight(height, el);
|
|
5293
5252
|
}
|
|
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
|
+
});
|
|
5294
5263
|
calcDynamic(el) {
|
|
5295
5264
|
const virtualScrollOptions = this.$virtualScrollOptions();
|
|
5296
|
-
if (!virtualScrollOptions)
|
|
5297
|
-
return;
|
|
5298
5265
|
const t = this.tableContainer.elementRef.nativeElement.querySelector(`#${TableContainerComponent.headerId}`);
|
|
5299
5266
|
const rect = t?.getBoundingClientRect();
|
|
5300
5267
|
const viewportHeight = window.innerHeight;
|
|
@@ -5311,13 +5278,11 @@ class VirtualScrollContainer {
|
|
|
5311
5278
|
const amountOfRowsThatWillFit = Math.floor(available / rowHeight);
|
|
5312
5279
|
const minAmountOfRows = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
|
|
5313
5280
|
const amountOfVisibleItems = Math.min(Math.max(amountOfRowsThatWillFit, minAmountOfRows), this.$dataLength());
|
|
5314
|
-
console.log(amountOfRowsThatWillFit, amountOfVisibleItems);
|
|
5315
5281
|
let height = (rowHeight * amountOfVisibleItems);
|
|
5316
5282
|
height += (footerHeight + headerHeight);
|
|
5317
5283
|
this.setHeight(height, el);
|
|
5318
5284
|
}
|
|
5319
5285
|
setHeight(height, el) {
|
|
5320
|
-
console.log('height - ', height);
|
|
5321
5286
|
const vsViewport = el.nativeElement;
|
|
5322
5287
|
vsViewport.setAttribute('style', `height: ${height}px !important;`);
|
|
5323
5288
|
this.viewport()?.checkViewportSize();
|
|
@@ -5325,8 +5290,8 @@ class VirtualScrollContainer {
|
|
|
5325
5290
|
this.dataStore.patchState({ virtualScrollOffset });
|
|
5326
5291
|
}
|
|
5327
5292
|
resizeHandler = () => {
|
|
5328
|
-
if (this.viewport() && this.$virtualScrollOptions()
|
|
5329
|
-
this.setSize(this.viewport().elementRef
|
|
5293
|
+
if (this.viewport() && this.$virtualScrollOptions().dynamicHeight) {
|
|
5294
|
+
this.setSize(this.viewport().elementRef);
|
|
5330
5295
|
}
|
|
5331
5296
|
};
|
|
5332
5297
|
computedRowHeight = computed(() => {
|
|
@@ -5344,7 +5309,7 @@ class VirtualScrollContainer {
|
|
|
5344
5309
|
computedFooterHeight = computed(() => {
|
|
5345
5310
|
return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
|
|
5346
5311
|
});
|
|
5347
|
-
scrollStrategy = new TableVirtualScrollStrategy(this
|
|
5312
|
+
scrollStrategy = new TableVirtualScrollStrategy(this);
|
|
5348
5313
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5349
5314
|
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: `
|
|
5350
5315
|
<cdk-virtual-scroll-viewport>
|