@coolon/angular-ui-powerups 1.7.0 → 1.9.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/material/dialog'), require('@angular/router'), require('lodash'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), 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('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', 'lodash', 'resize-observer-polyfill', '@coolon/typescript-utilities', '@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', '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.___default, global.ResizeObserver, global.typescriptUtilities, global.ng.flexLayout, 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, dialog, router, ___default, ResizeObserver, typescriptUtilities, flexLayout, 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 mat-icon-button [pectinCommand]=\"cancelCommand\"><mat-icon>clear</mat-icon></button>\n<button *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\"><mat-icon>done</mat-icon></button>\n<button *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n",
+                styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}:host.align-end{justify-content:flex-end}"]
+            })
+        ], ActivityActionsComponent);
+        return ActivityActionsComponent;
+    }(DisposableComponent));
+
     var ACTIVITY_DATA = new core.InjectionToken('InteractionActivityData');
     var Activity = /** @class */ (function (_super) {
         __extends(Activity, _super);
@@ -1955,21 +2119,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
@@ -2073,11 +2222,25 @@
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
-        function InPlaceInteractionContextComponent(interactionService) {
+        function InPlaceInteractionContextComponent(interactionService, tabConfig) {
             var _this = _super.call(this) || this;
             _this.interactionService = interactionService;
+            _this.tabConfig = tabConfig;
+            /**
+             * If true then the first startActivity call will slide the activity into view. If false
+             * the activity will replace the existing content immediately.
+             */
+            _this.animateFirstActivity = true;
             return _this;
         }
+        Object.defineProperty(InPlaceInteractionContextComponent.prototype, "animationDuration", {
+            get: function () {
+                var _a;
+                return this.animateFirstActivity ? (((_a = this.tabConfig) === null || _a === void 0 ? void 0 : _a.animationDuration) || '500ms') : "0ms";
+            },
+            enumerable: true,
+            configurable: true
+        });
         InPlaceInteractionContextComponent.prototype.ngAfterViewInit = function () {
             this.interactionService.registerInplaceInteractionContext(this);
         };
@@ -2113,23 +2276,195 @@
             return this.activityContainerComponent.startActivity(activityType, data);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbg }
+            { type: exports.ɵbg },
+            { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
         ]; };
         __decorate([
             core.ViewChild('activityContainer', { static: true }),
             __metadata("design:type", ActivityContainerComponent)
         ], InPlaceInteractionContextComponent.prototype, "activityContainerComponent", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], InPlaceInteractionContextComponent.prototype, "animateFirstActivity", void 0);
         InPlaceInteractionContextComponent = __decorate([
             core.Component({
                 selector: 'aup-in-place-interaction-context',
-                template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
+                template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\" [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
-            __metadata("design:paramtypes", [exports.ɵbg])
+            __param(1, core.Inject(tabs.MAT_TABS_CONFIG)), __param(1, core.Optional()),
+            __metadata("design:paramtypes", [exports.ɵbg, Object])
         ], InPlaceInteractionContextComponent);
         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() {
         }
@@ -2141,7 +2476,9 @@
                     dialog.MatDialogModule,
                     tabs.MatTabsModule,
                     portal.PortalModule,
-                    router.RouterModule
+                    router.RouterModule,
+                    icon.MatIconModule,
+                    DirectivesModule
                 ],
                 declarations: [
                     ActivityContainerComponent,
@@ -2149,12 +2486,16 @@
                     ConfirmThenDialogComponent,
                     AlertDialogComponent,
                     ActivityOutletComponent,
-                    InPlaceInteractionContextComponent
+                    InPlaceInteractionContextComponent,
+                    AddItemInteractionContextComponent,
+                    ActivityActionsComponent
                 ],
                 exports: [
                     ActivityContainerComponent,
                     ActivityOutletComponent,
-                    InPlaceInteractionContextComponent
+                    InPlaceInteractionContextComponent,
+                    AddItemInteractionContextComponent,
+                    ActivityActionsComponent
                 ],
                 entryComponents: [
                     ActivityContainerComponent,
@@ -4535,214 +4876,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.
      */
@@ -5153,9 +5286,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;
@@ -5256,6 +5391,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;