@coolon/angular-ui-powerups 12.4.0-alpha.6 → 12.4.0-alpha.60

package/fesm2015/coolon-angular-ui-powerups.js

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, ViewEncapsulation, HostBinding, InjectionToken, ViewChildren, SkipSelf, EventEmitter, ViewChild, Output, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, Injector, ComponentFactoryResolver } from '@angular/core';
+import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, HostBinding, ViewEncapsulation, InjectionToken, ViewChildren, SkipSelf, EventEmitter, ViewChild, Output, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, Injector, ComponentFactoryResolver } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -16,21 +16,23 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Trace, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Functions } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as _ from 'lodash';
 import ___default from 'lodash';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import { Enum } from 'typescript-string-enums';
-import { assert as assert$1, Stringy, lang as lang$1, Opts, Klass } from '@coolon/typescript-utilities';
+import { lang as lang$1, assert as assert$1, Stringy, Opts, Klass } from '@coolon/typescript-utilities';
 import ResizeObserver from 'resize-observer-polyfill';
 import produce from 'immer';
+import { A11yModule } from '@angular/cdk/a11y';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
@@ -401,7 +403,7 @@ BusyOverlayComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-busy-overlay',
                 template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n",
-                styles: [":host{position:relative}div.busy-overlay-backdrop{position:absolute;background-color:rgba(0,0,0,.2);top:0;left:0;bottom:0;right:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}"]
+                styles: [":host{position:relative}div.busy-overlay-backdrop{position:absolute;background-color:#0003;top:0;left:0;bottom:0;right:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}\n"]
             },] }
 ];
 BusyOverlayComponent.ctorParameters = () => [];
@@ -526,6 +528,30 @@ var CommandFace;
     CommandFace.Adapter = Adapter;
 })(CommandFace || (CommandFace = {}));
 
+class AbstractCardContainerComponent extends DisposableComponent {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+    }
+}
+AbstractCardContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-abstract-card-container',
+                template: ''
+            },] }
+];
+AbstractCardContainerComponent.ctorParameters = () => [];
+AbstractCardContainerComponent.propDecorators = {
+    addCardCommand: [{ type: Input }],
+    addCardFace: [{ type: Input }],
+    addCardTemplate: [{ type: ContentChild, args: ['addCardTemplate',] }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], AbstractCardContainerComponent.prototype, "addCardCommand", void 0);
+
 /**
  * @example
  * // basic usage
@@ -543,6 +569,13 @@ var CommandFace;
  *   <my-card *ngFor="..."></my-card>
  * </aup-card-container>
  *
+ * // use the aup-add-card-activity to display as the new card place holder and to run
+ * // the activity inside teh card
+ * <aup-card-container [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ *   <aup-add-card-activity type="inline" renderAs="card" [face]="i18n.commands.addModal" [activityClass]="AddCardActivity"></aup-add-card-activity>
+ * </aup-card-container>
+ *
  * // adds an add card component using the specified template.  The template
  * // will fill it's container in the grid.
  * <aup-card-container>
@@ -575,35 +608,144 @@ var CommandFace;
  * aup-card-container {
  *   --card-gap: var(--card-gap, 16px);
  *   --card-width: var(--card-width, 300px);
+ *   --card-max-width: auto;
  *   --card-height: var(--card-height, auto);
  *   --card-min-height: var(--card-min-height, auto);
  *   --card-background: var(--card-background, #fcfcfb);
  * }
  */
-class CardContainerComponent extends DisposableComponent {
-    constructor() {
+class CardContainerComponent extends AbstractCardContainerComponent {
+    constructor(elementRef) {
         super();
+        this.elementRef = elementRef;
+        /**
+         * Enable scrolling.  If true the container will have height==0 so you must set it's height explicitly
+         * or place in a layout that will stretch it such as a grid or flex layout.
+         */
+        this.enabledScroll = false;
+    }
+    set columnCount(count) {
+        if (!_.isNil(count) && (!_.isInteger(count) || count < 1)) {
+            lang$1.illegalState('columnCount must be a positive integer or nil');
+        }
+        this._columnCount = count;
+        this.updateColumnCountStyles();
+    }
+    get columnCount() {
+        return this._columnCount;
     }
     ngOnInit() {
+        super.ngOnInit();
+        this.updateColumnCountStyles();
+    }
+    get isAutoColumns() {
+        return _.isNil(this._columnCount);
+    }
+    get isSingleColumn() {
+        return this._columnCount === 1;
+    }
+    updateColumnCountStyles() {
+        const el = this.elementRef.nativeElement;
+        if (_.isNil(this._columnCount)) {
+            el.style.setProperty('--aup-card-container-column-count', '');
+        }
+        else {
+            el.style.setProperty('--aup-card-container-column-count', this._columnCount);
+        }
     }
 }
 CardContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-card-container',
-                template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-                styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,#fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+                template: "<div class=\"header-container\">\n  <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <div class=\"card-container\">\n    <ng-content></ng-content>\n\n    <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n      <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n      <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n    </div>\n\n    <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n      <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n",
+                styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-width: var(--card-width, 300px);--resolved-card-max-width: var(--card-max-width, auto);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns .card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),var(--resolved-card-max-width)));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap))}:host:not(.auto-columns) .card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container,.no-scroll-container{flex:1}.add-card-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"]
             },] }
 ];
-CardContainerComponent.ctorParameters = () => [];
+CardContainerComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
 CardContainerComponent.propDecorators = {
-    addCardCommand: [{ type: Input }],
-    addCardFace: [{ type: Input }],
-    addCardTemplate: [{ type: ContentChild, args: ["addCardTemplate",] }]
+    columnCount: [{ type: Input }],
+    enabledScroll: [{ type: Input }],
+    isAutoColumns: [{ type: HostBinding, args: ['class.auto-columns',] }],
+    isSingleColumn: [{ type: HostBinding, args: ['class.single-column',] }]
 };
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", Command)
-], CardContainerComponent.prototype, "addCardCommand", void 0);
+
+/**
+ * @deprecated deprecated, use `aup-card-container [columnCount]="1"` instead.
+ * @example
+ * // basic usage
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // adds an add button with a the '+' icon to the end of the card list.
+ * <aup-card-stack [addCardCommand]="addCard">
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // adds an add button with the specified face
+ * <aup-card-stack [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // use the aup-add-card-activity to display as the new card place holder and to run
+ * // the activity inside teh card
+ * <aup-card-stack [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ *   <aup-add-card-activity type="inline" renderAs="card" [face]="i18n.commands.addModal" [activityClass]="AddCardActivity"></aup-add-card-activity>
+ * </aup-card-stack>
+ *
+ * // adds an add card component using the specified template.  The template
+ * // will fill it's container in the grid.
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ *   <ng-template #addCardTemplate>
+ *     <div>This is a new card template, it will the the size of the other cards.</div>
+ *   </ng-template>
+ * </aup-card-stack>
+ *
+ * // sing the default new card styles for your template
+ * @import "../../../../assets/styles";
+ * .my-new-card {
+ *   @include aup-card-stack-new-card-style();
+ *   // OR
+ *   @include aup-card-stack-new-card-style(
+ *      $color: rgba(0,0,0,0.54),
+ *      $background-color: rgba(255,255,255,0.8),
+ *      $hover-color: $color,
+ *      $background-hover-color: white
+ *   )
+ * }
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ *   <ng-template #addCardTemplate>
+ *     <div class="my-new-card" >This is a new card template, it will the the size of the other cards.</div>
+ *   </ng-template>
+ * </aup-card-stack>
+ *
+ * // CSS Vars
+ * aup-card-stack {
+ *   --card-gap: var(--card-gap, 16px);
+ *   --card-height: var(--card-height, auto);
+ *   --card-min-height: var(--card-min-height, auto);
+ *   --card-background: var(--card-background, #fcfcfb);
+ * }
+ */
+class CardStackComponent extends AbstractCardContainerComponent {
+    constructor() {
+        super();
+        console.warn('<aup-card-stack></aup-card-stack> is deprecated.  Use <aup-card-container [columnCount]="1"> instead.');
+    }
+}
+CardStackComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-card-stack',
+                template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n</div>\n<div class=\"footer\">\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n  <ng-content select=\"[aup-card-stack-footer]\"></ng-content>\n</div>\n",
+                styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);max-width:100%}.footer{display:flex;flex-direction:column;align-items:stretch;padding:0 var(--resolved-card-gap) var(--resolved-card-gap)}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"]
+            },] }
+];
+CardStackComponent.ctorParameters = () => [];
 
 /**
  * Custom CSS:
@@ -651,7 +793,7 @@ CommandFaceComponent.decorators = [
                 selector: 'aup-command-face',
                 template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}"]
+                styles: ["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}\n"]
             },] }
 ];
 CommandFaceComponent.ctorParameters = () => [];
@@ -740,7 +882,7 @@ CommandComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-command',
                 template: "<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltipModel.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
-                styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}"]
+                styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"]
             },] }
 ];
 CommandComponent.ctorParameters = () => [
@@ -912,10 +1054,22 @@ __decorate([
 var TrackBy;
 (function (TrackBy) {
     TrackBy.byIndex = (index, item) => index;
+    /**
+     * @deprecated use #track(MyType).by("property") instead.
+     * @param property
+     */
     function trackByProperty(property) {
         return (index, item) => item[property];
     }
     TrackBy.trackByProperty = trackByProperty;
+    function track(type) {
+        return {
+            by(property) {
+                return (index, item) => item[property];
+            }
+        };
+    }
+    TrackBy.track = track;
 })(TrackBy || (TrackBy = {}));
 
 class CommandContainer extends GarbageCollector {
@@ -963,7 +1117,7 @@ ToolBarComponent.decorators = [
                 selector: 'aup-tool-bar',
                 template: '<div class="toolbar-content"><ng-content></ng-content></div>',
                 encapsulation: ViewEncapsulation.None,
-                styles: [":host{display:inline-block}.toolbar-content{display:inline-flex;flex-direction:row;align-items:center}.toolbar-content>aup-separator{align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}"]
+                styles: [":host{display:inline-block}.toolbar-content{display:inline-flex;flex-direction:row;align-items:center}.toolbar-content>aup-separator{align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}\n"]
             },] }
 ];
 ToolBarComponent.ctorParameters = () => [];
@@ -1138,7 +1292,7 @@ EmptyStateComponent.decorators = [
           <ng-content></ng-content>
       </div>
   `,
-                styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
+                styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{display:flex;flex-direction:column;align-items:stretch;padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}\n"]
             },] }
 ];
 EmptyStateComponent.ctorParameters = () => [];
@@ -1166,7 +1320,7 @@ FocusContainerComponent.decorators = [
                 providers: [
                     { provide: FocusManager }
                 ],
-                styles: [":host{display:block}"]
+                styles: [":host{display:block}\n"]
             },] }
 ];
 FocusContainerComponent.ctorParameters = () => [
@@ -1222,6 +1376,7 @@ class AbstractInputComponent extends DisposableComponent {
     constructor() {
         super();
         this.onValueEditedListeners = new EventListenerList();
+        this.userFloatLabel = 'always'; // TODO: make this an injectable default
         this.dense = false;
         // TODO: fix this.
         // tslint:disable-next-line:no-output-native
@@ -1482,7 +1637,7 @@ AutocompleteInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-autocomplete-input',
                 template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValueModel.value\"\n         (ngModelChange)=\"updateFilter($event)\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-autocomplete #autocomplete [displayWith]=\"optionLabelFormat\" [autoActiveFirstOption]=\"true\" (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{formatOption(option)}}</mat-option>\n        <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n  </mat-autocomplete>\n\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-                styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+                styles: [":host{display:inline-block}mat-form-field{width:100%}\n"]
             },] }
 ];
 AutocompleteInputComponent.ctorParameters = () => [];
@@ -1518,7 +1673,7 @@ CheckboxInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-checkbox-input',
                 template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
-                styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
+                styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"]
             },] }
 ];
 CheckboxInputComponent.ctorParameters = () => [];
@@ -1546,7 +1701,7 @@ MultipleSelectInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-multiple-select-input',
                 template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"componentListModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-                styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+                styles: [":host{display:inline-block}mat-form-field{width:100%}\n"]
             },] }
 ];
 MultipleSelectInputComponent.ctorParameters = () => [];
@@ -1628,7 +1783,7 @@ SelectInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-select-input',
                 template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"componentValueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-                styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+                styles: [":host{display:inline-block}mat-form-field{width:100%}\n"]
             },] }
 ];
 SelectInputComponent.ctorParameters = () => [];
@@ -1666,7 +1821,7 @@ StringInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-string-input',
                 template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
-                styles: ["button[disabled]{visibility:hidden}"]
+                styles: ["button[disabled]{visibility:hidden}\n"]
             },] }
 ];
 StringInputComponent.ctorParameters = () => [];
@@ -1700,7 +1855,7 @@ TextInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-text-input',
                 template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"componentValueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
-                styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}"]
+                styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}\n"]
             },] }
 ];
 TextInputComponent.ctorParameters = () => [];
@@ -1739,7 +1894,7 @@ IconComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-icon',
                 template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
-                styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center}.faIconWrapper,.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
+                styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}\n"]
             },] }
 ];
 IconComponent.propDecorators = {
@@ -1753,6 +1908,48 @@ IconComponent.propDecorators = {
     });
 })(IconComponent || (IconComponent = {}));
 
+class LoadingContainerComponent extends GarbageCollector {
+    constructor() {
+        super();
+    }
+    get state() {
+        return this.loadingModel.value ? "loaded" : "loading";
+    }
+    ngOnInit() {
+    }
+}
+LoadingContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-loading-container',
+                template: "<ng-content *ngIf=\"!loadingModel.value\"></ng-content>\n<section *ngIf=\"loadingModel.value\" class=\"loading-indicator-overlay\">\n  <div class=\"loading-message\">\n    <p>{{messageModel.value}}</p>\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  </div>\n</section>\n",
+                styles: [":host{display:block;position:relative}section.loading-indicator-overlay{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-message{display:inline-block;text-align:center;width:10em}\n"]
+            },] }
+];
+LoadingContainerComponent.ctorParameters = () => [];
+LoadingContainerComponent.propDecorators = {
+    loadingModel: [{ type: Input }],
+    loading: [{ type: Input }],
+    messageModel: [{ type: Input }],
+    message: [{ type: Input }],
+    state: [{ type: HostBinding, args: ["class",] }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], LoadingContainerComponent.prototype, "loadingModel", void 0);
+__decorate([
+    StoreInValueModel("loadingModel"),
+    __metadata("design:type", Boolean)
+], LoadingContainerComponent.prototype, "loading", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], LoadingContainerComponent.prototype, "messageModel", void 0);
+__decorate([
+    StoreInValueModel("messageModel"),
+    __metadata("design:type", String)
+], LoadingContainerComponent.prototype, "message", void 0);
+
 class NoopComponent {
     constructor() {
     }
@@ -1761,7 +1958,7 @@ NoopComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-noop',
                 template: "",
-                styles: [":host{display:block}"]
+                styles: [":host{display:block}\n"]
             },] }
 ];
 NoopComponent.ctorParameters = () => [];
@@ -1775,14 +1972,18 @@ ScrollContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-scroll-container',
                 template: "<div class=\"container\" cdkScrollable>\n    <ng-content></ng-content>\n</div>\n",
-                styles: [":host{display:flex;flex-direction:column;min-height:0;align-items:stretch}.container{display:flex;flex-direction:column;flex:1;flex-basis:0;overflow-y:scroll;align-items:stretch}"]
+                styles: [":host{display:flex;flex-direction:column;min-height:0;align-items:stretch}.container{display:flex;flex-direction:column;flex:1;flex-basis:0;overflow-y:scroll;align-items:stretch}\n"]
             },] }
 ];
 ScrollContainerComponent.ctorParameters = () => [];
 
-class SectionHeaderComponent {
+class SectionHeaderComponent extends DisposableComponent {
     constructor() {
-        this.underline = false;
+        super();
+        // readonly i18n = I18nMarsUi.components.layout.header;
+        this.size = 'medium';
+        this.borderTop = false;
+        this.borderBottom = false;
     }
     ngOnInit() {
     }
@@ -1790,13 +1991,15 @@ class SectionHeaderComponent {
 SectionHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-section-header',
-                template: "<ng-content></ng-content>\n",
-                styles: [":host{--def-border-bottom-color:var(--border-bottom-color,rgba(0,0,0,0.07));display:block;padding:8px 16px;font-size:12px;line-height:12px;color:rgba(0,0,0,.5)}:host.underline{border-bottom:1px solid var(--def-border-bottom-color)}"]
+                template: "<span class=\"container-start\"><ng-content select=\"[header-start]\"></ng-content><ng-content></ng-content></span>\n<span class=\"container-middle\"><ng-content select=\"[header-center]\"></ng-content></span>\n<span class=\"container-end\"><ng-content select=\"[header-end]\"></ng-content></span>\n",
+                styles: [":host{display:flex;flex-direction:row;align-items:center;--resolved-padding: var(--padding, var(--default-padding));--resolved-padding-right: var(--padding-right, calc(var(--default-padding)/2));padding-left:var(--resolved-padding);padding-right:var(--resolved-padding-right);box-sizing:border-box}:host.has-back-button{padding-left:0}:host.toolbar{height:56px;min-height:56px}:host.toolbar span{font-weight:500;font-size:18px;color:#000000ab}:host.large{height:48px;min-height:48px}:host.large span{font-weight:500;font-size:14px;color:#000000ab}:host.medium{height:48px;min-height:48px}:host.medium span{font-weight:500;font-size:13px;color:#000000ab}:host.small{height:30px;min-height:30px}:host.small span{font-weight:300;font-size:12px;color:#000000ab}:host.border-top{border-top:var(--pinstripe-border)}:host.border-bottom{border-bottom:var(--pinstripe-border)}span{white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center}span.container-start{justify-content:flex-start}span.container-middle{justify-content:center;flex:1;width:0;overflow:hidden}span.container-end{justify-content:flex-end}\n"]
             },] }
 ];
 SectionHeaderComponent.ctorParameters = () => [];
 SectionHeaderComponent.propDecorators = {
-    underline: [{ type: Input }, { type: HostBinding, args: ['class.underline',] }]
+    size: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    borderTop: [{ type: Input }, { type: HostBinding, args: ['class.border-top',] }],
+    borderBottom: [{ type: Input }, { type: HostBinding, args: ['class.border-bottom',] }]
 };
 
 class SwitchCaseOption {
@@ -1901,7 +2104,7 @@ SwitchCaseComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-switch-case',
                 template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n",
-                styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}"]
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}\n"]
             },] }
 ];
 SwitchCaseComponent.ctorParameters = () => [
@@ -2183,7 +2386,7 @@ EditRowControls.decorators = [
     { type: Component, args: [{
                 selector: 'aup-row-editor-controls',
                 template: "<button *ngIf=\"!editSession\" mat-icon-button [pectinCommand]=\"editRowCommand\" class=\"edit-button\"><aup-icon icon=\"mat:edit\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"saveCommand\"><aup-icon icon=\"mat:done\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"cancelCommand\"><aup-icon icon=\"mat:clear\"></aup-icon></button>\n",
-                styles: [":host{display:block;width:80px}.edit-button{visibility:hidden}:host-context(tr:hover) .edit-button{visibility:visible}"]
+                styles: [":host{display:block;width:80px}.edit-button{visibility:hidden}:host-context(tr:hover) .edit-button{visibility:visible}\n"]
             },] }
 ];
 EditRowControls.ctorParameters = () => [];
@@ -2949,12 +3152,16 @@ class AbstractTableModel extends GarbageCollector {
         return this.isRowSelectionEnabled() && column.isRowSelectionEnabled();
     }
     isRowSelectionEnabled() {
-        return this.hasSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
+        return this.hasUserSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
     }
-    hasSelectionModel() {
+    hasUserSelectionModel() {
         var _a;
         return !!((_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel.getDelegate());
     }
+    getSelectionModel() {
+        var _a;
+        return (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel;
+    }
     isHoverEnabled() {
         return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
     }
@@ -3070,7 +3277,7 @@ TableHeaderCellRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-table-header-cell-renderer',
                 template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
-                styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}"]
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}\n"]
             },] }
 ];
 TableHeaderCellRendererComponent.ctorParameters = () => [];
@@ -3216,7 +3423,7 @@ TableComponent.decorators = [
                 providers: [
                     { provide: AbstractTableComponent, useExisting: TableComponent }
                 ],
-                styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}"]
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"]
             },] }
 ];
 TableComponent.ctorParameters = () => [
@@ -3260,7 +3467,7 @@ TreeInheritanceIconComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-tree-inheritance-icon',
                 template: "<svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"pixelWidth\" [attr.height]=\"pixelHeight\" [attr.viewBox]=\"viewBox\">\n  <g fill=\"none\" fill-rule=\"evenodd\">\n    <rect *ngIf=\"hasHead()\"  width=\"1\" height=\"32.5\" x=\"11.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTail()\" width=\"1\" height=\"32.5\" x=\"11.5\" y=\"31.5\" fill=\"currentColor\"/>\n\n    <rect *ngIf=\"hasLeadIn()\" width=\"12\" height=\"1\" y=\"31.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTerminal()\" width=\"12\" height=\"1\" x=\"12\" y=\"31.5\" fill=\"currentColor\"/>\n  </g>\n</svg>\n",
-                styles: [":host{position:relative;color:inherit}svg{color:var(--line-color);display:block}"]
+                styles: [":host{position:relative;color:inherit}svg{color:var(--line-color);display:block}\n"]
             },] }
 ];
 TreeInheritanceIconComponent.ctorParameters = () => [];
@@ -3514,15 +3721,15 @@ class TreeExpansionModel {
 
 class FlattenedTreeListModel extends ComputedListModel {
     constructor(source, childRef, expansionModel) {
-        super(source);
+        super(source, {
+            initialValue: [],
+            identifiedWith: row => source.identityOf(row)
+        });
         this.source = source;
         this.childRef = childRef;
         this.expansionModel = expansionModel;
         this.trackSource(expansionModel.isExpandedPredicate);
     }
-    getIdentityOf(item) {
-        return this.source.identityOf(item);
-    }
     compute(values) {
         const result = [];
         values.forEach(rootNode => {
@@ -3593,6 +3800,7 @@ class TreeTableModel extends AbstractTableModel {
         const childExtractor = _.isFunction(childAccessor) ? childAccessor : row => row[childAccessor];
         this.flattenedDataSource = this.registerDisposable(new FlattenedTreeListModel(source, childExtractor, this.treeExpansionModel));
         this.setDataSource(this.flattenedDataSource);
+        this.addRowClass('aup-node-collapsed', row => this.isCollapsed(row));
     }
     treeControlColumn(builder) {
         const columnId = 'tree-label';
@@ -3703,15 +3911,17 @@ class TreeLabelCellRendererComponent extends DisposableComponent {
         return this.nodeModel.value;
     }
     // @Trace()
-    expandOrCollapse(node) {
+    expandOrCollapse($event, node) {
+        $event.preventDefault();
+        $event.stopPropagation();
         this.expansionModel.isCollapsed(node) ? this.expansionModel.expand(node) : this.expansionModel.collapse(node);
     }
 }
 TreeLabelCellRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-tree-label-cell-renderer',
-                template: "<div class=\"tree-icons\">\n  <aup-tree-inheritance-icon *ngFor=\"let iconClass of iconList.value\" [type]=\"iconClass\"></aup-tree-inheritance-icon>\n  <aup-icon *ngIf=\"iconModel.value\"\n            [icon]=\"iconModel.value\"\n            [class.clickable]=\"canExpand.value || canCollapse.value\"\n            (click)=\"expandOrCollapse(node)\" ></aup-icon>\n</div>\n<div class=\"label\">{{label}}</div>\n",
-                styles: [":host{--line-color:#ddd;--node-color:#999;display:inline-flex;flex-direction:row;align-items:stretch}:host div.label{display:flex;flex-direction:row;align-items:center;white-space:nowrap;padding-left:6px}:host div.tree-icons{display:grid;grid-auto-flow:column;grid-auto-columns:auto;grid-template-rows:1fr;align-items:stretch;justify-content:stretch}:host div.tree-icons aup-icon{align-self:center;color:var(--node-color)}:host div.tree-icons aup-icon.clickable{cursor:pointer}:host div.tree-icons aup-icon,:host div.tree-icons aup-tree-inheritance-icon{margin-left:4px}"]
+                template: "<div class=\"tree-icons\">\n  <aup-tree-inheritance-icon *ngFor=\"let iconClass of iconList.value\" [type]=\"iconClass\"></aup-tree-inheritance-icon>\n  <aup-icon *ngIf=\"iconModel.value\"\n            [icon]=\"iconModel.value\"\n            [class.clickable]=\"canExpand.value || canCollapse.value\"\n            (click)=\"expandOrCollapse($event, node)\" ></aup-icon>\n</div>\n<div class=\"label\">{{label}}</div>\n",
+                styles: [":host{--line-color: #ddd;--node-color: #999;display:inline-flex;flex-direction:row;align-items:stretch}:host div.label{display:flex;flex-direction:row;align-items:center;white-space:nowrap;padding-left:6px}:host div.tree-icons{display:grid;grid-auto-flow:column;grid-auto-columns:auto;grid-template-rows:1fr;align-items:stretch;justify-content:stretch}:host div.tree-icons aup-icon{align-self:center;color:var(--node-color)}:host div.tree-icons aup-icon.clickable{cursor:pointer}:host div.tree-icons aup-tree-inheritance-icon,:host div.tree-icons aup-icon{margin-left:4px}\n"]
             },] }
 ];
 TreeLabelCellRendererComponent.ctorParameters = () => [];
@@ -3728,7 +3938,14 @@ __decorate([
     __metadata("design:type", Object)
 ], TreeLabelCellRendererComponent.prototype, "value", void 0);
 (function (TreeLabelCellRendererComponent) {
-    TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY = (node, expanded, defaultIcon) => expanded ? 'mat:expand_more' : 'mat:chevron_right';
+    TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY = (node, expanded, defaultIcon) => {
+        const isLeaf = DecoratedTreeNode.getDecorator(node).isLeaf();
+        return isLeaf ?
+            undefined :
+            expanded ?
+                'mat:expand_more' :
+                'mat:chevron_right';
+    };
 })(TreeLabelCellRendererComponent || (TreeLabelCellRendererComponent = {}));
 
 /**
@@ -3806,7 +4023,7 @@ TreeTableComponent.decorators = [
                 providers: [
                     { provide: AbstractTableComponent, useExisting: TreeTableComponent }
                 ],
-                styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}", "td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n", "td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label,td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}\n"]
             },] }
 ];
 TreeTableComponent.ctorParameters = () => [
@@ -3860,7 +4077,7 @@ VerticalFocusContainerComponent.decorators = [
                 providers: [
                     { provide: FocusManager }
                 ],
-                styles: [":host{display:block}"]
+                styles: [":host{display:block}\n"]
             },] }
 ];
 VerticalFocusContainerComponent.ctorParameters = () => [
@@ -3906,7 +4123,7 @@ PaginatorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-paginator',
                 template: "<p>Page {{pageNumber}} of {{totalPages}}</p>\n<button mat-icon-button [pectinCommand]=\"previousCommand\"><aup-icon icon=\"mat:keyboard_arrow_left\"></aup-icon></button>\n<button mat-icon-button [pectinCommand]=\"nextCommand\"><aup-icon icon=\"mat:keyboard_arrow_right\"></aup-icon></button>\n\n",
-                styles: [":host{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px;padding:0 8px;color:rgba(0,0,0,.6)}:host p{color:inherit;margin-right:8px}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}"]
+                styles: [":host{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px;padding:0 8px;color:#0009}:host p{color:inherit;margin-right:8px}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}\n"]
             },] }
 ];
 PaginatorComponent.ctorParameters = () => [];
@@ -3918,6 +4135,26 @@ __decorate([
     __metadata("design:type", PageController)
 ], PaginatorComponent.prototype, "pageController", void 0);
 
+class LabelledValueComponent extends DisposableComponent {
+    constructor() {
+        super();
+        // const {chain} = Dsl.disposeWith(this);
+    }
+    ngOnInit() {
+    }
+}
+LabelledValueComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-labelled-value',
+                template: "<label>{{label}}</label>\n<ng-content></ng-content>\n",
+                styles: [":host{display:inline-flex;flex-direction:column;align-items:flex-start}label{font-weight:400;font-size:12px;color:#00000091;margin-bottom:6px;white-space:nowrap}\n"]
+            },] }
+];
+LabelledValueComponent.ctorParameters = () => [];
+LabelledValueComponent.propDecorators = {
+    label: [{ type: Input }]
+};
+
 class ComponentsModule {
     constructor(faIconLibrary) {
         faIconLibrary.addIconPacks(fas);
@@ -3925,6 +4162,29 @@ class ComponentsModule {
 }
 ComponentsModule.decorators = [
     { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    BrowserAnimationsModule,
+                    FormsModule,
+                    MatInputModule,
+                    MatFormFieldModule,
+                    MatSelectModule,
+                    MatTabsModule,
+                    DirectivesModule,
+                    MatIconModule,
+                    MatButtonModule,
+                    MatCheckboxModule,
+                    MatTableModule,
+                    PortalModule,
+                    CdkScrollableModule,
+                    FontAwesomeModule,
+                    MatTooltipModule,
+                    MatAutocompleteModule,
+                    MatMenuModule,
+                    MatDividerModule,
+                    MatProgressSpinnerModule,
+                    MatProgressBarModule
+                ],
                 declarations: [
                     AbstractInputComponent,
                     AbstractValueInputComponent,
@@ -3973,29 +4233,11 @@ ComponentsModule.decorators = [
                     BusyOverlayComponent,
                     EmptyStateComponent,
                     PaginatorComponent,
-                    AbstractTableComponent
-                ],
-                imports: [
-                    CommonModule,
-                    BrowserAnimationsModule,
-                    FormsModule,
-                    MatInputModule,
-                    MatFormFieldModule,
-                    MatSelectModule,
-                    MatTabsModule,
-                    DirectivesModule,
-                    MatIconModule,
-                    MatButtonModule,
-                    MatCheckboxModule,
-                    MatTableModule,
-                    PortalModule,
-                    CdkScrollableModule,
-                    FontAwesomeModule,
-                    MatTooltipModule,
-                    MatAutocompleteModule,
-                    MatMenuModule,
-                    MatDividerModule,
-                    MatProgressSpinnerModule
+                    AbstractTableComponent,
+                    AbstractCardContainerComponent,
+                    CardStackComponent,
+                    LabelledValueComponent,
+                    LoadingContainerComponent
                 ],
                 exports: [
                     NumberInputComponent,
@@ -4032,6 +4274,9 @@ ComponentsModule.decorators = [
                     BusyOverlayComponent,
                     EmptyStateComponent,
                     PaginatorComponent,
+                    CardStackComponent,
+                    LabelledValueComponent,
+                    LoadingContainerComponent,
                 ],
                 providers: [
                     FocusBindingFactory
@@ -4067,7 +4312,8 @@ class ActivityActionsComponent extends DisposableComponent {
     constructor(cdr) {
         super();
         this.cdr = cdr;
-        this.align = 'stretch';
+        this.layout = ActivityActionsComponent.Layout.BLOCK;
+        this.align = ActivityActionsComponent.Align.STRETCH;
     }
     set faces(faces) {
         this.confirmFace = faces.confirm;
@@ -4079,12 +4325,6 @@ class ActivityActionsComponent extends DisposableComponent {
     set style(style) {
         this.faces = style;
     }
-    get alignEnd() {
-        return this.align === 'end';
-    }
-    get alignStretch() {
-        return this.align === 'stretch';
-    }
     ngOnInit() {
     }
     hasConfirmFace() {
@@ -4103,7 +4343,7 @@ ActivityActionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-activity-actions',
                 template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n",
-                styles: [":host{display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}"]
+                styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"]
             },] }
 ];
 ActivityActionsComponent.ctorParameters = () => [
@@ -4116,9 +4356,8 @@ ActivityActionsComponent.propDecorators = {
     confirmFace: [{ type: Input }],
     cancelFace: [{ type: Input }],
     style: [{ type: Input }],
-    align: [{ type: Input }],
-    alignEnd: [{ type: HostBinding, args: ['class.align-end',] }],
-    alignStretch: [{ type: HostBinding, args: ['class.align-stretch',] }]
+    layout: [{ type: Input }, { type: HostBinding, args: ['attr.layout',] }],
+    align: [{ type: Input }, { type: HostBinding, args: ['attr.align',] }]
 };
 __decorate([
     TrackExternal(),
@@ -4128,6 +4367,17 @@ __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
 ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+(function (ActivityActionsComponent) {
+    ActivityActionsComponent.Layout = Enum({
+        INLINE: 'inline',
+        BLOCK: 'block'
+    });
+    ActivityActionsComponent.Align = Enum({
+        START: 'start',
+        END: 'end',
+        STRETCH: 'stretch'
+    });
+})(ActivityActionsComponent || (ActivityActionsComponent = {}));
 
 const ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
 class Activity extends DisposableComponent {
@@ -4223,7 +4473,7 @@ AlertDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-alert-dialog',
                 template: "<aup-activity-title *ngIf=\"alert.title\">{{alert.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n",
-                styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
+                styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"]
             },] }
 ];
 AlertDialogComponent.ctorParameters = () => [
@@ -4268,7 +4518,7 @@ ConfirmThenDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-confirmation-dialog',
                 template: "<aup-activity-title *ngIf=\"confirm.title\" [color]=\"titleColor\">{{confirm.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n",
-                styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
+                styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"]
             },] }
 ];
 ConfirmThenDialogComponent.ctorParameters = () => [
@@ -4308,7 +4558,7 @@ ConfirmationDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-confirmation-dialog',
                 template: "<aup-activity-title *ngIf=\"confirm.title\" [color]=\"titleColor\">{{confirm.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n",
-                styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
+                styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"]
             },] }
 ];
 ConfirmationDialogComponent.ctorParameters = () => [
@@ -4450,7 +4700,7 @@ ActivityOutletComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-activity-outlet',
                 template: '',
-                styles: [":host{display:block}"]
+                styles: [":host{display:block}\n"]
             },] }
 ];
 ActivityOutletComponent.ctorParameters = () => [
@@ -4646,8 +4896,8 @@ class ActivityContainerComponent extends AbstractInteractionContext {
 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 [busyModel]=\"busy\">\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}aup-busy-overlay,mat-tab-group{flex:1}"]
+                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 [busyModel]=\"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}\n"]
             },] }
 ];
 ActivityContainerComponent.ctorParameters = () => [];
@@ -4700,7 +4950,7 @@ ActivityTitleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-activity-title',
                 template: "<ng-content></ng-content>\n",
-                styles: [":host{display:block}"]
+                styles: [":host{display:block}\n"]
             },] }
 ];
 ActivityTitleComponent.propDecorators = {
@@ -4725,6 +4975,9 @@ class AbstractActivityTriggerComponent extends DisposableComponent {
             });
         });
     }
+    get interactionContext() {
+        return lang$1.abstractMethod(this.constructor);
+    }
     ngOnInit() {
     }
     get isActive() {
@@ -4946,14 +5199,17 @@ InteractionService.ctorParameters = () => [
 class ModalActivityTriggerComponent extends AbstractActivityTriggerComponent {
     constructor(interactionService) {
         super();
-        this.interactionContext = interactionService.createModalInteractionContextDisposedWith(this);
+        this._interactionContext = interactionService.createModalInteractionContextDisposedWith(this);
+    }
+    get interactionContext() {
+        return this._interactionContext;
     }
 }
 ModalActivityTriggerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-modal-activity-trigger',
                 template: "<aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n",
-                styles: [":host{display:inline-block}"]
+                styles: [":host{display:inline-block}\n"]
             },] }
 ];
 ModalActivityTriggerComponent.ctorParameters = () => [
@@ -4986,6 +5242,9 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
         var _a;
         return this.animateFirstActivity ? (((_a = this.tabConfig) === null || _a === void 0 ? void 0 : _a.animationDuration) || '500ms') : '0ms';
     }
+    get active() {
+        return this.isActive();
+    }
     ngAfterViewInit() {
         this.interactionService.registerInplaceInteractionContext(this);
     }
@@ -5021,7 +5280,7 @@ InPlaceInteractionContextComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-in-place-interaction-context',
                 template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\" [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}"]
+                styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}\n"]
             },] }
 ];
 InPlaceInteractionContextComponent.ctorParameters = () => [
@@ -5030,8 +5289,80 @@ InPlaceInteractionContextComponent.ctorParameters = () => [
 ];
 InPlaceInteractionContextComponent.propDecorators = {
     activityContainerComponent: [{ type: ViewChild, args: ['activityContainer', { static: true },] }],
-    animateFirstActivity: [{ type: Input }]
+    animateFirstActivity: [{ type: Input }],
+    active: [{ type: HostBinding, args: ["class.active",] }]
+};
+
+/**
+ *
+ */
+class AddCardActivityComponent extends AbstractActivityTriggerComponent {
+    constructor(interactionService) {
+        super();
+        this.interactionStyle = AddCardActivityComponent.InteractionType.MODAL;
+        this.renderAs = AddCardActivityComponent.RenderAs.CARD;
+        this.notCard = true;
+        const { chain } = Dsl.disposeWith(this);
+        this.modalInteractionContext = interactionService.createModalInteractionContextDisposedWith(this);
+        this.faceList = chain(this.faceModel).mapToList(face => [face]);
+    }
+    get renderAsClass() {
+        return `render-as-${this.renderAs}`;
+    }
+    get activityTypeClass() {
+        return `${this.interactionStyle}-activity`;
+    }
+    isRenderAsCard() {
+        return this.renderAs === 'card';
+    }
+    isRenderAsButton() {
+        return this.renderAs === 'button';
+    }
+    ngOnInit() {
+    }
+    get interactionContext() {
+        switch (this.interactionStyle) {
+            case 'inline':
+                return this.inlineInteractionContext;
+            default:
+                return this.modalInteractionContext;
+        }
+    }
+    isModal() {
+        return this.interactionStyle === 'modal';
+    }
+    isInline() {
+        return this.interactionStyle === 'inline';
+    }
+}
+AddCardActivityComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-add-card-activity',
+                template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\" [pectinCommand]=\"startActivityCommand\">\n  <aup-command *ngIf=\"isRenderAsButton()\" [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n  <section *ngIf=\"isRenderAsCard()\" class=\"face-wrapper\">\n    <aup-command-face class=\"mat-button\" [faces]=\"faceList.value\"></aup-command-face>\n  </section>\n</aup-in-place-interaction-context>\n",
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch;background-color:#fff}:host[interactionStyle=inline][renderas=card]:not(.active){transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}:host[interactionStyle=inline][renderas=card]:not(.active):hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=inline][renderas=card]:not(.active):hover{border-color:transparent;background-color:#fff;color:#0000008a}:host[interactionStyle=modal][renderas=card]{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}:host[interactionStyle=modal][renderas=card]:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=modal][renderas=card]:hover{border-color:transparent;background-color:#fff;color:#0000008a}:host-context(aup-card-container)[renderas=button]{align-self:start}section.face-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}aup-in-place-interaction-context{flex:1}aup-in-place-interaction-context.active{border:3px solid #6273c7;border-radius:4px;overflow:hidden}\n"]
+            },] }
+];
+AddCardActivityComponent.ctorParameters = () => [
+    { type: InteractionService }
+];
+AddCardActivityComponent.propDecorators = {
+    inlineInteractionContext: [{ type: ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }],
+    interactionStyle: [{ type: Input }],
+    renderAs: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    notCard: [{ type: HostBinding, args: ['class.not-card',] }],
+    renderAsClass: [{ type: HostBinding, args: ['class',] }],
+    activityTypeClass: [{ type: HostBinding, args: ['class',] }]
 };
+(function (AddCardActivityComponent) {
+    AddCardActivityComponent.InteractionType = Enum({
+        MODAL: 'modal',
+        INLINE: 'inline'
+    });
+    AddCardActivityComponent.RenderAs = Enum({
+        CARD: 'card',
+        BUTTON: 'button'
+    });
+})(AddCardActivityComponent || (AddCardActivityComponent = {}));
 
 /**
  * Css Vars.
@@ -5071,7 +5402,7 @@ AddItemInteractionContextComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-add-item-interaction-context',
                 template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><aup-icon [icon]=\"icon\"></aup-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n",
-                styles: [":host{--def-link-color:var(--link-color,currentColor);--def-link-color-hover:var(--link-color-hover,currentColor);--def-link-background:var(--link-background,transparent);--def-link-background-hover:var(--link-background-hover,rgba(0,0,0,0.05));--def-link-border-radius:var(--link-border-radius,4px);--def-link-padding:var(--link-padding,calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:none}:host:hover a.link{color:var(--def-link-color-hover);background-color:var(--def-link-background-hover)}a.link,aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;color:var(--def-link-color);background:var(--def-link-background);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}"]
+                styles: [":host{--def-link-color: var(--link-color, currentColor);--def-link-color-hover: var(--link-color-hover, currentColor);--def-link-background: var(--link-background, transparent);--def-link-background-hover: var(--link-background-hover, rgba(0, 0, 0, .05));--def-link-border-radius: var(--link-border-radius, 4px);--def-link-padding: var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:none}:host:hover a.link{color:var(--def-link-color-hover);background-color:var(--def-link-background-hover)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-background);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}\n"]
             },] }
 ];
 AddItemInteractionContextComponent.ctorParameters = () => [];
@@ -5094,17 +5425,20 @@ class InlineActivityTriggerComponent extends AbstractActivityTriggerComponent {
     constructor() {
         super();
     }
+    get interactionContext() {
+        return this._interactionContext;
+    }
 }
 InlineActivityTriggerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-inline-activity-trigger',
                 template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-in-place-interaction-context>\n",
-                styles: [":host{display:inline-block}"]
+                styles: [":host{display:inline-block}\n"]
             },] }
 ];
 InlineActivityTriggerComponent.ctorParameters = () => [];
 InlineActivityTriggerComponent.propDecorators = {
-    interactionContext: [{ type: ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
+    _interactionContext: [{ type: ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
 };
 
 /**
@@ -5135,6 +5469,7 @@ class PopupInteractionContextComponent extends DisposableComponent {
         const self = this;
         const overlayRef = this._overlay.create({
             hasBackdrop: false,
+            disposeOnNavigation: true,
             panelClass: 'aup-popup-interaction-panel',
             positionStrategy: this._overlay.position()
                 .flexibleConnectedTo(this._element)
@@ -5189,7 +5524,7 @@ PopupInteractionContextComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-popup-interaction-context',
                 template: "<ng-content></ng-content>\n",
-                styles: [":host{display:inline-block}:host.interaction-active{background:rgba(0,0,0,.05)}"]
+                styles: [":host{display:inline-block}:host.interaction-active{background:rgba(0,0,0,.05)}\n"]
             },] }
 ];
 PopupInteractionContextComponent.ctorParameters = () => [
@@ -5265,44 +5600,93 @@ InteractionContextTriggerFor.propDecorators = {
 // @see https://github.com/ng-packagr/ng-packagr/issues/641 and  https://github.com/angular/angular/issues/21123
 // we're getting a metadata error for D for no reason that I can find and only during the build (ng serve works fine)
 // @dynamic
-class AbstractInputActivity extends Activity {
+class InputActivity extends Activity {
     constructor(data) {
+        var _a, _b;
         super();
         this.data = data;
         this.class = 'aup-input-activity';
         const form = new DirtyTrackingForm();
         this.valueModel = form.valueModel(this.data.initialValue);
         this.valueModel.validateUsing(data.validators || []);
-        this.confirmCommand = Command.create(() => {
+        // TODO: move to global configuration
+        this.confirmFace = (_a = data.confirmFace) !== null && _a !== void 0 ? _a : {
+            icon: () => 'mat:check'
+        };
+        this.cancelFace = (_b = data.cancelFace) !== null && _b !== void 0 ? _b : {
+            icon: () => 'mat:clear'
+        };
+        this.confirmCommand = Command.create(() => __awaiter(this, void 0, void 0, function* () {
             if (this.valueModel.validate()) {
                 if (data.save) {
-                    return Promise.resolve(data.save(this.valueModel, this.interactionContext))
-                        .then(() => this.done());
+                    const self = this;
+                    try {
+                        let allGood = true;
+                        const result = yield data.save(this.valueModel.value, {
+                            injectError(error) {
+                                allGood = false;
+                                self.valueModel.injectErrors([error]);
+                            }
+                        });
+                        if (allGood) {
+                            this.done(this.valueModel.value);
+                        }
+                    }
+                    catch (e) {
+                        console.error(e);
+                    }
                 }
                 else {
                     this.done(this.valueModel.value);
                 }
             }
-        });
+        }));
         this.cancelCommand = Command.create(() => {
             this.cancel();
         });
+        this.busyWhile(this.confirmCommand.busy);
+    }
+    get layout() {
+        var _a, _b;
+        return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.layout) !== null && _b !== void 0 ? _b : InputActivity.Layout.BLOCK;
     }
     onActivityReady() {
         this.valueModel.focusContext.requestFocus();
     }
+    get additionalCssClassName() {
+        var _a;
+        return (_a = this.data.cssClassName) !== null && _a !== void 0 ? _a : '';
+    }
+    onEscape() {
+        if (this.shouldCancelOnEscape() && this.cancelCommand.enabled.value) {
+            this.cancelCommand.execute();
+        }
+    }
+    shouldCancelOnEscape() {
+        return _.isNil(this.data.cancelOnEscape) // we default to true..
+            || this.data.cancelOnEscape;
+    }
 }
-AbstractInputActivity.decorators = [
+InputActivity.decorators = [
     { type: Component, args: [{ template: `` },] }
 ];
-AbstractInputActivity.ctorParameters = () => [
+InputActivity.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
 ];
-AbstractInputActivity.propDecorators = {
-    class: [{ type: HostBinding, args: ['class',] }]
+InputActivity.propDecorators = {
+    class: [{ type: HostBinding, args: ['class',] }],
+    layout: [{ type: Input }, { type: HostBinding, args: ['attr.layout',] }],
+    additionalCssClassName: [{ type: HostBinding, args: ["class",] }],
+    onEscape: [{ type: HostListener, args: ['keydown.escape',] }]
 };
+(function (InputActivity) {
+    InputActivity.Layout = Enum({
+        INLINE: 'inline',
+        BLOCK: 'block'
+    });
+})(InputActivity || (InputActivity = {}));
 
-class StringInputActivity extends AbstractInputActivity {
+class StringInputActivity extends InputActivity {
 }
 StringInputActivity.decorators = [
     { type: Component, args: [{
@@ -5313,13 +5697,15 @@ StringInputActivity.decorators = [
                       [placeholder]="data.placeholder"
                       [command.enter]="confirmCommand"
                       [command.escape]="cancelCommand"></aup-string-input>
-    <aup-activity-actions align="end"
-                          [faces]="data.buttonStyle"></aup-activity-actions>
+    <aup-activity-actions [layout]="layout" align="end"
+                          [confirmFace]="confirmFace"
+                          [cancelFace]="cancelFace"
+    ></aup-activity-actions>
   `
             },] }
 ];
 
-class SelectInputActivity extends AbstractInputActivity {
+class SelectInputActivity extends InputActivity {
     constructor() {
         super(...arguments);
         this.defaultOptionLabelFormat = (option) => {
@@ -5347,7 +5733,9 @@ SelectInputActivity.decorators = [
                       [options]="options"
                       [optionLabelFormat]="optionLabelFormat"
     ></aup-select-input>
-    <aup-activity-actions align="end" [faces]="data.buttonStyle"
+    <aup-activity-actions [layout]="layout" align="end"
+                          [confirmFace]="confirmFace"
+                          [cancelFace]="cancelFace"
     ></aup-activity-actions>
   `
             },] }
@@ -5453,32 +5841,6 @@ class TableModel extends AbstractTableModel {
     }
 }
 
-class SelfAndDescendantsVisitor {
-    constructor() {
-    }
-    visit(it) {
-        this.onVisit(it);
-        if (this.shouldVisitChildrenOf(it)) {
-            it.visitChildren(this);
-        }
-    }
-    shouldVisitChildrenOf(it) {
-        return true;
-    }
-}
-(function (SelfAndDescendantsVisitor) {
-    class Each extends SelfAndDescendantsVisitor {
-        constructor(callback) {
-            super();
-            this.callback = callback;
-        }
-        onVisit(it) {
-            this.callback(it);
-        }
-    }
-    SelfAndDescendantsVisitor.Each = Each;
-})(SelfAndDescendantsVisitor || (SelfAndDescendantsVisitor = {}));
-
 /**
  * @file Automatically generated by barrelsby.
  */
@@ -5489,21 +5851,223 @@ class PopupActivityTriggerComponent extends AbstractActivityTriggerComponent {
         this.anchorX = 'start';
         this.anchorY = 'bottom';
     }
+    get interactionContext() {
+        return this._interactionContext;
+    }
 }
 PopupActivityTriggerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-popup-activity-trigger',
                 template: "<aup-popup-interaction-context [anchorX]=\"anchorX\" [anchorY]=\"anchorY\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-popup-interaction-context>\n",
-                styles: [":host{display:inline-block}"]
+                styles: [":host{display:inline-block}\n"]
             },] }
 ];
 PopupActivityTriggerComponent.ctorParameters = () => [];
 PopupActivityTriggerComponent.propDecorators = {
     anchorX: [{ type: Input }],
     anchorY: [{ type: Input }],
-    interactionContext: [{ type: ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
+    _interactionContext: [{ type: ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
 };
 
+class InlineEditorModel extends GarbageCollector {
+    constructor(valueModel, saveCallback) {
+        super();
+        this.valueModel = valueModel;
+        this.saveCallback = saveCallback;
+        this.editing = new MutableValueModel(false);
+        this._validators = new MutableListModel();
+        this._editingEnabled = this.registerDisposable(new DelegatingValueModel().withDefault(true));
+        assert.notNil(valueModel);
+        const { when } = Dsl.disposeWith(this);
+        when(this.editingEnabled).becomesFalsey(() => this.cancelEdit());
+    }
+    get editingEnabled() {
+        return this._editingEnabled.readonly;
+    }
+    disableWhile(condition) {
+        const { chain } = Dsl.disposeWith(this);
+        this.enableWhile(chain(condition).isFalsey());
+        return this;
+    }
+    enableWhile(condition) {
+        this._editingEnabled.setDelegate(condition);
+        return this;
+    }
+    get validators() {
+        return this._validators.readonly;
+    }
+    validateUsing(validator) {
+        this._validators.push(validator);
+        return this;
+    }
+    isEditing() {
+        return this.editing.value;
+    }
+    cancelEdit() {
+        this.editing.value = false;
+    }
+    startEditing() {
+        this.editing.value = true;
+    }
+}
+(function (InlineEditorModel) {
+    function create(valueModel, options) {
+        return new InlineEditorModel(valueModel, options.save);
+    }
+    InlineEditorModel.create = create;
+})(InlineEditorModel || (InlineEditorModel = {}));
+TrackExternal.oneTimeBinding(InlineEditorModel);
+
+/**
+ * @example
+ * const source: ValueModel<string> = ...;
+ * const model = InlineEditorModel.create(source, {
+ *   save(updated:string, context: EditContext) => {
+ *      try {
+ *        try and save the thing...
+ *      } catch(error) {
+ *        context.injectError(error)
+ *      }
+ * }).validateUsing(Validator.present("We'll need a value");
+ *
+ * # in the view
+ * <aup-inline-string-editor
+ *       label="My field"
+ *       placeHolder="I'm ready for a string..."
+ *       [editorModel]="model"></aup-inline-string-editor>
+ */
+class InlineStringEditorComponent extends DisposableComponent {
+    constructor(interactionService) {
+        super();
+        this.editingEnabled = this.registerDisposable(new DelegatingValueModel());
+        const { chain, when, valueOf } = Dsl.disposeWith(this);
+        const modalIC = interactionService.createModalInteractionContextDisposedWith(this);
+        const resolvedFacesModel = chain(this.facesModel).map(userFaces => {
+            return Object.assign(Object.assign({}, InlineStringEditorComponent.DEFAULT_FACES), userFaces);
+        }, { allowNil: true });
+        this.editFaceModel = resolvedFacesModel.pluck('edit');
+        this.saveFace = resolvedFacesModel.pluck('save');
+        this.cancelFace = resolvedFacesModel.pluck('cancel');
+        const self = this;
+        this.editCommand = Command.create(() => __awaiter(this, void 0, void 0, function* () {
+            this.editorModel.editing.value = true;
+            try {
+                yield this.interactionContext.startActivity(StringInputActivity, this.createInputActivityData());
+            }
+            catch (e) {
+                // don't care if they cancelled, just hiding the console errors
+            }
+            finally {
+                this.editorModel.editing.value = false;
+            }
+        })).enableWhile(this.editingEnabled);
+        this.onDispose(() => this.cancelEdit());
+    }
+    ngOnInit() {
+        // our editor model is a one time binding without delegates so we can only
+        // use it once we've been initialised
+        const { chain, when, valueOf } = Dsl.disposeWith(this);
+        if (!this.editorModel) {
+            lang$1.illegalState('editorModel is required');
+        }
+        this.editingEnabled.setDelegate(this.editorModel.editingEnabled);
+        when(this.editorModel.editing).becomesTruthy(() => {
+            this.editCommand.execute();
+        }, { asLongAs: this.editCommand.enabled });
+        when(this.editorModel.editing).becomesFalsey(() => this.cancelEdit());
+        this.empty = valueOf.any(chain.stringValue(this.editorModel.valueModel).isBlank()
+        // deviceDescription.isNil()
+        ).areTruthy();
+        this.displayValue = chain(this.editorModel.valueModel).map(v => {
+            return _.isEmpty(v) ? this.placeHolderModel.value : v;
+        }, { dependsOn: this.placeHolderModel, allowNil: true });
+    }
+    createInputActivityData() {
+        const self = this;
+        return {
+            initialValue: self.editorModel.valueModel.value,
+            confirmFace: self.saveFace.value,
+            cancelFace: self.cancelFace.value,
+            placeholder: self.placeHolderModel.value,
+            label: self.label,
+            layout: InputActivity.Layout.INLINE,
+            validators: self.editorModel.validators.value,
+            save(value, inputContext) {
+                return __awaiter(this, void 0, void 0, function* () {
+                    yield self.editorModel.saveCallback(value, inputContext);
+                });
+            }
+        };
+    }
+    cancelEdit() {
+        if (this.isEditing()) {
+            this.interactionContext.cancelActiveActivity();
+        }
+    }
+    startEdit() {
+        if (!this.isEditing() && this.editCommand.enabled.value) {
+            this.editCommand.execute();
+        }
+    }
+    isEditing() {
+        return this.interactionContext.isActive();
+    }
+    isEmpty() {
+        return this.empty.value;
+    }
+}
+InlineStringEditorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-inline-string-editor',
+                template: "<div class=\"container\" *ngIf=\"!editorModel.isEditing()\">\n  <mat-form-field appearance=\"standard\" floatLabel=\"always\" (click)=\"startEdit()\"\n                  [class.editable]=\"editingEnabled.value\" [class.empty]=\"isEmpty()\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input matInput\n           placeholder=\"{{placeHolder}}\"\n           [ngModel]=\"editorModel.valueModel.value\"\n           [disabled]=\"true\"\n    >\n    <!--    <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>-->\n    <!--    <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>-->\n    <!--    <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>-->\n  </mat-form-field>\n  <aup-command *ngIf=\"editCommand.enabled.value\" [command]=\"editCommand\" [faceModel]=\"editFaceModel\"></aup-command>\n</div>\n<aup-in-place-interaction-context [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n"
+            },] }
+];
+InlineStringEditorComponent.ctorParameters = () => [
+    { type: InteractionService }
+];
+InlineStringEditorComponent.propDecorators = {
+    editorModel: [{ type: Input }],
+    facesModel: [{ type: Input }],
+    faces: [{ type: Input }],
+    interactionContext: [{ type: ViewChild, args: [InPlaceInteractionContextComponent,] }],
+    label: [{ type: Input }],
+    placeHolder: [{ type: Input }],
+    placeHolderModel: [{ type: Input }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", InlineEditorModel)
+], InlineStringEditorComponent.prototype, "editorModel", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], InlineStringEditorComponent.prototype, "facesModel", void 0);
+__decorate([
+    StoreInValueModel('facesModel'),
+    __metadata("design:type", Object)
+], InlineStringEditorComponent.prototype, "faces", void 0);
+__decorate([
+    StoreInValueModel('placeHolderModel'),
+    __metadata("design:type", String)
+], InlineStringEditorComponent.prototype, "placeHolder", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], InlineStringEditorComponent.prototype, "placeHolderModel", void 0);
+(function (InlineStringEditorComponent) {
+    InlineStringEditorComponent.DEFAULT_FACES = {
+        edit: {
+            icon: () => 'mat:edit'
+        },
+        save: {
+            icon: () => 'mat:check'
+        },
+        cancel: {
+            icon: () => 'mat:clear'
+        }
+    };
+})(InlineStringEditorComponent || (InlineStringEditorComponent = {}));
+
 class InteractionModule {
 }
 InteractionModule.decorators = [
@@ -5519,7 +6083,11 @@ InteractionModule.decorators = [
                     DirectivesModule,
                     FlexModule,
                     GridModule,
-                    ComponentsModule
+                    ComponentsModule,
+                    FormsModule,
+                    MatInputModule,
+                    MatFormFieldModule,
+                    A11yModule
                 ],
                 declarations: [
                     ActivityContainerComponent,
@@ -5533,7 +6101,7 @@ InteractionModule.decorators = [
                     PopupInteractionContextComponent,
                     StringInputActivity,
                     SelectInputActivity,
-                    AbstractInputActivity,
+                    InputActivity,
                     InteractionContextTriggerFor,
                     Activity,
                     ActivityTitleComponent,
@@ -5542,7 +6110,9 @@ InteractionModule.decorators = [
                     AbstractActivityTriggerComponent,
                     PopupActivityTriggerComponent,
                     InlineActivityTriggerComponent,
-                    ModalActivityTriggerComponent
+                    ModalActivityTriggerComponent,
+                    AddCardActivityComponent,
+                    InlineStringEditorComponent,
                 ],
                 exports: [
                     ActivityContainerComponent,
@@ -5558,7 +6128,9 @@ InteractionModule.decorators = [
                     ActivityBodyComponent,
                     PopupActivityTriggerComponent,
                     InlineActivityTriggerComponent,
-                    ModalActivityTriggerComponent
+                    ModalActivityTriggerComponent,
+                    AddCardActivityComponent,
+                    InlineStringEditorComponent,
                 ],
                 entryComponents: [
                     ActivityContainerComponent,
@@ -5839,16 +6411,27 @@ class PlaceComponent extends DisposableComponent {
         when(this._active).becomesTruthy(() => this._notifyPlaceReady());
         this.childPlaces = this.placeDefinition.children.map(d => d.component);
     }
-    // @Trace()
     initialiseVisit(visit, notifyVisitChanged) {
         assert.isNil(this.visitModel.value);
         const { when } = Dsl.disposeWith(this);
         this.visitModel.value = visit;
         DebugContext.getOrCreate(this.visitModel).tag(`${this.placeDefinition.component.name}.visitModel`);
-        this.placeDefinition.getVisitParameterDefs().forEach(parameterDef => this.installBinding(parameterDef));
+        // we track if the any of the bindings updated the route.  If so we remember it and update the
+        // route in one go at the end.
+        this.placeDefinition
+            .getVisitParameterDefs()
+            .forEach(parameterDef => this.installAndInitialiseBinding(visit, parameterDef));
         when(this.visitModel).changes((current, previous) => {
             notifyVisitChanged(current, previous);
         }, { unless: this._inVisitUpdate });
+        // TODO: this needs to do a replace url option so that the new url isn't put in the history.... for
+        //       now we're not doing it as it's a fair bit of effort and will only affect people if they're
+        //       cutting and pasting urls to each other.
+        // // the binding process can update the visit (e.g. if a selection model has already selected during
+        // // component construction) and there was no value specified in the route
+        // if (visit.hasRoutingChangedFrom(this.visitModel.value)) {
+        //   notifyVisitChanged(this.visitModel.value, visit)
+        // }
     }
     updateVisit(visit) {
         assert.isTruthy(this.isInitialised());
@@ -5861,7 +6444,12 @@ class PlaceComponent extends DisposableComponent {
         return !!this.visitModel.value;
     }
     // @Trace()
-    installBinding(parameterDef) {
+    /**
+     * Initialised the component bindings.  If any binding has an initial model value (e.g. a selection model
+     * initialised during the constructor) and the route has nothing, then the visit will be udpated and this
+     * method will return ture to nofiy the the visit has changed.
+     */
+    installAndInitialiseBinding(initialVisit, parameterDef) {
         const model = this[parameterDef.propertyName];
         DebugContext.tag(model, `${this.placeDefinition.component.name}.${parameterDef.propertyName}`);
         const binding = this.registerDisposable(new Binding(this.visitModel, model, {
@@ -5875,7 +6463,17 @@ class PlaceComponent extends DisposableComponent {
                 return currentVisit.replace(parameterDef, value);
             }
         }));
-        binding.writeRight();
+        // Now we need to initialise the binding direction.  If we have a value in the Url then we should always push
+        // that to the view.  If we don't and the view already has a value (e.g. a selection model has already initialised in the
+        // component constructor) then we should push that to the route.
+        const isInVisit = !_.isNil(initialVisit.getParameterValue(parameterDef));
+        const isInModel = !_.isNil(model.value);
+        if (!isInVisit && isInModel) {
+            binding.writeLeft(); // push it to the route
+        }
+        else {
+            binding.writeRight(); // push it to the model
+        }
     }
     get placeDefinition() {
         const definition = PlaceComponent.getDefinition(this.constructor);
@@ -6918,7 +7516,7 @@ class ConsolidatedParameterMap {
         return !!this.paramMaps.find(m => m.has(name));
     }
     get keys() {
-        return this.paramMaps.reduce((result, params) => result.concat(params.keys), []);
+        return _.uniq(this.paramMaps.reduce((result, params) => result.concat(params.keys), []));
     }
 }
 __decorate([
@@ -6995,9 +7593,13 @@ class Visit {
         });
         return new Visit(this.placeDefinition, params);
     }
+    // @Trace()
     hasRoutingChangedFrom(other) {
         const samePlace = other.placeDefinition === this.placeDefinition;
-        const sameRouteParameters = _.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+        const currentParams = this.placeDefinition.getFormattedRouteParameters(this, true);
+        const otherParams = this.placeDefinition.getFormattedRouteParameters(other, true);
+        // console.log({currentParams, otherParams});
+        const sameRouteParameters = _.isEqual(currentParams, otherParams);
         return !samePlace || !sameRouteParameters;
     }
     hasChangedFrom(other) {
@@ -7019,6 +7621,7 @@ class UrlSnapshot {
         this.url = url;
         this.urlTree = urlSerializer.parse(url);
     }
+    // @Trace()
     updateVisitSegments(visit) {
         const newUrlTree = this.urlSerializer.parse(this.url);
         // Ugly, but it works for now.
@@ -7095,12 +7698,6 @@ class UrlSnapshot {
         return `UrlSnapshot(${this.url})`;
     }
 }
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Visit]),
-    __metadata("design:returntype", UrlSnapshot)
-], UrlSnapshot.prototype, "updateVisitSegments", null);
 __decorate([
     Memoize(),
     __metadata("design:type", Function),
@@ -7181,6 +7778,9 @@ UrlService.ctorParameters = () => [
     { type: UrlSerializer }
 ];
 
+function asArray(item) {
+    return Array.isArray(item) ? item : [item];
+}
 class PlaceRouter extends GarbageCollector {
     constructor(angularRouter, angularLocation, interactionService, urlService, placeHistory) {
         super();
@@ -7344,11 +7944,10 @@ class PlaceRouter extends GarbageCollector {
         this.currentSession.onRouterEnd(event);
     }
     navigate(visit, options) {
+        const commands = asArray(visit).reduce((result, v) => {
+            return [...result, v.placeDefinition.path, ...this.createRouteParameters(v)];
+        }, []);
         return this.doNavigation(visit, (router) => __awaiter(this, void 0, void 0, function* () {
-            const commands = [
-                visit.placeDefinition.path,
-                ...this.createRouteParameters(visit)
-            ];
             yield this.angularRouter.navigate(commands, {
                 relativeTo: options ? options.relativeTo : null
             });
@@ -7361,7 +7960,7 @@ class PlaceRouter extends GarbageCollector {
                 lang.illegalState('Navigation already in progress');
             }
             const navigation = this.createNavigationSession(this.urlService.getCurrentRouterUrl());
-            navigation.storeVisit(visit);
+            asArray(visit).forEach(v => navigation.storeVisit(v));
             this.transitionTo(navigation);
             try {
                 yield runNavigationCommands(this.angularRouter);
@@ -7442,6 +8041,7 @@ class PlaceRouter extends GarbageCollector {
      * to be able to capture the back button on the first page.  If we don't then the back click will exit
      * the app directly and we don't get to ask.
      */
+    // @Trace()
     syncInteractionContextIdsWithRouter() {
         if (this.navigationSession) {
             // console.log(`Navigation active -> ${this.navigationSession.toString()}, sync delayed until finished.`);
@@ -7483,12 +8083,6 @@ PlaceRouter.ctorParameters = () => [
     { type: UrlService },
     { type: PlaceHistory }
 ];
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", Promise)
-], PlaceRouter.prototype, "syncInteractionContextIdsWithRouter", null);
 (function (PlaceRouter) {
     class State {
         constructor(activeVisits) {
@@ -7514,7 +8108,7 @@ NotAuthorisedNoticeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-not-authorised-notice',
                 template: "<p>You are not authorised to access this page</p>\n",
-                styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center}"]
+                styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"]
             },] }
 ];
 NotAuthorisedNoticeComponent.ctorParameters = () => [];
@@ -7740,7 +8334,7 @@ PlaceOutletComponent.decorators = [
                 selector: 'aup-place-outlet',
                 template: "<ng-container *ngIf=\"animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<div  class=\"not-authorised-component-container\" *ngIf=\"!authorised.value\">\n  <ng-template [cdkPortalOutlet]=\"notAuthorisedNoticePortal\"></ng-template>\n</div>\n",
                 animations: [LEFT_RIGHT_PLACE_ANIMATION],
-                styles: [":host{display:flex;flex-direction:column;min-height:0}:host:not(.authorised) .router-outlet-container{display:none}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:auto}router-outlet{display:none}.not-authorised-component-container{flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}"]
+                styles: [":host{display:flex;flex-direction:column;min-height:0}:host:not(.authorised) .router-outlet-container{display:none}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:auto}router-outlet{display:none}.not-authorised-component-container{flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}\n"]
             },] }
 ];
 PlaceOutletComponent.ctorParameters = () => [
@@ -7870,7 +8464,7 @@ ListPlaceNavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-list-place-nav',
                 template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
-                styles: [":host{display:flex;flex-direction:column;--selected-border-color:#838383;--selected-color:inherit;--selected-background:#f1f1f1}mat-nav-list{padding-top:0}a{border-right:2px solid transparent}a.active{border-right:2px solid var(--selected-border-color);background:var(--selected-background);color:var(--selected-color)}"]
+                styles: [":host{display:flex;flex-direction:column;--selected-border-color: #838383;--selected-color: inherit;--selected-background: #f1f1f1}mat-nav-list{padding-top:0}a{border-right:2px solid transparent}a.active{border-right:2px solid var(--selected-border-color);background:var(--selected-background);color:var(--selected-color)}\n"]
             },] }
 ];
 ListPlaceNavComponent.ctorParameters = () => [
@@ -7938,7 +8532,7 @@ SidePlaceNavigationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-side-place-navigation',
                 template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
-                styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width:var(--nav-width,56px);--resolved-nav-item-height:var(--nav-item-height,var(--resolved-nav-item-width));--resolved-expanded-width:var(--nav-expanded-width,235px);--resolved-color:var(--nav-color,hsla(0,0%,100%,0.9));--resolved-background-color:var(--nav-background-color,#555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}"]
+                styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-nav-item-height: var(--nav-item-height, var(--resolved-nav-item-width));--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}\n"]
             },] }
 ];
 SidePlaceNavigationComponent.ctorParameters = () => [
@@ -7958,7 +8552,7 @@ TabbedPlaceNavigationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-tabbed-place-navigation',
                 template: "<nav mat-tab-nav-bar>\n  <ng-content select=\"[nav-start]\"></ng-content>\n  <a mat-tab-link *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n  <ng-content select=\"[nav-end]\"></ng-content>\n</nav>\n",
-                styles: [":host{display:block}div.place-holder{border:1px solid green}"]
+                styles: [":host{display:block}div.place-holder{border:1px solid green}\n"]
             },] }
 ];
 TabbedPlaceNavigationComponent.ctorParameters = () => [
@@ -8250,10 +8844,11 @@ class PlaceGuard {
                     }
                 }
                 const result = yield this.cleanInteractionState(activatedRoute, state, () => __awaiter(this, void 0, void 0, function* () {
+                    const navigationSession = this.placeRouter.navigationSession;
                     // Parse our route params.
                     const params = new ConsolidatedParameterMap(activatedRoute.url, activatedRoute.paramMap);
+                    // console.log("RouteParams", params)
                     const parsedParams = placeDefinition.parseRouteParams(params);
-                    const navigationSession = this.placeRouter.navigationSession;
                     const initialVisit = navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
                     const sanitiser = new VisitSanitiser(navigationSession, activatedRoute, this.router, this.placeHistory, this.injector);
                     const sanitisedVisit = yield sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams));
@@ -8505,5 +9100,5 @@ VisibilityService.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnListModel, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, 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, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SelfAndDescendantsVisitor, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator, ɵ0 };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CardStackComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnListModel, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadingContainerComponent, 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, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator, ɵ0 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map