@coolon/angular-ui-powerups 2.0.0-alpha.8 → 2.0.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/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@angular/material/table'), require('@coolon/pectin'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('immer'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@angular/material/tooltip'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/progress-spinner'), require('@angular/material/list'), 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/cdk/portal', '@angular/cdk/scrolling', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@angular/material/table', '@coolon/pectin', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'immer', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@angular/material/tooltip', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/progress-spinner', '@angular/material/list', '@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.cdk.portal, global.ng.cdk.scrolling, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.ng.material.table, global.pectin, global.typescriptUtilities, global.src, global.___default, global.produce, global.angularFontawesome, global.freeSolidSvgIcons, global.ng.material.tooltip, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.progressSpinner, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
-}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, scrolling, button, checkbox, icon, table, pectin, typescriptUtilities, src, ___default, produce, angularFontawesome, freeSolidSvgIcons, tooltip, flexLayout, dialog, router, overlay, ResizeObserver, progressSpinner, list, fastMemoizeDecorator, reflectMetadata, animations$1, 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/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/list'), require('@angular/material/progress-spinner'), 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/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'typescript-string-enums', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/list', '@angular/material/progress-spinner', '@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.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.src, global.___default, global.typescriptStringEnums, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.list, global.ng.material.progressSpinner, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
+}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, src, ___default, typescriptStringEnums, typescriptUtilities, produce, flexLayout, dialog, router, overlay, ResizeObserver, list, progressSpinner, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     produce = produce && Object.prototype.hasOwnProperty.call(produce, 'default') ? produce['default'] : produce;
@@ -578,13 +578,1005 @@
             core.Component({
                 selector: 'aup-card-container',
                 template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-icon icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-                styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+                styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white;--aup-command-face-icon-gap:8px;--aup-icon-width:24px;--aup-fa-icon-width:18px}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.activity-outlet-wrapper{display:flex;flex-direction:column;align-items:stretch}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);position:relative}aup-icon fa-icon .svg-inline--fa{position:absolute;top:var(--fa-icon-offset);left:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important;height:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
             }),
             __metadata("design:paramtypes", [])
         ], CardContainerComponent);
         return CardContainerComponent;
     }(DisposableComponent));
 
+
+    (function (TrackBy) {
+        TrackBy.byIndex = function (data, index) { return index; };
+    })(exports.TrackBy || (exports.TrackBy = {}));
+
+
+    (function (CommandFace) {
+        var Position;
+        (function (Position) {
+            Position["START"] = "start";
+            Position["END"] = "end";
+        })(Position = CommandFace.Position || (CommandFace.Position = {}));
+        CommandFace.Style = typescriptStringEnums.Enum({
+            FLAT: 'flat',
+            STROKED: 'stroked',
+            RAISED: 'raised'
+        });
+        function getColorOf(face) {
+            return ___default__default.isFunction(face === null || face === void 0 ? void 0 : face.color) ? face.color() : undefined;
+        }
+        CommandFace.getColorOf = getColorOf;
+        function getStyleOf(face) {
+            return ___default__default.isFunction(face === null || face === void 0 ? void 0 : face.style) ? face.style() : undefined;
+        }
+        CommandFace.getStyleOf = getStyleOf;
+        function getIconOf(face) {
+            return ___default__default.isFunction(face === null || face === void 0 ? void 0 : face.icon) ? face.icon() : undefined;
+        }
+        CommandFace.getIconOf = getIconOf;
+        function getIconPositionOf(face) {
+            return ___default__default.isFunction(face === null || face === void 0 ? void 0 : face.iconPosition) ? face.iconPosition() : undefined;
+        }
+        CommandFace.getIconPositionOf = getIconPositionOf;
+        function getTooltipOf(face) {
+            return ___default__default.isFunction(face === null || face === void 0 ? void 0 : face.tooltip) ? face.tooltip() : undefined;
+        }
+        CommandFace.getTooltipOf = getTooltipOf;
+        function getTextOf(face) {
+            return ___default__default.isFunction(face === null || face === void 0 ? void 0 : face.text) ? face.text() : undefined;
+        }
+        CommandFace.getTextOf = getTextOf;
+        var Adapter = /** @class */ (function () {
+            function Adapter(face) {
+                this.face = face;
+            }
+            Object.defineProperty(Adapter.prototype, "text", {
+                get: function () {
+                    return CommandFace.getTextOf(this.face);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "icon", {
+                get: function () {
+                    return CommandFace.getIconOf(this.face);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "iconPosition", {
+                get: function () {
+                    return CommandFace.getIconPositionOf(this.face);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "tooltip", {
+                get: function () {
+                    return CommandFace.getTooltipOf(this.face);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "iconPositionStart", {
+                get: function () {
+                    return this.iconPosition === CommandFace.Position.START;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "iconPositionEnd", {
+                get: function () {
+                    return this.iconPosition === CommandFace.Position.END;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "color", {
+                get: function () {
+                    return CommandFace.getColorOf(this.face);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Adapter.prototype, "style", {
+                get: function () {
+                    return CommandFace.getStyleOf(this.face);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "text", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "icon", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "iconPosition", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Object),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "tooltip", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Boolean),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "iconPositionStart", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Boolean),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "iconPositionEnd", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", String),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "color", null);
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", String),
+                __metadata("design:paramtypes", [])
+            ], Adapter.prototype, "style", null);
+            return Adapter;
+        }());
+        CommandFace.Adapter = Adapter;
+    })(exports.CommandFace || (exports.CommandFace = {}));
+
+    exports.ViewData = /** @class */ (function () {
+        function ViewData() {
+        }
+        return ViewData;
+    }());
+    (function (ViewData) {
+        var FaceData = /** @class */ (function (_super) {
+            __extends(FaceData, _super);
+            function FaceData(face) {
+                var _this = _super.call(this) || this;
+                _this.faceAdapter = new exports.CommandFace.Adapter(face);
+                return _this;
+            }
+            return FaceData;
+        }(ViewData));
+        ViewData.FaceData = FaceData;
+        var GroupData = /** @class */ (function (_super) {
+            __extends(GroupData, _super);
+            function GroupData(face, xPosition, yPosition, children) {
+                var _this = _super.call(this, face) || this;
+                _this.xPosition = xPosition;
+                _this.yPosition = yPosition;
+                _this.children = children;
+                return _this;
+            }
+            Object.defineProperty(GroupData.prototype, "hasMixedIcons", {
+                get: function () {
+                    var hasFaces = this.children.filter(function (c) { return ViewData.hasFace(c); });
+                    var iconCount = hasFaces.filter(function (c) { return !!c.faceAdapter.icon; }).length;
+                    return iconCount > 0 && hasFaces.length !== iconCount;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Boolean),
+                __metadata("design:paramtypes", [])
+            ], GroupData.prototype, "hasMixedIcons", null);
+            return GroupData;
+        }(FaceData));
+        ViewData.GroupData = GroupData;
+        var CommandData = /** @class */ (function (_super) {
+            __extends(CommandData, _super);
+            function CommandData(face, command) {
+                var _this = _super.call(this, face) || this;
+                _this.command = command;
+                return _this;
+            }
+            return CommandData;
+        }(FaceData));
+        ViewData.CommandData = CommandData;
+        var SeparatorData = /** @class */ (function (_super) {
+            __extends(SeparatorData, _super);
+            function SeparatorData() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            return SeparatorData;
+        }(ViewData));
+        ViewData.SeparatorData = SeparatorData;
+        var FlexData = /** @class */ (function (_super) {
+            __extends(FlexData, _super);
+            function FlexData() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            return FlexData;
+        }(ViewData));
+        ViewData.FlexData = FlexData;
+        function as(type, viewData) {
+            return viewData instanceof type ? viewData : pectin.lang.illegalState("expected instance of " + type.name + ", got " + viewData.constructor.name);
+        }
+        ViewData.as = as;
+        function getCommand(data) {
+            return as(CommandData, data).command;
+        }
+        ViewData.getCommand = getCommand;
+        function getTooltip(data) {
+            return as(FaceData, data).faceAdapter.tooltip;
+        }
+        ViewData.getTooltip = getTooltip;
+        function getStyle(data) {
+            return as(FaceData, data).faceAdapter.style;
+        }
+        ViewData.getStyle = getStyle;
+        function getColor(data) {
+            return as(FaceData, data).faceAdapter.color;
+        }
+        ViewData.getColor = getColor;
+        function hasText(data) {
+            return !!as(FaceData, data).faceAdapter.text;
+        }
+        ViewData.hasText = hasText;
+        function getFace(data) {
+            return as(FaceData, data).faceAdapter.face;
+        }
+        ViewData.getFace = getFace;
+        function asGroup(viewData) {
+            return as(GroupData, viewData);
+        }
+        ViewData.asGroup = asGroup;
+        function hasMixedIcons(data) {
+            return as(GroupData, data).hasMixedIcons;
+        }
+        ViewData.hasMixedIcons = hasMixedIcons;
+        function isGroup(data) {
+            return data instanceof GroupData;
+        }
+        ViewData.isGroup = isGroup;
+        function hasFace(data) {
+            return data instanceof FaceData;
+        }
+        ViewData.hasFace = hasFace;
+        function isCommand(data) {
+            return data instanceof CommandData;
+        }
+        ViewData.isCommand = isCommand;
+        function isSeparator(data) {
+            return data instanceof SeparatorData;
+        }
+        ViewData.isSeparator = isSeparator;
+        function isFlex(data) {
+            return data instanceof FlexData;
+        }
+        ViewData.isFlex = isFlex;
+    })(exports.ViewData || (exports.ViewData = {}));
+
+    var CommandGroupMenuRendererComponent = /** @class */ (function (_super) {
+        __extends(CommandGroupMenuRendererComponent, _super);
+        function CommandGroupMenuRendererComponent(parent) {
+            var _this = _super.call(this) || this;
+            _this.parent = parent;
+            _this.groupViewDataModel = new pectin.MutableValueModel();
+            _this.commandFired = new core.EventEmitter();
+            _this.ViewData = exports.ViewData;
+            _this.TrackBy = exports.TrackBy;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.children = chain(_this.groupViewDataModel).pluckList('children');
+            _this.hasMixedIcons = chain(_this.groupViewDataModel).pluck('hasMixedIcons');
+            return _this;
+        }
+        CommandGroupMenuRendererComponent.prototype.getCommand = function (data) {
+            var _this = this;
+            var command = exports.ViewData.getCommand(data);
+            var when = pectin.Dsl.disposeWith(this).when;
+            when(command.busy).becomesFalsey(function () { return _this.commandFired.emit(); });
+            return command;
+        };
+        CommandGroupMenuRendererComponent.ctorParameters = function () { return [
+            { type: CommandGroupMenuRendererComponent, decorators: [{ type: core.Optional }, { type: core.SkipSelf }] }
+        ]; };
+        __decorate([
+            core.ViewChild('menu', { static: true }),
+            __metadata("design:type", menu.MatMenu)
+        ], CommandGroupMenuRendererComponent.prototype, "menuComponent", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('groupViewDataModel'),
+            __metadata("design:type", exports.ViewData.GroupData)
+        ], CommandGroupMenuRendererComponent.prototype, "groupViewData", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], CommandGroupMenuRendererComponent.prototype, "commandFired", void 0);
+        __decorate([
+            core.ViewChildren(menu.MatMenuTrigger),
+            __metadata("design:type", core.QueryList)
+        ], CommandGroupMenuRendererComponent.prototype, "triggers", void 0);
+        CommandGroupMenuRendererComponent = __decorate([
+            core.Component({
+                selector: 'aup-command-group-menu',
+                template: "<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            [pectinCommand]=\"getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            mat-menu-item>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"\n                        [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n    </button>\n\n    <ng-container *ngIf=\"ViewData.isGroup(data)\">\n      <button mat-menu-item\n              #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n      >\n        <aup-command-face [face]=\"ViewData.getFace(data)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #innerPanel\n                              [groupViewData]=\"ViewData.asGroup(data)\"\n                              (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\"></mat-divider>\n\n  </ng-container>\n</mat-menu>\n"
+            }),
+            __param(0, core.Optional()), __param(0, core.SkipSelf()),
+            __metadata("design:paramtypes", [CommandGroupMenuRendererComponent])
+        ], CommandGroupMenuRendererComponent);
+        return CommandGroupMenuRendererComponent;
+    }(DisposableComponent));
+
+    var CommandGroupRendererComponent = /** @class */ (function (_super) {
+        __extends(CommandGroupRendererComponent, _super);
+        function CommandGroupRendererComponent() {
+            var _this = _super.call(this) || this;
+            _this.renderRootNode = true;
+            _this.ViewData = exports.ViewData;
+            _this.TrackBy = exports.TrackBy;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.childViewDataModels = chain(_this.groupViewDataModel).pluckList('children');
+            return _this;
+        }
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('groupViewDataModel'),
+            __metadata("design:type", exports.ViewData.GroupData)
+        ], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
+        __decorate([
+            core.Input(),
+            core.HostBinding('class.render-root'),
+            __metadata("design:type", Object)
+        ], CommandGroupRendererComponent.prototype, "renderRootNode", void 0);
+        CommandGroupRendererComponent = __decorate([
+            core.Component({
+                selector: 'aup-command-group-renderer',
+                template: "<ng-template #groupTemplate let-group>\n\n  <ng-container *ngIf=\"ViewData.hasText(group)\" [ngSwitch]=\"ViewData.getStyle(group)\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-stroked-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-raised-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!ViewData.hasText(group)\">\n    <button        #trigger=\"matMenuTrigger\"\n                   mat-icon-button\n                   [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n                   [matTooltip]=\"ViewData.getTooltip(group)\"\n                   [color]=\"ViewData.getColor(group)\"\n    >\n      <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n    </button>\n    <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #commandTemplate let-data>\n\n  <ng-container *ngIf=\"ViewData.hasText(data)\" [ngSwitch]=\"ViewData.getStyle(data)\">\n    <button *ngSwitchCase=\"'raised'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-raised-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"'stroked'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-stroked-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n  </ng-container>\n\n  <button *ngIf=\"!ViewData.hasText(data)\"\n          [pectinCommand]=\"ViewData.getCommand(data)\"\n          [matTooltip]=\"ViewData.getTooltip(data)\"\n          [color]=\"ViewData.getColor(data)\"\n          mat-icon-button>\n    <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n  </button>\n\n</ng-template>\n\n\n<ng-template *ngIf=\"renderRootNode\"\n             [ngTemplateOutlet]=\"groupTemplate\"\n             [ngTemplateOutletContext]=\"{ $implicit: groupViewDataModel.value }\">\n</ng-template>\n\n<ng-container *ngIf=\"!renderRootNode\">\n  <ng-container *ngFor=\"let data of this.childViewDataModels.value; trackBy: TrackBy.byIndex\">\n    <ng-template *ngIf=\"ViewData.isGroup(data)\"\n                 [ngTemplateOutlet]=\"groupTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n    <ng-template *ngIf=\"ViewData.isCommand(data)\"\n                 [ngTemplateOutlet]=\"commandTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n\n</ng-container>\n",
+                styles: [":host{display:inline-flex;flex-direction:row;align-items:center}:host:not(.render-root) mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host:not(.render-root)>*+*{margin-left:8px}:host span.flex{flex:1}"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], CommandGroupRendererComponent);
+        return CommandGroupRendererComponent;
+    }(DisposableComponent));
+
+    exports.Registration = /** @class */ (function (_super) {
+        __extends(Registration, _super);
+        function Registration() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return Registration;
+    }(pectin.GarbageCollector));
+    (function (Registration) {
+        var FaceRegistration = /** @class */ (function (_super) {
+            __extends(FaceRegistration, _super);
+            function FaceRegistration(faceModel) {
+                var _this = _super.call(this) || this;
+                _this.faceModel = faceModel;
+                return _this;
+            }
+            return FaceRegistration;
+        }(Registration));
+        Registration.FaceRegistration = FaceRegistration;
+        var CommandRegistration = /** @class */ (function (_super) {
+            __extends(CommandRegistration, _super);
+            function CommandRegistration(faceModel, command) {
+                var _this = _super.call(this, faceModel) || this;
+                _this.command = command;
+                return _this;
+            }
+            CommandRegistration.prototype.toTemplate = function () {
+                return new exports.ViewData.CommandData(this.faceModel.value, this.command);
+            };
+            return CommandRegistration;
+        }(FaceRegistration));
+        Registration.CommandRegistration = CommandRegistration;
+        var GroupRegistration = /** @class */ (function (_super) {
+            __extends(GroupRegistration, _super);
+            function GroupRegistration(faceModel, group) {
+                var _this = _super.call(this, faceModel) || this;
+                _this.group = group;
+                return _this;
+            }
+            GroupRegistration.prototype.toTemplate = function () {
+                return new exports.ViewData.GroupData(this.faceModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(function (r) { return r.toTemplate(); }));
+            };
+            return GroupRegistration;
+        }(FaceRegistration));
+        Registration.GroupRegistration = GroupRegistration;
+        var SeparatorRegistration = /** @class */ (function (_super) {
+            __extends(SeparatorRegistration, _super);
+            function SeparatorRegistration() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.template = new exports.ViewData.SeparatorData();
+                return _this;
+            }
+            SeparatorRegistration.prototype.toTemplate = function () {
+                return this.template;
+            };
+            return SeparatorRegistration;
+        }(Registration));
+        Registration.SeparatorRegistration = SeparatorRegistration;
+        var FlexRegistration = /** @class */ (function (_super) {
+            __extends(FlexRegistration, _super);
+            function FlexRegistration() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.template = new exports.ViewData.FlexData();
+                return _this;
+            }
+            FlexRegistration.prototype.toTemplate = function () {
+                return this.template;
+            };
+            return FlexRegistration;
+        }(Registration));
+        Registration.FlexRegistration = FlexRegistration;
+        function hasFace(entry) {
+            return entry instanceof CommandRegistration || entry instanceof GroupRegistration;
+        }
+        Registration.hasFace = hasFace;
+    })(exports.Registration || (exports.Registration = {}));
+
+    exports.ɵbo = /** @class */ (function (_super) {
+        __extends(CommandGroup, _super);
+        function CommandGroup(parent) {
+            var _this = _super.call(this) || this;
+            _this.parent = parent;
+            _this._rootTemplate = new pectin.MutableValueModel();
+            _this._registrations = new pectin.MutableListModel();
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.childTemplates = chain(_this._rootTemplate).pluckList('children');
+            _this.initialised = chain(_this._rootTemplate).isNotNil();
+            return _this;
+        }
+        CommandGroup.prototype.initialise = function () {
+            this.rebuildTemplates();
+        };
+        Object.defineProperty(CommandGroup.prototype, "rootTemplate", {
+            get: function () {
+                return this._rootTemplate.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandGroup.prototype, "registrations", {
+            get: function () {
+                return this._registrations.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CommandGroup.prototype.notifyChanged = function () {
+            if (this.parent) {
+                this.parent.notifyChanged();
+            }
+            else {
+                this.rebuildTemplates();
+            }
+        };
+        CommandGroup.prototype.notifyChildFaceChanged = function (is, was) {
+            this.notifyChanged();
+        };
+        CommandGroup.prototype.rebuildTemplates = function () {
+            this._rootTemplate.value = new exports.ViewData.GroupData(this.faceModel.value, this.xPosition, this.yPosition, this.registrations.value.map(function (r) { return r.toTemplate(); }));
+        };
+        Object.defineProperty(CommandGroup.prototype, "depth", {
+            get: function () {
+                return this.isRoot() ? 0 : this.parent.depth + 1;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CommandGroup.prototype.isRoot = function () {
+            return false;
+        };
+        CommandGroup.prototype.registerCommand = function (command, faceModel) {
+            return this.register(new exports.Registration.CommandRegistration(faceModel, command));
+        };
+        CommandGroup.prototype.registerGroup = function (group, faceModel) {
+            return this.register(new exports.Registration.GroupRegistration(faceModel, group));
+        };
+        CommandGroup.prototype.registerFlex = function (component) {
+            return this.register(new exports.Registration.FlexRegistration());
+        };
+        CommandGroup.prototype.registerSeparator = function (component) {
+            return this.register(new exports.Registration.SeparatorRegistration());
+        };
+        CommandGroup.prototype.register = function (registration) {
+            var _this = this;
+            this._registrations.push(registration);
+            if (registration instanceof exports.Registration.FaceRegistration) {
+                var when = pectin.Dsl.disposeWith(registration).when;
+                when(registration.faceModel).changes(function (is, was) {
+                    _this.notifyChildFaceChanged(is, was);
+                }, { asLongAs: this.initialised });
+            }
+            registration.onDispose(function () { return _this._registrations.remove(registration); });
+            return registration;
+        };
+        return CommandGroup;
+    }(pectin.GarbageCollector));
+    (function (CommandGroup) {
+        var Root = /** @class */ (function (_super) {
+            __extends(Root, _super);
+            function Root() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            Root.prototype.isRoot = function () {
+                return true;
+            };
+            __decorate([
+                pectin.TrackExternal(),
+                __metadata("design:type", pectin.ValueModel)
+            ], Root.prototype, "faceModel", void 0);
+            __decorate([
+                pectin.TrackExternal({ defaultValue: 'after' }),
+                __metadata("design:type", pectin.ValueModel)
+            ], Root.prototype, "xPositionModel", void 0);
+            __decorate([
+                pectin.StoreInValueModel('xPositionModel'),
+                __metadata("design:type", String)
+            ], Root.prototype, "xPosition", void 0);
+            __decorate([
+                pectin.TrackExternal({ defaultValue: 'below' }),
+                __metadata("design:type", pectin.ValueModel)
+            ], Root.prototype, "yPositionModel", void 0);
+            __decorate([
+                pectin.StoreInValueModel('yPositionModel'),
+                __metadata("design:type", String)
+            ], Root.prototype, "yPosition", void 0);
+            return Root;
+        }(CommandGroup));
+        CommandGroup.Root = Root;
+        function factory() {
+            return new Root();
+        }
+        CommandGroup.factory = factory;
+    })(exports.ɵbo || (exports.ɵbo = {}));
+
+    var CommandGroupComponent = /** @class */ (function (_super) {
+        __extends(CommandGroupComponent, _super);
+        function CommandGroupComponent(parent) {
+            var _this = _super.call(this, parent) || this;
+            _this.parent = parent;
+            _this.xPosition = 'after';
+            _this.yPosition = 'below';
+            _this.parent.registerGroup(_this, _this.faceModel);
+            return _this;
+        }
+        CommandGroupComponent_1 = CommandGroupComponent;
+        var CommandGroupComponent_1;
+        CommandGroupComponent.ctorParameters = function () { return [
+            { type: exports.ɵbo, decorators: [{ type: core.SkipSelf }] }
+        ]; };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], CommandGroupComponent.prototype, "faceModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('faceModel'),
+            __metadata("design:type", Object)
+        ], CommandGroupComponent.prototype, "face", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], CommandGroupComponent.prototype, "xPosition", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], CommandGroupComponent.prototype, "yPosition", void 0);
+        CommandGroupComponent = CommandGroupComponent_1 = __decorate([
+            core.Component({
+                selector: 'aup-command-group',
+                template: '',
+                providers: [
+                    { provide: exports.ɵbo, useExisting: CommandGroupComponent_1 }
+                ]
+            }),
+            __param(0, core.SkipSelf()),
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], CommandGroupComponent);
+        return CommandGroupComponent;
+    }(exports.ɵbo));
+
+    /**
+     * Custom CSS:
+     * @example
+     * root: { // globally
+     *   --aup-command-face-icon-gap: 8px;
+     * }
+     * aup-command-face { // per instance
+     *   --icon-gap: 4px;
+     * }
+     */
+    var CommandFaceComponent = /** @class */ (function (_super) {
+        __extends(CommandFaceComponent, _super);
+        function CommandFaceComponent() {
+            var _this = _super.call(this) || this;
+            _this.faceModel = new pectin.MutableValueModel();
+            _this.ignoreIcon = false;
+            _this.ignoreText = false;
+            _this.includeMissingIconInLayout = false;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            // overkill /c: when all you have is a hammer...
+            var faceAdapter = chain(_this.faceModel).map(function (face) { return new exports.CommandFace.Adapter(face); });
+            _this.iconModel = faceAdapter.pluck('icon');
+            _this.textModel = faceAdapter.pluck('text');
+            _this.positionModel = faceAdapter.pluck('iconPosition');
+            _this.colorModel = faceAdapter.pluck('color');
+            return _this;
+        }
+        Object.defineProperty(CommandFaceComponent.prototype, "requiresMissingIconInLayout", {
+            get: function () {
+                return this.includeMissingIconInLayout && !this.iconModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CommandFaceComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(CommandFaceComponent.prototype, "iconPosition", {
+            get: function () {
+                var _a;
+                return (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : exports.CommandFace.Position.START;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "shouldIncludeIcon", {
+            get: function () {
+                return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "iconStart", {
+            get: function () {
+                return this.shouldIncludeIcon && this.iconPosition === exports.CommandFace.Position.START;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "iconEnd", {
+            get: function () {
+                return this.shouldIncludeIcon && this.iconPosition === exports.CommandFace.Position.END;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "text", {
+            get: function () {
+                return this.ignoreText ? undefined : this.textModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(CommandFaceComponent.prototype, "color", {
+            get: function () {
+                return this.colorModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            core.Input('face'), pectin.StoreInValueModel('faceModel'),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "_rawFace", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "ignoreIcon", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "ignoreText", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], CommandFaceComponent.prototype, "includeMissingIconInLayout", void 0);
+        __decorate([
+            core.HostBinding('class.hide-icon'),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [])
+        ], CommandFaceComponent.prototype, "requiresMissingIconInLayout", null);
+        __decorate([
+            core.HostBinding('attr.color'),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [])
+        ], CommandFaceComponent.prototype, "color", null);
+        CommandFaceComponent = __decorate([
+            core.Component({
+                selector: 'aup-command-face',
+                template: "<aup-icon *ngIf=\"iconStart\" [icon]=\"iconModel.value\"></aup-icon>\n<span *ngIf=\"this.text\">{{this.text}}</span>\n<aup-icon *ngIf=\"iconEnd\" [icon]=\"iconModel.value\"></aup-icon>\n",
+                encapsulation: core.ViewEncapsulation.None,
+                styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-flex;flex-direction:row;align-items:center}aup-command-face *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], CommandFaceComponent);
+        return CommandFaceComponent;
+    }(DisposableComponent));
+
+    /**
+     *
+     */
+    var CommandComponent = /** @class */ (function (_super) {
+        __extends(CommandComponent, _super);
+        function CommandComponent(parent) {
+            var _this = _super.call(this) || this;
+            _this.parent = parent;
+            _this.CommandFace = exports.CommandFace;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, switchOn = _a.switchOn;
+            _this.activeFaceModel = switchOn(_this.command.busy).toValue(function (when) {
+                when.equalTo(true, _this.busyFaceModel);
+                when.otherwise(_this.faceModel);
+            }).otherwise(_this.faceModel);
+            _this.buttonStyle = chain(_this.activeFaceModel).map(function (f) { return exports.CommandFace.getStyleOf(f); });
+            _this.colorModel = chain(_this.activeFaceModel).map(function (f) { return exports.CommandFace.getColorOf(f); });
+            if (parent) {
+                _this.registerDisposable(_this.parent.registerCommand(_this.command, _this.activeFaceModel));
+            }
+            return _this;
+        }
+        CommandComponent.prototype.ngOnInit = function () {
+        };
+        CommandComponent.ctorParameters = function () { return [
+            { type: exports.ɵbo, decorators: [{ type: core.Optional }] }
+        ]; };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], CommandComponent.prototype, "command", void 0);
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], CommandComponent.prototype, "faceModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('faceModel'),
+            __metadata("design:type", Object)
+        ], CommandComponent.prototype, "face", void 0);
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], CommandComponent.prototype, "busyFaceModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('busyFaceModel'),
+            __metadata("design:type", Object)
+        ], CommandComponent.prototype, "busyFace", void 0);
+        CommandComponent = __decorate([
+            core.Component({
+                selector: 'aup-command',
+                template: "<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <button *ngSwitchCase=\"CommandFace.Style.STROKED\" mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"CommandFace.Style.RAISED\" mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n"
+            }),
+            __param(0, core.Optional()),
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], CommandComponent);
+        return CommandComponent;
+    }(DisposableComponent));
+
+    /**
+     *
+     */
+    var FlexComponent = /** @class */ (function (_super) {
+        __extends(FlexComponent, _super);
+        function FlexComponent(parent) {
+            var _this = _super.call(this) || this;
+            _this.parent = parent;
+            if (parent) {
+                parent.registerFlex(_this);
+            }
+            return _this;
+        }
+        FlexComponent.prototype.ngOnInit = function () {
+        };
+        FlexComponent.ctorParameters = function () { return [
+            { type: exports.ɵbo }
+        ]; };
+        FlexComponent = __decorate([
+            core.Component({
+                selector: 'aup-flex',
+                template: ""
+            }),
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], FlexComponent);
+        return FlexComponent;
+    }(DisposableComponent));
+
+    var ɵ0 = exports.ɵbo.factory;
+    /**
+     *
+     */
+    var MoreMenuComponent = /** @class */ (function (_super) {
+        __extends(MoreMenuComponent, _super);
+        function MoreMenuComponent(group) {
+            var _this = _super.call(this) || this;
+            _this.group = group;
+            _this.tooltipModel = new pectin.MutableValueModel();
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            group.xPosition = 'before'; // this should be the default unless overridden by the user.
+            group.faceModel = chain(_this.tooltipModel).map(function (tooltip) {
+                return {
+                    icon: function () { return 'mat:more_vert'; },
+                    tooltip: function () {
+                        return tooltip;
+                    }
+                };
+            }, { allowNil: true });
+            return _this;
+        }
+        MoreMenuComponent.prototype.ngOnInit = function () {
+        };
+        MoreMenuComponent.prototype.ngAfterContentInit = function () {
+            this.group.initialise();
+        };
+        MoreMenuComponent.ctorParameters = function () { return [
+            { type: exports.ɵbo }
+        ]; };
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('tooltipModel'),
+            __metadata("design:type", String)
+        ], MoreMenuComponent.prototype, "tooltip", void 0);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], MoreMenuComponent.prototype, "ngAfterContentInit", null);
+        MoreMenuComponent = __decorate([
+            core.Component({
+                selector: 'aup-more-menu',
+                template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+                providers: [{ provide: exports.ɵbo, useFactory: ɵ0 }]
+            }),
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], MoreMenuComponent);
+        return MoreMenuComponent;
+    }(DisposableComponent));
+
+    var ɵ0$1 = exports.ɵbo.factory;
+    /**
+     *
+     */
+    var PopupMenuComponent = /** @class */ (function (_super) {
+        __extends(PopupMenuComponent, _super);
+        function PopupMenuComponent(group) {
+            var _this = _super.call(this) || this;
+            _this.group = group;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            group.faceModel = _this.faceModel;
+            return _this;
+        }
+        PopupMenuComponent.prototype.ngOnInit = function () {
+        };
+        PopupMenuComponent.prototype.ngAfterContentInit = function () {
+            this.group.initialise();
+        };
+        PopupMenuComponent.prototype.ngAfterViewInit = function () {
+        };
+        PopupMenuComponent.ctorParameters = function () { return [
+            { type: exports.ɵbo }
+        ]; };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], PopupMenuComponent.prototype, "faceModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('faceModel'),
+            __metadata("design:type", Object)
+        ], PopupMenuComponent.prototype, "face", void 0);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], PopupMenuComponent.prototype, "ngOnInit", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], PopupMenuComponent.prototype, "ngAfterContentInit", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], PopupMenuComponent.prototype, "ngAfterViewInit", null);
+        PopupMenuComponent = __decorate([
+            core.Component({
+                selector: 'aup-popup-menu',
+                template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+                providers: [{ provide: exports.ɵbo, useFactory: ɵ0$1 }]
+            }),
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], PopupMenuComponent);
+        return PopupMenuComponent;
+    }(DisposableComponent));
+
+    /**
+     *
+     */
+    var SeparatorComponent = /** @class */ (function (_super) {
+        __extends(SeparatorComponent, _super);
+        function SeparatorComponent(parent) {
+            var _this = _super.call(this) || this;
+            _this.parent = parent;
+            if (parent) {
+                parent.registerSeparator(_this);
+            }
+            return _this;
+        }
+        SeparatorComponent.prototype.isVertical = function () {
+            return this === null || this === void 0 ? void 0 : this.parent.isRoot();
+        };
+        SeparatorComponent.prototype.ngOnInit = function () {
+        };
+        SeparatorComponent.ctorParameters = function () { return [
+            { type: exports.ɵbo, decorators: [{ type: core.Optional }] }
+        ]; };
+        SeparatorComponent = __decorate([
+            core.Component({
+                selector: 'aup-separator',
+                template: "\n    <mat-divider [vertical]=\"isVertical()\"></mat-divider>"
+            }),
+            __param(0, core.Optional()),
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], SeparatorComponent);
+        return SeparatorComponent;
+    }(DisposableComponent));
+
+    var ɵ0$2 = exports.ɵbo.factory;
+    /**
+     *
+     */
+    var ToolBarComponent = /** @class */ (function (_super) {
+        __extends(ToolBarComponent, _super);
+        function ToolBarComponent(group) {
+            var _this = _super.call(this) || this;
+            _this.group = group;
+            return _this;
+        }
+        ToolBarComponent.prototype.ngOnInit = function () {
+        };
+        ToolBarComponent.prototype.ngAfterContentInit = function () {
+            this.group.initialise();
+        };
+        ToolBarComponent.prototype.ngAfterViewInit = function () {
+        };
+        ToolBarComponent.ctorParameters = function () { return [
+            { type: exports.ɵbo }
+        ]; };
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ToolBarComponent.prototype, "ngOnInit", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ToolBarComponent.prototype, "ngAfterContentInit", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ToolBarComponent.prototype, "ngAfterViewInit", null);
+        ToolBarComponent = __decorate([
+            core.Component({
+                selector: 'aup-tool-bar',
+                template: '<aup-command-group-renderer [renderRootNode]="false" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+                providers: [{ provide: exports.ɵbo, useFactory: ɵ0$2 }],
+                styles: [":host{display:inline-flex;flex-direction:row;align-items:center}:host mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host span.flex{flex:1}:host>*+*{margin-left:8px}"]
+            }),
+            __metadata("design:paramtypes", [exports.ɵbo])
+        ], ToolBarComponent);
+        return ToolBarComponent;
+    }(DisposableComponent));
+
     var FocusContainerComponent = /** @class */ (function (_super) {
         __extends(FocusContainerComponent, _super);
         function FocusContainerComponent(focusManager) {
@@ -693,6 +1685,7 @@
         __extends(AbstractInputComponent, _super);
         function AbstractInputComponent() {
             var _this = _super.call(this) || this;
+            _this.onValueEditedListeners = new pectin.EventListenerList();
             _this.dense = false;
             // TODO: fix this.
             // tslint:disable-next-line:no-output-native
@@ -743,7 +1736,7 @@
         };
         Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
             get: function () {
-                return this.inputModel.enabled;
+                return this.formValueModel.enabled;
             },
             enumerable: true,
             configurable: true
@@ -753,7 +1746,7 @@
         };
         Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
             get: function () {
-                return this.inputModel.errorList;
+                return this.formValueModel.errorList;
             },
             enumerable: true,
             configurable: true
@@ -767,7 +1760,7 @@
         });
         Object.defineProperty(AbstractInputComponent.prototype, "focusContext", {
             get: function () {
-                return this.inputModel.focusContext;
+                return this.formValueModel.focusContext;
             },
             enumerable: true,
             configurable: true
@@ -786,6 +1779,13 @@
             enumerable: true,
             configurable: true
         });
+        /**
+         * Invokes the callback when this components value is changed by a user edit.
+         * @param callback
+         */
+        AbstractInputComponent.prototype.onValueEdited = function (callback) {
+            return this.onValueEditedListeners.add(callback);
+        };
         __decorate([
             core.Input(),
             __metadata("design:type", String)
@@ -887,34 +1887,47 @@
              * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
              */
             // We have to register it as a disposable so it ditches any listeners when we're disposed.
-            _this.inputModel = _this.registerDisposable(new pectin.Form.DelegatingListModel());
-            _this.setValueIsInitialising = new pectin.Guard();
+            _this.formValueModel = _this.registerDisposable(new pectin.Form.DelegatingListModel());
+            _this.componentListModel = new pectin.MutableListModel();
+            _this.setValueIsInProgress = new pectin.Guard();
             _this.valueChange = new core.EventEmitter();
-            var when = pectin.Dsl.disposeWith(_this).when;
-            when(_this.inputModel).changes(function (value) { return _this.valueChange.emit(value); }, {
+            var _a = pectin.Dsl.disposeWith(_this), when = _a.when, valueOf = _a.valueOf, chain = _a.chain;
+            var binding = new pectin.Binding.Identity(_this.formValueModel, _this.componentListModel).writeRight();
+            var inExternalChange = valueOf.any(_this.setValueIsInProgress, chain(binding.direction).equals(pectin.Binding.Direction.RIGHT)).areTruthy();
+            when(_this.componentListModel).changes(function (is, was) {
+                _this.valueChange.emit(is);
+                _this.onValueEditedListeners.fire(function (l) { return l(is, was); });
+            }, {
                 initialValue: 'ignore',
-                unless: _this.setValueIsInitialising
+                // we never fire events during an external changes to the value. This allows
+                // the component to behave when used in the conventional angular
+                // fashion, i.e. [(value)]="..."
+                unless: inExternalChange
             });
+            pectin.DebugContext.tag(_this.formValueModel, _this.constructor.name + ".formValueModel");
             return _this;
         }
         Object.defineProperty(AbstractListInputComponent.prototype, "value", {
+            // We add support for simple direct display of values by allowing components to be used
+            // by `component.value = ...`  This use of the component without a value model in tables
+            // and the like.
             set: function (value) {
                 var _this = this;
-                if (!this.listHolder) {
-                    this.setValueIsInitialising.whileTrue(function () {
+                this.setValueIsInProgress.whileTrue(function () {
+                    if (!_this.listHolder) {
                         _this.listHolder = new pectin.MutableListModel(value);
                         _this.listModel = _this.listHolder;
-                    });
-                }
-                else {
-                    this.listHolder.value = value;
-                }
+                    }
+                    else {
+                        _this.listHolder.value = value;
+                    }
+                });
             },
             enumerable: true,
             configurable: true
         });
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
+            core.Input(), pectin.TrackExternal({ delegateTo: 'formValueModel' }),
             __metadata("design:type", Object)
         ], AbstractListInputComponent.prototype, "listModel", void 0);
         __decorate([
@@ -948,48 +1961,131 @@
              * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
              */
             // We have to register it as a disposable so it ditches any listeners when we're disposed.
-            _this.inputModel = _this.registerDisposable(new pectin.Form.DelegatingValueModel());
-            _this.setValueIsInitialising = new pectin.Guard();
+            _this.formValueModel = _this.registerDisposable(new pectin.Form.DelegatingValueModel());
+            _this.setValueInProgress = new pectin.Guard();
+            _this.componentValueModel = new pectin.MutableValueModel();
             _this.valueChange = new core.EventEmitter();
-            var when = pectin.Dsl.disposeWith(_this).when;
-            when(_this.inputModel).changes(function (value) { return _this.valueChange.emit(value); }, { initialValue: 'ignore', unless: _this.setValueIsInitialising });
+            var _a = pectin.Dsl.disposeWith(_this), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
+            var binding = new pectin.Binding.Identity(_this.formValueModel, _this.componentValueModel).writeRight();
+            var inExternalChange = valueOf.any(_this.setValueInProgress, chain(binding.direction).equals(pectin.Binding.Direction.RIGHT)).areTruthy();
+            when(_this.componentValueModel).changes(function (is, was) {
+                _this.valueChange.emit(is);
+                _this.onValueEditedListeners.fire(function (l) { return l(is, was); });
+            }, {
+                initialValue: 'ignore',
+                // we never fire events during an external set value operation. This allows
+                // the component to behave when used in the conventional angular
+                // fashion, i.e. [(value)]="..."
+                unless: inExternalChange
+            });
+            pectin.DebugContext.tag(_this.formValueModel, _this.constructor.name + ".formValueModel");
             return _this;
         }
         Object.defineProperty(AbstractValueInputComponent.prototype, "value", {
+            // We add support for simple direct display of values by allowing components to be used
+            // by `component.value = ...`  This use of the component without a value model in tables
+            // and the like.
             set: function (value) {
                 var _this = this;
-                if (!this.valueHolder) {
-                    this.setValueIsInitialising.whileTrue(function () {
-                        _this.valueHolder = new pectin.MutableValueModel(value);
-                        _this.valueModel = _this.valueHolder;
-                    });
-                }
-                else {
-                    this.valueHolder.value = value;
-                }
+                this.setValueInProgress.whileTrue(function () {
+                    if (!_this.plainValueHolder) {
+                        _this.plainValueHolder = new pectin.MutableValueModel(value);
+                        _this.valueModel = _this.plainValueHolder;
+                    }
+                    else {
+                        _this.plainValueHolder.value = value;
+                    }
+                });
             },
             enumerable: true,
             configurable: true
         });
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
+            core.Input(), pectin.TrackExternal({ delegateTo: 'formValueModel' }),
+            __metadata("design:type", Object)
+        ], AbstractValueInputComponent.prototype, "valueModel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], AbstractValueInputComponent.prototype, "value", null);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], AbstractValueInputComponent.prototype, "valueChange", void 0);
+        AbstractValueInputComponent = __decorate([
+            core.Component({ template: '' }),
+            __metadata("design:paramtypes", [])
+        ], AbstractValueInputComponent);
+        return AbstractValueInputComponent;
+    }(AbstractInputComponent));
+
+    /**
+     * Using templates (not only supported for nil values:
+     * <aup-autocomplete-input [valueModel]="myModel" [options]="myOptions">
+     *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+     * </aup-autocomplete-input>
+     */
+    var AutocompleteInputComponent = /** @class */ (function (_super) {
+        __extends(AutocompleteInputComponent, _super);
+        function AutocompleteInputComponent() {
+            var _this = _super.call(this) || this;
+            _this.filterValue = new pectin.MutableValueModel();
+            _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            var lowerCaseFilterValue = chain(_this.filterValue)
+                .map(function (v) { return ___default__default.isString(v) ? v.toLowerCase() : ''; });
+            _this.filteredOptions = chain(_this.optionsModel)
+                .select(function (option) {
+                return ___default__default.isEmpty(_this.filterValue.value) || _this.optionLabelFormat(option).toString().toLowerCase().includes(lowerCaseFilterValue.value);
+            }, { dependsOn: lowerCaseFilterValue });
+            return _this;
+        }
+        AutocompleteInputComponent.prototype.ngOnInit = function () {
+        };
+        AutocompleteInputComponent.prototype.formatOption = function (option) {
+            return this.optionLabelFormat(option);
+        };
+        AutocompleteInputComponent.prototype.updateFilter = function ($event) {
+            this.filterValue.value = $event;
+        };
+        AutocompleteInputComponent.prototype.onSelect = function ($event) {
+            this.valueModel.value = $event.option.value;
+        };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ListModel)
+        ], AutocompleteInputComponent.prototype, "optionsModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInListModel('optionsModel'),
+            __metadata("design:type", Array)
+        ], AutocompleteInputComponent.prototype, "options", void 0);
+        __decorate([
+            core.Input(),
             __metadata("design:type", Object)
-        ], AbstractValueInputComponent.prototype, "valueModel", void 0);
+        ], AutocompleteInputComponent.prototype, "optionLabel", void 0);
         __decorate([
             core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], AbstractValueInputComponent.prototype, "value", null);
+            __metadata("design:type", Boolean)
+        ], AutocompleteInputComponent.prototype, "allowNil", void 0);
         __decorate([
-            core.Output(),
-            __metadata("design:type", Object)
-        ], AbstractValueInputComponent.prototype, "valueChange", void 0);
-        AbstractValueInputComponent = __decorate([
-            core.Component({ template: '' }),
+            core.ContentChild('nilOptionTemplate'),
+            __metadata("design:type", core.TemplateRef)
+        ], AutocompleteInputComponent.prototype, "nilOptionTemplateRef", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], AutocompleteInputComponent.prototype, "optionLabelFormat", void 0);
+        AutocompleteInputComponent = __decorate([
+            core.Component({
+                selector: 'aup-autocomplete-input',
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValueModel.value\"\n         (ngModelChange)=\"updateFilter($event)\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-autocomplete #autocomplete [displayWith]=\"optionLabelFormat\" [autoActiveFirstOption]=\"true\" (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{formatOption(option)}}</mat-option>\n        <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n  </mat-autocomplete>\n\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+            }),
             __metadata("design:paramtypes", [])
-        ], AbstractValueInputComponent);
-        return AbstractValueInputComponent;
-    }(AbstractInputComponent));
+        ], AutocompleteInputComponent);
+        return AutocompleteInputComponent;
+    }(AbstractValueInputComponent));
 
     var CheckboxInputComponent = /** @class */ (function (_super) {
         __extends(CheckboxInputComponent, _super);
@@ -1014,7 +2110,7 @@
         CheckboxInputComponent = __decorate([
             core.Component({
                 selector: 'aup-checkbox-input',
-                template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"valueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
+                template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
                 styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
             }),
             __metadata("design:paramtypes", [])
@@ -1022,6 +2118,53 @@
         return CheckboxInputComponent;
     }(AbstractValueInputComponent));
 
+    /**
+     * Using templates:
+     * <aup-multiple-select-input [valueModel]="myModel" [options]="myOptions">
+     *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+     *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+     * </aup-multiple-select_input>
+     */
+    var MultipleSelectInputComponent = /** @class */ (function (_super) {
+        __extends(MultipleSelectInputComponent, _super);
+        function MultipleSelectInputComponent() {
+            var _this = _super.call(this) || this;
+            _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
+            return _this;
+        }
+        MultipleSelectInputComponent.prototype.ngOnInit = function () {
+        };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ListModel)
+        ], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInListModel('optionsModel'),
+            __metadata("design:type", Array)
+        ], MultipleSelectInputComponent.prototype, "options", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
+        __decorate([
+            core.ContentChild('optionTemplate'),
+            __metadata("design:type", core.TemplateRef)
+        ], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
+        MultipleSelectInputComponent = __decorate([
+            core.Component({
+                selector: 'aup-multiple-select-input',
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"componentListModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], MultipleSelectInputComponent);
+        return MultipleSelectInputComponent;
+    }(AbstractListInputComponent));
+
     var NumberInputComponent = /** @class */ (function (_super) {
         __extends(NumberInputComponent, _super);
         function NumberInputComponent() {
@@ -1045,7 +2188,7 @@
         NumberInputComponent = __decorate([
             core.Component({
                 selector: 'aup-number-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{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  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
                 styles: [""]
             }),
             __metadata("design:paramtypes", [])
@@ -1065,7 +2208,7 @@
         PasswordInputComponent = __decorate([
             core.Component({
                 selector: 'aup-password-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
                 styles: [""]
             }),
             __metadata("design:paramtypes", [])
@@ -1077,6 +2220,7 @@
      * Using templates:
      * <aup-select-input [valueModel]="myModel" [options]="myOptions">
      *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+     *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
      * </aup-select_input>
      */
     var SelectInputComponent = /** @class */ (function (_super) {
@@ -1119,7 +2263,7 @@
         SelectInputComponent = __decorate([
             core.Component({
                 selector: 'aup-select-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{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  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"componentValueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
                 styles: [":host{display:inline-block}mat-form-field{width:100%}"]
             }),
             __metadata("design:paramtypes", [])
@@ -1133,9 +2277,9 @@
             var _this = _super.call(this) || this;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             _this.clearCommand = pectin.Command.create(function () {
-                _this.valueModel.value = null;
+                _this.componentValueModel.value = null;
             });
-            _this.clearCommand.disableWhile(chain.stringValue(_this.valueModel).isBlank());
+            _this.clearCommand.disableWhile(chain.stringValue(_this.componentValueModel).isBlank());
             return _this;
         }
         StringInputComponent.prototype.ngOnInit = function () {
@@ -1151,7 +2295,7 @@
         StringInputComponent = __decorate([
             core.Component({
                 selector: 'aup-string-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
                 styles: ["button[disabled]{visibility:hidden}"]
             }),
             __metadata("design:paramtypes", [])
@@ -1182,7 +2326,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]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\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)]=\"componentValueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
                 styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}"]
             }),
             __metadata("design:paramtypes", [])
@@ -1190,6 +2334,59 @@
         return TextInputComponent;
     }(AbstractValueInputComponent));
 
+    exports.ɵbk = /** @class */ (function () {
+        function IconComponent() {
+            this.allowedPrefixes = typescriptStringEnums.Enum.values(IconComponent_1.IconPrefix).map(function (p) { return p + ":"; });
+            this.iconPrefix = IconComponent_1.IconPrefix;
+        }
+        IconComponent_1 = IconComponent;
+        Object.defineProperty(IconComponent.prototype, "icon", {
+            get: function () {
+                return this._icon;
+            },
+            set: function (iconName) {
+                this._icon = iconName;
+                if (!iconName) {
+                    this.errorMessage = 'icon is nil';
+                    this.prefix = undefined;
+                    return;
+                }
+                var colonIndex = iconName.indexOf(':');
+                if (colonIndex > 0) {
+                    this.prefix = this.icon.slice(0, colonIndex);
+                    this.suffix = this.icon.slice(colonIndex + 1);
+                }
+                if (this.prefix) {
+                    this.errorMessage = "Unknown icon \"" + iconName + "\"";
+                }
+                this.errorMessage = "Unknown icon prefix, expected one of [" + this.allowedPrefixes.join(',') + "] got \"" + this.prefix + ":\"";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        var IconComponent_1;
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], IconComponent.prototype, "icon", null);
+        IconComponent = IconComponent_1 = __decorate([
+            core.Component({
+                selector: 'aup-icon',
+                template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
+                styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
+            })
+        ], IconComponent);
+        return IconComponent;
+    }());
+    (function (IconComponent) {
+        IconComponent.IconPrefix = typescriptStringEnums.Enum({
+            SVG: 'svg',
+            FONT_AWESOME: 'fa',
+            MATERIAL: 'mat'
+        });
+    })(exports.ɵbk || (exports.ɵbk = {}));
+
     var NoopComponent = /** @class */ (function () {
         function NoopComponent() {
         }
@@ -1665,7 +2862,8 @@
 
     var noop = function () {
     };
-    var ɵ0 = noop;
+    var ɵ0$3 = noop;
+    var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
     var ColumnModel = /** @class */ (function () {
         function ColumnModel(columnId, defaults) {
             this.columnId = columnId;
@@ -1783,6 +2981,35 @@
             }));
             return this;
         };
+        PropertyColumnModel.prototype.mutableCellRenderer = function (componentType, options) {
+            var _this = this;
+            this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
+                // keep a local copy most recent row value so it's available to teh
+                // edit callback without having to add/remove subscribers all the time.
+                component[CELL_RENDERER_COMPONENT_ROW_CACHE] = rowData.row;
+                var disableEditCallback = false;
+                if (firstTime) {
+                    if (___default__default.isFunction(options === null || options === void 0 ? void 0 : options.onComponentInit)) {
+                        options.onComponentInit(component);
+                    }
+                    // install our edit callback
+                    component.onValueEdited(function (is, was) {
+                        if (!disableEditCallback) {
+                            options.onValueEdit(component[CELL_RENDERER_COMPONENT_ROW_CACHE], is, was);
+                        }
+                    });
+                }
+                // now push the value the component and disable the callback just incase the component misbehaves
+                // and fires a value change during the operation.
+                disableEditCallback = true;
+                component.value = rowData.row[_this.property];
+                disableEditCallback = false;
+                if (!___default__default.isFunction(options) && ___default__default.isFunction(options === null || options === void 0 ? void 0 : options.onRowUpdate)) {
+                    options.onRowUpdate(component, rowData.row);
+                }
+            }));
+            return this;
+        };
         PropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, onComponentInit) {
             var _this = this;
             var validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
@@ -1859,10 +3086,23 @@
             _this.cellRenderer(DefaultCellRendererComponent);
             return _this;
         }
-        CustomValueColumnModel.prototype.cellRenderer = function (componentType) {
+        CustomValueColumnModel.prototype.cellRenderer = function (componentType, onComponentInitOrOptions) {
             var _this = this;
-            this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData) {
+            this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
+                if (firstTime) {
+                    if (___default__default.isFunction(onComponentInitOrOptions)) {
+                        onComponentInitOrOptions(component);
+                    }
+                    else {
+                        if (___default__default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
+                            onComponentInitOrOptions.onComponentInit(component);
+                        }
+                    }
+                }
                 component.value = _this.getValue(rowData.row);
+                if (!___default__default.isFunction(onComponentInitOrOptions) && ___default__default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
+                    onComponentInitOrOptions.onRowUpdate(component, rowData.row);
+                }
             }));
             return this;
         };
@@ -2035,6 +3275,9 @@
             this._editorSessions = new pectin.MutableListModel();
             this.rowClassNamePredicates = [];
             this._createForm = function (row) { return new pectin.DirtyTrackingForm(); };
+            this.trackBy = function (index, item) {
+                return _this.identityOf ? _this.identityOf(item) : index;
+            };
             this.identityOf = sourceOfTruth.identityOf;
             var _a = pectin.Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             this._columnsById = chain(this._columns).indexBy('columnId');
@@ -2061,12 +3304,6 @@
             enumerable: true,
             configurable: true
         });
-        TableModel.prototype.getTrackByFunction = function () {
-            var _this = this;
-            return function (index, item) {
-                return _this.identityOf ? _this.identityOf(item) : index;
-            };
-        };
         Object.defineProperty(TableModel.prototype, "columns", {
             get: function () {
                 return this._columns.readonly;
@@ -2092,6 +3329,9 @@
         TableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
             return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
         };
+        TableModel.prototype.addComponentColumn = function (columnId, component, onComponentInitOrOptions) {
+            return this.addColumn(new CustomValueColumnModel(columnId, this, function (row) { return row; })).cellRenderer(component, onComponentInitOrOptions);
+        };
         TableModel.prototype.addTemplateColumn = function (columnId) {
             return this.addColumn(new CustomTemplateColumnModel(columnId, this));
         };
@@ -2120,12 +3360,14 @@
             }
             return column;
         };
+        // removeColumn(column: ColumnModel<Row>) {
+        //
+        // }
         TableModel.prototype.columnTextProperties = function (columnTextProperties) {
             this._columnTextPropertiesLookup = columnTextProperties;
         };
         TableModel.prototype.getColumnTextProperties = function (column) {
-            var factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
-            return factory ? factory() : undefined;
+            return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
         };
         TableModel.prototype.startEditSession = function (row) {
             var _this = this;
@@ -2243,7 +3485,7 @@
         TableComponent = __decorate([
             core.Component({
                 selector: 'aup-table',
-                template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.getTrackByFunction()\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [attr.column-id]=\"column.columnId\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" (click)=\"onCellClicked(column, row)\" [class.enable-cursor]=\"tableModel.isRowSelectionEnabledFor(column)\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\n      ></aup-table-cell-renderer>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnIds.value;\"\n      [ngClass]=\"tableModel.getRowClasses(row)\"\n  ></tr>\n\n</table>\n",
+                template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [attr.column-id]=\"column.columnId\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" (click)=\"onCellClicked(column, row)\" [class.enable-cursor]=\"tableModel.isRowSelectionEnabledFor(column)\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\n      ></aup-table-cell-renderer>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n      [ngClass]=\"tableModel.getRowClasses(row)\" [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n  ></tr>\n\n</table>\n",
                 styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}"]
             }),
             __metadata("design:paramtypes", [])
@@ -2426,6 +3668,63 @@
         return TableHeaderCellRendererComponent;
     }());
 
+    var MenuItemData = /** @class */ (function () {
+        function MenuItemData(factory, face) {
+            this.factory = factory;
+            this.face = face;
+        }
+        return MenuItemData;
+    }());
+    /**
+     *
+     */
+    var TableRowMenuComponent = /** @class */ (function (_super) {
+        __extends(TableRowMenuComponent, _super);
+        function TableRowMenuComponent() {
+            var _this = _super.call(this) || this;
+            _this.actions = [];
+            _this.moreActions = [];
+            return _this;
+        }
+        TableRowMenuComponent.prototype.registerAction = function (commandFactory, properties) {
+            this.actions.push(new MenuItemData(commandFactory, properties));
+        };
+        TableRowMenuComponent.prototype.registerMoreAction = function (commandFactory, properties) {
+            this.moreActions.push(new MenuItemData(commandFactory, properties));
+        };
+        TableRowMenuComponent.prototype.ngOnInit = function () {
+        };
+        TableRowMenuComponent.prototype.createMoreMenuCommand = function (item, value) {
+            var _this = this;
+            var when = pectin.Dsl.disposeWith(this).when;
+            var command = item.factory.create(value);
+            when(command.busy).becomesFalsey(function () {
+                _this.closeMoreMenu();
+            });
+            return command;
+        };
+        TableRowMenuComponent.prototype.closeMoreMenu = function () {
+            this.menu.closeMenu();
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], TableRowMenuComponent.prototype, "value", void 0);
+        __decorate([
+            core.ViewChild(menu.MatMenuTrigger),
+            __metadata("design:type", menu.MatMenuTrigger)
+        ], TableRowMenuComponent.prototype, "menu", void 0);
+        TableRowMenuComponent = __decorate([
+            core.Component({
+                selector: 'aup-table-row-menu',
+                template: "\n      <aup-tool-bar>\n          <aup-command *ngFor=\"let action of actions\" [command]=\"action.factory.create(value)\"\n                       [face]=\"action.faceModel\"></aup-command>\n      </aup-tool-bar>\n      <ng-container *ngIf=\"moreActions.length > 0\">\n          <aup-more-menu>\n              <aup-command *ngFor=\"let action of moreActions\" [command]=\"action.factory.create(value)\"\n                           [face]=\"action.faceModel\"></aup-command>\n          </aup-more-menu>\n      </ng-container>\n  ",
+                styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], TableRowMenuComponent);
+        return TableRowMenuComponent;
+    }(DisposableComponent));
+
     var VerticalFocusContainerComponent = /** @class */ (function (_super) {
         __extends(VerticalFocusContainerComponent, _super);
         function VerticalFocusContainerComponent(focusManager) {
@@ -2505,101 +3804,11 @@
                 ],
                 styles: [":host{display:block}"]
             }),
-            __param(0, core.Self()),
-            __metadata("design:paramtypes", [pectin.FocusManager])
-        ], VerticalFocusContainerComponent);
-        return VerticalFocusContainerComponent;
-    }(FocusContainerComponent));
-
-    var MultipleSelectInputComponent = /** @class */ (function (_super) {
-        __extends(MultipleSelectInputComponent, _super);
-        function MultipleSelectInputComponent() {
-            var _this = _super.call(this) || this;
-            _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
-            return _this;
-        }
-        MultipleSelectInputComponent.prototype.ngOnInit = function () {
-        };
-        __decorate([
-            core.Input(), pectin.TrackExternal(),
-            __metadata("design:type", pectin.ListModel)
-        ], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
-        __decorate([
-            core.Input(), pectin.StoreInListModel('optionsModel'),
-            __metadata("design:type", Array)
-        ], MultipleSelectInputComponent.prototype, "options", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Boolean)
-        ], MultipleSelectInputComponent.prototype, "allowNil", void 0);
-        __decorate([
-            core.ContentChild('optionTemplate'),
-            __metadata("design:type", core.TemplateRef)
-        ], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
-        __decorate([
-            core.ContentChild('nilOptionTemplate'),
-            __metadata("design:type", core.TemplateRef)
-        ], MultipleSelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
-        MultipleSelectInputComponent = __decorate([
-            core.Component({
-                selector: 'aup-multiple-select-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"listModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-                styles: [":host{display:inline-block}mat-form-field{width:100%}"]
-            }),
-            __metadata("design:paramtypes", [])
-        ], MultipleSelectInputComponent);
-        return MultipleSelectInputComponent;
-    }(AbstractListInputComponent));
-
-    var IconComponent = /** @class */ (function () {
-        function IconComponent() {
-        }
-        Object.defineProperty(IconComponent.prototype, "icon", {
-            get: function () {
-                return this._icon;
-            },
-            set: function (iconName) {
-                this._icon = iconName;
-                if (!iconName) {
-                    this.errorMessage = 'icon is nil';
-                    this.prefix = undefined;
-                    return;
-                }
-                var colonIndex = iconName.indexOf(':');
-                if (colonIndex > 0) {
-                    this.prefix = this.icon.slice(0, colonIndex);
-                    this.suffix = this.icon.slice(colonIndex + 1);
-                }
-                if (this.prefix) {
-                    this.errorMessage = "Unknown icon \"" + iconName + "\"";
-                }
-                this.errorMessage = "Unknown icon prefix \"" + this.prefix + "\"";
-            },
-            enumerable: true,
-            configurable: true
-        });
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], IconComponent.prototype, "icon", null);
-        IconComponent = __decorate([
-            core.Component({
-                selector: 'aup-icon',
-                template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"'svg'\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"'mat'\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"'fab'\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
-                styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
-            })
-        ], IconComponent);
-        return IconComponent;
-    }());
+            __param(0, core.Self()),
+            __metadata("design:paramtypes", [pectin.FocusManager])
+        ], VerticalFocusContainerComponent);
+        return VerticalFocusContainerComponent;
+    }(FocusContainerComponent));
 
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule(faIconLibrary) {
@@ -2619,6 +3828,8 @@
                     TextInputComponent,
                     PasswordInputComponent,
                     SelectInputComponent,
+                    MultipleSelectInputComponent,
+                    AutocompleteInputComponent,
                     CheckboxInputComponent,
                     ScrollContainerComponent,
                     NoopComponent,
@@ -2638,9 +3849,19 @@
                     SelectHeaderCellRendererComponent,
                     DefaultHeaderCellRendererComponent,
                     TableHeaderCellRendererComponent,
-                    MultipleSelectInputComponent,
-                    IconComponent,
-                    SectionHeaderComponent
+                    exports.ɵbk,
+                    SectionHeaderComponent,
+                    TableRowMenuComponent,
+                    ToolBarComponent,
+                    CommandComponent,
+                    PopupMenuComponent,
+                    CommandGroupComponent,
+                    CommandFaceComponent,
+                    MoreMenuComponent,
+                    SeparatorComponent,
+                    FlexComponent,
+                    CommandGroupMenuRendererComponent,
+                    CommandGroupRendererComponent
                 ],
                 imports: [
                     common.CommonModule,
@@ -2658,7 +3879,10 @@
                     portal.PortalModule,
                     scrolling.CdkScrollableModule,
                     angularFontawesome.FontAwesomeModule,
-                    tooltip.MatTooltipModule
+                    tooltip.MatTooltipModule,
+                    autocomplete.MatAutocompleteModule,
+                    menu.MatMenuModule,
+                    divider.MatDividerModule
                 ],
                 exports: [
                     NumberInputComponent,
@@ -2667,6 +3891,8 @@
                     PasswordInputComponent,
                     CheckboxInputComponent,
                     SelectInputComponent,
+                    MultipleSelectInputComponent,
+                    AutocompleteInputComponent,
                     ScrollContainerComponent,
                     NoopComponent,
                     SwitchCaseComponent,
@@ -2679,12 +3905,20 @@
                     TableComponent,
                     EditRowControls,
                     ColumnTemplateDirective,
-                    MultipleSelectInputComponent,
-                    IconComponent,
-                    SectionHeaderComponent
+                    exports.ɵbk,
+                    SectionHeaderComponent,
+                    TableRowMenuComponent,
+                    CommandGroupComponent,
+                    ToolBarComponent,
+                    CommandComponent,
+                    PopupMenuComponent,
+                    CommandFaceComponent,
+                    MoreMenuComponent,
+                    SeparatorComponent,
+                    FlexComponent
                 ],
                 providers: [
-                    FocusBindingFactory,
+                    FocusBindingFactory
                 ]
             }),
             __metadata("design:paramtypes", [angularFontawesome.FaIconLibrary])
@@ -2763,7 +3997,7 @@
             core.Component({
                 selector: 'aup-activity-actions',
                 template: "<ng-container *ngIf=\"hasCancelCommand()\">\n  <button class=\"cancel\" *ngIf=\"!hasCancelText()\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n    <aup-icon icon=\"mat:clear\"></aup-icon>\n  </button>\n  <button class=\"cancel\" *ngIf=\"hasCancelText()\" mat-button [pectinCommand]=\"cancelCommand\">{{cancelText}}</button>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmCommand()\">\n  <button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n    <aup-icon icon=\"mat:done\"></aup-icon>\n  </button>\n  <button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n</ng-container>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
-                styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}:host.align-stretch>.cancel{-ms-grid-row:1;-ms-grid-column:1}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}:host.align-stretch>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}:host.align-stretch>.content{-ms-grid-row:1;-ms-grid-column:2}"]
+                styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}:host.align-stretch>.cancel{-ms-grid-row:1;-ms-grid-column:1}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}:host.align-stretch>.confirm{-ms-grid-row:1;-ms-grid-column:3}.column{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.column{-ms-grid-row:1;-ms-grid-column:1}:host.align-stretch>.column{-ms-grid-row:1;-ms-grid-column:2}"]
             })
         ], ActivityActionsComponent);
         return ActivityActionsComponent;
@@ -2775,13 +4009,27 @@
         function Activity() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
             _this._busyModel = new pectin.DelegatingValueModel().withDefault(false);
+            _this._focusedModel = _this.registerDisposable(new pectin.DelegatingValueModel());
             _this.class = 'aup-activity';
             return _this;
         }
+        Object.defineProperty(Activity.prototype, "isFocused", {
+            get: function () {
+                return this._focusedModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Activity.prototype.initialise = function (nestedInteractionContext, activityContext) {
+            var _this = this;
+            var _a = pectin.Dsl.disposeWith(this), chain = _a.chain, when = _a.when;
             typescriptUtilities.assert.isNil(this._activityContext);
             this._activityContext = activityContext;
             this._interactionContext = nestedInteractionContext;
+            this._focusedModel.setDelegate(activityContext.focused);
+            when(this._focusedModel).becomesTruthy(function () {
+                _this.onActivityReady();
+            });
         };
         Object.defineProperty(Activity.prototype, "interactionContext", {
             get: function () {
@@ -2807,6 +4055,13 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(Activity.prototype, "focused", {
+            get: function () {
+                return this._focusedModel.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Activity.prototype.busyWhile = function (busyModel) {
             this._busyModel.setDelegate(busyModel);
         };
@@ -2820,6 +4075,11 @@
             core.HostBinding('class'),
             __metadata("design:type", Object)
         ], Activity.prototype, "class", void 0);
+        __decorate([
+            core.HostBinding('attr.focused'),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [])
+        ], Activity.prototype, "isFocused", null);
         return Activity;
     }(DisposableComponent));
 
@@ -2958,6 +4218,7 @@
             this.onComplete = onComplete;
             this._complete = false;
             this.deferredResult = pectin.Deferred.defer();
+            this.focusedModel = new pectin.MutableValueModel();
         }
         ActivityRef.prototype.isActivityRealised = function () {
             return !!this._activity;
@@ -2973,6 +4234,16 @@
             enumerable: true,
             configurable: true
         });
+        ActivityRef.prototype.setFocused = function (focused) {
+            this.focusedModel.value = focused;
+        };
+        Object.defineProperty(ActivityRef.prototype, "focused", {
+            get: function () {
+                return this.focusedModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         ActivityRef.prototype.notifyActivityCreated = function (activity, nestedInteractionContext) {
             pectin.assert.isNil(this._activity);
             this._activity = activity;
@@ -2983,7 +4254,8 @@
                 },
                 onCancel: function (error) {
                     self.finishActivity(function (deferred) { return deferred.reject(error); });
-                }
+                },
+                focused: this.focusedModel.readonly
             });
         };
         ActivityRef.prototype.finishActivity = function (resolveOrReject) {
@@ -3021,7 +4293,7 @@
             },
             set: function (activityRef) {
                 if (this.activityRef && !this.activityRef.isComplete()) {
-                    typescriptUtilities.lang.illegalState("changing activity before previous one has completed");
+                    typescriptUtilities.lang.illegalState('changing activity before previous one has completed');
                 }
                 this._activityRef = activityRef;
                 this.loadActivity(activityRef);
@@ -3084,8 +4356,9 @@
         function ActivityContainerComponent() {
             var _this = _super.call(this) || this;
             _this.dynamicHeight = false;
-            _this.activityTabs = [];
+            _this.activityRefs = [];
             _this.garbage = new pectin.GarbageCollector();
+            _this.inAnimation = new pectin.MutableValueModel(false);
             return _this;
         }
         ActivityContainerComponent.prototype.ngOnInit = function () {
@@ -3123,6 +4396,7 @@
         ActivityContainerComponent.prototype.registerDisposable = function (disposable) {
             return this.garbage.registerDisposable(disposable);
         };
+        // @Trace()
         ActivityContainerComponent.prototype.dispose = function () {
             // TODO: think about auto cancelling any outstanding activity on dispose.
             //       See NavigationState.Navigating for a use-case.
@@ -3133,7 +4407,7 @@
             if (!this.isActive()) {
                 typescriptUtilities.lang.illegalState('no activity in progress');
             }
-            return ___default__default.findLast(this.activityTabs, function (tab) { return !tab.isComplete(); });
+            return ___default__default.findLast(this.activityRefs, function (tab) { return !tab.isComplete(); });
         };
         /**
          * Cancels the current activity and returns true the context is no longer active, false if
@@ -3172,14 +4446,14 @@
             });
             this.launchActivity(activityRef);
             // if this is the first activity let the interaction service know.
-            if (this.activityTabs.length === 1) {
+            if (this.activityRefs.length === 1) {
                 // console.log('Now active!!!');
                 this.interactionServiceApi.notifyActive(this);
             }
             return activityRef.activityResult;
         };
         ActivityContainerComponent.prototype.getActiveActivityCount = function () {
-            return this.activityTabs.filter(function (ref) { return !ref.isComplete(); }).length;
+            return this.activityRefs.filter(function (ref) { return !ref.isComplete(); }).length;
         };
         /**
          * Checks if this interaction context has finished an is in the process of waiting
@@ -3206,7 +4480,7 @@
                 // Without this our animation done wasn't called when a single
                 // new activity followed a single tab activity (since we're tracking
                 // by activity index)
-                this.activityTabs = [];
+                this.activityRefs = [];
                 var promise = this.interactionServiceApi.notifyFinished(this);
                 this._deferredCleanUp = promise
                     .finally(function () {
@@ -3216,14 +4490,15 @@
         };
         // @Trace()
         ActivityContainerComponent.prototype.launchActivity = function (activityRef) {
-            var cleanedTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
-            this.activityTabs = cleanedTabs.concat(activityRef);
+            var cleanedTabs = this.activityRefs.filter(function (tab) { return !tab.isComplete(); });
+            this.activityRefs = cleanedTabs.concat(activityRef);
             this.synchroniseSelectedTabIndex();
         };
         ActivityContainerComponent.prototype.activityIndex = function (index, activityRef) {
             return index;
         };
         ;
+        // @Trace()
         ActivityContainerComponent.prototype.onAnimationFinished = function () {
             if (this.onAnimationFinishedJob) {
                 this.onAnimationFinishedJob();
@@ -3233,15 +4508,21 @@
         /**
          * Synchronises the selected tab index.
          */
+        // @Trace()
         ActivityContainerComponent.prototype.synchroniseSelectedTabIndex = function () {
             var _this = this;
             var previousIndex = this.tabs.selectedIndex;
             var newIndex = this.getActiveActivityCount() - 1;
             if (previousIndex !== newIndex) {
+                this.inAnimation.value = true;
+                this.activityRefs[newIndex].setFocused(false);
                 this.tabs.selectedIndex = newIndex;
                 this.onAnimationFinishedJob = function () {
-                    _this.getSelectedOutlet().component.onActivityReady();
-                    _this.activityTabs = _this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
+                    _this.activityRefs = _this.activityRefs.filter(function (tab) { return !tab.isComplete(); });
+                    _this.inAnimation.value = false;
+                    _this.activityRefs.forEach(function (ref, index) {
+                        ref.setFocused(index === newIndex);
+                    });
                 };
             }
         };
@@ -3249,6 +4530,10 @@
             return this.activityOutlets.toArray()[this.tabs.selectedIndex];
         };
         // @Trace()
+        ActivityContainerComponent.prototype.getSelectedTabIndex = function () {
+            return this.tabs.selectedIndex;
+        };
+        // @Trace()
         ActivityContainerComponent.prototype.triggerTabSynchronisation = function () {
             var _this = this;
             if (this.syncSelectedTabTimeout) {
@@ -3271,16 +4556,10 @@
             core.ViewChildren(ActivityOutletComponent),
             __metadata("design:type", core.QueryList)
         ], ActivityContainerComponent.prototype, "activityOutlets", void 0);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], ActivityContainerComponent.prototype, "dispose", null);
         ActivityContainerComponent = __decorate([
             core.Component({
                 selector: 'aup-activity-container',
-                template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityTabs; trackBy: activityIndex\" >\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+                template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <!--\n    We have issues where angular is triggering a leave animation when an\n    new activity is started, but is not running the enter animation\n    when it is scrolled back into view.  So we track the tab changes and\n    disable all animations inside the tab while we're animating.\n    -->\n    <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n      <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n",
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
             __metadata("design:paramtypes", [])
@@ -3325,7 +4604,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵbv = /** @class */ (function () {
+    exports.ɵci = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -3470,7 +4749,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵbv || (exports.ɵbv = {}));
+    })(exports.ɵci || (exports.ɵci = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -3528,7 +4807,7 @@
             return this.activityContainerComponent.startActivity(activityType, data, options);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbv },
+            { type: exports.ɵci },
             { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
         ]; };
         __decorate([
@@ -3546,7 +4825,7 @@
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
             __param(1, core.Inject(tabs.MAT_TABS_CONFIG)), __param(1, core.Optional()),
-            __metadata("design:paramtypes", [exports.ɵbv, Object])
+            __metadata("design:paramtypes", [exports.ɵci, Object])
         ], InPlaceInteractionContextComponent);
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
@@ -4085,7 +5364,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵbv
+                    exports.ɵci
                     // {
                     //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
                     // }
@@ -4351,6 +5630,9 @@
             var _this = _super.call(this) || this;
             _this.visitModel = new pectin.MutableValueModel();
             _this._inVisitUpdate = new pectin.Guard();
+            _this._active = new pectin.MutableValueModel(false);
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            when(_this._active).becomesTruthy(function () { return _this.onPlaceReady(); });
             return _this;
         }
         PlaceComponent_1 = PlaceComponent;
@@ -4360,7 +5642,7 @@
             pectin.assert.isNil(this.visitModel.value);
             var when = pectin.Dsl.disposeWith(this).when;
             this.visitModel.value = visit;
-            pectin.DebugContext.get(this.visitModel).tag(this.placeDefinition.component.name + ".visitModel");
+            pectin.DebugContext.getOrCreate(this.visitModel).tag(this.placeDefinition.component.name + ".visitModel");
             this.placeDefinition.getVisitParameterDefs().forEach(function (parameterDef) { return _this.installBinding(parameterDef); });
             when.valueOf(this.visitModel).changes(function (current, previous) {
                 notifyVisitChanged(current, previous);
@@ -4408,6 +5690,19 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(PlaceComponent.prototype, "active", {
+            get: function () {
+                return this._active.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Called by the router when the place is ready to interact after any animations have run.
+         */
+        PlaceComponent.prototype._notifyActive = function (active) {
+            this._active.value = active;
+        };
         PlaceComponent.prototype.onPlaceReady = function () {
         };
         var PlaceComponent_1;
@@ -5207,7 +6502,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵby = /** @class */ (function () {
+    exports.ɵcl = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -5344,7 +6639,7 @@
         //   }
         //
         // }
-    })(exports.ɵby || (exports.ɵby = {}));
+    })(exports.ɵcl || (exports.ɵcl = {}));
 
     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.
@@ -5508,75 +6803,6 @@
         return UrlService;
     }());
 
-    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 !___default.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, __assign(__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 = ___default.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-            return !samePlace || !sameRouteParameters;
-        };
-        Visit.prototype.hasChangedFrom = function (other) {
-            var sameNonRouteParameters = ___default.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 PlaceRouter = /** @class */ (function (_super) {
         __extends(PlaceRouter, _super);
         function PlaceRouter(angularRouter, angularLocation, interactionService, urlService, placeHistory) {
@@ -5772,6 +6998,7 @@
             enumerable: true,
             configurable: true
         });
+        // @Trace()
         PlaceRouter.prototype.pushVisitChangesToRoute = function (previous, next) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
@@ -5867,30 +7094,93 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵbv },
+            { type: exports.ɵci },
             { type: UrlService },
-            { type: exports.ɵby }
+            { type: exports.ɵcl }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbv), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵby)); }, token: PlaceRouter, providedIn: "root" });
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Visit, Visit]),
-            __metadata("design:returntype", Promise)
-        ], PlaceRouter.prototype, "pushVisitChangesToRoute", null);
+        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵci), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵcl)); }, token: PlaceRouter, providedIn: "root" });
         PlaceRouter = __decorate([
             core.Injectable({
                 providedIn: 'root'
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵbv,
+                exports.ɵci,
                 UrlService,
-                exports.ɵby])
+                exports.ɵcl])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
 
+    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 !___default.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, __assign(__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 = ___default.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+            return !samePlace || !sameRouteParameters;
+        };
+        Visit.prototype.hasChangedFrom = function (other) {
+            var sameNonRouteParameters = ___default.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 core.InjectionToken('AUP_PLACE_CONFIG');
 
     // Freezes the state of the components at the start of the animation.
@@ -5950,6 +7240,7 @@
             _this._activePlaceModel = new pectin.MutableValueModel();
             _this.initialPlaceIndex = null;
             _this._isPushingVisitToRoute = new pectin.MutableValueModel(false);
+            _this.isVeryFirstLoad = true;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             _this.parentOutletModel = new pectin.MutableValueModel(parentOutlet);
             var defaultPlaceAnimationOrder = chain(_this.parentOutletModel)
@@ -5958,8 +7249,9 @@
                 .pluckList('children')
                 .pluck('component');
             var activatePlaceType = chain(_this.activePlaceModel).map(function (p) { return p.constructor; });
-            _this.placeAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
-                .otherwise(defaultPlaceAnimationOrder)
+            _this.placesInAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
+                .otherwise(defaultPlaceAnimationOrder);
+            _this.activePlaceAnimationPosition = _this.placesInAnimationOrder
                 .reduce(function (placesInOrder) {
                 var placeIndex = 0;
                 if (activatePlaceType.value) {
@@ -5970,14 +7262,16 @@
                 }
                 return ___default.isNil(_this.initialPlaceIndex) ? 0 : placeIndex - _this.initialPlaceIndex;
             }, { dependsOn: activatePlaceType });
+            _this.animationSupported = _this.placesInAnimationOrder.count().isGreaterThan(0);
+            _this.animationEnabled = valueOf.all(_this.animateModel, _this.animationSupported).areTruthy();
             // Extract our visit model from the place router.
             _this._activePlaceDefinition = chain(_this._activePlaceModel).pluck('placeDefinition');
             _this.routerVisitModel = _this._activePlaceDefinition.findIn(chain(placeRouter.activeVisitsByPlaceDefinition));
             _this.navigationInProgress = chain(_this.placeRouter.navigationInProgress);
-            when.valueOf(_this.navigationInProgress).becomesFalsey(function () {
+            when(_this.navigationInProgress).becomesFalsey(function () {
                 _this.checkStateAndInitialise();
             });
-            when.valueOf(_this.outletActivated).becomesTruthy(function () {
+            when(_this.outletActivated).becomesTruthy(function () {
                 _this.checkStateAndInitialise();
             });
             chain(_this._activePlaceModel)
@@ -5990,7 +7284,7 @@
         };
         // @Trace()
         PlaceOutletComponent.prototype.getAnimationOrder = function () {
-            return this.placeAnimationOrder.value;
+            return this.activePlaceAnimationPosition.value;
         };
         Object.defineProperty(PlaceOutletComponent.prototype, "animationDuration", {
             get: function () {
@@ -6001,7 +7295,10 @@
         });
         // @Trace()
         PlaceOutletComponent.prototype.navigate = function (visit) {
-            // console.log({ activatedRoute: this._activatedRouteModel.value });
+            // const place = this.placesInAnimationOrder.query().findMatching(p => visit.placeDefinition.component === p);
+            // if (!place) {
+            //     lang.illegalState()
+            // }
             this.placeRouter.navigate(visit, {
                 relativeTo: this.parentOutlet ? this.parentOutlet.activatedRouteModel.value : null
             });
@@ -6027,14 +7324,25 @@
             enumerable: true,
             configurable: true
         });
-        // @Trace()
         PlaceOutletComponent.prototype.onOutletActivated = function (routerOutlet, place) {
             this._activatedRouteModel.value = routerOutlet.activatedRoute;
             this._activePlaceModel.value = place;
+            this.validateAnimationState(place);
             this.outletActivated.value = true;
             this.checkStateAndInitialise();
         };
-        // @Trace()
+        PlaceOutletComponent.prototype.validateAnimationState = function (place) {
+            if (this.animateModel.value) {
+                if (this.placesInAnimationOrder.length < 1) {
+                    console.error('PlaceOutlet.animate === true but placeAnimationOrder has not been set. Animation is disabled.');
+                }
+                else {
+                    if (!this.placesInAnimationOrder.query().includes(place.placeDefinition.component)) {
+                        console.error("PlaceOutlet.animate === true but placeAnimationOrder doesn't contain " + place.placeDefinition.component.name + ".");
+                    }
+                }
+            }
+        };
         PlaceOutletComponent.prototype.onOutletDeactivated = function () {
             this.outletActivated.value = false;
             this._activePlaceModel.value = null;
@@ -6051,7 +7359,6 @@
                 this.initialisePlace(routerVisit, activePlace);
             }
         };
-        // @Trace()
         PlaceOutletComponent.prototype.initialisePlace = function (routerVisit, activePlace) {
             var _this = this;
             var visitModel = new pectin.MutableValueModel(routerVisit);
@@ -6059,9 +7366,18 @@
             activePlace.initialiseVisit(routerVisit, function (current, previous) {
                 _this.pushVisitChangeToRoute(previous, current);
             });
-            if (!this.animateModel.value) {
-                // we're not animating so trigger any post animation callbacks now.
-                this.animationDone();
+            var finishPlaceLoad = function () {
+                _this._activePlaceModel.value._notifyActive(true);
+            };
+            if (!this.animationEnabled.value || this.isVeryFirstLoad) {
+                // if animation is disabled or this is the very first load then
+                // we won't get our animation done callback so we finish the
+                // process here and now.
+                this.isVeryFirstLoad = false;
+                finishPlaceLoad();
+            }
+            else {
+                this.onAnimationFinishedJob = finishPlaceLoad;
             }
             var _a = pectin.Dsl.disposeWith(activePlace), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
             when.valueOf(this.routerVisitModel)
@@ -6084,8 +7400,9 @@
         };
         // @Trace()
         PlaceOutletComponent.prototype.animationDone = function () {
-            if (this._activePlaceModel.value) {
-                this._activePlaceModel.value.onPlaceReady();
+            if (this.onAnimationFinishedJob) {
+                this.onAnimationFinishedJob();
+                this.onAnimationFinishedJob = undefined;
             }
         };
         PlaceOutletComponent.ctorParameters = function () { return [
@@ -6118,10 +7435,22 @@
             core.ViewChild('routeOutlet', { static: true }),
             __metadata("design:type", router.RouterOutlet)
         ], PlaceOutletComponent.prototype, "routerOut", void 0);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [router.RouterOutlet, exports.PlaceComponent]),
+            __metadata("design:returntype", void 0)
+        ], PlaceOutletComponent.prototype, "onOutletActivated", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], PlaceOutletComponent.prototype, "onOutletDeactivated", null);
         PlaceOutletComponent = __decorate([
             core.Component({
                 selector: 'aup-place-outlet',
-                template: "<ng-container *ngIf=\"animateModel.value\">\n  <div class=\"router-outlet-container\" cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animateModel.value\">\n  <div class=\"router-outlet-container\" cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n",
+                template: "<ng-container *ngIf=\"animationEnabled.value\">\n  <div class=\"router-outlet-container\" cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animationEnabled.value\">\n  <div class=\"router-outlet-container\" cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n",
                 animations: [LEFT_RIGHT_PLACE_ANIMATION],
                 styles: [":host{display:flex;flex-direction:column;min-height:0}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:scroll}router-outlet{display:none}"]
             }),
@@ -6152,10 +7481,10 @@
             _this.activePlaceDefinition = chain(_this._activePlaceComponent).pluck('placeDefinition');
             return _this;
         }
-        AbstractPlaceNavigationComponent.prototype.getNav = function (placeDef) {
+        AbstractPlaceNavigationComponent.prototype.getNavigationFace = function (placeDef) {
             var navItem = placeDef.getPlaceData('nav');
             return {
-                title: function () { return navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']); },
+                text: function () { return navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']); },
                 tooltip: function () { return navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null); },
                 icon: function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null); }
             };
@@ -6189,7 +7518,7 @@
             __metadata("design:type", Function),
             __metadata("design:paramtypes", [PlaceDefinition]),
             __metadata("design:returntype", Object)
-        ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+        ], AbstractPlaceNavigationComponent.prototype, "getNavigationFace", null);
         AbstractPlaceNavigationComponent = __decorate([
             core.Component({
                 template: ''
@@ -6250,7 +7579,7 @@
         ListPlaceNavComponent = __decorate([
             core.Component({
                 selector: 'aup-list-place-nav',
-                template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span>{{getNav(placeDefinition).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+                template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [face]=\"getNavigationFace(placeDefinition)\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
                 styles: [":host{display:flex;flex-direction:column;--selected-border-color:#838383;--selected-color:inherit;--selected-background:#f1f1f1}mat-nav-list{padding-top:0}a.active{border-right:2px solid var(--selected-border-color);background:var(--selected-background);color:var(--selected-color)}"]
             }),
             __metadata("design:paramtypes", [PlaceRouter])
@@ -6258,25 +7587,6 @@
         return ListPlaceNavComponent;
     }(AbstractPlaceNavigationComponent));
 
-    var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
-        __extends(TabbedPlaceNavigationComponent, _super);
-        function TabbedPlaceNavigationComponent(placeRouter) {
-            return _super.call(this, placeRouter) || this;
-        }
-        TabbedPlaceNavigationComponent.ctorParameters = function () { return [
-            { type: PlaceRouter }
-        ]; };
-        TabbedPlaceNavigationComponent = __decorate([
-            core.Component({
-                selector: 'aup-tabbed-place-navigation',
-                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span>{{getNav(placeDefinition).title()}}</span>\n  </a>\n</nav>\n",
-                styles: [""]
-            }),
-            __metadata("design:paramtypes", [PlaceRouter])
-        ], TabbedPlaceNavigationComponent);
-        return TabbedPlaceNavigationComponent;
-    }(AbstractPlaceNavigationComponent));
-
     /**
      * @example
      * // Usage
@@ -6315,7 +7625,7 @@
      * (at)Place({
      *   path: 'myPlace',
      *   data: {
-     *     nav: I18n.places.myPlace.nav()
+     *     nav: I18n.places.myPlace.nav
      *   }
      * })
      */
@@ -6351,7 +7661,7 @@
         SidePlaceNavigationComponent = __decorate([
             core.Component({
                 selector: 'aup-side-place-navigation',
-                template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span\n      class=\"expanded-only\">{{getNav(placeDefinition).title()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
+                template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(placeDefinition).icon()\" [icon]=\"getNavigationFace(placeDefinition).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(placeDefinition).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
                 styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width:var(--nav-width, 56px);--resolved-nav-item-height:var(--nav-item-height, var(--resolved-nav-item-width));--resolved-expanded-width:var(--nav-expanded-width, 235px);--resolved-color:var(--nav-color, rgba(255, 255, 255, 0.9));--resolved-background-color:var(--nav-background-color, #555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}"]
             }),
             __metadata("design:paramtypes", [router.Router, PlaceRouter])
@@ -6359,6 +7669,25 @@
         return SidePlaceNavigationComponent;
     }(AbstractPlaceNavigationComponent));
 
+    var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
+        __extends(TabbedPlaceNavigationComponent, _super);
+        function TabbedPlaceNavigationComponent(placeRouter) {
+            return _super.call(this, placeRouter) || this;
+        }
+        TabbedPlaceNavigationComponent.ctorParameters = function () { return [
+            { type: PlaceRouter }
+        ]; };
+        TabbedPlaceNavigationComponent = __decorate([
+            core.Component({
+                selector: 'aup-tabbed-place-navigation',
+                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [face]=\"getNavigationFace(placeDefinition)\"></aup-command-face>\n  </a>\n</nav>\n",
+                styles: [""]
+            }),
+            __metadata("design:paramtypes", [PlaceRouter])
+        ], TabbedPlaceNavigationComponent);
+        return TabbedPlaceNavigationComponent;
+    }(AbstractPlaceNavigationComponent));
+
     var PlaceModule = /** @class */ (function () {
         function PlaceModule() {
         }
@@ -6905,8 +8234,7 @@
             binding: null
         };
         var tag = tagPrefix + "(" + prototype.constructor.name + "." + propertyKey.toString() + ")";
-        pectin.DebugContext.get(mechanics.backingModel).tag(tag);
-        pectin.Logger.get(mechanics.backingModel).tag(tag);
+        pectin.DebugContext.getOrCreate(mechanics.backingModel).tag(tag);
         Object.defineProperty(prototype, propertyKey, {
             get: function () {
                 return mechanics.backingModel;
@@ -6977,6 +8305,7 @@
     exports.AddItemInteractionContextComponent = AddItemInteractionContextComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
+    exports.AutocompleteInputComponent = AutocompleteInputComponent;
     exports.BusyOverlayComponent = BusyOverlayComponent;
     exports.CELL_EDITOR_PORTAL = CELL_EDITOR_PORTAL;
     exports.CELL_RENDERER_PORTAL = CELL_RENDERER_PORTAL;
@@ -6988,7 +8317,13 @@
     exports.CheckboxInputComponent = CheckboxInputComponent;
     exports.ColumnModel = ColumnModel;
     exports.ColumnTemplateDirective = ColumnTemplateDirective;
+    exports.CommandComponent = CommandComponent;
     exports.CommandDirective = CommandDirective;
+    exports.CommandFaceComponent = CommandFaceComponent;
+    exports.CommandGroup = exports.ɵbo;
+    exports.CommandGroupComponent = CommandGroupComponent;
+    exports.CommandGroupMenuRendererComponent = CommandGroupMenuRendererComponent;
+    exports.CommandGroupRendererComponent = CommandGroupRendererComponent;
     exports.ComponentCellRendererPortalRef = ComponentCellRendererPortalRef;
     exports.ComponentsModule = ComponentsModule;
     exports.ConfirmThenDialogComponent = ConfirmThenDialogComponent;
@@ -7010,22 +8345,24 @@
     exports.EditorControlColumnModel = EditorControlColumnModel;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.EventCleanUpSession = EventCleanUpSession;
+    exports.FlexComponent = FlexComponent;
     exports.FocusBinding = FocusBinding;
     exports.FocusBindingDirective = FocusBindingDirective;
     exports.FocusBindingFactory = FocusBindingFactory;
     exports.FocusContainerComponent = FocusContainerComponent;
     exports.FocusableComponent = FocusableComponent;
     exports.HEADER_CELL_RENDERER_PORTAL = HEADER_CELL_RENDERER_PORTAL;
-    exports.IconComponent = IconComponent;
+    exports.IconComponent = exports.ɵbk;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵbv;
+    exports.InteractionService = exports.ɵci;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
     exports.ListPropertyColumnModel = ListPropertyColumnModel;
     exports.ModalInteractionContextFactory = ModalInteractionContextFactory;
+    exports.MoreMenuComponent = MoreMenuComponent;
     exports.MultipleSelectInputComponent = MultipleSelectInputComponent;
     exports.Navigating = Navigating;
     exports.NavigatingDuringInteraction = NavigatingDuringInteraction;
@@ -7040,7 +8377,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵby;
+    exports.PlaceHistory = exports.ɵcl;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -7048,6 +8385,7 @@
     exports.PopStateDuringInteractionNavigation = PopStateDuringInteractionNavigation;
     exports.PopStateNavigation = PopStateNavigation;
     exports.PopupInteractionContextComponent = PopupInteractionContextComponent;
+    exports.PopupMenuComponent = PopupMenuComponent;
     exports.PropertyColumnModel = PropertyColumnModel;
     exports.ROUTE_PARAMETER_LIST_KEY = ROUTE_PARAMETER_LIST_KEY;
     exports.RemoveLastInteractionFromUrlNavigationSession = RemoveLastInteractionFromUrlNavigationSession;
@@ -7060,6 +8398,7 @@
     exports.SelectInputActivity = SelectInputActivity;
     exports.SelectInputComponent = SelectInputComponent;
     exports.SelectionColumnModel = SelectionColumnModel;
+    exports.SeparatorComponent = SeparatorComponent;
     exports.SidePlaceNavigationComponent = SidePlaceNavigationComponent;
     exports.StringInputActivity = StringInputActivity;
     exports.StringInputComponent = StringInputComponent;
@@ -7073,8 +8412,10 @@
     exports.TableComponent = TableComponent;
     exports.TableHeaderCellRendererComponent = TableHeaderCellRendererComponent;
     exports.TableModel = TableModel;
+    exports.TableRowMenuComponent = TableRowMenuComponent;
     exports.TemplateCellRendererPortalRef = TemplateCellRendererPortalRef;
     exports.TextInputComponent = TextInputComponent;
+    exports.ToolBarComponent = ToolBarComponent;
     exports.UrlService = UrlService;
     exports.VerticalFocusContainerComponent = VerticalFocusContainerComponent;
     exports.Visit = Visit;
@@ -7090,51 +8431,62 @@
     exports.ɵ0 = ɵ0;
     exports.ɵa = DirectivesModule;
     exports.ɵb = CommandDirective;
-    exports.ɵba = EditRowControls;
-    exports.ɵbb = ColumnTemplateDirective;
-    exports.ɵbc = DefaultCellRendererComponent;
-    exports.ɵbd = TableCellRendererComponent;
-    exports.ɵbe = SelectCellRendererComponent;
-    exports.ɵbf = SelectHeaderCellRendererComponent;
-    exports.ɵbg = DefaultHeaderCellRendererComponent;
-    exports.ɵbh = TableHeaderCellRendererComponent;
-    exports.ɵbi = MultipleSelectInputComponent;
-    exports.ɵbj = IconComponent;
-    exports.ɵbk = SectionHeaderComponent;
-    exports.ɵbl = PlaceModule;
-    exports.ɵbm = ComponentsModule;
-    exports.ɵbn = EmptyStateComponent;
-    exports.ɵbo = BusyOverlayComponent;
-    exports.ɵbp = PlaceOutletComponent;
-    exports.ɵbq = leftRightPlaceAnimation;
-    exports.ɵbr = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵbs = AUP_PLACE_CONFIG;
-    exports.ɵbu = PlaceRouter;
-    exports.ɵbw = ModalInteractionContextFactory;
-    exports.ɵbx = UrlService;
-    exports.ɵbz = TabbedPlaceNavigationComponent;
+    exports.ɵba = CardContainerComponent;
+    exports.ɵbb = TableComponent;
+    exports.ɵbc = EditRowControls;
+    exports.ɵbd = ColumnTemplateDirective;
+    exports.ɵbe = DefaultCellRendererComponent;
+    exports.ɵbf = TableCellRendererComponent;
+    exports.ɵbg = SelectCellRendererComponent;
+    exports.ɵbh = SelectHeaderCellRendererComponent;
+    exports.ɵbi = DefaultHeaderCellRendererComponent;
+    exports.ɵbj = TableHeaderCellRendererComponent;
+    exports.ɵbl = SectionHeaderComponent;
+    exports.ɵbm = TableRowMenuComponent;
+    exports.ɵbn = ToolBarComponent;
+    exports.ɵbp = CommandComponent;
+    exports.ɵbq = PopupMenuComponent;
+    exports.ɵbr = CommandGroupComponent;
+    exports.ɵbs = CommandFaceComponent;
+    exports.ɵbt = MoreMenuComponent;
+    exports.ɵbu = SeparatorComponent;
+    exports.ɵbv = FlexComponent;
+    exports.ɵbw = CommandGroupMenuRendererComponent;
+    exports.ɵbx = CommandGroupRendererComponent;
+    exports.ɵby = PlaceModule;
+    exports.ɵbz = ComponentsModule;
     exports.ɵc = FocusBindingDirective;
-    exports.ɵca = AbstractPlaceNavigationComponent;
-    exports.ɵcb = ListPlaceNavComponent;
-    exports.ɵcc = SidePlaceNavigationComponent;
-    exports.ɵcd = InteractionModule;
-    exports.ɵce = ActivityContainerComponent;
-    exports.ɵcf = AbstractInteractionContext;
-    exports.ɵcg = ActivityOutletComponent;
-    exports.ɵch = ConfirmationDialogComponent;
-    exports.ɵci = ACTIVITY_DATA;
-    exports.ɵcj = Activity;
-    exports.ɵcl = ConfirmThenDialogComponent;
-    exports.ɵcm = AlertDialogComponent;
-    exports.ɵco = InPlaceInteractionContextComponent;
-    exports.ɵcp = AddItemInteractionContextComponent;
-    exports.ɵcq = ActivityActionsComponent;
-    exports.ɵcr = PopupInteractionContextComponent;
-    exports.ɵcs = StringInputActivity;
-    exports.ɵct = AbstractInputActivity;
-    exports.ɵcu = SelectInputActivity;
-    exports.ɵcv = InteractionContextTriggerFor;
+    exports.ɵca = EmptyStateComponent;
+    exports.ɵcb = BusyOverlayComponent;
+    exports.ɵcc = PlaceOutletComponent;
+    exports.ɵcd = leftRightPlaceAnimation;
+    exports.ɵce = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵcf = AUP_PLACE_CONFIG;
+    exports.ɵch = PlaceRouter;
+    exports.ɵcj = ModalInteractionContextFactory;
+    exports.ɵck = UrlService;
+    exports.ɵcm = TabbedPlaceNavigationComponent;
+    exports.ɵcn = AbstractPlaceNavigationComponent;
+    exports.ɵco = ListPlaceNavComponent;
+    exports.ɵcp = SidePlaceNavigationComponent;
+    exports.ɵcq = InteractionModule;
+    exports.ɵcr = ActivityContainerComponent;
+    exports.ɵcs = AbstractInteractionContext;
+    exports.ɵct = ActivityOutletComponent;
+    exports.ɵcu = ConfirmationDialogComponent;
+    exports.ɵcv = ACTIVITY_DATA;
+    exports.ɵcw = Activity;
+    exports.ɵcy = ConfirmThenDialogComponent;
+    exports.ɵcz = AlertDialogComponent;
     exports.ɵd = DisposableComponent;
+    exports.ɵdb = InPlaceInteractionContextComponent;
+    exports.ɵdc = AddItemInteractionContextComponent;
+    exports.ɵdd = ActivityActionsComponent;
+    exports.ɵde = PopupInteractionContextComponent;
+    exports.ɵdf = StringInputActivity;
+    exports.ɵdg = AbstractInputActivity;
+    exports.ɵdh = SelectInputActivity;
+    exports.ɵdi = InteractionContextTriggerFor;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;
     exports.ɵg = AbstractInputComponent;
@@ -7145,18 +8497,18 @@
     exports.ɵl = TextInputComponent;
     exports.ɵm = PasswordInputComponent;
     exports.ɵn = SelectInputComponent;
-    exports.ɵo = CheckboxInputComponent;
-    exports.ɵp = ScrollContainerComponent;
-    exports.ɵq = NoopComponent;
-    exports.ɵr = SwitchCaseOption;
-    exports.ɵs = SwitchCaseWhenDirective;
-    exports.ɵt = SwitchCaseDefaultDirective;
-    exports.ɵu = SwitchCaseComponent;
-    exports.ɵv = FocusContainerComponent;
-    exports.ɵw = VerticalFocusContainerComponent;
-    exports.ɵx = FocusableComponent;
-    exports.ɵy = CardContainerComponent;
-    exports.ɵz = TableComponent;
+    exports.ɵo = MultipleSelectInputComponent;
+    exports.ɵp = AutocompleteInputComponent;
+    exports.ɵq = CheckboxInputComponent;
+    exports.ɵr = ScrollContainerComponent;
+    exports.ɵs = NoopComponent;
+    exports.ɵt = SwitchCaseOption;
+    exports.ɵu = SwitchCaseWhenDirective;
+    exports.ɵv = SwitchCaseDefaultDirective;
+    exports.ɵw = SwitchCaseComponent;
+    exports.ɵx = FocusContainerComponent;
+    exports.ɵy = VerticalFocusContainerComponent;
+    exports.ɵz = FocusableComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });