@coolon/angular-ui-powerups 1.8.0 → 1.10.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('@angular/router'), require('@coolon/typescript-utilities'), require('lodash'), require('@angular/flex-layout'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@coolon/pectin', '@angular/cdk/portal', '@angular/material/dialog', '@angular/router', '@coolon/typescript-utilities', 'lodash', '@angular/flex-layout', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill', 'rxjs'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.pectin, global.ng.cdk.portal, global.ng.material.dialog, global.ng.router, global.typescriptUtilities, global.___default, global.ng.flexLayout, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver, global.rxjs));
-}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, button, checkbox, icon, pectin, portal, dialog, router, typescriptUtilities, ___default, flexLayout, progressSpinner, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('lodash'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@coolon/pectin', '@angular/cdk/portal', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', 'lodash', 'resize-observer-polyfill', '@coolon/typescript-utilities', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.pectin, global.ng.cdk.portal, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.___default, global.ResizeObserver, global.typescriptUtilities, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
+}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, button, checkbox, icon, pectin, portal, flexLayout, dialog, router, ___default, ResizeObserver, typescriptUtilities, progressSpinner, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     ResizeObserver = ResizeObserver && Object.prototype.hasOwnProperty.call(ResizeObserver, 'default') ? ResizeObserver['default'] : ResizeObserver;
@@ -1007,7 +1007,7 @@
         TextInputComponent = __decorate([
             core.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", [])
@@ -1372,6 +1372,170 @@
         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;
+    }());
+
+    exports.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;
+    })(exports.Bounds || (exports.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 pectin.MutableValueModel(new exports.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 = exports.Bounds.ofElement(this.nativeElement);
+        };
+        ResizeAwareComponent.ctorParameters = function () { return [
+            { type: core.ElementRef },
+            { type: core.NgZone }
+        ]; };
+        ResizeAwareComponent = __decorate([
+            core.Directive(),
+            __metadata("design:paramtypes", [core.ElementRef, core.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__default.isEmpty(this.confirmText);
+        };
+        __decorate([
+            core.Input(),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], ActivityActionsComponent.prototype, "confirmText", void 0);
+        __decorate([
+            core.Input(),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], ActivityActionsComponent.prototype, "align", void 0);
+        __decorate([
+            core.HostBinding('class.align-end'),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], ActivityActionsComponent.prototype, "alignEnd", null);
+        ActivityActionsComponent = __decorate([
+            core.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 core.InjectionToken('InteractionActivityData');
     var Activity = /** @class */ (function (_super) {
         __extends(Activity, _super);
@@ -1691,6 +1855,8 @@
         ActivityContainerComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             var _a = pectin.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) {
@@ -1797,6 +1963,12 @@
         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 () {
@@ -1808,26 +1980,32 @@
         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];
@@ -1864,7 +2042,7 @@
         ActivityContainerComponent = __decorate([
             core.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", [])
@@ -1955,21 +2133,6 @@
             // 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
@@ -2150,6 +2313,172 @@
         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 pectin.GarbageCollector();
+            typescriptUtilities.assert.notNil(dialogService);
+            return _this;
+        }
+        DialogInteractionContext.prototype.cancelActiveActivity = function () {
+            return this.activityContainer.cancelActiveActivity();
+        };
+        DialogInteractionContext.prototype.dispose = function () {
+            if (this.isActive()) {
+                pectin.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;
+            typescriptUtilities.assert.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 core.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;
+            typescriptUtilities.assert.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: dialog.MatDialog },
+            { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
+            { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [dialog.MAT_DIALOG_DEFAULT_OPTIONS,] }] }
+        ]; };
+        DialogInteractionContextFactory.ɵprov = core.ɵɵdefineInjectable({ factory: function DialogInteractionContextFactory_Factory() { return new DialogInteractionContextFactory(core.ɵɵinject(dialog.MatDialog), core.ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), core.ɵɵinject(dialog.MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionContextFactory, providedIn: "root" });
+        DialogInteractionContextFactory = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            }),
+            __param(1, core.Optional()), __param(1, core.Inject(DIALOG_INTERACTION_SERVICE_DEFAULTS)),
+            __param(2, core.Optional()), __param(2, core.Inject(dialog.MAT_DIALOG_DEFAULT_OPTIONS)),
+            __metadata("design:paramtypes", [dialog.MatDialog,
+                dialog.MatDialogConfig,
+                dialog.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 = pectin.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([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AddItemInteractionContextComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AddItemInteractionContextComponent.prototype, "activityClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AddItemInteractionContextComponent.prototype, "activityData", void 0);
+        __decorate([
+            core.Input(),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
+        __decorate([
+            core.ViewChild(InPlaceInteractionContextComponent),
+            __metadata("design:type", InPlaceInteractionContextComponent)
+        ], AddItemInteractionContextComponent.prototype, "interactionContext", void 0);
+        __decorate([
+            core.HostBinding('class.interaction-active'),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], AddItemInteractionContextComponent.prototype, "active", null);
+        __decorate([
+            core.HostBinding('tabindex'),
+            __metadata("design:type", Object)
+        ], AddItemInteractionContextComponent.prototype, "tabindex", void 0);
+        AddItemInteractionContextComponent = __decorate([
+            core.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() {
         }
@@ -2161,7 +2490,11 @@
                     dialog.MatDialogModule,
                     tabs.MatTabsModule,
                     portal.PortalModule,
-                    router.RouterModule
+                    router.RouterModule,
+                    icon.MatIconModule,
+                    DirectivesModule,
+                    flexLayout.FlexModule,
+                    flexLayout.GridModule
                 ],
                 declarations: [
                     ActivityContainerComponent,
@@ -2169,12 +2502,16 @@
                     ConfirmThenDialogComponent,
                     AlertDialogComponent,
                     ActivityOutletComponent,
-                    InPlaceInteractionContextComponent
+                    InPlaceInteractionContextComponent,
+                    AddItemInteractionContextComponent,
+                    ActivityActionsComponent
                 ],
                 exports: [
                     ActivityContainerComponent,
                     ActivityOutletComponent,
-                    InPlaceInteractionContextComponent
+                    InPlaceInteractionContextComponent,
+                    AddItemInteractionContextComponent,
+                    ActivityActionsComponent
                 ],
                 entryComponents: [
                     ActivityContainerComponent,
@@ -4555,214 +4892,6 @@
      * @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;
-    }());
-
-    exports.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;
-    })(exports.Bounds || (exports.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 pectin.MutableValueModel(new exports.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 = exports.Bounds.ofElement(this.nativeElement);
-        };
-        ResizeAwareComponent.ctorParameters = function () { return [
-            { type: core.ElementRef },
-            { type: core.NgZone }
-        ]; };
-        ResizeAwareComponent = __decorate([
-            core.Directive(),
-            __metadata("design:paramtypes", [core.ElementRef, core.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 pectin.GarbageCollector();
-            typescriptUtilities.assert.notNil(dialogService);
-            return _this;
-        }
-        DialogInteractionContext.prototype.cancelActiveActivity = function () {
-            return this.activityContainer.cancelActiveActivity();
-        };
-        DialogInteractionContext.prototype.dispose = function () {
-            if (this.isActive()) {
-                pectin.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;
-            typescriptUtilities.assert.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 core.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;
-            typescriptUtilities.assert.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: dialog.MatDialog },
-            { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
-            { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [dialog.MAT_DIALOG_DEFAULT_OPTIONS,] }] }
-        ]; };
-        DialogInteractionContextFactory.ɵprov = core.ɵɵdefineInjectable({ factory: function DialogInteractionContextFactory_Factory() { return new DialogInteractionContextFactory(core.ɵɵinject(dialog.MatDialog), core.ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), core.ɵɵinject(dialog.MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionContextFactory, providedIn: "root" });
-        DialogInteractionContextFactory = __decorate([
-            core.Injectable({
-                providedIn: 'root'
-            }),
-            __param(1, core.Optional()), __param(1, core.Inject(DIALOG_INTERACTION_SERVICE_DEFAULTS)),
-            __param(2, core.Optional()), __param(2, core.Inject(dialog.MAT_DIALOG_DEFAULT_OPTIONS)),
-            __metadata("design:paramtypes", [dialog.MatDialog,
-                dialog.MatDialogConfig,
-                dialog.MatDialogConfig])
-        ], DialogInteractionContextFactory);
-        return DialogInteractionContextFactory;
-    }(ModalInteractionContextFactory));
-
     /**
      * @file Automatically generated by barrelsby.
      */
@@ -5173,9 +5302,11 @@
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.AbstractPopStateNavigation = AbstractPopStateNavigation;
     exports.Activity = Activity;
+    exports.ActivityActionsComponent = ActivityActionsComponent;
     exports.ActivityContainerComponent = ActivityContainerComponent;
     exports.ActivityOutletComponent = ActivityOutletComponent;
     exports.ActivityRef = ActivityRef;
+    exports.AddItemInteractionContextComponent = AddItemInteractionContextComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
     exports.BusyOverlayComponent = BusyOverlayComponent;
@@ -5276,6 +5407,10 @@
     exports.ɵbx = AlertDialogComponent;
     exports.ɵbz = InPlaceInteractionContextComponent;
     exports.ɵc = FocusBindingDirective;
+    exports.ɵca = AddItemInteractionContextComponent;
+    exports.ɵcb = DisposableComponent;
+    exports.ɵcc = InPlaceInteractionContextComponent;
+    exports.ɵcd = ActivityActionsComponent;
     exports.ɵd = DisposableComponent;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;