@coolon/angular-ui-powerups 16.1.0-aplpha.77 → 16.1.0-aplpha.79

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

@@ -62,10 +62,10 @@ import * as i1$4 from '@angular/router';
 import { ActivatedRouteSnapshot, UrlSegment, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterModule } from '@angular/router';
 import 'reflect-metadata';
 import * as i1$5 from '@angular/cdk/overlay';
+import { style, trigger, transition, animate, group, query } from '@angular/animations';
 import { MatCardModule } from '@angular/material/card';
 import * as i3$3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import { style, query, group, animate, trigger, transition } from '@angular/animations';
 
 class CommandDirective extends GarbageCollector {
     elementRef;
@@ -4102,6 +4102,14 @@ class RowClass {
         this.matches = matches;
     }
 }
+class RowAttribute {
+    attributeName;
+    getValue;
+    constructor(attributeName, getValue) {
+        this.attributeName = attributeName;
+        this.getValue = getValue;
+    }
+}
 class AbstractTableModel extends GarbageCollector {
     _dataSource$ = this.registerDisposable(new DelegatingListModel());
     _filteredRows$ = this.registerDisposable(new DelegatingListModel());
@@ -4112,6 +4120,7 @@ class AbstractTableModel extends GarbageCollector {
     saveCommandFactory;
     _editorSessionByRowId;
     rowClassNamePredicates = [];
+    rowAttributeGenerators = [];
     _columnTextPropertiesLookup;
     editing$;
     firstEditableColumn$;
@@ -4280,6 +4289,9 @@ class AbstractTableModel extends GarbageCollector {
     addRowClass(className, predicate) {
         this.rowClassNamePredicates.push(new RowClass(className, predicate));
     }
+    addRowAttribute(attributeName, getValue) {
+        this.rowAttributeGenerators.push(new RowAttribute(attributeName, getValue));
+    }
     getRowClasses(row) {
         const classNames = [];
         this.rowClassNamePredicates.forEach(i => {
@@ -4289,6 +4301,11 @@ class AbstractTableModel extends GarbageCollector {
         });
         return classNames;
     }
+    getRowAttributes(row) {
+        return this.rowAttributeGenerators.reduce((result, generator) => {
+            return { ...result, [generator.attributeName]: generator.getValue(row) };
+        }, {});
+    }
     addColumn(column, position) {
         return this.columnManager.addColumn(column, position);
     }
@@ -4570,6 +4587,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
 //
 // }
 const AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER = new InjectionToken("AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER");
+class TableRowAttributesDirective {
+    elementRef;
+    aupTableRowAttributes;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        for (const attr in this.aupTableRowAttributes) {
+            this.elementRef.nativeElement.setAttribute(attr, this.aupTableRowAttributes[attr]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableRowAttributesDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: TableRowAttributesDirective, selector: "[aupTableRowAttributes]", inputs: { aupTableRowAttributes: "aupTableRowAttributes" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableRowAttributesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[aupTableRowAttributes]",
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { aupTableRowAttributes: [{
+                type: Input
+            }] } });
 class TableBodyComponent extends ResizeAwareComponent {
     bufferMultiplier;
     #data$_accessor_storage = proxify((ListModel));
@@ -4678,7 +4717,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        [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        [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: "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" } }, 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"] }] });
 }
 __decorate([
     Proxify(),
@@ -4706,7 +4745,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        [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        [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=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]
@@ -5975,6 +6014,7 @@ class ComponentsModule {
             FocusableComponent,
             CardContainerComponent,
             TableComponent,
+            TableRowAttributesDirective,
             EditRowControlsComponent,
             ColumnTemplateDirective,
             DefaultCellRendererComponent,
@@ -6145,6 +6185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         FocusableComponent,
                         CardContainerComponent,
                         TableComponent,
+                        TableRowAttributesDirective,
                         EditRowControlsComponent,
                         ColumnTemplateDirective,
                         DefaultCellRendererComponent,
@@ -9453,6 +9494,7 @@ class ActivityContainerComponent extends AbstractInteractionContext {
     tabs;
     activityOutlets;
     activityRefs = [];
+    animationDuration = "500ms";
     _identifier;
     _deferredCleanUp;
     interactionServiceApi;
@@ -9465,6 +9507,7 @@ class ActivityContainerComponent extends AbstractInteractionContext {
     busy = this.registerDisposable(new DelegatingValueModel().withDefault(false));
     syncTabsJob = undefined;
     stable$;
+    wasActive = false;
     constructor(placeRouter) {
         super();
         this.placeRouter = placeRouter;
@@ -9501,7 +9544,12 @@ class ActivityContainerComponent extends AbstractInteractionContext {
      * Returns true if an activity is currently running.
      */
     isActive() {
-        return this.getActiveActivityCount() > 0;
+        const isActive = this.getActiveActivityCount() > 0;
+        // if (this.wasActive !== isActive) {
+        //   console.log({was: this.wasActive, is: isActive});
+        // }
+        // this.wasActive = isActive
+        return isActive;
     }
     registerDisposable(disposable) {
         return this.garbage.registerDisposable(disposable);
@@ -9584,7 +9632,7 @@ class ActivityContainerComponent extends AbstractInteractionContext {
             // by activity index)
             setTimeout(() => {
                 this.activityRefs = []; // we have to do it after the animation timeout or the activity disappears before the animatin finsihes
-            }, this.getTabAnimationDuration());
+            }, this.getTabAnimationDurationInMillis());
             const promise = this.interactionServiceApi.notifyFinished(this);
             this._deferredCleanUp = promise
                 .finally(() => {
@@ -9610,7 +9658,6 @@ class ActivityContainerComponent extends AbstractInteractionContext {
     /**
      * Synchronises the selected tab index.
      */
-    // @Trace()
     synchroniseSelectedTabIndex() {
         assert.isTruthy(this.isActive());
         const previousIndex = this.tabs.selectedIndex;
@@ -9622,10 +9669,10 @@ class ActivityContainerComponent extends AbstractInteractionContext {
             activityRef.setFocused(false);
             this.busy.setDelegate(activityRef.activityBusy);
             this.tabs.selectedIndex = newIndex;
-            if (this.ready$.value) {
-                // Note: We're not using the animation done event as it's firing almost immeadiately.
-                setTimeout(() => this.finaliseActivityStates(), animate ? this.getTabAnimationDuration() : 0);
-            }
+            // if (this.ready$.value) {
+            //   // Note: We're not using the animation done event as it's firing almost immeadiately.
+            //   setTimeout(() => this.finaliseActivityStates(), animate ? this.getTabAnimationDurationInMillis() : 0);
+            // }
         }
     }
     finaliseActivityStates() {
@@ -9639,7 +9686,12 @@ class ActivityContainerComponent extends AbstractInteractionContext {
         return this.activityOutlets.toArray()[this.tabs.selectedIndex];
     }
     getTabAnimationDuration() {
-        const match = this.tabs.animationDuration.match(/(\d+)(.*)/);
+        // const s = this._started$.value ? this.animationDuration : "0";
+        // return s
+        return this.animationDuration;
+    }
+    getTabAnimationDurationInMillis() {
+        const match = this.animationDuration.match(/(\d+)(.*)/);
         const numericValue = parseFloat(match[1]);
         switch (match[2].trim()) {
             case "ms":
@@ -9665,12 +9717,16 @@ class ActivityContainerComponent extends AbstractInteractionContext {
             }
         }, 75);
     }
+    onAnimationDone() {
+        this._started$.value = true;
+        this.finaliseActivityStates();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityContainerComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: { dynamicHeight: "dynamicHeight" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, static: true }, { propertyName: "activityOutlets", predicate: ActivityOutletComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: ["busy$", "busy"] }, { kind: "directive", type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: ["nestedInteractionContext", "activityRef"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: { dynamicHeight: "dynamicHeight", animationDuration: "animationDuration" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, static: true }, { propertyName: "activityOutlets", predicate: ActivityOutletComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\"\n               [animationDuration]=\"getTabAnimationDuration()\"\n               (animationDone)=\"onAnimationDone()\"\n>\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: ["busy$", "busy"] }, { kind: "directive", type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: ["nestedInteractionContext", "activityRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aup-activity-container", template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"] }]
+            args: [{ selector: "aup-activity-container", template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\"\n               [animationDuration]=\"getTabAnimationDuration()\"\n               (animationDone)=\"onAnimationDone()\"\n>\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: PlaceRouter }]; }, propDecorators: { dynamicHeight: [{
                 type: Input
             }], tabs: [{
@@ -9679,6 +9735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             }], activityOutlets: [{
                 type: ViewChildren,
                 args: [ActivityOutletComponent]
+            }], animationDuration: [{
+                type: Input
             }] } });
 
 class AbstractActivityTriggerComponent extends DisposableComponent {
@@ -9779,14 +9837,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ['class.active']
             }] } });
 
-const cssDurationRegex = /(\d+)(m?s)/;
+const cssDurationRegex$1 = /(\d+)(m?s)/;
 /**
  * @example
  *   <aup-in-place-interaction-context #inPlaceInteractionContext>
  *   </aup-in-place-interaction-context>
  *
  *   in your component
- *     @ViewChild('inPlaceInteractionContext', { static: true })
+ *     @ViewChild(InPlaceInteractionContextComponent)
  *     interactionContext: InteractionContext;
  *
  *
@@ -9809,7 +9867,7 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
         return this.animateFirstActivity ? (this.tabConfig?.animationDuration || "500ms") : "0ms";
     }
     get animationDurationMillis() {
-        const result = cssDurationRegex.exec(this.animationDuration);
+        const result = cssDurationRegex$1.exec(this.animationDuration);
         if (!result) {
             lang.illegalState(`unsupported css duration: ${this.animationDuration}`);
         }
@@ -9882,7 +9940,7 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: InPlaceInteractionContextComponent, deps: [{ token: MAT_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: { animateFirstActivity: "animateFirstActivity", syncWithRoutes: "syncWithRoutes" }, host: { properties: { "class.active": "this.active" } }, viewQueries: [{ propertyName: "activityContainerComponent", first: true, predicate: ["activityContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs\n               (selectedTabChange)=\"onTabChanged($event)\"\n               [dynamicHeight]=\"false\"\n               [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-activity-container{flex:1}\n"], dependencies: [{ kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: ["dynamicHeight"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: { animateFirstActivity: "animateFirstActivity", syncWithRoutes: "syncWithRoutes" }, host: { properties: { "class.active": "this.active" } }, viewQueries: [{ propertyName: "activityContainerComponent", first: true, predicate: ["activityContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs\n               (selectedTabChange)=\"onTabChanged($event)\"\n               [dynamicHeight]=\"false\"\n               [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-activity-container{flex:1}\n"], dependencies: [{ kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: ["dynamicHeight", "animationDuration"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: InPlaceInteractionContextComponent, decorators: [{
             type: Component,
@@ -10672,6 +10730,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 }]
         }] });
 
+const slideDownOnEnterDef = style({
+    opacity: 0,
+    'height': '0',
+    'max-height': '0',
+    paddingTop: '0',
+    paddingBottom: '0'
+});
+// TODO: params aren't getting customised in the view.  Need to figure out the correct approach.
+const slideDownOnEnterAnimation = trigger('slideDownOnEnter', [
+    transition(':enter', [slideDownOnEnterDef, animate('{{duration}}')], { params: { duration: '100ms' } }),
+    transition(':leave', [animate('{{duration}}', slideDownOnEnterDef)], { params: { duration: '100ms' } })
+]);
+const slideDownWhenOpenAnimation = trigger('slideDownWhenOpen', [
+    transition('closed => open', [slideDownOnEnterDef, animate('{{duration}}')], { params: { duration: '100ms' } }),
+    transition('open => closed', [animate('{{duration}}', slideDownOnEnterDef)], { params: { duration: '100ms' } })
+]);
+const slideLeftOnEnterDef = style({
+    opacity: 0,
+    'width': '0',
+    paddingLeft: '0',
+    paddingRight: '0'
+});
+const slideRightOnEnterAnimation = trigger('slideRightOnEnter', [
+    transition(':enter', [slideLeftOnEnterDef, animate('{{duration}}')], { params: { duration: '100ms' } }),
+    transition(':leave', [animate('{{duration}}', slideLeftOnEnterDef)], { params: { duration: '100ms' } })
+]);
+const ZERO_WIDTH = {
+    opacity: 0,
+    width: '0',
+    paddingLeft: '0',
+    paddingRight: '0',
+};
+const ZERO_HEIGHT = {
+    opacity: 0,
+    height: '0',
+    paddingTop: '0',
+    paddingBottom: '0',
+};
+const slideDownAndRightOnEnterAnimation = trigger('slideDownAndRightOnEnter', [
+    transition(':enter', [
+        style({ overflow: "hidden", whiteSpace: "nowrap", ...ZERO_WIDTH, ...ZERO_HEIGHT }),
+        animate('{{duration}}')
+    ], { params: { duration: '100ms' } }),
+    transition(':leave', [
+        style({ overflow: "hidden", whiteSpace: "nowrap" }),
+        group([
+            animate('{{duration}}', style(ZERO_HEIGHT)),
+            // Hack: 100ms is too quick as it animates from * - 0 as we only see it animate the width is greater than the parent.
+            // Not sure how to animate from * to natural new width of parent.  This hack won't work for text that's just a little
+            // bit wider than the parent as it'll fall within the parent bounds very early in the animation cycle.
+            animate('300ms', style(ZERO_WIDTH)),
+        ])
+    ], { params: { duration: '100ms' } })
+]);
+
+const cssDurationRegex = /(\d+)(m?s)/;
+/**
+ * This interaction context remains hidden (height: 0) until it is active.
+ * @example
+ *   <aup-slide-down-interaction-context #inPlaceInteractionContext>
+ *   </aup-slide-down-interaction-context>
+ *
+ *   in your component
+ *     @ViewChild(SlideDownInteractionContextComponent)
+ *     interactionContext: InteractionContext;
+ *
+ *
+ */
+class SlideDownInteractionContextComponent extends DisposableComponent {
+    tabConfig;
+    activityContainerComponent;
+    // NOTE: disabling this as I'm using the initialise callback to release the hacky height clamp.
+    //       The whole registration thing is a bit naf so I should really clean that up at some point.
+    // /**
+    //  * If true the activity will sync with the router to enable back button support.  This is a work around for
+    //  * deeply nested activities that can't be linked with the root place interactionContext hook for cancelling
+    //  * active interactions.
+    //  */
+    // @Input()
+    // syncWithRoutes = true;
+    dynamicHeight = true;
+    get active() {
+        return this.isActive();
+    }
+    // Horrible hack to stop the div and activity container bouncing back for a bit in after closing.  No idea why it's doing that.
+    clampShut = true;
+    interactionService = this.inject(InteractionService);
+    constructor(tabConfig) {
+        super();
+        this.tabConfig = tabConfig;
+    }
+    ngAfterViewInit() {
+        // NOTE: this is a temp work around to detach inplace contexts from the router until AUP-88 is implemented.
+        // https://coolon.atlassian.net/browse/AUP-88?atlOrigin=eyJpIjoiOTg5YjEzZGUzZjRmNDg0NmExOWU3ZGJmMzJiNTRmNGYiLCJwIjoiaiJ9
+        const self = this;
+        this.activityContainerComponent.initialise("dont-care", {
+            async notifyActive(interactionContext) {
+                self.clampShut = false;
+                return undefined;
+            },
+            async notifyFinished(interactionContext) {
+                return undefined;
+            }
+        });
+        // if (this.syncWithRoutes) {
+        //   this.interactionService.registerInplaceInteractionContext(this);
+        // }
+    }
+    getAnimationState() {
+        return {
+            value: this.isActive() ? "open" : "closed",
+            params: { duration: "200ms" }
+        };
+    }
+    // this is a regsitration callback from the interaction service
+    // @Trace() // webstorm says no usages... but I'm not sure.
+    onInplaceInteractionContextRegistered(id, api) {
+        this.activityContainerComponent.initialise(id, api);
+    }
+    get identifier() {
+        return this.activityContainerComponent.identifier;
+    }
+    alert(alert) {
+        return this.activityContainerComponent.alert(alert);
+    }
+    cancelActiveActivity() {
+        return this.activityContainerComponent.cancelActiveActivity();
+    }
+    confirm(confirm) {
+        return this.activityContainerComponent.confirm(confirm);
+    }
+    confirmOrReject(confirm) {
+        return this.activityContainerComponent.confirmOrReject(confirm);
+    }
+    confirmThen(confirm, activityType, data) {
+        return this.activityContainerComponent.confirmThen(confirm, activityType);
+    }
+    confirmThenExecute(confirm, operation) {
+        return this.activityContainerComponent.confirmThenExecute(confirm, operation);
+    }
+    isActive() {
+        return this.activityContainerComponent.isActive();
+    }
+    startActivity(activityType, data, options) {
+        return this.activityContainerComponent.startActivity(activityType, data, options);
+    }
+    onAnimationDone() {
+        if (!this.isActive()) {
+            this.clampShut = true;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SlideDownInteractionContextComponent, deps: [{ token: MAT_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SlideDownInteractionContextComponent, selector: "aup-slide-down-interaction-context", inputs: { dynamicHeight: "dynamicHeight" }, host: { properties: { "class.active": "this.active" } }, viewQueries: [{ propertyName: "activityContainerComponent", first: true, predicate: ["activityContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [@slideDownWhenOpen]=\"getAnimationState()\" (@slideDownWhenOpen.done)=\"onAnimationDone()\" [style.max-height.px]=\"clampShut ? 0 : undefined\">\n  <aup-activity-container #activityContainer  [dynamicHeight]=\"dynamicHeight\"></aup-activity-container>\n</div>\n\n", styles: [":host{display:flex;flex-direction:column}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "component", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: ["dynamicHeight", "animationDuration"] }], animations: [
+            slideDownWhenOpenAnimation
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SlideDownInteractionContextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "aup-slide-down-interaction-context", animations: [
+                        slideDownWhenOpenAnimation
+                    ], template: "<div [@slideDownWhenOpen]=\"getAnimationState()\" (@slideDownWhenOpen.done)=\"onAnimationDone()\" [style.max-height.px]=\"clampShut ? 0 : undefined\">\n  <aup-activity-container #activityContainer  [dynamicHeight]=\"dynamicHeight\"></aup-activity-container>\n</div>\n\n", styles: [":host{display:flex;flex-direction:column}:host>div{overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_TABS_CONFIG]
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { activityContainerComponent: [{
+                type: ViewChild,
+                args: ["activityContainer", { static: true }]
+            }], dynamicHeight: [{
+                type: Input
+            }], active: [{
+                type: HostBinding,
+                args: ["class.active"]
+            }] } });
+
 class InteractionContextTriggerForDirective extends GarbageCollector {
     aupInteractionContextTriggerFor;
     activityClass;
@@ -10754,6 +10988,7 @@ class InteractionModule {
             AlertDialogComponent,
             ActivityOutletComponent,
             InPlaceInteractionContextComponent,
+            SlideDownInteractionContextComponent,
             AddItemInteractionContextComponent,
             ActivityActionsComponent,
             PopupInteractionContextComponent,
@@ -10799,7 +11034,8 @@ class InteractionModule {
             InlineActivityTriggerComponent,
             ModalActivityTriggerComponent,
             AddCardActivityComponent,
-            InlineStringEditorComponent] });
+            InlineStringEditorComponent,
+            SlideDownInteractionContextComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: InteractionModule, providers: [
             InteractionService
             // {
@@ -10845,6 +11081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         AlertDialogComponent,
                         ActivityOutletComponent,
                         InPlaceInteractionContextComponent,
+                        SlideDownInteractionContextComponent,
                         AddItemInteractionContextComponent,
                         ActivityActionsComponent,
                         PopupInteractionContextComponent,
@@ -10882,6 +11119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         ModalActivityTriggerComponent,
                         AddCardActivityComponent,
                         InlineStringEditorComponent,
+                        SlideDownInteractionContextComponent,
                     ],
                     providers: [
                         InteractionService
@@ -11576,56 +11814,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 }]
         }] });
 
-const slideDownOnEnterDef = style({
-    opacity: 0,
-    'height': '0',
-    paddingTop: '0',
-    paddingBottom: '0'
-});
-// TODO: params aren't getting customised in the view.  Need to figure out the correct approach.
-const slideDownOnEnterAnimation = trigger('slideDownOnEnter', [
-    transition(':enter', [slideDownOnEnterDef, animate('{{duration}}')], { params: { duration: '100ms' } }),
-    transition(':leave', [animate('{{duration}}', slideDownOnEnterDef)], { params: { duration: '100ms' } })
-]);
-const slideLeftOnEnterDef = style({
-    opacity: 0,
-    'width': '0',
-    paddingLeft: '0',
-    paddingRight: '0'
-});
-const slideRightOnEnterAnimation = trigger('slideRightOnEnter', [
-    transition(':enter', [slideLeftOnEnterDef, animate('{{duration}}')], { params: { duration: '100ms' } }),
-    transition(':leave', [animate('{{duration}}', slideLeftOnEnterDef)], { params: { duration: '100ms' } })
-]);
-const ZERO_WIDTH = {
-    opacity: 0,
-    width: '0',
-    paddingLeft: '0',
-    paddingRight: '0',
-};
-const ZERO_HEIGHT = {
-    opacity: 0,
-    height: '0',
-    paddingTop: '0',
-    paddingBottom: '0',
-};
-const slideDownAndRightOnEnterAnimation = trigger('slideDownAndRightOnEnter', [
-    transition(':enter', [
-        style({ overflow: "hidden", whiteSpace: "nowrap", ...ZERO_WIDTH, ...ZERO_HEIGHT }),
-        animate('{{duration}}')
-    ], { params: { duration: '100ms' } }),
-    transition(':leave', [
-        style({ overflow: "hidden", whiteSpace: "nowrap" }),
-        group([
-            animate('{{duration}}', style(ZERO_HEIGHT)),
-            // Hack: 100ms is too quick as it animates from * - 0 as we only see it animate the width is greater than the parent.
-            // Not sure how to animate from * to natural new width of parent.  This hack won't work for text that's just a little
-            // bit wider than the parent as it'll fall within the parent bounds very early in the animation cycle.
-            animate('300ms', style(ZERO_WIDTH)),
-        ])
-    ], { params: { duration: '100ms' } })
-]);
-
 /**
  * @file Automatically generated by barrelsby.
  */
@@ -12200,5 +12388,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, ALERT_CONFIG, AUP_PLACE_CONFIG, AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractConfirmDialogComponent, AbstractDialogComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, Alert, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnManager, ColumnModel, ColumnOrderManager, ColumnTemplateDirective, ColumnTextSearchFormatter, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmThenExecuteDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControlsComponent, EditSession, EditorControlColumnModel, EmptyStateComponent, EnableCellTextSearch, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, GarbageCollectorDirective, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerForDirective, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, Keys, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadableComponent, LoadingContainerComponent, MarkdownComponent, MarkdownService, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceAuthService, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, ResizeObserverDirective, RouteId, ScrollContainerComponent, SearchInputComponent, SectionHeaderComponent, SelectInputActivity, SelectInputComponent, SelectionCellComponent, SelectionColumnModel, SelectionHeaderCellComponent, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableBodyComponent, TableCellComponent, TableComponent, TableFilterModel, TableHeaderCellComponent, TableModel, TableMoreMenuComponent, TableMoreMenuPopupComponent, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, TextSearchContext, ToolBarComponent, Track, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSegment, VisitSegmentSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, slideDownAndRightOnEnterAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator };
+export { ACTIVITY_DATA, ALERT_CONFIG, AUP_PLACE_CONFIG, AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractConfirmDialogComponent, AbstractDialogComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, Alert, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnManager, ColumnModel, ColumnOrderManager, ColumnTemplateDirective, ColumnTextSearchFormatter, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmThenExecuteDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControlsComponent, EditSession, EditorControlColumnModel, EmptyStateComponent, EnableCellTextSearch, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, GarbageCollectorDirective, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerForDirective, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, Keys, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadableComponent, LoadingContainerComponent, MarkdownComponent, MarkdownService, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceAuthService, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, ResizeObserverDirective, RouteId, ScrollContainerComponent, SearchInputComponent, SectionHeaderComponent, SelectInputActivity, SelectInputComponent, SelectionCellComponent, SelectionColumnModel, SelectionHeaderCellComponent, SeparatorComponent, SidePlaceNavigationComponent, SlideDownInteractionContextComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableBodyComponent, TableCellComponent, TableComponent, TableFilterModel, TableHeaderCellComponent, TableModel, TableMoreMenuComponent, TableMoreMenuPopupComponent, TableRowAttributesDirective, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, TextSearchContext, ToolBarComponent, Track, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSegment, VisitSegmentSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, slideDownAndRightOnEnterAnimation, slideDownOnEnterAnimation, slideDownWhenOpenAnimation, slideRightOnEnterAnimation, treeNodeDecorator };
 //# sourceMappingURL=coolon-angular-ui-powerups.mjs.map