@coolon/angular-ui-powerups 12.4.0-alpha.48 → 12.4.0-alpha.5

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-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('@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', '@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.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, _, typescriptUtilities, src, typescriptStringEnums, ResizeObserver, produce, a11y, 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-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';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -768,32 +768,6 @@
         __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
@@ -811,13 +785,6 @@
      *   <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>
@@ -850,7 +817,6 @@
      * 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);
@@ -858,154 +824,30 @@
      */
     var CardContainerComponent = /** @class */ (function (_super) {
         __extends(CardContainerComponent, _super);
-        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;
+        function CardContainerComponent() {
+            return _super.call(this) || 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;
-    }(AbstractCardContainerComponent));
+    }(DisposableComponent));
     CardContainerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-card-container',
-                    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)}.no-scroll-container,aup-scroll-container{flex:1}.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:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.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=\"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}"]
                 },] }
     ];
-    CardContainerComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
+    CardContainerComponent.ctorParameters = function () { return []; };
     CardContainerComponent.propDecorators = {
-        columnCount: [{ type: i0.Input }],
-        enabledScroll: [{ type: i0.Input }],
-        isAutoColumns: [{ type: i0.HostBinding, args: ['class.auto-columns',] }],
-        isSingleColumn: [{ type: i0.HostBinding, args: ['class.single-column',] }]
+        addCardCommand: [{ type: i0.Input }],
+        addCardFace: [{ type: i0.Input }],
+        addCardTemplate: [{ type: i0.ContentChild, args: ["addCardTemplate",] }]
     };
-
-    /**
-     * @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{align-items:stretch;padding:0 var(--resolved-card-gap) var(--resolved-card-gap)}.add-card-container,.footer{display:flex;flex-direction:column}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);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:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.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}"]
-                },] }
-    ];
-    CardStackComponent.ctorParameters = function () { return []; };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.Command)
+    ], CardContainerComponent.prototype, "addCardCommand", void 0);
 
     exports.CommandFace = void 0;
     (function (CommandFace) {
@@ -1493,22 +1335,10 @@
     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) {
@@ -1757,7 +1587,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{padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
                 },] }
     ];
     EmptyStateComponent.ctorParameters = function () { return []; };
@@ -1855,7 +1685,6 @@
         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
@@ -2457,54 +2286,6 @@
         });
     })(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}"]
-                },] }
-    ];
-    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() {
         }
@@ -2535,32 +2316,24 @@
     ];
     ScrollContainerComponent.ctorParameters = function () { return []; };
 
-    var SectionHeaderComponent = /** @class */ (function (_super) {
-        __extends(SectionHeaderComponent, _super);
+    var SectionHeaderComponent = /** @class */ (function () {
         function SectionHeaderComponent() {
-            var _this = _super.call(this) || this;
-            // readonly i18n = I18nMarsUi.components.layout.header;
-            _this.size = 'medium';
-            _this.borderTop = false;
-            _this.borderBottom = false;
-            return _this;
+            this.underline = false;
         }
         SectionHeaderComponent.prototype.ngOnInit = function () {
         };
         return SectionHeaderComponent;
-    }(DisposableComponent));
+    }());
     SectionHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-section-header',
-                    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:rgba(0,0,0,.67)}:host.large{height:48px;min-height:48px}:host.large span{font-weight:500;font-size:14px;color:rgba(0,0,0,.67)}:host.medium{height:48px;min-height:48px}:host.medium span{font-weight:500;font-size:13px;color:rgba(0,0,0,.67)}:host.small{height:30px;min-height:30px}:host.small span{font-weight:300;font-size:12px;color:rgba(0,0,0,.67)}: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}"]
+                    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)}"]
                 },] }
     ];
     SectionHeaderComponent.ctorParameters = function () { return []; };
     SectionHeaderComponent.propDecorators = {
-        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',] }]
+        underline: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.underline',] }]
     };
 
     var SwitchCaseOption = /** @class */ (function () {
@@ -4485,16 +4258,16 @@
     var FlattenedTreeListModel = /** @class */ (function (_super) {
         __extends(FlattenedTreeListModel, _super);
         function FlattenedTreeListModel(source, childRef, expansionModel) {
-            var _this = _super.call(this, source, {
-                initialValue: [],
-                identifiedWith: function (row) { return source.identityOf(row); }
-            }) || this;
+            var _this = _super.call(this, source) || 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 = [];
@@ -4627,7 +4400,6 @@
             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) {
@@ -4910,28 +4682,6 @@
         __metadata("design:type", pectin.PageController)
     ], PaginatorComponent.prototype, "pageController", void 0);
 
-    var LabelledValueComponent = /** @class */ (function (_super) {
-        __extends(LabelledValueComponent, _super);
-        function LabelledValueComponent() {
-            return _super.call(this) || this;
-            // const {chain} = Dsl.disposeWith(this);
-        }
-        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:rgba(0,0,0,.57);margin-bottom:6px;white-space:nowrap}"]
-                },] }
-    ];
-    LabelledValueComponent.ctorParameters = function () { return []; };
-    LabelledValueComponent.propDecorators = {
-        label: [{ type: i0.Input }]
-    };
-
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule(faIconLibrary) {
             faIconLibrary.addIconPacks(freeSolidSvgIcons.fas);
@@ -4940,29 +4690,6 @@
     }());
     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,
@@ -5011,11 +4738,29 @@
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
-                        AbstractTableComponent,
-                        AbstractCardContainerComponent,
-                        CardStackComponent,
-                        LabelledValueComponent,
-                        LoadingContainerComponent
+                        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
                     ],
                     exports: [
                         NumberInputComponent,
@@ -5052,9 +4797,6 @@
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
-                        CardStackComponent,
-                        LabelledValueComponent,
-                        LoadingContainerComponent,
                     ],
                     providers: [
                         FocusBindingFactory
@@ -5086,13 +4828,12 @@
      *     <span>This content will be between the two commands</span>
      * </aup-activity-actions>
      */
-    exports.ActivityActionsComponent = /** @class */ (function (_super) {
+    var ActivityActionsComponent = /** @class */ (function (_super) {
         __extends(ActivityActionsComponent, _super);
         function ActivityActionsComponent(cdr) {
             var _this = _super.call(this) || this;
             _this.cdr = cdr;
-            _this.layout = ActivityActionsComponent.Layout.BLOCK;
-            _this.align = ActivityActionsComponent.Align.STRETCH;
+            _this.align = 'stretch';
             return _this;
         }
         Object.defineProperty(ActivityActionsComponent.prototype, "faces", {
@@ -5113,6 +4854,20 @@
             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 () {
@@ -5128,45 +4883,35 @@
         };
         return ActivityActionsComponent;
     }(DisposableComponent));
-    exports.ActivityActionsComponent.decorators = [
+    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-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}"]
+                    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}"]
                 },] }
     ];
-    exports.ActivityActionsComponent.ctorParameters = function () { return [
+    ActivityActionsComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef }
     ]; };
-    exports.ActivityActionsComponent.propDecorators = {
+    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 }],
-        layout: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.layout',] }],
-        align: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.align',] }]
+        align: [{ type: i0.Input }],
+        alignEnd: [{ type: i0.HostBinding, args: ['class.align-end',] }],
+        alignStretch: [{ type: i0.HostBinding, args: ['class.align-stretch',] }]
     };
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", pectin.Command)
-    ], exports.ActivityActionsComponent.prototype, "confirmCommand", void 0);
+    ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", pectin.Command)
-    ], 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 = {}));
+    ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
 
     var ACTIVITY_DATA = new i0.InjectionToken('InteractionActivityData');
     var Activity = /** @class */ (function (_super) {
@@ -5249,7 +4994,7 @@
     ];
     Activity.ctorParameters = function () { return []; };
     Activity.propDecorators = {
-        activityActions: [{ type: i0.ViewChild, args: [exports.ActivityActionsComponent,] }],
+        activityActions: [{ type: i0.ViewChild, args: [ActivityActionsComponent,] }],
         class: [{ type: i0.HostBinding, args: ['class',] }],
         isFocused: [{ type: i0.HostBinding, args: ['attr.focused',] }]
     };
@@ -5773,7 +5518,7 @@
     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\" 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",
+                    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}"]
                 },] }
     ];
@@ -5870,13 +5615,6 @@
             });
             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", {
@@ -6118,16 +5856,9 @@
         __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 = [
@@ -6173,13 +5904,6 @@
             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);
         };
@@ -6229,96 +5953,9 @@
     ]; };
     InPlaceInteractionContextComponent.propDecorators = {
         activityContainerComponent: [{ type: i0.ViewChild, args: ['activityContainer', { static: true },] }],
-        animateFirstActivity: [{ type: i0.Input }],
-        active: [{ type: i0.HostBinding, args: ["class.active",] }]
+        animateFirstActivity: [{ type: i0.Input }]
     };
 
-    /**
-     *
-     */
-    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:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8)}:host[interactionStyle=inline][renderas=card]:not(.active):hover{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}:host[interactionStyle=inline][renderas=card]:not(.active):hover{border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}: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:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8)}:host[interactionStyle=modal][renderas=card]:hover{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}:host[interactionStyle=modal][renderas=card]:hover{border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}: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}"]
-                },] }
-    ];
-    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.
      *   --link-color
@@ -6388,13 +6025,6 @@
         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 = [
@@ -6406,7 +6036,7 @@
     ];
     InlineActivityTriggerComponent.ctorParameters = function () { return []; };
     InlineActivityTriggerComponent.propDecorators = {
-        _interactionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
+        interactionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
     };
 
     /**
@@ -6444,7 +6074,6 @@
             var self = this;
             var overlayRef = this._overlay.create({
                 hasBackdrop: false,
-                disposeOnNavigation: true,
                 panelClass: 'aup-popup-interaction-panel',
                 positionStrategy: this._overlay.position()
                     .flexibleConnectedTo(this._element)
@@ -6580,114 +6209,45 @@
     // @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
-    exports.InputActivity = /** @class */ (function (_super) {
-        __extends(InputActivity, _super);
-        function InputActivity(data) {
-            var _this = this;
-            var _a, _b;
-            _this = _super.call(this) || this;
+    var AbstractInputActivity = /** @class */ (function (_super) {
+        __extends(AbstractInputActivity, _super);
+        function AbstractInputActivity(data) {
+            var _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 || []);
-            // 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.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);
+                    }
+                }
+            });
             _this.cancelCommand = pectin.Command.create(function () {
                 _this.cancel();
             });
-            _this.busyWhile(_this.confirmCommand.busy);
             return _this;
         }
-        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 () {
+        AbstractInputActivity.prototype.onActivityReady = function () {
             this.valueModel.focusContext.requestFocus();
         };
-        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;
+        return AbstractInputActivity;
     }(Activity));
-    exports.InputActivity.decorators = [
+    AbstractInputActivity.decorators = [
         { type: i0.Component, args: [{ template: "" },] }
     ];
-    exports.InputActivity.ctorParameters = function () { return [
+    AbstractInputActivity.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: i0.Inject, args: [ACTIVITY_DATA,] }] }
     ]; };
-    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',] }]
+    AbstractInputActivity.propDecorators = {
+        class: [{ type: i0.HostBinding, args: ['class',] }]
     };
-    (function (InputActivity) {
-        InputActivity.Layout = typescriptStringEnums.Enum({
-            INLINE: 'inline',
-            BLOCK: 'block'
-        });
-    })(exports.InputActivity || (exports.InputActivity = {}));
 
     var StringInputActivity = /** @class */ (function (_super) {
         __extends(StringInputActivity, _super);
@@ -6695,11 +6255,11 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return StringInputActivity;
-    }(exports.InputActivity));
+    }(AbstractInputActivity));
     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 [layout]=\"layout\" align=\"end\"\n                          [confirmFace]=\"confirmFace\"\n                          [cancelFace]=\"cancelFace\"\n    ></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 align=\"end\"\n                          [faces]=\"data.buttonStyle\"></aup-activity-actions>\n  "
                 },] }
     ];
 
@@ -6729,11 +6289,11 @@
             configurable: true
         });
         return SelectInputActivity;
-    }(exports.InputActivity));
+    }(AbstractInputActivity));
     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 [layout]=\"layout\" align=\"end\"\n                          [confirmFace]=\"confirmFace\"\n                          [cancelFace]=\"cancelFace\"\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 align=\"end\" [faces]=\"data.buttonStyle\"\n    ></aup-activity-actions>\n  "
                 },] }
     ];
 
@@ -6882,13 +6442,6 @@
             _this.anchorY = 'bottom';
             return _this;
         }
-        Object.defineProperty(PopupActivityTriggerComponent.prototype, "interactionContext", {
-            get: function () {
-                return this._interactionContext;
-            },
-            enumerable: false,
-            configurable: true
-        });
         return PopupActivityTriggerComponent;
     }(AbstractActivityTriggerComponent));
     PopupActivityTriggerComponent.decorators = [
@@ -6902,240 +6455,8 @@
     PopupActivityTriggerComponent.propDecorators = {
         anchorX: [{ type: i0.Input }],
         anchorY: [{ type: i0.Input }],
-        _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 }]
+        interactionContext: [{ type: i0.ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
     };
-    __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() {
@@ -7155,11 +6476,7 @@
                         DirectivesModule,
                         flexLayout.FlexModule,
                         flexLayout.GridModule,
-                        ComponentsModule,
-                        forms.FormsModule,
-                        input.MatInputModule,
-                        formField.MatFormFieldModule,
-                        a11y.A11yModule
+                        ComponentsModule
                     ],
                     declarations: [
                         ActivityContainerComponent,
@@ -7169,22 +6486,20 @@
                         ActivityOutletComponent,
                         InPlaceInteractionContextComponent,
                         AddItemInteractionContextComponent,
-                        exports.ActivityActionsComponent,
+                        ActivityActionsComponent,
                         PopupInteractionContextComponent,
                         StringInputActivity,
                         SelectInputActivity,
-                        exports.InputActivity,
+                        AbstractInputActivity,
                         InteractionContextTriggerFor,
                         Activity,
                         ActivityTitleComponent,
                         ActivityBodyComponent,
-                        exports.ActivityActionsComponent,
+                        ActivityActionsComponent,
                         AbstractActivityTriggerComponent,
                         PopupActivityTriggerComponent,
                         InlineActivityTriggerComponent,
-                        ModalActivityTriggerComponent,
-                        exports.AddCardActivityComponent,
-                        exports.InlineStringEditorComponent,
+                        ModalActivityTriggerComponent
                     ],
                     exports: [
                         ActivityContainerComponent,
@@ -7192,7 +6507,7 @@
                         ActivityTitleComponent,
                         InPlaceInteractionContextComponent,
                         AddItemInteractionContextComponent,
-                        exports.ActivityActionsComponent,
+                        ActivityActionsComponent,
                         PopupInteractionContextComponent,
                         InteractionContextTriggerFor,
                         StringInputActivity,
@@ -7200,9 +6515,7 @@
                         ActivityBodyComponent,
                         PopupActivityTriggerComponent,
                         InlineActivityTriggerComponent,
-                        ModalActivityTriggerComponent,
-                        exports.AddCardActivityComponent,
-                        exports.InlineStringEditorComponent,
+                        ModalActivityTriggerComponent
                     ],
                     entryComponents: [
                         ActivityContainerComponent,
@@ -7514,28 +6827,17 @@
             _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");
-            // 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); });
+            this.placeDefinition.getVisitParameterDefs().forEach(function (parameterDef) { return _this.installBinding(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;
@@ -7549,12 +6851,7 @@
             return !!this.visitModel.value;
         };
         // @Trace()
-        /**
-         * 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) {
+        PlaceComponent.prototype.installBinding = function (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, {
@@ -7568,17 +6865,7 @@
                     return currentVisit.replace(parameterDef, value);
                 }
             }));
-            // 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
-            }
+            binding.writeRight();
         };
         Object.defineProperty(PlaceComponent.prototype, "placeDefinition", {
             get: function () {
@@ -8750,7 +8037,7 @@
         };
         Object.defineProperty(ConsolidatedParameterMap.prototype, "keys", {
             get: function () {
-                return ___namespace.uniq(this.paramMaps.reduce(function (result, params) { return result.concat(params.keys); }, []));
+                return this.paramMaps.reduce(function (result, params) { return result.concat(params.keys); }, []);
             },
             enumerable: false,
             configurable: true
@@ -8839,13 +8126,9 @@
             });
             return new Visit(this.placeDefinition, params);
         };
-        // @Trace()
         Visit.prototype.hasRoutingChangedFrom = function (other) {
             var samePlace = other.placeDefinition === this.placeDefinition;
-            var currentParams = this.placeDefinition.getFormattedRouteParameters(this, true);
-            var otherParams = this.placeDefinition.getFormattedRouteParameters(other, true);
-            // console.log({currentParams, otherParams});
-            var sameRouteParameters = ___namespace.isEqual(currentParams, otherParams);
+            var sameRouteParameters = ___namespace.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
             return !samePlace || !sameRouteParameters;
         };
         Visit.prototype.hasChangedFrom = function (other) {
@@ -8869,7 +8152,6 @@
             this.url = url;
             this.urlTree = urlSerializer.parse(url);
         }
-        // @Trace()
         UrlSnapshot.prototype.updateVisitSegments = function (visit) {
             var newUrlTree = this.urlSerializer.parse(this.url);
             // Ugly, but it works for now.
@@ -8947,6 +8229,12 @@
         };
         return UrlSnapshot;
     }());
+    __decorate([
+        pectin.Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Visit]),
+        __metadata("design:returntype", exports.UrlSnapshot)
+    ], exports.UrlSnapshot.prototype, "updateVisitSegments", null);
     __decorate([
         src.Memoize(),
         __metadata("design:type", Function),
@@ -9033,9 +8321,6 @@
         { 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) {
@@ -9215,15 +8500,17 @@
         };
         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: return [4 /*yield*/, this.angularRouter.navigate(commands, {
-                                relativeTo: options ? options.relativeTo : null
-                            })];
+                        case 0:
+                            commands = __spreadArray([
+                                visit.placeDefinition.path
+                            ], __read(this.createRouteParameters(visit)));
+                            return [4 /*yield*/, this.angularRouter.navigate(commands, {
+                                    relativeTo: options ? options.relativeTo : null
+                                })];
                         case 1:
                             _a.sent();
                             return [2 /*return*/];
@@ -9242,7 +8529,7 @@
                                 pectin.lang.illegalState('Navigation already in progress');
                             }
                             navigation = this.createNavigationSession(this.urlService.getCurrentRouterUrl());
-                            asArray(visit).forEach(function (v) { return navigation.storeVisit(v); });
+                            navigation.storeVisit(visit);
                             this.transitionTo(navigation);
                             _a.label = 1;
                         case 1:
@@ -9338,7 +8625,6 @@
          * 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) {
@@ -9382,6 +8668,12 @@
         { 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) {
@@ -10220,13 +9512,13 @@
                             }
                             _a.label = 2;
                         case 2: return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, function () { return __awaiter(_this, void 0, void 0, function () {
-                                var navigationSession, params, parsedParams, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
+                                var params, parsedParams, navigationSession, 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))];
@@ -10515,7 +9807,7 @@
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
     exports.AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT = AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT;
     exports.AbstractActivityTriggerComponent = AbstractActivityTriggerComponent;
-    exports.AbstractCardContainerComponent = AbstractCardContainerComponent;
+    exports.AbstractInputActivity = AbstractInputActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractInteractionContext = AbstractInteractionContext;
     exports.AbstractListInputComponent = AbstractListInputComponent;
@@ -10526,6 +9818,7 @@
     exports.AbstractTableModel = AbstractTableModel;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
+    exports.ActivityActionsComponent = ActivityActionsComponent;
     exports.ActivityBodyComponent = ActivityBodyComponent;
     exports.ActivityContainerComponent = ActivityContainerComponent;
     exports.ActivityOutletComponent = ActivityOutletComponent;
@@ -10539,7 +9832,6 @@
     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;
@@ -10589,10 +9881,8 @@
     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.ModalActivityTriggerComponent = ModalActivityTriggerComponent;
     exports.ModalInteractionContextFactory = ModalInteractionContextFactory;
     exports.MoreMenuComponent = MoreMenuComponent;