@coolon/angular-ui-powerups 2.0.0-alpha.0 → 2.0.0-alpha.10

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

@@ -9,18 +9,19 @@ 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 { MatTableModule } from '@angular/material/table';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, FocusManager, Form, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, MutableListModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, FocusManager, Form, Guard, MutableListModel, MutableValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, DebugContext, Binding, Functions } from '@coolon/pectin';
+import ___default, { isEqual, isNil } from 'lodash';
 import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
-import ___default, { isEqual, isNil } from 'lodash';
 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';
@@ -369,7 +370,7 @@ CardContainerComponent = __decorate([
     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-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}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
     }),
     __metadata("design:paramtypes", [])
 ], CardContainerComponent);
@@ -467,6 +468,7 @@ FocusableComponent = __decorate([
 let AbstractInputComponent = class AbstractInputComponent extends DisposableComponent {
     constructor() {
         super();
+        this.dense = false;
         // TODO: fix this.
         // tslint:disable-next-line:no-output-native
         this.focus = new EventEmitter();
@@ -528,15 +530,21 @@ let AbstractInputComponent = class AbstractInputComponent extends DisposableComp
     get focusContext() {
         return this.inputModel.focusContext;
     }
+    get floatLabel() {
+        return this.dense ? 'never' : this.userFloatLabel;
+    }
+    get showHint() {
+        return this.dense ? false : !!this.hint;
+    }
 };
 __decorate([
     Input(),
     __metadata("design:type", String)
 ], AbstractInputComponent.prototype, "label", void 0);
 __decorate([
-    Input(),
+    Input('floatLabel'),
     __metadata("design:type", String)
-], AbstractInputComponent.prototype, "floatLabel", void 0);
+], AbstractInputComponent.prototype, "userFloatLabel", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -545,6 +553,11 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], AbstractInputComponent.prototype, "placeholder", void 0);
+__decorate([
+    HostBinding('class.dense'),
+    Input(),
+    __metadata("design:type", Object)
+], AbstractInputComponent.prototype, "dense", void 0);
 __decorate([
     Input('command.focus'),
     __metadata("design:type", Command)
@@ -610,7 +623,7 @@ AbstractInputComponent = __decorate([
 
 let AbstractListInputComponent = class AbstractListInputComponent extends AbstractInputComponent {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * A backing model for all our @Input() valueModel properties which should be defined as follows.
          *
@@ -623,15 +636,47 @@ let AbstractListInputComponent = class AbstractListInputComponent extends Abstra
          */
         // 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.setValueIsInitialising = new Guard();
+        this.valueChange = new EventEmitter();
+        const { when } = Dsl.disposeWith(this);
+        when(this.inputModel).changes(value => this.valueChange.emit(value), {
+            initialValue: 'ignore',
+            unless: this.setValueIsInitialising
+        });
+    }
+    set value(value) {
+        if (!this.listHolder) {
+            this.setValueIsInitialising.whileTrue(() => {
+                this.listHolder = new MutableListModel(value);
+                this.listModel = this.listHolder;
+            });
+        }
+        else {
+            this.listHolder.value = value;
+        }
     }
 };
+__decorate([
+    Input(), TrackExternal({ delegateTo: 'inputModel' }),
+    __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);
 
 let AbstractValueInputComponent = class AbstractValueInputComponent extends AbstractInputComponent {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * A backing model for all our @Input() valueModel properties which should be defined as follows.
          *
@@ -644,25 +689,116 @@ let AbstractValueInputComponent = class AbstractValueInputComponent extends Abst
          */
         // 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.setValueInProgress = new Guard();
+        this.valueChange = new EventEmitter();
+        const { when } = Dsl.disposeWith(this);
+        when(this.inputModel).changes(value => this.valueChange.emit(value), {
+            initialValue: 'ignore',
+            unless: this.setValueInProgress
+        });
+    }
+    set value(value) {
+        // 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)]="..."
+        this.setValueInProgress.whileTrue(() => {
+            if (!this.valueHolder) {
+                this.valueHolder = new MutableValueModel(value);
+                this.valueModel = this.valueHolder;
+            }
+            else {
+                this.valueHolder.value = value;
+            }
+        });
     }
 };
+__decorate([
+    Input(), TrackExternal({ delegateTo: 'inputModel' }),
+    __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: '' })
+    Component({ template: '' }),
+    __metadata("design:paramtypes", [])
 ], AbstractValueInputComponent);
 
+/**
+ * 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>
+ */
+let AutocompleteInputComponent = class AutocompleteInputComponent extends AbstractValueInputComponent {
+    constructor() {
+        super();
+        this.filterValue = new MutableValueModel();
+        this.optionLabelFormat = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        const lowerCaseFilterValue = chain(this.filterValue)
+            .map(v => ___default.isString(v) ? v.toLowerCase() : '');
+        this.filteredOptions = chain(this.optionsModel)
+            .select(option => {
+            return ___default.isEmpty(this.filterValue.value) || this.optionLabelFormat(option).toString().toLowerCase().includes(lowerCaseFilterValue.value);
+        }, { dependsOn: lowerCaseFilterValue });
+    }
+    ngOnInit() {
+    }
+    updateFilter($event) {
+        this.filterValue.value = $event;
+    }
+};
+__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]=\"optionLabelFormat(valueModel.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\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{optionLabelFormat(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);
+
 let CheckboxInputComponent = class CheckboxInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
+        // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+        // valueModel: Form.ValueModelBase<boolean> | IMutableValueModel<boolean>;
         this.color = 'accent';
         this.labelPosition = 'after';
     }
     ngOnInit() {
     }
 };
-__decorate([
-    Input(), TrackExternal({ delegateTo: 'inputModel' }),
-    __metadata("design:type", Object)
-], CheckboxInputComponent.prototype, "valueModel", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -674,25 +810,75 @@ __decorate([
 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=\"hint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
-        styles: [":host{display:inline-flex;flex-direction:column;margin-top:24px;margin-bottom:16px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
+        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",
+        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", [])
 ], CheckboxInputComponent);
 
+/**
+ * Using templates:
+ * <aup-multiple-select-input [valueModel]="myModel" [options]="myOptions">
+ *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ *   <ng-template #nilOptionTemplateRef let-option>{{option.thePropertyYouWant}}</ng-template>
+ * </aup-multiple-select_input>
+ */
+let MultipleSelectInputComponent = class MultipleSelectInputComponent extends AbstractListInputComponent {
+    constructor() {
+        super();
+        this.optionLabelFormat = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
+    }
+    ngOnInit() {
+    }
+};
+__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);
+
 let NumberInputComponent = class NumberInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
+        // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+        // valueModel: Form.ValueModelBase<number> | IMutableValueModel<number>;
         this.min = Number.MIN_SAFE_INTEGER;
         this.max = Number.MAX_SAFE_INTEGER;
     }
     ngOnInit() {
     }
 };
-__decorate([
-    Input(), TrackExternal({ delegateTo: 'inputModel' }),
-    __metadata("design:type", Object)
-], NumberInputComponent.prototype, "valueModel", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object)
@@ -704,32 +890,37 @@ __decorate([
 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\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}"]
+        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",
+        styles: [""]
     }),
     __metadata("design:paramtypes", [])
 ], NumberInputComponent);
 
 let PasswordInputComponent = class PasswordInputComponent extends AbstractValueInputComponent {
+    // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+    // valueModel: Form.ValueModelBase<string> | IMutableValueModel<string>;
     constructor() {
         super();
     }
     ngOnInit() {
     }
 };
-__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=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
-        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}"]
+        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",
+        styles: [""]
     }),
     __metadata("design:paramtypes", [])
 ], PasswordInputComponent);
 
+/**
+ * Using templates:
+ * <aup-select-input [valueModel]="myModel" [options]="myOptions">
+ *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ *   <ng-template #nilOptionTemplateRef let-option>{{option.thePropertyYouWant}}</ng-template>
+ * </aup-select_input>
+ */
 let SelectInputComponent = class SelectInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
@@ -738,10 +929,6 @@ let SelectInputComponent = class SelectInputComponent extends AbstractValueInput
     ngOnInit() {
     }
 };
-__decorate([
-    Input(), TrackExternal({ delegateTo: 'inputModel' }),
-    __metadata("design:type", Object)
-], SelectInputComponent.prototype, "valueModel", void 0);
 __decorate([
     Input(), TrackExternal(),
     __metadata("design:type", ListModel)
@@ -773,7 +960,7 @@ __decorate([
 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=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <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",
         styles: [":host{display:inline-block}mat-form-field{width:100%}"]
     }),
     __metadata("design:paramtypes", [])
@@ -791,10 +978,6 @@ let StringInputComponent = class StringInputComponent extends AbstractValueInput
     ngOnInit() {
     }
 };
-__decorate([
-    Input(), TrackExternal({ delegateTo: 'inputModel' }),
-    __metadata("design:type", Object)
-], StringInputComponent.prototype, "valueModel", void 0);
 __decorate([
     Input(), TrackExternal({ defaultValue: false }),
     __metadata("design:type", ValueModel)
@@ -806,8 +989,8 @@ __decorate([
 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=\"hint\">{{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: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}button[disabled]{visibility:hidden}"]
+        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",
+        styles: ["button[disabled]{visibility:hidden}"]
     }),
     __metadata("design:paramtypes", [])
 ], StringInputComponent);
@@ -815,16 +998,14 @@ StringInputComponent = __decorate([
 let TextInputComponent = class TextInputComponent extends AbstractValueInputComponent {
     constructor() {
         super();
+        // @Input() @TrackExternal({ delegateTo: 'inputModel' })
+        // valueModel: Form.ValueModelBase<string> | IMutableValueModel<string>;
         this.rows = 2;
         // const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
     }
     ngOnInit() {
     }
 };
-__decorate([
-    Input(), TrackExternal({ delegateTo: 'inputModel' }),
-    __metadata("design:type", Object)
-], TextInputComponent.prototype, "valueModel", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object)
@@ -836,12 +1017,47 @@ __decorate([
 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=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
-        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}button[disabled]{visibility:hidden}textarea{overflow:auto}"]
+        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",
+        styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}"]
     }),
     __metadata("design:paramtypes", [])
 ], TextInputComponent);
 
+let IconComponent = class IconComponent {
+    set icon(iconName) {
+        this._icon = iconName;
+        if (!iconName) {
+            this.errorMessage = 'icon is nil';
+            this.prefix = undefined;
+            return;
+        }
+        const 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}"`;
+    }
+    get icon() {
+        return this._icon;
+    }
+};
+__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);
+
 let NoopComponent = class NoopComponent {
     constructor() {
     }
@@ -1026,6 +1242,7 @@ class CellHeaderPortalRef extends CellPortalRef {
         assert$1.isTruthy(host);
         host[HEADER_CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
     }
+    // @Trace()
     onPortalAttached(host, portalComponent) {
         this.initialiseHeader(portalComponent, host.column);
     }
@@ -1041,13 +1258,15 @@ class ComponentCellRendererPortalRef extends CellRendererPortalRef {
     initialiseHost(host, columnModel) {
         host[CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
     }
+    // @Trace()
     onPortalAttached(host, portalComponent) {
         host[PORTAL_RENDERER_COMPONENT] = portalComponent;
-        this.updateComponent(portalComponent, host.getRowData());
+        this.updateComponent(portalComponent, host.getRowData(), true);
     }
+    // @Trace()
     pushState(host) {
         if (host[PORTAL_RENDERER_COMPONENT]) {
-            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
+            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData(), false);
         }
     }
 }
@@ -1084,6 +1303,7 @@ class TemplateCellRendererPortalRef extends CellRendererPortalRef {
     onPortalAttached(host, portalComponent) {
         //  don't care
     }
+    // @Trace()
     pushState(host) {
         host[CELL_RENDERER_PORTAL] = this.createPortal(host.getRowData());
         host.fillCell = this.fillCell;
@@ -1340,21 +1560,34 @@ __decorate([
     __metadata("design:returntype", Object)
 ], ColumnModel.prototype, "getColumnTextProperties", null);
 class PropertyColumnModel extends ColumnModel {
-    constructor(property, defaults) {
-        super(property.toString(), defaults);
+    constructor(id, property, defaults) {
+        super(id, defaults);
         this.property = property;
         this._format = (value) => value;
         this.cellRenderer(DefaultCellRendererComponent);
     }
-    cellRenderer(componentType) {
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
+    cellRenderer(componentType, onComponentInitOrOptions) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (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;
     }
-    cellEditor(editor, validatorsOrInitialiser, initialiseComponent) {
+    cellEditor(editor, validatorsOrInitialiser, onComponentInit) {
         const validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
-        const initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
+        const initialiser = ___default.isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
         this.configureCellEditor(new CellEditorPortalRef(editor, (component, editSession) => {
             const formValueModel = editSession.form.pluck(this.property);
             if (validators) {
@@ -1377,8 +1610,8 @@ class PropertyColumnModel extends ColumnModel {
     }
 }
 class ListPropertyColumnModel extends ColumnModel {
-    constructor(property, defaults) {
-        super(property.toString(), defaults);
+    constructor(id, property, defaults) {
+        super(id, defaults);
         this.property = property;
         this._format = (value) => value.map(v => v === null || v === void 0 ? void 0 : v.toString()).join(', ');
         this.cellRenderer(DefaultCellRendererComponent);
@@ -1419,8 +1652,11 @@ class CustomValueColumnModel extends ColumnModel {
         this.getValue = getValue;
         this.cellRenderer(DefaultCellRendererComponent);
     }
-    cellRenderer(componentType) {
-        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
+    cellRenderer(componentType, onComponentInit) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
+            if (firstTime && ___default.isFunction(onComponentInit)) {
+                onComponentInit(component);
+            }
             component.value = this.getValue(rowData.row);
         }));
         return this;
@@ -1594,7 +1830,7 @@ let TableModel = TableModel_1 = class TableModel {
         this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
         this.firstEditableColumn = chain(this.columns).select(c => c.hasEditorPortal()).first();
         this.hasColumnsWithRowSelectionExplicitlyEnabled = chain(this._columns).findIndex(column => column.isRowSelectionExplicitlyEnabled()).isGreaterThanOrEqualTo(0);
-        this.addRowClass("enable-hover", () => this.isRowSelectionEnabled());
+        this.addRowClass('enable-hover', () => this.isRowSelectionEnabled());
     }
     static fromList(sourceOfTruth, builder) {
         const model = new TableModel_1(sourceOfTruth);
@@ -1612,11 +1848,11 @@ let TableModel = TableModel_1 = class TableModel {
     get columns() {
         return this._columns.readonly;
     }
-    pluck(property) {
-        return this.addColumn(new PropertyColumnModel(property, this));
+    pluck(property, options) {
+        return this.addColumn(new PropertyColumnModel((options === null || options === void 0 ? void 0 : options.columnId) || property.toString(), property, this));
     }
-    pluckList(property) {
-        return this.addColumn(new ListPropertyColumnModel(property, this));
+    pluckList(property, options) {
+        return this.addColumn(new ListPropertyColumnModel((options === null || options === void 0 ? void 0 : options.columnId) || property.toString(), property, this));
     }
     addSelectionColumn(selectionModel) {
         assert.isNil(this.selectionColumnModel);
@@ -1630,6 +1866,9 @@ let TableModel = TableModel_1 = class TableModel {
     addCustomColumn(columnId, dataAccessor) {
         return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
     }
+    addComponentColumn(columnId, component, onInit) {
+        return this.addColumn(new CustomValueColumnModel(columnId, this, row => row)).cellRenderer(component, onInit);
+    }
     addTemplateColumn(columnId) {
         return this.addColumn(new CustomTemplateColumnModel(columnId, this));
     }
@@ -1777,7 +2016,7 @@ __decorate([
 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                                      [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                               [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.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",
         styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}"]
     }),
     __metadata("design:paramtypes", [])
@@ -2034,90 +2273,6 @@ VerticalFocusContainerComponent = __decorate([
     __metadata("design:paramtypes", [FocusManager])
 ], VerticalFocusContainerComponent);
 
-let MultipleSelectInputComponent = class MultipleSelectInputComponent extends AbstractListInputComponent {
-    constructor() {
-        super();
-        this.optionLabelFormat = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
-    }
-    ngOnInit() {
-    }
-};
-__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=\"hint\">{{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);
-
-let IconComponent = class IconComponent {
-    set icon(iconName) {
-        this._icon = iconName;
-        if (!iconName) {
-            this.errorMessage = 'icon is nil';
-            this.prefix = undefined;
-            return;
-        }
-        const 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}"`;
-    }
-    get icon() {
-        return this._icon;
-    }
-};
-__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);
-
 let ComponentsModule = class ComponentsModule {
     constructor(faIconLibrary) {
         faIconLibrary.addIconPacks(fas);
@@ -2137,6 +2292,8 @@ ComponentsModule = __decorate([
             TextInputComponent,
             PasswordInputComponent,
             SelectInputComponent,
+            MultipleSelectInputComponent,
+            AutocompleteInputComponent,
             CheckboxInputComponent,
             ScrollContainerComponent,
             NoopComponent,
@@ -2156,7 +2313,6 @@ ComponentsModule = __decorate([
             SelectHeaderCellRendererComponent,
             DefaultHeaderCellRendererComponent,
             TableHeaderCellRendererComponent,
-            MultipleSelectInputComponent,
             IconComponent,
             SectionHeaderComponent
         ],
@@ -2176,7 +2332,8 @@ ComponentsModule = __decorate([
             PortalModule,
             CdkScrollableModule,
             FontAwesomeModule,
-            MatTooltipModule
+            MatTooltipModule,
+            MatAutocompleteModule
         ],
         exports: [
             NumberInputComponent,
@@ -2185,6 +2342,8 @@ ComponentsModule = __decorate([
             PasswordInputComponent,
             CheckboxInputComponent,
             SelectInputComponent,
+            MultipleSelectInputComponent,
+            AutocompleteInputComponent,
             ScrollContainerComponent,
             NoopComponent,
             SwitchCaseComponent,
@@ -2197,12 +2356,23 @@ ComponentsModule = __decorate([
             TableComponent,
             EditRowControls,
             ColumnTemplateDirective,
-            MultipleSelectInputComponent,
             IconComponent,
             SectionHeaderComponent
         ],
         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])
@@ -6032,5 +6202,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, 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, 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, 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, PlaceModule as ɵbm, ComponentsModule as ɵbn, EmptyStateComponent as ɵbo, BusyOverlayComponent as ɵbp, PlaceOutletComponent as ɵbq, leftRightPlaceAnimation as ɵbr, LEFT_RIGHT_PLACE_ANIMATION as ɵbs, AUP_PLACE_CONFIG as ɵbt, PlaceRouter as ɵbv, InteractionService as ɵbw, ModalInteractionContextFactory as ɵbx, UrlService as ɵby, PlaceHistory as ɵbz, FocusBindingDirective as ɵc, TabbedPlaceNavigationComponent as ɵca, AbstractPlaceNavigationComponent as ɵcb, ListPlaceNavComponent as ɵcc, SidePlaceNavigationComponent as ɵcd, InteractionModule as ɵce, ActivityContainerComponent as ɵcf, AbstractInteractionContext as ɵcg, ActivityOutletComponent as ɵch, ConfirmationDialogComponent as ɵci, ACTIVITY_DATA as ɵcj, Activity as ɵck, ConfirmThenDialogComponent as ɵcm, AlertDialogComponent as ɵcn, InPlaceInteractionContextComponent as ɵcp, AddItemInteractionContextComponent as ɵcq, ActivityActionsComponent as ɵcr, PopupInteractionContextComponent as ɵcs, StringInputActivity as ɵct, AbstractInputActivity as ɵcu, SelectInputActivity as ɵcv, InteractionContextTriggerFor as ɵcw, 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, 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