@coolon/angular-ui-powerups 2.0.0-alpha.3 → 2.0.0-alpha.30

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

@@ -1,6 +1,6 @@
 import { __extends, __decorate, __metadata, __param, __assign, __awaiter, __generator, __spread } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, ContentChild, TemplateRef, Component, Self, HostBinding, EventEmitter, Output, ChangeDetectorRef, ContentChildren, QueryList, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, ViewChild, ViewChildren, Optional, SkipSelf } from '@angular/core';
+import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, ContentChild, TemplateRef, Component, forwardRef, Optional, HostBinding, ViewEncapsulation, EventEmitter, Output, ViewChild, ChangeDetectorRef, Self, ContentChildren, QueryList, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, ViewChildren, SkipSelf } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -9,18 +9,21 @@ import { MatTabsModule, MatTabGroup, MAT_TABS_CONFIG } from '@angular/material/t
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
+import { MatMenu, MatMenuTrigger, _MatMenuDirectivesModule, MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, FocusManager, Form, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, MutableListModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
-import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, MutableListModel, Disposable, MutableValueModel, StoreInValueModel, ListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, StoreInListModel, ValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import ___default, { isEqual, isNil } from 'lodash';
+import { Enum } from 'typescript-string-enums';
+import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
 import produce from 'immer';
-import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
@@ -406,13 +409,501 @@ var CardContainerComponent = /** @class */ (function (_super) {
         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-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;--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}.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));
 
+var CommandFace;
+(function (CommandFace) {
+    var Position;
+    (function (Position) {
+        Position["START"] = "start";
+        Position["END"] = "end";
+    })(Position = CommandFace.Position || (CommandFace.Position = {}));
+    var Adapter = /** @class */ (function () {
+        function Adapter(face) {
+            this.face = face;
+        }
+        Object.defineProperty(Adapter.prototype, "text", {
+            get: function () {
+                return ___default.isFunction(this.face.text) ? this.face.text() : undefined;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Adapter.prototype, "icon", {
+            get: function () {
+                return ___default.isFunction(this.face.icon) ? this.face.icon() : undefined;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Adapter.prototype, "iconPosition", {
+            get: function () {
+                return ___default.isFunction(this.face.iconPosition) ? this.face.iconPosition() : undefined;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Adapter.prototype, "tooltip", {
+            get: function () {
+                return ___default.isFunction(this.face.tooltip) ? this.face.tooltip() : undefined;
+            },
+            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, "destructive", {
+            get: function () {
+                return ___default.isFunction(this.face.destructive) ? this.face.destructive() : false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            Memoize(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [])
+        ], Adapter.prototype, "text", null);
+        __decorate([
+            Memoize(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [])
+        ], Adapter.prototype, "icon", null);
+        __decorate([
+            Memoize(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [])
+        ], Adapter.prototype, "iconPosition", null);
+        __decorate([
+            Memoize(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [])
+        ], Adapter.prototype, "tooltip", null);
+        __decorate([
+            Memoize(),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], Adapter.prototype, "iconPositionStart", null);
+        __decorate([
+            Memoize(),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], Adapter.prototype, "iconPositionEnd", null);
+        __decorate([
+            Memoize(),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], Adapter.prototype, "destructive", null);
+        return Adapter;
+    }());
+    CommandFace.Adapter = Adapter;
+})(CommandFace || (CommandFace = {}));
+
+var CommandContainer = /** @class */ (function (_super) {
+    __extends(CommandContainer, _super);
+    function CommandContainer() {
+        var _this = _super.call(this) || this;
+        _this._commandRegistrations = new MutableListModel();
+        return _this;
+    }
+    Object.defineProperty(CommandContainer.prototype, "commandRegistrations", {
+        get: function () {
+            return this._commandRegistrations.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    CommandContainer.prototype.registerCommand = function (command, face) {
+        var _this = this;
+        var registration = { command: command, faceAdapter: new CommandFace.Adapter(face) };
+        this._commandRegistrations.push(registration);
+        return Disposable.disposableThatRuns(function () { return _this._commandRegistrations.remove(registration); });
+    };
+    CommandContainer.prototype.getDefaultIconPosition = function () {
+        return CommandFace.Position.START;
+    };
+    return CommandContainer;
+}(GarbageCollector));
+
+/**
+ *
+ */
+var CommandBarComponent = /** @class */ (function (_super) {
+    __extends(CommandBarComponent, _super);
+    function CommandBarComponent() {
+        return _super.call(this) || this;
+    }
+    CommandBarComponent_1 = CommandBarComponent;
+    CommandBarComponent.prototype.ngOnInit = function () {
+    };
+    CommandBarComponent.prototype.getButtonColor = function (registration) {
+        return registration.faceAdapter.destructive ? 'warn' : undefined;
+    };
+    var CommandBarComponent_1;
+    CommandBarComponent = CommandBarComponent_1 = __decorate([
+        Component({
+            selector: 'aup-command-bar',
+            template: "\n    <ng-container *ngFor=\"let registration of commandRegistrations.value\">\n      <button *ngIf=\"registration.faceAdapter.icon && !registration.faceAdapter.text\"\n              mat-icon-button\n              [color]=\"getButtonColor(registration)\"\n              [pectinCommand]=\"registration.command\"\n              [matTooltip]=\"registration.faceAdapter.tooltip\"\n      >\n        <aup-command-face [face]=\"registration.faceAdapter.face\"></aup-command-face>\n      </button>\n      <button *ngIf=\"registration.faceAdapter.text\"\n              [color]=\"getButtonColor(registration)\"\n              mat-button\n              [pectinCommand]=\"registration.command\"\n              [matTooltip]=\"registration.tooltip\"\n      >\n        <aup-command-face [face]=\"registration.faceAdapter.face\"></aup-command-face>\n      </button>\n    </ng-container>\n  ",
+            providers: [{ provide: CommandContainer, useExisting: forwardRef(function () { return CommandBarComponent_1; }) }],
+            styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], CommandBarComponent);
+    return CommandBarComponent;
+}(CommandContainer));
+
+/**
+ *
+ */
+var CommandFaceComponent = /** @class */ (function (_super) {
+    __extends(CommandFaceComponent, _super);
+    function CommandFaceComponent(commandContainer) {
+        var _this = _super.call(this) || this;
+        _this.commandContainer = commandContainer;
+        _this.faceModel = new MutableValueModel();
+        _this.ignoreIcon = false;
+        _this.ignoreText = false;
+        _this.includeMissingIconInLayout = false;
+        var _a = 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 CommandFace.Adapter(face); });
+        _this.iconModel = faceAdapter.pluck('icon');
+        _this.textModel = faceAdapter.pluck('text');
+        _this.positionModel = faceAdapter.pluck('iconPosition');
+        _this.destructiveModel = faceAdapter.pluck('destructive');
+        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, _b, _c;
+            return (_c = (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : (_b = this.commandContainer) === null || _b === void 0 ? void 0 : _b.getDefaultIconPosition()) !== null && _c !== void 0 ? _c : 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 === CommandFace.Position.START;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CommandFaceComponent.prototype, "iconEnd", {
+        get: function () {
+            return this.shouldIncludeIcon && this.iconPosition === 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, "destructive", {
+        get: function () {
+            return this.destructiveModel.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    CommandFaceComponent.ctorParameters = function () { return [
+        { type: CommandContainer, decorators: [{ type: Optional }] }
+    ]; };
+    __decorate([
+        Input('face'), StoreInValueModel('faceModel'),
+        __metadata("design:type", Object)
+    ], CommandFaceComponent.prototype, "_rawFace", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], CommandFaceComponent.prototype, "ignoreIcon", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], CommandFaceComponent.prototype, "ignoreText", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], CommandFaceComponent.prototype, "includeMissingIconInLayout", void 0);
+    __decorate([
+        HostBinding('class.hide-icon'),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], CommandFaceComponent.prototype, "requiresMissingIconInLayout", null);
+    __decorate([
+        HostBinding('class.destructive'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], CommandFaceComponent.prototype, "destructive", null);
+    CommandFaceComponent = __decorate([
+        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: ViewEncapsulation.None,
+            styles: ["aup-command-face{--icon-gap:var(--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}"]
+        }),
+        __param(0, Optional()),
+        __metadata("design:paramtypes", [CommandContainer])
+    ], CommandFaceComponent);
+    return CommandFaceComponent;
+}(DisposableComponent));
+
+/**
+ *
+ */
+var CommandComponent = /** @class */ (function (_super) {
+    __extends(CommandComponent, _super);
+    function CommandComponent(commandContainer) {
+        var _this = _super.call(this) || this;
+        _this.commandContainer = commandContainer;
+        return _this;
+    }
+    CommandComponent.prototype.ngOnInit = function () {
+        this.registerDisposable(this.commandContainer.registerCommand(this.command, this.face));
+    };
+    CommandComponent.ctorParameters = function () { return [
+        { type: CommandContainer }
+    ]; };
+    __decorate([
+        Input(), TrackExternal(),
+        __metadata("design:type", Command)
+    ], CommandComponent.prototype, "command", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], CommandComponent.prototype, "face", void 0);
+    CommandComponent = __decorate([
+        Component({
+            selector: 'aup-command',
+            template: ""
+        }),
+        __metadata("design:paramtypes", [CommandContainer])
+    ], CommandComponent);
+    return CommandComponent;
+}(DisposableComponent));
+
+/**
+ *
+ */
+var PopupMenuRendererComponent = /** @class */ (function (_super) {
+    __extends(PopupMenuRendererComponent, _super);
+    function PopupMenuRendererComponent() {
+        var _this = _super.call(this) || this;
+        _this.xPosition = 'after';
+        _this.yPosition = 'below';
+        _this.commandExecuted = new EventEmitter();
+        var _a = 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 registrations = chain(_this.commandRegistrations);
+        var iconCount = registrations.select(function (r) { return !!r.faceAdapter.icon; }).count();
+        _this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), iconCount.doesNotEqual(registrations.length)).areTruthy();
+        return _this;
+    }
+    PopupMenuRendererComponent.prototype.ngOnInit = function () {
+    };
+    PopupMenuRendererComponent.prototype.getPopupMenuCommandFor = function (item) {
+        var _this = this;
+        var when = Dsl.disposeWith(this).when;
+        when(item.command.busy).becomesFalsey(function () {
+            _this.commandExecuted.emit();
+        });
+        return item.command;
+    };
+    PopupMenuRendererComponent.prototype.getButtonColor = function (registration) {
+        return registration.faceAdapter.destructive ? 'warn' : undefined;
+    };
+    __decorate([
+        Input(), TrackExternal(),
+        __metadata("design:type", ListModel)
+    ], PopupMenuRendererComponent.prototype, "commandRegistrations", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], PopupMenuRendererComponent.prototype, "xPosition", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], PopupMenuRendererComponent.prototype, "yPosition", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], PopupMenuRendererComponent.prototype, "commandExecuted", void 0);
+    __decorate([
+        ViewChild(MatMenu),
+        __metadata("design:type", MatMenu)
+    ], PopupMenuRendererComponent.prototype, "matMenu", void 0);
+    PopupMenuRendererComponent = __decorate([
+        Component({
+            selector: 'aup-popup-menu-renderer',
+            template: "<mat-menu [xPosition]=\"xPosition\" [yPosition]=\"yPosition\" >\n  <button *ngFor=\"let registration of commandRegistrations.value\"\n          mat-menu-item\n          [pectinCommand]=\"getPopupMenuCommandFor(registration)\"\n  >\n    <aup-command-face [face]=\"registration.faceAdapter.face\" [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n  </button>\n</mat-menu>\n",
+            styles: [":host{display:inline-flex;flex-direction:row;align-items:center}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], PopupMenuRendererComponent);
+    return PopupMenuRendererComponent;
+}(DisposableComponent));
+
+/**
+ *
+ */
+var AbstractPopupMenuComponent = /** @class */ (function (_super) {
+    __extends(AbstractPopupMenuComponent, _super);
+    function AbstractPopupMenuComponent(cdr) {
+        var _this = _super.call(this) || this;
+        _this.cdr = cdr;
+        _this.xPosition = 'after';
+        _this.yPosition = 'below';
+        return _this;
+    }
+    AbstractPopupMenuComponent.prototype.ngAfterViewInit = function () {
+        this.cdr.detectChanges();
+    };
+    Object.defineProperty(AbstractPopupMenuComponent.prototype, "matMenuComponent", {
+        get: function () {
+            var _a;
+            return (_a = this.popupMenu) === null || _a === void 0 ? void 0 : _a.matMenu;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    AbstractPopupMenuComponent.prototype.closeMenu = function () {
+        this.menuTrigger.closeMenu();
+    };
+    AbstractPopupMenuComponent.prototype.getButtonColor = function (registration) {
+        return registration.faceAdapter.destructive ? 'warn' : undefined;
+    };
+    AbstractPopupMenuComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef }
+    ]; };
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], AbstractPopupMenuComponent.prototype, "xPosition", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], AbstractPopupMenuComponent.prototype, "yPosition", void 0);
+    __decorate([
+        ViewChild(PopupMenuRendererComponent),
+        __metadata("design:type", PopupMenuRendererComponent)
+    ], AbstractPopupMenuComponent.prototype, "popupMenu", void 0);
+    __decorate([
+        ViewChild(MatMenuTrigger),
+        __metadata("design:type", MatMenuTrigger)
+    ], AbstractPopupMenuComponent.prototype, "menuTrigger", void 0);
+    AbstractPopupMenuComponent = __decorate([
+        Component({
+            selector: 'aup-abstract-popup-menu',
+            template: ''
+        }),
+        __metadata("design:paramtypes", [ChangeDetectorRef])
+    ], AbstractPopupMenuComponent);
+    return AbstractPopupMenuComponent;
+}(CommandContainer));
+
+/**
+ *
+ */
+var PopupMenuComponent = /** @class */ (function (_super) {
+    __extends(PopupMenuComponent, _super);
+    function PopupMenuComponent(cdr) {
+        var _this = _super.call(this, cdr) || this;
+        _this.faceModel = new MutableValueModel();
+        var _a = 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 faceAdapterModel = chain(_this.faceModel).map(function (face) { return new CommandFace.Adapter(face); });
+        _this.faceTooltipModel = faceAdapterModel.pluck('tooltip');
+        return _this;
+    }
+    PopupMenuComponent_1 = PopupMenuComponent;
+    PopupMenuComponent.prototype.getTooltip = function () {
+        return this.faceTooltipModel.value;
+    };
+    PopupMenuComponent.prototype.ngOnInit = function () {
+    };
+    var PopupMenuComponent_1;
+    PopupMenuComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef }
+    ]; };
+    __decorate([
+        Input(), StoreInValueModel('faceModel'),
+        __metadata("design:type", Object)
+    ], PopupMenuComponent.prototype, "face", void 0);
+    PopupMenuComponent = PopupMenuComponent_1 = __decorate([
+        Component({
+            selector: 'aup-popup-menu',
+            template: "\n    <!-- we can only render the button after th popup menu has initialised and rendered it's menu component -->\n    <button *ngIf=\"matMenuComponent\" mat-icon-button [matMenuTriggerFor]=\"matMenuComponent\" [matTooltip]=\"getTooltip()\">\n      <aup-command-face [face]=\"face\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer [commandRegistrations]=\"commandRegistrations\" [yPosition]=\"yPosition\"\n                             [xPosition]=\"xPosition\"\n                             (commandExecuted)=\"closeMenu()\"></aup-popup-menu-renderer>\n  ",
+            providers: [{ provide: CommandContainer, useExisting: forwardRef(function () { return PopupMenuComponent_1; }) }]
+        }),
+        __metadata("design:paramtypes", [ChangeDetectorRef])
+    ], PopupMenuComponent);
+    return PopupMenuComponent;
+}(AbstractPopupMenuComponent));
+
+/**
+ *
+ */
+var MoreMenuComponent = /** @class */ (function (_super) {
+    __extends(MoreMenuComponent, _super);
+    function MoreMenuComponent(cdr) {
+        var _this = _super.call(this, cdr) || this;
+        _this.xPosition = "before"; // this should be the default unless overriden by the user.
+        return _this;
+    }
+    MoreMenuComponent_1 = MoreMenuComponent;
+    var MoreMenuComponent_1;
+    MoreMenuComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef }
+    ]; };
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], MoreMenuComponent.prototype, "tooltip", void 0);
+    MoreMenuComponent = MoreMenuComponent_1 = __decorate([
+        Component({
+            selector: 'aup-more-menu',
+            template: "\n    <!-- we can only render the button after th popup menu has initialised and rendered it's menu component -->\n    <button *ngIf=\"matMenuComponent\" mat-icon-button [matMenuTriggerFor]=\"matMenuComponent\" [matTooltip]=\"tooltip\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <aup-popup-menu-renderer [commandRegistrations]=\"commandRegistrations\"\n                             [xPosition]=\"xPosition\"\n                             [yPosition]=\"yPosition\"\n                             (commandExecuted)=\"closeMenu()\"></aup-popup-menu-renderer>\n  ",
+            providers: [{ provide: CommandContainer, useExisting: forwardRef(function () { return MoreMenuComponent_1; }) }]
+        }),
+        __metadata("design:paramtypes", [ChangeDetectorRef])
+    ], MoreMenuComponent);
+    return MoreMenuComponent;
+}(AbstractPopupMenuComponent));
+
 var FocusContainerComponent = /** @class */ (function (_super) {
     __extends(FocusContainerComponent, _super);
     function FocusContainerComponent(focusManager) {
@@ -521,6 +1012,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     __extends(AbstractInputComponent, _super);
     function AbstractInputComponent() {
         var _this = _super.call(this) || this;
+        _this.onValueEditedListeners = new EventListenerList();
         _this.dense = false;
         // TODO: fix this.
         // tslint:disable-next-line:no-output-native
@@ -571,7 +1063,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
         get: function () {
-            return this.inputModel.enabled;
+            return this.formValueModel.enabled;
         },
         enumerable: true,
         configurable: true
@@ -581,7 +1073,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
         get: function () {
-            return this.inputModel.errorList;
+            return this.formValueModel.errorList;
         },
         enumerable: true,
         configurable: true
@@ -595,7 +1087,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     });
     Object.defineProperty(AbstractInputComponent.prototype, "focusContext", {
         get: function () {
-            return this.inputModel.focusContext;
+            return this.formValueModel.focusContext;
         },
         enumerable: true,
         configurable: true
@@ -614,6 +1106,13 @@ var AbstractInputComponent = /** @class */ (function (_super) {
         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([
         Input(),
         __metadata("design:type", String)
@@ -703,7 +1202,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
 var AbstractListInputComponent = /** @class */ (function (_super) {
     __extends(AbstractListInputComponent, _super);
     function AbstractListInputComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super.call(this) || this;
         /**
          * A backing model for all our @Input() valueModel properties which should be defined as follows.
          *
@@ -715,11 +1214,61 @@ var AbstractListInputComponent = /** @class */ (function (_super) {
          * 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 Form.DelegatingListModel());
+        _this.formValueModel = _this.registerDisposable(new Form.DelegatingListModel());
+        _this.componentListModel = new MutableListModel();
+        _this.setValueIsInProgress = new Guard();
+        _this.valueChange = new EventEmitter();
+        var _a = Dsl.disposeWith(_this), when = _a.when, valueOf = _a.valueOf, chain = _a.chain;
+        var binding = new Binding.Identity(_this.formValueModel, _this.componentListModel).writeRight();
+        var inExternalChange = valueOf.any(_this.setValueIsInProgress, chain(binding.direction).equals(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',
+            // 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
+        });
+        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;
+            this.setValueIsInProgress.whileTrue(function () {
+                if (!_this.listHolder) {
+                    _this.listHolder = new MutableListModel(value);
+                    _this.listModel = _this.listHolder;
+                }
+                else {
+                    _this.listHolder.value = value;
+                }
+            });
+        },
+        enumerable: true,
+        configurable: true
+    });
+    __decorate([
+        Input(), TrackExternal({ delegateTo: 'formValueModel' }),
+        __metadata("design:type", Object)
+    ], AbstractListInputComponent.prototype, "listModel", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array),
+        __metadata("design:paramtypes", [Array])
+    ], AbstractListInputComponent.prototype, "value", null);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], AbstractListInputComponent.prototype, "valueChange", void 0);
     AbstractListInputComponent = __decorate([
-        Component({ template: '' })
+        Component({ template: '' }),
+        __metadata("design:paramtypes", [])
     ], AbstractListInputComponent);
     return AbstractListInputComponent;
 }(AbstractInputComponent));
@@ -739,9 +1288,58 @@ var AbstractValueInputComponent = /** @class */ (function (_super) {
          * 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 Form.DelegatingValueModel());
+        _this.formValueModel = _this.registerDisposable(new Form.DelegatingValueModel());
+        _this.setValueInProgress = new Guard();
+        _this.componentValueModel = new MutableValueModel();
+        _this.valueChange = new EventEmitter();
+        var _a = Dsl.disposeWith(_this), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
+        var binding = new Binding.Identity(_this.formValueModel, _this.componentValueModel).writeRight();
+        var inExternalChange = valueOf.any(_this.setValueInProgress, chain(binding.direction).equals(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
+        });
+        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;
+            this.setValueInProgress.whileTrue(function () {
+                if (!_this.plainValueHolder) {
+                    _this.plainValueHolder = new MutableValueModel(value);
+                    _this.valueModel = _this.plainValueHolder;
+                }
+                else {
+                    _this.plainValueHolder.value = value;
+                }
+            });
+        },
+        enumerable: true,
+        configurable: true
+    });
+    __decorate([
+        Input(), TrackExternal({ delegateTo: 'formValueModel' }),
+        __metadata("design:type", Object)
+    ], AbstractValueInputComponent.prototype, "valueModel", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], AbstractValueInputComponent.prototype, "value", null);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], AbstractValueInputComponent.prototype, "valueChange", void 0);
     AbstractValueInputComponent = __decorate([
         Component({ template: '' }),
         __metadata("design:paramtypes", [])
@@ -749,20 +1347,85 @@ var AbstractValueInputComponent = /** @class */ (function (_super) {
     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 MutableValueModel();
+        _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
+        var _a = 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.isString(v) ? v.toLowerCase() : ''; });
+        _this.filteredOptions = chain(_this.optionsModel)
+            .select(function (option) {
+            return ___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([
+        Input(), TrackExternal(),
+        __metadata("design:type", ListModel)
+    ], AutocompleteInputComponent.prototype, "optionsModel", void 0);
+    __decorate([
+        Input(), StoreInListModel('optionsModel'),
+        __metadata("design:type", Array)
+    ], AutocompleteInputComponent.prototype, "options", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], AutocompleteInputComponent.prototype, "optionLabel", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], AutocompleteInputComponent.prototype, "allowNil", void 0);
+    __decorate([
+        ContentChild('nilOptionTemplate'),
+        __metadata("design:type", TemplateRef)
+    ], AutocompleteInputComponent.prototype, "nilOptionTemplateRef", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], AutocompleteInputComponent.prototype, "optionLabelFormat", void 0);
+    AutocompleteInputComponent = __decorate([
+        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", [])
+    ], AutocompleteInputComponent);
+    return AutocompleteInputComponent;
+}(AbstractValueInputComponent));
+
 var CheckboxInputComponent = /** @class */ (function (_super) {
     __extends(CheckboxInputComponent, _super);
     function CheckboxInputComponent() {
         var _this = _super.call(this) || this;
+        // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+        // valueModel: Form.ValueModelBase<boolean> | IMutableValueModel<boolean>;
         _this.color = 'accent';
         _this.labelPosition = 'after';
         return _this;
     }
     CheckboxInputComponent.prototype.ngOnInit = function () {
     };
-    __decorate([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
-        __metadata("design:type", Object)
-    ], CheckboxInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -774,7 +1437,7 @@ var CheckboxInputComponent = /** @class */ (function (_super) {
     CheckboxInputComponent = __decorate([
         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", [])
@@ -782,20 +1445,65 @@ var CheckboxInputComponent = /** @class */ (function (_super) {
     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([
+        Input(), TrackExternal(),
+        __metadata("design:type", ListModel)
+    ], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
+    __decorate([
+        Input(), StoreInListModel('optionsModel'),
+        __metadata("design:type", Array)
+    ], MultipleSelectInputComponent.prototype, "options", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
+    __decorate([
+        ContentChild('optionTemplate'),
+        __metadata("design:type", TemplateRef)
+    ], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
+    MultipleSelectInputComponent = __decorate([
+        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() {
         var _this = _super.call(this) || this;
+        // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+        // valueModel: Form.ValueModelBase<number> | IMutableValueModel<number>;
         _this.min = Number.MIN_SAFE_INTEGER;
         _this.max = Number.MAX_SAFE_INTEGER;
         return _this;
     }
     NumberInputComponent.prototype.ngOnInit = function () {
     };
-    __decorate([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
-        __metadata("design:type", Object)
-    ], NumberInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -807,7 +1515,7 @@ var NumberInputComponent = /** @class */ (function (_super) {
     NumberInputComponent = __decorate([
         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", [])
@@ -817,19 +1525,17 @@ var NumberInputComponent = /** @class */ (function (_super) {
 
 var PasswordInputComponent = /** @class */ (function (_super) {
     __extends(PasswordInputComponent, _super);
+    // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+    // valueModel: Form.ValueModelBase<string> | IMutableValueModel<string>;
     function PasswordInputComponent() {
         return _super.call(this) || this;
     }
     PasswordInputComponent.prototype.ngOnInit = function () {
     };
-    __decorate([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
-        __metadata("design:type", Object)
-    ], PasswordInputComponent.prototype, "valueModel", void 0);
     PasswordInputComponent = __decorate([
         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", [])
@@ -841,6 +1547,7 @@ var PasswordInputComponent = /** @class */ (function (_super) {
  * 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) {
@@ -852,10 +1559,6 @@ var SelectInputComponent = /** @class */ (function (_super) {
     }
     SelectInputComponent.prototype.ngOnInit = function () {
     };
-    __decorate([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
-        __metadata("design:type", Object)
-    ], SelectInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(), TrackExternal(),
         __metadata("design:type", ListModel)
@@ -887,7 +1590,7 @@ var SelectInputComponent = /** @class */ (function (_super) {
     SelectInputComponent = __decorate([
         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", [])
@@ -901,17 +1604,13 @@ var StringInputComponent = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         var _a = 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 = 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 () {
     };
-    __decorate([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
-        __metadata("design:type", Object)
-    ], StringInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(), TrackExternal({ defaultValue: false }),
         __metadata("design:type", ValueModel)
@@ -923,7 +1622,7 @@ var StringInputComponent = /** @class */ (function (_super) {
     StringInputComponent = __decorate([
         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", [])
@@ -935,16 +1634,14 @@ var TextInputComponent = /** @class */ (function (_super) {
     __extends(TextInputComponent, _super);
     function TextInputComponent() {
         var _this = _super.call(this) || this;
+        // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+        // valueModel: Form.ValueModelBase<string> | IMutableValueModel<string>;
         _this.rows = 2;
         return _this;
         // const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
     }
     TextInputComponent.prototype.ngOnInit = function () {
     };
-    __decorate([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
-        __metadata("design:type", Object)
-    ], TextInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -956,7 +1653,7 @@ var TextInputComponent = /** @class */ (function (_super) {
     TextInputComponent = __decorate([
         Component({
             selector: 'aup-text-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"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", [])
@@ -964,6 +1661,59 @@ var TextInputComponent = /** @class */ (function (_super) {
     return TextInputComponent;
 }(AbstractValueInputComponent));
 
+var IconComponent = /** @class */ (function () {
+    function IconComponent() {
+        this.allowedPrefixes = 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([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], IconComponent.prototype, "icon", null);
+    IconComponent = IconComponent_1 = __decorate([
+        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 = Enum({
+        SVG: 'svg',
+        FONT_AWESOME: 'fa',
+        MATERIAL: 'mat'
+    });
+})(IconComponent || (IconComponent = {}));
+
 var NoopComponent = /** @class */ (function () {
     function NoopComponent() {
     }
@@ -1174,6 +1924,7 @@ var CellHeaderPortalRef = /** @class */ (function (_super) {
         assert$1.isTruthy(host);
         host[HEADER_CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
     };
+    // @Trace()
     CellHeaderPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
         this.initialiseHeader(portalComponent, host.column);
     };
@@ -1197,13 +1948,15 @@ var ComponentCellRendererPortalRef = /** @class */ (function (_super) {
     ComponentCellRendererPortalRef.prototype.initialiseHost = function (host, columnModel) {
         host[CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
     };
+    // @Trace()
     ComponentCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
         host[PORTAL_RENDERER_COMPONENT] = portalComponent;
-        this.updateComponent(portalComponent, host.getRowData());
+        this.updateComponent(portalComponent, host.getRowData(), true);
     };
+    // @Trace()
     ComponentCellRendererPortalRef.prototype.pushState = function (host) {
         if (host[PORTAL_RENDERER_COMPONENT]) {
-            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
+            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData(), false);
         }
     };
     return ComponentCellRendererPortalRef;
@@ -1245,6 +1998,7 @@ var TemplateCellRendererPortalRef = /** @class */ (function (_super) {
     TemplateCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
         //  don't care
     };
+    // @Trace()
     TemplateCellRendererPortalRef.prototype.pushState = function (host) {
         host[CELL_RENDERER_PORTAL] = this.createPortal(host.getRowData());
         host.fillCell = this.fillCell;
@@ -1436,6 +2190,7 @@ var SelectHeaderCellRendererComponent = /** @class */ (function (_super) {
 var noop = function () {
 };
 var ɵ0 = 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;
@@ -1526,24 +2281,66 @@ var ColumnModel = /** @class */ (function () {
 }());
 var PropertyColumnModel = /** @class */ (function (_super) {
     __extends(PropertyColumnModel, _super);
-    function PropertyColumnModel(property, defaults) {
-        var _this = _super.call(this, property.toString(), defaults) || this;
+    function PropertyColumnModel(id, property, defaults) {
+        var _this = _super.call(this, id, defaults) || this;
         _this.property = property;
         _this._format = function (value) { return value; };
         _this.cellRenderer(DefaultCellRendererComponent);
         return _this;
     }
-    PropertyColumnModel.prototype.cellRenderer = function (componentType) {
+    PropertyColumnModel.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.isFunction(onComponentInitOrOptions)) {
+                    onComponentInitOrOptions(component);
+                }
+                else {
+                    if (___default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
+                        onComponentInitOrOptions.onComponentInit(component);
+                    }
+                }
+            }
             component.value = _this._format(rowData.row[_this.property]);
+            if (!___default.isFunction(onComponentInitOrOptions) && ___default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
+                onComponentInitOrOptions.onRowUpdate(component, rowData.row);
+            }
+        }));
+        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.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.isFunction(options) && ___default.isFunction(options === null || options === void 0 ? void 0 : options.onRowUpdate)) {
+                options.onRowUpdate(component, rowData.row);
+            }
         }));
         return this;
     };
-    PropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, initialiseComponent) {
+    PropertyColumnModel.prototype.cellEditor = function (editor, validatorsOrInitialiser, onComponentInit) {
         var _this = this;
         var validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
-        var initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
+        var initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
         this.configureCellEditor(new CellEditorPortalRef(editor, function (component, editSession) {
             var formValueModel = editSession.form.pluck(_this.property);
             if (validators) {
@@ -1568,8 +2365,8 @@ var PropertyColumnModel = /** @class */ (function (_super) {
 }(ColumnModel));
 var ListPropertyColumnModel = /** @class */ (function (_super) {
     __extends(ListPropertyColumnModel, _super);
-    function ListPropertyColumnModel(property, defaults) {
-        var _this = _super.call(this, property.toString(), defaults) || this;
+    function ListPropertyColumnModel(id, property, defaults) {
+        var _this = _super.call(this, id, defaults) || this;
         _this.property = property;
         _this._format = function (value) { return value.map(function (v) { return v === null || v === void 0 ? void 0 : v.toString(); }).join(', '); };
         _this.cellRenderer(DefaultCellRendererComponent);
@@ -1616,10 +2413,23 @@ var CustomValueColumnModel = /** @class */ (function (_super) {
         _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.isFunction(onComponentInitOrOptions)) {
+                    onComponentInitOrOptions(component);
+                }
+                else {
+                    if (___default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
+                        onComponentInitOrOptions.onComponentInit(component);
+                    }
+                }
+            }
             component.value = _this.getValue(rowData.row);
+            if (!___default.isFunction(onComponentInitOrOptions) && ___default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
+                onComponentInitOrOptions.onRowUpdate(component, rowData.row);
+            }
         }));
         return this;
     };
@@ -1792,6 +2602,9 @@ var TableModel = /** @class */ (function () {
         this._editorSessions = new MutableListModel();
         this.rowClassNamePredicates = [];
         this._createForm = function (row) { return new DirtyTrackingForm(); };
+        this.trackBy = function (index, item) {
+            return _this.identityOf ? _this.identityOf(item) : index;
+        };
         this.identityOf = sourceOfTruth.identityOf;
         var _a = 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');
@@ -1803,7 +2616,7 @@ var TableModel = /** @class */ (function () {
         this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
         this.firstEditableColumn = chain(this.columns).select(function (c) { return c.hasEditorPortal(); }).first();
         this.hasColumnsWithRowSelectionExplicitlyEnabled = chain(this._columns).findIndex(function (column) { return column.isRowSelectionExplicitlyEnabled(); }).isGreaterThanOrEqualTo(0);
-        this.addRowClass("enable-hover", function () { return _this.isRowSelectionEnabled(); });
+        this.addRowClass('enable-hover', function () { return _this.isRowSelectionEnabled(); });
     }
     TableModel_1 = TableModel;
     TableModel.fromList = function (sourceOfTruth, builder) {
@@ -1818,12 +2631,6 @@ var TableModel = /** @class */ (function () {
         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;
@@ -1831,11 +2638,11 @@ var TableModel = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    TableModel.prototype.pluck = function (property) {
-        return this.addColumn(new PropertyColumnModel(property, this));
+    TableModel.prototype.pluck = function (property, options) {
+        return this.addColumn(new PropertyColumnModel((options === null || options === void 0 ? void 0 : options.columnId) || property.toString(), property, this));
     };
-    TableModel.prototype.pluckList = function (property) {
-        return this.addColumn(new ListPropertyColumnModel(property, this));
+    TableModel.prototype.pluckList = function (property, options) {
+        return this.addColumn(new ListPropertyColumnModel((options === null || options === void 0 ? void 0 : options.columnId) || property.toString(), property, this));
     };
     TableModel.prototype.addSelectionColumn = function (selectionModel) {
         assert.isNil(this.selectionColumnModel);
@@ -1849,6 +2656,9 @@ var TableModel = /** @class */ (function () {
     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));
     };
@@ -2000,7 +2810,7 @@ var TableComponent = /** @class */ (function (_super) {
     TableComponent = __decorate([
         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", [])
@@ -2183,6 +2993,65 @@ var TableHeaderCellRendererComponent = /** @class */ (function () {
     return TableHeaderCellRendererComponent;
 }());
 
+var MenuItemData = /** @class */ (function (_super) {
+    __extends(MenuItemData, _super);
+    function MenuItemData(factory, face) {
+        var _this = _super.call(this, face) || this;
+        _this.factory = factory;
+        return _this;
+    }
+    return MenuItemData;
+}(CommandFace.Adapter));
+/**
+ *
+ */
+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 = 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([
+        Input(),
+        __metadata("design:type", Object)
+    ], TableRowMenuComponent.prototype, "value", void 0);
+    __decorate([
+        ViewChild(MatMenuTrigger),
+        __metadata("design:type", MatMenuTrigger)
+    ], TableRowMenuComponent.prototype, "menu", void 0);
+    TableRowMenuComponent = __decorate([
+        Component({
+            selector: 'aup-table-row-menu',
+            template: "\n    <button mat-icon-button *ngFor=\"let action of actions\" [pectinCommand]=\"action.factory.create(value)\">\n      <aup-icon [icon]=\"action.icon\"></aup-icon>\n    </button>\n    <ng-container *ngIf=\"moreActions.length > 0\">\n      <button #trigger mat-icon-button [matMenuTriggerFor]=\"menu\">\n        <aup-icon icon=\"mat:more_vert\"></aup-icon>\n      </button>\n      <mat-menu #menu=\"matMenu\" xPosition=\"before\" matTooltip=\"More options...\">\n        <button *ngFor=\"let action of moreActions\"\n                mat-menu-item\n                [pectinCommand]=\"createMoreMenuCommand(action, value)\"\n        >\n          <aup-icon *ngIf=\"action.icon && action.iconPositionStart\" [icon]=\"action.icon\"></aup-icon>\n          {{action.text}}\n          <aup-icon *ngIf=\"action.icon && action.iconPositionEnd\" [icon]=\"action.icon\"></aup-icon>\n        </button>\n      </mat-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) {
@@ -2268,100 +3137,6 @@ var VerticalFocusContainerComponent = /** @class */ (function (_super) {
     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([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
-        __metadata("design:type", Object)
-    ], MultipleSelectInputComponent.prototype, "listModel", void 0);
-    __decorate([
-        Input(), TrackExternal(),
-        __metadata("design:type", ListModel)
-    ], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
-    __decorate([
-        Input(), StoreInListModel('optionsModel'),
-        __metadata("design:type", Array)
-    ], MultipleSelectInputComponent.prototype, "options", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], MultipleSelectInputComponent.prototype, "allowNil", void 0);
-    __decorate([
-        ContentChild('optionTemplate'),
-        __metadata("design:type", TemplateRef)
-    ], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
-    __decorate([
-        ContentChild('nilOptionTemplate'),
-        __metadata("design:type", TemplateRef)
-    ], MultipleSelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
-    MultipleSelectInputComponent = __decorate([
-        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([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], IconComponent.prototype, "icon", null);
-    IconComponent = __decorate([
-        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;
-}());
-
 var ComponentsModule = /** @class */ (function () {
     function ComponentsModule(faIconLibrary) {
         faIconLibrary.addIconPacks(fas);
@@ -2380,6 +3155,8 @@ var ComponentsModule = /** @class */ (function () {
                 TextInputComponent,
                 PasswordInputComponent,
                 SelectInputComponent,
+                MultipleSelectInputComponent,
+                AutocompleteInputComponent,
                 CheckboxInputComponent,
                 ScrollContainerComponent,
                 NoopComponent,
@@ -2399,9 +3176,16 @@ var ComponentsModule = /** @class */ (function () {
                 SelectHeaderCellRendererComponent,
                 DefaultHeaderCellRendererComponent,
                 TableHeaderCellRendererComponent,
-                MultipleSelectInputComponent,
                 IconComponent,
-                SectionHeaderComponent
+                SectionHeaderComponent,
+                TableRowMenuComponent,
+                CommandBarComponent,
+                CommandComponent,
+                PopupMenuComponent,
+                CommandFaceComponent,
+                AbstractPopupMenuComponent,
+                PopupMenuRendererComponent,
+                MoreMenuComponent
             ],
             imports: [
                 CommonModule,
@@ -2419,7 +3203,10 @@ var ComponentsModule = /** @class */ (function () {
                 PortalModule,
                 CdkScrollableModule,
                 FontAwesomeModule,
-                MatTooltipModule
+                MatTooltipModule,
+                MatAutocompleteModule,
+                _MatMenuDirectivesModule,
+                MatMenuModule
             ],
             exports: [
                 NumberInputComponent,
@@ -2428,6 +3215,8 @@ var ComponentsModule = /** @class */ (function () {
                 PasswordInputComponent,
                 CheckboxInputComponent,
                 SelectInputComponent,
+                MultipleSelectInputComponent,
+                AutocompleteInputComponent,
                 ScrollContainerComponent,
                 NoopComponent,
                 SwitchCaseComponent,
@@ -2440,12 +3229,31 @@ var ComponentsModule = /** @class */ (function () {
                 TableComponent,
                 EditRowControls,
                 ColumnTemplateDirective,
-                MultipleSelectInputComponent,
                 IconComponent,
-                SectionHeaderComponent
+                SectionHeaderComponent,
+                TableRowMenuComponent,
+                CommandBarComponent,
+                CommandComponent,
+                AbstractPopupMenuComponent,
+                PopupMenuComponent,
+                CommandFaceComponent,
+                PopupMenuRendererComponent,
+                MoreMenuComponent
             ],
             providers: [
-                FocusBindingFactory,
+                FocusBindingFactory
+                // {
+                //   provide: CELL_EDITOR_REGISTRATION, useValue: {
+                //     type: 'string',
+                //     editorClass: StringInputComponent
+                //   }, multi: true
+                // },
+                // {
+                //   provide: CELL_EDITOR_REGISTRATION, useValue: {
+                //     type: 'number',
+                //     editorClass: NumberInputComponent
+                //   }, multi: true
+                // }
             ]
         }),
         __metadata("design:paramtypes", [FaIconLibrary])
@@ -2782,7 +3590,7 @@ var ActivityOutletComponent = /** @class */ (function () {
         },
         set: function (activityRef) {
             if (this.activityRef && !this.activityRef.isComplete()) {
-                lang$1.illegalState("changing activity before previous one has completed");
+                lang$1.illegalState('changing activity before previous one has completed');
             }
             this._activityRef = activityRef;
             this.loadActivity(activityRef);
@@ -2847,6 +3655,11 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         _this.dynamicHeight = false;
         _this.activityTabs = [];
         _this.garbage = new GarbageCollector();
+        // We have issues where angular is triggering a leave animation when an
+        // activity is replaced by another, but is not running the enter animation
+        // when it is scrolled back into view.  So we track the tab changes and
+        // disable all animations inside the tab while we're animating.
+        _this.inTabChange = new MutableValueModel(false);
         return _this;
     }
     ActivityContainerComponent.prototype.ngOnInit = function () {
@@ -2884,6 +3697,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     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.
@@ -2990,6 +3804,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
             this.onAnimationFinishedJob();
             this.onAnimationFinishedJob = undefined;
         }
+        this.inTabChange.value = false;
     };
     /**
      * Synchronises the selected tab index.
@@ -2999,6 +3814,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         var previousIndex = this.tabs.selectedIndex;
         var newIndex = this.getActiveActivityCount() - 1;
         if (previousIndex !== newIndex) {
+            this.inTabChange.value = true;
             this.tabs.selectedIndex = newIndex;
             this.onAnimationFinishedJob = function () {
                 _this.getSelectedOutlet().component.onActivityReady();
@@ -3009,7 +3825,9 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     ActivityContainerComponent.prototype.getSelectedOutlet = function () {
         return this.activityOutlets.toArray()[this.tabs.selectedIndex];
     };
-    // @Trace()
+    ActivityContainerComponent.prototype.getSelectedTabIndex = function () {
+        return this.tabs.selectedIndex;
+    };
     ActivityContainerComponent.prototype.triggerTabSynchronisation = function () {
         var _this = this;
         if (this.syncSelectedTabTimeout) {
@@ -3037,11 +3855,29 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         __metadata("design:type", Function),
         __metadata("design:paramtypes", []),
         __metadata("design:returntype", void 0)
-    ], ActivityContainerComponent.prototype, "dispose", null);
+    ], ActivityContainerComponent.prototype, "onAnimationFinished", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ActivityContainerComponent.prototype, "synchroniseSelectedTabIndex", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ActivityContainerComponent.prototype, "getSelectedTabIndex", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ActivityContainerComponent.prototype, "triggerTabSynchronisation", null);
     ActivityContainerComponent = __decorate([
         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 tab of activityTabs; let i = index; trackBy: activityIndex\" [@.disabled]=\"inTabChange.value\">\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
             styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
         }),
         __metadata("design:paramtypes", [])
@@ -4121,7 +4957,7 @@ var PlaceComponent = /** @class */ (function (_super) {
         assert.isNil(this.visitModel.value);
         var when = Dsl.disposeWith(this).when;
         this.visitModel.value = visit;
-        DebugContext.get(this.visitModel).tag(this.placeDefinition.component.name + ".visitModel");
+        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);
@@ -5269,75 +6105,6 @@ var UrlService = /** @class */ (function () {
     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 !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 = isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-        return !samePlace || !sameRouteParameters;
-    };
-    Visit.prototype.hasChangedFrom = function (other) {
-        var sameNonRouteParameters = 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) {
@@ -5533,6 +6300,7 @@ var PlaceRouter = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    // @Trace()
     PlaceRouter.prototype.pushVisitChangesToRoute = function (previous, next) {
         return __awaiter(this, void 0, void 0, function () {
             var _this = this;
@@ -5633,12 +6401,6 @@ var PlaceRouter = /** @class */ (function (_super) {
         { type: PlaceHistory }
     ]; };
     PlaceRouter.ɵprov = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(Location), ɵɵinject(InteractionService), ɵɵinject(UrlService), ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Visit, Visit]),
-        __metadata("design:returntype", Promise)
-    ], PlaceRouter.prototype, "pushVisitChangesToRoute", null);
     PlaceRouter = __decorate([
         Injectable({
             providedIn: 'root'
@@ -5652,6 +6414,75 @@ var PlaceRouter = /** @class */ (function (_super) {
     return PlaceRouter;
 }(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 !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 = isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+        return !samePlace || !sameRouteParameters;
+    };
+    Visit.prototype.hasChangedFrom = function (other) {
+        var sameNonRouteParameters = 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 InjectionToken('AUP_PLACE_CONFIG');
 
 // Freezes the state of the components at the start of the animation.
@@ -6666,8 +7497,7 @@ function installMechanics(prototype, propertyKey, backingModel, tagPrefix, isEmp
         binding: null
     };
     var tag = tagPrefix + "(" + prototype.constructor.name + "." + propertyKey.toString() + ")";
-    DebugContext.get(mechanics.backingModel).tag(tag);
-    Logger.get(mechanics.backingModel).tag(tag);
+    DebugContext.getOrCreate(mechanics.backingModel).tag(tag);
     Object.defineProperty(prototype, propertyKey, {
         get: function () {
             return mechanics.backingModel;
@@ -6729,5 +7559,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TemplateCellRendererPortalRef, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, EditRowControls as ɵba, ColumnTemplateDirective as ɵbb, DefaultCellRendererComponent as ɵbc, TableCellRendererComponent as ɵbd, SelectCellRendererComponent as ɵbe, SelectHeaderCellRendererComponent as ɵbf, DefaultHeaderCellRendererComponent as ɵbg, TableHeaderCellRendererComponent as ɵbh, MultipleSelectInputComponent as ɵbi, IconComponent as ɵbj, SectionHeaderComponent as ɵbk, PlaceModule as ɵbl, ComponentsModule as ɵbm, EmptyStateComponent as ɵbn, BusyOverlayComponent as ɵbo, PlaceOutletComponent as ɵbp, leftRightPlaceAnimation as ɵbq, LEFT_RIGHT_PLACE_ANIMATION as ɵbr, AUP_PLACE_CONFIG as ɵbs, PlaceRouter as ɵbu, InteractionService as ɵbv, ModalInteractionContextFactory as ɵbw, UrlService as ɵbx, PlaceHistory as ɵby, TabbedPlaceNavigationComponent as ɵbz, FocusBindingDirective as ɵc, AbstractPlaceNavigationComponent as ɵca, ListPlaceNavComponent as ɵcb, SidePlaceNavigationComponent as ɵcc, InteractionModule as ɵcd, ActivityContainerComponent as ɵce, AbstractInteractionContext as ɵcf, ActivityOutletComponent as ɵcg, ConfirmationDialogComponent as ɵch, ACTIVITY_DATA as ɵci, Activity as ɵcj, ConfirmThenDialogComponent as ɵcl, AlertDialogComponent as ɵcm, InPlaceInteractionContextComponent as ɵco, AddItemInteractionContextComponent as ɵcp, ActivityActionsComponent as ɵcq, PopupInteractionContextComponent as ɵcr, StringInputActivity as ɵcs, AbstractInputActivity as ɵct, SelectInputActivity as ɵcu, InteractionContextTriggerFor as ɵcv, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, NumberInputComponent as ɵj, StringInputComponent as ɵk, TextInputComponent as ɵl, PasswordInputComponent as ɵm, SelectInputComponent as ɵn, CheckboxInputComponent as ɵo, ScrollContainerComponent as ɵp, NoopComponent as ɵq, SwitchCaseOption as ɵr, SwitchCaseWhenDirective as ɵs, SwitchCaseDefaultDirective as ɵt, SwitchCaseComponent as ɵu, FocusContainerComponent as ɵv, VerticalFocusContainerComponent as ɵw, FocusableComponent as ɵx, CardContainerComponent as ɵy, TableComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandBarComponent, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, IconComponent as ɵbk, SectionHeaderComponent as ɵbl, TableRowMenuComponent as ɵbm, CommandBarComponent as ɵbn, CommandContainer as ɵbo, CommandComponent as ɵbp, PopupMenuComponent as ɵbq, AbstractPopupMenuComponent as ɵbr, PopupMenuRendererComponent as ɵbs, CommandFaceComponent as ɵbt, MoreMenuComponent as ɵbu, PlaceModule as ɵbv, ComponentsModule as ɵbw, EmptyStateComponent as ɵbx, BusyOverlayComponent as ɵby, PlaceOutletComponent as ɵbz, FocusBindingDirective as ɵc, leftRightPlaceAnimation as ɵca, LEFT_RIGHT_PLACE_ANIMATION as ɵcb, AUP_PLACE_CONFIG as ɵcc, PlaceRouter as ɵce, InteractionService as ɵcf, ModalInteractionContextFactory as ɵcg, UrlService as ɵch, PlaceHistory as ɵci, TabbedPlaceNavigationComponent as ɵcj, AbstractPlaceNavigationComponent as ɵck, ListPlaceNavComponent as ɵcl, SidePlaceNavigationComponent as ɵcm, InteractionModule as ɵcn, ActivityContainerComponent as ɵco, AbstractInteractionContext as ɵcp, ActivityOutletComponent as ɵcq, ConfirmationDialogComponent as ɵcr, ACTIVITY_DATA as ɵcs, Activity as ɵct, ConfirmThenDialogComponent as ɵcv, AlertDialogComponent as ɵcw, InPlaceInteractionContextComponent as ɵcy, AddItemInteractionContextComponent as ɵcz, DisposableComponent as ɵd, ActivityActionsComponent as ɵda, PopupInteractionContextComponent as ɵdb, StringInputActivity as ɵdc, AbstractInputActivity as ɵdd, SelectInputActivity as ɵde, InteractionContextTriggerFor as ɵdf, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractValueInputComponent as ɵh, AbstractListInputComponent as ɵi, NumberInputComponent as ɵj, StringInputComponent as ɵk, TextInputComponent as ɵl, PasswordInputComponent as ɵm, SelectInputComponent as ɵn, MultipleSelectInputComponent as ɵo, AutocompleteInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map