@coolon/angular-ui-powerups 1.8.0 → 1.10.0

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

@@ -1,4 +1,4 @@
-import { __extends, __decorate, __metadata, __param, __awaiter, __generator, __spread, __assign } from 'tslib';
+import { __extends, __decorate, __metadata, __param, __awaiter, __generator, __assign, __spread } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Self, HostBinding, Component, EventEmitter, Output, ContentChild, TemplateRef, ChangeDetectorRef, ContentChildren, QueryList, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Optional, SkipSelf } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -10,13 +10,14 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, Command, FocusManager, DelegatingFormValueModel, TrackExternal, ListModel, StoreInListModel, ValueModel, StoreInValueModel, Deferred, Trace, MutableListModel, MutableValueModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, Command, FocusManager, DelegatingFormValueModel, TrackExternal, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, Deferred, Trace, MutableListModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
-import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
+import { FlexModule, GridModule } from '@angular/flex-layout';
+import { MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
-import { assert as assert$1, lang as lang$1, Opts, Klass } from '@coolon/typescript-utilities';
 import ___default, { isEqual, isNil } from 'lodash';
-import { FlexModule } from '@angular/flex-layout';
+import ResizeObserver from 'resize-observer-polyfill';
+import { assert as assert$1, lang as lang$1, Opts, Klass } from '@coolon/typescript-utilities';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -24,7 +25,6 @@ import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
-import ResizeObserver from 'resize-observer-polyfill';
 import { Observable } from 'rxjs';
 
 var CommandDirective = /** @class */ (function (_super) {
@@ -830,7 +830,7 @@ var TextInputComponent = /** @class */ (function (_super) {
     TextInputComponent = __decorate([
         Component({
             selector: 'aup-text-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
             styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}button[disabled]{visibility:hidden}textarea{overflow:auto}"]
         }),
         __metadata("design:paramtypes", [])
@@ -1195,6 +1195,170 @@ var ComponentsModule = /** @class */ (function () {
     return ComponentsModule;
 }());
 
+var Dimension = /** @class */ (function () {
+    function Dimension(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+    return Dimension;
+}());
+
+var Point = /** @class */ (function () {
+    function Point(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    Point.from = function (data) {
+        return new Point(data.x, data.y);
+    };
+    Point.prototype.translate = function (x, y) {
+        return new Point(this.x + x, this.y + y);
+    };
+    return Point;
+}());
+
+var Bounds = /** @class */ (function (_super) {
+    __extends(Bounds, _super);
+    function Bounds(top, left, width, height) {
+        var _this = _super.call(this, width, height) || this;
+        _this.top = top;
+        _this.left = left;
+        _this.width = width;
+        _this.height = height;
+        return _this;
+    }
+    Bounds.prototype.relativePositionOf = function (point) {
+        if (point instanceof MouseEvent) {
+            return new Point(point.clientX - this.left, point.clientY - this.top);
+        }
+        else {
+            return new Point(point.x - this.left, point.y - this.top);
+        }
+    };
+    return Bounds;
+}(Dimension));
+(function (Bounds) {
+    function ofElement(element) {
+        var rect = element.getBoundingClientRect();
+        return new Bounds(rect.top, rect.left, rect.width, rect.height);
+    }
+    Bounds.ofElement = ofElement;
+})(Bounds || (Bounds = {}));
+
+var ResizeAwareComponent = /** @class */ (function (_super) {
+    __extends(ResizeAwareComponent, _super);
+    function ResizeAwareComponent(elementRef, ngZone) {
+        var _this = _super.call(this) || this;
+        _this.elementRef = elementRef;
+        _this.ngZone = ngZone;
+        _this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
+        return _this;
+    }
+    ResizeAwareComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        this.updateBounds();
+        var element = this.elementRef.nativeElement;
+        var ro = new ResizeObserver(function (entries, observer) {
+            _this.ngZone.run(function () { return _this.updateBounds(); });
+        });
+        ro.observe(element);
+        this.onDispose(function () { return ro.disconnect(); });
+    };
+    Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
+        get: function () {
+            return this._boundsModel.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
+        get: function () {
+            return this.elementRef.nativeElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // TODO: Make this handle body scroll
+    ResizeAwareComponent.prototype.relativePositionOf = function (point) {
+        return this.bounds.relativePositionOf(point);
+    };
+    Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
+        get: function () {
+            return this._boundsModel.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ResizeAwareComponent.prototype.updateBounds = function () {
+        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    };
+    ResizeAwareComponent.ctorParameters = function () { return [
+        { type: ElementRef },
+        { type: NgZone }
+    ]; };
+    ResizeAwareComponent = __decorate([
+        Directive(),
+        __metadata("design:paramtypes", [ElementRef, NgZone])
+    ], ResizeAwareComponent);
+    return ResizeAwareComponent;
+}(DisposableComponent));
+
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+var ActivityActionsComponent = /** @class */ (function (_super) {
+    __extends(ActivityActionsComponent, _super);
+    function ActivityActionsComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.align = 'start';
+        return _this;
+    }
+    Object.defineProperty(ActivityActionsComponent.prototype, "alignEnd", {
+        get: function () {
+            return this.align === 'end';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ActivityActionsComponent.prototype.ngOnInit = function () {
+    };
+    ActivityActionsComponent.prototype.hasConfirmText = function () {
+        return !___default.isEmpty(this.confirmText);
+    };
+    __decorate([
+        Input(),
+        TrackExternal(),
+        __metadata("design:type", Command)
+    ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ActivityActionsComponent.prototype, "confirmText", void 0);
+    __decorate([
+        Input(),
+        TrackExternal(),
+        __metadata("design:type", Command)
+    ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ActivityActionsComponent.prototype, "align", void 0);
+    __decorate([
+        HostBinding('class.align-end'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], ActivityActionsComponent.prototype, "alignEnd", null);
+    ActivityActionsComponent = __decorate([
+        Component({
+            selector: 'aup-activity-actions',
+            template: "<button class=\"cancel\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n  <mat-icon>clear</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n  <mat-icon>done</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
+            styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}"]
+        })
+    ], ActivityActionsComponent);
+    return ActivityActionsComponent;
+}(DisposableComponent));
+
 var ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
 var Activity = /** @class */ (function (_super) {
     __extends(Activity, _super);
@@ -1514,6 +1678,8 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     ActivityContainerComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
         var _a = Dsl.disposeWith(this), chain = _a.chain, observe = _a.observe;
+        // using the component directly rather than (animationDone)=.. allows us
+        // to keep our callback private.
         observe.valuesFrom(this.tabs.animationDone).subscribe(function () { return _this.onAnimationFinished(); });
     };
     ActivityContainerComponent.prototype.initialise = function (identifier, api) {
@@ -1620,6 +1786,12 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     ActivityContainerComponent.prototype.finishAndStartCleanup = function () {
         var _this = this;
         if (!this._deferredCleanUp) {
+            // Important:
+            // Clear our tabs so the next activity triggers a tab change.
+            // Without this our animation done wasn't called when a single
+            // new activity followed a single tab activity (since we're tracking
+            // by activity index)
+            this.activityTabs = [];
             var promise = this.interactionServiceApi.notifyFinished(this);
             this._deferredCleanUp = promise
                 .finally(function () {
@@ -1631,26 +1803,32 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     ActivityContainerComponent.prototype.launchActivity = function (activityRef) {
         var cleanedTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
         this.activityTabs = cleanedTabs.concat(activityRef);
-        this.tabs.selectedIndex = this.activityTabs.length;
+        this.synchroniseSelectedTabIndex();
     };
     ActivityContainerComponent.prototype.activityIndex = function (index, activityRef) {
         return index;
     };
     ;
-    // @Trace()
     ActivityContainerComponent.prototype.onAnimationFinished = function () {
-        this.getSelectedOutlet().component.onActivityReady();
-        this.activityTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
+        if (this.onAnimationFinishedJob) {
+            this.onAnimationFinishedJob();
+            this.onAnimationFinishedJob = undefined;
+        }
     };
     /**
-     * Synchronises the selected tab index.  Returns true if there was no change to the selected index.
+     * Synchronises the selected tab index.
      */
-    // @Trace()
     ActivityContainerComponent.prototype.synchroniseSelectedTabIndex = function () {
+        var _this = this;
         var previousIndex = this.tabs.selectedIndex;
         var newIndex = this.getActiveActivityCount() - 1;
-        this.tabs.selectedIndex = newIndex;
-        return previousIndex === newIndex;
+        if (previousIndex !== newIndex) {
+            this.tabs.selectedIndex = newIndex;
+            this.onAnimationFinishedJob = function () {
+                _this.getSelectedOutlet().component.onActivityReady();
+                _this.activityTabs = _this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
+            };
+        }
     };
     ActivityContainerComponent.prototype.getSelectedOutlet = function () {
         return this.activityOutlets.toArray()[this.tabs.selectedIndex];
@@ -1687,7 +1865,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     ActivityContainerComponent = __decorate([
         Component({
             selector: 'aup-activity-container',
-            template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"dynamicHeight\" [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityTabs; trackBy: activityIndex\" >\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\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 tab of activityTabs; trackBy: activityIndex\" >\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
             styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
         }),
         __metadata("design:paramtypes", [])
@@ -1778,21 +1956,6 @@ var InteractionService = /** @class */ (function () {
         // Todo: allow multiple inplace interactions..
         interactionContext.initialise("ip" + ++inplaceMonitorCount, new InteractionService_1.ApiAdapter(this.placeRouter, this.inPlaceInteractionRegistry));
     };
-    // private assertModalCanStart() {
-    //   assert.isFalsey(this.inExclusiveInteraction.value);
-    //   assert.isFalsey(this.modalActive.value);
-    // }
-    //
-    // private assertInPlaceCanStart() {
-    //   assert.isFalsey(this.inExclusiveInteraction.value);
-    //   assert.isFalsey(this.modalActive.value);
-    //   assert.isFalsey(this._activeInlineContext.value);
-    // }
-    // // @Trace()
-    // getActiveContext(): InteractionContext {
-    //   assert.isTruthy(this.isActive());
-    //   return this._activeContext.value;
-    // }
     /**
      * Creates an interaction context that will prevent any other contexts from starting an
      * activity until it is disposed.  This is intended for use by the router for passing
@@ -1973,6 +2136,172 @@ var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
     return InPlaceInteractionContextComponent;
 }(DisposableComponent));
 
+var DialogInteractionContext = /** @class */ (function (_super) {
+    __extends(DialogInteractionContext, _super);
+    function DialogInteractionContext(identifier, api, dialogService, config) {
+        var _this = _super.call(this) || this;
+        _this.identifier = identifier;
+        _this.api = api;
+        _this.dialogService = dialogService;
+        _this.config = config;
+        _this.garbage = new GarbageCollector();
+        assert$1.notNil(dialogService);
+        return _this;
+    }
+    DialogInteractionContext.prototype.cancelActiveActivity = function () {
+        return this.activityContainer.cancelActiveActivity();
+    };
+    DialogInteractionContext.prototype.dispose = function () {
+        if (this.isActive()) {
+            lang.illegalState('Dispose called while active.');
+        }
+        this.garbage.dispose();
+    };
+    DialogInteractionContext.prototype.registerDisposable = function (disposable) {
+        return this.garbage.registerDisposable(disposable);
+    };
+    DialogInteractionContext.prototype.isActive = function () {
+        return !!this.activityContainer && this.activityContainer.isActive();
+    };
+    DialogInteractionContext.prototype.createAndLaunchActivity = function (activityType, data, disableClose) {
+        var _this = this;
+        assert$1.isNil(this._currentActivityRef);
+        var config = __assign(__assign({}, this.config), {
+            disableClose: disableClose,
+            panelClass: 'dialog-interaction-context'
+        });
+        var self = this;
+        var matDialogRef = this.dialogService.open(ActivityContainerComponent, config);
+        var activityContainer = this.activityContainer = matDialogRef.componentInstance;
+        this.activityContainer.initialise(this.identifier, this.api);
+        var activityResult = this.activityContainer.startActivity(activityType, data);
+        activityResult.finally(function () { return matDialogRef.close(); });
+        // we need to check if our onDone/onCancel methods above we called or if we were
+        // closed by the user clicking the backdrop.  If the later then we need to cancel our
+        // activity.
+        matDialogRef.afterClosed().subscribe(function (promiseAlreadyFinished) {
+            if (activityContainer.isActive()) {
+                activityContainer.cancelActiveActivity();
+            }
+            _this.activityContainer = null;
+        });
+        matDialogRef.updateSize();
+        matDialogRef.afterOpened().subscribe(function (promiseAlreadyFinished) {
+            matDialogRef.updateSize();
+        });
+        return activityResult;
+    };
+    return DialogInteractionContext;
+}(AbstractInteractionContext));
+
+var DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
+var DialogInteractionContextFactory = /** @class */ (function (_super) {
+    __extends(DialogInteractionContextFactory, _super);
+    function DialogInteractionContextFactory(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
+        var _this = _super.call(this) || this;
+        _this.dialogService = dialogService;
+        _this.dialogServiceDefaults = dialogServiceDefaults;
+        _this.matDialogDefaultConfig = matDialogDefaultConfig;
+        assert$1.notNil(dialogService);
+        return _this;
+    }
+    DialogInteractionContextFactory.prototype.createInteractionContext = function (identifier, api) {
+        var config = __assign(__assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig), this.dialogServiceDefaults);
+        return new DialogInteractionContext(identifier, api, this.dialogService, config);
+    };
+    DialogInteractionContextFactory.ctorParameters = function () { return [
+        { type: MatDialog },
+        { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
+        { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }
+    ]; };
+    DialogInteractionContextFactory.ɵprov = ɵɵdefineInjectable({ factory: function DialogInteractionContextFactory_Factory() { return new DialogInteractionContextFactory(ɵɵinject(MatDialog), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionContextFactory, providedIn: "root" });
+    DialogInteractionContextFactory = __decorate([
+        Injectable({
+            providedIn: 'root'
+        }),
+        __param(1, Optional()), __param(1, Inject(DIALOG_INTERACTION_SERVICE_DEFAULTS)),
+        __param(2, Optional()), __param(2, Inject(MAT_DIALOG_DEFAULT_OPTIONS)),
+        __metadata("design:paramtypes", [MatDialog,
+            MatDialogConfig,
+            MatDialogConfig])
+    ], DialogInteractionContextFactory);
+    return DialogInteractionContextFactory;
+}(ModalInteractionContextFactory));
+
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+var AddItemInteractionContextComponent = /** @class */ (function (_super) {
+    __extends(AddItemInteractionContextComponent, _super);
+    function AddItemInteractionContextComponent() {
+        var _this = _super.call(this) || this;
+        _this.tabindex = 0;
+        _this.clickCommand = Command.create(function (context) {
+            if (_this.activityClass) {
+                _this.startActivity(_this.activityClass, _this.activityData).catch(function (e) {
+                    //  don't care.
+                });
+            }
+            else {
+                _this.addCommand.withContext(context).execute();
+            }
+        });
+        return _this;
+    }
+    Object.defineProperty(AddItemInteractionContextComponent.prototype, "active", {
+        get: function () {
+            return this.interactionContext ? this.interactionContext.isActive() : false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    AddItemInteractionContextComponent.prototype.startActivity = function (activityType, data) {
+        return this.interactionContext.startActivity(activityType, data);
+    };
+    AddItemInteractionContextComponent.prototype.ngOnInit = function () {
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], AddItemInteractionContextComponent.prototype, "label", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], AddItemInteractionContextComponent.prototype, "activityClass", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], AddItemInteractionContextComponent.prototype, "activityData", void 0);
+    __decorate([
+        Input(),
+        TrackExternal(),
+        __metadata("design:type", Command)
+    ], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
+    __decorate([
+        ViewChild(InPlaceInteractionContextComponent),
+        __metadata("design:type", InPlaceInteractionContextComponent)
+    ], AddItemInteractionContextComponent.prototype, "interactionContext", void 0);
+    __decorate([
+        HostBinding('class.interaction-active'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], AddItemInteractionContextComponent.prototype, "active", null);
+    __decorate([
+        HostBinding('tabindex'),
+        __metadata("design:type", Object)
+    ], AddItemInteractionContextComponent.prototype, "tabindex", void 0);
+    AddItemInteractionContextComponent = __decorate([
+        Component({
+            selector: 'aup-add-item-interaction-context',
+            template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><mat-icon>add</mat-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n",
+            styles: [":host{--def-link-color:var(--link-color, currentColor);--def-link-backgound:var(--link-background, rgba(0, 0, 0, 0.05));--def-link-border-radius:var(--link-border-radius, 4px);--def-link-padding:var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:0}:host:hover{--link-background:rgba(0,0,0,0.1)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-backgound);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], AddItemInteractionContextComponent);
+    return AddItemInteractionContextComponent;
+}(DisposableComponent));
+
 var InteractionModule = /** @class */ (function () {
     function InteractionModule() {
     }
@@ -1984,7 +2313,11 @@ var InteractionModule = /** @class */ (function () {
                 MatDialogModule,
                 MatTabsModule,
                 PortalModule,
-                RouterModule
+                RouterModule,
+                MatIconModule,
+                DirectivesModule,
+                FlexModule,
+                GridModule
             ],
             declarations: [
                 ActivityContainerComponent,
@@ -1992,12 +2325,16 @@ var InteractionModule = /** @class */ (function () {
                 ConfirmThenDialogComponent,
                 AlertDialogComponent,
                 ActivityOutletComponent,
-                InPlaceInteractionContextComponent
+                InPlaceInteractionContextComponent,
+                AddItemInteractionContextComponent,
+                ActivityActionsComponent
             ],
             exports: [
                 ActivityContainerComponent,
                 ActivityOutletComponent,
-                InPlaceInteractionContextComponent
+                InPlaceInteractionContextComponent,
+                AddItemInteractionContextComponent,
+                ActivityActionsComponent
             ],
             entryComponents: [
                 ActivityContainerComponent,
@@ -4378,214 +4715,6 @@ var slideRightOnEnterAnimation = trigger('slideRightOnEnter', [
  * @file Automatically generated by barrelsby.
  */
 
-var Dimension = /** @class */ (function () {
-    function Dimension(width, height) {
-        this.width = width;
-        this.height = height;
-    }
-    return Dimension;
-}());
-
-var Point = /** @class */ (function () {
-    function Point(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-    Point.from = function (data) {
-        return new Point(data.x, data.y);
-    };
-    Point.prototype.translate = function (x, y) {
-        return new Point(this.x + x, this.y + y);
-    };
-    return Point;
-}());
-
-var Bounds = /** @class */ (function (_super) {
-    __extends(Bounds, _super);
-    function Bounds(top, left, width, height) {
-        var _this = _super.call(this, width, height) || this;
-        _this.top = top;
-        _this.left = left;
-        _this.width = width;
-        _this.height = height;
-        return _this;
-    }
-    Bounds.prototype.relativePositionOf = function (point) {
-        if (point instanceof MouseEvent) {
-            return new Point(point.clientX - this.left, point.clientY - this.top);
-        }
-        else {
-            return new Point(point.x - this.left, point.y - this.top);
-        }
-    };
-    return Bounds;
-}(Dimension));
-(function (Bounds) {
-    function ofElement(element) {
-        var rect = element.getBoundingClientRect();
-        return new Bounds(rect.top, rect.left, rect.width, rect.height);
-    }
-    Bounds.ofElement = ofElement;
-})(Bounds || (Bounds = {}));
-
-var ResizeAwareComponent = /** @class */ (function (_super) {
-    __extends(ResizeAwareComponent, _super);
-    function ResizeAwareComponent(elementRef, ngZone) {
-        var _this = _super.call(this) || this;
-        _this.elementRef = elementRef;
-        _this.ngZone = ngZone;
-        _this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
-        return _this;
-    }
-    ResizeAwareComponent.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        this.updateBounds();
-        var element = this.elementRef.nativeElement;
-        var ro = new ResizeObserver(function (entries, observer) {
-            _this.ngZone.run(function () { return _this.updateBounds(); });
-        });
-        ro.observe(element);
-        this.onDispose(function () { return ro.disconnect(); });
-    };
-    Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
-        get: function () {
-            return this._boundsModel.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
-        get: function () {
-            return this.elementRef.nativeElement;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    // TODO: Make this handle body scroll
-    ResizeAwareComponent.prototype.relativePositionOf = function (point) {
-        return this.bounds.relativePositionOf(point);
-    };
-    Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
-        get: function () {
-            return this._boundsModel.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ResizeAwareComponent.prototype.updateBounds = function () {
-        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
-    };
-    ResizeAwareComponent.ctorParameters = function () { return [
-        { type: ElementRef },
-        { type: NgZone }
-    ]; };
-    ResizeAwareComponent = __decorate([
-        Directive(),
-        __metadata("design:paramtypes", [ElementRef, NgZone])
-    ], ResizeAwareComponent);
-    return ResizeAwareComponent;
-}(DisposableComponent));
-
-/**
- * @file Automatically generated by barrelsby.
- */
-
-/**
- * @file Automatically generated by barrelsby.
- */
-
-var DialogInteractionContext = /** @class */ (function (_super) {
-    __extends(DialogInteractionContext, _super);
-    function DialogInteractionContext(identifier, api, dialogService, config) {
-        var _this = _super.call(this) || this;
-        _this.identifier = identifier;
-        _this.api = api;
-        _this.dialogService = dialogService;
-        _this.config = config;
-        _this.garbage = new GarbageCollector();
-        assert$1.notNil(dialogService);
-        return _this;
-    }
-    DialogInteractionContext.prototype.cancelActiveActivity = function () {
-        return this.activityContainer.cancelActiveActivity();
-    };
-    DialogInteractionContext.prototype.dispose = function () {
-        if (this.isActive()) {
-            lang.illegalState('Dispose called while active.');
-        }
-        this.garbage.dispose();
-    };
-    DialogInteractionContext.prototype.registerDisposable = function (disposable) {
-        return this.garbage.registerDisposable(disposable);
-    };
-    DialogInteractionContext.prototype.isActive = function () {
-        return !!this.activityContainer && this.activityContainer.isActive();
-    };
-    DialogInteractionContext.prototype.createAndLaunchActivity = function (activityType, data, disableClose) {
-        var _this = this;
-        assert$1.isNil(this._currentActivityRef);
-        var config = __assign(__assign({}, this.config), {
-            disableClose: disableClose,
-            panelClass: 'dialog-interaction-context'
-        });
-        var self = this;
-        var matDialogRef = this.dialogService.open(ActivityContainerComponent, config);
-        var activityContainer = this.activityContainer = matDialogRef.componentInstance;
-        this.activityContainer.initialise(this.identifier, this.api);
-        var activityResult = this.activityContainer.startActivity(activityType, data);
-        activityResult.finally(function () { return matDialogRef.close(); });
-        // we need to check if our onDone/onCancel methods above we called or if we were
-        // closed by the user clicking the backdrop.  If the later then we need to cancel our
-        // activity.
-        matDialogRef.afterClosed().subscribe(function (promiseAlreadyFinished) {
-            if (activityContainer.isActive()) {
-                activityContainer.cancelActiveActivity();
-            }
-            _this.activityContainer = null;
-        });
-        matDialogRef.updateSize();
-        matDialogRef.afterOpened().subscribe(function (promiseAlreadyFinished) {
-            matDialogRef.updateSize();
-        });
-        return activityResult;
-    };
-    return DialogInteractionContext;
-}(AbstractInteractionContext));
-
-var DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
-var DialogInteractionContextFactory = /** @class */ (function (_super) {
-    __extends(DialogInteractionContextFactory, _super);
-    function DialogInteractionContextFactory(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
-        var _this = _super.call(this) || this;
-        _this.dialogService = dialogService;
-        _this.dialogServiceDefaults = dialogServiceDefaults;
-        _this.matDialogDefaultConfig = matDialogDefaultConfig;
-        assert$1.notNil(dialogService);
-        return _this;
-    }
-    DialogInteractionContextFactory.prototype.createInteractionContext = function (identifier, api) {
-        var config = __assign(__assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig), this.dialogServiceDefaults);
-        return new DialogInteractionContext(identifier, api, this.dialogService, config);
-    };
-    DialogInteractionContextFactory.ctorParameters = function () { return [
-        { type: MatDialog },
-        { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
-        { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }
-    ]; };
-    DialogInteractionContextFactory.ɵprov = ɵɵdefineInjectable({ factory: function DialogInteractionContextFactory_Factory() { return new DialogInteractionContextFactory(ɵɵinject(MatDialog), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionContextFactory, providedIn: "root" });
-    DialogInteractionContextFactory = __decorate([
-        Injectable({
-            providedIn: 'root'
-        }),
-        __param(1, Optional()), __param(1, Inject(DIALOG_INTERACTION_SERVICE_DEFAULTS)),
-        __param(2, Optional()), __param(2, Inject(MAT_DIALOG_DEFAULT_OPTIONS)),
-        __metadata("design:paramtypes", [MatDialog,
-            MatDialogConfig,
-            MatDialogConfig])
-    ], DialogInteractionContextFactory);
-    return DialogInteractionContextFactory;
-}(ModalInteractionContextFactory));
-
 /**
  * @file Automatically generated by barrelsby.
  */
@@ -4997,5 +5126,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CardContainerComponent, CheckboxInputComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, InPlaceInteractionContextComponent, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectInputComponent, SidePlaceNavigationComponent, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, PlaceOutletComponent as ɵba, leftRightPlaceAnimation as ɵbb, LEFT_RIGHT_PLACE_ANIMATION as ɵbc, AUP_PLACE_CONFIG as ɵbd, PlaceRouter as ɵbf, InteractionService as ɵbg, ModalInteractionContextFactory as ɵbh, UrlService as ɵbi, PlaceHistory as ɵbj, TabbedPlaceNavigationComponent as ɵbk, AbstractPlaceNavigationComponent as ɵbl, ListPlaceNavComponent as ɵbm, SidePlaceNavigationComponent as ɵbn, InteractionModule as ɵbo, ActivityContainerComponent as ɵbp, AbstractInteractionContext as ɵbq, ActivityOutletComponent as ɵbr, ConfirmationDialogComponent as ɵbs, ACTIVITY_DATA as ɵbt, Activity as ɵbu, ConfirmThenDialogComponent as ɵbw, AlertDialogComponent as ɵbx, InPlaceInteractionContextComponent as ɵbz, FocusBindingDirective as ɵc, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, NumberInputComponent as ɵg, AbstractInputComponent as ɵh, StringInputComponent as ɵi, TextInputComponent as ɵj, PasswordInputComponent as ɵk, SelectInputComponent as ɵl, CheckboxInputComponent as ɵm, ScrollContainerComponent as ɵn, NoopComponent as ɵo, SwitchCaseOption as ɵp, SwitchCaseWhenDirective as ɵq, SwitchCaseDefaultDirective as ɵr, SwitchCaseComponent as ɵs, FocusContainerComponent as ɵt, VerticalFocusContainerComponent as ɵu, FocusableComponent as ɵv, CardContainerComponent as ɵw, PlaceModule as ɵx, EmptyStateComponent as ɵy, BusyOverlayComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CardContainerComponent, CheckboxInputComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, InPlaceInteractionContextComponent, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectInputComponent, SidePlaceNavigationComponent, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, PlaceOutletComponent as ɵba, leftRightPlaceAnimation as ɵbb, LEFT_RIGHT_PLACE_ANIMATION as ɵbc, AUP_PLACE_CONFIG as ɵbd, PlaceRouter as ɵbf, InteractionService as ɵbg, ModalInteractionContextFactory as ɵbh, UrlService as ɵbi, PlaceHistory as ɵbj, TabbedPlaceNavigationComponent as ɵbk, AbstractPlaceNavigationComponent as ɵbl, ListPlaceNavComponent as ɵbm, SidePlaceNavigationComponent as ɵbn, InteractionModule as ɵbo, ActivityContainerComponent as ɵbp, AbstractInteractionContext as ɵbq, ActivityOutletComponent as ɵbr, ConfirmationDialogComponent as ɵbs, ACTIVITY_DATA as ɵbt, Activity as ɵbu, ConfirmThenDialogComponent as ɵbw, AlertDialogComponent as ɵbx, InPlaceInteractionContextComponent as ɵbz, FocusBindingDirective as ɵc, AddItemInteractionContextComponent as ɵca, DisposableComponent as ɵcb, InPlaceInteractionContextComponent as ɵcc, ActivityActionsComponent as ɵcd, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, NumberInputComponent as ɵg, AbstractInputComponent as ɵh, StringInputComponent as ɵi, TextInputComponent as ɵj, PasswordInputComponent as ɵk, SelectInputComponent as ɵl, CheckboxInputComponent as ɵm, ScrollContainerComponent as ɵn, NoopComponent as ɵo, SwitchCaseOption as ɵp, SwitchCaseWhenDirective as ɵq, SwitchCaseDefaultDirective as ɵr, SwitchCaseComponent as ɵs, FocusContainerComponent as ɵt, VerticalFocusContainerComponent as ɵu, FocusableComponent as ɵv, CardContainerComponent as ɵw, PlaceModule as ɵx, EmptyStateComponent as ɵy, BusyOverlayComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map