@coolon/angular-ui-powerups 16.1.0-aplpha.81 → 16.1.0-aplpha.83
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/assets/table.scss +0 -8
- package/esm2022/lib/components/tables/renderer/table-body/table-body.component.mjs +52 -136
- package/esm2022/lib/components/tables/table/table.component.mjs +9 -3
- package/fesm2022/coolon-angular-ui-powerups.mjs +56 -136
- package/fesm2022/coolon-angular-ui-powerups.mjs.map +1 -1
- package/lib/components/tables/renderer/table-body/table-body.component.d.ts +11 -2
- package/lib/components/tables/table/table.component.d.ts +1 -0
- package/package.json +3 -3
|
@@ -17,7 +17,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
|
17
17
|
import * as i3$2 from '@angular/cdk/portal';
|
|
18
18
|
import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
|
19
19
|
import * as i1$2 from '@angular/cdk/scrolling';
|
|
20
|
-
import { CdkScrollableModule, ScrollingModule } from '@angular/cdk/scrolling';
|
|
20
|
+
import { CdkVirtualScrollViewport, CdkScrollableModule, ScrollingModule } from '@angular/cdk/scrolling';
|
|
21
21
|
import * as i7 from '@angular/material/autocomplete';
|
|
22
22
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
23
23
|
import * as i2 from '@angular/material/button';
|
|
@@ -41,7 +41,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
|
|
|
41
41
|
import * as i4$5 from 'ng-table-virtual-scroll';
|
|
42
42
|
import { TableVirtualScrollDataSource, TableVirtualScrollModule } from 'ng-table-virtual-scroll';
|
|
43
43
|
import * as i1$3 from '@coolon/pectin';
|
|
44
|
-
import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, proxify, ValueModel, Proxify, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, DelegateToValueModel, FocusManager, EventListenerList, Guard, DelegatingFormListModel, Binding, DebugContext, DelegateToListModel, DelegatingFormValueModel, ListModel, Functions, PageController, SelectionModel, CanProxy, MultipleSelectionModel, WatchList, DirtyTrackingForm, ProxyRegistry,
|
|
44
|
+
import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, proxify, ValueModel, Proxify, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, DelegateToValueModel, FocusManager, EventListenerList, Guard, DelegatingFormListModel, Binding, DebugContext, DelegateToListModel, DelegatingFormValueModel, ListModel, Functions, PageController, SelectionModel, CanProxy, MultipleSelectionModel, WatchList, DirtyTrackingForm, ProxyRegistry, DelegatingCommand, ComputedListModel, Deferred, ReducingValueModel, AndValueModel } from '@coolon/pectin';
|
|
45
45
|
import { __decorate, __param, __metadata } from 'tslib';
|
|
46
46
|
import * as i1 from '@angular/platform-browser';
|
|
47
47
|
import escapeStringRegexp from 'escape-string-regexp';
|
|
@@ -4475,117 +4475,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
4475
4475
|
args: ['class']
|
|
4476
4476
|
}] } });
|
|
4477
4477
|
|
|
4478
|
-
// /**
|
|
4479
|
-
// * Virtual Scroll Strategy
|
|
4480
|
-
// */
|
|
4481
|
-
// export class CustomVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy {
|
|
4482
|
-
// protected readonly garbage = new GarbageCollector();
|
|
4483
|
-
//
|
|
4484
|
-
// constructor(rowHeight$: ValueModel<number>, minBufferPx: number, maxBufferPx: number) {
|
|
4485
|
-
// super(rowHeight$.value, minBufferPx, maxBufferPx);
|
|
4486
|
-
// const {chain, when} = Dsl.disposeWith(this.garbage);
|
|
4487
|
-
// when(rowHeight$).changes(h => {
|
|
4488
|
-
// this.updateItemAndBufferSize(h, minBufferPx, maxBufferPx);
|
|
4489
|
-
// }, {initialValue: "triggerChangeUnlessNil"})
|
|
4490
|
-
// }
|
|
4491
|
-
// }
|
|
4492
|
-
// export class VirtualScrollDataSource<Row> extends DataSource<Row> implements Disposable, Disposable.Collector {
|
|
4493
|
-
//
|
|
4494
|
-
// private garbage = new GarbageCollector();
|
|
4495
|
-
//
|
|
4496
|
-
// readonly virtualScrollRowRange$: ValueModelChain<{ start: number; end: number }>;
|
|
4497
|
-
// readonly virtualScrollSpacerSize$: ValueModelChain<number>;
|
|
4498
|
-
// readonly totalContentSize$: ValueModelChain<number>;
|
|
4499
|
-
// readonly showVirtualScrollOffset: (index: number, rowData: any) => boolean;
|
|
4500
|
-
//
|
|
4501
|
-
// protected readonly virtualRowsObservable$ = new BehaviorSubject<readonly Row[]>([]);
|
|
4502
|
-
// private readonly virtualScrollPixelOffset$ = new MutableValueModel<number>(0);
|
|
4503
|
-
//
|
|
4504
|
-
//
|
|
4505
|
-
// constructor(readonly viewport: CdkVirtualScrollViewport, data$:ListModel<Row>, readonly rowHeight$:ValueModel<number>, pageSize$: ValueModel<number>) {
|
|
4506
|
-
// super();
|
|
4507
|
-
// const {chain, when, observe} = Dsl.disposeWith(this);
|
|
4508
|
-
//
|
|
4509
|
-
// observe.valuesFrom(viewport.elementScrolled()).subscribe((ev: Event) => {
|
|
4510
|
-
// this.virtualScrollPixelOffset$.value = (ev.currentTarget as any).scrollTop;
|
|
4511
|
-
// });
|
|
4512
|
-
//
|
|
4513
|
-
// this.virtualScrollRowRange$ = chain(this.virtualScrollPixelOffset$).map(rawPixelOffset => {
|
|
4514
|
-
// const startIndex = Math.floor(rawPixelOffset / this.rowHeight$.value);
|
|
4515
|
-
// console.log(rawPixelOffset, startIndex)
|
|
4516
|
-
// // const prevExtraData = startIndex > 5 ? 5 : 0;
|
|
4517
|
-
// const prevExtraData = 0;
|
|
4518
|
-
// // return rows.slice(startIndex - prevExtraData, startIndex + (pageSize$.value - prevExtraData));
|
|
4519
|
-
// return {
|
|
4520
|
-
// start: startIndex - prevExtraData,
|
|
4521
|
-
// end: startIndex + (pageSize$.value - prevExtraData)
|
|
4522
|
-
// }
|
|
4523
|
-
// }, {
|
|
4524
|
-
// dependsOn: [this.rowHeight$, pageSize$],
|
|
4525
|
-
// postponeWhile: chain.numericValue(pageSize$).isLessThan(1),
|
|
4526
|
-
// changed: (is, was) => {
|
|
4527
|
-
// return was?.start !== is?.start || was?.end !== is?.end
|
|
4528
|
-
// }
|
|
4529
|
-
// })
|
|
4530
|
-
//
|
|
4531
|
-
// this.virtualScrollSpacerSize$ = chain(this.virtualScrollRowRange$).map(range => {
|
|
4532
|
-
// const pixelOffset = this.rowHeight$.value * range.start;
|
|
4533
|
-
// return pixelOffset;
|
|
4534
|
-
// }, { dependsOn: this.rowHeight$})
|
|
4535
|
-
//
|
|
4536
|
-
// this.totalContentSize$ = chain(data$).count().map(rowCount => {
|
|
4537
|
-
// return this.rowHeight$.value * rowCount
|
|
4538
|
-
// }, {dependsOn: rowHeight$})
|
|
4539
|
-
//
|
|
4540
|
-
// chain(this.virtualScrollRowRange$).mapToList(range => {
|
|
4541
|
-
// return data$.value.slice(range.start, range.end);
|
|
4542
|
-
// }, {
|
|
4543
|
-
// dependsOn: data$
|
|
4544
|
-
// }).subscribe(visibleRows => {
|
|
4545
|
-
// console.log(visibleRows)
|
|
4546
|
-
// this.virtualRowsObservable$.next(visibleRows)
|
|
4547
|
-
// });
|
|
4548
|
-
//
|
|
4549
|
-
// when(this.virtualScrollSpacerSize$).changes(scrollTop => {
|
|
4550
|
-
// viewport.setRenderedContentOffset(scrollTop, "to-start");
|
|
4551
|
-
// }, {initialValue: "triggerChangeUnlessNil"});
|
|
4552
|
-
//
|
|
4553
|
-
// when(this.totalContentSize$).changes(totalSize => {
|
|
4554
|
-
// viewport.setTotalContentSize(totalSize);
|
|
4555
|
-
// }, {initialValue: "triggerChangeUnlessNil"});
|
|
4556
|
-
//
|
|
4557
|
-
//
|
|
4558
|
-
// this.showVirtualScrollOffset = (index: number, rowData: any): boolean => {
|
|
4559
|
-
// const haveScrolled = this.virtualScrollSpacerSize$.value > 0;
|
|
4560
|
-
// const firstRow = index === 0;
|
|
4561
|
-
// return index === 0 && haveScrolled
|
|
4562
|
-
// };
|
|
4563
|
-
//
|
|
4564
|
-
//
|
|
4565
|
-
//
|
|
4566
|
-
// }
|
|
4567
|
-
//
|
|
4568
|
-
//
|
|
4569
|
-
//
|
|
4570
|
-
// dispose(): void {
|
|
4571
|
-
// this.garbage.dispose();
|
|
4572
|
-
// }
|
|
4573
|
-
//
|
|
4574
|
-
// registerDisposable<T extends Disposable>(disposable: T): T {
|
|
4575
|
-
// return this.garbage.registerDisposable(disposable);
|
|
4576
|
-
// }
|
|
4577
|
-
//
|
|
4578
|
-
//
|
|
4579
|
-
// connect(collectionViewer: CollectionViewer): Observable<readonly Row[]> {
|
|
4580
|
-
// return this.virtualRowsObservable$;
|
|
4581
|
-
// }
|
|
4582
|
-
//
|
|
4583
|
-
// disconnect(collectionViewer: CollectionViewer): void {
|
|
4584
|
-
// // noop
|
|
4585
|
-
// }
|
|
4586
|
-
//
|
|
4587
|
-
//
|
|
4588
|
-
// }
|
|
4589
4478
|
const AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER = new InjectionToken("AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER");
|
|
4590
4479
|
class TableRowAttributesDirective {
|
|
4591
4480
|
elementRef;
|
|
@@ -4630,14 +4519,17 @@ class TableBodyComponent extends ResizeAwareComponent {
|
|
|
4630
4519
|
#scrollMode_accessor_storage = "none";
|
|
4631
4520
|
get scrollMode() { return this.#scrollMode_accessor_storage; }
|
|
4632
4521
|
set scrollMode(value) { this.#scrollMode_accessor_storage = value; }
|
|
4522
|
+
scrollViewport;
|
|
4633
4523
|
columns$;
|
|
4634
4524
|
columnIds$;
|
|
4635
4525
|
columnsById$;
|
|
4636
4526
|
// TODO: support user defined header and row heights via css vars.
|
|
4637
|
-
headerHeight$ = new MutableValueModel(
|
|
4638
|
-
rowHeight$ = new MutableValueModel(
|
|
4527
|
+
headerHeight$ = new MutableValueModel(48);
|
|
4528
|
+
rowHeight$ = new MutableValueModel(44);
|
|
4639
4529
|
baseCssClass = "aup-table-component";
|
|
4640
4530
|
virtualScrollDataSource = new TableVirtualScrollDataSource();
|
|
4531
|
+
virtualScrollActive$ = new MutableValueModel(false);
|
|
4532
|
+
scrollTimeout;
|
|
4641
4533
|
constructor(bufferMultiplier = 1) {
|
|
4642
4534
|
super();
|
|
4643
4535
|
this.bufferMultiplier = bufferMultiplier;
|
|
@@ -4645,23 +4537,11 @@ class TableBodyComponent extends ResizeAwareComponent {
|
|
|
4645
4537
|
const actualHeaderHeight$ = chain(this.showHeader$).map(show => {
|
|
4646
4538
|
return show ? this.headerHeight$.value : 0;
|
|
4647
4539
|
}, { dependsOn: this.headerHeight$ });
|
|
4648
|
-
//
|
|
4649
|
-
//
|
|
4650
|
-
|
|
4651
|
-
|
|
4652
|
-
|
|
4653
|
-
// // TODO: this doesn't take into account any css styling adjustments etc. Will investigate if it's an issue.
|
|
4654
|
-
// const rawRowCount = (bounds.height - actualHeaderHeight$.value) / this.rowHeight$.value;
|
|
4655
|
-
// return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
|
|
4656
|
-
// }, {
|
|
4657
|
-
// dependsOn: [actualHeaderHeight$, this.rowHeight$],
|
|
4658
|
-
// postponeWhile: chain(this.bounds$).pluckNumeric("height").isLessThan(1)
|
|
4659
|
-
// });
|
|
4660
|
-
// // const pageSize$ = chain(visibleRowCount$)
|
|
4661
|
-
// // .map(count => 2 * count).otherwise(0)
|
|
4662
|
-
// const pageSize$ = ValueModel.constant(12)
|
|
4663
|
-
when(this.data$).changes(is => {
|
|
4664
|
-
this.virtualScrollDataSource.data = is;
|
|
4540
|
+
// performance is terrible if the data changes while we're scrolling, so we postpone updates until
|
|
4541
|
+
// scrolling stops.
|
|
4542
|
+
const delayedDatea$ = chain(this.data$).postponeWhile(this.virtualScrollActive$);
|
|
4543
|
+
when(delayedDatea$).changes(delatedData => {
|
|
4544
|
+
this.virtualScrollDataSource.data = delatedData;
|
|
4665
4545
|
this.scheduleTableHeightCheck();
|
|
4666
4546
|
}, { initialValue: "evaluate" });
|
|
4667
4547
|
this.onInit(() => {
|
|
@@ -4669,15 +4549,29 @@ class TableBodyComponent extends ResizeAwareComponent {
|
|
|
4669
4549
|
this.columnIds$ = chain(this.columns$).pluck("columnId");
|
|
4670
4550
|
this.columnsById$ = chain(this.columns$).indexBy('columnId');
|
|
4671
4551
|
});
|
|
4672
|
-
const txo = new TransactionObserver({
|
|
4552
|
+
// const txo = new TransactionObserver({verbose: false}).onEvent(e => console.log(e.name, e.payload));
|
|
4673
4553
|
// txo.observe('this.virtualScrollRowRange$', this.virtualScrollRowRange$);
|
|
4674
4554
|
// txo.observe('this.virtualScrollSpacerSize$', this.virtualScrollSpacerSize$);
|
|
4675
4555
|
// txo.observe('this.virtualRows$', this.virtualRows$);
|
|
4676
4556
|
// txo.observe('this.tableBodyHeight$', this.tableBodyHeight$);
|
|
4557
|
+
// txo.observe('this.virtualScrollActive$', this.virtualScrollActive$);
|
|
4558
|
+
}
|
|
4559
|
+
ngAfterViewInit() {
|
|
4560
|
+
super.ngAfterViewInit();
|
|
4561
|
+
if (this.scrollViewport) {
|
|
4562
|
+
const { observe } = Dsl.disposeWith(this);
|
|
4563
|
+
this.scrollViewport.elementScrolled().subscribe(() => this.notifyScrolled());
|
|
4564
|
+
}
|
|
4677
4565
|
}
|
|
4678
4566
|
get hideHeader() {
|
|
4679
4567
|
return !this.showHeader;
|
|
4680
4568
|
}
|
|
4569
|
+
get headerHeightCssVar() {
|
|
4570
|
+
return `${this.headerHeight$.value}px`;
|
|
4571
|
+
}
|
|
4572
|
+
get rowHeightCssVar() {
|
|
4573
|
+
return `${this.rowHeight$.value}px`;
|
|
4574
|
+
}
|
|
4681
4575
|
isEditing(row) {
|
|
4682
4576
|
return !!this.tableModel.getEditSessionFor(row);
|
|
4683
4577
|
}
|
|
@@ -4716,8 +4610,20 @@ class TableBodyComponent extends ResizeAwareComponent {
|
|
|
4716
4610
|
}
|
|
4717
4611
|
}, waitMillis);
|
|
4718
4612
|
}
|
|
4613
|
+
notifyScrolled() {
|
|
4614
|
+
this.virtualScrollActive$.value = true;
|
|
4615
|
+
this.clearScrollTimeout();
|
|
4616
|
+
this.scrollTimeout = setTimeout(() => {
|
|
4617
|
+
return this.virtualScrollActive$.value = false;
|
|
4618
|
+
}, 200);
|
|
4619
|
+
}
|
|
4620
|
+
clearScrollTimeout() {
|
|
4621
|
+
if (this.scrollTimeout) {
|
|
4622
|
+
clearTimeout(this.scrollTimeout);
|
|
4623
|
+
}
|
|
4624
|
+
}
|
|
4719
4625
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, deps: [{ token: AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4720
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableBodyComponent, selector: "aup-table-body", inputs: { data$: "data$", tableModel: "tableModel", showHeader$: "showHeader$", showHeader: "showHeader", trackBy: "trackBy", scrollMode$: "scrollMode$", scrollMode: "scrollMode" }, host: { properties: { "attr.scrollMode": "this.scrollMode", "class": "this.baseCssClass", "class.hide-header": "this.hideHeader" } }, usesInheritance: true, ngImport: i0, template: "\n<div class=\"classic-scroll-container\" *ngIf=\"scrollMode$.value !== 'virtual'\">\n <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"trackBy\" [multiTemplateDataRows]>\n\n <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n <aup-table-header-cell [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-header-cell>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n [class.hide]=\"!column.isVisible()\"\n >\n <aup-table-cell [column]=\"$any(column)\"\n [row]=\"row\"\n [tableModel]=\"$any(tableModel)\"\n [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-cell>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\"\n [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [aupTableRowAttributes]=\"tableModel.getRowAttributes(row)\"\n [attr.aup-row-id]=\"trackBy(i, row)\"\n ></tr>\n\n </table>\n</div>\n\n<cdk-virtual-scroll-viewport *ngIf=\"scrollMode$.value === 'virtual'\"\n [tvsItemSize]=\"rowHeight$.value\"
|
|
4626
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableBodyComponent, selector: "aup-table-body", inputs: { data$: "data$", tableModel: "tableModel", showHeader$: "showHeader$", showHeader: "showHeader", trackBy: "trackBy", scrollMode$: "scrollMode$", scrollMode: "scrollMode" }, host: { properties: { "attr.scrollMode": "this.scrollMode", "class": "this.baseCssClass", "class.hide-header": "this.hideHeader", "style.--aup-table-header-height": "this.headerHeightCssVar", "style.--aup-table-row-height": "this.rowHeightCssVar" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<div class=\"classic-scroll-container\" *ngIf=\"scrollMode$.value !== 'virtual'\">\n <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"trackBy\" [multiTemplateDataRows]>\n\n <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n <aup-table-header-cell [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-header-cell>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n [class.hide]=\"!column.isVisible()\"\n >\n <aup-table-cell [column]=\"$any(column)\"\n [row]=\"row\"\n [tableModel]=\"$any(tableModel)\"\n [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-cell>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\"\n [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [aupTableRowAttributes]=\"tableModel.getRowAttributes(row)\"\n [attr.aup-row-id]=\"trackBy(i, row)\"\n ></tr>\n\n </table>\n</div>\n\n<cdk-virtual-scroll-viewport *ngIf=\"scrollMode$.value === 'virtual'\"\n [tvsItemSize]=\"rowHeight$.value\"\n [headerHeight]=\"headerHeight$.value\"\n [bufferMultiplier]=\"bufferMultiplier\"\n>\n <table mat-table [dataSource]=\"virtualScrollDataSource\" [trackBy]=\"trackBy\">\n\n <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n <aup-table-header-cell [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-header-cell>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n [class.hide]=\"!column.isVisible()\"\n >\n <aup-table-cell [column]=\"$any(column)\"\n [row]=\"row\"\n [tableModel]=\"$any(tableModel)\"\n [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-cell>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\"\n [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [aupTableRowAttributes]=\"tableModel.getRowAttributes(row)\"\n [attr.aup-row-id]=\"trackBy(i, row)\"\n ></tr>\n\n </table>\n</cdk-virtual-scroll-viewport>\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host[scrollMode=virtual] cdk-virtual-scroll-viewport{flex:1}:host[scrollMode=virtual] table th{height:var(--aup-table-header-height);max-height:var(--aup-table-header-height);min-height:var(--aup-table-header-height)}:host[scrollMode=virtual] table td{height:var(--aup-table-row-height);max-height:var(--aup-table-row-height);min-height:var(--aup-table-row-height)}:host[scrollMode=classic]{min-height:0}:host[scrollMode=classic] .classic-scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i4$5.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "directive", type: TableRowAttributesDirective, selector: "[aupTableRowAttributes]", inputs: ["aupTableRowAttributes"] }, { kind: "component", type: TableCellComponent, selector: "aup-table-cell", inputs: ["row", "column", "editSession", "tableModel"] }, { kind: "component", type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: ["column"] }] });
|
|
4721
4627
|
}
|
|
4722
4628
|
__decorate([
|
|
4723
4629
|
Proxify(),
|
|
@@ -4745,7 +4651,7 @@ __decorate([
|
|
|
4745
4651
|
], TableBodyComponent.prototype, "scrollMode", null);
|
|
4746
4652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, decorators: [{
|
|
4747
4653
|
type: Component,
|
|
4748
|
-
args: [{ selector: "aup-table-body", template: "\n<div class=\"classic-scroll-container\" *ngIf=\"scrollMode$.value !== 'virtual'\">\n <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"trackBy\" [multiTemplateDataRows]>\n\n <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n <aup-table-header-cell [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-header-cell>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n [class.hide]=\"!column.isVisible()\"\n >\n <aup-table-cell [column]=\"$any(column)\"\n [row]=\"row\"\n [tableModel]=\"$any(tableModel)\"\n [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-cell>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\"\n [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [aupTableRowAttributes]=\"tableModel.getRowAttributes(row)\"\n [attr.aup-row-id]=\"trackBy(i, row)\"\n ></tr>\n\n </table>\n</div>\n\n<cdk-virtual-scroll-viewport *ngIf=\"scrollMode$.value === 'virtual'\"\n [tvsItemSize]=\"rowHeight$.value\"
|
|
4654
|
+
args: [{ selector: "aup-table-body", template: "\n<div class=\"classic-scroll-container\" *ngIf=\"scrollMode$.value !== 'virtual'\">\n <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"trackBy\" [multiTemplateDataRows]>\n\n <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n <aup-table-header-cell [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-header-cell>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n [class.hide]=\"!column.isVisible()\"\n >\n <aup-table-cell [column]=\"$any(column)\"\n [row]=\"row\"\n [tableModel]=\"$any(tableModel)\"\n [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-cell>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\"\n [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [aupTableRowAttributes]=\"tableModel.getRowAttributes(row)\"\n [attr.aup-row-id]=\"trackBy(i, row)\"\n ></tr>\n\n </table>\n</div>\n\n<cdk-virtual-scroll-viewport *ngIf=\"scrollMode$.value === 'virtual'\"\n [tvsItemSize]=\"rowHeight$.value\"\n [headerHeight]=\"headerHeight$.value\"\n [bufferMultiplier]=\"bufferMultiplier\"\n>\n <table mat-table [dataSource]=\"virtualScrollDataSource\" [trackBy]=\"trackBy\">\n\n <ng-container *ngFor=\"let column of columns$.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n <aup-table-header-cell [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-header-cell>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n [class.hide]=\"!column.isVisible()\"\n >\n <aup-table-cell [column]=\"$any(column)\"\n [row]=\"row\"\n [tableModel]=\"$any(tableModel)\"\n [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class]=\"getColumnClasses(column.columnId)\"\n ></aup-table-cell>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\"\n [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [aupTableRowAttributes]=\"tableModel.getRowAttributes(row)\"\n [attr.aup-row-id]=\"trackBy(i, row)\"\n ></tr>\n\n </table>\n</cdk-virtual-scroll-viewport>\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host[scrollMode=virtual] cdk-virtual-scroll-viewport{flex:1}:host[scrollMode=virtual] table th{height:var(--aup-table-header-height);max-height:var(--aup-table-header-height);min-height:var(--aup-table-header-height)}:host[scrollMode=virtual] table td{height:var(--aup-table-row-height);max-height:var(--aup-table-row-height);min-height:var(--aup-table-row-height)}:host[scrollMode=classic]{min-height:0}:host[scrollMode=classic] .classic-scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"] }]
|
|
4749
4655
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
4750
4656
|
type: Inject,
|
|
4751
4657
|
args: [AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER]
|
|
@@ -4768,12 +4674,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
4768
4674
|
}, {
|
|
4769
4675
|
type: HostBinding,
|
|
4770
4676
|
args: ["attr.scrollMode"]
|
|
4677
|
+
}], scrollViewport: [{
|
|
4678
|
+
type: ViewChild,
|
|
4679
|
+
args: [CdkVirtualScrollViewport]
|
|
4771
4680
|
}], baseCssClass: [{
|
|
4772
4681
|
type: HostBinding,
|
|
4773
4682
|
args: ["class"]
|
|
4774
4683
|
}], hideHeader: [{
|
|
4775
4684
|
type: HostBinding,
|
|
4776
4685
|
args: ["class.hide-header"]
|
|
4686
|
+
}], headerHeightCssVar: [{
|
|
4687
|
+
type: HostBinding,
|
|
4688
|
+
args: ["style.--aup-table-header-height"]
|
|
4689
|
+
}], rowHeightCssVar: [{
|
|
4690
|
+
type: HostBinding,
|
|
4691
|
+
args: ["style.--aup-table-row-height"]
|
|
4777
4692
|
}] } });
|
|
4778
4693
|
|
|
4779
4694
|
class TableMoreMenuPopupComponent extends DisposableComponent {
|
|
@@ -5105,6 +5020,7 @@ class TableComponent extends AbstractTableComponent {
|
|
|
5105
5020
|
#filterModel_accessor_storage = proxify((TableFilterModel));
|
|
5106
5021
|
get filterModel() { return this.#filterModel_accessor_storage; }
|
|
5107
5022
|
set filterModel(value) { this.#filterModel_accessor_storage = value; }
|
|
5023
|
+
tableBody;
|
|
5108
5024
|
_footerContentAdded = false;
|
|
5109
5025
|
_filteredRows$ = this.registerDisposable(new DelegatingListModel());
|
|
5110
5026
|
scrollMode$;
|
|
@@ -5124,6 +5040,7 @@ class TableComponent extends AbstractTableComponent {
|
|
|
5124
5040
|
this._filteredRows$.setDelegate(this._dataSource$);
|
|
5125
5041
|
}
|
|
5126
5042
|
this._visibleRows$.setDelegate(this._filteredRows$);
|
|
5043
|
+
// let users of the model know what the current visible and filtered rows are for selection models and what not
|
|
5127
5044
|
this.tableModel.bindToTable(this._filteredRows$, this._visibleRows$);
|
|
5128
5045
|
}
|
|
5129
5046
|
getModel() {
|
|
@@ -5136,7 +5053,7 @@ class TableComponent extends AbstractTableComponent {
|
|
|
5136
5053
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
5137
5054
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableComponent, selector: "aup-table", inputs: { tableModel: "tableModel", filterModel: "filterModel" }, providers: [
|
|
5138
5055
|
{ provide: AbstractTableComponent, useExisting: TableComponent }
|
|
5139
|
-
], usesInheritance: true, ngImport: i0, template: "<aup-table-body [data$]=\"visibleRows$\"\n [tableModel]=\"tableModel\"\n [showHeader$]=\"showHeader$\"\n [scrollMode$]=\"scrollMode$\"\n [trackBy]=\"trackBy\"\n [aupHighlightTextModel]=\"highlightText$\"\n></aup-table-body>\n<section class=\"table-footer\">\n <div class=\"footer-content\"><ng-content select=\"[footer]\"></ng-content></div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}aup-table-body{flex:1}.table-footer{display:flex;flex-direction:row;align-items:center}.table-footer .footer-content{flex:1}\n"], dependencies: [{ kind: "directive", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: ["aupHighlightTextModel"] }, { kind: "component", type: TableBodyComponent, selector: "aup-table-body", inputs: ["data$", "tableModel", "showHeader$", "showHeader", "trackBy", "scrollMode$", "scrollMode"] }] });
|
|
5056
|
+
], viewQueries: [{ propertyName: "tableBody", first: true, predicate: TableBodyComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<aup-table-body [data$]=\"visibleRows$\"\n [tableModel]=\"tableModel\"\n [showHeader$]=\"showHeader$\"\n [scrollMode$]=\"scrollMode$\"\n [trackBy]=\"trackBy\"\n [aupHighlightTextModel]=\"highlightText$\"\n></aup-table-body>\n<section class=\"table-footer\">\n <div class=\"footer-content\"><ng-content select=\"[footer]\"></ng-content></div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}aup-table-body{flex:1}.table-footer{display:flex;flex-direction:row;align-items:center}.table-footer .footer-content{flex:1}\n"], dependencies: [{ kind: "directive", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: ["aupHighlightTextModel"] }, { kind: "component", type: TableBodyComponent, selector: "aup-table-body", inputs: ["data$", "tableModel", "showHeader$", "showHeader", "trackBy", "scrollMode$", "scrollMode"] }] });
|
|
5140
5057
|
}
|
|
5141
5058
|
__decorate([
|
|
5142
5059
|
Proxify(),
|
|
@@ -5155,6 +5072,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
5155
5072
|
type: Input
|
|
5156
5073
|
}], filterModel: [{
|
|
5157
5074
|
type: Input
|
|
5075
|
+
}], tableBody: [{
|
|
5076
|
+
type: ViewChild,
|
|
5077
|
+
args: [TableBodyComponent]
|
|
5158
5078
|
}] } });
|
|
5159
5079
|
|
|
5160
5080
|
const SVG_HEIGHT = 60;
|