@coolon/angular-ui-powerups 16.1.0-aplpha.80 → 16.1.0-aplpha.82

package/fesm2022/coolon-angular-ui-powerups.mjs

@@ -2122,11 +2122,11 @@ class CheckboxInputComponent extends AbstractValueInputComponent {
         super();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CheckboxInputComponent, selector: "aup-checkbox-input", inputs: { color: "color", labelPosition: "labelPosition" }, usesInheritance: true, ngImport: i0, template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValue$.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CheckboxInputComponent, selector: "aup-checkbox-input", inputs: { color: "color", labelPosition: "labelPosition" }, usesInheritance: true, ngImport: i0, template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValue$.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{ label }}\n</mat-checkbox>\n<ng-container *ngIf=\"!dense\">\n  <mat-hint *ngIf=\"showHint\">{{ hint }}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{ firstError }}</mat-error>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:10px 0 0}:host.dense{padding:4px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CheckboxInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-checkbox-input', template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValue$.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"] }]
+            args: [{ selector: 'aup-checkbox-input', template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValue$.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{ label }}\n</mat-checkbox>\n<ng-container *ngIf=\"!dense\">\n  <mat-hint *ngIf=\"showHint\">{{ hint }}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{ firstError }}</mat-error>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:10px 0 0}:host.dense{padding:4px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { color: [{
                 type: Input
             }], labelPosition: [{
@@ -4475,117 +4475,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ['class']
             }] } });
 
-// /**
-//  * Virtual Scroll Strategy
-//  */
-// export class CustomVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy {
-//   protected readonly garbage = new GarbageCollector();
-//
-//   constructor(rowHeight$: ValueModel<number>, minBufferPx: number, maxBufferPx: number) {
-//     super(rowHeight$.value, minBufferPx, maxBufferPx);
-//     const {chain, when} = Dsl.disposeWith(this.garbage);
-//     when(rowHeight$).changes(h => {
-//       this.updateItemAndBufferSize(h, minBufferPx, maxBufferPx);
-//     }, {initialValue: "triggerChangeUnlessNil"})
-//   }
-// }
-// export class VirtualScrollDataSource<Row> extends DataSource<Row> implements Disposable, Disposable.Collector {
-//
-//   private garbage = new GarbageCollector();
-//
-//   readonly virtualScrollRowRange$: ValueModelChain<{ start: number; end: number }>;
-//   readonly virtualScrollSpacerSize$: ValueModelChain<number>;
-//   readonly totalContentSize$: ValueModelChain<number>;
-//   readonly showVirtualScrollOffset: (index: number, rowData: any) => boolean;
-//
-//   protected readonly virtualRowsObservable$ = new BehaviorSubject<readonly Row[]>([]);
-//   private readonly virtualScrollPixelOffset$ = new MutableValueModel<number>(0);
-//
-//
-//   constructor(readonly viewport: CdkVirtualScrollViewport, data$:ListModel<Row>, readonly rowHeight$:ValueModel<number>, pageSize$: ValueModel<number>) {
-//     super();
-//     const {chain, when, observe} = Dsl.disposeWith(this);
-//
-//     observe.valuesFrom(viewport.elementScrolled()).subscribe((ev: Event) => {
-//       this.virtualScrollPixelOffset$.value = (ev.currentTarget as any).scrollTop;
-//     });
-//
-//     this.virtualScrollRowRange$ = chain(this.virtualScrollPixelOffset$).map(rawPixelOffset => {
-//       const startIndex = Math.floor(rawPixelOffset / this.rowHeight$.value);
-//       console.log(rawPixelOffset, startIndex)
-//       // const prevExtraData = startIndex > 5 ? 5 : 0;
-//       const prevExtraData = 0;
-//       // return rows.slice(startIndex - prevExtraData, startIndex + (pageSize$.value - prevExtraData));
-//       return {
-//         start: startIndex - prevExtraData,
-//         end: startIndex + (pageSize$.value - prevExtraData)
-//       }
-//     }, {
-//       dependsOn: [this.rowHeight$, pageSize$],
-//       postponeWhile: chain.numericValue(pageSize$).isLessThan(1),
-//       changed: (is, was) => {
-//         return was?.start !== is?.start || was?.end !== is?.end
-//       }
-//     })
-//
-//     this.virtualScrollSpacerSize$ = chain(this.virtualScrollRowRange$).map(range => {
-//       const pixelOffset = this.rowHeight$.value * range.start;
-//       return pixelOffset;
-//     }, { dependsOn: this.rowHeight$})
-//
-//     this.totalContentSize$ = chain(data$).count().map(rowCount => {
-//       return this.rowHeight$.value * rowCount
-//     }, {dependsOn: rowHeight$})
-//
-//     chain(this.virtualScrollRowRange$).mapToList(range => {
-//       return data$.value.slice(range.start, range.end);
-//     }, {
-//       dependsOn: data$
-//     }).subscribe(visibleRows => {
-//       console.log(visibleRows)
-//       this.virtualRowsObservable$.next(visibleRows)
-//     });
-//
-//     when(this.virtualScrollSpacerSize$).changes(scrollTop => {
-//       viewport.setRenderedContentOffset(scrollTop, "to-start");
-//     }, {initialValue: "triggerChangeUnlessNil"});
-//
-//     when(this.totalContentSize$).changes(totalSize => {
-//       viewport.setTotalContentSize(totalSize);
-//     }, {initialValue: "triggerChangeUnlessNil"});
-//
-//
-//     this.showVirtualScrollOffset = (index: number, rowData: any): boolean => {
-//       const haveScrolled = this.virtualScrollSpacerSize$.value > 0;
-//       const firstRow = index === 0;
-//       return index === 0 && haveScrolled
-//     };
-//
-//
-//
-//   }
-//
-//
-//
-//   dispose(): void {
-//     this.garbage.dispose();
-//   }
-//
-//   registerDisposable<T extends Disposable>(disposable: T): T {
-//     return this.garbage.registerDisposable(disposable);
-//   }
-//
-//
-//   connect(collectionViewer: CollectionViewer): Observable<readonly Row[]> {
-//     return this.virtualRowsObservable$;
-//   }
-//
-//   disconnect(collectionViewer: CollectionViewer): void {
-//     // noop
-//   }
-//
-//
-// }
 const AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER = new InjectionToken("AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER");
 class TableRowAttributesDirective {
     elementRef;
@@ -4634,8 +4523,8 @@ class TableBodyComponent extends ResizeAwareComponent {
     columnIds$;
     columnsById$;
     // TODO: support user defined header and row heights via css vars.
-    headerHeight$ = new MutableValueModel(29);
-    rowHeight$ = new MutableValueModel(40);
+    headerHeight$ = new MutableValueModel(48);
+    rowHeight$ = new MutableValueModel(44);
     baseCssClass = "aup-table-component";
     virtualScrollDataSource = new TableVirtualScrollDataSource();
     constructor(bufferMultiplier = 1) {
@@ -4678,6 +4567,12 @@ class TableBodyComponent extends ResizeAwareComponent {
     get hideHeader() {
         return !this.showHeader;
     }
+    get headerHeightCssVar() {
+        return `${this.headerHeight$.value}px`;
+    }
+    get rowHeightCssVar() {
+        return `${this.rowHeight$.value}px`;
+    }
     isEditing(row) {
         return !!this.tableModel.getEditSessionFor(row);
     }
@@ -4717,7 +4612,7 @@ class TableBodyComponent extends ResizeAwareComponent {
         }, waitMillis);
     }
     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 });
-    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\" [headerHeight]=\"headerHeight$.value\" [bufferMultiplier]=\"bufferMultiplier\">\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=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"] }] });
+    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\" [headerHeight]=\"headerHeight$.value\" [bufferMultiplier]=\"bufferMultiplier\">\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"] }] });
 }
 __decorate([
     Proxify(),
@@ -4745,7 +4640,7 @@ __decorate([
 ], TableBodyComponent.prototype, "scrollMode", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
-            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\" [headerHeight]=\"headerHeight$.value\" [bufferMultiplier]=\"bufferMultiplier\">\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=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"] }]
+            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\" [headerHeight]=\"headerHeight$.value\" [bufferMultiplier]=\"bufferMultiplier\">\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"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER]
@@ -4774,6 +4669,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             }], hideHeader: [{
                 type: HostBinding,
                 args: ["class.hide-header"]
+            }], headerHeightCssVar: [{
+                type: HostBinding,
+                args: ["style.--aup-table-header-height"]
+            }], rowHeightCssVar: [{
+                type: HostBinding,
+                args: ["style.--aup-table-row-height"]
             }] } });
 
 class TableMoreMenuPopupComponent extends DisposableComponent {