@coolon/angular-ui-powerups 12.4.0-alpha.9 → 12.4.0

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, PLATFORM_ID, 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,24 @@ 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 { marked } from 'marked';
 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';
@@ -47,7 +50,7 @@ class CommandDirective extends GarbageCollector {
     constructor(elementRef, matButton, matMenuItem) {
         super();
         this.elementRef = elementRef;
-        this._commandEnabled = new DelegatingValueModel().withDefault(false);
+        this._commandEnabled = this.registerDisposable(new DelegatingValueModel().withDefault(false));
         this._commandParameterProvided = false;
         // Material buttons and menu items don't respond to the disabled binding so we
         // need to inject them from our host element and handle them manually.
@@ -390,6 +393,66 @@ DirectivesModule.decorators = [
             },] }
 ];
 
+const markdownPillExtension = (renderPill) => {
+    return {
+        name: 'aup-pill',
+        level: 'inline',
+        start: (src) => {
+            var _a;
+            const index = (_a = src.match(/\(\([^)]/)) === null || _a === void 0 ? void 0 : _a.index;
+            // if (index) {
+            //     console.log({start:src})
+            // }
+            return index;
+        },
+        tokenizer: function (src) {
+            const rule = /^(\(\((([^)])+)\)\))/; // Regex for the complete token
+            const match = rule.exec(src);
+            if (match) {
+                const token = {
+                    type: 'aup-pill',
+                    raw: match[0],
+                    text: match[2].trim(), // Additional custom properties
+                    // tokens: []              // Array where child inline tokens will be generated
+                };
+                // console.log(token)
+                // this.lexer.inlineTokens(token.text, token.tokens);    // Queue this data to be processed for inline tokens
+                return token;
+            }
+            else {
+                return undefined;
+            }
+        },
+        renderer: function (token) {
+            // @ts-ignore (until typings are up to date)
+            const url = token.text;
+            return renderPill(token.text);
+        }
+    };
+};
+
+class MarkdownService {
+    constructor() {
+    }
+    render(content) {
+        return marked.parse(content, {
+            smartLists: true
+        });
+    }
+    renderInline(content) {
+        return marked.parseInline(content);
+    }
+    usePillExtension(renderer) {
+        marked.use({
+            extensions: [markdownPillExtension(renderer !== null && renderer !== void 0 ? renderer : (text => `<span class='aup-pill'>${text}<span>`))]
+        });
+    }
+}
+MarkdownService.decorators = [
+    { type: Injectable }
+];
+MarkdownService.ctorParameters = () => [];
+
 class BusyOverlayComponent extends GarbageCollector {
     constructor() {
         super();
@@ -401,7 +464,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{z-index:10;z-index:var(--aup-busy-overlay-z-index, 10);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 +589,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 +630,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 +669,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:
@@ -628,6 +831,9 @@ class CommandFaceComponent extends DisposableComponent {
         this.activeIcon = activeFace.pluck("icon");
         this.activeColor = activeFace.pluck("color");
     }
+    set face(face) {
+        this.facesModel.value = [face];
+    }
     get requiresMissingIconInLayout() {
         return this.includeMissingIconInLayout && !this.activeIcon.value;
     }
@@ -651,12 +857,13 @@ 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 = () => [];
 CommandFaceComponent.propDecorators = {
     _rawFaces: [{ type: Input, args: ['faces',] }],
+    face: [{ type: Input }],
     ignoreIcon: [{ type: Input }],
     ignoreText: [{ type: Input }],
     includeMissingIconInLayout: [{ type: Input }],
@@ -710,22 +917,22 @@ class CommandComponent extends PopupAwareComponent {
         this.CommandFace = CommandFace;
         this.alignFace = HorizontalAlignment.CENTER;
         const { chain, switchOn } = Dsl.disposeWith(this);
-        this.faces = chain(this.command.busy).mapToList(busy => {
+        this.faces$ = chain(this.command.busy).mapToList(busy => {
             return busy ?
                 [this.busyFaceModel.value, this.faceModel.value] :
                 [this.faceModel.value, this.busyFaceModel.value];
         }, { allowNil: true, dependsOn: [this.faceModel, this.busyFaceModel] })
             .rejectNil();
-        this.activeFace = this.faces.first();
-        this.buttonStyle = chain(this.activeFace).map(f => CommandFace.getStyleOf(f));
-        this.colorModel = chain(this.activeFace).map(f => CommandFace.getColorOf(f));
-        this.tooltipModel = chain(this.activeFace).map(f => CommandFace.getTooltipOf(f));
-        this.iconOnly = this.faces.select(face => {
+        this.activeFace$ = this.faces$.first();
+        this.buttonStyle$ = chain(this.activeFace$).map(f => CommandFace.getStyleOf(f));
+        this.color$ = chain(this.activeFace$).map(f => CommandFace.getColorOf(f));
+        this.tooltip$ = chain(this.activeFace$).map(f => CommandFace.getTooltipOf(f));
+        this.iconOnly$ = this.faces$.select(face => {
             return ___default.isEmpty(CommandFace.getTextOf(face)) && !___default.isEmpty(CommandFace.getIconOf(face));
-        }).count().equals(this.faces.count());
+        }).count().equals(this.faces$.count());
     }
     isActive(face) {
-        return this.activeFace.query().equals(face);
+        return this.activeFace$.query().equals(face);
     }
     ngOnInit() {
     }
@@ -739,8 +946,8 @@ class CommandComponent extends PopupAwareComponent {
 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}"]
+                template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltip$.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]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.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]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.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]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.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}\n"]
             },] }
 ];
 CommandComponent.ctorParameters = () => [
@@ -801,12 +1008,13 @@ class AbstractPopupMenuComponent extends PopupAwareComponent {
     constructor(element, parent) {
         super(element, parent);
         this._unorderedChildren = new MutableListModel();
-        this.faceModelDelegate = new DelegatingValueModel();
+        this.faceModelDelegate = this.registerDisposable(new DelegatingValueModel());
         this.xPosition = 'after';
         this.yPosition = 'below';
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
         this.faceAdapterModel = chain(this.faceModelDelegate).map(f => new CommandFace.Adapter(f));
+        this.faces$ = chain(this.faceAdapterModel).pluck('face').mapToList(face => [face]);
         this.children = chain(this._unorderedChildren).sortBy('componentIndex');
     }
     ngAfterContentChecked() {
@@ -816,7 +1024,7 @@ class AbstractPopupMenuComponent extends PopupAwareComponent {
     get faceAdapter() {
         var _a, _b;
         if (!this.faceAdapterModel) {
-            console.error("Somehow faceAdapterModel is nil -- set a break point here and let me know what's going on");
+            console.error('Somehow faceAdapterModel is nil -- set a break point here and let me know what\'s going on');
         }
         return (_b = (_a = this.faceAdapterModel) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : new CommandFace.Adapter(undefined);
     }
@@ -859,7 +1067,7 @@ AbstractPopupMenuComponent.propDecorators = {
     enabledModel: [{ type: Input }]
 };
 __decorate([
-    StoreInValueModel("enabledModel"),
+    StoreInValueModel('enabledModel'),
     __metadata("design:type", Boolean)
 ], AbstractPopupMenuComponent.prototype, "enabled", void 0);
 __decorate([
@@ -891,7 +1099,7 @@ class MoreMenuComponent extends AbstractPopupMenuComponent {
 MoreMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-more-menu',
-                template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
+                template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
                 providers: [
                     { provide: POPUP_CONTAINER, useExisting: MoreMenuComponent }
                 ]
@@ -912,10 +1120,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 +1183,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 = () => [];
@@ -1012,13 +1232,12 @@ class PopupMenuComponent extends AbstractPopupMenuComponent {
     constructor(element, parent) {
         super(element, parent);
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
     }
 }
 PopupMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-popup-menu',
-                template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
+                template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
                 providers: [
                     { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
                 ]
@@ -1044,7 +1263,7 @@ __decorate([
 class PopupMenuRendererComponent extends DisposableComponent {
     constructor() {
         super();
-        this._childList = new DelegatingListModel();
+        this._childList = this.registerDisposable(new DelegatingListModel());
         this.commandFired = new EventEmitter();
         this.TrackBy = TrackBy;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
@@ -1104,9 +1323,9 @@ class PopupMenuRendererComponent extends DisposableComponent {
     }
     getFaces(child) {
         return this.isCommand(child) ?
-            child.faces.value :
+            child.faces$.value :
             this.isPopupMenu(child) ?
-                [child.faceAdapter.face] :
+                child.faces$.value :
                 undefined;
     }
 }
@@ -1138,7 +1357,7 @@ EmptyStateComponent.decorators = [
           <ng-content></ng-content>
       </div>
   `,
-                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}"]
+                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 +1385,7 @@ FocusContainerComponent.decorators = [
                 providers: [
                     { provide: FocusManager }
                 ],
-                styles: [":host{display:block}"]
+                styles: [":host{display:block}\n"]
             },] }
 ];
 FocusContainerComponent.ctorParameters = () => [
@@ -1222,6 +1441,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
@@ -1481,8 +1701,8 @@ class AutocompleteInputComponent extends AbstractValueInputComponent {
 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%}"]
+                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<div class=\"width-strut\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <div>{{placeholder}}</div>\n  <div class=\"item\" *ngFor=\"let item of options\">{{optionLabelFormat(item)}}</div>\n</div>\n",
+                styles: [":host{display:inline-block}mat-form-field{width:100%}.width-strut{display:block;height:0;max-height:0;width:auto;visibility:hidden;overflow:hidden;padding-right:35px}.width-strut mat-label{font-size:75%}.width-strut>.item{font-size:16px;padding-left:0}\n"]
             },] }
 ];
 AutocompleteInputComponent.ctorParameters = () => [];
@@ -1518,7 +1738,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 = () => [];
@@ -1545,8 +1765,8 @@ class MultipleSelectInputComponent extends AbstractListInputComponent {
 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%}"]
+                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<div class=\"width-strut\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <div>{{placeholder}}</div>\n  <div class=\"item\" *ngFor=\"let item of options\">{{optionLabelFormat(item)}}</div>\n</div>\n",
+                styles: [":host{display:inline-block}mat-form-field{width:100%}.width-strut{display:block;height:0;max-height:0;width:auto;visibility:hidden;overflow:hidden;padding-right:35px}.width-strut mat-label{font-size:75%}.width-strut>.item{font-size:16px;padding-left:30px}\n"]
             },] }
 ];
 MultipleSelectInputComponent.ctorParameters = () => [];
@@ -1627,8 +1847,8 @@ class SelectInputComponent extends AbstractValueInputComponent {
 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%}"]
+                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<div class=\"width-strut\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <div class=\"item\" *ngFor=\"let item of options\">{{optionLabelFormat(item)}}</div>\n</div>\n",
+                styles: [":host{display:inline-block}mat-form-field{width:100%}.width-strut{display:block;height:0;max-height:0;width:auto;visibility:hidden;overflow:hidden;padding-right:35px}.width-strut mat-label{font-size:75%}.width-strut>.item{font-size:16px;padding-left:0}\n"]
             },] }
 ];
 SelectInputComponent.ctorParameters = () => [];
@@ -1666,7 +1886,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 +1920,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 +1959,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 +1973,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 +2023,7 @@ NoopComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-noop',
                 template: "",
-                styles: [":host{display:block}"]
+                styles: [":host{display:block}\n"]
             },] }
 ];
 NoopComponent.ctorParameters = () => [];
@@ -1775,14 +2037,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 +2056,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 +2169,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 = () => [
@@ -2160,17 +2428,24 @@ class EditSession extends GarbageCollector {
 class EditRowControls extends DisposableComponent {
     constructor() {
         super();
-        this.saveCommand = Command.create(() => {
-            this.editSession.saveCommand.execute(this.editSession.form)
-                .then((finished) => {
-                if (finished) {
-                    this.editSession.dispose();
-                }
-            });
-        });
+        this.saveCommand = Command.create(() => __awaiter(this, void 0, void 0, function* () {
+            const finished = yield this.editSession.saveCommand.execute();
+            if (finished) {
+                this.editSession.dispose();
+            }
+        }));
         this.cancelCommand = Command.create(() => {
             this.editSession.dispose();
-        });
+        }).disableWhile(this.saveCommand.busy);
+    }
+    set editSession(session) {
+        if (session) {
+            session.form.disableWhile(this.saveCommand.busy);
+        }
+        this._session = session;
+    }
+    get editSession() {
+        return this._session;
     }
     ngOnInit() {
     }
@@ -2183,7 +2458,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 = () => [];
@@ -2254,14 +2529,19 @@ const noop = () => {
 };
 const ɵ0 = noop;
 const CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol('aup-cell-renderer:row-data-cache');
-class ColumnModel {
+const DEFAULT_TEXT_SEARCH_PREDICATE = (row, text) => false;
+const ɵ1 = DEFAULT_TEXT_SEARCH_PREDICATE;
+class ColumnModel extends GarbageCollector {
     constructor(columnId, textPropertiesProvider) {
+        super();
         this.columnId = columnId;
         this.textPropertiesProvider = textPropertiesProvider;
         this._enableRowSelection = true;
         this._flex = false;
-        this._defaultVisibility = new DelegatingValueModel().withDefault(true);
-        this._visible = new DelegatingValueModel().withDefault(this._defaultVisibility);
+        this._defaultVisibility = this.registerDisposable(new DelegatingValueModel().withDefault(true));
+        this._visible = this.registerDisposable(new DelegatingValueModel().withDefault(this._defaultVisibility));
+        this._columnModelTextSearchPredicate = undefined;
+        this._cellRendererTextSearchPredicate = undefined;
         this.installHeaderRenderer();
         this.dasherisedColumnId = Stringy.from(columnId).dasherize().toString();
     }
@@ -2290,6 +2570,17 @@ class ColumnModel {
     getDefaultHeaderText() {
         return this.columnId;
     }
+    get isTextMatch() {
+        return this._columnModelTextSearchPredicate || this._cellRendererTextSearchPredicate || DEFAULT_TEXT_SEARCH_PREDICATE;
+    }
+    /**
+     * Sets the predicate to use when checking if the specified row is a text match for this column.
+     * @param predicate
+     */
+    useTextSearchPredicate(predicate) {
+        this._columnModelTextSearchPredicate = predicate;
+        return this;
+    }
     getColumnTextProperties() {
         return this._columnTextProperties || this.textPropertiesProvider();
     }
@@ -2340,6 +2631,12 @@ class ColumnModel {
     }
     onRendererAttached(host, component) {
         this._cellRendererPortalRef.onPortalAttached(host, component);
+        if (___default.isFunction(component === null || component === void 0 ? void 0 : component.matches)) {
+            this._cellRendererTextSearchPredicate = (row, text) => component.matches(row, text);
+        }
+        else {
+            this._cellRendererTextSearchPredicate = undefined;
+        }
     }
     // @Trace()
     onEditorAttached(host, component) {
@@ -2372,8 +2669,11 @@ class PropertyColumnModel extends ColumnModel {
     constructor(id, property, defaults) {
         super(id, defaults);
         this.property = property;
-        this._format = (value) => value;
+        this._format = (value) => value === null || value === void 0 ? void 0 : value.toString();
         this.cellRenderer(DefaultCellRendererComponent);
+        this.useTextSearchPredicate((row, regex) => {
+            return regex.test(this._format(row[this.property]));
+        });
     }
     cellRenderer(componentType, onComponentInitOrOptions) {
         this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
@@ -2388,9 +2688,6 @@ class PropertyColumnModel extends ColumnModel {
                 }
             }
             component.value = this._format(rowData.row[this.property]);
-            if (!___default.isFunction(onComponentInitOrOptions) && ___default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
-                onComponentInitOrOptions.onRowUpdate(component, rowData.row);
-            }
         }));
         return this;
     }
@@ -2460,6 +2757,9 @@ class ListPropertyColumnModel extends ColumnModel {
         this.property = property;
         this._format = (value) => value.map(v => v === null || v === void 0 ? void 0 : v.toString()).join(', ');
         this.cellRenderer(DefaultCellRendererComponent);
+        this.useTextSearchPredicate((row, regex) => {
+            return regex.test(this._format(row[this.property]));
+        });
     }
     cellRenderer(componentType) {
         this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
@@ -2521,7 +2821,7 @@ class CustomValueColumnModel extends ColumnModel {
     }
 }
 class EditorControlColumnModel extends ColumnModel {
-    constructor(columnId, saveCommand, defaults) {
+    constructor(columnId, saveCommandFactory, defaults) {
         super(columnId, defaults);
         this.cellRenderer(EditRowControls);
     }
@@ -2792,6 +3092,7 @@ class ColumnListModel extends AbstractComputedListModel {
         if (this.hasColumn(column.columnId)) {
             lang.illegalState(`Column with id=${column.columnId} already exists`);
         }
+        this.registerDisposable(column);
         this.runInTransaction(() => {
             if (!_.isNil(index)) {
                 this._allColumns.insert(index, column);
@@ -2799,7 +3100,7 @@ class ColumnListModel extends AbstractComputedListModel {
             else {
                 this._allColumns.push(column);
             }
-            this.trackSource(column.visible);
+            this.registerDisposable(this.trackSource(column.visible));
         });
         return column;
     }
@@ -2819,7 +3120,7 @@ class RowClass {
 class AbstractTableModel extends GarbageCollector {
     constructor() {
         super();
-        this._dataSource = new DelegatingListModel();
+        this._dataSource = this.registerDisposable(new DelegatingListModel());
         this._columnList = this.registerDisposable(new ColumnListModel());
         this._editorSessions = new MutableListModel();
         this.rowClassNamePredicates = [];
@@ -2840,6 +3141,12 @@ class AbstractTableModel extends GarbageCollector {
         this.lastVisibleColumn = chain(this._columnList).last();
         this.rowSelectionDisabledOnAllColumns = chain(this._columnList).select(column => column.isRowSelectionEnabled()).count().equals(0);
     }
+    findMatchingColumns(row, regex) {
+        return this.columns.value.filter(c => c.isTextMatch(row, regex));
+    }
+    hasMatchingColumn(row, regex) {
+        return !!this.columns.value.find(c => c.isTextMatch(row, regex));
+    }
     setDataSource(sourceOfTruth) {
         this._dataSource.setDelegate(sourceOfTruth);
     }
@@ -2874,10 +3181,13 @@ class AbstractTableModel extends GarbageCollector {
         }
         return selectionColumnModel;
     }
-    addEditControls(saveCommand) {
-        this.saveCommand = saveCommand;
+    addEditControls(saveCommandFactory, formFactory) {
+        this.saveCommandFactory = saveCommandFactory;
+        if (_.isFunction(formFactory)) {
+            this._createForm = formFactory;
+        }
         const columnId = 'editControls';
-        return this.addColumn(new EditorControlColumnModel(columnId, saveCommand, () => this.getColumnTextProperties(columnId)));
+        return this.addColumn(new EditorControlColumnModel(columnId, saveCommandFactory, () => this.getColumnTextProperties(columnId)));
     }
     addCustomColumn(columnId, dataAccessor) {
         return this.addColumn(new CustomValueColumnModel(columnId, () => this.getColumnTextProperties(columnId), dataAccessor));
@@ -2921,19 +3231,20 @@ class AbstractTableModel extends GarbageCollector {
         if (this._rowsBeingEdited.query().indexOf(row) > -1) {
             return lang.illegalState(`Row with id=${rowId} already being edited`);
         }
-        else {
-            const editSession = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
-            const { when } = Dsl.disposeWith(editSession);
-            when(editSession.liveRowValue).changes((editedValue) => {
-                this._rowsBeingEdited.replaceOrPush(editedValue);
-            }, { initialValue: 'triggerChangeUnlessNil' });
-            this._editorSessions.push(editSession);
-            editSession.onDispose(() => {
-                this._rowsBeingEdited.remove(editSession.liveRowValue.value);
-                this._editorSessions.remove(editSession);
-            });
-            return editSession;
-        }
+        // todo: pass the factories to the edit session so we can make the whole lot pluggable?
+        const form = this._createForm(row);
+        const saveCommand = this.saveCommandFactory.create(form);
+        const editSession = new EditSession(rowId, row, form, saveCommand);
+        const { when } = Dsl.disposeWith(editSession);
+        when(editSession.liveRowValue).changes((editedValue) => {
+            this._rowsBeingEdited.replaceOrPush(editedValue);
+        }, { initialValue: 'triggerChangeUnlessNil' });
+        this._editorSessions.push(editSession);
+        editSession.onDispose(() => {
+            this._rowsBeingEdited.remove(editSession.liveRowValue.value);
+            this._editorSessions.remove(editSession);
+        });
+        return editSession;
     }
     getEditSessionFor(row) {
         return this._editorSessionByRowId.get(this.identityOf(row));
@@ -2949,12 +3260,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 +3385,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 = () => [];
@@ -3100,8 +3415,6 @@ class TableRowMenuComponent extends DisposableComponent {
     registerMoreAction(commandFactory, properties) {
         this.moreActions.push(new MenuItemData(commandFactory, properties));
     }
-    ngOnInit() {
-    }
     createMoreMenuCommand(item, value) {
         const { when } = Dsl.disposeWith(this);
         const command = item.factory.create(value);
@@ -3186,18 +3499,19 @@ TableRowMenuComponent.propDecorators = {
  *   --row-selected-background-color: rebeccapurple; // defaults to transparent
  *   --first-column-padding-left: 18px // defaults to --column-gap
  *   --last-column-padding-right: 18px // defaults to --column-gap
- *
- *   aup-table-header-cell-renderer,
- *   aup-table-cell-renderer {
- *     &.aup-col-my-dasherised-column-id {
- *       // do stuff
- *     }
- *     &.first-visible-column {
- *       // do stuff
- *     }
- *     &.last-visible-column {
- *       // do stuff
- *     }
+ *   ::ng-deep {
+ *      aup-table-header-cell-renderer,
+ *      aup-table-cell-renderer {
+ *        &.aup-col-my-dasherised-column-id {
+ *          // do stuff
+ *        }
+ *        &.first-visible-column {
+ *          // do stuff
+ *        }
+ *        &.last-visible-column {
+ *          // do stuff
+ *        }
+ *      }
  *   }
  * }
  */
@@ -3216,7 +3530,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 +3574,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 = () => [];
@@ -3465,6 +3779,33 @@ var DecoratedTreeNode;
     DecoratedTreeNode.Decorator = Decorator;
 })(DecoratedTreeNode || (DecoratedTreeNode = {}));
 
+class FlattenedTreeListModel extends ComputedListModel {
+    constructor(source, childRef, expansionModel) {
+        super(source, {
+            initialValue: [],
+            identifiedWith: row => source.identityOf(row)
+        });
+        this.source = source;
+        this.childRef = childRef;
+        this.expansionModel = expansionModel;
+        this.trackSource(expansionModel.isExpandedPredicate);
+    }
+    compute(values) {
+        const result = [];
+        values.forEach(rootNode => {
+            return this.addNodeAndVisibleChildren(DecoratedTreeNode.decorateRoot(rootNode, this.childRef), result);
+        });
+        return result;
+    }
+    addNodeAndVisibleChildren(node, result) {
+        result.push(node);
+        const decorator = node[treeNodeDecorator];
+        if (decorator.hasChildren() && !this.expansionModel.isCollapsed(node)) {
+            decorator.children.forEach(child => this.addNodeAndVisibleChildren(child, result));
+        }
+    }
+}
+
 class TreeExpansionModel {
     constructor(identityOf) {
         this.identityOf = identityOf;
@@ -3512,33 +3853,6 @@ class TreeExpansionModel {
     }
 }
 
-class FlattenedTreeListModel extends ComputedListModel {
-    constructor(source, childRef, expansionModel) {
-        super(source);
-        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 => {
-            return this.addNodeAndVisibleChildren(DecoratedTreeNode.decorateRoot(rootNode, this.childRef), result);
-        });
-        return result;
-    }
-    addNodeAndVisibleChildren(node, result) {
-        result.push(node);
-        const decorator = node[treeNodeDecorator];
-        if (decorator.hasChildren() && !this.expansionModel.isCollapsed(node)) {
-            decorator.children.forEach(child => this.addNodeAndVisibleChildren(child, result));
-        }
-    }
-}
-
 class TreeLabelColumnModel extends ColumnModel {
     constructor(columnId, textPropertiesProvider, expansionModel) {
         super(columnId, textPropertiesProvider);
@@ -3561,7 +3875,7 @@ class TreeLabelColumnModel extends ColumnModel {
     cellRenderer(componentType) {
         this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
             if (firstTime) {
-                component.expansionModel = this.expansionModel;
+                component.treeTableModel = this.expansionModel;
             }
             component.value = rowData.row;
             component.label = ___default.isNil(this.labelProperty) ? undefined : rowData.row[this.labelProperty];
@@ -3593,10 +3907,11 @@ 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';
-        const column = new TreeLabelColumnModel(columnId, () => this.getColumnTextProperties(columnId), this.treeExpansionModel);
+        const column = new TreeLabelColumnModel(columnId, () => this.getColumnTextProperties(columnId), this);
         builder(column);
         this.addColumn(column);
     }
@@ -3604,7 +3919,7 @@ class TreeTableModel extends AbstractTableModel {
         this.treeExpansionModel.expand(node);
     }
     collapse(node) {
-        this.treeExpansionModel.expand(node);
+        this.treeExpansionModel.collapse(node);
     }
     isCollapsed(node) {
         return this.treeExpansionModel.isCollapsed(node);
@@ -3681,17 +3996,17 @@ class TreeLabelCellRendererComponent extends DisposableComponent {
     ngOnInit() {
         const { chain } = Dsl.disposeWith(this);
         this.canExpand = chain(this.nodeModel).map(node => {
-            return DecoratedTreeNode.getDecorator(node).hasChildren() && this.expansionModel.isCollapsed(node);
-        }, { dependsOn: this.expansionModel.isExpandedPredicate });
+            return DecoratedTreeNode.getDecorator(node).hasChildren() && this.treeTableModel.isCollapsed(node);
+        }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
         this.canCollapse = chain(this.nodeModel).map(node => {
-            return DecoratedTreeNode.getDecorator(node).hasChildren() && !this.expansionModel.isCollapsed(node);
-        }, { dependsOn: this.expansionModel.isExpandedPredicate });
+            return DecoratedTreeNode.getDecorator(node).hasChildren() && !this.treeTableModel.isCollapsed(node);
+        }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
         this.iconModel = chain(this.nodeModel).map(node => {
             var _a;
-            const expanded = this.expansionModel.isExpanded(this.node);
+            const expanded = this.treeTableModel.treeExpansionModel.isExpanded(this.node);
             const iconFactory = (_a = this.iconFactory) !== null && _a !== void 0 ? _a : TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY;
             return iconFactory(node, expanded, TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY(node, expanded, undefined));
-        }, { dependsOn: this.expansionModel.isExpandedPredicate });
+        }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
     }
     get isRoot() {
         return DecoratedTreeNode.getDecorator(this.node).isRoot();
@@ -3703,15 +4018,17 @@ class TreeLabelCellRendererComponent extends DisposableComponent {
         return this.nodeModel.value;
     }
     // @Trace()
-    expandOrCollapse(node) {
-        this.expansionModel.isCollapsed(node) ? this.expansionModel.expand(node) : this.expansionModel.collapse(node);
+    expandOrCollapse($event, node) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        this.treeTableModel.isCollapsed(node) ? this.treeTableModel.expand(node) : this.treeTableModel.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 = () => [];
@@ -3719,7 +4036,7 @@ TreeLabelCellRendererComponent.propDecorators = {
     value: [{ type: Input }],
     label: [{ type: Input }],
     iconFactory: [{ type: Input }],
-    expansionModel: [{ type: Input }],
+    treeTableModel: [{ type: Input }],
     isRoot: [{ type: HostBinding, args: ['class.root',] }],
     isLeaf: [{ type: HostBinding, args: ['class.leaf',] }]
 };
@@ -3728,7 +4045,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 +4130,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 +4184,7 @@ VerticalFocusContainerComponent.decorators = [
                 providers: [
                     { provide: FocusManager }
                 ],
-                styles: [":host{display:block}"]
+                styles: [":host{display:block}\n"]
             },] }
 ];
 VerticalFocusContainerComponent.ctorParameters = () => [
@@ -3906,7 +4230,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 +4242,98 @@ __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 }]
+};
+
+// TODO: Look at using unified parser: https://javascript.plainenglish.io/markdown-to-angular-rendering-using-unified-and-remark-96835bb877
+/**
+ * @example
+ * <aup-markdown [content]="..."></aup-markdown>
+ * <aup-markdown [content$]="stringValueModel$"></aup-markdown>
+ * <aup-markdown ngPreserveWhitespaces>
+ *   # This is markdown content
+ *
+ *  With a list
+ *    - a
+ *    - b
+ * </aup-markdown>
+ */
+class MarkdownComponent extends DisposableComponent {
+    constructor(platform, element, markdownService) {
+        super();
+        this.platform = platform;
+        this.element = element;
+        this.markdownService = markdownService;
+        this.inline = false;
+        const { chain } = Dsl.disposeWith(this);
+    }
+    ngOnInit() {
+        const { when } = Dsl.disposeWith(this);
+        when(this.content$).changes(content => this.renderContent(content), { initialValue: 'triggerChangeUnlessNil' });
+        if (_.isNil(this.content) && !_.isEmpty(this.element.nativeElement.innerHTML)) {
+            this.renderContent(this.extractInnerContent(this.element.nativeElement.innerHTML));
+        }
+    }
+    extractInnerContent(content) {
+        const lines = content.split('\n');
+        const prefix = lines.reduce((minPrefix, line) => {
+            const leadingWhitespace = line.search(/\S/);
+            return leadingWhitespace < 0 ? minPrefix : Math.min(minPrefix, leadingWhitespace);
+        }, Number.MAX_SAFE_INTEGER);
+        return lines.map(l => l.substr(prefix)).join('\n');
+    }
+    renderContent(content) {
+        if (!_.isNil(content)) {
+            const markdown = this.inline ?
+                this.markdownService.renderInline(content) :
+                this.markdownService.render(content);
+            this.element.nativeElement.innerHTML = markdown;
+        }
+    }
+}
+MarkdownComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-markdown, [aupMarkdown]',
+                template: "<ng-content></ng-content>\n",
+                styles: [":host{display:inline-block}\n"]
+            },] }
+];
+MarkdownComponent.ctorParameters = () => [
+    { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
+    { type: ElementRef },
+    { type: MarkdownService }
+];
+MarkdownComponent.propDecorators = {
+    content$: [{ type: Input }],
+    content: [{ type: Input }],
+    inline: [{ type: Input }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], MarkdownComponent.prototype, "content$", void 0);
+__decorate([
+    StoreInValueModel('content$'),
+    __metadata("design:type", String)
+], MarkdownComponent.prototype, "content", void 0);
+
 class ComponentsModule {
     constructor(faIconLibrary) {
         faIconLibrary.addIconPacks(fas);
@@ -3925,6 +4341,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 +4412,12 @@ 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,
+                    MarkdownComponent
                 ],
                 exports: [
                     NumberInputComponent,
@@ -4032,9 +4454,14 @@ ComponentsModule.decorators = [
                     BusyOverlayComponent,
                     EmptyStateComponent,
                     PaginatorComponent,
+                    CardStackComponent,
+                    LabelledValueComponent,
+                    LoadingContainerComponent,
+                    MarkdownComponent
                 ],
                 providers: [
-                    FocusBindingFactory
+                    FocusBindingFactory,
+                    MarkdownService
                 ]
             },] }
 ];
@@ -4067,7 +4494,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 +4507,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 +4525,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 +4538,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,14 +4549,26 @@ __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 {
     constructor() {
         super();
-        this._busyModel = new DelegatingValueModel().withDefault(false);
+        this._busyModel = this.registerDisposable(new DelegatingValueModel().withDefault(false));
         this._focusedModel = this.registerDisposable(new DelegatingValueModel());
         this.class = 'aup-activity';
+        this.busyWhile(this.confirmCommand.busy);
     }
     get isFocused() {
         return this._focusedModel.value;
@@ -4188,127 +4621,183 @@ Activity.decorators = [
                 template: ''
             },] }
 ];
-Activity.ctorParameters = () => [];
-Activity.propDecorators = {
-    activityActions: [{ type: ViewChild, args: [ActivityActionsComponent,] }],
-    class: [{ type: HostBinding, args: ['class',] }],
-    isFocused: [{ type: HostBinding, args: ['attr.focused',] }]
-};
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", Command)
-], Activity.prototype, "confirmCommand", void 0);
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", Command)
-], Activity.prototype, "cancelCommand", void 0);
+Activity.ctorParameters = () => [];
+Activity.propDecorators = {
+    activityActions: [{ type: ViewChild, args: [ActivityActionsComponent,] }],
+    class: [{ type: HostBinding, args: ['class',] }],
+    isFocused: [{ type: HostBinding, args: ['attr.focused',] }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], Activity.prototype, "confirmCommand", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], Activity.prototype, "cancelCommand", void 0);
+
+var Alert;
+(function (Alert) {
+    function getContent(alert) {
+        const content = alert.content();
+        return Array.isArray(content) ? content : [content];
+    }
+    Alert.getContent = getContent;
+    function getTitle(alert) {
+        return _.isFunction(alert.title) ? alert.title() : undefined;
+    }
+    Alert.getTitle = getTitle;
+    function getColor(alert) {
+        return _.isFunction(alert.color) ? alert.color() : undefined;
+    }
+    Alert.getColor = getColor;
+})(Alert || (Alert = {}));
+
+const ALERT_CONFIG = new InjectionToken('AlertConfig');
+class AbstractDialogComponent extends Activity {
+    constructor(config) {
+        super();
+        this.config = config;
+        assert.notNil(config);
+        this.title = Alert.getTitle(config);
+        this.color = this.checkColor(Alert.getColor(config));
+        this.content = Alert.getContent(config);
+        this.confirmFace = {
+            text: () => config.ok(),
+            color: () => this.color || 'primary',
+            style: () => 'raised'
+        };
+    }
+    getConfig() {
+        return lang$1.abstractMethod(this.constructor);
+    }
+    checkColor(rawColor) {
+        if (this.isDestructive()) {
+            return 'warn';
+        }
+        else {
+            if (['primary', 'accent', 'warn'].includes(rawColor)) {
+                return rawColor;
+            }
+            else {
+                console.warn(`Invalid color string ${rawColor}`);
+                return undefined;
+            }
+        }
+    }
+    isDestructive() {
+        // @ts-ignore
+        return _.isFunction(this.config['destructive']) && this.config.destructive();
+    }
+}
+AbstractDialogComponent.decorators = [
+    { type: Component, args: [{
+                template: ''
+            },] }
+];
+AbstractDialogComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [ALERT_CONFIG,] }] }
+];
+
+class AbstractConfirmDialogComponent extends AbstractDialogComponent {
+    constructor(config) {
+        super(config);
+        this.cancelFace = {
+            text: () => config.cancel()
+        };
+        this.cancelCommand = Command.create(() => {
+            return this.cancel();
+        });
+    }
+}
+AbstractConfirmDialogComponent.decorators = [
+    { type: Component, args: [{
+                template: ''
+            },] }
+];
+AbstractConfirmDialogComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [ALERT_CONFIG,] }] }
+];
 
-class AlertDialogComponent extends Activity {
+class AlertDialogComponent extends AbstractDialogComponent {
     constructor(alert) {
-        super();
-        this.alert = alert;
+        super(alert);
         this.confirmCommand = Command.create(() => {
             this.done();
         });
-        this.confirmFace = {
-            text: () => alert.ok(),
-            color: () => "primary",
-            style: () => "raised"
-        };
-    }
-    ngOnInit() {
     }
 }
 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}"]
+                template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\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}\n"]
             },] }
 ];
 AlertDialogComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
+    { type: Alert, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
 ];
 
-class ConfirmThenDialogComponent extends Activity {
+class ConfirmThenDialogComponent extends AbstractConfirmDialogComponent {
     constructor(config) {
-        super();
-        this.config = config;
-        assert.notNil(config);
+        super(config.confirm);
         this.confirmCommand = Command.create(() => {
-            this.interactionContext.startActivity(this.config.activityType, this.config.data)
+            this.interactionContext.startActivity(config.activityType, config.data)
                 .then((result) => this.done(result))
                 .catch(error => this.cancel(error));
         });
-        this.cancelCommand = Command.create(() => {
-            return this.cancel();
-        });
-        this.confirmFace = {
-            text: () => this.confirm.ok(),
-            color: () => this.isDestructive() ? 'warn' : 'primary',
-            style: () => 'raised'
-        };
-        this.cancelFace = {
-            text: () => this.confirm.cancel(),
-        };
-    }
-    ngOnInit() {
-    }
-    get confirm() {
-        return this.config.confirm;
-    }
-    get titleColor() {
-        return this.isDestructive() ? 'warn' : undefined;
-    }
-    isDestructive() {
-        return this.confirm.destructive && this.confirm.destructive();
     }
 }
 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}"]
+                template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\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}\n"]
             },] }
 ];
 ConfirmThenDialogComponent.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
 ];
 
-class ConfirmationDialogComponent extends Activity {
+class ConfirmThenExecuteDialogComponent extends AbstractConfirmDialogComponent {
+    constructor(data) {
+        super(data.confirm);
+        this.confirmCommand = Command.create(() => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const result = yield data.operation(this.interactionContext);
+                this.done(result);
+            }
+            catch (e) {
+                this.cancel(e);
+            }
+        }));
+    }
+}
+ConfirmThenExecuteDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-confirmation-execute-dialog',
+                template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\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}\n"]
+            },] }
+];
+ConfirmThenExecuteDialogComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
+];
+
+class ConfirmationDialogComponent extends AbstractConfirmDialogComponent {
     constructor(confirm) {
-        super();
+        super(confirm);
         this.confirm = confirm;
-        assert.notNil(confirm);
         this.confirmCommand = Command.create(() => {
             return this.done();
         });
-        this.cancelCommand = Command.create(() => {
-            return this.cancel();
-        });
-        this.confirmFace = {
-            text: () => confirm.ok(),
-            color: () => this.isDestructive() ? 'warn' : 'primary',
-            style: () => 'raised'
-        };
-        this.cancelFace = {
-            text: () => confirm.cancel(),
-        };
-    }
-    ngOnInit() {
-    }
-    get titleColor() {
-        return this.isDestructive() ? 'warn' : undefined;
-    }
-    isDestructive() {
-        return this.confirm.destructive && this.confirm.destructive();
     }
 }
 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}"]
+                template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\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}\n"]
             },] }
 ];
 ConfirmationDialogComponent.ctorParameters = () => [
@@ -4345,6 +4834,12 @@ class AbstractInteractionContext {
             data: data
         }, true);
     }
+    confirmThenExecute(confirm, operation) {
+        return this.createAndLaunchActivity(ConfirmThenExecuteDialogComponent, {
+            confirm,
+            operation: operation
+        }, true);
+    }
 }
 
 class ActivityRef {
@@ -4450,7 +4945,7 @@ ActivityOutletComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-activity-outlet',
                 template: '',
-                styles: [":host{display:block}"]
+                styles: [":host{display:block}\n"]
             },] }
 ];
 ActivityOutletComponent.ctorParameters = () => [
@@ -4470,7 +4965,7 @@ class ActivityContainerComponent extends AbstractInteractionContext {
         this.activityRefs = [];
         this.garbage = new GarbageCollector();
         this.inAnimation = new MutableValueModel(false);
-        this.busy = new DelegatingValueModel().withDefault(false);
+        this.busy = this.registerDisposable(new DelegatingValueModel().withDefault(false));
         this.registerDisposable(this.busy);
     }
     ngOnInit() {
@@ -4646,8 +5141,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 +5195,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 +5220,9 @@ class AbstractActivityTriggerComponent extends DisposableComponent {
             });
         });
     }
+    get interactionContext() {
+        return lang$1.abstractMethod(this.constructor);
+    }
     ngOnInit() {
     }
     get isActive() {
@@ -4890,7 +5388,7 @@ InteractionService.ctorParameters = () => [
         constructor() {
             super();
             this._interactions = new MutableListModel();
-            this._disabledDelegate = new DelegatingValueModel().withDefault(false);
+            this._disabledDelegate = this.registerDisposable(new DelegatingValueModel().withDefault(false));
             const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
             this.active = chain(this._interactions).isNotEmpty();
             this.interactionContextIds = chain(this._interactions).pluck("identifier");
@@ -4946,14 +5444,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 +5487,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);
     }
@@ -5010,6 +5514,9 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
     confirmThen(confirm, activityType, data) {
         return this.activityContainerComponent.confirmThen(confirm, activityType);
     }
+    confirmThenExecute(confirm, operation) {
+        return this.activityContainerComponent.confirmThenExecute(confirm, operation);
+    }
     isActive() {
         return this.activityContainerComponent.isActive();
     }
@@ -5021,7 +5528,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 +5537,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 +5650,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 +5673,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 +5717,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 +5772,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 +5848,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 +5945,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 +5981,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 +6089,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,20 +6099,222 @@ 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 {
 }
@@ -5519,12 +6331,17 @@ InteractionModule.decorators = [
                     DirectivesModule,
                     FlexModule,
                     GridModule,
-                    ComponentsModule
+                    ComponentsModule,
+                    FormsModule,
+                    MatInputModule,
+                    MatFormFieldModule,
+                    A11yModule
                 ],
                 declarations: [
                     ActivityContainerComponent,
                     ConfirmationDialogComponent,
                     ConfirmThenDialogComponent,
+                    ConfirmThenExecuteDialogComponent,
                     AlertDialogComponent,
                     ActivityOutletComponent,
                     InPlaceInteractionContextComponent,
@@ -5533,7 +6350,7 @@ InteractionModule.decorators = [
                     PopupInteractionContextComponent,
                     StringInputActivity,
                     SelectInputActivity,
-                    AbstractInputActivity,
+                    InputActivity,
                     InteractionContextTriggerFor,
                     Activity,
                     ActivityTitleComponent,
@@ -5542,7 +6359,11 @@ InteractionModule.decorators = [
                     AbstractActivityTriggerComponent,
                     PopupActivityTriggerComponent,
                     InlineActivityTriggerComponent,
-                    ModalActivityTriggerComponent
+                    ModalActivityTriggerComponent,
+                    AddCardActivityComponent,
+                    InlineStringEditorComponent,
+                    AbstractDialogComponent,
+                    AbstractConfirmDialogComponent,
                 ],
                 exports: [
                     ActivityContainerComponent,
@@ -5558,13 +6379,15 @@ InteractionModule.decorators = [
                     ActivityBodyComponent,
                     PopupActivityTriggerComponent,
                     InlineActivityTriggerComponent,
-                    ModalActivityTriggerComponent
+                    ModalActivityTriggerComponent,
+                    AddCardActivityComponent,
+                    InlineStringEditorComponent,
                 ],
                 entryComponents: [
-                    ActivityContainerComponent,
-                    ConfirmationDialogComponent,
-                    ConfirmThenDialogComponent,
-                    AlertDialogComponent
+                // ActivityContainerComponent,
+                // ConfirmationDialogComponent,
+                // ConfirmThenDialogComponent,
+                // AlertDialogComponent
                 ],
                 providers: [
                     InteractionService
@@ -5575,7 +6398,7 @@ InteractionModule.decorators = [
             },] }
 ];
 
-const PARAMETER_DEFINITION_KEY = Symbol("parameterDefinition");
+const PARAMETER_DEFINITION_KEY = Symbol('parameterDefinition');
 class ParameterDefinition {
     constructor(propertyName, options, urlFormat) {
         this.propertyName = propertyName;
@@ -5602,20 +6425,43 @@ class ParameterDefinition {
     // @Trace()
     sanitise(value, visit, placeHistory, injector, isPopState) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.isMissingFrom(visit)) {
-                const returningFromSomewhereElse = !placeHistory.lastVisitIncluded(visit.placeDefinition);
-                if (returningFromSomewhereElse) {
-                    const lastKnownVisit = placeHistory.getMostRecentVisitFor(visit.placeDefinition);
-                    if (this.remember && lastKnownVisit) {
-                        value = lastKnownVisit.getParameterValue(this);
-                    }
-                    return this.isEmptyValue(value) ? this.defaultValue : value;
-                }
-            }
-            // todo: add custom sanitiser
+            // console.log(`sanitise(${this.propertyName})`)
+            value = yield this.sanitiseMissing(visit, placeHistory, value);
+            value = yield this.runCustomSanitiser(value, visit, placeHistory, injector, isPopState);
             return value;
         });
     }
+    runCustomSanitiser(value, visit, placeHistory, injector, isPopState) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const customSanitiser = this.prepareCustomSanitiser(injector);
+            return customSanitiser ? customSanitiser.sanitise(value, visit, injector) : value;
+        });
+    }
+    sanitiseMissing(visit, placeHistory, value) {
+        if (this.isMissingFrom(visit)) {
+            const returningFromSomewhereElse = !placeHistory.lastVisitIncluded(visit.placeDefinition);
+            if (returningFromSomewhereElse) {
+                const lastKnownVisit = placeHistory.getMostRecentVisitFor(visit.placeDefinition);
+                if (this.remember && lastKnownVisit) {
+                    value = lastKnownVisit.getParameterValue(this);
+                }
+                value = this.isEmptyValue(value) ? this.defaultValue : value;
+            }
+        }
+        return value;
+    }
+    prepareCustomSanitiser(injector) {
+        const customSanitiser = this.options.getOptional('sanitiser', null);
+        if (___default.isFunction(customSanitiser)) {
+            return injector.get(customSanitiser);
+        }
+        if (___default.isObject(customSanitiser)) {
+            return ___default.isFunction(customSanitiser['sanitise']) ?
+                customSanitiser :
+                lang$1.illegalState(`expected @VisitParameter({sanitiser: ...}) for ${this.propertyName} to be a constructor or instance of ParameterSanitiser, got: ` + customSanitiser);
+        }
+        return undefined;
+    }
     isMissingFrom(visit) {
         return !visit.hasParameter(this);
     }
@@ -5669,7 +6515,7 @@ class ParameterDefinition {
     function get(model) {
         const parameterDefinition = model[PARAMETER_DEFINITION_KEY];
         if (!parameterDefinition) {
-            lang$1.illegalArgument("model hasn't been annotated with @VisitParameter, @VisitParameterList or @RouteId");
+            lang$1.illegalArgument('model hasn\'t been annotated with @VisitParameter, @VisitParameterList or @RouteId');
         }
         return parameterDefinition;
     }
@@ -5839,16 +6685,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 +6718,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 +6737,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 +7790,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([
@@ -6962,10 +7834,10 @@ class Visit {
      * Returns the value of the place parameter with the specified name.  The parameter
      * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
      * same as the the ValueModel property name.
-     * @param parameterDef the visit parameter definition
+     * @param parameter the visit parameter definition
      */
-    getParameterValue(parameterDef) {
-        return this.visitParameters[parameterDef.name];
+    getParameterValue(parameter) {
+        return _.isString(parameter) ? this.visitParameters[parameter] : this.visitParameters[parameter.name];
     }
     // @Trace()
     hasParameter(parameterDef) {
@@ -6995,9 +7867,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) {
@@ -7176,6 +8052,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();
@@ -7191,7 +8070,7 @@ class PlaceRouter extends GarbageCollector {
          * An observable model containing the authoriser function.  This allows places to react to changes
          * in permissions when any underlying auth logic changes, e.g. a role being removed from a user.
          */
-        this._accessGuard = new DelegatingValueModel().withDefault(new PlaceAccessGuard.NoAuth());
+        this._accessGuard = this.registerDisposable(new DelegatingValueModel().withDefault(new PlaceAccessGuard.NoAuth()));
         if (window['Cypress']) {
             window['aup.PlaceRouter'] = this;
         }
@@ -7339,11 +8218,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
             });
@@ -7356,7 +8234,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);
@@ -7437,6 +8315,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.`);
@@ -7478,12 +8357,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) {
@@ -7509,7 +8382,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 = () => [];
@@ -7707,15 +8580,27 @@ class PlaceOutletComponent extends DisposableComponent {
         const { when, chain, valueOf } = Dsl.disposeWith(activePlace);
         when(this.routerVisitModel)
             .changes(visit => {
-            activePlace.updateVisit(visit);
+            this.pushVisitChangeToComponent(activePlace, visit);
         }, {
             unless: valueOf.any(this._isPushingVisitToRoute, this.routerVisitModel.isNil()).areTruthy()
         });
     }
+    pushVisitChangeToComponent(activePlace, visit) {
+        activePlace.updateVisit(visit);
+    }
     pushVisitChangeToRoute(previous, current) {
-        this._isPushingVisitToRoute.value = true;
-        this.placeRouter.pushVisitChangesToRoute(previous, current).finally(() => {
-            this._isPushingVisitToRoute.value = false;
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this._isPushingVisitToRoute.value = true;
+                yield this.placeRouter.pushVisitChangesToRoute(previous, current);
+            }
+            finally {
+                this._isPushingVisitToRoute.value = false;
+            }
+            // sanitisers may have adjusted other values in the visit to we check and write it back.
+            if (current.hasRoutingChangedFrom(this.routerVisitModel.value)) {
+                this.pushVisitChangeToComponent(this.activePlaceModel.value, this.routerVisitModel.value);
+            }
         });
     }
     // @Trace()
@@ -7735,7 +8620,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 = () => [
@@ -7776,7 +8661,7 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
     constructor(placeRouter) {
         super();
         this.placeRouter = placeRouter;
-        this._activePlaceComponent = new DelegatingValueModel();
+        this._activePlaceComponent = this.registerDisposable(new DelegatingValueModel());
         this.trackByPlaceDef = (data) => data.place;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.placeDefinitions = chain(this.placesModel)
@@ -7865,7 +8750,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 = () => [
@@ -7933,7 +8818,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 = () => [
@@ -7953,7 +8838,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 = () => [
@@ -8058,9 +8943,6 @@ const slideRightOnEnterAnimation = trigger('slideRightOnEnter', [
  * @file Automatically generated by barrelsby.
  */
 
-// const r:Result<string, number> = null;
-// r.catch(e => {}).then();
-
 class DialogInteractionContext extends AbstractInteractionContext {
     constructor(identifier, api, dialogService, config) {
         super();
@@ -8245,10 +9127,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));
@@ -8500,5 +9383,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, ALERT_CONFIG, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractConfirmDialogComponent, AbstractDialogComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, Alert, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CardStackComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnListModel, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmThenExecuteDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, 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, MarkdownComponent, MarkdownService, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, 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, markdownPillExtension, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator, ɵ0, ɵ1 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map