@coolon/angular-ui-powerups 2.0.0-alpha.7 → 2.0.0-alpha.9

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@angular/material/table'), require('@coolon/pectin'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('immer'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@angular/material/tooltip'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@angular/material/table', '@coolon/pectin', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'immer', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@angular/material/tooltip', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/progress-spinner', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.ng.material.table, global.pectin, global.typescriptUtilities, global.src, global.___default, global.produce, global.angularFontawesome, global.freeSolidSvgIcons, global.ng.material.tooltip, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.progressSpinner, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
-}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, scrolling, button, checkbox, icon, table, pectin, typescriptUtilities, src, ___default, produce, angularFontawesome, freeSolidSvgIcons, tooltip, flexLayout, dialog, router, overlay, ResizeObserver, progressSpinner, list, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('lodash'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', 'lodash', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/progress-spinner', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.___default, global.typescriptUtilities, global.src, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.progressSpinner, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
+}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, icon, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, ___default, typescriptUtilities, src, produce, flexLayout, dialog, router, overlay, ResizeObserver, progressSpinner, list, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     produce = produce && Object.prototype.hasOwnProperty.call(produce, 'default') ? produce['default'] : produce;
@@ -949,24 +949,30 @@
              */
             // We have to register it as a disposable so it ditches any listeners when we're disposed.
             _this.inputModel = _this.registerDisposable(new pectin.Form.DelegatingValueModel());
-            _this.setValueIsInitialising = new pectin.Guard();
+            _this.setValueInProgress = new pectin.Guard();
             _this.valueChange = new core.EventEmitter();
             var when = pectin.Dsl.disposeWith(_this).when;
-            when(_this.inputModel).changes(function (value) { return _this.valueChange.emit(value); }, { initialValue: 'ignore', unless: _this.setValueIsInitialising });
+            when(_this.inputModel).changes(function (value) { return _this.valueChange.emit(value); }, {
+                initialValue: 'ignore',
+                unless: _this.setValueInProgress
+            });
             return _this;
         }
         Object.defineProperty(AbstractValueInputComponent.prototype, "value", {
             set: function (value) {
                 var _this = this;
-                if (!this.valueHolder) {
-                    this.setValueIsInitialising.whileTrue(function () {
+                // 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(function () {
+                    if (!_this.valueHolder) {
                         _this.valueHolder = new pectin.MutableValueModel(value);
                         _this.valueModel = _this.valueHolder;
-                    });
-                }
-                else {
-                    this.valueHolder.value = value;
-                }
+                    }
+                    else {
+                        _this.valueHolder.value = value;
+                    }
+                });
             },
             enumerable: true,
             configurable: true
@@ -991,6 +997,67 @@
         return AbstractValueInputComponent;
     }(AbstractInputComponent));
 
+    /**
+     * Using templates (not only supported for nil values:
+     * <aup-autocomplete-input [valueModel]="myModel" [options]="myOptions">
+     *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+     * </aup-autocomplete-input>
+     */
+    var AutocompleteInputComponent = /** @class */ (function (_super) {
+        __extends(AutocompleteInputComponent, _super);
+        function AutocompleteInputComponent() {
+            var _this = _super.call(this) || this;
+            _this.filterValue = new pectin.MutableValueModel();
+            _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            var lowerCaseFilterValue = chain(_this.filterValue)
+                .map(function (v) { return ___default__default.isString(v) ? v.toLowerCase() : ''; });
+            _this.filteredOptions = chain(_this.optionsModel)
+                .select(function (option) {
+                return ___default__default.isEmpty(_this.filterValue.value) || _this.optionLabelFormat(option).toString().toLowerCase().includes(lowerCaseFilterValue.value);
+            }, { dependsOn: lowerCaseFilterValue });
+            return _this;
+        }
+        AutocompleteInputComponent.prototype.ngOnInit = function () {
+        };
+        AutocompleteInputComponent.prototype.updateFilter = function ($event) {
+            this.filterValue.value = $event;
+        };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ListModel)
+        ], AutocompleteInputComponent.prototype, "optionsModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInListModel('optionsModel'),
+            __metadata("design:type", Array)
+        ], AutocompleteInputComponent.prototype, "options", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AutocompleteInputComponent.prototype, "optionLabel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], AutocompleteInputComponent.prototype, "allowNil", void 0);
+        __decorate([
+            core.ContentChild('nilOptionTemplate'),
+            __metadata("design:type", core.TemplateRef)
+        ], AutocompleteInputComponent.prototype, "nilOptionTemplateRef", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], AutocompleteInputComponent.prototype, "optionLabelFormat", void 0);
+        AutocompleteInputComponent = __decorate([
+            core.Component({
+                selector: 'aup-autocomplete-input',
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"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);
+        return AutocompleteInputComponent;
+    }(AbstractValueInputComponent));
+
     var CheckboxInputComponent = /** @class */ (function (_super) {
         __extends(CheckboxInputComponent, _super);
         function CheckboxInputComponent() {
@@ -1022,6 +1089,61 @@
         return CheckboxInputComponent;
     }(AbstractValueInputComponent));
 
+    /**
+     * 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>
+     */
+    var MultipleSelectInputComponent = /** @class */ (function (_super) {
+        __extends(MultipleSelectInputComponent, _super);
+        function MultipleSelectInputComponent() {
+            var _this = _super.call(this) || this;
+            _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
+            return _this;
+        }
+        MultipleSelectInputComponent.prototype.ngOnInit = function () {
+        };
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ListModel)
+        ], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInListModel('optionsModel'),
+            __metadata("design:type", Array)
+        ], MultipleSelectInputComponent.prototype, "options", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], MultipleSelectInputComponent.prototype, "allowNil", void 0);
+        __decorate([
+            core.ContentChild('optionTemplate'),
+            __metadata("design:type", core.TemplateRef)
+        ], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
+        __decorate([
+            core.ContentChild('nilOptionTemplate'),
+            __metadata("design:type", core.TemplateRef)
+        ], MultipleSelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
+        MultipleSelectInputComponent = __decorate([
+            core.Component({
+                selector: 'aup-multiple-select-input',
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"listModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], MultipleSelectInputComponent);
+        return MultipleSelectInputComponent;
+    }(AbstractListInputComponent));
+
     var NumberInputComponent = /** @class */ (function (_super) {
         __extends(NumberInputComponent, _super);
         function NumberInputComponent() {
@@ -1077,6 +1199,7 @@
      * 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>
      */
     var SelectInputComponent = /** @class */ (function (_super) {
@@ -1190,6 +1313,48 @@
         return TextInputComponent;
     }(AbstractValueInputComponent));
 
+    var IconComponent = /** @class */ (function () {
+        function IconComponent() {
+        }
+        Object.defineProperty(IconComponent.prototype, "icon", {
+            get: function () {
+                return this._icon;
+            },
+            set: function (iconName) {
+                this._icon = iconName;
+                if (!iconName) {
+                    this.errorMessage = 'icon is nil';
+                    this.prefix = undefined;
+                    return;
+                }
+                var colonIndex = iconName.indexOf(':');
+                if (colonIndex > 0) {
+                    this.prefix = this.icon.slice(0, colonIndex);
+                    this.suffix = this.icon.slice(colonIndex + 1);
+                }
+                if (this.prefix) {
+                    this.errorMessage = "Unknown icon \"" + iconName + "\"";
+                }
+                this.errorMessage = "Unknown icon prefix \"" + this.prefix + "\"";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], IconComponent.prototype, "icon", null);
+        IconComponent = __decorate([
+            core.Component({
+                selector: 'aup-icon',
+                template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"'svg'\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"'mat'\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"'fab'\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
+                styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
+            })
+        ], IconComponent);
+        return IconComponent;
+    }());
+
     var NoopComponent = /** @class */ (function () {
         function NoopComponent() {
         }
@@ -1763,13 +1928,23 @@
             _this.cellRenderer(DefaultCellRendererComponent);
             return _this;
         }
-        PropertyColumnModel.prototype.cellRenderer = function (componentType, onComponentInit) {
+        PropertyColumnModel.prototype.cellRenderer = function (componentType, onComponentInitOrOptions) {
             var _this = this;
             this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
-                if (firstTime && onComponentInit) {
-                    onComponentInit(component);
+                if (firstTime) {
+                    if (___default__default.isFunction(onComponentInitOrOptions)) {
+                        onComponentInitOrOptions(component);
+                    }
+                    else {
+                        if (___default__default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onComponentInit)) {
+                            onComponentInitOrOptions.onComponentInit(component);
+                        }
+                    }
                 }
                 component.value = _this._format(rowData.row[_this.property]);
+                if (!___default__default.isFunction(onComponentInitOrOptions) && ___default__default.isFunction(onComponentInitOrOptions === null || onComponentInitOrOptions === void 0 ? void 0 : onComponentInitOrOptions.onRowUpdate)) {
+                    onComponentInitOrOptions.onRowUpdate(component, rowData.row);
+                }
             }));
             return this;
         };
@@ -2501,96 +2676,6 @@
         return VerticalFocusContainerComponent;
     }(FocusContainerComponent));
 
-    var MultipleSelectInputComponent = /** @class */ (function (_super) {
-        __extends(MultipleSelectInputComponent, _super);
-        function MultipleSelectInputComponent() {
-            var _this = _super.call(this) || this;
-            _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
-            return _this;
-        }
-        MultipleSelectInputComponent.prototype.ngOnInit = function () {
-        };
-        __decorate([
-            core.Input(), pectin.TrackExternal(),
-            __metadata("design:type", pectin.ListModel)
-        ], MultipleSelectInputComponent.prototype, "optionsModel", void 0);
-        __decorate([
-            core.Input(), pectin.StoreInListModel('optionsModel'),
-            __metadata("design:type", Array)
-        ], MultipleSelectInputComponent.prototype, "options", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], MultipleSelectInputComponent.prototype, "optionLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Boolean)
-        ], MultipleSelectInputComponent.prototype, "allowNil", void 0);
-        __decorate([
-            core.ContentChild('optionTemplate'),
-            __metadata("design:type", core.TemplateRef)
-        ], MultipleSelectInputComponent.prototype, "optionTemplateRef", void 0);
-        __decorate([
-            core.ContentChild('nilOptionTemplate'),
-            __metadata("design:type", core.TemplateRef)
-        ], MultipleSelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], MultipleSelectInputComponent.prototype, "optionLabelFormat", void 0);
-        MultipleSelectInputComponent = __decorate([
-            core.Component({
-                selector: 'aup-multiple-select-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"listModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-                styles: [":host{display:inline-block}mat-form-field{width:100%}"]
-            }),
-            __metadata("design:paramtypes", [])
-        ], MultipleSelectInputComponent);
-        return MultipleSelectInputComponent;
-    }(AbstractListInputComponent));
-
-    var IconComponent = /** @class */ (function () {
-        function IconComponent() {
-        }
-        Object.defineProperty(IconComponent.prototype, "icon", {
-            get: function () {
-                return this._icon;
-            },
-            set: function (iconName) {
-                this._icon = iconName;
-                if (!iconName) {
-                    this.errorMessage = 'icon is nil';
-                    this.prefix = undefined;
-                    return;
-                }
-                var colonIndex = iconName.indexOf(':');
-                if (colonIndex > 0) {
-                    this.prefix = this.icon.slice(0, colonIndex);
-                    this.suffix = this.icon.slice(colonIndex + 1);
-                }
-                if (this.prefix) {
-                    this.errorMessage = "Unknown icon \"" + iconName + "\"";
-                }
-                this.errorMessage = "Unknown icon prefix \"" + this.prefix + "\"";
-            },
-            enumerable: true,
-            configurable: true
-        });
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String),
-            __metadata("design:paramtypes", [String])
-        ], IconComponent.prototype, "icon", null);
-        IconComponent = __decorate([
-            core.Component({
-                selector: 'aup-icon',
-                template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"'svg'\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"'mat'\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"'fab'\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"suffix\">\n    </fa-icon>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n",
-                styles: [":host{display:inline-flex;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
-            })
-        ], IconComponent);
-        return IconComponent;
-    }());
-
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule(faIconLibrary) {
             faIconLibrary.addIconPacks(freeSolidSvgIcons.fas);
@@ -2609,6 +2694,8 @@
                     TextInputComponent,
                     PasswordInputComponent,
                     SelectInputComponent,
+                    MultipleSelectInputComponent,
+                    AutocompleteInputComponent,
                     CheckboxInputComponent,
                     ScrollContainerComponent,
                     NoopComponent,
@@ -2628,7 +2715,6 @@
                     SelectHeaderCellRendererComponent,
                     DefaultHeaderCellRendererComponent,
                     TableHeaderCellRendererComponent,
-                    MultipleSelectInputComponent,
                     IconComponent,
                     SectionHeaderComponent
                 ],
@@ -2648,7 +2734,8 @@
                     portal.PortalModule,
                     scrolling.CdkScrollableModule,
                     angularFontawesome.FontAwesomeModule,
-                    tooltip.MatTooltipModule
+                    tooltip.MatTooltipModule,
+                    autocomplete.MatAutocompleteModule
                 ],
                 exports: [
                     NumberInputComponent,
@@ -2657,6 +2744,8 @@
                     PasswordInputComponent,
                     CheckboxInputComponent,
                     SelectInputComponent,
+                    MultipleSelectInputComponent,
+                    AutocompleteInputComponent,
                     ScrollContainerComponent,
                     NoopComponent,
                     SwitchCaseComponent,
@@ -2669,12 +2758,23 @@
                     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", [angularFontawesome.FaIconLibrary])
@@ -3315,7 +3415,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵbv = /** @class */ (function () {
+    exports.ɵbw = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -3460,7 +3560,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵbv || (exports.ɵbv = {}));
+    })(exports.ɵbw || (exports.ɵbw = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -3518,7 +3618,7 @@
             return this.activityContainerComponent.startActivity(activityType, data, options);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbv },
+            { type: exports.ɵbw },
             { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
         ]; };
         __decorate([
@@ -3536,7 +3636,7 @@
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
             __param(1, core.Inject(tabs.MAT_TABS_CONFIG)), __param(1, core.Optional()),
-            __metadata("design:paramtypes", [exports.ɵbv, Object])
+            __metadata("design:paramtypes", [exports.ɵbw, Object])
         ], InPlaceInteractionContextComponent);
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
@@ -4075,7 +4175,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵbv
+                    exports.ɵbw
                     // {
                     //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
                     // }
@@ -5197,7 +5297,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵby = /** @class */ (function () {
+    exports.ɵbz = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -5334,7 +5434,7 @@
         //   }
         //
         // }
-    })(exports.ɵby || (exports.ɵby = {}));
+    })(exports.ɵbz || (exports.ɵbz = {}));
 
     exports.UrlSnapshot = /** @class */ (function () {
         // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
@@ -5857,11 +5957,11 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵbv },
+            { type: exports.ɵbw },
             { type: UrlService },
-            { type: exports.ɵby }
+            { type: exports.ɵbz }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbv), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵby)); }, token: PlaceRouter, providedIn: "root" });
+        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbw), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵbz)); }, token: PlaceRouter, providedIn: "root" });
         __decorate([
             pectin.Trace(),
             __metadata("design:type", Function),
@@ -5874,9 +5974,9 @@
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵbv,
+                exports.ɵbw,
                 UrlService,
-                exports.ɵby])
+                exports.ɵbz])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
@@ -6967,6 +7067,7 @@
     exports.AddItemInteractionContextComponent = AddItemInteractionContextComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
+    exports.AutocompleteInputComponent = AutocompleteInputComponent;
     exports.BusyOverlayComponent = BusyOverlayComponent;
     exports.CELL_EDITOR_PORTAL = CELL_EDITOR_PORTAL;
     exports.CELL_RENDERER_PORTAL = CELL_RENDERER_PORTAL;
@@ -7010,7 +7111,7 @@
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵbv;
+    exports.InteractionService = exports.ɵbw;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
@@ -7030,7 +7131,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵby;
+    exports.PlaceHistory = exports.ɵbz;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -7080,50 +7181,51 @@
     exports.ɵ0 = ɵ0;
     exports.ɵa = DirectivesModule;
     exports.ɵb = CommandDirective;
-    exports.ɵba = EditRowControls;
-    exports.ɵbb = ColumnTemplateDirective;
-    exports.ɵbc = DefaultCellRendererComponent;
-    exports.ɵbd = TableCellRendererComponent;
-    exports.ɵbe = SelectCellRendererComponent;
-    exports.ɵbf = SelectHeaderCellRendererComponent;
-    exports.ɵbg = DefaultHeaderCellRendererComponent;
-    exports.ɵbh = TableHeaderCellRendererComponent;
-    exports.ɵbi = MultipleSelectInputComponent;
-    exports.ɵbj = IconComponent;
-    exports.ɵbk = SectionHeaderComponent;
-    exports.ɵbl = PlaceModule;
-    exports.ɵbm = ComponentsModule;
-    exports.ɵbn = EmptyStateComponent;
-    exports.ɵbo = BusyOverlayComponent;
-    exports.ɵbp = PlaceOutletComponent;
-    exports.ɵbq = leftRightPlaceAnimation;
-    exports.ɵbr = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵbs = AUP_PLACE_CONFIG;
-    exports.ɵbu = PlaceRouter;
-    exports.ɵbw = ModalInteractionContextFactory;
-    exports.ɵbx = UrlService;
-    exports.ɵbz = TabbedPlaceNavigationComponent;
+    exports.ɵba = CardContainerComponent;
+    exports.ɵbb = TableComponent;
+    exports.ɵbc = EditRowControls;
+    exports.ɵbd = ColumnTemplateDirective;
+    exports.ɵbe = DefaultCellRendererComponent;
+    exports.ɵbf = TableCellRendererComponent;
+    exports.ɵbg = SelectCellRendererComponent;
+    exports.ɵbh = SelectHeaderCellRendererComponent;
+    exports.ɵbi = DefaultHeaderCellRendererComponent;
+    exports.ɵbj = TableHeaderCellRendererComponent;
+    exports.ɵbk = IconComponent;
+    exports.ɵbl = SectionHeaderComponent;
+    exports.ɵbm = PlaceModule;
+    exports.ɵbn = ComponentsModule;
+    exports.ɵbo = EmptyStateComponent;
+    exports.ɵbp = BusyOverlayComponent;
+    exports.ɵbq = PlaceOutletComponent;
+    exports.ɵbr = leftRightPlaceAnimation;
+    exports.ɵbs = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵbt = AUP_PLACE_CONFIG;
+    exports.ɵbv = PlaceRouter;
+    exports.ɵbx = ModalInteractionContextFactory;
+    exports.ɵby = UrlService;
     exports.ɵc = FocusBindingDirective;
-    exports.ɵca = AbstractPlaceNavigationComponent;
-    exports.ɵcb = ListPlaceNavComponent;
-    exports.ɵcc = SidePlaceNavigationComponent;
-    exports.ɵcd = InteractionModule;
-    exports.ɵce = ActivityContainerComponent;
-    exports.ɵcf = AbstractInteractionContext;
-    exports.ɵcg = ActivityOutletComponent;
-    exports.ɵch = ConfirmationDialogComponent;
-    exports.ɵci = ACTIVITY_DATA;
-    exports.ɵcj = Activity;
-    exports.ɵcl = ConfirmThenDialogComponent;
-    exports.ɵcm = AlertDialogComponent;
-    exports.ɵco = InPlaceInteractionContextComponent;
-    exports.ɵcp = AddItemInteractionContextComponent;
-    exports.ɵcq = ActivityActionsComponent;
-    exports.ɵcr = PopupInteractionContextComponent;
-    exports.ɵcs = StringInputActivity;
-    exports.ɵct = AbstractInputActivity;
-    exports.ɵcu = SelectInputActivity;
-    exports.ɵcv = InteractionContextTriggerFor;
+    exports.ɵca = TabbedPlaceNavigationComponent;
+    exports.ɵcb = AbstractPlaceNavigationComponent;
+    exports.ɵcc = ListPlaceNavComponent;
+    exports.ɵcd = SidePlaceNavigationComponent;
+    exports.ɵce = InteractionModule;
+    exports.ɵcf = ActivityContainerComponent;
+    exports.ɵcg = AbstractInteractionContext;
+    exports.ɵch = ActivityOutletComponent;
+    exports.ɵci = ConfirmationDialogComponent;
+    exports.ɵcj = ACTIVITY_DATA;
+    exports.ɵck = Activity;
+    exports.ɵcm = ConfirmThenDialogComponent;
+    exports.ɵcn = AlertDialogComponent;
+    exports.ɵcp = InPlaceInteractionContextComponent;
+    exports.ɵcq = AddItemInteractionContextComponent;
+    exports.ɵcr = ActivityActionsComponent;
+    exports.ɵcs = PopupInteractionContextComponent;
+    exports.ɵct = StringInputActivity;
+    exports.ɵcu = AbstractInputActivity;
+    exports.ɵcv = SelectInputActivity;
+    exports.ɵcw = InteractionContextTriggerFor;
     exports.ɵd = DisposableComponent;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;
@@ -7135,18 +7237,18 @@
     exports.ɵl = TextInputComponent;
     exports.ɵm = PasswordInputComponent;
     exports.ɵn = SelectInputComponent;
-    exports.ɵo = CheckboxInputComponent;
-    exports.ɵp = ScrollContainerComponent;
-    exports.ɵq = NoopComponent;
-    exports.ɵr = SwitchCaseOption;
-    exports.ɵs = SwitchCaseWhenDirective;
-    exports.ɵt = SwitchCaseDefaultDirective;
-    exports.ɵu = SwitchCaseComponent;
-    exports.ɵv = FocusContainerComponent;
-    exports.ɵw = VerticalFocusContainerComponent;
-    exports.ɵx = FocusableComponent;
-    exports.ɵy = CardContainerComponent;
-    exports.ɵz = TableComponent;
+    exports.ɵo = MultipleSelectInputComponent;
+    exports.ɵp = AutocompleteInputComponent;
+    exports.ɵq = CheckboxInputComponent;
+    exports.ɵr = ScrollContainerComponent;
+    exports.ɵs = NoopComponent;
+    exports.ɵt = SwitchCaseOption;
+    exports.ɵu = SwitchCaseWhenDirective;
+    exports.ɵv = SwitchCaseDefaultDirective;
+    exports.ɵw = SwitchCaseComponent;
+    exports.ɵx = FocusContainerComponent;
+    exports.ɵy = VerticalFocusContainerComponent;
+    exports.ɵz = FocusableComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });