@coolon/angular-ui-powerups 12.4.0-alpha.27 → 12.4.0-alpha.29

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

@@ -21,7 +21,7 @@ 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';
@@ -526,6 +526,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
@@ -587,30 +611,85 @@ var CommandFace;
  *   --card-background: var(--card-background, #fcfcfb);
  * }
  */
-class CardContainerComponent extends DisposableComponent {
-    constructor() {
-        super();
-    }
-    ngOnInit() {
-    }
+class CardContainerComponent extends AbstractCardContainerComponent {
 }
 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",
+                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</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 = () => [];
-CardContainerComponent.propDecorators = {
-    addCardCommand: [{ type: Input }],
-    addCardFace: [{ type: Input }],
-    addCardTemplate: [{ type: ContentChild, args: ["addCardTemplate",] }]
-};
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", Command)
-], CardContainerComponent.prototype, "addCardCommand", void 0);
+
+/**
+ * @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 {
+}
+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;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}"]
+            },] }
+];
 
 /**
  * Custom CSS:
@@ -1229,6 +1308,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
@@ -3926,6 +4006,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);
@@ -3933,6 +4033,28 @@ 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
+                ],
                 declarations: [
                     AbstractInputComponent,
                     AbstractValueInputComponent,
@@ -3981,29 +4103,10 @@ 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
                 ],
                 exports: [
                     NumberInputComponent,
@@ -4040,6 +4143,8 @@ ComponentsModule.decorators = [
                     BusyOverlayComponent,
                     EmptyStateComponent,
                     PaginatorComponent,
+                    CardStackComponent,
+                    LabelledValueComponent,
                 ],
                 providers: [
                     FocusBindingFactory
@@ -4075,7 +4180,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;
@@ -4087,12 +4193,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() {
@@ -4111,7 +4211,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}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}: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;padding:0}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}"]
             },] }
 ];
 ActivityActionsComponent.ctorParameters = () => [
@@ -4124,9 +4224,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(),
@@ -4136,6 +4235,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 {
@@ -5057,8 +5167,8 @@ InPlaceInteractionContextComponent.propDecorators = {
 class AddCardActivityComponent extends AbstractActivityTriggerComponent {
     constructor(interactionService) {
         super();
-        this.type = 'modal';
-        this.renderAs = 'card';
+        this.interactionStyle = AddCardActivityComponent.InteractionType.MODAL;
+        this.renderAs = AddCardActivityComponent.RenderAs.CARD;
         const { chain } = Dsl.disposeWith(this);
         this.modalInteractionContext = interactionService.createModalInteractionContextDisposedWith(this);
         this.faceList = chain(this.faceModel).mapToList(face => [face]);
@@ -5067,7 +5177,7 @@ class AddCardActivityComponent extends AbstractActivityTriggerComponent {
         return `render-as-${this.renderAs}`;
     }
     get activityTypeClass() {
-        return `${this.type}-activity`;
+        return `${this.interactionStyle}-activity`;
     }
     isRenderAsCard() {
         return this.renderAs === 'card';
@@ -5078,7 +5188,7 @@ class AddCardActivityComponent extends AbstractActivityTriggerComponent {
     ngOnInit() {
     }
     get interactionContext() {
-        switch (this.type) {
+        switch (this.interactionStyle) {
             case 'inline':
                 return this.inlineInteractionContext;
             default:
@@ -5086,17 +5196,17 @@ class AddCardActivityComponent extends AbstractActivityTriggerComponent {
         }
     }
     isModal() {
-        return this.type === 'modal';
+        return this.interactionStyle === 'modal';
     }
     isInline() {
-        return this.type === 'inline';
+        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}:host[type=inline][renderas=card]:not(.active){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)}:host[type=inline][renderas=card]:not(.active):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)}:host[type=inline][renderas=card]:not(.active):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)}:host[type=modal][renderas=card]{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)}:host[type=modal][renderas=card]: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)}:host[type=modal][renderas=card]: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)}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}"]
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch;background-color:#fff}:host[interactionStyle=inline][renderas=card]:not(.active){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)}:host[interactionStyle=inline][renderas=card]:not(.active):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)}:host[interactionStyle=inline][renderas=card]:not(.active):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)}:host[interactionStyle=modal][renderas=card]{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)}:host[interactionStyle=modal][renderas=card]: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)}:host[interactionStyle=modal][renderas=card]: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)}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 = () => [
@@ -5104,11 +5214,21 @@ AddCardActivityComponent.ctorParameters = () => [
 ];
 AddCardActivityComponent.propDecorators = {
     inlineInteractionContext: [{ type: ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }],
-    type: [{ type: Input }],
+    interactionStyle: [{ type: Input }],
     renderAs: [{ type: Input }, { type: HostBinding, args: ['class',] }],
     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.
@@ -5345,7 +5465,7 @@ 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) {
         super();
         this.data = data;
@@ -5353,36 +5473,62 @@ class AbstractInputActivity extends Activity {
         const form = new DirtyTrackingForm();
         this.valueModel = form.valueModel(this.data.initialValue);
         this.valueModel.validateUsing(data.validators || []);
-        this.confirmCommand = Command.create(() => {
+        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) {
+                        // don't care, just hide error messages
+                    }
                 }
                 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();
     }
 }
-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',] }]
 };
+(function (InputActivity) {
+    InputActivity.Layout = Enum({
+        INLINE: 'inline',
+        BLOCK: 'block'
+    });
+})(InputActivity || (InputActivity = {}));
 
-class StringInputActivity extends AbstractInputActivity {
+class StringInputActivity extends InputActivity {
 }
 StringInputActivity.decorators = [
     { type: Component, args: [{
@@ -5393,13 +5539,12 @@ 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" [faces]="data.buttonStyle"></aup-activity-actions>
   `
             },] }
 ];
 
-class SelectInputActivity extends AbstractInputActivity {
+class SelectInputActivity extends InputActivity {
     constructor() {
         super(...arguments);
         this.defaultOptionLabelFormat = (option) => {
@@ -5427,7 +5572,7 @@ SelectInputActivity.decorators = [
                       [options]="options"
                       [optionLabelFormat]="optionLabelFormat"
     ></aup-select-input>
-    <aup-activity-actions align="end" [faces]="data.buttonStyle"
+    <aup-activity-actions [layout]="layout" align="end" [faces]="data.buttonStyle"
     ></aup-activity-actions>
   `
             },] }
@@ -5587,6 +5732,182 @@ PopupActivityTriggerComponent.propDecorators = {
     _interactionContext: [{ type: ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
 };
 
+class InlineEditorModel {
+    constructor(valueModel, saveCallback) {
+        this.valueModel = valueModel;
+        this.saveCallback = saveCallback;
+        this.editing = new MutableValueModel(false);
+        this._validators = new MutableListModel();
+    }
+    get validators() {
+        return this._validators.readonly;
+    }
+    validateUsing(validator) {
+        this._validators.push(validator);
+        return this;
+    }
+    ;
+    isEditing() {
+        return this.editing.value;
+    }
+}
+(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: InlineEditorModel.SaveContext) => {
+ *      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();
+        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, just hiding the console errors
+            }
+            finally {
+                this.editorModel.editing.value = false;
+            }
+        }));
+        this.onDispose(() => this.cancelEdit());
+        // const txo = new TransactionObserver({ verbose: true }).onEvent(e => console.log(e.name, e.payload));
+        // txo.observe('this.editFace', this.editFaceModel);
+    }
+    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");
+        }
+        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,
+            buttonStyle: { confirm: self.saveFace.value, cancel: 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: "<ng-container *ngIf=\"!editorModel.isEditing()\">\n  <div class=\"content\" [class.editable]=\"editCommand.enabled.value\">\n    <label>{{label}}</label>\n    <p [class.place-holder]=\"empty.value\" (click)=\"editCommand.execute()\">{{displayValue.value}}</p>\n    <aup-command *ngIf=\"editCommand.enabled.value\" [command]=\"editCommand\" [faceModel]=\"editFaceModel\"></aup-command>\n  </div>\n</ng-container>\n<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n\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 = [
@@ -5616,7 +5937,7 @@ InteractionModule.decorators = [
                     PopupInteractionContextComponent,
                     StringInputActivity,
                     SelectInputActivity,
-                    AbstractInputActivity,
+                    InputActivity,
                     InteractionContextTriggerFor,
                     Activity,
                     ActivityTitleComponent,
@@ -5627,6 +5948,7 @@ InteractionModule.decorators = [
                     InlineActivityTriggerComponent,
                     ModalActivityTriggerComponent,
                     AddCardActivityComponent,
+                    InlineStringEditorComponent,
                 ],
                 exports: [
                     ActivityContainerComponent,
@@ -5644,6 +5966,7 @@ InteractionModule.decorators = [
                     InlineActivityTriggerComponent,
                     ModalActivityTriggerComponent,
                     AddCardActivityComponent,
+                    InlineStringEditorComponent,
                 ],
                 entryComponents: [
                     ActivityContainerComponent,
@@ -7522,6 +7845,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.`);
@@ -7563,12 +7887,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) {
@@ -8585,5 +8903,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, AddCardActivityComponent, 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, 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