@coolon/angular-ui-powerups 16.1.0-aplpha.1 → 16.1.0-aplpha.100

package/lib/components/tables/renderer/table-body/table-body.component.d.ts

@@ -1,36 +1,60 @@
-import { ElementRef, EventEmitter, NgZone, OnInit } from "@angular/core";
-import { ListModel, ListModelChain, ValueModel } from "@coolon/pectin";
+import { CdkPortalOutletAttachedRef } from "@angular/cdk/portal";
+import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
+import { AfterViewInit, ElementRef, InjectionToken, OnInit } from "@angular/core";
+import { ListModel, ListModelChain, MutableValueModel, Proxify, ValueModel } from "@coolon/pectin";
+import { TableVirtualScrollDataSource } from "ng-table-virtual-scroll";
 import { ResizeAwareComponent } from "../../../resize-aware.component";
 import { AbstractTableModel } from "../../abstract-table-model";
 import { ColumnModel } from "../../column/column-model";
+import { FooterRowModel } from "../../footer/footer-row-model";
 import * as i0 from "@angular/core";
-export declare class TableBodyComponent<Row> extends ResizeAwareComponent implements OnInit {
+export declare const AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER: InjectionToken<number>;
+export declare class TableRowAttributesDirective implements OnInit {
+    protected readonly elementRef: ElementRef<HTMLElement>;
+    aupTableRowAttributes: Record<string, string>;
+    constructor(elementRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableRowAttributesDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableRowAttributesDirective, "[aupTableRowAttributes]", never, { "aupTableRowAttributes": { "alias": "aupTableRowAttributes"; "required": false; }; }, {}, never, never, false, never>;
+}
+export declare class TableBodyComponent<Row extends object> extends ResizeAwareComponent implements AfterViewInit {
+    protected bufferMultiplier: number;
     accessor data$: ListModel<Row>;
     accessor tableModel: AbstractTableModel<Row>;
+    accessor footerRow: FooterRowModel.Impl<any>;
     accessor showHeader$: ValueModel<boolean>;
     accessor showHeader: boolean;
-    readonly visibleRowCount: EventEmitter<number>;
     trackBy: (index: number, item: Row) => any;
-    /**
-     * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
-     * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
-     * containment area.
-     */
-    enableScrolling: boolean;
-    columns: ListModelChain<ColumnModel<Row>>;
-    columnIds: ListModelChain<string>;
-    private columnsById;
-    readonly _visibleRowCount: ValueModel<number>;
-    private readonly headerHeight;
-    private readonly rowHeight;
+    accessor scrollMode$: ValueModel<TableBodyComponent.ScrollMode>;
+    accessor scrollMode: TableBodyComponent.ScrollMode;
+    scrollViewport: CdkVirtualScrollViewport;
+    columns$: ListModelChain<ColumnModel<Row>>;
+    columnIds$: ListModelChain<string>;
+    private columnsById$;
+    protected readonly headerHeight$: MutableValueModel<number>;
+    protected rowHeight$: MutableValueModel<number>;
     baseCssClass: string;
-    constructor(elementRef: ElementRef, ngZone: NgZone);
+    protected virtualScrollDataSource: TableVirtualScrollDataSource<Row>;
+    private virtualScrollActive$;
+    private scrollTimeout;
+    constructor(bufferMultiplier?: number);
+    ngAfterViewInit(): void;
     get hideHeader(): boolean;
+    get headerHeightCssVar(): string;
+    get rowHeightCssVar(): string;
     isEditing(row: Row): boolean;
     notifyCellClicked(columnModel: ColumnModel<Row>, row: Row): void;
     isFirstVisibleColumn(columnId: string): boolean;
     isLastVisibleColumn(columnId: string): boolean;
     getColumnClasses(columnId: string): string[];
-    static ɵfac: i0.ɵɵFactoryDeclaration<TableBodyComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableBodyComponent<any>, "aup-table-body", never, { "data$": { "alias": "data$"; "required": false; }; "tableModel": { "alias": "tableModel"; "required": false; }; "showHeader$": { "alias": "showHeader$"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "enableScrolling": { "alias": "enableScrolling"; "required": false; }; }, { "visibleRowCount": "visibleRowCount"; }, never, never, false, never>;
+    private scheduleTableHeightCheck;
+    private notifyScrolled;
+    private clearScrollTimeout;
+    initialiseFooter($event: CdkPortalOutletAttachedRef): void;
+    protected readonly Proxify: typeof Proxify;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableBodyComponent<any>, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableBodyComponent<any>, "aup-table-body", never, { "data$": { "alias": "data$"; "required": false; }; "tableModel": { "alias": "tableModel"; "required": false; }; "footerRow": { "alias": "footerRow"; "required": false; }; "showHeader$": { "alias": "showHeader$"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "scrollMode$": { "alias": "scrollMode$"; "required": false; }; "scrollMode": { "alias": "scrollMode"; "required": false; }; }, {}, never, never, false, never>;
+}
+export declare namespace TableBodyComponent {
+    type ScrollMode = "none" | "classic" | "virtual";
 }

package/lib/components/tables/renderer/table-cell/table-cell.component.d.ts

@@ -6,7 +6,7 @@ import { ColumnModel, RowData } from "../../column/column-model";
 import { EditSession } from "../../editor/edit-session";
 import { CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL } from "../cell-portal-ref";
 import * as i0 from "@angular/core";
-export declare class TableCellComponent<Row> extends DisposableComponent implements OnChanges {
+export declare class TableCellComponent<Row extends object> extends DisposableComponent implements OnChanges {
     row: Row;
     column: ColumnModel<Row>;
     editSession: EditSession<Row>;

package/lib/components/tables/renderer/table-footer-row/table-footer-row.component.d.ts

@@ -0,0 +1,11 @@
+import { CdkPortalOutletAttachedRef } from "@angular/cdk/portal";
+import { FooterRowModel } from "../../footer/footer-row-model";
+import * as i0 from "@angular/core";
+export declare class TableFooterRow {
+    row: FooterRowModel.Impl<any>;
+    defaultClassNames: string;
+    get rowClasses(): string;
+    initialise($event: CdkPortalOutletAttachedRef): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableFooterRow, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableFooterRow, "aup-table-footer-row", never, { "row": { "alias": "row"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/components/tables/renderer/table-header-cell/table-header-cell.component.d.ts

@@ -7,7 +7,6 @@ export declare class TableHeaderCellComponent implements OnInit {
     column: ColumnModel<any>;
     defaultClassNames: string;
     [HEADER_CELL_RENDERER_PORTAL]: Portal<any>;
-    constructor();
     ngOnInit(): void;
     initialiseHeader(ref: CdkPortalOutletAttachedRef): void;
     getPortal(): Portal<any>;

package/lib/components/tables/renderer/table-more-menu/table-more-menu.component.d.ts

@@ -1,5 +1,5 @@
 import { CdkPortalOutletAttachedRef, ComponentPortal } from "@angular/cdk/portal";
-import { MatLegacyMenuTrigger as MatMenuTrigger } from "@angular/material/legacy-menu";
+import { MatMenuTrigger } from "@angular/material/menu";
 import { ValueModelChain } from "@coolon/pectin";
 import { Constructable } from "@coolon/typescript-utilities";
 import { DisposableComponent } from "../../../disposable-component";
@@ -13,8 +13,9 @@ export declare class TableMoreMenuComponent<T> extends DisposableComponent imple
     private readonly popupType$;
     popupComponentPortal$: ValueModelChain<ComponentPortal<TableMoreMenuPopupComponent<T>>>;
     private readonly _visible$;
+    private initialiseCallback?;
     constructor();
-    configurePopupComponentType(popupComponentType: Constructable<TableMoreMenuPopupComponent<T>>): void;
+    configurePopupComponentType(popupComponentType: Constructable<TableMoreMenuPopupComponent<T>>, configureCallback?: (component: TableMoreMenuPopupComponent<T>) => void): void;
     preventDefault($event: MouseEvent): void;
     initialise($event: CdkPortalOutletAttachedRef): void;
     get visible$(): import("@coolon/pectin").ValueModel<boolean>;

package/lib/components/tables/table/table-model.d.ts

@@ -80,7 +80,7 @@ import { SelectionColumnModel } from "../column/selection-column-model";
  *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
  * });
  */
-export declare class TableModel<Row> extends AbstractTableModel<Row> {
+export declare class TableModel<Row extends object> extends AbstractTableModel<Row> {
     constructor(sourceOfTruth?: ListModel<Row>, builder?: (table: TableModel<Row>) => void);
     bindToTable(filteredRows$: ListModel<Row>, visibleRows$: ListModel<Row>): void;
     addSelectionColumn(selectionModel?: SelectionModel<Row>, showSelectionColumn?: ValueModel<boolean> | boolean): SelectionColumnModel<Row>;

package/lib/components/tables/table/table.component.d.ts

@@ -1,8 +1,9 @@
-import { Injector } from "@angular/core";
+import { Injector, OnInit } from "@angular/core";
 import { ValueModel } from "@coolon/pectin";
 import { AbstractTableModel } from '../abstract-table-model';
 import { AbstractTableComponent } from '../abstract-table.component';
 import { TableFilterModel } from "../filter/table-filter-model";
+import { TableBodyComponent } from "../renderer/table-body/table-body.component";
 import { TableModel } from "./table-model";
 import * as i0 from "@angular/core";
 /**
@@ -65,23 +66,26 @@ import * as i0 from "@angular/core";
  *   }
  * }
  */
-export declare class TableComponent<Row> extends AbstractTableComponent<Row> {
+export declare class TableComponent<Row extends object> extends AbstractTableComponent<Row> implements OnInit {
     accessor tableModel: TableModel<Row>;
     accessor filterModel: TableFilterModel<Row>;
-    accessor enablePaging$: ValueModel<boolean>;
-    accessor enablePaging: boolean;
+    tableBody: TableBodyComponent<Row>;
+    /**
+     * Set to true to scroll mode to classic or virtual (default).  Virtual scrolll performs better for large data sets but clamps the row height.  Classic scroll
+     * renders all rows but allows row heights to grow.
+     */
+    accessor scrollMode$: ValueModel<TableComponent.ScrollMode>;
+    accessor scrollMode: TableComponent.ScrollMode;
     private _footerContentAdded;
     private readonly _filteredRows$;
-    private _pageSize;
-    private pagedListModel;
+    protected readonly tableBodyScrollMode$: ValueModel<TableBodyComponent.ScrollMode>;
     constructor(injector: Injector);
     ngOnInit(): void;
     protected getModel(): AbstractTableModel<Row>;
-    get pageController(): import("@coolon/pectin").PageController;
-    private configurePaging;
-    private disposeOfPagedListModel;
     footerContentChanged($event: any): void;
-    updatePageSize(count: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "aup-table", never, { "tableModel": { "alias": "tableModel"; "required": false; }; "filterModel": { "alias": "filterModel"; "required": false; }; "enablePaging$": { "alias": "enablePaging$"; "required": false; }; "enablePaging": { "alias": "enablePaging"; "required": false; }; }, {}, never, ["[footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "aup-table", never, { "tableModel": { "alias": "tableModel"; "required": false; }; "filterModel": { "alias": "filterModel"; "required": false; }; "scrollMode$": { "alias": "scrollMode$"; "required": false; }; "scrollMode": { "alias": "scrollMode"; "required": false; }; }, {}, never, ["[footer], [slot=footer]"], false, never>;
+}
+export declare namespace TableComponent {
+    type ScrollMode = Omit<TableBodyComponent.ScrollMode, 'none'>;
 }

package/lib/components/tables/table-row-menu/table-row-menu.component.d.ts

@@ -1,4 +1,4 @@
-import { MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { Command } from '@coolon/pectin';
 import { CommandFace } from '../../commands/command-face';
 import { DisposableComponent } from '../../disposable-component';

package/lib/components/tables/tree-table/tree-expansion-model.d.ts

@@ -1,4 +1,4 @@
-import { Disposable, DisposedWith, GarbageCollector, ListModel, ValueModel } from '@coolon/pectin';
+import { Disposable, DisposedWith, GarbageCollector, ListModel } from '@coolon/pectin';
 export declare class TreeExpansionModel<T> extends GarbageCollector {
     private readonly _source$;
     private readonly collapsedIds;
@@ -8,7 +8,7 @@ export declare class TreeExpansionModel<T> extends GarbageCollector {
     bindToTable(source$: ListModel<T>, visibleRows$: ListModel<T>): Disposable;
     get visibleRows$(): ListModel<T>;
     protected identityOf(row: T): any;
-    get isExpandedPredicate$(): ValueModel<(node: T) => boolean>;
+    get isExpandedPredicate$(): import("@coolon/pectin").ValueModel<(node: T) => boolean>;
     expand(node: T): void;
     collapse(node: T): void;
     canExpand(node: T): boolean;

package/lib/components/tables/tree-table/tree-inheritance-icon/tree-inheritance-icon.component.d.ts

@@ -4,7 +4,6 @@ export declare class TreeInheritanceIconComponent<T> {
     type: TreeInheritanceIconComponent.Type | string;
     pixelWidth: number;
     pixelHeight: number;
-    constructor();
     get heightOffset(): number;
     get viewBox(): string;
     hasHead(): boolean;

package/lib/components/tables/tree-table/tree-label-cell-renderer/tree-label-cell-renderer.component.d.ts

@@ -5,7 +5,7 @@ import { CellRenderer } from '../../renderer/cell-renderer';
 import { TreeInheritanceIconComponent } from '../tree-inheritance-icon/tree-inheritance-icon.component';
 import { TreeTableModel } from '../tree-table-model';
 import * as i0 from "@angular/core";
-export declare class TreeLabelCellRendererComponent<T> extends DisposableComponent implements CellRenderer<T>, OnInit {
+export declare class TreeLabelCellRendererComponent<T extends object> extends DisposableComponent implements CellRenderer<T>, OnInit {
     private node$;
     accessor value: T;
     label: string;

package/lib/components/tables/tree-table/tree-label-column-model.d.ts

@@ -1,13 +1,14 @@
 import { ComponentType } from '@angular/cdk/overlay';
 import { Types } from '@coolon/pectin';
 import { ColumnModel } from '../column/column-model';
+import { ColumnOrderManager } from "../column/column-order-manager";
 import { TreeLabelCellRendererComponent } from './tree-label-cell-renderer/tree-label-cell-renderer.component';
 import { TreeTableModel } from './tree-table-model';
-export declare class TreeLabelColumnModel<Row> extends ColumnModel<Row> {
+export declare class TreeLabelColumnModel<Row extends object> extends ColumnModel<Row> {
     readonly expansionModel: TreeTableModel<Row>;
     private labelFactory;
     private iconFactory;
-    constructor(columnId: string, textPropertiesProvider: ColumnModel.TextPropertiesProvider, expansionModel: TreeTableModel<Row>);
+    constructor(columnId: string, order: ColumnOrderManager, textPropertiesProvider: ColumnModel.TextPropertiesProvider, expansionModel: TreeTableModel<Row>);
     pluck<P extends Types.StringValuePropertiesOf<Row>>(property: P): void;
     useLabel(factory: (row: Row) => string): void;
     /**

package/lib/components/tables/tree-table/tree-table-component.d.ts

@@ -1,7 +1,9 @@
-import { Injector } from "@angular/core";
+import { Injector, OnInit } from "@angular/core";
+import { ValueModel } from '@coolon/pectin';
 import { TreeNode } from '@coolon/typescript-utilities';
 import { AbstractTableModel } from '../abstract-table-model';
 import { AbstractTableComponent } from '../abstract-table.component';
+import { TableBodyComponent } from "../renderer/table-body/table-body.component";
 import { TreeExpansionModel } from "./tree-expansion-model";
 import { TreeTableModel } from './tree-table-model';
 import * as i0 from "@angular/core";
@@ -65,9 +67,10 @@ import * as i0 from "@angular/core";
  *   }
  * }
  */
-export declare class TreeTableComponent<T extends TreeNode<T>> extends AbstractTableComponent<T> {
+export declare class TreeTableComponent<T extends TreeNode<T>> extends AbstractTableComponent<T> implements OnInit {
     accessor treeTableModel: TreeTableModel<T>;
     accessor expansionModel: TreeExpansionModel<T>;
+    protected readonly scrollMode$: ValueModel<TableBodyComponent.ScrollMode>;
     constructor(injector: Injector);
     ngOnInit(): void;
     getModel(): AbstractTableModel<T>;

package/lib/components/tables/tree-table/tree-table-model.d.ts

@@ -6,7 +6,7 @@ import { TreeLabelColumnModel } from './tree-label-column-model';
 export type ChildArrayPropertiesOf<T> = {
     [K in keyof T]: T[K] extends T[] ? K : never;
 }[keyof T];
-export declare class TreeTableModel<Row> extends AbstractTableModel<Row> {
+export declare class TreeTableModel<Row extends object> extends AbstractTableModel<Row> {
     private treeExpansionModel;
     private readonly flattenedDataSource;
     readonly childExtractor: (row: Row) => Row[];

package/lib/components/text/markdown/markdown.component.d.ts

@@ -22,7 +22,7 @@ export declare class MarkdownComponent extends DisposableComponent implements On
     accessor content$: ValueModel<string>;
     accessor content: string;
     inline: boolean;
-    constructor(platform: Object, element: ElementRef<HTMLElement>, markdownService: MarkdownService);
+    constructor(platform: object, element: ElementRef<HTMLElement>, markdownService: MarkdownService);
     private extractInnerContent;
     private renderContent;
     static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownComponent, never>;

package/lib/directives/command.directive.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ElementRef, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacyButton as MatButton } from '@angular/material/legacy-button';
-import { MatLegacyMenuItem as MatMenuItem } from '@angular/material/legacy-menu';
+import { MatButton } from '@angular/material/button';
+import { MatMenuItem } from '@angular/material/menu';
 import { Command, GarbageCollector, UnaryCommand } from '@coolon/pectin';
 import * as i0 from "@angular/core";
 export declare class CommandDirective<P = any> extends GarbageCollector implements OnInit, OnDestroy, AfterViewInit {

package/lib/directives/directives.module.d.ts

@@ -7,12 +7,12 @@ import * as i5 from "./garbage-collector.directive";
 import * as i6 from "@angular/common";
 import * as i7 from "@angular/platform-browser/animations";
 import * as i8 from "@angular/forms";
-import * as i9 from "@angular/material/legacy-input";
-import * as i10 from "@angular/material/legacy-form-field";
-import * as i11 from "@angular/material/legacy-select";
-import * as i12 from "@angular/material/legacy-tabs";
+import * as i9 from "@angular/material/input";
+import * as i10 from "@angular/material/form-field";
+import * as i11 from "@angular/material/select";
+import * as i12 from "@angular/material/tabs";
 export declare class DirectivesModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DirectivesModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DirectivesModule, [typeof i1.CommandDirective, typeof i2.FocusBindingDirective, typeof i3.HighlightPipe, typeof i4.HighlightTextModelDirective, typeof i5.GarbageCollectorDirective], [typeof i6.CommonModule, typeof i7.BrowserAnimationsModule, typeof i8.FormsModule, typeof i9.MatLegacyInputModule, typeof i10.MatLegacyFormFieldModule, typeof i11.MatLegacySelectModule, typeof i12.MatLegacyTabsModule], [typeof i1.CommandDirective, typeof i2.FocusBindingDirective, typeof i3.HighlightPipe, typeof i4.HighlightTextModelDirective, typeof i5.GarbageCollectorDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DirectivesModule, [typeof i1.CommandDirective, typeof i2.FocusBindingDirective, typeof i3.HighlightPipe, typeof i4.HighlightTextModelDirective, typeof i5.GarbageCollectorDirective], [typeof i6.CommonModule, typeof i7.BrowserAnimationsModule, typeof i8.FormsModule, typeof i9.MatInputModule, typeof i10.MatFormFieldModule, typeof i11.MatSelectModule, typeof i12.MatTabsModule], [typeof i1.CommandDirective, typeof i2.FocusBindingDirective, typeof i3.HighlightPipe, typeof i4.HighlightTextModelDirective, typeof i5.GarbageCollectorDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DirectivesModule>;
 }

package/lib/directives/exports.d.ts

@@ -9,3 +9,4 @@ export * from "./focus-binding";
 export * from "./garbage-collector.directive";
 export * from "./highlight-text-model.directive";
 export * from "./highlight.pipe";
+export * from "./resize-observer.directive";

package/lib/directives/resize-observer.directive.d.ts

@@ -0,0 +1,16 @@
+import { AfterViewInit, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { ValueModel } from '@coolon/pectin';
+import { DisposableComponent } from '../components/disposable-component';
+import { Bounds } from '../components/types/bounds.class';
+import * as i0 from "@angular/core";
+export declare class ResizeObserverDirective extends DisposableComponent implements AfterViewInit {
+    aupOnResize: EventEmitter<Bounds>;
+    protected readonly elementRef: ElementRef<any>;
+    protected readonly ngZone: NgZone;
+    private _bounds$;
+    ngAfterViewInit(): void;
+    get bounds$(): ValueModel<Bounds>;
+    private _updateBounds;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ResizeObserverDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ResizeObserverDirective, "[aupOnResize]", never, {}, { "aupOnResize": "aupOnResize"; }, never, never, true, never>;
+}

package/lib/interaction/activity-ref.d.ts

@@ -1,4 +1,4 @@
-import { Constructable, Deferred, ValueModel } from '@coolon/pectin';
+import { Constructable, Deferred } from '@coolon/pectin';
 import { Activity } from './activity';
 import { InteractionContext } from './interaction-context';
 export declare class ActivityRef<D, R, E> {
@@ -20,5 +20,5 @@ export declare class ActivityRef<D, R, E> {
     protected finishActivity(resolveOrReject: (deferred: Deferred<R>) => void): void;
     cancel(): void;
     get activityResult(): Promise<R>;
-    get activityBusy(): ValueModel<boolean>;
+    get activityBusy(): import("@coolon/pectin").ValueModel<boolean>;
 }

package/lib/interaction/activity.d.ts

@@ -1,12 +1,12 @@
 import { AfterViewInit, InjectionToken } from "@angular/core";
 import { Command, Disposable, ValueModel } from "@coolon/pectin";
-import { DisposableComponent } from "../components/disposable-component";
+import { LoadableComponent } from "../components/loadable-component";
 import { ActivityActionsComponent } from "./components/activity-actions/activity-actions.component";
 import { InteractionContext } from "./interaction-context";
 import * as i0 from "@angular/core";
 export declare const ACTIVITY_DATA: InjectionToken<any>;
 type OnActivityReadyParams<D, R, E = any> = (activity: Activity<D, R, E>) => void;
-export declare class Activity<D, R, E = any> extends DisposableComponent implements AfterViewInit {
+export declare class Activity<D, R, E = any> extends LoadableComponent implements AfterViewInit {
     readonly activityData: D;
     private readonly activityReadyListeners;
     private readonly _busy$;

package/lib/interaction/components/abstract-confirm-dialog.component.d.ts

@@ -4,6 +4,7 @@ import { AbstractDialogComponent } from './abstract-dialog.component';
 import * as i0 from "@angular/core";
 export declare class AbstractConfirmDialogComponent<D, R, E = any> extends AbstractDialogComponent<D, R, E> {
     readonly cancelFace: CommandFace;
+    confirmClass: string;
     constructor(config: Confirm);
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractConfirmDialogComponent<any, any, any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AbstractConfirmDialogComponent<any, any, any>, "ng-component", never, {}, {}, never, never, false, never>;

package/lib/interaction/components/activity-actions/activity-actions.component.d.ts

@@ -1,4 +1,3 @@
-import { ChangeDetectorRef } from "@angular/core";
 import { Command } from '@coolon/pectin';
 import { Enum } from 'typescript-string-enums';
 import { CommandFace } from '../../../components/commands/command-face';
@@ -27,7 +26,6 @@ import * as i0 from "@angular/core";
  * </aup-activity-actions>
  */
 export declare class ActivityActionsComponent extends DisposableComponent {
-    private readonly cdr;
     protected confirmCommandComponent: CommandComponent;
     protected cancelCommandComponent: CommandComponent;
     /**
@@ -47,7 +45,7 @@ export declare class ActivityActionsComponent extends DisposableComponent {
     set style(style: ActivityActionsComponent.Style);
     layout: ActivityActionsComponent.Layout;
     align: ActivityActionsComponent.Align;
-    constructor(cdr: ChangeDetectorRef);
+    constructor();
     hasConfirmFace(): boolean;
     hasCancelFace(): boolean;
     initCommands(activity: {

package/lib/interaction/components/activity-container/activity-container.component.d.ts

@@ -1,5 +1,5 @@
 import { QueryList } from "@angular/core";
-import { MatLegacyTabGroup as MatTabGroup } from "@angular/material/legacy-tabs";
+import { MatTabGroup } from "@angular/material/tabs";
 import { BooleanValueModelChain, Constructable, DelegatingValueModel, Disposable, MutableValueModel } from "@coolon/pectin";
 import { PlaceRouter } from "../../../place/place-router";
 import { AbstractInteractionContext } from "../../abstract-interaction-context";
@@ -14,6 +14,7 @@ export declare class ActivityContainerComponent<D, R, E> extends AbstractInterac
     tabs: MatTabGroup;
     activityOutlets: QueryList<ActivityOutletComponent<any, any, any>>;
     activityRefs: ActivityRef<any, any, any>[];
+    animationDuration: string;
     private _identifier;
     private _deferredCleanUp;
     private interactionServiceApi;
@@ -26,6 +27,7 @@ export declare class ActivityContainerComponent<D, R, E> extends AbstractInterac
     readonly busy: DelegatingValueModel<boolean>;
     readonly syncTabsJob: () => void;
     readonly stable$: BooleanValueModelChain;
+    private wasActive;
     constructor(placeRouter: PlaceRouter);
     get started$(): import("@coolon/pectin").ValueModel<boolean>;
     get ready$(): import("@coolon/pectin").ValueModel<boolean>;
@@ -61,11 +63,13 @@ export declare class ActivityContainerComponent<D, R, E> extends AbstractInterac
      * Synchronises the selected tab index.
      */
     private synchroniseSelectedTabIndex;
-    private finaliseActivityStates;
+    finaliseActivityStates(): void;
     private getSelectedOutlet;
-    private getTabAnimationDuration;
+    protected getTabAnimationDuration(): string;
+    protected getTabAnimationDurationInMillis(): number;
     getSelectedTabIndex(): number;
     private triggerTabSynchronisation;
+    onAnimationDone(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActivityContainerComponent<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ActivityContainerComponent<any, any, any>, "aup-activity-container", never, { "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActivityContainerComponent<any, any, any>, "aup-activity-container", never, { "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/interaction/components/activity-container/activity-outlet/activity-outlet.component.d.ts

@@ -1,4 +1,4 @@
-import { ComponentFactoryResolver, Injector, OnInit, ViewContainerRef } from '@angular/core';
+import { ComponentFactoryResolver, Injector, ViewContainerRef } from '@angular/core';
 import { Activity } from '../../../activity';
 import { ActivityRef } from '../../../activity-ref';
 import { InteractionContext } from '../../../interaction-context';
@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
  * ActivityOutletComponent creates and displays an activity and delegates the interaction context functionality to an
  * external service.
  */
-export declare class ActivityOutletComponent<D, R, E> implements OnInit {
+export declare class ActivityOutletComponent<D, R, E> {
     private componentFactoryResolver;
     private viewContainerRef;
     private injector;
@@ -17,7 +17,6 @@ export declare class ActivityOutletComponent<D, R, E> implements OnInit {
     set activityRef(activityRef: ActivityRef<D, R, E>);
     get activityRef(): ActivityRef<D, R, E>;
     constructor(componentFactoryResolver: ComponentFactoryResolver, viewContainerRef: ViewContainerRef, injector: Injector);
-    ngOnInit(): void;
     loadActivity(activityRef: ActivityRef<D, R, E>): void;
     get component(): Activity<D, R, E>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActivityOutletComponent<any, any, any>, never>;

package/lib/interaction/components/activity-title/activity-title.component.d.ts

@@ -13,5 +13,5 @@ export declare class ActivityTitleComponent extends DisposableComponent {
     set color(color: ThemePalette);
     get color(): ThemePalette;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActivityTitleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ActivityTitleComponent, "aup-activity-title", never, { "hasTransparentBackground": { "alias": "hasTransparentBackground"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActivityTitleComponent, "aup-activity-title", never, { "hasTransparentBackground": { "alias": "hasTransparentBackground"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*", "[slot='title-end']"], false, never>;
 }

package/lib/interaction/components/editors/edit-context.d.ts

@@ -1,3 +1,3 @@
 export interface EditContext<T> {
-    injectError(error: string): any;
+    injectError(error: string): void;
 }

package/lib/interaction/components/inplace-interaction-context/in-place-interaction-context.component.d.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit } from "@angular/core";
-import { MatLegacyTabChangeEvent as MatTabChangeEvent, MatLegacyTabsConfig as MatTabsConfig } from "@angular/material/legacy-tabs";
+import { AfterViewInit, EventEmitter } from "@angular/core";
+import { MatTabChangeEvent, MatTabsConfig } from "@angular/material/tabs";
 import { Constructable } from "@coolon/pectin";
 import { DisposableComponent } from "../../../components/disposable-component";
 import { Activity } from "../../activity";
@@ -16,7 +16,7 @@ import * as i0 from "@angular/core";
  *   </aup-in-place-interaction-context>
  *
  *   in your component
- *     @ViewChild('inPlaceInteractionContext', { static: true })
+ *     @ViewChild(InPlaceInteractionContextComponent)
  *     interactionContext: InteractionContext;
  *
  *
@@ -35,6 +35,8 @@ export declare class InPlaceInteractionContextComponent<D, R, E> extends Disposa
      * active interactions.
      */
     syncWithRoutes: boolean;
+    started: EventEmitter<void>;
+    finished: EventEmitter<void>;
     get animationDuration(): string;
     get animationDurationMillis(): number;
     get active(): boolean;
@@ -53,5 +55,5 @@ export declare class InPlaceInteractionContextComponent<D, R, E> extends Disposa
     startActivity<D1, R1, E1>(activityType: Constructable<Activity<D1, R1, E1>>, data?: D1, options?: InteractionContext.Options): Promise<R1>;
     onTabChanged($event: MatTabChangeEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InPlaceInteractionContextComponent<any, any, any>, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InPlaceInteractionContextComponent<any, any, any>, "aup-in-place-interaction-context", never, { "animateFirstActivity": { "alias": "animateFirstActivity"; "required": false; }; "syncWithRoutes": { "alias": "syncWithRoutes"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InPlaceInteractionContextComponent<any, any, any>, "aup-in-place-interaction-context", never, { "animateFirstActivity": { "alias": "animateFirstActivity"; "required": false; }; "syncWithRoutes": { "alias": "syncWithRoutes"; "required": false; }; }, { "started": "started"; "finished": "finished"; }, never, ["*"], false, never>;
 }

package/lib/interaction/components/input-activities/string-input-activity.d.ts

@@ -5,6 +5,6 @@ export declare class StringInputActivity extends InputActivity<string> {
     static ɵcmp: i0.ɵɵComponentDeclaration<StringInputActivity, "aup-string-input-activity", never, {}, {}, never, never, false, never>;
 }
 export declare namespace StringInputActivity {
-    interface Data extends InputActivity.Data<String> {
+    interface Data extends InputActivity.Data<string> {
     }
 }

package/lib/interaction/components/slide-down-interaction-context/slide-down-interaction-context.component.d.ts

@@ -0,0 +1,53 @@
+import { AfterViewInit } from "@angular/core";
+import { MatTabsConfig } from "@angular/material/tabs";
+import { Constructable } from "@coolon/pectin";
+import { DisposableComponent } from "../../../components/disposable-component";
+import { Activity } from "../../activity";
+import { Alert } from "../../alert";
+import { Confirm } from "../../confirm";
+import { InPlaceInteractionContext } from "../../in-place-interaction-context";
+import { InteractionContext } from "../../interaction-context";
+import { InteractionService } from "../../services/interaction.service";
+import { ActivityContainerComponent } from "../activity-container/activity-container.component";
+import * as i0 from "@angular/core";
+/**
+ * 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;
+ *
+ *
+ */
+export declare class SlideDownInteractionContextComponent<D, R, E> extends DisposableComponent implements InPlaceInteractionContext, AfterViewInit {
+    private readonly tabConfig;
+    activityContainerComponent: ActivityContainerComponent<any, any, any>;
+    dynamicHeight: boolean;
+    get active(): boolean;
+    protected clampShut: boolean;
+    readonly interactionService: InteractionService;
+    constructor(tabConfig: MatTabsConfig);
+    ngAfterViewInit(): void;
+    getAnimationState(): {
+        value: string;
+        params: {
+            duration: string;
+        };
+    };
+    onInplaceInteractionContextRegistered(id: string, api: InteractionService.Api): void;
+    get identifier(): string;
+    alert(alert: Alert): Promise<void>;
+    cancelActiveActivity(): Promise<boolean>;
+    confirm(confirm: Confirm): Promise<boolean>;
+    confirmOrReject(confirm: Confirm): Promise<void>;
+    confirmThen<D1, R1, E1>(confirm: Confirm, activityType: Constructable<Activity<D1, R1, E1>>, data?: D1): Promise<R1>;
+    confirmThenExecute<R1>(confirm: Confirm, operation: (interactionContext: InteractionContext) => (Promise<R1> | R1)): Promise<R1>;
+    isActive(): boolean;
+    startActivity<D1, R1, E1>(activityType: Constructable<Activity<D1, R1, E1>>, data?: D1, options?: InteractionContext.Options): Promise<R1>;
+    onAnimationDone(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlideDownInteractionContextComponent<any, any, any>, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SlideDownInteractionContextComponent<any, any, any>, "aup-slide-down-interaction-context", never, { "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/interaction/directives/interaction-context-trigger-for.directive.d.ts

@@ -3,7 +3,7 @@ import { Constructable, GarbageCollector } from '@coolon/pectin';
 import { Activity } from '../activity';
 import { InteractionContext } from '../interaction-context';
 import * as i0 from "@angular/core";
-export declare class InteractionContextTriggerFor<D, R, E> extends GarbageCollector {
+export declare class InteractionContextTriggerForDirective<D, R, E> extends GarbageCollector {
     aupInteractionContextTriggerFor: Pick<InteractionContext, 'startActivity' | 'isActive' | 'cancelActiveActivity'>;
     activityClass: Constructable<Activity<D, R, E>>;
     activityData?: D;
@@ -15,6 +15,6 @@ export declare class InteractionContextTriggerFor<D, R, E> extends GarbageCollec
     onClick(event: MouseEvent): void;
     protected startActivity(): void;
     prepareActivityData(): D;
-    static ɵfac: i0.ɵɵFactoryDeclaration<InteractionContextTriggerFor<any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<InteractionContextTriggerFor<any, any, any>, "[aupInteractionContextTriggerFor]", never, { "aupInteractionContextTriggerFor": { "alias": "aupInteractionContextTriggerFor"; "required": false; }; "activityClass": { "alias": "activityClass"; "required": false; }; "activityData": { "alias": "activityData"; "required": false; }; "activityDataFactory": { "alias": "activityDataFactory"; "required": false; }; }, { "activityDone": "activityDone"; "activityCancelled": "activityCancelled"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InteractionContextTriggerForDirective<any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<InteractionContextTriggerForDirective<any, any, any>, "[aupInteractionContextTriggerFor]", never, { "aupInteractionContextTriggerFor": { "alias": "aupInteractionContextTriggerFor"; "required": false; }; "activityClass": { "alias": "activityClass"; "required": false; }; "activityData": { "alias": "activityData"; "required": false; }; "activityDataFactory": { "alias": "activityDataFactory"; "required": false; }; }, { "activityDone": "activityDone"; "activityCancelled": "activityCancelled"; }, never, never, false, never>;
 }