@coolon/angular-ui-powerups 16.1.0-aplpha.82 → 16.1.0-aplpha.84
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/esm2022/lib/components/icon/icon.component.mjs +4 -4
- package/esm2022/lib/components/tables/renderer/table-body/table-body.component.mjs +38 -23
- package/esm2022/lib/components/tables/table/table.component.mjs +9 -3
- package/fesm2022/coolon-angular-ui-powerups.mjs +45 -26
- package/fesm2022/coolon-angular-ui-powerups.mjs.map +1 -1
- package/lib/components/tables/renderer/table-body/table-body.component.d.ts +9 -2
- package/lib/components/tables/table/table.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { ObserversModule } from '@angular/cdk/observers';
|
|
|
2
2
|
import * as i1$1 from '@angular/common';
|
|
3
3
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { ElementRef, Directive, Inject, Host, Optional, Input, HostListener, inject, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, HostBinding, ViewEncapsulation, InjectionToken, ViewChild, ViewChildren, EventEmitter, Output, SkipSelf, Self, ContentChildren, ComponentRef, Injector, PLATFORM_ID } from '@angular/core';
|
|
5
|
+
import { ElementRef, Directive, Inject, Host, Optional, Input, HostListener, inject, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, ViewChild, ViewChildren, EventEmitter, Output, SkipSelf, Self, ContentChildren, ComponentRef, Injector, PLATFORM_ID } from '@angular/core';
|
|
6
6
|
import * as i2$4 from '@angular/forms';
|
|
7
7
|
import { FormsModule } from '@angular/forms';
|
|
8
8
|
import * as i4$2 from '@angular/material/form-field';
|
|
@@ -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';
|
|
@@ -844,11 +844,11 @@ class IconComponent {
|
|
|
844
844
|
return `fa-${this.suffix}`;
|
|
845
845
|
}
|
|
846
846
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
847
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: IconComponent, selector: "aup-icon", inputs: { icon: "icon" }, host: { properties: { "attr.icon": "this.icon" }, classAttribute: "mat-icon" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"prefix\">\n\n <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n [svgIcon]=\"suffix\"\n class=\"svgIcon\">\n </mat-icon>\n\n <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n {{suffix}}\n </mat-icon>\n\n <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\" class=\"faIconWrapper\">\n <i class=\"fa-solid\" [class]=\"faIcon\"></i>\n </div>\n\n <mat-icon *ngSwitchDefault\n [matTooltip]=\"errorMessage\">\n bug_report\n </mat-icon>\n\n</ng-container>\n\n", styles: [":host{display:inline-flex;--resolved-size: var(--aup-icon-size, 24px);width:var(--resolved-size)!important;min-width:var(--resolved-size)!important;height:var(--resolved-size)!important;min-height:var(--resolved-size)!important}:host fa-icon{vertical-align:middle}:host .faIconWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:var(--resolved-size)!important;height:var(--resolved-size)!important}:host .svgIcon{width:var(--resolved-size)!important;height:var(--resolved-size)!important}:host :host(.mat-chip-remove){--aup-icon-size: 18px}:host mat-icon{font-size:var(--resolved-size)!important;width:var(--resolved-size)!important;height:var(--resolved-size)!important;margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
847
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: IconComponent, selector: "aup-icon", inputs: { icon: "icon" }, host: { properties: { "attr.icon": "this.icon" }, classAttribute: "mat-icon" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"prefix\">\n\n <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n [svgIcon]=\"suffix\"\n class=\"svgIcon\">\n </mat-icon>\n\n <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n {{suffix}}\n </mat-icon>\n\n <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\" class=\"faIconWrapper\">\n <i class=\"fa-solid\" [class]=\"faIcon\"></i>\n </div>\n\n <mat-icon *ngSwitchDefault\n [matTooltip]=\"errorMessage\">\n bug_report\n </mat-icon>\n\n</ng-container>\n\n", styles: [":host{display:inline-flex;--resolved-size: var(--aup-icon-size, 24px);width:var(--resolved-size)!important;min-width:var(--resolved-size)!important;height:var(--resolved-size)!important;min-height:var(--resolved-size)!important}:host fa-icon{vertical-align:middle}:host .faIconWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:var(--resolved-size)!important;height:var(--resolved-size)!important}:host .svgIcon{width:var(--resolved-size)!important;height:var(--resolved-size)!important}:host :host(.mat-chip-remove){--aup-icon-size: 18px}:host mat-icon{font-size:var(--resolved-size)!important;width:var(--resolved-size)!important;height:var(--resolved-size)!important;margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
848
848
|
}
|
|
849
849
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IconComponent, decorators: [{
|
|
850
850
|
type: Component,
|
|
851
|
-
args: [{ selector: 'aup-icon', host: {
|
|
851
|
+
args: [{ selector: 'aup-icon', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
852
852
|
class: "mat-icon" // this ensures angular form styles that target mat icon also work with us
|
|
853
853
|
}, template: "<ng-container [ngSwitch]=\"prefix\">\n\n <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n [svgIcon]=\"suffix\"\n class=\"svgIcon\">\n </mat-icon>\n\n <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n {{suffix}}\n </mat-icon>\n\n <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\" class=\"faIconWrapper\">\n <i class=\"fa-solid\" [class]=\"faIcon\"></i>\n </div>\n\n <mat-icon *ngSwitchDefault\n [matTooltip]=\"errorMessage\">\n bug_report\n </mat-icon>\n\n</ng-container>\n\n", styles: [":host{display:inline-flex;--resolved-size: var(--aup-icon-size, 24px);width:var(--resolved-size)!important;min-width:var(--resolved-size)!important;height:var(--resolved-size)!important;min-height:var(--resolved-size)!important}:host fa-icon{vertical-align:middle}:host .faIconWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:var(--resolved-size)!important;height:var(--resolved-size)!important}:host .svgIcon{width:var(--resolved-size)!important;height:var(--resolved-size)!important}:host :host(.mat-chip-remove){--aup-icon-size: 18px}:host mat-icon{font-size:var(--resolved-size)!important;width:var(--resolved-size)!important;height:var(--resolved-size)!important;margin-right:0!important}\n"] }]
|
|
854
854
|
}], propDecorators: { icon: [{
|
|
@@ -4519,6 +4519,7 @@ class TableBodyComponent extends ResizeAwareComponent {
|
|
|
4519
4519
|
#scrollMode_accessor_storage = "none";
|
|
4520
4520
|
get scrollMode() { return this.#scrollMode_accessor_storage; }
|
|
4521
4521
|
set scrollMode(value) { this.#scrollMode_accessor_storage = value; }
|
|
4522
|
+
scrollViewport;
|
|
4522
4523
|
columns$;
|
|
4523
4524
|
columnIds$;
|
|
4524
4525
|
columnsById$;
|
|
@@ -4527,6 +4528,8 @@ class TableBodyComponent extends ResizeAwareComponent {
|
|
|
4527
4528
|
rowHeight$ = new MutableValueModel(44);
|
|
4528
4529
|
baseCssClass = "aup-table-component";
|
|
4529
4530
|
virtualScrollDataSource = new TableVirtualScrollDataSource();
|
|
4531
|
+
virtualScrollActive$ = new MutableValueModel(false);
|
|
4532
|
+
scrollTimeout;
|
|
4530
4533
|
constructor(bufferMultiplier = 1) {
|
|
4531
4534
|
super();
|
|
4532
4535
|
this.bufferMultiplier = bufferMultiplier;
|
|
@@ -4534,23 +4537,11 @@ class TableBodyComponent extends ResizeAwareComponent {
|
|
|
4534
4537
|
const actualHeaderHeight$ = chain(this.showHeader$).map(show => {
|
|
4535
4538
|
return show ? this.headerHeight$.value : 0;
|
|
4536
4539
|
}, { dependsOn: this.headerHeight$ });
|
|
4537
|
-
//
|
|
4538
|
-
//
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
|
|
4542
|
-
// // TODO: this doesn't take into account any css styling adjustments etc. Will investigate if it's an issue.
|
|
4543
|
-
// const rawRowCount = (bounds.height - actualHeaderHeight$.value) / this.rowHeight$.value;
|
|
4544
|
-
// return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
|
|
4545
|
-
// }, {
|
|
4546
|
-
// dependsOn: [actualHeaderHeight$, this.rowHeight$],
|
|
4547
|
-
// postponeWhile: chain(this.bounds$).pluckNumeric("height").isLessThan(1)
|
|
4548
|
-
// });
|
|
4549
|
-
// // const pageSize$ = chain(visibleRowCount$)
|
|
4550
|
-
// // .map(count => 2 * count).otherwise(0)
|
|
4551
|
-
// const pageSize$ = ValueModel.constant(12)
|
|
4552
|
-
when(this.data$).changes(is => {
|
|
4553
|
-
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;
|
|
4554
4545
|
this.scheduleTableHeightCheck();
|
|
4555
4546
|
}, { initialValue: "evaluate" });
|
|
4556
4547
|
this.onInit(() => {
|
|
@@ -4558,11 +4549,19 @@ class TableBodyComponent extends ResizeAwareComponent {
|
|
|
4558
4549
|
this.columnIds$ = chain(this.columns$).pluck("columnId");
|
|
4559
4550
|
this.columnsById$ = chain(this.columns$).indexBy('columnId');
|
|
4560
4551
|
});
|
|
4561
|
-
const txo = new TransactionObserver({
|
|
4552
|
+
// const txo = new TransactionObserver({verbose: false}).onEvent(e => console.log(e.name, e.payload));
|
|
4562
4553
|
// txo.observe('this.virtualScrollRowRange$', this.virtualScrollRowRange$);
|
|
4563
4554
|
// txo.observe('this.virtualScrollSpacerSize$', this.virtualScrollSpacerSize$);
|
|
4564
4555
|
// txo.observe('this.virtualRows$', this.virtualRows$);
|
|
4565
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
|
+
}
|
|
4566
4565
|
}
|
|
4567
4566
|
get hideHeader() {
|
|
4568
4567
|
return !this.showHeader;
|
|
@@ -4611,8 +4610,20 @@ class TableBodyComponent extends ResizeAwareComponent {
|
|
|
4611
4610
|
}
|
|
4612
4611
|
}, waitMillis);
|
|
4613
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
|
+
}
|
|
4614
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 });
|
|
4615
|
-
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" } }, 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"] }] });
|
|
4616
4627
|
}
|
|
4617
4628
|
__decorate([
|
|
4618
4629
|
Proxify(),
|
|
@@ -4640,7 +4651,7 @@ __decorate([
|
|
|
4640
4651
|
], TableBodyComponent.prototype, "scrollMode", null);
|
|
4641
4652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, decorators: [{
|
|
4642
4653
|
type: Component,
|
|
4643
|
-
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"] }]
|
|
4644
4655
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
4645
4656
|
type: Inject,
|
|
4646
4657
|
args: [AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER]
|
|
@@ -4663,6 +4674,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
4663
4674
|
}, {
|
|
4664
4675
|
type: HostBinding,
|
|
4665
4676
|
args: ["attr.scrollMode"]
|
|
4677
|
+
}], scrollViewport: [{
|
|
4678
|
+
type: ViewChild,
|
|
4679
|
+
args: [CdkVirtualScrollViewport]
|
|
4666
4680
|
}], baseCssClass: [{
|
|
4667
4681
|
type: HostBinding,
|
|
4668
4682
|
args: ["class"]
|
|
@@ -5006,6 +5020,7 @@ class TableComponent extends AbstractTableComponent {
|
|
|
5006
5020
|
#filterModel_accessor_storage = proxify((TableFilterModel));
|
|
5007
5021
|
get filterModel() { return this.#filterModel_accessor_storage; }
|
|
5008
5022
|
set filterModel(value) { this.#filterModel_accessor_storage = value; }
|
|
5023
|
+
tableBody;
|
|
5009
5024
|
_footerContentAdded = false;
|
|
5010
5025
|
_filteredRows$ = this.registerDisposable(new DelegatingListModel());
|
|
5011
5026
|
scrollMode$;
|
|
@@ -5025,6 +5040,7 @@ class TableComponent extends AbstractTableComponent {
|
|
|
5025
5040
|
this._filteredRows$.setDelegate(this._dataSource$);
|
|
5026
5041
|
}
|
|
5027
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
|
|
5028
5044
|
this.tableModel.bindToTable(this._filteredRows$, this._visibleRows$);
|
|
5029
5045
|
}
|
|
5030
5046
|
getModel() {
|
|
@@ -5037,7 +5053,7 @@ class TableComponent extends AbstractTableComponent {
|
|
|
5037
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 });
|
|
5038
5054
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableComponent, selector: "aup-table", inputs: { tableModel: "tableModel", filterModel: "filterModel" }, providers: [
|
|
5039
5055
|
{ provide: AbstractTableComponent, useExisting: TableComponent }
|
|
5040
|
-
], 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"] }] });
|
|
5041
5057
|
}
|
|
5042
5058
|
__decorate([
|
|
5043
5059
|
Proxify(),
|
|
@@ -5056,6 +5072,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
5056
5072
|
type: Input
|
|
5057
5073
|
}], filterModel: [{
|
|
5058
5074
|
type: Input
|
|
5075
|
+
}], tableBody: [{
|
|
5076
|
+
type: ViewChild,
|
|
5077
|
+
args: [TableBodyComponent]
|
|
5059
5078
|
}] } });
|
|
5060
5079
|
|
|
5061
5080
|
const SVG_HEIGHT = 60;
|