@coolon/angular-ui-powerups 12.0.0-alpha.2 → 12.0.0

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

@@ -1047,7 +1047,7 @@
                     selector: 'aup-command-face',
                     template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}"]
+                    styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}"]
                 },] }
     ];
     CommandFaceComponent.ctorParameters = function () { return []; };
@@ -1064,6 +1064,12 @@
         __metadata("design:type", Array)
     ], CommandFaceComponent.prototype, "_rawFaces", void 0);
 
+    var HorizontalAlignment = typescriptStringEnums.Enum({
+        START: 'start',
+        CENTER: 'center',
+        END: 'end'
+    });
+
     var PopupAwareComponent = /** @class */ (function (_super) {
         __extends(PopupAwareComponent, _super);
         function PopupAwareComponent(element, parent) {
@@ -1106,6 +1112,7 @@
         function CommandComponent(element, parent) {
             var _this = _super.call(this, element, parent) || this;
             _this.CommandFace = exports.CommandFace;
+            _this.alignFace = HorizontalAlignment.CENTER;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, switchOn = _a.switchOn;
             _this.faces = chain(_this.command.busy).mapToList(function (busy) {
                 return busy ?
@@ -1138,8 +1145,8 @@
     CommandComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-command',
-                    template: "<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n    <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
-                    styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]
+                    template: "<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltipModel.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
+                    styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}"]
                 },] }
     ];
     CommandComponent.ctorParameters = function () { return [
@@ -1151,7 +1158,8 @@
         faceModel: [{ type: i0.Input }],
         face: [{ type: i0.Input }],
         busyFaceModel: [{ type: i0.Input }],
-        busyFace: [{ type: i0.Input }]
+        busyFace: [{ type: i0.Input }],
+        alignFace: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class",] }]
     };
     __decorate([
         pectin.TrackExternal(),
@@ -1306,7 +1314,7 @@
     MoreMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-more-menu',
-                    template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
+                    template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
                     providers: [
                         { provide: POPUP_CONTAINER, useExisting: MoreMenuComponent }
                     ]
@@ -1545,7 +1553,7 @@
     PopupMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-popup-menu',
-                    template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
+                    template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
                     providers: [
                         { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
                     ]
@@ -2832,9 +2840,10 @@
         function ColumnModel(columnId, textPropertiesProvider) {
             this.columnId = columnId;
             this.textPropertiesProvider = textPropertiesProvider;
-            this._selectRowOnClick = undefined;
+            this._enableRowSelection = true;
             this._flex = false;
-            this._visibleModel = new pectin.DelegatingValueModel().withDefault(true);
+            this._defaultVisibility = new pectin.DelegatingValueModel().withDefault(true);
+            this._visible = new pectin.DelegatingValueModel().withDefault(this._defaultVisibility);
             this.installHeaderRenderer();
             this.dasherisedColumnId = typescriptUtilities.Stringy.from(columnId).dasherize().toString();
         }
@@ -2852,15 +2861,18 @@
         };
         Object.defineProperty(ColumnModel.prototype, "visible", {
             get: function () {
-                return this._visibleModel.readonly;
+                return this._visible.readonly;
             },
             enumerable: false,
             configurable: true
         });
         ColumnModel.prototype.visibleWhile = function (visible) {
-            this._visibleModel.setDelegate(visible);
+            this._visible.setDelegate(visible);
             return this;
         };
+        ColumnModel.prototype.setDefaultVisibility = function (visible) {
+            this._defaultVisibility.setDelegate(visible);
+        };
         ColumnModel.prototype.getDefaultHeaderText = function () {
             return this.columnId;
         };
@@ -2923,18 +2935,12 @@
         ColumnModel.prototype.updatePortalContent = function (host) {
             this._cellRendererPortalRef.pushState(host);
         };
-        ColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            this._selectRowOnClick = selectOnRowClick;
+        ColumnModel.prototype._selectRowOnClick = function (selectRowOnClick) {
+            this._enableRowSelection = selectRowOnClick;
             return this;
         };
         ColumnModel.prototype.isRowSelectionEnabled = function () {
-            return this._selectRowOnClick;
-        };
-        ColumnModel.prototype.isRowSelectionExplicitlyEnabled = function () {
-            return this._selectRowOnClick === true;
-        };
-        ColumnModel.prototype.isRowSelectionExplicitlyDisabled = function () {
-            return this._selectRowOnClick === false;
+            return this._enableRowSelection;
         };
         return ColumnModel;
     }());
@@ -3038,7 +3044,7 @@
             return this;
         };
         PropertyColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+            return this._selectRowOnClick(selectOnRowClick);
         };
         return PropertyColumnModel;
     }(ColumnModel));
@@ -3079,8 +3085,8 @@
             this._format = formatter;
             return this;
         };
-        ListPropertyColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+        ListPropertyColumnModel.prototype.selectRowOnClick = function (selectRowOnClick) {
+            return this._selectRowOnClick(selectRowOnClick);
         };
         return ListPropertyColumnModel;
     }(ColumnModel));
@@ -3113,7 +3119,7 @@
             return this;
         };
         CustomValueColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+            return this._selectRowOnClick(selectOnRowClick);
         };
         return CustomValueColumnModel;
     }(ColumnModel));
@@ -3149,7 +3155,7 @@
             this.config.registerPortal(templateRef, viewContainer, fillCell, padChild);
         };
         CustomTemplateColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+            return this._selectRowOnClick(selectOnRowClick);
         };
         return CustomTemplateColumnModel;
     }(ColumnModel));
@@ -3159,8 +3165,7 @@
             var _this = _super.call(this, columnId, defaults) || this;
             _this._enableHeaderControls = true;
             _this.selectionModel = pectin.DelegatingSelectionModel.createDelegate();
-            _this.hasSelectionModel = new pectin.MutableValueModel(false);
-            _this.selectOnRowClick(false);
+            _this._selectRowOnClick(false);
             _this.cellHeaderRenderer(SelectHeaderCellRendererComponent, function (component) {
                 component.selectionModel = _this.selectionModel;
                 component.enableHeaderControls = _this._enableHeaderControls;
@@ -3170,24 +3175,15 @@
                 component.selectionModel = _this.selectionModel;
             }));
             _this.setSelectionModel(selectionModel);
-            _this.visibleWhile(_this.hasSelectionModel);
             return _this;
         }
         SelectionColumnModel.prototype.setSelectionModel = function (selectionModel) {
             this.selectionModel.setDelegate(selectionModel);
-            this.hasSelectionModel.value = !!selectionModel;
+            this.setDefaultVisibility(selectionModel instanceof pectin.MultipleSelectionModel ? pectin.ValueModel.TRUE : pectin.ValueModel.FALSE);
         };
         SelectionColumnModel.prototype.getDefaultHeaderText = function () {
             return '';
         };
-        SelectionColumnModel.prototype.isRowSelectionEnabledByDefault = function () {
-            return this.isRowSelectionExplicitlyEnabled();
-        };
-        SelectionColumnModel.prototype.selectOnRowClick = function (selectOnRowClick) {
-            // note we're using different method name as the selection column treats this
-            // state as the default for all columns.
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
-        };
         SelectionColumnModel.prototype.enableHeaderControls = function (enable) {
             this._enableHeaderControls = enable;
             return this;
@@ -3277,9 +3273,9 @@
             _this.editing = chain(_this._editorSessions).count().isGreaterThan(0);
             _this.dataSource = chain(_this.sourceOfTruth).replaceAll(_this.rowsBeingEdited);
             _this.firstEditableColumn = chain(_this.columns).select(function (c) { return c.hasEditorPortal(); }).first();
-            _this.hasColumnsWithRowSelectionExplicitlyEnabled = chain(_this._columns).findIndex(function (column) { return column.isRowSelectionExplicitlyEnabled(); }).isGreaterThanOrEqualTo(0);
             _this.firstVisibleColumn = chain(_this._visibleColumnTracker).first();
             _this.lastVisibleColumn = chain(_this._visibleColumnTracker).last();
+            _this.rowSelectionDisabledOnAllColumns = chain(_this._visibleColumnTracker).select(function (column) { return column.isRowSelectionEnabled(); }).count().equals(0);
             return _this;
         }
         Object.defineProperty(AbstractTableModel.prototype, "rowsBeingEdited", {
@@ -3313,13 +3309,17 @@
             var columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
             return this.addColumn(new ListPropertyColumnModel(columnId, property, function () { return _this.getColumnTextProperties(columnId); }));
         };
-        AbstractTableModel.prototype._addSelectionColumn = function (selectionModel) {
+        AbstractTableModel.prototype._addSelectionColumn = function (selectionModel, visible) {
             var _this = this;
             pectin.assert.isNil(this.selectionColumnModel);
             var columnId = 'selection-column';
             this.selectionColumnModel = new SelectionColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, selectionModel);
             this.addRowClass('aup-row-selected', function (row) { return _this.selectionColumnModel.isSelected(row); });
-            return this.addColumn(this.selectionColumnModel);
+            var selectionColumnModel = this.addColumn(this.selectionColumnModel);
+            if (!___namespace.isNil(visible)) {
+                selectionColumnModel.visibleWhile(visible instanceof pectin.ValueModel ? visible : pectin.ValueModel.constant(visible));
+            }
+            return selectionColumnModel;
         };
         AbstractTableModel.prototype.addEditControls = function (saveCommand) {
             var _this = this;
@@ -3406,14 +3406,14 @@
             });
         };
         AbstractTableModel.prototype.isRowSelectionEnabledFor = function (column) {
-            var _a;
-            return this.selectionColumnModel && ((_a = column.isRowSelectionEnabled()) !== null && _a !== void 0 ? _a : this.isRowSelectionEnabledByDefault());
-        };
-        AbstractTableModel.prototype.isRowSelectionEnabledByDefault = function () {
-            return this.selectionColumnModel && this.selectionColumnModel.isRowSelectionEnabledByDefault();
+            return this.isRowSelectionEnabled() && column.isRowSelectionEnabled();
         };
         AbstractTableModel.prototype.isRowSelectionEnabled = function () {
-            return this.hasColumnsWithRowSelectionExplicitlyEnabled.value || this.isRowSelectionEnabledByDefault();
+            return this.hasSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
+        };
+        AbstractTableModel.prototype.hasSelectionModel = function () {
+            var _a;
+            return !!((_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel.getDelegate());
         };
         AbstractTableModel.prototype.isHoverEnabled = function () {
             return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
@@ -4009,7 +4009,7 @@
         function TreeLabelColumnModel(columnId, textPropertiesProvider, expansionModel) {
             var _this = _super.call(this, columnId, textPropertiesProvider) || this;
             _this.expansionModel = expansionModel;
-            _this.iconFactory = function (node, expanded) { return expanded ? 'mat:folder_open' : 'mat:folder'; };
+            _this.iconFactory = function (node, expanded) { return expanded ? 'mat:expand_more' : 'mat:chevron_right'; };
             _this.cellRenderer(TreeLabelCellRendererComponent);
             return _this;
         }
@@ -4031,8 +4031,8 @@
             }));
             return this;
         };
-        TreeLabelColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+        TreeLabelColumnModel.prototype._selectRowOnClick = function (selectOnRowClick) {
+            return _super.prototype._selectRowOnClick.call(this, selectOnRowClick);
         };
         return TreeLabelColumnModel;
     }(ColumnModel));
@@ -4345,6 +4345,9 @@
         TreeTableModel.prototype.ensureAncestorsAndSelfVisible = function (node) {
             this.treeExpansionModel.ensureAncestorsAndSelfVisible(node);
         };
+        TreeTableModel.prototype.addSelectionColumn = function (selectionModel, showSelectionColumn) {
+            return this._addSelectionColumn(selectionModel, showSelectionColumn);
+        };
         return TreeTableModel;
     }(AbstractTableModel));
     var FlattenStrategy = /** @class */ (function (_super) {
@@ -5503,6 +5506,81 @@
         color: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.color',] }]
     };
 
+    var AbstractActivityTriggerComponent = /** @class */ (function (_super) {
+        __extends(AbstractActivityTriggerComponent, _super);
+        function AbstractActivityTriggerComponent() {
+            var _this = _super.call(this) || this;
+            _this.alignFace = HorizontalAlignment.CENTER;
+            _this.confirmEvent = new i0.EventEmitter();
+            _this.cancelEvent = new i0.EventEmitter();
+            _this.startActivityCommand = pectin.Command.create(function () {
+                pectin.assert.notNil(_this.activityClass);
+                pectin.assert.notNil(_this.interactionContext);
+                _this.interactionContext.startActivity(_this.activityClass, _this.activityData)
+                    .then(function (result) {
+                    _this.confirmEvent.emit(result);
+                }).catch(function (error) {
+                    _this.cancelEvent.emit(error);
+                });
+            });
+            return _this;
+        }
+        AbstractActivityTriggerComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(AbstractActivityTriggerComponent.prototype, "isActive", {
+            get: function () {
+                var _a;
+                return (_a = this.interactionContext) === null || _a === void 0 ? void 0 : _a.isActive();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AbstractActivityTriggerComponent;
+    }(DisposableComponent));
+    AbstractActivityTriggerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-abstract-activity-trigger',
+                    template: ''
+                },] }
+    ];
+    AbstractActivityTriggerComponent.ctorParameters = function () { return []; };
+    AbstractActivityTriggerComponent.propDecorators = {
+        activityClass: [{ type: i0.Input }],
+        activityClassModel: [{ type: i0.Input }],
+        activityData: [{ type: i0.Input }],
+        activityDataModel: [{ type: i0.Input }],
+        face: [{ type: i0.Input }],
+        faceModel: [{ type: i0.Input }],
+        alignFace: [{ type: i0.Input }],
+        confirmEvent: [{ type: i0.Output }],
+        cancelEvent: [{ type: i0.Output }],
+        isActive: [{ type: i0.HostBinding, args: ['class.active',] }]
+    };
+    __decorate([
+        pectin.StoreInValueModel('activityClassModel'),
+        __metadata("design:type", Object)
+    ], AbstractActivityTriggerComponent.prototype, "activityClass", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], AbstractActivityTriggerComponent.prototype, "activityClassModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('activityDataModel'),
+        __metadata("design:type", Object)
+    ], AbstractActivityTriggerComponent.prototype, "activityData", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], AbstractActivityTriggerComponent.prototype, "activityDataModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('faceModel'),
+        __metadata("design:type", Object)
+    ], AbstractActivityTriggerComponent.prototype, "face", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], AbstractActivityTriggerComponent.prototype, "faceModel", void 0);
+
     var InteractionServiceRoutingAdapter = /** @class */ (function () {
         function InteractionServiceRoutingAdapter(activeInteractionContextIds, activeModalContext, createExclusiveInteractionContext) {
             this.activeInteractionContextIds = activeInteractionContextIds;
@@ -5684,10 +5762,29 @@
         InteractionService.ApiAdapter = ApiAdapter;
     })(exports.InteractionService || (exports.InteractionService = {}));
 
+    var ModalActivityTriggerComponent = /** @class */ (function (_super) {
+        __extends(ModalActivityTriggerComponent, _super);
+        function ModalActivityTriggerComponent(interactionService) {
+            var _this = _super.call(this) || this;
+            _this.interactionContext = interactionService.createModalInteractionContextDisposedWith(_this);
+            return _this;
+        }
+        return ModalActivityTriggerComponent;
+    }(AbstractActivityTriggerComponent));
+    ModalActivityTriggerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-modal-activity-trigger',
+                    template: "<aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n",
+                    styles: [":host{display:inline-block}"]
+                },] }
+    ];
+    ModalActivityTriggerComponent.ctorParameters = function () { return [
+        { type: exports.InteractionService }
+    ]; };
+
     /**
      * @example
      *   <aup-in-place-interaction-context #inPlaceInteractionContext>
-     *
      *   </aup-in-place-interaction-context>
      *
      *   in your component
@@ -5833,6 +5930,35 @@
         __metadata("design:type", pectin.Command)
     ], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
 
+    var InlineActivityTriggerComponent = /** @class */ (function (_super) {
+        __extends(InlineActivityTriggerComponent, _super);
+        function InlineActivityTriggerComponent() {
+            return _super.call(this) || this;
+        }
+        return InlineActivityTriggerComponent;
+    }(AbstractActivityTriggerComponent));
+    InlineActivityTriggerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-inline-activity-trigger',
+                    template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-in-place-interaction-context>\n",
+                    styles: [":host{display:inline-block}"]
+                },] }
+    ];
+    InlineActivityTriggerComponent.ctorParameters = function () { return []; };
+    InlineActivityTriggerComponent.propDecorators = {
+        interactionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
+    };
+
+    /**
+     * <aup-popup-interaction-context #ctx></aup-popup-interaction-context>
+     *
+     * in your component
+     * @ViewChild('inPlaceInteractionContext', { static: true })
+     * interactionContext: InteractionContext;
+     * or
+     * @ViewChild('ctx', { static: true })
+     * interactionContext: InteractionContext;
+     */
     var PopupInteractionContextComponent = /** @class */ (function (_super) {
         __extends(PopupInteractionContextComponent, _super);
         function PopupInteractionContextComponent(_element, _overlay, scrollable) {
@@ -5913,7 +6039,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-popup-interaction-context',
                     template: "<ng-content></ng-content>\n",
-                    styles: [":host{display:inline}:host.interaction-active{background:rgba(0,0,0,.05)}"]
+                    styles: [":host{display:inline-block}:host.interaction-active{background:rgba(0,0,0,.05)}"]
                 },] }
     ];
     PopupInteractionContextComponent.ctorParameters = function () { return [
@@ -6171,8 +6297,8 @@
                 builder(model);
             return model;
         };
-        TableModel.prototype.addSelectionColumn = function (selectionModel) {
-            return this._addSelectionColumn(selectionModel);
+        TableModel.prototype.addSelectionColumn = function (selectionModel, showSelectionColumn) {
+            return this._addSelectionColumn(selectionModel, showSelectionColumn);
         };
         return TableModel;
     }(AbstractTableModel));
@@ -6181,6 +6307,30 @@
      * @file Automatically generated by barrelsby.
      */
 
+    var PopupActivityTriggerComponent = /** @class */ (function (_super) {
+        __extends(PopupActivityTriggerComponent, _super);
+        function PopupActivityTriggerComponent() {
+            var _this = _super.call(this) || this;
+            _this.anchorX = 'start';
+            _this.anchorY = 'bottom';
+            return _this;
+        }
+        return PopupActivityTriggerComponent;
+    }(AbstractActivityTriggerComponent));
+    PopupActivityTriggerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-popup-activity-trigger',
+                    template: "<aup-popup-interaction-context [anchorX]=\"anchorX\" [anchorY]=\"anchorY\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-popup-interaction-context>\n",
+                    styles: [":host{display:inline-block}"]
+                },] }
+    ];
+    PopupActivityTriggerComponent.ctorParameters = function () { return []; };
+    PopupActivityTriggerComponent.propDecorators = {
+        anchorX: [{ type: i0.Input }],
+        anchorY: [{ type: i0.Input }],
+        interactionContext: [{ type: i0.ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
+    };
+
     var InteractionModule = /** @class */ (function () {
         function InteractionModule() {
         }
@@ -6218,7 +6368,11 @@
                         Activity,
                         ActivityTitleComponent,
                         ActivityBodyComponent,
-                        ActivityActionsComponent
+                        ActivityActionsComponent,
+                        AbstractActivityTriggerComponent,
+                        PopupActivityTriggerComponent,
+                        InlineActivityTriggerComponent,
+                        ModalActivityTriggerComponent
                     ],
                     exports: [
                         ActivityContainerComponent,
@@ -6231,7 +6385,10 @@
                         InteractionContextTriggerFor,
                         StringInputActivity,
                         SelectInputActivity,
-                        ActivityBodyComponent
+                        ActivityBodyComponent,
+                        PopupActivityTriggerComponent,
+                        InlineActivityTriggerComponent,
+                        ModalActivityTriggerComponent
                     ],
                     entryComponents: [
                         ActivityContainerComponent,
@@ -6248,212 +6405,6 @@
                 },] }
     ];
 
-    exports.PlaceHistory = /** @class */ (function () {
-        function PlaceHistory() {
-            this._archive = new Map();
-            this.placeHistoryDepth = 4;
-        }
-        PlaceHistory.prototype.notifyNavigationStarted = function () {
-            if (this._activeVisits) {
-                this.archive(this._activeVisits.visits);
-                this._previousVisits = this._activeVisits;
-            }
-        };
-        PlaceHistory.prototype.notifyNavigationFinished = function (visits) {
-            this._activeVisits = new PlaceHistory.VisitRecord(visits);
-        };
-        PlaceHistory.prototype.updateVisit = function (visit) {
-            pectin.assert.isTruthy(this._activeVisits);
-            this._activeVisits.update(visit);
-        };
-        PlaceHistory.prototype.lastVisitIncluded = function (placeDef) {
-            var _a;
-            return !!((_a = this._previousVisits) === null || _a === void 0 ? void 0 : _a.getVisitFor(placeDef));
-        };
-        PlaceHistory.prototype.getMostRecentVisitFor = function (placeDef) {
-            return ___default['default'].first(this.getHistory(placeDef));
-        };
-        PlaceHistory.prototype.getHistory = function (placeDef) {
-            var history = this._archive.get(placeDef);
-            if (!history) {
-                history = [];
-                this.setHistory(placeDef, history);
-            }
-            return history;
-        };
-        PlaceHistory.prototype.setHistory = function (placeDef, history) {
-            this._archive.set(placeDef, history);
-        };
-        PlaceHistory.prototype.archive = function (visits) {
-            var _this = this;
-            visits.forEach(function (state) {
-                var history = _this.getHistory(state.placeDefinition);
-                var previousState = ___default['default'].first(history);
-                if (!previousState || state.hasChangedFrom(previousState)) {
-                    history.unshift(state); // LIFO
-                    _this.setHistory(state.placeDefinition, history.slice(0, _this.placeHistoryDepth));
-                }
-            });
-        };
-        return PlaceHistory;
-    }());
-    exports.PlaceHistory.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new exports.PlaceHistory(); }, token: exports.PlaceHistory, providedIn: "root" });
-    exports.PlaceHistory.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    exports.PlaceHistory.ctorParameters = function () { return []; };
-    (function (PlaceHistory) {
-        var VisitRecord = /** @class */ (function () {
-            function VisitRecord(visits) {
-                this.visits = visits;
-            }
-            VisitRecord.prototype.update = function (visit) {
-                this.visits = this.visits.filter(function (v) { return v.placeDefinition !== visit.placeDefinition; }).concat(visit);
-            };
-            VisitRecord.prototype.getVisitFor = function (placeDef) {
-                return this.visits.find(function (v) { return v.placeDefinition === placeDef; });
-            };
-            return VisitRecord;
-        }());
-        PlaceHistory.VisitRecord = VisitRecord;
-        // export class Query {
-        //   private _history: Visit.State[];
-        //   private _places: Place[];
-        //   private _predicate: (visit: any) => boolean;
-        //   private _limit: number;
-        //
-        //   constructor(history, limit = history.length) {
-        //     this._history = history;
-        //     this._places = [];
-        //     this._predicate = (visit => true);
-        //     this._limit = limit;
-        //   }
-        //
-        //   to(...places:Place[]):this {
-        //     this._places = places;
-        //     return this;
-        //   }
-        //
-        //   with(parameters: { [parameter: string]: any }): this {
-        //     this.matching(state => {
-        //       return Object.keys(parameters).reduce((acc, key) => {
-        //         const matchValue = parameters[key];
-        //         const visitValue = state.get(key);
-        //         const matched = matchValue === '*' ? !_.isNil(visitValue) : visitValue == matchValue;
-        //         // Logger.get(this).info(`matched=${matched}`, parameters, visitValue);
-        //         return acc && matched;
-        //       }, true);
-        //     });
-        //     return this;
-        //   }
-        //
-        //   last(): Visit.State {
-        //     return _.findLast(this._history, visit => this._matches(visit))
-        //   }
-        //
-        //   // @trace
-        //   allThatMatch(): Visit.State[] {
-        //     return _.filter(this._history, visit => this._matches(visit)).slice(-this._limit);
-        //   }
-        //
-        //   // @trace
-        //   mostRecentValueOf<T=any>(param: string, defaultValue: T = null): T {
-        //     const lastStateWithParam = _.findLast(this.allThatMatch(), state => !_.isNil(state.get(param)));
-        //     return _.isNil(lastStateWithParam) ? defaultValue : lastStateWithParam.get(param);
-        //   }
-        //
-        //   limit(limit: number): this {
-        //     this._limit = limit;
-        //     return this;
-        //   }
-        //
-        //   matching(predicate: (visit: Visit.State) => boolean): this {
-        //     this._predicate = predicate;
-        //     return this;
-        //   }
-        //
-        //   _matches(visit: Visit.State) {
-        //     return this._isPlaceMatch(visit) && this._predicate(visit);
-        //   }
-        //
-        //   _isPlaceMatch(visit: Visit.State) {
-        //     return this._places.length < 1 || this._places.includes(visit.place)
-        //   }
-        //
-        // }
-    })(exports.PlaceHistory || (exports.PlaceHistory = {}));
-
-    var Visit = /** @class */ (function () {
-        function Visit(placeDefinition, visitParameters) {
-            if (visitParameters === void 0) { visitParameters = {}; }
-            this.placeDefinition = placeDefinition;
-            this.visitParameters = visitParameters;
-        }
-        // @Trace()
-        Visit.prototype.getRouteId = function () {
-            return this.placeDefinition.getRouteIdFrom(this);
-        };
-        // @Trace()
-        Visit.prototype.hasRouteId = function () {
-            return !___namespace.isNil(this.getRouteId());
-        };
-        /**
-         * Returns the value of the place parameter with the specified name.  The parameter
-         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
-         * same as the the ValueModel property name.
-         * @param parameterName the field name of the property model or the `as` option if specified.
-         */
-        Visit.prototype.getParameter = function (parameterName) {
-            return this.visitParameters[parameterName];
-        };
-        // @Trace()
-        Visit.prototype.hasParameter = function (parameterName) {
-            return Object.keys(this.visitParameters).includes(parameterName);
-        };
-        Visit.prototype.replace = function (parameter, value) {
-            var _a;
-            return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), (_a = {}, _a[parameter.name] = value, _a)));
-        };
-        Visit.prototype.mergeRouteParameters = function (routeParams) {
-            var _this = this;
-            // todo: whitelist parameters.
-            var routeParameterKeys = Object.keys(routeParams);
-            var params = {};
-            this.placeDefinition.getVisitParameterDefs().forEach(function (def) {
-                if (def.isRouteId || def.isRouteParameter) {
-                    if (routeParameterKeys.includes(def.name)) {
-                        params[def.name] = routeParams[def.name];
-                    }
-                }
-                else {
-                    // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
-                    // defaults and remember sanitisation process.
-                    var value = _this.getParameter(def.name);
-                    if (_this.hasParameter(def.name)) {
-                        params[def.name] = value;
-                    }
-                }
-            });
-            return new Visit(this.placeDefinition, params);
-        };
-        Visit.prototype.hasRoutingChangedFrom = function (other) {
-            var samePlace = other.placeDefinition === this.placeDefinition;
-            var sameRouteParameters = ___namespace.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-            return !samePlace || !sameRouteParameters;
-        };
-        Visit.prototype.hasChangedFrom = function (other) {
-            var sameNonRouteParameters = ___namespace.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
-            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
-        };
-        Visit.prototype.toDebugString = function () {
-            var _this = this;
-            return Object.keys(this.visitParameters).map(function (k) { return k + "=" + _this.visitParameters[k]; }).join(',');
-        };
-        return Visit;
-    }());
-
     exports.ParameterDefinition = /** @class */ (function () {
         function ParameterDefinition(propertyName, options, urlFormat) {
             this.propertyName = propertyName;
@@ -6480,6 +6431,7 @@
         ParameterDefinition.prototype.getOptionValue = function (key) {
             return this.options.getOptional(key, null);
         };
+        // @Trace()
         ParameterDefinition.prototype.sanitise = function (value, visit, placeHistory, injector, isPopState) {
             return __awaiter(this, void 0, void 0, function () {
                 var returningFromSomewhereElse, lastKnownVisit;
@@ -6504,12 +6456,6 @@
         };
         return ParameterDefinition;
     }());
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object, Visit, exports.PlaceHistory, i0.Injector, Boolean]),
-        __metadata("design:returntype", Promise)
-    ], exports.ParameterDefinition.prototype, "sanitise", null);
     (function (ParameterDefinition) {
         var RouteId = /** @class */ (function (_super) {
             __extends(RouteId, _super);
@@ -6723,6 +6669,7 @@
             _this.childPlaces = _this.placeDefinition.children.map(function (d) { return d.component; });
             return _this;
         }
+        // @Trace()
         PlaceComponent.prototype.initialiseVisit = function (visit, notifyVisitChanged) {
             var _this = this;
             pectin.assert.isNil(this.visitModel.value);
@@ -6745,17 +6692,18 @@
         PlaceComponent.prototype.isInitialised = function () {
             return !!this.visitModel.value;
         };
+        // @Trace()
         PlaceComponent.prototype.installBinding = function (parameterDef) {
             var model = this[parameterDef.propertyName];
             pectin.DebugContext.tag(model, this.placeDefinition.component.name + "." + parameterDef.propertyName);
             var binding = this.registerDisposable(new pectin.Binding(this.visitModel, model, {
                 toRight: function (visit) {
                     var value = visit.getParameter(parameterDef.name);
-                    console.log('push to component', { name: parameterDef.name, value: value, visit: visit });
+                    // console.log('push to component', { name: parameterDef.name, value, visit });
                     return value;
                 },
                 toLeft: function (value, currentVisit) {
-                    console.log('push to route', { name: parameterDef.name, value: value, currentVisit: currentVisit });
+                    // console.log('push to route', { name: parameterDef.name, value, currentVisit });
                     return currentVisit.replace(parameterDef, value);
                 }
             }));
@@ -6789,18 +6737,6 @@
         { type: i0.Directive }
     ];
     exports.PlaceComponent.ctorParameters = function () { return []; };
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Visit, Function]),
-        __metadata("design:returntype", void 0)
-    ], exports.PlaceComponent.prototype, "initialiseVisit", null);
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [exports.ParameterDefinition]),
-        __metadata("design:returntype", void 0)
-    ], exports.PlaceComponent.prototype, "installBinding", null);
     __decorate([
         fastMemoizeDecorator.Memoize(),
         __metadata("design:type", PlaceDefinition),
@@ -7413,9 +7349,11 @@
             _this.debugPropertyKeys = ['idle', 'startingUrl', 'clickedLinkUrl', 'firstCancelEventUrl', 'clickedLinkMatchedBackButtonUrl', 'popStateEventUrl'];
             return _this;
         }
+        // @Trace()
         WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined.prototype.onRouterStarted = function (event) {
             this.ignore(event);
         };
+        // @Trace()
         WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined.prototype.onRouterCancelled = function (event) {
             if (event.url === this.clickedLinkUrl) {
                 this.context.transitionTo(new WaitForLinkSameAsBackToPlayOut(this.context, this.startingUrl, this.clickedLinkUrl));
@@ -7433,18 +7371,6 @@
         };
         return WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined;
     }(EventCleanUpSession));
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [i1$1.NavigationStart]),
-        __metadata("design:returntype", void 0)
-    ], WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined.prototype, "onRouterStarted", null);
-    __decorate([
-        pectin.Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [i1$1.NavigationCancel]),
-        __metadata("design:returntype", void 0)
-    ], WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined.prototype, "onRouterCancelled", null);
     var WaitForLinkSameAsBackToPlayOut = /** @class */ (function (_super) {
         __extends(WaitForLinkSameAsBackToPlayOut, _super);
         function WaitForLinkSameAsBackToPlayOut(context, startingUrl, clickedLinkUrl) {
@@ -7718,6 +7644,143 @@
         PlaceAccessGuard.NoAuth = NoAuth;
     })(exports.PlaceAccessGuard || (exports.PlaceAccessGuard = {}));
 
+    exports.PlaceHistory = /** @class */ (function () {
+        function PlaceHistory() {
+            this._archive = new Map();
+            this.placeHistoryDepth = 4;
+        }
+        PlaceHistory.prototype.notifyNavigationStarted = function () {
+            if (this._activeVisits) {
+                this.archive(this._activeVisits.visits);
+                this._previousVisits = this._activeVisits;
+            }
+        };
+        PlaceHistory.prototype.notifyNavigationFinished = function (visits) {
+            this._activeVisits = new PlaceHistory.VisitRecord(visits);
+        };
+        PlaceHistory.prototype.updateVisit = function (visit) {
+            pectin.assert.isTruthy(this._activeVisits);
+            this._activeVisits.update(visit);
+        };
+        PlaceHistory.prototype.lastVisitIncluded = function (placeDef) {
+            var _a;
+            return !!((_a = this._previousVisits) === null || _a === void 0 ? void 0 : _a.getVisitFor(placeDef));
+        };
+        PlaceHistory.prototype.getMostRecentVisitFor = function (placeDef) {
+            return ___default['default'].first(this.getHistory(placeDef));
+        };
+        PlaceHistory.prototype.getHistory = function (placeDef) {
+            var history = this._archive.get(placeDef);
+            if (!history) {
+                history = [];
+                this.setHistory(placeDef, history);
+            }
+            return history;
+        };
+        PlaceHistory.prototype.setHistory = function (placeDef, history) {
+            this._archive.set(placeDef, history);
+        };
+        PlaceHistory.prototype.archive = function (visits) {
+            var _this = this;
+            visits.forEach(function (state) {
+                var history = _this.getHistory(state.placeDefinition);
+                var previousState = ___default['default'].first(history);
+                if (!previousState || state.hasChangedFrom(previousState)) {
+                    history.unshift(state); // LIFO
+                    _this.setHistory(state.placeDefinition, history.slice(0, _this.placeHistoryDepth));
+                }
+            });
+        };
+        return PlaceHistory;
+    }());
+    exports.PlaceHistory.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new exports.PlaceHistory(); }, token: exports.PlaceHistory, providedIn: "root" });
+    exports.PlaceHistory.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    exports.PlaceHistory.ctorParameters = function () { return []; };
+    (function (PlaceHistory) {
+        var VisitRecord = /** @class */ (function () {
+            function VisitRecord(visits) {
+                this.visits = visits;
+            }
+            VisitRecord.prototype.update = function (visit) {
+                this.visits = this.visits.filter(function (v) { return v.placeDefinition !== visit.placeDefinition; }).concat(visit);
+            };
+            VisitRecord.prototype.getVisitFor = function (placeDef) {
+                return this.visits.find(function (v) { return v.placeDefinition === placeDef; });
+            };
+            return VisitRecord;
+        }());
+        PlaceHistory.VisitRecord = VisitRecord;
+        // export class Query {
+        //   private _history: Visit.State[];
+        //   private _places: Place[];
+        //   private _predicate: (visit: any) => boolean;
+        //   private _limit: number;
+        //
+        //   constructor(history, limit = history.length) {
+        //     this._history = history;
+        //     this._places = [];
+        //     this._predicate = (visit => true);
+        //     this._limit = limit;
+        //   }
+        //
+        //   to(...places:Place[]):this {
+        //     this._places = places;
+        //     return this;
+        //   }
+        //
+        //   with(parameters: { [parameter: string]: any }): this {
+        //     this.matching(state => {
+        //       return Object.keys(parameters).reduce((acc, key) => {
+        //         const matchValue = parameters[key];
+        //         const visitValue = state.get(key);
+        //         const matched = matchValue === '*' ? !_.isNil(visitValue) : visitValue == matchValue;
+        //         // Logger.get(this).info(`matched=${matched}`, parameters, visitValue);
+        //         return acc && matched;
+        //       }, true);
+        //     });
+        //     return this;
+        //   }
+        //
+        //   last(): Visit.State {
+        //     return _.findLast(this._history, visit => this._matches(visit))
+        //   }
+        //
+        //   // @trace
+        //   allThatMatch(): Visit.State[] {
+        //     return _.filter(this._history, visit => this._matches(visit)).slice(-this._limit);
+        //   }
+        //
+        //   // @trace
+        //   mostRecentValueOf<T=any>(param: string, defaultValue: T = null): T {
+        //     const lastStateWithParam = _.findLast(this.allThatMatch(), state => !_.isNil(state.get(param)));
+        //     return _.isNil(lastStateWithParam) ? defaultValue : lastStateWithParam.get(param);
+        //   }
+        //
+        //   limit(limit: number): this {
+        //     this._limit = limit;
+        //     return this;
+        //   }
+        //
+        //   matching(predicate: (visit: Visit.State) => boolean): this {
+        //     this._predicate = predicate;
+        //     return this;
+        //   }
+        //
+        //   _matches(visit: Visit.State) {
+        //     return this._isPlaceMatch(visit) && this._predicate(visit);
+        //   }
+        //
+        //   _isPlaceMatch(visit: Visit.State) {
+        //     return this._places.length < 1 || this._places.includes(visit.place)
+        //   }
+        //
+        // }
+    })(exports.PlaceHistory || (exports.PlaceHistory = {}));
+
     exports.UrlSnapshot = /** @class */ (function () {
         // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
         function UrlSnapshot(urlSerializer, url) {
@@ -8243,6 +8306,75 @@
         PlaceRouter.State = State;
     })(exports.PlaceRouter || (exports.PlaceRouter = {}));
 
+    var Visit = /** @class */ (function () {
+        function Visit(placeDefinition, visitParameters) {
+            if (visitParameters === void 0) { visitParameters = {}; }
+            this.placeDefinition = placeDefinition;
+            this.visitParameters = visitParameters;
+        }
+        // @Trace()
+        Visit.prototype.getRouteId = function () {
+            return this.placeDefinition.getRouteIdFrom(this);
+        };
+        // @Trace()
+        Visit.prototype.hasRouteId = function () {
+            return !___namespace.isNil(this.getRouteId());
+        };
+        /**
+         * Returns the value of the place parameter with the specified name.  The parameter
+         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
+         * same as the the ValueModel property name.
+         * @param parameterName the field name of the property model or the `as` option if specified.
+         */
+        Visit.prototype.getParameter = function (parameterName) {
+            return this.visitParameters[parameterName];
+        };
+        // @Trace()
+        Visit.prototype.hasParameter = function (parameterName) {
+            return Object.keys(this.visitParameters).includes(parameterName);
+        };
+        Visit.prototype.replace = function (parameter, value) {
+            var _a;
+            return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), (_a = {}, _a[parameter.name] = value, _a)));
+        };
+        Visit.prototype.mergeRouteParameters = function (routeParams) {
+            var _this = this;
+            // todo: whitelist parameters.
+            var routeParameterKeys = Object.keys(routeParams);
+            var params = {};
+            this.placeDefinition.getVisitParameterDefs().forEach(function (def) {
+                if (def.isRouteId || def.isRouteParameter) {
+                    if (routeParameterKeys.includes(def.name)) {
+                        params[def.name] = routeParams[def.name];
+                    }
+                }
+                else {
+                    // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
+                    // defaults and remember sanitisation process.
+                    var value = _this.getParameter(def.name);
+                    if (_this.hasParameter(def.name)) {
+                        params[def.name] = value;
+                    }
+                }
+            });
+            return new Visit(this.placeDefinition, params);
+        };
+        Visit.prototype.hasRoutingChangedFrom = function (other) {
+            var samePlace = other.placeDefinition === this.placeDefinition;
+            var sameRouteParameters = ___namespace.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+            return !samePlace || !sameRouteParameters;
+        };
+        Visit.prototype.hasChangedFrom = function (other) {
+            var sameNonRouteParameters = ___namespace.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
+        };
+        Visit.prototype.toDebugString = function () {
+            var _this = this;
+            return Object.keys(this.visitParameters).map(function (k) { return k + "=" + _this.visitParameters[k]; }).join(',');
+        };
+        return Visit;
+    }());
+
     var AUP_PLACE_CONFIG = new i0.InjectionToken('AUP_PLACE_CONFIG');
 
     var NotAuthorisedNoticeComponent = /** @class */ (function () {
@@ -9439,6 +9571,7 @@
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
     exports.AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT = AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT;
+    exports.AbstractActivityTriggerComponent = AbstractActivityTriggerComponent;
     exports.AbstractInputActivity = AbstractInputActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractInteractionContext = AbstractInteractionContext;
@@ -9504,13 +9637,16 @@
     exports.HEADER_CELL_RENDERER_PORTAL = HEADER_CELL_RENDERER_PORTAL;
     exports.HighlightPipe = HighlightPipe;
     exports.HighlightTextModelDirective = HighlightTextModelDirective;
+    exports.HorizontalAlignment = HorizontalAlignment;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
+    exports.InlineActivityTriggerComponent = InlineActivityTriggerComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
     exports.ListPropertyColumnModel = ListPropertyColumnModel;
+    exports.ModalActivityTriggerComponent = ModalActivityTriggerComponent;
     exports.ModalInteractionContextFactory = ModalInteractionContextFactory;
     exports.MoreMenuComponent = MoreMenuComponent;
     exports.MultipleSelectInputComponent = MultipleSelectInputComponent;
@@ -9535,6 +9671,7 @@
     exports.Point = Point;
     exports.PopStateDuringInteractionNavigation = PopStateDuringInteractionNavigation;
     exports.PopStateNavigation = PopStateNavigation;
+    exports.PopupActivityTriggerComponent = PopupActivityTriggerComponent;
     exports.PopupAwareComponent = PopupAwareComponent;
     exports.PopupInteractionContextComponent = PopupInteractionContextComponent;
     exports.PopupMenuComponent = PopupMenuComponent;