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

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), require('resize-observer-polyfill'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('wake-event')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', '@coolon/typescript-utilities', 'resize-observer-polyfill', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'wake-event'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.src, global.typescriptStringEnums, global.typescriptUtilities, global.ResizeObserver, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.wakeEvent));
-}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, src, typescriptStringEnums, typescriptUtilities, ResizeObserver, produce, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1, wakeEvent) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-bar'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('marked'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('resize-observer-polyfill'), require('immer'), require('@angular/cdk/a11y'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('wake-event')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-bar', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', 'marked', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', 'resize-observer-polyfill', 'immer', '@angular/cdk/a11y', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'wake-event'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon["angular-ui-powerups"] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressBar, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.marked, global.typescriptUtilities, global.src, global.typescriptStringEnums, global.ResizeObserver, global.produce, global.ng.cdk.a11y, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.wakeEvent));
+})(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressBar, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, marked, typescriptUtilities, src, typescriptStringEnums, ResizeObserver, produce, a11y, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1, wakeEvent) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,14 +15,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -262,10 +260,16 @@
                 r[k] = a[j];
         return r;
     }
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -353,7 +357,7 @@
         function CommandDirective(elementRef, matButton, matMenuItem) {
             var _this = _super.call(this) || this;
             _this.elementRef = elementRef;
-            _this._commandEnabled = new pectin.DelegatingValueModel().withDefault(false);
+            _this._commandEnabled = _this.registerDisposable(new pectin.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.
@@ -681,7 +685,7 @@
             var _a;
             var model = searchModel !== null && searchModel !== void 0 ? searchModel : (_a = this.highlightContext) === null || _a === void 0 ? void 0 : _a.aupHighlightTextModel;
             var searchText = model === null || model === void 0 ? void 0 : model.value;
-            if (___default['default'].isEmpty(searchText) || !___default['default'].isString(value)) {
+            if (___default["default"].isEmpty(searchText) || !___default["default"].isString(value)) {
                 return value;
             }
             // Match in a case insensitive manner
@@ -738,6 +742,67 @@
                 },] }
     ];
 
+    var markdownPillExtension = function (renderPill) {
+        return {
+            name: 'aup-pill',
+            level: 'inline',
+            start: function (src) {
+                var _a;
+                var index = (_a = src.match(/\(\([^)]/)) === null || _a === void 0 ? void 0 : _a.index;
+                // if (index) {
+                //     console.log({start:src})
+                // }
+                return index;
+            },
+            tokenizer: function (src) {
+                var rule = /^(\(\((([^)])+)\)\))/; // Regex for the complete token
+                var match = rule.exec(src);
+                if (match) {
+                    var 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)
+                var url = token.text;
+                return renderPill(token.text);
+            }
+        };
+    };
+
+    var MarkdownService = /** @class */ (function () {
+        function MarkdownService() {
+        }
+        MarkdownService.prototype.render = function (content) {
+            return marked.marked.parse(content, {
+                smartLists: true
+            });
+        };
+        MarkdownService.prototype.renderInline = function (content) {
+            return marked.marked.parseInline(content);
+        };
+        MarkdownService.prototype.usePillExtension = function (renderer) {
+            marked.marked.use({
+                extensions: [markdownPillExtension(renderer !== null && renderer !== void 0 ? renderer : (function (text) { return "<span class='aup-pill'>" + text + "<span>"; }))]
+            });
+        };
+        return MarkdownService;
+    }());
+    MarkdownService.decorators = [
+        { type: i0.Injectable }
+    ];
+    MarkdownService.ctorParameters = function () { return []; };
+
     var BusyOverlayComponent = /** @class */ (function (_super) {
         __extends(BusyOverlayComponent, _super);
         function BusyOverlayComponent() {
@@ -751,7 +816,7 @@
         { type: i0.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 = function () { return []; };
@@ -768,6 +833,32 @@
         __metadata("design:type", Boolean)
     ], BusyOverlayComponent.prototype, "busy", void 0);
 
+    var AbstractCardContainerComponent = /** @class */ (function (_super) {
+        __extends(AbstractCardContainerComponent, _super);
+        function AbstractCardContainerComponent() {
+            return _super.call(this) || this;
+        }
+        AbstractCardContainerComponent.prototype.ngOnInit = function () {
+        };
+        return AbstractCardContainerComponent;
+    }(DisposableComponent));
+    AbstractCardContainerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-abstract-card-container',
+                    template: ''
+                },] }
+    ];
+    AbstractCardContainerComponent.ctorParameters = function () { return []; };
+    AbstractCardContainerComponent.propDecorators = {
+        addCardCommand: [{ type: i0.Input }],
+        addCardFace: [{ type: i0.Input }],
+        addCardTemplate: [{ type: i0.ContentChild, args: ['addCardTemplate',] }]
+    };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.Command)
+    ], AbstractCardContainerComponent.prototype, "addCardCommand", void 0);
+
     /**
      * @example
      * // basic usage
@@ -785,6 +876,13 @@
      *   <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>
@@ -817,6 +915,7 @@
      * 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);
@@ -824,30 +923,154 @@
      */
     var CardContainerComponent = /** @class */ (function (_super) {
         __extends(CardContainerComponent, _super);
-        function CardContainerComponent() {
-            return _super.call(this) || this;
+        function CardContainerComponent(elementRef) {
+            var _this = _super.call(this) || this;
+            _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;
+            return _this;
         }
+        Object.defineProperty(CardContainerComponent.prototype, "columnCount", {
+            get: function () {
+                return this._columnCount;
+            },
+            set: function (count) {
+                if (!___namespace.isNil(count) && (!___namespace.isInteger(count) || count < 1)) {
+                    typescriptUtilities.lang.illegalState('columnCount must be a positive integer or nil');
+                }
+                this._columnCount = count;
+                this.updateColumnCountStyles();
+            },
+            enumerable: false,
+            configurable: true
+        });
         CardContainerComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            this.updateColumnCountStyles();
+        };
+        Object.defineProperty(CardContainerComponent.prototype, "isAutoColumns", {
+            get: function () {
+                return ___namespace.isNil(this._columnCount);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CardContainerComponent.prototype, "isSingleColumn", {
+            get: function () {
+                return this._columnCount === 1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CardContainerComponent.prototype.updateColumnCountStyles = function () {
+            var el = this.elementRef.nativeElement;
+            if (___namespace.isNil(this._columnCount)) {
+                el.style.setProperty('--aup-card-container-column-count', '');
+            }
+            else {
+                el.style.setProperty('--aup-card-container-column-count', this._columnCount);
+            }
         };
         return CardContainerComponent;
-    }(DisposableComponent));
+    }(AbstractCardContainerComponent));
     CardContainerComponent.decorators = [
         { type: i0.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 = function () { return []; };
+    CardContainerComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
     CardContainerComponent.propDecorators = {
-        addCardCommand: [{ type: i0.Input }],
-        addCardFace: [{ type: i0.Input }],
-        addCardTemplate: [{ type: i0.ContentChild, args: ["addCardTemplate",] }]
+        columnCount: [{ type: i0.Input }],
+        enabledScroll: [{ type: i0.Input }],
+        isAutoColumns: [{ type: i0.HostBinding, args: ['class.auto-columns',] }],
+        isSingleColumn: [{ type: i0.HostBinding, args: ['class.single-column',] }]
     };
-    __decorate([
-        pectin.TrackExternal(),
-        __metadata("design:type", pectin.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);
+     * }
+     */
+    var CardStackComponent = /** @class */ (function (_super) {
+        __extends(CardStackComponent, _super);
+        function CardStackComponent() {
+            var _this = _super.call(this) || this;
+            console.warn('<aup-card-stack></aup-card-stack> is deprecated.  Use <aup-card-container [columnCount]="1"> instead.');
+            return _this;
+        }
+        return CardStackComponent;
+    }(AbstractCardContainerComponent));
+    CardStackComponent.decorators = [
+        { type: i0.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 = function () { return []; };
 
     exports.CommandFace = void 0;
     (function (CommandFace) {
@@ -862,27 +1085,27 @@
             RAISED: 'raised'
         });
         function getColorOf(face) {
-            return ___default['default'].isFunction(face === null || face === void 0 ? void 0 : face.color) ? face.color() : undefined;
+            return ___default["default"].isFunction(face === null || face === void 0 ? void 0 : face.color) ? face.color() : undefined;
         }
         CommandFace.getColorOf = getColorOf;
         function getStyleOf(face) {
-            return ___default['default'].isFunction(face === null || face === void 0 ? void 0 : face.style) ? face.style() : undefined;
+            return ___default["default"].isFunction(face === null || face === void 0 ? void 0 : face.style) ? face.style() : undefined;
         }
         CommandFace.getStyleOf = getStyleOf;
         function getIconOf(face) {
-            return ___default['default'].isFunction(face === null || face === void 0 ? void 0 : face.icon) ? face.icon() : undefined;
+            return ___default["default"].isFunction(face === null || face === void 0 ? void 0 : face.icon) ? face.icon() : undefined;
         }
         CommandFace.getIconOf = getIconOf;
         function getIconPositionOf(face) {
-            return ___default['default'].isFunction(face === null || face === void 0 ? void 0 : face.iconPosition) ? face.iconPosition() : undefined;
+            return ___default["default"].isFunction(face === null || face === void 0 ? void 0 : face.iconPosition) ? face.iconPosition() : undefined;
         }
         CommandFace.getIconPositionOf = getIconPositionOf;
         function getTooltipOf(face) {
-            return ___default['default'].isFunction(face === null || face === void 0 ? void 0 : face.tooltip) ? face.tooltip() : undefined;
+            return ___default["default"].isFunction(face === null || face === void 0 ? void 0 : face.tooltip) ? face.tooltip() : undefined;
         }
         CommandFace.getTooltipOf = getTooltipOf;
         function getTextOf(face) {
-            return ___default['default'].isFunction(face === null || face === void 0 ? void 0 : face.text) ? face.text() : undefined;
+            return ___default["default"].isFunction(face === null || face === void 0 ? void 0 : face.text) ? face.text() : undefined;
         }
         CommandFace.getTextOf = getTextOf;
         var Adapter = /** @class */ (function () {
@@ -1015,6 +1238,13 @@
             _this.activeColor = activeFace.pluck("color");
             return _this;
         }
+        Object.defineProperty(CommandFaceComponent.prototype, "face", {
+            set: function (face) {
+                this.facesModel.value = [face];
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(CommandFaceComponent.prototype, "requiresMissingIconInLayout", {
             get: function () {
                 return this.includeMissingIconInLayout && !this.activeIcon.value;
@@ -1047,12 +1277,13 @@
                     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: i0.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 = function () { return []; };
     CommandFaceComponent.propDecorators = {
         _rawFaces: [{ type: i0.Input, args: ['faces',] }],
+        face: [{ type: i0.Input }],
         ignoreIcon: [{ type: i0.Input }],
         ignoreText: [{ type: i0.Input }],
         includeMissingIconInLayout: [{ type: i0.Input }],
@@ -1114,23 +1345,23 @@
             _this.CommandFace = exports.CommandFace;
             _this.alignFace = HorizontalAlignment.CENTER;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, switchOn = _a.switchOn;
-            _this.faces = chain(_this.command.busy).mapToList(function (busy) {
+            _this.faces$ = chain(_this.command.busy).mapToList(function (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(function (f) { return exports.CommandFace.getStyleOf(f); });
-            _this.colorModel = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getColorOf(f); });
-            _this.tooltipModel = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getTooltipOf(f); });
-            _this.iconOnly = _this.faces.select(function (face) {
-                return ___default['default'].isEmpty(exports.CommandFace.getTextOf(face)) && !___default['default'].isEmpty(exports.CommandFace.getIconOf(face));
-            }).count().equals(_this.faces.count());
+            _this.activeFace$ = _this.faces$.first();
+            _this.buttonStyle$ = chain(_this.activeFace$).map(function (f) { return exports.CommandFace.getStyleOf(f); });
+            _this.color$ = chain(_this.activeFace$).map(function (f) { return exports.CommandFace.getColorOf(f); });
+            _this.tooltip$ = chain(_this.activeFace$).map(function (f) { return exports.CommandFace.getTooltipOf(f); });
+            _this.iconOnly$ = _this.faces$.select(function (face) {
+                return ___default["default"].isEmpty(exports.CommandFace.getTextOf(face)) && !___default["default"].isEmpty(exports.CommandFace.getIconOf(face));
+            }).count().equals(_this.faces$.count());
             return _this;
         }
         CommandComponent.prototype.isActive = function (face) {
-            return this.activeFace.query().equals(face);
+            return this.activeFace$.query().equals(face);
         };
         CommandComponent.prototype.ngOnInit = function () {
         };
@@ -1145,8 +1376,8 @@
     CommandComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -1210,12 +1441,13 @@
         function AbstractPopupMenuComponent(element, parent) {
             var _this = _super.call(this, element, parent) || this;
             _this._unorderedChildren = new pectin.MutableListModel();
-            _this.faceModelDelegate = new pectin.DelegatingValueModel();
+            _this.faceModelDelegate = _this.registerDisposable(new pectin.DelegatingValueModel());
             _this.xPosition = 'after';
             _this.yPosition = 'below';
             var _c = pectin.Dsl.disposeWith(_this), chain = _c.chain, valueOf = _c.valueOf, before = _c.before, when = _c.when, after = _c.after, observe = _c.observe, switchOn = _c.switchOn;
             // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
             _this.faceAdapterModel = chain(_this.faceModelDelegate).map(function (f) { return new exports.CommandFace.Adapter(f); });
+            _this.faces$ = chain(_this.faceAdapterModel).pluck('face').mapToList(function (face) { return [face]; });
             _this.children = chain(_this._unorderedChildren).sortBy('componentIndex');
             return _this;
         }
@@ -1227,7 +1459,7 @@
             get: function () {
                 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 exports.CommandFace.Adapter(undefined);
             },
@@ -1275,7 +1507,7 @@
         enabledModel: [{ type: i0.Input }]
     };
     __decorate([
-        pectin.StoreInValueModel("enabledModel"),
+        pectin.StoreInValueModel('enabledModel'),
         __metadata("design:type", Boolean)
     ], AbstractPopupMenuComponent.prototype, "enabled", void 0);
     __decorate([
@@ -1314,7 +1546,7 @@
     MoreMenuComponent.decorators = [
         { type: i0.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 }
                     ]
@@ -1335,10 +1567,22 @@
     exports.TrackBy = void 0;
     (function (TrackBy) {
         TrackBy.byIndex = function (index, item) { return index; };
+        /**
+         * @deprecated use #track(MyType).by("property") instead.
+         * @param property
+         */
         function trackByProperty(property) {
             return function (index, item) { return item[property]; };
         }
         TrackBy.trackByProperty = trackByProperty;
+        function track(type) {
+            return {
+                by: function (property) {
+                    return function (index, item) { return item[property]; };
+                }
+            };
+        }
+        TrackBy.track = track;
     })(exports.TrackBy || (exports.TrackBy = {}));
 
     exports.CommandContainer = /** @class */ (function (_super) {
@@ -1403,7 +1647,7 @@
                     selector: 'aup-tool-bar',
                     template: '<div class="toolbar-content"><ng-content></ng-content></div>',
                     encapsulation: i0.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 = function () { return []; };
@@ -1429,8 +1673,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-separator',
                     template: "\n    <mat-divider [vertical]=\"!isHorizontalContainer()\"></mat-divider>",
-                    styles: [":host {\n  }",
-                        ":host(.horizontal-container) {\n      display: inline-flex;\n      flex-direction: row;\n      align-items: stretch;\n    }"]
+                    styles: [":host {\n  }", ":host(.horizontal-container) {\n      display: inline-flex;\n      flex-direction: row;\n      align-items: stretch;\n    }"]
                 },] }
     ];
     SeparatorComponent.ctorParameters = function () { return [
@@ -1446,7 +1689,7 @@
         __extends(PopupMenuRendererComponent, _super);
         function PopupMenuRendererComponent() {
             var _this = _super.call(this) || this;
-            _this._childList = new pectin.DelegatingListModel();
+            _this._childList = _this.registerDisposable(new pectin.DelegatingListModel());
             _this.commandFired = new i0.EventEmitter();
             _this.TrackBy = exports.TrackBy;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
@@ -1516,9 +1759,9 @@
         };
         PopupMenuRendererComponent.prototype.getFaces = function (child) {
             return this.isCommand(child) ?
-                child.faces.value :
+                child.faces$.value :
                 this.isPopupMenu(child) ?
-                    [child.faceAdapter.face] :
+                    child.faces$.value :
                     undefined;
         };
         return PopupMenuRendererComponent;
@@ -1546,14 +1789,13 @@
             var _this = _super.call(this, element, parent) || this;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             return _this;
-            // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
         }
         return PopupMenuComponent;
     }(AbstractPopupMenuComponent));
     PopupMenuComponent.decorators = [
         { type: i0.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 }
                     ]
@@ -1587,7 +1829,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-empty-state',
                     template: "\n      <div class=\"container\">\n          <ng-content></ng-content>\n      </div>\n  ",
-                    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 = function () { return []; };
@@ -1618,7 +1860,7 @@
                     providers: [
                         { provide: pectin.FocusManager }
                     ],
-                    styles: [":host{display:block}"]
+                    styles: [":host{display:block}\n"]
                 },] }
     ];
     FocusContainerComponent.ctorParameters = function () { return [
@@ -1685,6 +1927,7 @@
         function AbstractInputComponent() {
             var _this = _super.call(this) || this;
             _this.onValueEditedListeners = new pectin.EventListenerList();
+            _this.userFloatLabel = 'always'; // TODO: make this an injectable default
             _this.dense = false;
             // TODO: fix this.
             // tslint:disable-next-line:no-output-native
@@ -1966,10 +2209,10 @@
             _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             var lowerCaseFilterValue = chain(_this.filterValue)
-                .map(function (v) { return ___default['default'].isString(v) ? v.toLowerCase() : ''; });
+                .map(function (v) { return ___default["default"].isString(v) ? v.toLowerCase() : ''; });
             _this.filteredOptions = chain(_this.optionsModel)
                 .select(function (option) {
-                return ___default['default'].isEmpty(_this.filterValue.value) || _this.optionLabelFormat(option).toString().toLowerCase().includes(lowerCaseFilterValue.value);
+                return ___default["default"].isEmpty(_this.filterValue.value) || _this.optionLabelFormat(option).toString().toLowerCase().includes(lowerCaseFilterValue.value);
             }, { dependsOn: lowerCaseFilterValue });
             return _this;
         }
@@ -1989,8 +2232,8 @@
     AutocompleteInputComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -2029,7 +2272,7 @@
         { type: i0.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 = function () { return []; };
@@ -2059,8 +2302,8 @@
     MultipleSelectInputComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -2149,8 +2392,8 @@
     SelectInputComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -2191,7 +2434,7 @@
         { type: i0.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 = function () { return []; };
@@ -2228,7 +2471,7 @@
         { type: i0.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 = function () { return []; };
@@ -2272,7 +2515,7 @@
         { type: i0.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"]
                 },] }
     ];
     exports.IconComponent.propDecorators = {
@@ -2286,6 +2529,54 @@
         });
     })(exports.IconComponent || (exports.IconComponent = {}));
 
+    var LoadingContainerComponent = /** @class */ (function (_super) {
+        __extends(LoadingContainerComponent, _super);
+        function LoadingContainerComponent() {
+            return _super.call(this) || this;
+        }
+        Object.defineProperty(LoadingContainerComponent.prototype, "state", {
+            get: function () {
+                return this.loadingModel.value ? "loaded" : "loading";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        LoadingContainerComponent.prototype.ngOnInit = function () {
+        };
+        return LoadingContainerComponent;
+    }(pectin.GarbageCollector));
+    LoadingContainerComponent.decorators = [
+        { type: i0.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 = function () { return []; };
+    LoadingContainerComponent.propDecorators = {
+        loadingModel: [{ type: i0.Input }],
+        loading: [{ type: i0.Input }],
+        messageModel: [{ type: i0.Input }],
+        message: [{ type: i0.Input }],
+        state: [{ type: i0.HostBinding, args: ["class",] }]
+    };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], LoadingContainerComponent.prototype, "loadingModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel("loadingModel"),
+        __metadata("design:type", Boolean)
+    ], LoadingContainerComponent.prototype, "loading", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], LoadingContainerComponent.prototype, "messageModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel("messageModel"),
+        __metadata("design:type", String)
+    ], LoadingContainerComponent.prototype, "message", void 0);
+
     var NoopComponent = /** @class */ (function () {
         function NoopComponent() {
         }
@@ -2295,7 +2586,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-noop',
                     template: "",
-                    styles: [":host{display:block}"]
+                    styles: [":host{display:block}\n"]
                 },] }
     ];
     NoopComponent.ctorParameters = function () { return []; };
@@ -2311,29 +2602,37 @@
         { type: i0.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 = function () { return []; };
 
-    var SectionHeaderComponent = /** @class */ (function () {
+    var SectionHeaderComponent = /** @class */ (function (_super) {
+        __extends(SectionHeaderComponent, _super);
         function SectionHeaderComponent() {
-            this.underline = false;
+            var _this = _super.call(this) || this;
+            // readonly i18n = I18nMarsUi.components.layout.header;
+            _this.size = 'medium';
+            _this.borderTop = false;
+            _this.borderBottom = false;
+            return _this;
         }
         SectionHeaderComponent.prototype.ngOnInit = function () {
         };
         return SectionHeaderComponent;
-    }());
+    }(DisposableComponent));
     SectionHeaderComponent.decorators = [
         { type: i0.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 = function () { return []; };
     SectionHeaderComponent.propDecorators = {
-        underline: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.underline',] }]
+        size: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class',] }],
+        borderTop: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.border-top',] }],
+        borderBottom: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.border-bottom',] }]
     };
 
     var SwitchCaseOption = /** @class */ (function () {
@@ -2454,7 +2753,7 @@
         { type: i0.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 = function () { return [
@@ -2536,7 +2835,7 @@
         ResizeAwareComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             var element = this.elementRef.nativeElement;
-            var ro = new ResizeObserver__default['default'](function (entries, observer) {
+            var ro = new ResizeObserver__default["default"](function (entries, observer) {
                 _this.ngZone.run(function () { return _this._updateBounds(); });
             });
             ro.observe(element);
@@ -2737,19 +3036,38 @@
         __extends(EditRowControls, _super);
         function EditRowControls() {
             var _this = _super.call(this) || this;
-            _this.saveCommand = pectin.Command.create(function () {
-                _this.editSession.saveCommand.execute(_this.editSession.form)
-                    .then(function (finished) {
-                    if (finished) {
-                        _this.editSession.dispose();
+            _this.saveCommand = pectin.Command.create(function () { return __awaiter(_this, void 0, void 0, function () {
+                var finished;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.editSession.saveCommand.execute()];
+                        case 1:
+                            finished = _b.sent();
+                            if (finished) {
+                                this.editSession.dispose();
+                            }
+                            return [2 /*return*/];
                     }
                 });
-            });
+            }); });
             _this.cancelCommand = pectin.Command.create(function () {
                 _this.editSession.dispose();
-            });
+            }).disableWhile(_this.saveCommand.busy);
             return _this;
         }
+        Object.defineProperty(EditRowControls.prototype, "editSession", {
+            get: function () {
+                return this._session;
+            },
+            set: function (session) {
+                if (session) {
+                    session.form.disableWhile(this.saveCommand.busy);
+                }
+                this._session = session;
+            },
+            enumerable: false,
+            configurable: true
+        });
         EditRowControls.prototype.ngOnInit = function () {
         };
         Object.defineProperty(EditRowControls.prototype, "form", {
@@ -2766,7 +3084,7 @@
         { type: i0.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 = function () { return []; };
@@ -2843,16 +3161,23 @@
     };
     var ɵ0 = noop;
     var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol('aup-cell-renderer:row-data-cache');
-    var ColumnModel = /** @class */ (function () {
+    var DEFAULT_TEXT_SEARCH_PREDICATE = function (row, text) { return false; };
+    var ɵ1 = DEFAULT_TEXT_SEARCH_PREDICATE;
+    var ColumnModel = /** @class */ (function (_super) {
+        __extends(ColumnModel, _super);
         function ColumnModel(columnId, textPropertiesProvider) {
-            this.columnId = columnId;
-            this.textPropertiesProvider = textPropertiesProvider;
-            this._enableRowSelection = true;
-            this._flex = false;
-            this._defaultVisibility = new pectin.DelegatingValueModel().withDefault(true);
-            this._visible = new pectin.DelegatingValueModel().withDefault(this._defaultVisibility);
-            this.installHeaderRenderer();
-            this.dasherisedColumnId = typescriptUtilities.Stringy.from(columnId).dasherize().toString();
+            var _this = _super.call(this) || this;
+            _this.columnId = columnId;
+            _this.textPropertiesProvider = textPropertiesProvider;
+            _this._enableRowSelection = true;
+            _this._flex = false;
+            _this._defaultVisibility = _this.registerDisposable(new pectin.DelegatingValueModel().withDefault(true));
+            _this._visible = _this.registerDisposable(new pectin.DelegatingValueModel().withDefault(_this._defaultVisibility));
+            _this._columnModelTextSearchPredicate = undefined;
+            _this._cellRendererTextSearchPredicate = undefined;
+            _this.installHeaderRenderer();
+            _this.dasherisedColumnId = typescriptUtilities.Stringy.from(columnId).dasherize().toString();
+            return _this;
         }
         ColumnModel.prototype.installHeaderRenderer = function () {
             this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
@@ -2883,6 +3208,21 @@
         ColumnModel.prototype.getDefaultHeaderText = function () {
             return this.columnId;
         };
+        Object.defineProperty(ColumnModel.prototype, "isTextMatch", {
+            get: function () {
+                return this._columnModelTextSearchPredicate || this._cellRendererTextSearchPredicate || DEFAULT_TEXT_SEARCH_PREDICATE;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Sets the predicate to use when checking if the specified row is a text match for this column.
+         * @param predicate
+         */
+        ColumnModel.prototype.useTextSearchPredicate = function (predicate) {
+            this._columnModelTextSearchPredicate = predicate;
+            return this;
+        };
         ColumnModel.prototype.getColumnTextProperties = function () {
             return this._columnTextProperties || this.textPropertiesProvider();
         };
@@ -2934,6 +3274,12 @@
         };
         ColumnModel.prototype.onRendererAttached = function (host, component) {
             this._cellRendererPortalRef.onPortalAttached(host, component);
+            if (___default["default"].isFunction(component === null || component === void 0 ? void 0 : component.matches)) {
+                this._cellRendererTextSearchPredicate = function (row, text) { return component.matches(row, text); };
+            }
+            else {
+                this._cellRendererTextSearchPredicate = undefined;
+            }
         };
         // @Trace()
         ColumnModel.prototype.onEditorAttached = function (host, component) {
@@ -2950,7 +3296,7 @@
             return this._enableRowSelection;
         };
         return ColumnModel;
-    }());
+    }(pectin.GarbageCollector));
     __decorate([
         src.Memoize(),
         __metadata("design:type", Function),
@@ -2968,27 +3314,27 @@
         function PropertyColumnModel(id, property, defaults) {
             var _this = _super.call(this, id, defaults) || this;
             _this.property = property;
-            _this._format = function (value) { return value; };
+            _this._format = function (value) { return value === null || value === void 0 ? void 0 : value.toString(); };
             _this.cellRenderer(DefaultCellRendererComponent);
+            _this.useTextSearchPredicate(function (row, regex) {
+                return regex.test(_this._format(row[_this.property]));
+            });
             return _this;
         }
         PropertyColumnModel.prototype.cellRenderer = function (componentType, onComponentInitOrOptions) {
             var _this = this;
             this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
                 if (firstTime) {
-                    if (___default['default'].isFunction(onComponentInitOrOptions)) {
+                    if (___default["default"].isFunction(onComponentInitOrOptions)) {
                         onComponentInitOrOptions(component);
                     }
                     else {
-                        if (___default['default'].isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
+                        if (___default["default"].isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
                             onComponentInitOrOptions.onComponentInit(component);
                         }
                     }
                 }
                 component.value = _this._format(rowData.row[_this.property]);
-                if (!___default['default'].isFunction(onComponentInitOrOptions) && ___default['default'].isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
-                    onComponentInitOrOptions.onRowUpdate(component, rowData.row);
-                }
             }));
             return this;
         };
@@ -3008,7 +3354,7 @@
                 component[CELL_RENDERER_COMPONENT_ROW_CACHE] = rowData.row;
                 var disableEditCallback = false;
                 if (firstTime) {
-                    if (___default['default'].isFunction(options === null || options === void 0 ? void 0 : options.onComponentInit)) {
+                    if (___default["default"].isFunction(options === null || options === void 0 ? void 0 : options.onComponentInit)) {
                         options.onComponentInit(component);
                     }
                     // install our edit callback
@@ -3023,7 +3369,7 @@
                 disableEditCallback = true;
                 component.value = rowData.row[_this.property];
                 disableEditCallback = false;
-                if (!___default['default'].isFunction(options) && ___default['default'].isFunction(options === null || options === void 0 ? void 0 : options.onRowUpdate)) {
+                if (!___default["default"].isFunction(options) && ___default["default"].isFunction(options === null || options === void 0 ? void 0 : options.onRowUpdate)) {
                     options.onRowUpdate(component, rowData.row);
                 }
             }));
@@ -3032,7 +3378,7 @@
         PropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, onComponentInit) {
             var _this = this;
             var validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
-            var initialiser = ___default['default'].isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
+            var initialiser = ___default["default"].isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
             this.configureCellEditor(new CellEditorPortalRef(editor, function (component, editSession) {
                 var formValueModel = editSession.form.pluck(_this.property);
                 if (validators) {
@@ -3062,6 +3408,9 @@
             _this.property = property;
             _this._format = function (value) { return value.map(function (v) { return v === null || v === void 0 ? void 0 : v.toString(); }).join(', '); };
             _this.cellRenderer(DefaultCellRendererComponent);
+            _this.useTextSearchPredicate(function (row, regex) {
+                return regex.test(_this._format(row[_this.property]));
+            });
             return _this;
         }
         ListPropertyColumnModel.prototype.cellRenderer = function (componentType) {
@@ -3074,7 +3423,7 @@
         ListPropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, initialiseComponent) {
             var _this = this;
             var validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
-            var initialiser = ___default['default'].isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
+            var initialiser = ___default["default"].isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
             this.configureCellEditor(new CellEditorPortalRef(editor, function (component, editSession) {
                 var formListModel = editSession.form.pluckList(_this.property);
                 if (validators) {
@@ -3109,17 +3458,17 @@
             var _this = this;
             this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
                 if (firstTime) {
-                    if (___default['default'].isFunction(onComponentInitOrOptions)) {
+                    if (___default["default"].isFunction(onComponentInitOrOptions)) {
                         onComponentInitOrOptions(component);
                     }
                     else {
-                        if (___default['default'].isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
+                        if (___default["default"].isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
                             onComponentInitOrOptions.onComponentInit(component);
                         }
                     }
                 }
                 component.value = _this.getValue(rowData.row);
-                if (!___default['default'].isFunction(onComponentInitOrOptions) && ___default['default'].isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
+                if (!___default["default"].isFunction(onComponentInitOrOptions) && ___default["default"].isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
                     onComponentInitOrOptions.onRowUpdate(component, rowData.row);
                 }
             }));
@@ -3132,7 +3481,7 @@
     }(ColumnModel));
     var EditorControlColumnModel = /** @class */ (function (_super) {
         __extends(EditorControlColumnModel, _super);
-        function EditorControlColumnModel(columnId, saveCommand, defaults) {
+        function EditorControlColumnModel(columnId, saveCommandFactory, defaults) {
             var _this = _super.call(this, columnId, defaults) || this;
             _this.cellRenderer(EditRowControls);
             return _this;
@@ -3497,7 +3846,7 @@
         { type: i0.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 = function () { return []; };
@@ -3530,8 +3879,6 @@
         TableRowMenuComponent.prototype.registerMoreAction = function (commandFactory, properties) {
             this.moreActions.push(new MenuItemData(commandFactory, properties));
         };
-        TableRowMenuComponent.prototype.ngOnInit = function () {
-        };
         TableRowMenuComponent.prototype.createMoreMenuCommand = function (item, value) {
             var _this = this;
             var when = pectin.Dsl.disposeWith(this).when;
@@ -3586,6 +3933,7 @@
             if (this.hasColumn(column.columnId)) {
                 pectin.lang.illegalState("Column with id=" + column.columnId + " already exists");
             }
+            this.registerDisposable(column);
             this.runInTransaction(function () {
                 if (!___namespace.isNil(index)) {
                     _this._allColumns.insert(index, column);
@@ -3593,7 +3941,7 @@
                 else {
                     _this._allColumns.push(column);
                 }
-                _this.trackSource(column.visible);
+                _this.registerDisposable(_this.trackSource(column.visible));
             });
             return column;
         };
@@ -3618,7 +3966,7 @@
                 // if (!this._liveRowValue.value[immerable]) {
                 //   console.warn()
                 // }
-                _this._liveRowValue.value = produce__default['default'](_this._liveRowValue.value, function (draft) {
+                _this._liveRowValue.value = produce__default["default"](_this._liveRowValue.value, function (draft) {
                     _this.form.writeDirtyStateTo(draft);
                 });
             });
@@ -3640,7 +3988,7 @@
         __extends(AbstractTableModel, _super);
         function AbstractTableModel() {
             var _this = _super.call(this) || this;
-            _this._dataSource = new pectin.DelegatingListModel();
+            _this._dataSource = _this.registerDisposable(new pectin.DelegatingListModel());
             _this._columnList = _this.registerDisposable(new ColumnListModel());
             _this._editorSessions = new pectin.MutableListModel();
             _this.rowClassNamePredicates = [];
@@ -3662,6 +4010,12 @@
             _this.rowSelectionDisabledOnAllColumns = chain(_this._columnList).select(function (column) { return column.isRowSelectionEnabled(); }).count().equals(0);
             return _this;
         }
+        AbstractTableModel.prototype.findMatchingColumns = function (row, regex) {
+            return this.columns.value.filter(function (c) { return c.isTextMatch(row, regex); });
+        };
+        AbstractTableModel.prototype.hasMatchingColumn = function (row, regex) {
+            return !!this.columns.value.find(function (c) { return c.isTextMatch(row, regex); });
+        };
         AbstractTableModel.prototype.setDataSource = function (sourceOfTruth) {
             this._dataSource.setDelegate(sourceOfTruth);
         };
@@ -3711,11 +4065,14 @@
             }
             return selectionColumnModel;
         };
-        AbstractTableModel.prototype.addEditControls = function (saveCommand) {
+        AbstractTableModel.prototype.addEditControls = function (saveCommandFactory, formFactory) {
             var _this = this;
-            this.saveCommand = saveCommand;
+            this.saveCommandFactory = saveCommandFactory;
+            if (___namespace.isFunction(formFactory)) {
+                this._createForm = formFactory;
+            }
             var columnId = 'editControls';
-            return this.addColumn(new EditorControlColumnModel(columnId, saveCommand, function () { return _this.getColumnTextProperties(columnId); }));
+            return this.addColumn(new EditorControlColumnModel(columnId, saveCommandFactory, function () { return _this.getColumnTextProperties(columnId); }));
         };
         AbstractTableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
             var _this = this;
@@ -3763,19 +4120,20 @@
             if (this._rowsBeingEdited.query().indexOf(row) > -1) {
                 return pectin.lang.illegalState("Row with id=" + rowId + " already being edited");
             }
-            else {
-                var editSession_1 = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
-                var when = pectin.Dsl.disposeWith(editSession_1).when;
-                when(editSession_1.liveRowValue).changes(function (editedValue) {
-                    _this._rowsBeingEdited.replaceOrPush(editedValue);
-                }, { initialValue: 'triggerChangeUnlessNil' });
-                this._editorSessions.push(editSession_1);
-                editSession_1.onDispose(function () {
-                    _this._rowsBeingEdited.remove(editSession_1.liveRowValue.value);
-                    _this._editorSessions.remove(editSession_1);
-                });
-                return editSession_1;
-            }
+            // todo: pass the factories to the edit session so we can make the whole lot pluggable?
+            var form = this._createForm(row);
+            var saveCommand = this.saveCommandFactory.create(form);
+            var editSession = new EditSession(rowId, row, form, saveCommand);
+            var when = pectin.Dsl.disposeWith(editSession).when;
+            when(editSession.liveRowValue).changes(function (editedValue) {
+                _this._rowsBeingEdited.replaceOrPush(editedValue);
+            }, { initialValue: 'triggerChangeUnlessNil' });
+            this._editorSessions.push(editSession);
+            editSession.onDispose(function () {
+                _this._rowsBeingEdited.remove(editSession.liveRowValue.value);
+                _this._editorSessions.remove(editSession);
+            });
+            return editSession;
         };
         AbstractTableModel.prototype.getEditSessionFor = function (row) {
             return this._editorSessionByRowId.get(this.identityOf(row));
@@ -3792,12 +4150,16 @@
             return this.isRowSelectionEnabled() && column.isRowSelectionEnabled();
         };
         AbstractTableModel.prototype.isRowSelectionEnabled = function () {
-            return this.hasSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
+            return this.hasUserSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
         };
-        AbstractTableModel.prototype.hasSelectionModel = function () {
+        AbstractTableModel.prototype.hasUserSelectionModel = function () {
             var _a;
             return !!((_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel.getDelegate());
         };
+        AbstractTableModel.prototype.getSelectionModel = function () {
+            var _a;
+            return (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel;
+        };
         AbstractTableModel.prototype.isHoverEnabled = function () {
             return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
         };
@@ -3865,18 +4227,19 @@
      *   --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
+     *        }
+     *      }
      *   }
      * }
      */
@@ -3897,7 +4260,7 @@
                     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 = function () { return [
@@ -3950,7 +4313,7 @@
         { type: i0.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"]
                 },] }
     ];
     exports.TreeInheritanceIconComponent.ctorParameters = function () { return []; };
@@ -4192,17 +4555,17 @@
             var _this = this;
             var chain = pectin.Dsl.disposeWith(this).chain;
             this.canExpand = chain(this.nodeModel).map(function (node) {
-                return exports.DecoratedTreeNode.getDecorator(node).hasChildren() && _this.expansionModel.isCollapsed(node);
-            }, { dependsOn: this.expansionModel.isExpandedPredicate });
+                return exports.DecoratedTreeNode.getDecorator(node).hasChildren() && _this.treeTableModel.isCollapsed(node);
+            }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
             this.canCollapse = chain(this.nodeModel).map(function (node) {
-                return exports.DecoratedTreeNode.getDecorator(node).hasChildren() && !_this.expansionModel.isCollapsed(node);
-            }, { dependsOn: this.expansionModel.isExpandedPredicate });
+                return exports.DecoratedTreeNode.getDecorator(node).hasChildren() && !_this.treeTableModel.isCollapsed(node);
+            }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
             this.iconModel = chain(this.nodeModel).map(function (node) {
                 var _a;
-                var expanded = _this.expansionModel.isExpanded(_this.node);
+                var expanded = _this.treeTableModel.treeExpansionModel.isExpanded(_this.node);
                 var 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 });
         };
         Object.defineProperty(TreeLabelCellRendererComponent.prototype, "isRoot", {
             get: function () {
@@ -4226,16 +4589,18 @@
             configurable: true
         });
         // @Trace()
-        TreeLabelCellRendererComponent.prototype.expandOrCollapse = function (node) {
-            this.expansionModel.isCollapsed(node) ? this.expansionModel.expand(node) : this.expansionModel.collapse(node);
+        TreeLabelCellRendererComponent.prototype.expandOrCollapse = function ($event, node) {
+            $event.preventDefault();
+            $event.stopPropagation();
+            this.treeTableModel.isCollapsed(node) ? this.treeTableModel.expand(node) : this.treeTableModel.collapse(node);
         };
         return TreeLabelCellRendererComponent;
     }(DisposableComponent));
     exports.TreeLabelCellRendererComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
     exports.TreeLabelCellRendererComponent.ctorParameters = function () { return []; };
@@ -4243,7 +4608,7 @@
         value: [{ type: i0.Input }],
         label: [{ type: i0.Input }],
         iconFactory: [{ type: i0.Input }],
-        expansionModel: [{ type: i0.Input }],
+        treeTableModel: [{ type: i0.Input }],
         isRoot: [{ type: i0.HostBinding, args: ['class.root',] }],
         isLeaf: [{ type: i0.HostBinding, args: ['class.leaf',] }]
     };
@@ -4252,22 +4617,29 @@
         __metadata("design:type", Object)
     ], exports.TreeLabelCellRendererComponent.prototype, "value", void 0);
     (function (TreeLabelCellRendererComponent) {
-        TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY = function (node, expanded, defaultIcon) { return expanded ? 'mat:expand_more' : 'mat:chevron_right'; };
+        TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY = function (node, expanded, defaultIcon) {
+            var isLeaf = exports.DecoratedTreeNode.getDecorator(node).isLeaf();
+            return isLeaf ?
+                undefined :
+                expanded ?
+                    'mat:expand_more' :
+                    'mat:chevron_right';
+        };
     })(exports.TreeLabelCellRendererComponent || (exports.TreeLabelCellRendererComponent = {}));
 
     var FlattenedTreeListModel = /** @class */ (function (_super) {
         __extends(FlattenedTreeListModel, _super);
         function FlattenedTreeListModel(source, childRef, expansionModel) {
-            var _this = _super.call(this, source) || this;
+            var _this = _super.call(this, source, {
+                initialValue: [],
+                identifiedWith: function (row) { return source.identityOf(row); }
+            }) || this;
             _this.source = source;
             _this.childRef = childRef;
             _this.expansionModel = expansionModel;
             _this.trackSource(expansionModel.isExpandedPredicate);
             return _this;
         }
-        FlattenedTreeListModel.prototype.getIdentityOf = function (item) {
-            return this.source.identityOf(item);
-        };
         FlattenedTreeListModel.prototype.compute = function (values) {
             var _this = this;
             var result = [];
@@ -4366,10 +4738,10 @@
             var _this = this;
             this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
                 if (firstTime) {
-                    component.expansionModel = _this.expansionModel;
+                    component.treeTableModel = _this.expansionModel;
                 }
                 component.value = rowData.row;
-                component.label = ___default['default'].isNil(_this.labelProperty) ? undefined : rowData.row[_this.labelProperty];
+                component.label = ___default["default"].isNil(_this.labelProperty) ? undefined : rowData.row[_this.labelProperty];
                 component.iconFactory = _this.iconFactory;
             }));
             return this;
@@ -4400,12 +4772,13 @@
             var childExtractor = ___namespace.isFunction(childAccessor) ? childAccessor : function (row) { return row[childAccessor]; };
             _this.flattenedDataSource = _this.registerDisposable(new FlattenedTreeListModel(source, childExtractor, _this.treeExpansionModel));
             _this.setDataSource(_this.flattenedDataSource);
+            _this.addRowClass('aup-node-collapsed', function (row) { return _this.isCollapsed(row); });
             return _this;
         }
         TreeTableModel.prototype.treeControlColumn = function (builder) {
             var _this = this;
             var columnId = 'tree-label';
-            var column = new TreeLabelColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, this.treeExpansionModel);
+            var column = new TreeLabelColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, this);
             builder(column);
             this.addColumn(column);
         };
@@ -4413,7 +4786,7 @@
             this.treeExpansionModel.expand(node);
         };
         TreeTableModel.prototype.collapse = function (node) {
-            this.treeExpansionModel.expand(node);
+            this.treeExpansionModel.collapse(node);
         };
         TreeTableModel.prototype.isCollapsed = function (node) {
             return this.treeExpansionModel.isCollapsed(node);
@@ -4549,7 +4922,7 @@
                     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 = function () { return [
@@ -4606,7 +4979,7 @@
                     providers: [
                         { provide: pectin.FocusManager }
                     ],
-                    styles: [":host{display:block}"]
+                    styles: [":host{display:block}\n"]
                 },] }
     ];
     VerticalFocusContainerComponent.ctorParameters = function () { return [
@@ -4670,7 +5043,7 @@
         { type: i0.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 = function () { return []; };
@@ -4682,35 +5055,156 @@
         __metadata("design:type", pectin.PageController)
     ], PaginatorComponent.prototype, "pageController", void 0);
 
-    var ComponentsModule = /** @class */ (function () {
-        function ComponentsModule(faIconLibrary) {
-            faIconLibrary.addIconPacks(freeSolidSvgIcons.fas);
+    var LabelledValueComponent = /** @class */ (function (_super) {
+        __extends(LabelledValueComponent, _super);
+        function LabelledValueComponent() {
+            return _super.call(this) || this;
+            // const {chain} = Dsl.disposeWith(this);
         }
-        return ComponentsModule;
-    }());
-    ComponentsModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        AbstractInputComponent,
-                        AbstractValueInputComponent,
-                        AbstractListInputComponent,
-                        NumberInputComponent,
-                        StringInputComponent,
-                        TextInputComponent,
-                        PasswordInputComponent,
-                        SelectInputComponent,
-                        MultipleSelectInputComponent,
-                        AutocompleteInputComponent,
-                        CheckboxInputComponent,
-                        ScrollContainerComponent,
-                        NoopComponent,
-                        SwitchCaseComponent,
-                        SwitchCaseWhenDirective,
-                        SwitchCaseDefaultDirective,
-                        FocusContainerComponent,
-                        VerticalFocusContainerComponent,
-                        FocusableComponent,
-                        CardContainerComponent,
+        LabelledValueComponent.prototype.ngOnInit = function () {
+        };
+        return LabelledValueComponent;
+    }(DisposableComponent));
+    LabelledValueComponent.decorators = [
+        { type: i0.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 = function () { return []; };
+    LabelledValueComponent.propDecorators = {
+        label: [{ type: i0.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>
+     */
+    var MarkdownComponent = /** @class */ (function (_super) {
+        __extends(MarkdownComponent, _super);
+        function MarkdownComponent(platform, element, markdownService) {
+            var _this = _super.call(this) || this;
+            _this.platform = platform;
+            _this.element = element;
+            _this.markdownService = markdownService;
+            _this.inline = false;
+            var chain = pectin.Dsl.disposeWith(_this).chain;
+            return _this;
+        }
+        MarkdownComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var when = pectin.Dsl.disposeWith(this).when;
+            when(this.content$).changes(function (content) { return _this.renderContent(content); }, { initialValue: 'triggerChangeUnlessNil' });
+            if (___namespace.isNil(this.content) && !___namespace.isEmpty(this.element.nativeElement.innerHTML)) {
+                this.renderContent(this.extractInnerContent(this.element.nativeElement.innerHTML));
+            }
+        };
+        MarkdownComponent.prototype.extractInnerContent = function (content) {
+            var lines = content.split('\n');
+            var prefix = lines.reduce(function (minPrefix, line) {
+                var leadingWhitespace = line.search(/\S/);
+                return leadingWhitespace < 0 ? minPrefix : Math.min(minPrefix, leadingWhitespace);
+            }, Number.MAX_SAFE_INTEGER);
+            return lines.map(function (l) { return l.substr(prefix); }).join('\n');
+        };
+        MarkdownComponent.prototype.renderContent = function (content) {
+            if (!___namespace.isNil(content)) {
+                var markdown = this.inline ?
+                    this.markdownService.renderInline(content) :
+                    this.markdownService.render(content);
+                this.element.nativeElement.innerHTML = markdown;
+            }
+        };
+        return MarkdownComponent;
+    }(DisposableComponent));
+    MarkdownComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-markdown, [aupMarkdown]',
+                    template: "<ng-content></ng-content>\n",
+                    styles: [":host{display:inline-block}\n"]
+                },] }
+    ];
+    MarkdownComponent.ctorParameters = function () { return [
+        { type: Object, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] },
+        { type: i0.ElementRef },
+        { type: MarkdownService }
+    ]; };
+    MarkdownComponent.propDecorators = {
+        content$: [{ type: i0.Input }],
+        content: [{ type: i0.Input }],
+        inline: [{ type: i0.Input }]
+    };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], MarkdownComponent.prototype, "content$", void 0);
+    __decorate([
+        pectin.StoreInValueModel('content$'),
+        __metadata("design:type", String)
+    ], MarkdownComponent.prototype, "content", void 0);
+
+    var ComponentsModule = /** @class */ (function () {
+        function ComponentsModule(faIconLibrary) {
+            faIconLibrary.addIconPacks(freeSolidSvgIcons.fas);
+        }
+        return ComponentsModule;
+    }());
+    ComponentsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i2.CommonModule,
+                        animations.BrowserAnimationsModule,
+                        forms.FormsModule,
+                        input.MatInputModule,
+                        formField.MatFormFieldModule,
+                        select.MatSelectModule,
+                        tabs.MatTabsModule,
+                        DirectivesModule,
+                        icon.MatIconModule,
+                        button.MatButtonModule,
+                        checkbox.MatCheckboxModule,
+                        table.MatTableModule,
+                        portal.PortalModule,
+                        scrolling.CdkScrollableModule,
+                        angularFontawesome.FontAwesomeModule,
+                        tooltip.MatTooltipModule,
+                        autocomplete.MatAutocompleteModule,
+                        menu.MatMenuModule,
+                        divider.MatDividerModule,
+                        progressSpinner.MatProgressSpinnerModule,
+                        progressBar.MatProgressBarModule
+                    ],
+                    declarations: [
+                        AbstractInputComponent,
+                        AbstractValueInputComponent,
+                        AbstractListInputComponent,
+                        NumberInputComponent,
+                        StringInputComponent,
+                        TextInputComponent,
+                        PasswordInputComponent,
+                        SelectInputComponent,
+                        MultipleSelectInputComponent,
+                        AutocompleteInputComponent,
+                        CheckboxInputComponent,
+                        ScrollContainerComponent,
+                        NoopComponent,
+                        SwitchCaseComponent,
+                        SwitchCaseWhenDirective,
+                        SwitchCaseDefaultDirective,
+                        FocusContainerComponent,
+                        VerticalFocusContainerComponent,
+                        FocusableComponent,
+                        CardContainerComponent,
                         TableComponent,
                         EditRowControls,
                         ColumnTemplateDirective,
@@ -4738,29 +5232,12 @@
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
-                        AbstractTableComponent
-                    ],
-                    imports: [
-                        i2.CommonModule,
-                        animations.BrowserAnimationsModule,
-                        forms.FormsModule,
-                        input.MatInputModule,
-                        formField.MatFormFieldModule,
-                        select.MatSelectModule,
-                        tabs.MatTabsModule,
-                        DirectivesModule,
-                        icon.MatIconModule,
-                        button.MatButtonModule,
-                        checkbox.MatCheckboxModule,
-                        table.MatTableModule,
-                        portal.PortalModule,
-                        scrolling.CdkScrollableModule,
-                        angularFontawesome.FontAwesomeModule,
-                        tooltip.MatTooltipModule,
-                        autocomplete.MatAutocompleteModule,
-                        menu.MatMenuModule,
-                        divider.MatDividerModule,
-                        progressSpinner.MatProgressSpinnerModule
+                        AbstractTableComponent,
+                        AbstractCardContainerComponent,
+                        CardStackComponent,
+                        LabelledValueComponent,
+                        LoadingContainerComponent,
+                        MarkdownComponent
                     ],
                     exports: [
                         NumberInputComponent,
@@ -4797,9 +5274,14 @@
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
+                        CardStackComponent,
+                        LabelledValueComponent,
+                        LoadingContainerComponent,
+                        MarkdownComponent
                     ],
                     providers: [
-                        FocusBindingFactory
+                        FocusBindingFactory,
+                        MarkdownService
                     ]
                 },] }
     ];
@@ -4828,12 +5310,13 @@
      *     <span>This content will be between the two commands</span>
      * </aup-activity-actions>
      */
-    var ActivityActionsComponent = /** @class */ (function (_super) {
+    exports.ActivityActionsComponent = /** @class */ (function (_super) {
         __extends(ActivityActionsComponent, _super);
         function ActivityActionsComponent(cdr) {
             var _this = _super.call(this) || this;
             _this.cdr = cdr;
-            _this.align = 'stretch';
+            _this.layout = ActivityActionsComponent.Layout.BLOCK;
+            _this.align = ActivityActionsComponent.Align.STRETCH;
             return _this;
         }
         Object.defineProperty(ActivityActionsComponent.prototype, "faces", {
@@ -4854,20 +5337,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ActivityActionsComponent.prototype, "alignEnd", {
-            get: function () {
-                return this.align === 'end';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ActivityActionsComponent.prototype, "alignStretch", {
-            get: function () {
-                return this.align === 'stretch';
-            },
-            enumerable: false,
-            configurable: true
-        });
         ActivityActionsComponent.prototype.ngOnInit = function () {
         };
         ActivityActionsComponent.prototype.hasConfirmFace = function () {
@@ -4883,44 +5352,55 @@
         };
         return ActivityActionsComponent;
     }(DisposableComponent));
-    ActivityActionsComponent.decorators = [
+    exports.ActivityActionsComponent.decorators = [
         { type: i0.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 = function () { return [
+    exports.ActivityActionsComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef }
     ]; };
-    ActivityActionsComponent.propDecorators = {
+    exports.ActivityActionsComponent.propDecorators = {
         confirmCommand: [{ type: i0.Input }],
         cancelCommand: [{ type: i0.Input }],
         faces: [{ type: i0.Input }],
         confirmFace: [{ type: i0.Input }],
         cancelFace: [{ type: i0.Input }],
         style: [{ type: i0.Input }],
-        align: [{ type: i0.Input }],
-        alignEnd: [{ type: i0.HostBinding, args: ['class.align-end',] }],
-        alignStretch: [{ type: i0.HostBinding, args: ['class.align-stretch',] }]
+        layout: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.layout',] }],
+        align: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.align',] }]
     };
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", pectin.Command)
-    ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+    ], exports.ActivityActionsComponent.prototype, "confirmCommand", void 0);
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", pectin.Command)
-    ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+    ], exports.ActivityActionsComponent.prototype, "cancelCommand", void 0);
+    (function (ActivityActionsComponent) {
+        ActivityActionsComponent.Layout = typescriptStringEnums.Enum({
+            INLINE: 'inline',
+            BLOCK: 'block'
+        });
+        ActivityActionsComponent.Align = typescriptStringEnums.Enum({
+            START: 'start',
+            END: 'end',
+            STRETCH: 'stretch'
+        });
+    })(exports.ActivityActionsComponent || (exports.ActivityActionsComponent = {}));
 
     var ACTIVITY_DATA = new i0.InjectionToken('InteractionActivityData');
     var Activity = /** @class */ (function (_super) {
         __extends(Activity, _super);
         function Activity() {
             var _this = _super.call(this) || this;
-            _this._busyModel = new pectin.DelegatingValueModel().withDefault(false);
+            _this._busyModel = _this.registerDisposable(new pectin.DelegatingValueModel().withDefault(false));
             _this._focusedModel = _this.registerDisposable(new pectin.DelegatingValueModel());
             _this.class = 'aup-activity';
+            _this.busyWhile(_this.confirmCommand.busy);
             return _this;
         }
         Object.defineProperty(Activity.prototype, "isFocused", {
@@ -4994,7 +5474,7 @@
     ];
     Activity.ctorParameters = function () { return []; };
     Activity.propDecorators = {
-        activityActions: [{ type: i0.ViewChild, args: [ActivityActionsComponent,] }],
+        activityActions: [{ type: i0.ViewChild, args: [exports.ActivityActionsComponent,] }],
         class: [{ type: i0.HostBinding, args: ['class',] }],
         isFocused: [{ type: i0.HostBinding, args: ['attr.focused',] }]
     };
@@ -5007,133 +5487,196 @@
         __metadata("design:type", pectin.Command)
     ], Activity.prototype, "cancelCommand", void 0);
 
+    exports.Alert = void 0;
+    (function (Alert) {
+        function getContent(alert) {
+            var content = alert.content();
+            return Array.isArray(content) ? content : [content];
+        }
+        Alert.getContent = getContent;
+        function getTitle(alert) {
+            return ___namespace.isFunction(alert.title) ? alert.title() : undefined;
+        }
+        Alert.getTitle = getTitle;
+        function getColor(alert) {
+            return ___namespace.isFunction(alert.color) ? alert.color() : undefined;
+        }
+        Alert.getColor = getColor;
+    })(exports.Alert || (exports.Alert = {}));
+
+    var ALERT_CONFIG = new i0.InjectionToken('AlertConfig');
+    var AbstractDialogComponent = /** @class */ (function (_super) {
+        __extends(AbstractDialogComponent, _super);
+        function AbstractDialogComponent(config) {
+            var _this = _super.call(this) || this;
+            _this.config = config;
+            pectin.assert.notNil(config);
+            _this.title = exports.Alert.getTitle(config);
+            _this.color = _this.checkColor(exports.Alert.getColor(config));
+            _this.content = exports.Alert.getContent(config);
+            _this.confirmFace = {
+                text: function () { return config.ok(); },
+                color: function () { return _this.color || 'primary'; },
+                style: function () { return 'raised'; }
+            };
+            return _this;
+        }
+        AbstractDialogComponent.prototype.getConfig = function () {
+            return typescriptUtilities.lang.abstractMethod(this.constructor);
+        };
+        AbstractDialogComponent.prototype.checkColor = function (rawColor) {
+            if (this.isDestructive()) {
+                return 'warn';
+            }
+            else {
+                if (['primary', 'accent', 'warn'].includes(rawColor)) {
+                    return rawColor;
+                }
+                else {
+                    console.warn("Invalid color string " + rawColor);
+                    return undefined;
+                }
+            }
+        };
+        AbstractDialogComponent.prototype.isDestructive = function () {
+            // @ts-ignore
+            return ___namespace.isFunction(this.config['destructive']) && this.config.destructive();
+        };
+        return AbstractDialogComponent;
+    }(Activity));
+    AbstractDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    template: ''
+                },] }
+    ];
+    AbstractDialogComponent.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [ALERT_CONFIG,] }] }
+    ]; };
+
+    var AbstractConfirmDialogComponent = /** @class */ (function (_super) {
+        __extends(AbstractConfirmDialogComponent, _super);
+        function AbstractConfirmDialogComponent(config) {
+            var _this = _super.call(this, config) || this;
+            _this.cancelFace = {
+                text: function () { return config.cancel(); }
+            };
+            _this.cancelCommand = pectin.Command.create(function () {
+                return _this.cancel();
+            });
+            return _this;
+        }
+        return AbstractConfirmDialogComponent;
+    }(AbstractDialogComponent));
+    AbstractConfirmDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    template: ''
+                },] }
+    ];
+    AbstractConfirmDialogComponent.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [ALERT_CONFIG,] }] }
+    ]; };
+
     var AlertDialogComponent = /** @class */ (function (_super) {
         __extends(AlertDialogComponent, _super);
         function AlertDialogComponent(alert) {
-            var _this = _super.call(this) || this;
-            _this.alert = alert;
+            var _this = _super.call(this, alert) || this;
             _this.confirmCommand = pectin.Command.create(function () {
                 _this.done();
             });
-            _this.confirmFace = {
-                text: function () { return alert.ok(); },
-                color: function () { return "primary"; },
-                style: function () { return "raised"; }
-            };
             return _this;
         }
-        AlertDialogComponent.prototype.ngOnInit = function () {
-        };
         return AlertDialogComponent;
-    }(Activity));
+    }(AbstractDialogComponent));
     AlertDialogComponent.decorators = [
         { type: i0.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 = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [ACTIVITY_DATA,] }] }
+        { type: exports.Alert, decorators: [{ type: i0.Inject, args: [ACTIVITY_DATA,] }] }
     ]; };
 
     var ConfirmThenDialogComponent = /** @class */ (function (_super) {
         __extends(ConfirmThenDialogComponent, _super);
         function ConfirmThenDialogComponent(config) {
-            var _this = _super.call(this) || this;
-            _this.config = config;
-            pectin.assert.notNil(config);
+            var _this = _super.call(this, config.confirm) || this;
             _this.confirmCommand = pectin.Command.create(function () {
-                _this.interactionContext.startActivity(_this.config.activityType, _this.config.data)
+                _this.interactionContext.startActivity(config.activityType, config.data)
                     .then(function (result) { return _this.done(result); })
                     .catch(function (error) { return _this.cancel(error); });
             });
-            _this.cancelCommand = pectin.Command.create(function () {
-                return _this.cancel();
-            });
-            _this.confirmFace = {
-                text: function () { return _this.confirm.ok(); },
-                color: function () { return _this.isDestructive() ? 'warn' : 'primary'; },
-                style: function () { return 'raised'; }
-            };
-            _this.cancelFace = {
-                text: function () { return _this.confirm.cancel(); },
-            };
             return _this;
         }
-        ConfirmThenDialogComponent.prototype.ngOnInit = function () {
-        };
-        Object.defineProperty(ConfirmThenDialogComponent.prototype, "confirm", {
-            get: function () {
-                return this.config.confirm;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ConfirmThenDialogComponent.prototype, "titleColor", {
-            get: function () {
-                return this.isDestructive() ? 'warn' : undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ConfirmThenDialogComponent.prototype.isDestructive = function () {
-            return this.confirm.destructive && this.confirm.destructive();
-        };
         return ConfirmThenDialogComponent;
-    }(Activity));
+    }(AbstractConfirmDialogComponent));
     ConfirmThenDialogComponent.decorators = [
         { type: i0.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 = function () { return [
         { type: undefined, decorators: [{ type: i0.Inject, args: [ACTIVITY_DATA,] }] }
     ]; };
 
+    var ConfirmThenExecuteDialogComponent = /** @class */ (function (_super) {
+        __extends(ConfirmThenExecuteDialogComponent, _super);
+        function ConfirmThenExecuteDialogComponent(data) {
+            var _this = _super.call(this, data.confirm) || this;
+            _this.confirmCommand = pectin.Command.create(function () { return __awaiter(_this, void 0, void 0, function () {
+                var result, e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, data.operation(this.interactionContext)];
+                        case 1:
+                            result = _a.sent();
+                            this.done(result);
+                            return [3 /*break*/, 3];
+                        case 2:
+                            e_1 = _a.sent();
+                            this.cancel(e_1);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); });
+            return _this;
+        }
+        return ConfirmThenExecuteDialogComponent;
+    }(AbstractConfirmDialogComponent));
+    ConfirmThenExecuteDialogComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [ACTIVITY_DATA,] }] }
+    ]; };
+
     var ConfirmationDialogComponent = /** @class */ (function (_super) {
         __extends(ConfirmationDialogComponent, _super);
         function ConfirmationDialogComponent(confirm) {
-            var _this = _super.call(this) || this;
+            var _this = _super.call(this, confirm) || this;
             _this.confirm = confirm;
-            pectin.assert.notNil(confirm);
             _this.confirmCommand = pectin.Command.create(function () {
                 return _this.done();
             });
-            _this.cancelCommand = pectin.Command.create(function () {
-                return _this.cancel();
-            });
-            _this.confirmFace = {
-                text: function () { return confirm.ok(); },
-                color: function () { return _this.isDestructive() ? 'warn' : 'primary'; },
-                style: function () { return 'raised'; }
-            };
-            _this.cancelFace = {
-                text: function () { return confirm.cancel(); },
-            };
             return _this;
         }
-        ConfirmationDialogComponent.prototype.ngOnInit = function () {
-        };
-        Object.defineProperty(ConfirmationDialogComponent.prototype, "titleColor", {
-            get: function () {
-                return this.isDestructive() ? 'warn' : undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ConfirmationDialogComponent.prototype.isDestructive = function () {
-            return this.confirm.destructive && this.confirm.destructive();
-        };
         return ConfirmationDialogComponent;
-    }(Activity));
+    }(AbstractConfirmDialogComponent));
     ConfirmationDialogComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -5172,6 +5715,12 @@
                 data: data
             }, true);
         };
+        AbstractInteractionContext.prototype.confirmThenExecute = function (confirm, operation) {
+            return this.createAndLaunchActivity(ConfirmThenExecuteDialogComponent, {
+                confirm: confirm,
+                operation: operation
+            }, true);
+        };
         return AbstractInteractionContext;
     }());
 
@@ -5304,7 +5853,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-activity-outlet',
                     template: '',
-                    styles: [":host{display:block}"]
+                    styles: [":host{display:block}\n"]
                 },] }
     ];
     ActivityOutletComponent.ctorParameters = function () { return [
@@ -5325,7 +5874,7 @@
             _this.activityRefs = [];
             _this.garbage = new pectin.GarbageCollector();
             _this.inAnimation = new pectin.MutableValueModel(false);
-            _this.busy = new pectin.DelegatingValueModel().withDefault(false);
+            _this.busy = _this.registerDisposable(new pectin.DelegatingValueModel().withDefault(false));
             _this.registerDisposable(_this.busy);
             return _this;
         }
@@ -5375,7 +5924,7 @@
             if (!this.isActive()) {
                 typescriptUtilities.lang.illegalState('no activity in progress');
             }
-            return ___default['default'].findLast(this.activityRefs, function (tab) { return !tab.isComplete(); });
+            return ___default["default"].findLast(this.activityRefs, function (tab) { return !tab.isComplete(); });
         };
         /**
          * Cancels the current activity and returns true the context is no longer active, false if
@@ -5518,8 +6067,8 @@
     ActivityContainerComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -5558,7 +6107,7 @@
         }
         Object.defineProperty(ActivityTitleComponent.prototype, "hasTransparentBackground", {
             get: function () {
-                return ___default['default'].isNil(this._hasUserTransparentBackground) ? !this._color : this._hasUserTransparentBackground;
+                return ___default["default"].isNil(this._hasUserTransparentBackground) ? !this._color : this._hasUserTransparentBackground;
             },
             /**
              * Adjusts layout to ensure the title and body are cleanly separated with even
@@ -5588,7 +6137,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-activity-title',
                     template: "<ng-content></ng-content>\n",
-                    styles: [":host{display:block}"]
+                    styles: [":host{display:block}\n"]
                 },] }
     ];
     ActivityTitleComponent.propDecorators = {
@@ -5615,6 +6164,13 @@
             });
             return _this;
         }
+        Object.defineProperty(AbstractActivityTriggerComponent.prototype, "interactionContext", {
+            get: function () {
+                return typescriptUtilities.lang.abstractMethod(this.constructor);
+            },
+            enumerable: false,
+            configurable: true
+        });
         AbstractActivityTriggerComponent.prototype.ngOnInit = function () {
         };
         Object.defineProperty(AbstractActivityTriggerComponent.prototype, "isActive", {
@@ -5792,7 +6348,7 @@
             function ContextRegistry() {
                 var _this = _super.call(this) || this;
                 _this._interactions = new pectin.MutableListModel();
-                _this._disabledDelegate = new pectin.DelegatingValueModel().withDefault(false);
+                _this._disabledDelegate = _this.registerDisposable(new pectin.DelegatingValueModel().withDefault(false));
                 var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
                 _this.active = chain(_this._interactions).isNotEmpty();
                 _this.interactionContextIds = chain(_this._interactions).pluck("identifier");
@@ -5856,16 +6412,23 @@
         __extends(ModalActivityTriggerComponent, _super);
         function ModalActivityTriggerComponent(interactionService) {
             var _this = _super.call(this) || this;
-            _this.interactionContext = interactionService.createModalInteractionContextDisposedWith(_this);
+            _this._interactionContext = interactionService.createModalInteractionContextDisposedWith(_this);
             return _this;
         }
+        Object.defineProperty(ModalActivityTriggerComponent.prototype, "interactionContext", {
+            get: function () {
+                return this._interactionContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return ModalActivityTriggerComponent;
     }(AbstractActivityTriggerComponent));
     ModalActivityTriggerComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -5904,6 +6467,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(InPlaceInteractionContextComponent.prototype, "active", {
+            get: function () {
+                return this.isActive();
+            },
+            enumerable: false,
+            configurable: true
+        });
         InPlaceInteractionContextComponent.prototype.ngAfterViewInit = function () {
             this.interactionService.registerInplaceInteractionContext(this);
         };
@@ -5932,6 +6502,9 @@
         InPlaceInteractionContextComponent.prototype.confirmThen = function (confirm, activityType, data) {
             return this.activityContainerComponent.confirmThen(confirm, activityType);
         };
+        InPlaceInteractionContextComponent.prototype.confirmThenExecute = function (confirm, operation) {
+            return this.activityContainerComponent.confirmThenExecute(confirm, operation);
+        };
         InPlaceInteractionContextComponent.prototype.isActive = function () {
             return this.activityContainerComponent.isActive();
         };
@@ -5944,7 +6517,7 @@
         { type: i0.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 = function () { return [
@@ -5953,8 +6526,95 @@
     ]; };
     InPlaceInteractionContextComponent.propDecorators = {
         activityContainerComponent: [{ type: i0.ViewChild, args: ['activityContainer', { static: true },] }],
-        animateFirstActivity: [{ type: i0.Input }]
+        animateFirstActivity: [{ type: i0.Input }],
+        active: [{ type: i0.HostBinding, args: ["class.active",] }]
+    };
+
+    /**
+     *
+     */
+    exports.AddCardActivityComponent = /** @class */ (function (_super) {
+        __extends(AddCardActivityComponent, _super);
+        function AddCardActivityComponent(interactionService) {
+            var _this = _super.call(this) || this;
+            _this.interactionStyle = AddCardActivityComponent.InteractionType.MODAL;
+            _this.renderAs = AddCardActivityComponent.RenderAs.CARD;
+            _this.notCard = true;
+            var chain = pectin.Dsl.disposeWith(_this).chain;
+            _this.modalInteractionContext = interactionService.createModalInteractionContextDisposedWith(_this);
+            _this.faceList = chain(_this.faceModel).mapToList(function (face) { return [face]; });
+            return _this;
+        }
+        Object.defineProperty(AddCardActivityComponent.prototype, "renderAsClass", {
+            get: function () {
+                return "render-as-" + this.renderAs;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AddCardActivityComponent.prototype, "activityTypeClass", {
+            get: function () {
+                return this.interactionStyle + "-activity";
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AddCardActivityComponent.prototype.isRenderAsCard = function () {
+            return this.renderAs === 'card';
+        };
+        AddCardActivityComponent.prototype.isRenderAsButton = function () {
+            return this.renderAs === 'button';
+        };
+        AddCardActivityComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(AddCardActivityComponent.prototype, "interactionContext", {
+            get: function () {
+                switch (this.interactionStyle) {
+                    case 'inline':
+                        return this.inlineInteractionContext;
+                    default:
+                        return this.modalInteractionContext;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AddCardActivityComponent.prototype.isModal = function () {
+            return this.interactionStyle === 'modal';
+        };
+        AddCardActivityComponent.prototype.isInline = function () {
+            return this.interactionStyle === 'inline';
+        };
+        return AddCardActivityComponent;
+    }(AbstractActivityTriggerComponent));
+    exports.AddCardActivityComponent.decorators = [
+        { type: i0.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"]
+                },] }
+    ];
+    exports.AddCardActivityComponent.ctorParameters = function () { return [
+        { type: exports.InteractionService }
+    ]; };
+    exports.AddCardActivityComponent.propDecorators = {
+        inlineInteractionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }],
+        interactionStyle: [{ type: i0.Input }],
+        renderAs: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class',] }],
+        notCard: [{ type: i0.HostBinding, args: ['class.not-card',] }],
+        renderAsClass: [{ type: i0.HostBinding, args: ['class',] }],
+        activityTypeClass: [{ type: i0.HostBinding, args: ['class',] }]
     };
+    (function (AddCardActivityComponent) {
+        AddCardActivityComponent.InteractionType = typescriptStringEnums.Enum({
+            MODAL: 'modal',
+            INLINE: 'inline'
+        });
+        AddCardActivityComponent.RenderAs = typescriptStringEnums.Enum({
+            CARD: 'card',
+            BUTTON: 'button'
+        });
+    })(exports.AddCardActivityComponent || (exports.AddCardActivityComponent = {}));
 
     /**
      * Css Vars.
@@ -6001,7 +6661,7 @@
         { type: i0.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 = function () { return []; };
@@ -6025,18 +6685,25 @@
         function InlineActivityTriggerComponent() {
             return _super.call(this) || this;
         }
+        Object.defineProperty(InlineActivityTriggerComponent.prototype, "interactionContext", {
+            get: function () {
+                return this._interactionContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return InlineActivityTriggerComponent;
     }(AbstractActivityTriggerComponent));
     InlineActivityTriggerComponent.decorators = [
         { type: i0.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 = function () { return []; };
     InlineActivityTriggerComponent.propDecorators = {
-        interactionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
+        _interactionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
     };
 
     /**
@@ -6074,6 +6741,7 @@
             var self = this;
             var overlayRef = this._overlay.create({
                 hasBackdrop: false,
+                disposeOnNavigation: true,
                 panelClass: 'aup-popup-interaction-panel',
                 positionStrategy: this._overlay.position()
                     .flexibleConnectedTo(this._element)
@@ -6129,7 +6797,7 @@
         { type: i0.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 = function () { return [
@@ -6185,7 +6853,7 @@
             });
         };
         InteractionContextTriggerFor.prototype.prepareActivityData = function () {
-            return ___default['default'].isFunction(this.activityDataFactory()) ? this.activityDataFactory() : this.activityData;
+            return ___default["default"].isFunction(this.activityDataFactory()) ? this.activityDataFactory() : this.activityData;
         };
         return InteractionContextTriggerFor;
     }(pectin.GarbageCollector));
@@ -6209,45 +6877,114 @@
     // @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
-    var AbstractInputActivity = /** @class */ (function (_super) {
-        __extends(AbstractInputActivity, _super);
-        function AbstractInputActivity(data) {
-            var _this = _super.call(this) || this;
+    exports.InputActivity = /** @class */ (function (_super) {
+        __extends(InputActivity, _super);
+        function InputActivity(data) {
+            var _this = this;
+            var _a, _b;
+            _this = _super.call(this) || this;
             _this.data = data;
             _this.class = 'aup-input-activity';
             var form = new pectin.DirtyTrackingForm();
             _this.valueModel = form.valueModel(_this.data.initialValue);
             _this.valueModel.validateUsing(data.validators || []);
-            _this.confirmCommand = pectin.Command.create(function () {
-                if (_this.valueModel.validate()) {
-                    if (data.save) {
-                        return Promise.resolve(data.save(_this.valueModel, _this.interactionContext))
-                            .then(function () { return _this.done(); });
-                    }
-                    else {
-                        _this.done(_this.valueModel.value);
+            // TODO: move to global configuration
+            _this.confirmFace = (_a = data.confirmFace) !== null && _a !== void 0 ? _a : {
+                icon: function () { return 'mat:check'; }
+            };
+            _this.cancelFace = (_b = data.cancelFace) !== null && _b !== void 0 ? _b : {
+                icon: function () { return 'mat:clear'; }
+            };
+            _this.confirmCommand = pectin.Command.create(function () { return __awaiter(_this, void 0, void 0, function () {
+                var self_1, allGood_1, result, e_1;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (!this.valueModel.validate()) return [3 /*break*/, 6];
+                            if (!data.save) return [3 /*break*/, 5];
+                            self_1 = this;
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 3, , 4]);
+                            allGood_1 = true;
+                            return [4 /*yield*/, data.save(this.valueModel.value, {
+                                    injectError: function (error) {
+                                        allGood_1 = false;
+                                        self_1.valueModel.injectErrors([error]);
+                                    }
+                                })];
+                        case 2:
+                            result = _c.sent();
+                            if (allGood_1) {
+                                this.done(this.valueModel.value);
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_1 = _c.sent();
+                            console.error(e_1);
+                            return [3 /*break*/, 4];
+                        case 4: return [3 /*break*/, 6];
+                        case 5:
+                            this.done(this.valueModel.value);
+                            _c.label = 6;
+                        case 6: return [2 /*return*/];
                     }
-                }
-            });
+                });
+            }); });
             _this.cancelCommand = pectin.Command.create(function () {
                 _this.cancel();
             });
+            _this.busyWhile(_this.confirmCommand.busy);
             return _this;
         }
-        AbstractInputActivity.prototype.onActivityReady = function () {
+        Object.defineProperty(InputActivity.prototype, "layout", {
+            get: function () {
+                var _a, _b;
+                return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.layout) !== null && _b !== void 0 ? _b : InputActivity.Layout.BLOCK;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        InputActivity.prototype.onActivityReady = function () {
             this.valueModel.focusContext.requestFocus();
         };
-        return AbstractInputActivity;
+        Object.defineProperty(InputActivity.prototype, "additionalCssClassName", {
+            get: function () {
+                var _a;
+                return (_a = this.data.cssClassName) !== null && _a !== void 0 ? _a : '';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        InputActivity.prototype.onEscape = function () {
+            if (this.shouldCancelOnEscape() && this.cancelCommand.enabled.value) {
+                this.cancelCommand.execute();
+            }
+        };
+        InputActivity.prototype.shouldCancelOnEscape = function () {
+            return ___namespace.isNil(this.data.cancelOnEscape) // we default to true..
+                || this.data.cancelOnEscape;
+        };
+        return InputActivity;
     }(Activity));
-    AbstractInputActivity.decorators = [
+    exports.InputActivity.decorators = [
         { type: i0.Component, args: [{ template: "" },] }
     ];
-    AbstractInputActivity.ctorParameters = function () { return [
+    exports.InputActivity.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: i0.Inject, args: [ACTIVITY_DATA,] }] }
     ]; };
-    AbstractInputActivity.propDecorators = {
-        class: [{ type: i0.HostBinding, args: ['class',] }]
+    exports.InputActivity.propDecorators = {
+        class: [{ type: i0.HostBinding, args: ['class',] }],
+        layout: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.layout',] }],
+        additionalCssClassName: [{ type: i0.HostBinding, args: ["class",] }],
+        onEscape: [{ type: i0.HostListener, args: ['keydown.escape',] }]
     };
+    (function (InputActivity) {
+        InputActivity.Layout = typescriptStringEnums.Enum({
+            INLINE: 'inline',
+            BLOCK: 'block'
+        });
+    })(exports.InputActivity || (exports.InputActivity = {}));
 
     var StringInputActivity = /** @class */ (function (_super) {
         __extends(StringInputActivity, _super);
@@ -6255,11 +6992,11 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return StringInputActivity;
-    }(AbstractInputActivity));
+    }(exports.InputActivity));
     StringInputActivity.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-string-input-activity',
-                    template: "\n    <aup-string-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"></aup-string-input>\n    <aup-activity-actions align=\"end\"\n                          [faces]=\"data.buttonStyle\"></aup-activity-actions>\n  "
+                    template: "\n    <aup-string-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"></aup-string-input>\n    <aup-activity-actions [layout]=\"layout\" align=\"end\"\n                          [confirmFace]=\"confirmFace\"\n                          [cancelFace]=\"cancelFace\"\n    ></aup-activity-actions>\n  "
                 },] }
     ];
 
@@ -6289,11 +7026,11 @@
             configurable: true
         });
         return SelectInputActivity;
-    }(AbstractInputActivity));
+    }(exports.InputActivity));
     SelectInputActivity.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-select-input-activity',
-                    template: "\n    <aup-select-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"\n                      [options]=\"options\"\n                      [optionLabelFormat]=\"optionLabelFormat\"\n    ></aup-select-input>\n    <aup-activity-actions align=\"end\" [faces]=\"data.buttonStyle\"\n    ></aup-activity-actions>\n  "
+                    template: "\n    <aup-select-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"\n                      [options]=\"options\"\n                      [optionLabelFormat]=\"optionLabelFormat\"\n    ></aup-select-input>\n    <aup-activity-actions [layout]=\"layout\" align=\"end\"\n                          [confirmFace]=\"confirmFace\"\n                          [cancelFace]=\"cancelFace\"\n    ></aup-activity-actions>\n  "
                 },] }
     ];
 
@@ -6400,36 +7137,6 @@
         return TableModel;
     }(AbstractTableModel));
 
-    exports.SelfAndDescendantsVisitor = /** @class */ (function () {
-        function SelfAndDescendantsVisitor() {
-        }
-        SelfAndDescendantsVisitor.prototype.visit = function (it) {
-            this.onVisit(it);
-            if (this.shouldVisitChildrenOf(it)) {
-                it.visitChildren(this);
-            }
-        };
-        SelfAndDescendantsVisitor.prototype.shouldVisitChildrenOf = function (it) {
-            return true;
-        };
-        return SelfAndDescendantsVisitor;
-    }());
-    (function (SelfAndDescendantsVisitor) {
-        var Each = /** @class */ (function (_super) {
-            __extends(Each, _super);
-            function Each(callback) {
-                var _this = _super.call(this) || this;
-                _this.callback = callback;
-                return _this;
-            }
-            Each.prototype.onVisit = function (it) {
-                this.callback(it);
-            };
-            return Each;
-        }(SelfAndDescendantsVisitor));
-        SelfAndDescendantsVisitor.Each = Each;
-    })(exports.SelfAndDescendantsVisitor || (exports.SelfAndDescendantsVisitor = {}));
-
     /**
      * @file Automatically generated by barrelsby.
      */
@@ -6442,21 +7149,260 @@
             _this.anchorY = 'bottom';
             return _this;
         }
+        Object.defineProperty(PopupActivityTriggerComponent.prototype, "interactionContext", {
+            get: function () {
+                return this._interactionContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return PopupActivityTriggerComponent;
     }(AbstractActivityTriggerComponent));
     PopupActivityTriggerComponent.decorators = [
         { type: i0.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 = function () { return []; };
     PopupActivityTriggerComponent.propDecorators = {
         anchorX: [{ type: i0.Input }],
         anchorY: [{ type: i0.Input }],
-        interactionContext: [{ type: i0.ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
+        _interactionContext: [{ type: i0.ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
+    };
+
+    exports.InlineEditorModel = /** @class */ (function (_super) {
+        __extends(InlineEditorModel, _super);
+        function InlineEditorModel(valueModel, saveCallback) {
+            var _this = _super.call(this) || this;
+            _this.valueModel = valueModel;
+            _this.saveCallback = saveCallback;
+            _this.editing = new pectin.MutableValueModel(false);
+            _this._validators = new pectin.MutableListModel();
+            _this._editingEnabled = _this.registerDisposable(new pectin.DelegatingValueModel().withDefault(true));
+            pectin.assert.notNil(valueModel);
+            var when = pectin.Dsl.disposeWith(_this).when;
+            when(_this.editingEnabled).becomesFalsey(function () { return _this.cancelEdit(); });
+            return _this;
+        }
+        Object.defineProperty(InlineEditorModel.prototype, "editingEnabled", {
+            get: function () {
+                return this._editingEnabled.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        InlineEditorModel.prototype.disableWhile = function (condition) {
+            var chain = pectin.Dsl.disposeWith(this).chain;
+            this.enableWhile(chain(condition).isFalsey());
+            return this;
+        };
+        InlineEditorModel.prototype.enableWhile = function (condition) {
+            this._editingEnabled.setDelegate(condition);
+            return this;
+        };
+        Object.defineProperty(InlineEditorModel.prototype, "validators", {
+            get: function () {
+                return this._validators.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        InlineEditorModel.prototype.validateUsing = function (validator) {
+            this._validators.push(validator);
+            return this;
+        };
+        InlineEditorModel.prototype.isEditing = function () {
+            return this.editing.value;
+        };
+        InlineEditorModel.prototype.cancelEdit = function () {
+            this.editing.value = false;
+        };
+        InlineEditorModel.prototype.startEditing = function () {
+            this.editing.value = true;
+        };
+        return InlineEditorModel;
+    }(pectin.GarbageCollector));
+    (function (InlineEditorModel) {
+        function create(valueModel, options) {
+            return new InlineEditorModel(valueModel, options.save);
+        }
+        InlineEditorModel.create = create;
+    })(exports.InlineEditorModel || (exports.InlineEditorModel = {}));
+    pectin.TrackExternal.oneTimeBinding(exports.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>
+     */
+    exports.InlineStringEditorComponent = /** @class */ (function (_super) {
+        __extends(InlineStringEditorComponent, _super);
+        function InlineStringEditorComponent(interactionService) {
+            var _this = _super.call(this) || this;
+            _this.editingEnabled = _this.registerDisposable(new pectin.DelegatingValueModel());
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, when = _a.when, valueOf = _a.valueOf;
+            var modalIC = interactionService.createModalInteractionContextDisposedWith(_this);
+            var resolvedFacesModel = chain(_this.facesModel).map(function (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');
+            var self = _this;
+            _this.editCommand = pectin.Command.create(function () { return __awaiter(_this, void 0, void 0, function () {
+                var e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.editorModel.editing.value = true;
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, 4, 5]);
+                            return [4 /*yield*/, this.interactionContext.startActivity(StringInputActivity, this.createInputActivityData())];
+                        case 2:
+                            _a.sent();
+                            return [3 /*break*/, 5];
+                        case 3:
+                            e_1 = _a.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
+                            this.editorModel.editing.value = false;
+                            return [7 /*endfinally*/];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); }).enableWhile(_this.editingEnabled);
+            _this.onDispose(function () { return _this.cancelEdit(); });
+            return _this;
+        }
+        InlineStringEditorComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            // our editor model is a one time binding without delegates so we can only
+            // use it once we've been initialised
+            var _a = pectin.Dsl.disposeWith(this), chain = _a.chain, when = _a.when, valueOf = _a.valueOf;
+            if (!this.editorModel) {
+                typescriptUtilities.lang.illegalState('editorModel is required');
+            }
+            this.editingEnabled.setDelegate(this.editorModel.editingEnabled);
+            when(this.editorModel.editing).becomesTruthy(function () {
+                _this.editCommand.execute();
+            }, { asLongAs: this.editCommand.enabled });
+            when(this.editorModel.editing).becomesFalsey(function () { return _this.cancelEdit(); });
+            this.empty = valueOf.any(chain.stringValue(this.editorModel.valueModel).isBlank()
+            // deviceDescription.isNil()
+            ).areTruthy();
+            this.displayValue = chain(this.editorModel.valueModel).map(function (v) {
+                return ___namespace.isEmpty(v) ? _this.placeHolderModel.value : v;
+            }, { dependsOn: this.placeHolderModel, allowNil: true });
+        };
+        InlineStringEditorComponent.prototype.createInputActivityData = function () {
+            var self = this;
+            return {
+                initialValue: self.editorModel.valueModel.value,
+                confirmFace: self.saveFace.value,
+                cancelFace: self.cancelFace.value,
+                placeholder: self.placeHolderModel.value,
+                label: self.label,
+                layout: exports.InputActivity.Layout.INLINE,
+                validators: self.editorModel.validators.value,
+                save: function (value, inputContext) {
+                    return __awaiter(this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, self.editorModel.saveCallback(value, inputContext)];
+                                case 1:
+                                    _a.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    });
+                }
+            };
+        };
+        InlineStringEditorComponent.prototype.cancelEdit = function () {
+            if (this.isEditing()) {
+                this.interactionContext.cancelActiveActivity();
+            }
+        };
+        InlineStringEditorComponent.prototype.startEdit = function () {
+            if (!this.isEditing() && this.editCommand.enabled.value) {
+                this.editCommand.execute();
+            }
+        };
+        InlineStringEditorComponent.prototype.isEditing = function () {
+            return this.interactionContext.isActive();
+        };
+        InlineStringEditorComponent.prototype.isEmpty = function () {
+            return this.empty.value;
+        };
+        return InlineStringEditorComponent;
+    }(DisposableComponent));
+    exports.InlineStringEditorComponent.decorators = [
+        { type: i0.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"
+                },] }
+    ];
+    exports.InlineStringEditorComponent.ctorParameters = function () { return [
+        { type: exports.InteractionService }
+    ]; };
+    exports.InlineStringEditorComponent.propDecorators = {
+        editorModel: [{ type: i0.Input }],
+        facesModel: [{ type: i0.Input }],
+        faces: [{ type: i0.Input }],
+        interactionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent,] }],
+        label: [{ type: i0.Input }],
+        placeHolder: [{ type: i0.Input }],
+        placeHolderModel: [{ type: i0.Input }]
     };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", exports.InlineEditorModel)
+    ], exports.InlineStringEditorComponent.prototype, "editorModel", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], exports.InlineStringEditorComponent.prototype, "facesModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('facesModel'),
+        __metadata("design:type", Object)
+    ], exports.InlineStringEditorComponent.prototype, "faces", void 0);
+    __decorate([
+        pectin.StoreInValueModel('placeHolderModel'),
+        __metadata("design:type", String)
+    ], exports.InlineStringEditorComponent.prototype, "placeHolder", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], exports.InlineStringEditorComponent.prototype, "placeHolderModel", void 0);
+    (function (InlineStringEditorComponent) {
+        InlineStringEditorComponent.DEFAULT_FACES = {
+            edit: {
+                icon: function () { return 'mat:edit'; }
+            },
+            save: {
+                icon: function () { return 'mat:check'; }
+            },
+            cancel: {
+                icon: function () { return 'mat:clear'; }
+            }
+        };
+    })(exports.InlineStringEditorComponent || (exports.InlineStringEditorComponent = {}));
 
     var InteractionModule = /** @class */ (function () {
         function InteractionModule() {
@@ -6476,30 +7422,39 @@
                         DirectivesModule,
                         flexLayout.FlexModule,
                         flexLayout.GridModule,
-                        ComponentsModule
+                        ComponentsModule,
+                        forms.FormsModule,
+                        input.MatInputModule,
+                        formField.MatFormFieldModule,
+                        a11y.A11yModule
                     ],
                     declarations: [
                         ActivityContainerComponent,
                         ConfirmationDialogComponent,
                         ConfirmThenDialogComponent,
+                        ConfirmThenExecuteDialogComponent,
                         AlertDialogComponent,
                         ActivityOutletComponent,
                         InPlaceInteractionContextComponent,
                         AddItemInteractionContextComponent,
-                        ActivityActionsComponent,
+                        exports.ActivityActionsComponent,
                         PopupInteractionContextComponent,
                         StringInputActivity,
                         SelectInputActivity,
-                        AbstractInputActivity,
+                        exports.InputActivity,
                         InteractionContextTriggerFor,
                         Activity,
                         ActivityTitleComponent,
                         ActivityBodyComponent,
-                        ActivityActionsComponent,
+                        exports.ActivityActionsComponent,
                         AbstractActivityTriggerComponent,
                         PopupActivityTriggerComponent,
                         InlineActivityTriggerComponent,
-                        ModalActivityTriggerComponent
+                        ModalActivityTriggerComponent,
+                        exports.AddCardActivityComponent,
+                        exports.InlineStringEditorComponent,
+                        AbstractDialogComponent,
+                        AbstractConfirmDialogComponent,
                     ],
                     exports: [
                         ActivityContainerComponent,
@@ -6507,7 +7462,7 @@
                         ActivityTitleComponent,
                         InPlaceInteractionContextComponent,
                         AddItemInteractionContextComponent,
-                        ActivityActionsComponent,
+                        exports.ActivityActionsComponent,
                         PopupInteractionContextComponent,
                         InteractionContextTriggerFor,
                         StringInputActivity,
@@ -6515,13 +7470,15 @@
                         ActivityBodyComponent,
                         PopupActivityTriggerComponent,
                         InlineActivityTriggerComponent,
-                        ModalActivityTriggerComponent
+                        ModalActivityTriggerComponent,
+                        exports.AddCardActivityComponent,
+                        exports.InlineStringEditorComponent,
                     ],
                     entryComponents: [
-                        ActivityContainerComponent,
-                        ConfirmationDialogComponent,
-                        ConfirmThenDialogComponent,
-                        AlertDialogComponent
+                    // ActivityContainerComponent,
+                    // ConfirmationDialogComponent,
+                    // ConfirmThenDialogComponent,
+                    // AlertDialogComponent
                     ],
                     providers: [
                         exports.InteractionService
@@ -6532,7 +7489,7 @@
                 },] }
     ];
 
-    var PARAMETER_DEFINITION_KEY = Symbol("parameterDefinition");
+    var PARAMETER_DEFINITION_KEY = Symbol('parameterDefinition');
     exports.ParameterDefinition = /** @class */ (function () {
         function ParameterDefinition(propertyName, options, urlFormat) {
             this.propertyName = propertyName;
@@ -6567,23 +7524,54 @@
         // @Trace()
         ParameterDefinition.prototype.sanitise = function (value, visit, placeHistory, injector, isPopState) {
             return __awaiter(this, void 0, void 0, function () {
-                var returningFromSomewhereElse, lastKnownVisit;
                 return __generator(this, function (_a) {
-                    if (this.isMissingFrom(visit)) {
-                        returningFromSomewhereElse = !placeHistory.lastVisitIncluded(visit.placeDefinition);
-                        if (returningFromSomewhereElse) {
-                            lastKnownVisit = placeHistory.getMostRecentVisitFor(visit.placeDefinition);
-                            if (this.remember && lastKnownVisit) {
-                                value = lastKnownVisit.getParameterValue(this);
-                            }
-                            return [2 /*return*/, this.isEmptyValue(value) ? this.defaultValue : value];
-                        }
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.sanitiseMissing(visit, placeHistory, value)];
+                        case 1:
+                            // console.log(`sanitise(${this.propertyName})`)
+                            value = _a.sent();
+                            return [4 /*yield*/, this.runCustomSanitiser(value, visit, placeHistory, injector, isPopState)];
+                        case 2:
+                            value = _a.sent();
+                            return [2 /*return*/, value];
                     }
-                    // todo: add custom sanitiser
-                    return [2 /*return*/, value];
                 });
             });
         };
+        ParameterDefinition.prototype.runCustomSanitiser = function (value, visit, placeHistory, injector, isPopState) {
+            return __awaiter(this, void 0, void 0, function () {
+                var customSanitiser;
+                return __generator(this, function (_a) {
+                    customSanitiser = this.prepareCustomSanitiser(injector);
+                    return [2 /*return*/, customSanitiser ? customSanitiser.sanitise(value, visit, injector) : value];
+                });
+            });
+        };
+        ParameterDefinition.prototype.sanitiseMissing = function (visit, placeHistory, value) {
+            if (this.isMissingFrom(visit)) {
+                var returningFromSomewhereElse = !placeHistory.lastVisitIncluded(visit.placeDefinition);
+                if (returningFromSomewhereElse) {
+                    var lastKnownVisit = placeHistory.getMostRecentVisitFor(visit.placeDefinition);
+                    if (this.remember && lastKnownVisit) {
+                        value = lastKnownVisit.getParameterValue(this);
+                    }
+                    value = this.isEmptyValue(value) ? this.defaultValue : value;
+                }
+            }
+            return value;
+        };
+        ParameterDefinition.prototype.prepareCustomSanitiser = function (injector) {
+            var customSanitiser = this.options.getOptional('sanitiser', null);
+            if (___default["default"].isFunction(customSanitiser)) {
+                return injector.get(customSanitiser);
+            }
+            if (___default["default"].isObject(customSanitiser)) {
+                return ___default["default"].isFunction(customSanitiser['sanitise']) ?
+                    customSanitiser :
+                    typescriptUtilities.lang.illegalState("expected @VisitParameter({sanitiser: ...}) for " + this.propertyName + " to be a constructor or instance of ParameterSanitiser, got: " + customSanitiser);
+            }
+            return undefined;
+        };
         ParameterDefinition.prototype.isMissingFrom = function (visit) {
             return !visit.hasParameter(this);
         };
@@ -6600,7 +7588,7 @@
                 return _this;
             }
             RouteId.prototype.isEmptyValue = function (value) {
-                return ___default['default'].isNil(value);
+                return ___default["default"].isNil(value);
             };
             RouteId.prototype.hasChanged = function (a, b) {
                 return a !== b;
@@ -6618,7 +7606,7 @@
                 return _this;
             }
             ValueParameter.prototype.isEmptyValue = function (value) {
-                return ___default['default'].isNil(value);
+                return ___default["default"].isNil(value);
             };
             ValueParameter.prototype.hasChanged = function (a, b) {
                 return a !== b;
@@ -6636,10 +7624,10 @@
                 return _this;
             }
             ArrayParameter.prototype.isEmptyValue = function (value) {
-                return ___default['default'].isNil(value) || value.length < 1;
+                return ___default["default"].isNil(value) || value.length < 1;
             };
             ArrayParameter.prototype.hasChanged = function (a, b) {
-                return !___default['default'].isEqual(a, b);
+                return !___default["default"].isEqual(a, b);
             };
             return ArrayParameter;
         }(ParameterDefinition));
@@ -6647,7 +7635,7 @@
         function get(model) {
             var parameterDefinition = model[PARAMETER_DEFINITION_KEY];
             if (!parameterDefinition) {
-                typescriptUtilities.lang.illegalArgument("model hasn't been annotated with @VisitParameter, @VisitParameterList or @RouteId");
+                typescriptUtilities.lang.illegalArgument('model hasn\'t been annotated with @VisitParameter, @VisitParameterList or @RouteId');
             }
             return parameterDefinition;
         }
@@ -6688,13 +7676,13 @@
         };
         PlaceDefinition.prototype.getPlaceData = function (key, defaultValue) {
             return this.data ?
-                ___default['default'].isNil(this.data[key]) ? defaultValue : this.data[key] :
+                ___default["default"].isNil(this.data[key]) ? defaultValue : this.data[key] :
                 defaultValue;
         };
         PlaceDefinition.prototype.searchPlaceData = function (keys, defaultValue) {
             var _this = this;
             if (this.data) {
-                var found = keys.find(function (key) { return !___default['default'].isNil(_this.data[key]); });
+                var found = keys.find(function (key) { return !___default["default"].isNil(_this.data[key]); });
                 return found ? this.data[found] : defaultValue;
             }
             else {
@@ -6764,7 +7752,7 @@
                             // because our id routes redirect if the id isn't present we always have a id
                             // parameter in our params.  This will bugger our remember and defaultvalue sanitisation
                             // as it'll see that the id is present (event thought its a blank string).
-                            if (!___default['default'].isEmpty(value)) {
+                            if (!___default["default"].isEmpty(value)) {
                                 result[def.name] = def.urlFormat.parse(value);
                             }
                         }
@@ -6827,17 +7815,28 @@
             _this.childPlaces = _this.placeDefinition.children.map(function (d) { return d.component; });
             return _this;
         }
-        // @Trace()
         PlaceComponent.prototype.initialiseVisit = function (visit, notifyVisitChanged) {
             var _this = this;
             pectin.assert.isNil(this.visitModel.value);
             var when = pectin.Dsl.disposeWith(this).when;
             this.visitModel.value = visit;
             pectin.DebugContext.getOrCreate(this.visitModel).tag(this.placeDefinition.component.name + ".visitModel");
-            this.placeDefinition.getVisitParameterDefs().forEach(function (parameterDef) { return _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(function (parameterDef) { return _this.installAndInitialiseBinding(visit, parameterDef); });
             when(this.visitModel).changes(function (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)
+            // }
         };
         PlaceComponent.prototype.updateVisit = function (visit) {
             var _this = this;
@@ -6851,7 +7850,12 @@
             return !!this.visitModel.value;
         };
         // @Trace()
-        PlaceComponent.prototype.installBinding = function (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.
+         */
+        PlaceComponent.prototype.installAndInitialiseBinding = function (initialVisit, parameterDef) {
             var model = this[parameterDef.propertyName];
             pectin.DebugContext.tag(model, this.placeDefinition.component.name + "." + parameterDef.propertyName);
             var binding = this.registerDisposable(new pectin.Binding(this.visitModel, model, {
@@ -6865,7 +7869,17 @@
                     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.
+            var isInVisit = !___namespace.isNil(initialVisit.getParameterValue(parameterDef));
+            var isInModel = !___namespace.isNil(model.value);
+            if (!isInVisit && isInModel) {
+                binding.writeLeft(); // push it to the route
+            }
+            else {
+                binding.writeRight(); // push it to the model
+            }
         };
         Object.defineProperty(PlaceComponent.prototype, "placeDefinition", {
             get: function () {
@@ -7416,7 +8430,7 @@
             var currentIds = this.interactionServiceAdapter.getActiveInteractionContextIds();
             var previousIds = this.urlService.getCurrentLocationUrlSnapshot().getInteractionIds();
             // console.log(`---> synchroniseInteractionIds`, { is: currentIds.join(','), was: previousIds.join(',') });
-            if (___default['default'].isEqual(currentIds, previousIds)) {
+            if (___default["default"].isEqual(currentIds, previousIds)) {
                 // console.log('### Activity context ids were the same, skipping');
                 this.context.finishRoutingSession();
             }
@@ -7896,7 +8910,7 @@
             return !!((_a = this._previousVisits) === null || _a === void 0 ? void 0 : _a.getVisitFor(placeDef));
         };
         PlaceHistory.prototype.getMostRecentVisitFor = function (placeDef) {
-            return ___default['default'].first(this.getHistory(placeDef));
+            return ___default["default"].first(this.getHistory(placeDef));
         };
         PlaceHistory.prototype.getHistory = function (placeDef) {
             var history = this._archive.get(placeDef);
@@ -7913,7 +8927,7 @@
             var _this = this;
             visits.forEach(function (state) {
                 var history = _this.getHistory(state.placeDefinition);
-                var previousState = ___default['default'].first(history);
+                var previousState = ___default["default"].first(history);
                 if (!previousState || state.hasChangedFrom(previousState)) {
                     history.unshift(state); // LIFO
                     _this.setHistory(state.placeDefinition, history.slice(0, _this.placeHistoryDepth));
@@ -8037,7 +9051,7 @@
         };
         Object.defineProperty(ConsolidatedParameterMap.prototype, "keys", {
             get: function () {
-                return this.paramMaps.reduce(function (result, params) { return result.concat(params.keys); }, []);
+                return ___namespace.uniq(this.paramMaps.reduce(function (result, params) { return result.concat(params.keys); }, []));
             },
             enumerable: false,
             configurable: true
@@ -8091,10 +9105,10 @@
          * 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
          */
-        Visit.prototype.getParameterValue = function (parameterDef) {
-            return this.visitParameters[parameterDef.name];
+        Visit.prototype.getParameterValue = function (parameter) {
+            return ___namespace.isString(parameter) ? this.visitParameters[parameter] : this.visitParameters[parameter.name];
         };
         // @Trace()
         Visit.prototype.hasParameter = function (parameterDef) {
@@ -8126,9 +9140,13 @@
             });
             return new Visit(this.placeDefinition, params);
         };
+        // @Trace()
         Visit.prototype.hasRoutingChangedFrom = function (other) {
             var samePlace = other.placeDefinition === this.placeDefinition;
-            var sameRouteParameters = ___namespace.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+            var currentParams = this.placeDefinition.getFormattedRouteParameters(this, true);
+            var otherParams = this.placeDefinition.getFormattedRouteParameters(other, true);
+            // console.log({currentParams, otherParams});
+            var sameRouteParameters = ___namespace.isEqual(currentParams, otherParams);
             return !samePlace || !sameRouteParameters;
         };
         Visit.prototype.hasChangedFrom = function (other) {
@@ -8204,7 +9222,7 @@
             return this.getInteractionIds().length > 0;
         };
         UrlSnapshot.prototype.hasInteractionIds = function (ids) {
-            return ___default['default'].isEqual(this.getInteractionIds(), ids);
+            return ___default["default"].isEqual(this.getInteractionIds(), ids);
         };
         // @Trace()
         UrlSnapshot.prototype.updateInteractionIds = function (ids) {
@@ -8316,6 +9334,9 @@
         { type: i1$1.UrlSerializer }
     ]; };
 
+    function asArray(item) {
+        return Array.isArray(item) ? item : [item];
+    }
     exports.PlaceRouter = /** @class */ (function (_super) {
         __extends(PlaceRouter, _super);
         function PlaceRouter(angularRouter, angularLocation, interactionService, urlService, placeHistory) {
@@ -8332,7 +9353,7 @@
              * 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 pectin.DelegatingValueModel().withDefault(new exports.PlaceAccessGuard.NoAuth());
+            _this._accessGuard = _this.registerDisposable(new pectin.DelegatingValueModel().withDefault(new exports.PlaceAccessGuard.NoAuth()));
             if (window['Cypress']) {
                 window['aup.PlaceRouter'] = _this;
             }
@@ -8495,17 +9516,15 @@
         };
         PlaceRouter.prototype.navigate = function (visit, options) {
             var _this = this;
+            var commands = asArray(visit).reduce(function (result, v) {
+                return __spreadArray(__spreadArray(__spreadArray([], __read(result)), [v.placeDefinition.path]), __read(_this.createRouteParameters(v)));
+            }, []);
             return this.doNavigation(visit, function (router) { return __awaiter(_this, void 0, void 0, function () {
-                var commands;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0:
-                            commands = __spreadArray([
-                                visit.placeDefinition.path
-                            ], __read(this.createRouteParameters(visit)));
-                            return [4 /*yield*/, this.angularRouter.navigate(commands, {
-                                    relativeTo: options ? options.relativeTo : null
-                                })];
+                        case 0: return [4 /*yield*/, this.angularRouter.navigate(commands, {
+                                relativeTo: options ? options.relativeTo : null
+                            })];
                         case 1:
                             _a.sent();
                             return [2 /*return*/];
@@ -8524,7 +9543,7 @@
                                 pectin.lang.illegalState('Navigation already in progress');
                             }
                             navigation = this.createNavigationSession(this.urlService.getCurrentRouterUrl());
-                            navigation.storeVisit(visit);
+                            asArray(visit).forEach(function (v) { return navigation.storeVisit(v); });
                             this.transitionTo(navigation);
                             _a.label = 1;
                         case 1:
@@ -8620,6 +9639,7 @@
          * 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()
         PlaceRouter.prototype.syncInteractionContextIdsWithRouter = function () {
             var _this = this;
             if (this.navigationSession) {
@@ -8663,12 +9683,6 @@
         { type: UrlService },
         { type: exports.PlaceHistory }
     ]; };
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", Promise)
-    ], exports.PlaceRouter.prototype, "syncInteractionContextIdsWithRouter", null);
     (function (PlaceRouter) {
         var State = /** @class */ (function () {
             function State(activeVisits) {
@@ -8696,7 +9710,7 @@
         { type: i0.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 = function () { return []; };
@@ -8917,16 +9931,36 @@
             var _a = pectin.Dsl.disposeWith(activePlace), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
             when(this.routerVisitModel)
                 .changes(function (visit) {
-                activePlace.updateVisit(visit);
+                _this.pushVisitChangeToComponent(activePlace, visit);
             }, {
                 unless: valueOf.any(this._isPushingVisitToRoute, this.routerVisitModel.isNil()).areTruthy()
             });
         };
+        PlaceOutletComponent.prototype.pushVisitChangeToComponent = function (activePlace, visit) {
+            activePlace.updateVisit(visit);
+        };
         PlaceOutletComponent.prototype.pushVisitChangeToRoute = function (previous, current) {
-            var _this = this;
-            this._isPushingVisitToRoute.value = true;
-            this.placeRouter.pushVisitChangesToRoute(previous, current).finally(function () {
-                _this._isPushingVisitToRoute.value = false;
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, , 2, 3]);
+                            this._isPushingVisitToRoute.value = true;
+                            return [4 /*yield*/, this.placeRouter.pushVisitChangesToRoute(previous, current)];
+                        case 1:
+                            _a.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            this._isPushingVisitToRoute.value = false;
+                            return [7 /*endfinally*/];
+                        case 3:
+                            // 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);
+                            }
+                            return [2 /*return*/];
+                    }
+                });
             });
         };
         // @Trace()
@@ -8947,7 +9981,7 @@
                     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 = function () { return [
@@ -8989,7 +10023,7 @@
         function AbstractPlaceNavigationComponent(placeRouter) {
             var _this = _super.call(this) || this;
             _this.placeRouter = placeRouter;
-            _this._activePlaceComponent = new pectin.DelegatingValueModel();
+            _this._activePlaceComponent = _this.registerDisposable(new pectin.DelegatingValueModel());
             _this.trackByPlaceDef = function (data) { return data.place; };
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             _this.placeDefinitions = chain(_this.placesModel)
@@ -9082,7 +10116,7 @@
         { type: i0.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 = function () { return [
@@ -9153,7 +10187,7 @@
         { type: i0.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 = function () { return [
@@ -9175,7 +10209,7 @@
         { type: i0.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 = function () { return [
@@ -9286,9 +10320,6 @@
      * @file Automatically generated by barrelsby.
      */
 
-    // const r:Result<string, number> = null;
-    // r.catch(e => {}).then();
-
     var DialogInteractionContext = /** @class */ (function (_super) {
         __extends(DialogInteractionContext, _super);
         function DialogInteractionContext(identifier, api, dialogService, config) {
@@ -9507,13 +10538,13 @@
                             }
                             _a.label = 2;
                         case 2: return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, function () { return __awaiter(_this, void 0, void 0, function () {
-                                var params, parsedParams, navigationSession, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
+                                var navigationSession, params, parsedParams, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
                                 return __generator(this, function (_a) {
                                     switch (_a.label) {
                                         case 0:
+                                            navigationSession = this.placeRouter.navigationSession;
                                             params = new ConsolidatedParameterMap(activatedRoute.url, activatedRoute.paramMap);
                                             parsedParams = placeDefinition_1.parseRouteParams(params);
-                                            navigationSession = this.placeRouter.navigationSession;
                                             initialVisit = navigationSession.getVisitFor(placeDefinition_1) || new Visit(placeDefinition_1, parsedParams);
                                             sanitiser = new VisitSanitiser(navigationSession, activatedRoute, this.router, this.placeHistory, this.injector);
                                             return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
@@ -9622,11 +10653,11 @@
             function NumberType() {
             }
             NumberType.prototype.format = function (value) {
-                return ___default['default'].isNumber(value) && !___default['default'].isNaN(value) ? "" + value : null;
+                return ___default["default"].isNumber(value) && !___default["default"].isNaN(value) ? "" + value : null;
             };
             NumberType.prototype.parse = function (value) {
                 var parsed = Number.parseFloat(value);
-                return ___default['default'].isNaN(parsed) ? null : parsed;
+                return ___default["default"].isNaN(parsed) ? null : parsed;
             };
             return NumberType;
         }());
@@ -9799,10 +10830,13 @@
      */
 
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
+    exports.ALERT_CONFIG = ALERT_CONFIG;
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
     exports.AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT = AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT;
     exports.AbstractActivityTriggerComponent = AbstractActivityTriggerComponent;
-    exports.AbstractInputActivity = AbstractInputActivity;
+    exports.AbstractCardContainerComponent = AbstractCardContainerComponent;
+    exports.AbstractConfirmDialogComponent = AbstractConfirmDialogComponent;
+    exports.AbstractDialogComponent = AbstractDialogComponent;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractInteractionContext = AbstractInteractionContext;
     exports.AbstractListInputComponent = AbstractListInputComponent;
@@ -9813,7 +10847,6 @@
     exports.AbstractTableModel = AbstractTableModel;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
-    exports.ActivityActionsComponent = ActivityActionsComponent;
     exports.ActivityBodyComponent = ActivityBodyComponent;
     exports.ActivityContainerComponent = ActivityContainerComponent;
     exports.ActivityOutletComponent = ActivityOutletComponent;
@@ -9827,6 +10860,7 @@
     exports.CELL_EDITOR_PORTAL = CELL_EDITOR_PORTAL;
     exports.CELL_RENDERER_PORTAL = CELL_RENDERER_PORTAL;
     exports.CardContainerComponent = CardContainerComponent;
+    exports.CardStackComponent = CardStackComponent;
     exports.CellEditorPortalRef = CellEditorPortalRef;
     exports.CellHeaderPortalRef = CellHeaderPortalRef;
     exports.CellPortalRef = CellPortalRef;
@@ -9841,6 +10875,7 @@
     exports.ComponentCellRendererPortalRef = ComponentCellRendererPortalRef;
     exports.ComponentsModule = ComponentsModule;
     exports.ConfirmThenDialogComponent = ConfirmThenDialogComponent;
+    exports.ConfirmThenExecuteDialogComponent = ConfirmThenExecuteDialogComponent;
     exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
     exports.ConsolidatedParameterMap = ConsolidatedParameterMap;
     exports.CustomTemplateColumnModel = CustomTemplateColumnModel;
@@ -9876,8 +10911,12 @@
     exports.InteractionModule = InteractionModule;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.LabelledValueComponent = LabelledValueComponent;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
     exports.ListPropertyColumnModel = ListPropertyColumnModel;
+    exports.LoadingContainerComponent = LoadingContainerComponent;
+    exports.MarkdownComponent = MarkdownComponent;
+    exports.MarkdownService = MarkdownService;
     exports.ModalActivityTriggerComponent = ModalActivityTriggerComponent;
     exports.ModalInteractionContextFactory = ModalInteractionContextFactory;
     exports.MoreMenuComponent = MoreMenuComponent;
@@ -9953,12 +10992,14 @@
     exports.WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined = WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined;
     exports.WaitUntilPopStateDuringCanDeactivateInteractionFinishes = WaitUntilPopStateDuringCanDeactivateInteractionFinishes;
     exports.leftRightPlaceAnimation = leftRightPlaceAnimation;
+    exports.markdownPillExtension = markdownPillExtension;
     exports.slideDownOnEnterAnimation = slideDownOnEnterAnimation;
     exports.slideRightOnEnterAnimation = slideRightOnEnterAnimation;
     exports.treeNodeDecorator = treeNodeDecorator;
-    exports.ɵ0 = ɵ0;
+    exports["ɵ0"] = ɵ0;
+    exports["ɵ1"] = ɵ1;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=coolon-angular-ui-powerups.umd.js.map