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

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

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, ViewEncapsulation, HostBinding, InjectionToken, ViewChildren, SkipSelf, EventEmitter, ViewChild, Output, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, Injector, ComponentFactoryResolver } from '@angular/core';
+import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, HostBinding, ViewEncapsulation, InjectionToken, ViewChildren, SkipSelf, EventEmitter, ViewChild, Output, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, Injector, ComponentFactoryResolver } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -16,21 +16,23 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Trace, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Functions } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as _ from 'lodash';
 import ___default from 'lodash';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import { Enum } from 'typescript-string-enums';
-import { assert as assert$1, Stringy, lang as lang$1, Opts, Klass } from '@coolon/typescript-utilities';
+import { lang as lang$1, assert as assert$1, Stringy, Opts, Klass } from '@coolon/typescript-utilities';
 import ResizeObserver from 'resize-observer-polyfill';
 import produce from 'immer';
+import { A11yModule } from '@angular/cdk/a11y';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
@@ -526,6 +528,30 @@ var CommandFace;
     CommandFace.Adapter = Adapter;
 })(CommandFace || (CommandFace = {}));
 
+class AbstractCardContainerComponent extends DisposableComponent {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+    }
+}
+AbstractCardContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-abstract-card-container',
+                template: ''
+            },] }
+];
+AbstractCardContainerComponent.ctorParameters = () => [];
+AbstractCardContainerComponent.propDecorators = {
+    addCardCommand: [{ type: Input }],
+    addCardFace: [{ type: Input }],
+    addCardTemplate: [{ type: ContentChild, args: ['addCardTemplate',] }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], AbstractCardContainerComponent.prototype, "addCardCommand", void 0);
+
 /**
  * @example
  * // basic usage
@@ -543,6 +569,13 @@ var CommandFace;
  *   <my-card *ngFor="..."></my-card>
  * </aup-card-container>
  *
+ * // use the aup-add-card-activity to display as the new card place holder and to run
+ * // the activity inside teh card
+ * <aup-card-container [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ *   <aup-add-card-activity type="inline" renderAs="card" [face]="i18n.commands.addModal" [activityClass]="AddCardActivity"></aup-add-card-activity>
+ * </aup-card-container>
+ *
  * // adds an add card component using the specified template.  The template
  * // will fill it's container in the grid.
  * <aup-card-container>
@@ -575,35 +608,144 @@ var CommandFace;
  * aup-card-container {
  *   --card-gap: var(--card-gap, 16px);
  *   --card-width: var(--card-width, 300px);
+ *   --card-max-width: auto;
  *   --card-height: var(--card-height, auto);
  *   --card-min-height: var(--card-min-height, auto);
  *   --card-background: var(--card-background, #fcfcfb);
  * }
  */
-class CardContainerComponent extends DisposableComponent {
-    constructor() {
+class CardContainerComponent extends AbstractCardContainerComponent {
+    constructor(elementRef) {
         super();
+        this.elementRef = elementRef;
+        /**
+         * Enable scrolling.  If true the container will have height==0 so you must set it's height explicitly
+         * or place in a layout that will stretch it such as a grid or flex layout.
+         */
+        this.enabledScroll = false;
+    }
+    set columnCount(count) {
+        if (!_.isNil(count) && (!_.isInteger(count) || count < 1)) {
+            lang$1.illegalState('columnCount must be a positive integer or nil');
+        }
+        this._columnCount = count;
+        this.updateColumnCountStyles();
+    }
+    get columnCount() {
+        return this._columnCount;
     }
     ngOnInit() {
+        super.ngOnInit();
+        this.updateColumnCountStyles();
+    }
+    get isAutoColumns() {
+        return _.isNil(this._columnCount);
+    }
+    get isSingleColumn() {
+        return this._columnCount === 1;
+    }
+    updateColumnCountStyles() {
+        const el = this.elementRef.nativeElement;
+        if (_.isNil(this._columnCount)) {
+            el.style.setProperty('--aup-card-container-column-count', '');
+        }
+        else {
+            el.style.setProperty('--aup-card-container-column-count', this._columnCount);
+        }
     }
 }
 CardContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-card-container',
-                template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-                styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,#fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+                template: "<div class=\"header-container\">\n  <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <div class=\"card-container\">\n    <ng-content></ng-content>\n\n    <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n      <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n      <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n    </div>\n\n    <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n      <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n",
+                styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-max-width:var(--card-max-width,auto);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns .card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),var(--resolved-card-max-width)));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap))}:host:not(.auto-columns) .card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}.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}"]
             },] }
 ];
-CardContainerComponent.ctorParameters = () => [];
+CardContainerComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
 CardContainerComponent.propDecorators = {
-    addCardCommand: [{ type: Input }],
-    addCardFace: [{ type: Input }],
-    addCardTemplate: [{ type: ContentChild, args: ["addCardTemplate",] }]
+    columnCount: [{ type: Input }],
+    enabledScroll: [{ type: Input }],
+    isAutoColumns: [{ type: HostBinding, args: ['class.auto-columns',] }],
+    isSingleColumn: [{ type: HostBinding, args: ['class.single-column',] }]
 };
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", Command)
-], CardContainerComponent.prototype, "addCardCommand", void 0);
+
+/**
+ * @deprecated deprecated, use `aup-card-container [columnCount]="1"` instead.
+ * @example
+ * // basic usage
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // adds an add button with a the '+' icon to the end of the card list.
+ * <aup-card-stack [addCardCommand]="addCard">
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // adds an add button with the specified face
+ * <aup-card-stack [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // use the aup-add-card-activity to display as the new card place holder and to run
+ * // the activity inside teh card
+ * <aup-card-stack [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ *   <aup-add-card-activity type="inline" renderAs="card" [face]="i18n.commands.addModal" [activityClass]="AddCardActivity"></aup-add-card-activity>
+ * </aup-card-stack>
+ *
+ * // adds an add card component using the specified template.  The template
+ * // will fill it's container in the grid.
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ *   <ng-template #addCardTemplate>
+ *     <div>This is a new card template, it will the the size of the other cards.</div>
+ *   </ng-template>
+ * </aup-card-stack>
+ *
+ * // sing the default new card styles for your template
+ * @import "../../../../assets/styles";
+ * .my-new-card {
+ *   @include aup-card-stack-new-card-style();
+ *   // OR
+ *   @include aup-card-stack-new-card-style(
+ *      $color: rgba(0,0,0,0.54),
+ *      $background-color: rgba(255,255,255,0.8),
+ *      $hover-color: $color,
+ *      $background-hover-color: white
+ *   )
+ * }
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ *   <ng-template #addCardTemplate>
+ *     <div class="my-new-card" >This is a new card template, it will the the size of the other cards.</div>
+ *   </ng-template>
+ * </aup-card-stack>
+ *
+ * // CSS Vars
+ * aup-card-stack {
+ *   --card-gap: var(--card-gap, 16px);
+ *   --card-height: var(--card-height, auto);
+ *   --card-min-height: var(--card-min-height, auto);
+ *   --card-background: var(--card-background, #fcfcfb);
+ * }
+ */
+class CardStackComponent extends AbstractCardContainerComponent {
+    constructor() {
+        super();
+        console.warn('<aup-card-stack></aup-card-stack> is deprecated.  Use <aup-card-container [columnCount]="1"> instead.');
+    }
+}
+CardStackComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-card-stack',
+                template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n</div>\n<div class=\"footer\">\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n  <ng-content select=\"[aup-card-stack-footer]\"></ng-content>\n</div>\n",
+                styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,#fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);max-width:100%}.footer{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 = () => [];
 
 /**
  * Custom CSS:
@@ -912,10 +1054,22 @@ __decorate([
 var TrackBy;
 (function (TrackBy) {
     TrackBy.byIndex = (index, item) => index;
+    /**
+     * @deprecated use #track(MyType).by("property") instead.
+     * @param property
+     */
     function trackByProperty(property) {
         return (index, item) => item[property];
     }
     TrackBy.trackByProperty = trackByProperty;
+    function track(type) {
+        return {
+            by(property) {
+                return (index, item) => item[property];
+            }
+        };
+    }
+    TrackBy.track = track;
 })(TrackBy || (TrackBy = {}));
 
 class CommandContainer extends GarbageCollector {
@@ -1138,7 +1292,7 @@ EmptyStateComponent.decorators = [
           <ng-content></ng-content>
       </div>
   `,
-                styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
+                styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{display:flex;flex-direction:column;align-items:stretch;padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
             },] }
 ];
 EmptyStateComponent.ctorParameters = () => [];
@@ -1222,6 +1376,7 @@ class AbstractInputComponent extends DisposableComponent {
     constructor() {
         super();
         this.onValueEditedListeners = new EventListenerList();
+        this.userFloatLabel = 'always'; // TODO: make this an injectable default
         this.dense = false;
         // TODO: fix this.
         // tslint:disable-next-line:no-output-native
@@ -1753,6 +1908,48 @@ IconComponent.propDecorators = {
     });
 })(IconComponent || (IconComponent = {}));
 
+class LoadingContainerComponent extends GarbageCollector {
+    constructor() {
+        super();
+    }
+    get state() {
+        return this.loadingModel.value ? "loaded" : "loading";
+    }
+    ngOnInit() {
+    }
+}
+LoadingContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-loading-container',
+                template: "<ng-content *ngIf=\"!loadingModel.value\"></ng-content>\n<section *ngIf=\"loadingModel.value\" class=\"loading-indicator-overlay\">\n  <div class=\"loading-message\">\n    <p>{{messageModel.value}}</p>\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  </div>\n</section>\n",
+                styles: [":host{display:block;position:relative}section.loading-indicator-overlay{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-message{display:inline-block;text-align:center;width:10em}"]
+            },] }
+];
+LoadingContainerComponent.ctorParameters = () => [];
+LoadingContainerComponent.propDecorators = {
+    loadingModel: [{ type: Input }],
+    loading: [{ type: Input }],
+    messageModel: [{ type: Input }],
+    message: [{ type: Input }],
+    state: [{ type: HostBinding, args: ["class",] }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], LoadingContainerComponent.prototype, "loadingModel", void 0);
+__decorate([
+    StoreInValueModel("loadingModel"),
+    __metadata("design:type", Boolean)
+], LoadingContainerComponent.prototype, "loading", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], LoadingContainerComponent.prototype, "messageModel", void 0);
+__decorate([
+    StoreInValueModel("messageModel"),
+    __metadata("design:type", String)
+], LoadingContainerComponent.prototype, "message", void 0);
+
 class NoopComponent {
     constructor() {
     }
@@ -1780,9 +1977,13 @@ ScrollContainerComponent.decorators = [
 ];
 ScrollContainerComponent.ctorParameters = () => [];
 
-class SectionHeaderComponent {
+class SectionHeaderComponent extends DisposableComponent {
     constructor() {
-        this.underline = false;
+        super();
+        // readonly i18n = I18nMarsUi.components.layout.header;
+        this.size = 'medium';
+        this.borderTop = false;
+        this.borderBottom = false;
     }
     ngOnInit() {
     }
@@ -1790,13 +1991,15 @@ class SectionHeaderComponent {
 SectionHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-section-header',
-                template: "<ng-content></ng-content>\n",
-                styles: [":host{--def-border-bottom-color:var(--border-bottom-color,rgba(0,0,0,0.07));display:block;padding:8px 16px;font-size:12px;line-height:12px;color:rgba(0,0,0,.5)}:host.underline{border-bottom:1px solid var(--def-border-bottom-color)}"]
+                template: "<span class=\"container-start\"><ng-content select=\"[header-start]\"></ng-content><ng-content></ng-content></span>\n<span class=\"container-middle\"><ng-content select=\"[header-center]\"></ng-content></span>\n<span class=\"container-end\"><ng-content select=\"[header-end]\"></ng-content></span>\n",
+                styles: [":host{display:flex;flex-direction:row;align-items:center;--resolved-padding:var(--padding,var(--default-padding));--resolved-padding-right:var(--padding-right,calc(var(--default-padding)/2));padding-left:var(--resolved-padding);padding-right:var(--resolved-padding-right);box-sizing:border-box}:host.has-back-button{padding-left:0}:host.toolbar{height:56px;min-height:56px}:host.toolbar span{font-weight:500;font-size:18px;color: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}"]
             },] }
 ];
 SectionHeaderComponent.ctorParameters = () => [];
 SectionHeaderComponent.propDecorators = {
-    underline: [{ type: Input }, { type: HostBinding, args: ['class.underline',] }]
+    size: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    borderTop: [{ type: Input }, { type: HostBinding, args: ['class.border-top',] }],
+    borderBottom: [{ type: Input }, { type: HostBinding, args: ['class.border-bottom',] }]
 };
 
 class SwitchCaseOption {
@@ -3514,15 +3717,15 @@ class TreeExpansionModel {
 
 class FlattenedTreeListModel extends ComputedListModel {
     constructor(source, childRef, expansionModel) {
-        super(source);
+        super(source, {
+            initialValue: [],
+            identifiedWith: row => source.identityOf(row)
+        });
         this.source = source;
         this.childRef = childRef;
         this.expansionModel = expansionModel;
         this.trackSource(expansionModel.isExpandedPredicate);
     }
-    getIdentityOf(item) {
-        return this.source.identityOf(item);
-    }
     compute(values) {
         const result = [];
         values.forEach(rootNode => {
@@ -3593,6 +3796,7 @@ class TreeTableModel extends AbstractTableModel {
         const childExtractor = _.isFunction(childAccessor) ? childAccessor : row => row[childAccessor];
         this.flattenedDataSource = this.registerDisposable(new FlattenedTreeListModel(source, childExtractor, this.treeExpansionModel));
         this.setDataSource(this.flattenedDataSource);
+        this.addRowClass('aup-node-collapsed', row => this.isCollapsed(row));
     }
     treeControlColumn(builder) {
         const columnId = 'tree-label';
@@ -3918,6 +4122,26 @@ __decorate([
     __metadata("design:type", PageController)
 ], PaginatorComponent.prototype, "pageController", void 0);
 
+class LabelledValueComponent extends DisposableComponent {
+    constructor() {
+        super();
+        // const {chain} = Dsl.disposeWith(this);
+    }
+    ngOnInit() {
+    }
+}
+LabelledValueComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-labelled-value',
+                template: "<label>{{label}}</label>\n<ng-content></ng-content>\n",
+                styles: [":host{display:inline-flex;flex-direction:column;align-items:flex-start}label{font-weight:400;font-size:12px;color:rgba(0,0,0,.57);margin-bottom:6px;white-space:nowrap}"]
+            },] }
+];
+LabelledValueComponent.ctorParameters = () => [];
+LabelledValueComponent.propDecorators = {
+    label: [{ type: Input }]
+};
+
 class ComponentsModule {
     constructor(faIconLibrary) {
         faIconLibrary.addIconPacks(fas);
@@ -3925,6 +4149,29 @@ class ComponentsModule {
 }
 ComponentsModule.decorators = [
     { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    BrowserAnimationsModule,
+                    FormsModule,
+                    MatInputModule,
+                    MatFormFieldModule,
+                    MatSelectModule,
+                    MatTabsModule,
+                    DirectivesModule,
+                    MatIconModule,
+                    MatButtonModule,
+                    MatCheckboxModule,
+                    MatTableModule,
+                    PortalModule,
+                    CdkScrollableModule,
+                    FontAwesomeModule,
+                    MatTooltipModule,
+                    MatAutocompleteModule,
+                    MatMenuModule,
+                    MatDividerModule,
+                    MatProgressSpinnerModule,
+                    MatProgressBarModule
+                ],
                 declarations: [
                     AbstractInputComponent,
                     AbstractValueInputComponent,
@@ -3973,29 +4220,11 @@ ComponentsModule.decorators = [
                     BusyOverlayComponent,
                     EmptyStateComponent,
                     PaginatorComponent,
-                    AbstractTableComponent
-                ],
-                imports: [
-                    CommonModule,
-                    BrowserAnimationsModule,
-                    FormsModule,
-                    MatInputModule,
-                    MatFormFieldModule,
-                    MatSelectModule,
-                    MatTabsModule,
-                    DirectivesModule,
-                    MatIconModule,
-                    MatButtonModule,
-                    MatCheckboxModule,
-                    MatTableModule,
-                    PortalModule,
-                    CdkScrollableModule,
-                    FontAwesomeModule,
-                    MatTooltipModule,
-                    MatAutocompleteModule,
-                    MatMenuModule,
-                    MatDividerModule,
-                    MatProgressSpinnerModule
+                    AbstractTableComponent,
+                    AbstractCardContainerComponent,
+                    CardStackComponent,
+                    LabelledValueComponent,
+                    LoadingContainerComponent
                 ],
                 exports: [
                     NumberInputComponent,
@@ -4032,6 +4261,9 @@ ComponentsModule.decorators = [
                     BusyOverlayComponent,
                     EmptyStateComponent,
                     PaginatorComponent,
+                    CardStackComponent,
+                    LabelledValueComponent,
+                    LoadingContainerComponent,
                 ],
                 providers: [
                     FocusBindingFactory
@@ -4067,7 +4299,8 @@ class ActivityActionsComponent extends DisposableComponent {
     constructor(cdr) {
         super();
         this.cdr = cdr;
-        this.align = 'stretch';
+        this.layout = ActivityActionsComponent.Layout.BLOCK;
+        this.align = ActivityActionsComponent.Align.STRETCH;
     }
     set faces(faces) {
         this.confirmFace = faces.confirm;
@@ -4079,12 +4312,6 @@ class ActivityActionsComponent extends DisposableComponent {
     set style(style) {
         this.faces = style;
     }
-    get alignEnd() {
-        return this.align === 'end';
-    }
-    get alignStretch() {
-        return this.align === 'stretch';
-    }
     ngOnInit() {
     }
     hasConfirmFace() {
@@ -4103,7 +4330,7 @@ ActivityActionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-activity-actions',
                 template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n",
-                styles: [":host{display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}"]
+                styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap:var(--activity-actions-gap,8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}"]
             },] }
 ];
 ActivityActionsComponent.ctorParameters = () => [
@@ -4116,9 +4343,8 @@ ActivityActionsComponent.propDecorators = {
     confirmFace: [{ type: Input }],
     cancelFace: [{ type: Input }],
     style: [{ type: Input }],
-    align: [{ type: Input }],
-    alignEnd: [{ type: HostBinding, args: ['class.align-end',] }],
-    alignStretch: [{ type: HostBinding, args: ['class.align-stretch',] }]
+    layout: [{ type: Input }, { type: HostBinding, args: ['attr.layout',] }],
+    align: [{ type: Input }, { type: HostBinding, args: ['attr.align',] }]
 };
 __decorate([
     TrackExternal(),
@@ -4128,6 +4354,17 @@ __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
 ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+(function (ActivityActionsComponent) {
+    ActivityActionsComponent.Layout = Enum({
+        INLINE: 'inline',
+        BLOCK: 'block'
+    });
+    ActivityActionsComponent.Align = Enum({
+        START: 'start',
+        END: 'end',
+        STRETCH: 'stretch'
+    });
+})(ActivityActionsComponent || (ActivityActionsComponent = {}));
 
 const ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
 class Activity extends DisposableComponent {
@@ -4646,7 +4883,7 @@ class ActivityContainerComponent extends AbstractInteractionContext {
 ActivityContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-activity-container',
-                template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busyModel]=\"busy\">\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n",
+                template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busyModel]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n",
                 styles: [":host{display:flex;flex-direction:column}aup-busy-overlay,mat-tab-group{flex:1}"]
             },] }
 ];
@@ -4725,6 +4962,9 @@ class AbstractActivityTriggerComponent extends DisposableComponent {
             });
         });
     }
+    get interactionContext() {
+        return lang$1.abstractMethod(this.constructor);
+    }
     ngOnInit() {
     }
     get isActive() {
@@ -4946,7 +5186,10 @@ InteractionService.ctorParameters = () => [
 class ModalActivityTriggerComponent extends AbstractActivityTriggerComponent {
     constructor(interactionService) {
         super();
-        this.interactionContext = interactionService.createModalInteractionContextDisposedWith(this);
+        this._interactionContext = interactionService.createModalInteractionContextDisposedWith(this);
+    }
+    get interactionContext() {
+        return this._interactionContext;
     }
 }
 ModalActivityTriggerComponent.decorators = [
@@ -4986,6 +5229,9 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
         var _a;
         return this.animateFirstActivity ? (((_a = this.tabConfig) === null || _a === void 0 ? void 0 : _a.animationDuration) || '500ms') : '0ms';
     }
+    get active() {
+        return this.isActive();
+    }
     ngAfterViewInit() {
         this.interactionService.registerInplaceInteractionContext(this);
     }
@@ -5030,8 +5276,80 @@ InPlaceInteractionContextComponent.ctorParameters = () => [
 ];
 InPlaceInteractionContextComponent.propDecorators = {
     activityContainerComponent: [{ type: ViewChild, args: ['activityContainer', { static: true },] }],
-    animateFirstActivity: [{ type: Input }]
+    animateFirstActivity: [{ type: Input }],
+    active: [{ type: HostBinding, args: ["class.active",] }]
+};
+
+/**
+ *
+ */
+class AddCardActivityComponent extends AbstractActivityTriggerComponent {
+    constructor(interactionService) {
+        super();
+        this.interactionStyle = AddCardActivityComponent.InteractionType.MODAL;
+        this.renderAs = AddCardActivityComponent.RenderAs.CARD;
+        this.notCard = true;
+        const { chain } = Dsl.disposeWith(this);
+        this.modalInteractionContext = interactionService.createModalInteractionContextDisposedWith(this);
+        this.faceList = chain(this.faceModel).mapToList(face => [face]);
+    }
+    get renderAsClass() {
+        return `render-as-${this.renderAs}`;
+    }
+    get activityTypeClass() {
+        return `${this.interactionStyle}-activity`;
+    }
+    isRenderAsCard() {
+        return this.renderAs === 'card';
+    }
+    isRenderAsButton() {
+        return this.renderAs === 'button';
+    }
+    ngOnInit() {
+    }
+    get interactionContext() {
+        switch (this.interactionStyle) {
+            case 'inline':
+                return this.inlineInteractionContext;
+            default:
+                return this.modalInteractionContext;
+        }
+    }
+    isModal() {
+        return this.interactionStyle === 'modal';
+    }
+    isInline() {
+        return this.interactionStyle === 'inline';
+    }
+}
+AddCardActivityComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-add-card-activity',
+                template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\" [pectinCommand]=\"startActivityCommand\">\n  <aup-command *ngIf=\"isRenderAsButton()\" [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n  <section *ngIf=\"isRenderAsCard()\" class=\"face-wrapper\">\n    <aup-command-face class=\"mat-button\" [faces]=\"faceList.value\"></aup-command-face>\n  </section>\n</aup-in-place-interaction-context>\n",
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch;background-color:#fff}:host[interactionStyle=inline][renderas=card]:not(.active){transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color: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}"]
+            },] }
+];
+AddCardActivityComponent.ctorParameters = () => [
+    { type: InteractionService }
+];
+AddCardActivityComponent.propDecorators = {
+    inlineInteractionContext: [{ type: ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }],
+    interactionStyle: [{ type: Input }],
+    renderAs: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    notCard: [{ type: HostBinding, args: ['class.not-card',] }],
+    renderAsClass: [{ type: HostBinding, args: ['class',] }],
+    activityTypeClass: [{ type: HostBinding, args: ['class',] }]
 };
+(function (AddCardActivityComponent) {
+    AddCardActivityComponent.InteractionType = Enum({
+        MODAL: 'modal',
+        INLINE: 'inline'
+    });
+    AddCardActivityComponent.RenderAs = Enum({
+        CARD: 'card',
+        BUTTON: 'button'
+    });
+})(AddCardActivityComponent || (AddCardActivityComponent = {}));
 
 /**
  * Css Vars.
@@ -5094,6 +5412,9 @@ class InlineActivityTriggerComponent extends AbstractActivityTriggerComponent {
     constructor() {
         super();
     }
+    get interactionContext() {
+        return this._interactionContext;
+    }
 }
 InlineActivityTriggerComponent.decorators = [
     { type: Component, args: [{
@@ -5104,7 +5425,7 @@ InlineActivityTriggerComponent.decorators = [
 ];
 InlineActivityTriggerComponent.ctorParameters = () => [];
 InlineActivityTriggerComponent.propDecorators = {
-    interactionContext: [{ type: ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
+    _interactionContext: [{ type: ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
 };
 
 /**
@@ -5135,6 +5456,7 @@ class PopupInteractionContextComponent extends DisposableComponent {
         const self = this;
         const overlayRef = this._overlay.create({
             hasBackdrop: false,
+            disposeOnNavigation: true,
             panelClass: 'aup-popup-interaction-panel',
             positionStrategy: this._overlay.position()
                 .flexibleConnectedTo(this._element)
@@ -5265,44 +5587,93 @@ InteractionContextTriggerFor.propDecorators = {
 // @see https://github.com/ng-packagr/ng-packagr/issues/641 and  https://github.com/angular/angular/issues/21123
 // we're getting a metadata error for D for no reason that I can find and only during the build (ng serve works fine)
 // @dynamic
-class AbstractInputActivity extends Activity {
+class InputActivity extends Activity {
     constructor(data) {
+        var _a, _b;
         super();
         this.data = data;
         this.class = 'aup-input-activity';
         const form = new DirtyTrackingForm();
         this.valueModel = form.valueModel(this.data.initialValue);
         this.valueModel.validateUsing(data.validators || []);
-        this.confirmCommand = Command.create(() => {
+        // TODO: move to global configuration
+        this.confirmFace = (_a = data.confirmFace) !== null && _a !== void 0 ? _a : {
+            icon: () => 'mat:check'
+        };
+        this.cancelFace = (_b = data.cancelFace) !== null && _b !== void 0 ? _b : {
+            icon: () => 'mat:clear'
+        };
+        this.confirmCommand = Command.create(() => __awaiter(this, void 0, void 0, function* () {
             if (this.valueModel.validate()) {
                 if (data.save) {
-                    return Promise.resolve(data.save(this.valueModel, this.interactionContext))
-                        .then(() => this.done());
+                    const self = this;
+                    try {
+                        let allGood = true;
+                        const result = yield data.save(this.valueModel.value, {
+                            injectError(error) {
+                                allGood = false;
+                                self.valueModel.injectErrors([error]);
+                            }
+                        });
+                        if (allGood) {
+                            this.done(this.valueModel.value);
+                        }
+                    }
+                    catch (e) {
+                        console.error(e);
+                    }
                 }
                 else {
                     this.done(this.valueModel.value);
                 }
             }
-        });
+        }));
         this.cancelCommand = Command.create(() => {
             this.cancel();
         });
+        this.busyWhile(this.confirmCommand.busy);
+    }
+    get layout() {
+        var _a, _b;
+        return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.layout) !== null && _b !== void 0 ? _b : InputActivity.Layout.BLOCK;
     }
     onActivityReady() {
         this.valueModel.focusContext.requestFocus();
     }
+    get additionalCssClassName() {
+        var _a;
+        return (_a = this.data.cssClassName) !== null && _a !== void 0 ? _a : '';
+    }
+    onEscape() {
+        if (this.shouldCancelOnEscape() && this.cancelCommand.enabled.value) {
+            this.cancelCommand.execute();
+        }
+    }
+    shouldCancelOnEscape() {
+        return _.isNil(this.data.cancelOnEscape) // we default to true..
+            || this.data.cancelOnEscape;
+    }
 }
-AbstractInputActivity.decorators = [
+InputActivity.decorators = [
     { type: Component, args: [{ template: `` },] }
 ];
-AbstractInputActivity.ctorParameters = () => [
+InputActivity.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
 ];
-AbstractInputActivity.propDecorators = {
-    class: [{ type: HostBinding, args: ['class',] }]
+InputActivity.propDecorators = {
+    class: [{ type: HostBinding, args: ['class',] }],
+    layout: [{ type: Input }, { type: HostBinding, args: ['attr.layout',] }],
+    additionalCssClassName: [{ type: HostBinding, args: ["class",] }],
+    onEscape: [{ type: HostListener, args: ['keydown.escape',] }]
 };
+(function (InputActivity) {
+    InputActivity.Layout = Enum({
+        INLINE: 'inline',
+        BLOCK: 'block'
+    });
+})(InputActivity || (InputActivity = {}));
 
-class StringInputActivity extends AbstractInputActivity {
+class StringInputActivity extends InputActivity {
 }
 StringInputActivity.decorators = [
     { type: Component, args: [{
@@ -5313,13 +5684,15 @@ StringInputActivity.decorators = [
                       [placeholder]="data.placeholder"
                       [command.enter]="confirmCommand"
                       [command.escape]="cancelCommand"></aup-string-input>
-    <aup-activity-actions align="end"
-                          [faces]="data.buttonStyle"></aup-activity-actions>
+    <aup-activity-actions [layout]="layout" align="end"
+                          [confirmFace]="confirmFace"
+                          [cancelFace]="cancelFace"
+    ></aup-activity-actions>
   `
             },] }
 ];
 
-class SelectInputActivity extends AbstractInputActivity {
+class SelectInputActivity extends InputActivity {
     constructor() {
         super(...arguments);
         this.defaultOptionLabelFormat = (option) => {
@@ -5347,7 +5720,9 @@ SelectInputActivity.decorators = [
                       [options]="options"
                       [optionLabelFormat]="optionLabelFormat"
     ></aup-select-input>
-    <aup-activity-actions align="end" [faces]="data.buttonStyle"
+    <aup-activity-actions [layout]="layout" align="end"
+                          [confirmFace]="confirmFace"
+                          [cancelFace]="cancelFace"
     ></aup-activity-actions>
   `
             },] }
@@ -5489,6 +5864,9 @@ class PopupActivityTriggerComponent extends AbstractActivityTriggerComponent {
         this.anchorX = 'start';
         this.anchorY = 'bottom';
     }
+    get interactionContext() {
+        return this._interactionContext;
+    }
 }
 PopupActivityTriggerComponent.decorators = [
     { type: Component, args: [{
@@ -5501,9 +5879,208 @@ PopupActivityTriggerComponent.ctorParameters = () => [];
 PopupActivityTriggerComponent.propDecorators = {
     anchorX: [{ type: Input }],
     anchorY: [{ type: Input }],
-    interactionContext: [{ type: ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
+    _interactionContext: [{ type: ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
 };
 
+class InlineEditorModel extends GarbageCollector {
+    constructor(valueModel, saveCallback) {
+        super();
+        this.valueModel = valueModel;
+        this.saveCallback = saveCallback;
+        this.editing = new MutableValueModel(false);
+        this._validators = new MutableListModel();
+        this._editingEnabled = this.registerDisposable(new DelegatingValueModel().withDefault(true));
+        assert.notNil(valueModel);
+        const { when } = Dsl.disposeWith(this);
+        when(this.editingEnabled).becomesFalsey(() => this.cancelEdit());
+    }
+    get editingEnabled() {
+        return this._editingEnabled.readonly;
+    }
+    disableWhile(condition) {
+        const { chain } = Dsl.disposeWith(this);
+        this.enableWhile(chain(condition).isFalsey());
+        return this;
+    }
+    enableWhile(condition) {
+        this._editingEnabled.setDelegate(condition);
+        return this;
+    }
+    get validators() {
+        return this._validators.readonly;
+    }
+    validateUsing(validator) {
+        this._validators.push(validator);
+        return this;
+    }
+    isEditing() {
+        return this.editing.value;
+    }
+    cancelEdit() {
+        this.editing.value = false;
+    }
+    startEditing() {
+        this.editing.value = true;
+    }
+}
+(function (InlineEditorModel) {
+    function create(valueModel, options) {
+        return new InlineEditorModel(valueModel, options.save);
+    }
+    InlineEditorModel.create = create;
+})(InlineEditorModel || (InlineEditorModel = {}));
+TrackExternal.oneTimeBinding(InlineEditorModel);
+
+/**
+ * @example
+ * const source: ValueModel<string> = ...;
+ * const model = InlineEditorModel.create(source, {
+ *   save(updated:string, context: EditContext) => {
+ *      try {
+ *        try and save the thing...
+ *      } catch(error) {
+ *        context.injectError(error)
+ *      }
+ * }).validateUsing(Validator.present("We'll need a value");
+ *
+ * # in the view
+ * <aup-inline-string-editor
+ *       label="My field"
+ *       placeHolder="I'm ready for a string..."
+ *       [editorModel]="model"></aup-inline-string-editor>
+ */
+class InlineStringEditorComponent extends DisposableComponent {
+    constructor(interactionService) {
+        super();
+        this.editingEnabled = this.registerDisposable(new DelegatingValueModel());
+        const { chain, when, valueOf } = Dsl.disposeWith(this);
+        const modalIC = interactionService.createModalInteractionContextDisposedWith(this);
+        const resolvedFacesModel = chain(this.facesModel).map(userFaces => {
+            return Object.assign(Object.assign({}, InlineStringEditorComponent.DEFAULT_FACES), userFaces);
+        }, { allowNil: true });
+        this.editFaceModel = resolvedFacesModel.pluck('edit');
+        this.saveFace = resolvedFacesModel.pluck('save');
+        this.cancelFace = resolvedFacesModel.pluck('cancel');
+        const self = this;
+        this.editCommand = Command.create(() => __awaiter(this, void 0, void 0, function* () {
+            this.editorModel.editing.value = true;
+            try {
+                yield this.interactionContext.startActivity(StringInputActivity, this.createInputActivityData());
+            }
+            catch (e) {
+                // don't care if they cancelled, just hiding the console errors
+            }
+            finally {
+                this.editorModel.editing.value = false;
+            }
+        })).enableWhile(this.editingEnabled);
+        this.onDispose(() => this.cancelEdit());
+    }
+    ngOnInit() {
+        // our editor model is a one time binding without delegates so we can only
+        // use it once we've been initialised
+        const { chain, when, valueOf } = Dsl.disposeWith(this);
+        if (!this.editorModel) {
+            lang$1.illegalState('editorModel is required');
+        }
+        this.editingEnabled.setDelegate(this.editorModel.editingEnabled);
+        when(this.editorModel.editing).becomesTruthy(() => {
+            this.editCommand.execute();
+        }, { asLongAs: this.editCommand.enabled });
+        when(this.editorModel.editing).becomesFalsey(() => this.cancelEdit());
+        this.empty = valueOf.any(chain.stringValue(this.editorModel.valueModel).isBlank()
+        // deviceDescription.isNil()
+        ).areTruthy();
+        this.displayValue = chain(this.editorModel.valueModel).map(v => {
+            return _.isEmpty(v) ? this.placeHolderModel.value : v;
+        }, { dependsOn: this.placeHolderModel, allowNil: true });
+    }
+    createInputActivityData() {
+        const self = this;
+        return {
+            initialValue: self.editorModel.valueModel.value,
+            confirmFace: self.saveFace.value,
+            cancelFace: self.cancelFace.value,
+            placeholder: self.placeHolderModel.value,
+            label: self.label,
+            layout: InputActivity.Layout.INLINE,
+            validators: self.editorModel.validators.value,
+            save(value, inputContext) {
+                return __awaiter(this, void 0, void 0, function* () {
+                    yield self.editorModel.saveCallback(value, inputContext);
+                });
+            }
+        };
+    }
+    cancelEdit() {
+        if (this.isEditing()) {
+            this.interactionContext.cancelActiveActivity();
+        }
+    }
+    startEdit() {
+        if (!this.isEditing() && this.editCommand.enabled.value) {
+            this.editCommand.execute();
+        }
+    }
+    isEditing() {
+        return this.interactionContext.isActive();
+    }
+    isEmpty() {
+        return this.empty.value;
+    }
+}
+InlineStringEditorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-inline-string-editor',
+                template: "<div class=\"container\" *ngIf=\"!editorModel.isEditing()\">\n  <mat-form-field appearance=\"standard\" floatLabel=\"always\" (click)=\"startEdit()\"\n                  [class.editable]=\"editingEnabled.value\" [class.empty]=\"isEmpty()\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input matInput\n           placeholder=\"{{placeHolder}}\"\n           [ngModel]=\"editorModel.valueModel.value\"\n           [disabled]=\"true\"\n    >\n    <!--    <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>-->\n    <!--    <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>-->\n    <!--    <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>-->\n  </mat-form-field>\n  <aup-command *ngIf=\"editCommand.enabled.value\" [command]=\"editCommand\" [faceModel]=\"editFaceModel\"></aup-command>\n</div>\n<aup-in-place-interaction-context [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n"
+            },] }
+];
+InlineStringEditorComponent.ctorParameters = () => [
+    { type: InteractionService }
+];
+InlineStringEditorComponent.propDecorators = {
+    editorModel: [{ type: Input }],
+    facesModel: [{ type: Input }],
+    faces: [{ type: Input }],
+    interactionContext: [{ type: ViewChild, args: [InPlaceInteractionContextComponent,] }],
+    label: [{ type: Input }],
+    placeHolder: [{ type: Input }],
+    placeHolderModel: [{ type: Input }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", InlineEditorModel)
+], InlineStringEditorComponent.prototype, "editorModel", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], InlineStringEditorComponent.prototype, "facesModel", void 0);
+__decorate([
+    StoreInValueModel('facesModel'),
+    __metadata("design:type", Object)
+], InlineStringEditorComponent.prototype, "faces", void 0);
+__decorate([
+    StoreInValueModel('placeHolderModel'),
+    __metadata("design:type", String)
+], InlineStringEditorComponent.prototype, "placeHolder", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", ValueModel)
+], InlineStringEditorComponent.prototype, "placeHolderModel", void 0);
+(function (InlineStringEditorComponent) {
+    InlineStringEditorComponent.DEFAULT_FACES = {
+        edit: {
+            icon: () => 'mat:edit'
+        },
+        save: {
+            icon: () => 'mat:check'
+        },
+        cancel: {
+            icon: () => 'mat:clear'
+        }
+    };
+})(InlineStringEditorComponent || (InlineStringEditorComponent = {}));
+
 class InteractionModule {
 }
 InteractionModule.decorators = [
@@ -5519,7 +6096,11 @@ InteractionModule.decorators = [
                     DirectivesModule,
                     FlexModule,
                     GridModule,
-                    ComponentsModule
+                    ComponentsModule,
+                    FormsModule,
+                    MatInputModule,
+                    MatFormFieldModule,
+                    A11yModule
                 ],
                 declarations: [
                     ActivityContainerComponent,
@@ -5533,7 +6114,7 @@ InteractionModule.decorators = [
                     PopupInteractionContextComponent,
                     StringInputActivity,
                     SelectInputActivity,
-                    AbstractInputActivity,
+                    InputActivity,
                     InteractionContextTriggerFor,
                     Activity,
                     ActivityTitleComponent,
@@ -5542,7 +6123,9 @@ InteractionModule.decorators = [
                     AbstractActivityTriggerComponent,
                     PopupActivityTriggerComponent,
                     InlineActivityTriggerComponent,
-                    ModalActivityTriggerComponent
+                    ModalActivityTriggerComponent,
+                    AddCardActivityComponent,
+                    InlineStringEditorComponent,
                 ],
                 exports: [
                     ActivityContainerComponent,
@@ -5558,7 +6141,9 @@ InteractionModule.decorators = [
                     ActivityBodyComponent,
                     PopupActivityTriggerComponent,
                     InlineActivityTriggerComponent,
-                    ModalActivityTriggerComponent
+                    ModalActivityTriggerComponent,
+                    AddCardActivityComponent,
+                    InlineStringEditorComponent,
                 ],
                 entryComponents: [
                     ActivityContainerComponent,
@@ -5839,16 +6424,27 @@ class PlaceComponent extends DisposableComponent {
         when(this._active).becomesTruthy(() => this._notifyPlaceReady());
         this.childPlaces = this.placeDefinition.children.map(d => d.component);
     }
-    // @Trace()
     initialiseVisit(visit, notifyVisitChanged) {
         assert.isNil(this.visitModel.value);
         const { when } = Dsl.disposeWith(this);
         this.visitModel.value = visit;
         DebugContext.getOrCreate(this.visitModel).tag(`${this.placeDefinition.component.name}.visitModel`);
-        this.placeDefinition.getVisitParameterDefs().forEach(parameterDef => this.installBinding(parameterDef));
+        // we track if the any of the bindings updated the route.  If so we remember it and update the
+        // route in one go at the end.
+        this.placeDefinition
+            .getVisitParameterDefs()
+            .forEach(parameterDef => this.installAndInitialiseBinding(visit, parameterDef));
         when(this.visitModel).changes((current, previous) => {
             notifyVisitChanged(current, previous);
         }, { unless: this._inVisitUpdate });
+        // TODO: this needs to do a replace url option so that the new url isn't put in the history.... for
+        //       now we're not doing it as it's a fair bit of effort and will only affect people if they're
+        //       cutting and pasting urls to each other.
+        // // the binding process can update the visit (e.g. if a selection model has already selected during
+        // // component construction) and there was no value specified in the route
+        // if (visit.hasRoutingChangedFrom(this.visitModel.value)) {
+        //   notifyVisitChanged(this.visitModel.value, visit)
+        // }
     }
     updateVisit(visit) {
         assert.isTruthy(this.isInitialised());
@@ -5861,7 +6457,12 @@ class PlaceComponent extends DisposableComponent {
         return !!this.visitModel.value;
     }
     // @Trace()
-    installBinding(parameterDef) {
+    /**
+     * Initialised the component bindings.  If any binding has an initial model value (e.g. a selection model
+     * initialised during the constructor) and the route has nothing, then the visit will be udpated and this
+     * method will return ture to nofiy the the visit has changed.
+     */
+    installAndInitialiseBinding(initialVisit, parameterDef) {
         const model = this[parameterDef.propertyName];
         DebugContext.tag(model, `${this.placeDefinition.component.name}.${parameterDef.propertyName}`);
         const binding = this.registerDisposable(new Binding(this.visitModel, model, {
@@ -5875,7 +6476,17 @@ class PlaceComponent extends DisposableComponent {
                 return currentVisit.replace(parameterDef, value);
             }
         }));
-        binding.writeRight();
+        // Now we need to initialise the binding direction.  If we have a value in the Url then we should always push
+        // that to the view.  If we don't and the view already has a value (e.g. a selection model has already initialised in the
+        // component constructor) then we should push that to the route.
+        const isInVisit = !_.isNil(initialVisit.getParameterValue(parameterDef));
+        const isInModel = !_.isNil(model.value);
+        if (!isInVisit && isInModel) {
+            binding.writeLeft(); // push it to the route
+        }
+        else {
+            binding.writeRight(); // push it to the model
+        }
     }
     get placeDefinition() {
         const definition = PlaceComponent.getDefinition(this.constructor);
@@ -6918,7 +7529,7 @@ class ConsolidatedParameterMap {
         return !!this.paramMaps.find(m => m.has(name));
     }
     get keys() {
-        return this.paramMaps.reduce((result, params) => result.concat(params.keys), []);
+        return _.uniq(this.paramMaps.reduce((result, params) => result.concat(params.keys), []));
     }
 }
 __decorate([
@@ -6995,9 +7606,13 @@ class Visit {
         });
         return new Visit(this.placeDefinition, params);
     }
+    // @Trace()
     hasRoutingChangedFrom(other) {
         const samePlace = other.placeDefinition === this.placeDefinition;
-        const sameRouteParameters = _.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+        const currentParams = this.placeDefinition.getFormattedRouteParameters(this, true);
+        const otherParams = this.placeDefinition.getFormattedRouteParameters(other, true);
+        // console.log({currentParams, otherParams});
+        const sameRouteParameters = _.isEqual(currentParams, otherParams);
         return !samePlace || !sameRouteParameters;
     }
     hasChangedFrom(other) {
@@ -7019,6 +7634,7 @@ class UrlSnapshot {
         this.url = url;
         this.urlTree = urlSerializer.parse(url);
     }
+    // @Trace()
     updateVisitSegments(visit) {
         const newUrlTree = this.urlSerializer.parse(this.url);
         // Ugly, but it works for now.
@@ -7095,12 +7711,6 @@ class UrlSnapshot {
         return `UrlSnapshot(${this.url})`;
     }
 }
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Visit]),
-    __metadata("design:returntype", UrlSnapshot)
-], UrlSnapshot.prototype, "updateVisitSegments", null);
 __decorate([
     Memoize(),
     __metadata("design:type", Function),
@@ -7181,6 +7791,9 @@ UrlService.ctorParameters = () => [
     { type: UrlSerializer }
 ];
 
+function asArray(item) {
+    return Array.isArray(item) ? item : [item];
+}
 class PlaceRouter extends GarbageCollector {
     constructor(angularRouter, angularLocation, interactionService, urlService, placeHistory) {
         super();
@@ -7344,11 +7957,10 @@ class PlaceRouter extends GarbageCollector {
         this.currentSession.onRouterEnd(event);
     }
     navigate(visit, options) {
+        const commands = asArray(visit).reduce((result, v) => {
+            return [...result, v.placeDefinition.path, ...this.createRouteParameters(v)];
+        }, []);
         return this.doNavigation(visit, (router) => __awaiter(this, void 0, void 0, function* () {
-            const commands = [
-                visit.placeDefinition.path,
-                ...this.createRouteParameters(visit)
-            ];
             yield this.angularRouter.navigate(commands, {
                 relativeTo: options ? options.relativeTo : null
             });
@@ -7361,7 +7973,7 @@ class PlaceRouter extends GarbageCollector {
                 lang.illegalState('Navigation already in progress');
             }
             const navigation = this.createNavigationSession(this.urlService.getCurrentRouterUrl());
-            navigation.storeVisit(visit);
+            asArray(visit).forEach(v => navigation.storeVisit(v));
             this.transitionTo(navigation);
             try {
                 yield runNavigationCommands(this.angularRouter);
@@ -7442,6 +8054,7 @@ class PlaceRouter extends GarbageCollector {
      * to be able to capture the back button on the first page.  If we don't then the back click will exit
      * the app directly and we don't get to ask.
      */
+    // @Trace()
     syncInteractionContextIdsWithRouter() {
         if (this.navigationSession) {
             // console.log(`Navigation active -> ${this.navigationSession.toString()}, sync delayed until finished.`);
@@ -7483,12 +8096,6 @@ PlaceRouter.ctorParameters = () => [
     { type: UrlService },
     { type: PlaceHistory }
 ];
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", Promise)
-], PlaceRouter.prototype, "syncInteractionContextIdsWithRouter", null);
 (function (PlaceRouter) {
     class State {
         constructor(activeVisits) {
@@ -8250,10 +8857,11 @@ class PlaceGuard {
                     }
                 }
                 const result = yield this.cleanInteractionState(activatedRoute, state, () => __awaiter(this, void 0, void 0, function* () {
+                    const navigationSession = this.placeRouter.navigationSession;
                     // Parse our route params.
                     const params = new ConsolidatedParameterMap(activatedRoute.url, activatedRoute.paramMap);
+                    // console.log("RouteParams", params)
                     const parsedParams = placeDefinition.parseRouteParams(params);
-                    const navigationSession = this.placeRouter.navigationSession;
                     const initialVisit = navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
                     const sanitiser = new VisitSanitiser(navigationSession, activatedRoute, this.router, this.placeHistory, this.injector);
                     const sanitisedVisit = yield sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams));
@@ -8505,5 +9113,5 @@ VisibilityService.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnListModel, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SelfAndDescendantsVisitor, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator, ɵ0 };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CardStackComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnListModel, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadingContainerComponent, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SelfAndDescendantsVisitor, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator, ɵ0 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map