@coolon/angular-ui-powerups 2.0.0-alpha.16 → 2.0.0-alpha.18

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.0.0-alpha.18](https://bitbucket.org/coolon/angular-ui-powerups/compare/v2.0.0-alpha.17...v2.0.0-alpha.18) (2020-08-11)
+
+
+### Features
+
+* updated input components to fire changes on edit ([a0fafa8](https://bitbucket.org/coolon/angular-ui-powerups/commit/a0fafa8a26368b974bf93f95f861c3de0554eeab))
+
+## [2.0.0-alpha.17](https://bitbucket.org/coolon/angular-ui-powerups/compare/v2.0.0-alpha.16...v2.0.0-alpha.17) (2020-08-07)
+
+
+### Bug Fixes
+
+* removed debug from autocomplete ([c75dc89](https://bitbucket.org/coolon/angular-ui-powerups/commit/c75dc89123747755fa027d6e6367808d48d9cd97))
+
 ## [2.0.0-alpha.16](https://bitbucket.org/coolon/angular-ui-powerups/compare/v2.0.0-alpha.15...v2.0.0-alpha.16) (2020-08-07)
 
 

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

@@ -693,6 +693,7 @@
         __extends(AbstractInputComponent, _super);
         function AbstractInputComponent() {
             var _this = _super.call(this) || this;
+            _this.onValueEditedListeners = new pectin.EventListenerList();
             _this.dense = false;
             // TODO: fix this.
             // tslint:disable-next-line:no-output-native
@@ -743,7 +744,7 @@
         };
         Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
             get: function () {
-                return this.inputModel.enabled;
+                return this.formValueModel.enabled;
             },
             enumerable: true,
             configurable: true
@@ -753,7 +754,7 @@
         };
         Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
             get: function () {
-                return this.inputModel.errorList;
+                return this.formValueModel.errorList;
             },
             enumerable: true,
             configurable: true
@@ -767,7 +768,7 @@
         });
         Object.defineProperty(AbstractInputComponent.prototype, "focusContext", {
             get: function () {
-                return this.inputModel.focusContext;
+                return this.formValueModel.focusContext;
             },
             enumerable: true,
             configurable: true
@@ -786,6 +787,13 @@
             enumerable: true,
             configurable: true
         });
+        /**
+         * Invokes the callback when this components value is changed by a user edit.
+         * @param callback
+         */
+        AbstractInputComponent.prototype.onValueEdited = function (callback) {
+            return this.onValueEditedListeners.add(callback);
+        };
         __decorate([
             core.Input(),
             __metadata("design:type", String)
@@ -887,35 +895,41 @@
              * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
              */
             // We have to register it as a disposable so it ditches any listeners when we're disposed.
-            _this.inputModel = _this.registerDisposable(new pectin.Form.DelegatingListModel());
+            _this.formValueModel = _this.registerDisposable(new pectin.Form.DelegatingListModel());
+            _this.componentListModel = new pectin.MutableListModel();
             _this.setValueIsInProgress = new pectin.Guard();
             _this.valueChange = new core.EventEmitter();
-            var when = pectin.Dsl.disposeWith(_this).when;
-            when(_this.inputModel).changes(function (value) { return _this.valueChange.emit(value); }, {
+            var _a = pectin.Dsl.disposeWith(_this), when = _a.when, valueOf = _a.valueOf, chain = _a.chain;
+            var binding = new pectin.Binding.Identity(_this.formValueModel, _this.componentListModel);
+            var inExternalChange = valueOf.any(_this.setValueIsInProgress, chain(binding.direction).equals(pectin.Binding.Direction.RIGHT)).areTruthy();
+            when(_this.componentListModel).changes(function (is, was) {
+                _this.valueChange.emit(is);
+                _this.onValueEditedListeners.fire(function (l) { return l(is, was); });
+            }, {
                 initialValue: 'ignore',
-                unless: _this.setValueIsInProgress
+                // we never fire events during an external changes to the value. This allows
+                // the component to behave when used in the conventional angular
+                // fashion, i.e. [(value)]="..."
+                unless: inExternalChange
             });
-            pectin.DebugContext.tag(_this.inputModel, _this.constructor.name + ".inputModel");
+            pectin.DebugContext.tag(_this.formValueModel, _this.constructor.name + ".formValueModel");
             return _this;
         }
         Object.defineProperty(AbstractListInputComponent.prototype, "value", {
+            // We add support for simple direct display of values by allowing components to be used
+            // by `component.value = ...`  This use of the component without a value model in tables
+            // and the like.
             set: function (value) {
                 var _this = this;
                 this.setValueIsInProgress.whileTrue(function () {
-                    if (!_this.listHolder) {
-                        _this.listHolder = new pectin.MutableListModel(value);
-                        _this.listModel = _this.listHolder;
-                    }
-                    else {
-                        _this.listHolder.value = value;
-                    }
+                    _this.componentListModel.value = value;
                 });
             },
             enumerable: true,
             configurable: true
         });
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
+            core.Input(), pectin.TrackExternal({ delegateTo: 'formValueModel' }),
             __metadata("design:type", Object)
         ], AbstractListInputComponent.prototype, "listModel", void 0);
         __decorate([
@@ -949,38 +963,41 @@
              * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
              */
             // We have to register it as a disposable so it ditches any listeners when we're disposed.
-            _this.inputModel = _this.registerDisposable(new pectin.Form.DelegatingValueModel());
+            _this.formValueModel = _this.registerDisposable(new pectin.Form.DelegatingValueModel());
             _this.setValueInProgress = new pectin.Guard();
+            _this.componentValueModel = new pectin.MutableValueModel();
             _this.valueChange = new core.EventEmitter();
-            var when = pectin.Dsl.disposeWith(_this).when;
-            when(_this.inputModel).changes(function (value) { return _this.valueChange.emit(value); }, {
+            var _a = pectin.Dsl.disposeWith(_this), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
+            var binding = new pectin.Binding.Identity(_this.formValueModel, _this.componentValueModel);
+            var inExternalChange = valueOf.any(_this.setValueInProgress, chain(binding.direction).equals(pectin.Binding.Direction.RIGHT)).areTruthy();
+            when(_this.componentValueModel).changes(function (is, was) {
+                _this.valueChange.emit(is);
+                _this.onValueEditedListeners.fire(function (l) { return l(is, was); });
+            }, {
                 initialValue: 'ignore',
-                unless: _this.setValueInProgress
+                // we never fire events during an external set value operation. This allows
+                // the component to behave when used in the conventional angular
+                // fashion, i.e. [(value)]="..."
+                unless: inExternalChange
             });
-            pectin.DebugContext.tag(_this.inputModel, _this.constructor.name + ".inputModel");
+            pectin.DebugContext.tag(_this.formValueModel, _this.constructor.name + ".formValueModel");
             return _this;
         }
         Object.defineProperty(AbstractValueInputComponent.prototype, "value", {
+            // We add support for simple direct display of values by allowing components to be used
+            // by `component.value = ...`  This use of the component without a value model in tables
+            // and the like.
             set: function (value) {
                 var _this = this;
-                // 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;
-                    }
+                    _this.componentValueModel.value = value;
                 });
             },
             enumerable: true,
             configurable: true
         });
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
+            core.Input(), pectin.TrackExternal({ delegateTo: 'formValueModel' }),
             __metadata("design:type", Object)
         ], AbstractValueInputComponent.prototype, "valueModel", void 0);
         __decorate([
@@ -1018,8 +1035,6 @@
                 .select(function (option) {
                 return ___default__default.isEmpty(_this.filterValue.value) || _this.optionLabelFormat(option).toString().toLowerCase().includes(lowerCaseFilterValue.value);
             }, { dependsOn: lowerCaseFilterValue });
-            var txo = new pectin.TransactionObserver().onEvent(function (e) { return console.log(e.name, e.payload); });
-            txo.observe('this.valueModel', _this.valueModel);
             return _this;
         }
         AutocompleteInputComponent.prototype.ngOnInit = function () {
@@ -1060,7 +1075,7 @@
         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]=\"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\" (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{formatOption(option)}}</mat-option>\n        <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n  </mat-autocomplete>\n\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValueModel.value\"\n         (ngModelChange)=\"updateFilter($event)\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-autocomplete #autocomplete [displayWith]=\"optionLabelFormat\" [autoActiveFirstOption]=\"true\" (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{formatOption(option)}}</mat-option>\n        <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n  </mat-autocomplete>\n\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
                 styles: [":host{display:inline-block}mat-form-field{width:100%}"]
             }),
             __metadata("design:paramtypes", [])
@@ -1091,7 +1106,7 @@
         CheckboxInputComponent = __decorate([
             core.Component({
                 selector: 'aup-checkbox-input',
-                template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"valueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
+                template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
                 styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
             }),
             __metadata("design:paramtypes", [])
@@ -1138,7 +1153,7 @@
         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 *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"componentListModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
                 styles: [":host{display:inline-block}mat-form-field{width:100%}"]
             }),
             __metadata("design:paramtypes", [])
@@ -1169,7 +1184,7 @@
         NumberInputComponent = __decorate([
             core.Component({
                 selector: 'aup-number-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
                 styles: [""]
             }),
             __metadata("design:paramtypes", [])
@@ -1189,7 +1204,7 @@
         PasswordInputComponent = __decorate([
             core.Component({
                 selector: 'aup-password-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
                 styles: [""]
             }),
             __metadata("design:paramtypes", [])
@@ -1244,7 +1259,7 @@
         SelectInputComponent = __decorate([
             core.Component({
                 selector: 'aup-select-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"componentValueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
                 styles: [":host{display:inline-block}mat-form-field{width:100%}"]
             }),
             __metadata("design:paramtypes", [])
@@ -1258,9 +1273,9 @@
             var _this = _super.call(this) || this;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             _this.clearCommand = pectin.Command.create(function () {
-                _this.valueModel.value = null;
+                _this.componentValueModel.value = null;
             });
-            _this.clearCommand.disableWhile(chain.stringValue(_this.valueModel).isBlank());
+            _this.clearCommand.disableWhile(chain.stringValue(_this.componentValueModel).isBlank());
             return _this;
         }
         StringInputComponent.prototype.ngOnInit = function () {
@@ -1276,7 +1291,7 @@
         StringInputComponent = __decorate([
             core.Component({
                 selector: 'aup-string-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
                 styles: ["button[disabled]{visibility:hidden}"]
             }),
             __metadata("design:paramtypes", [])
@@ -1307,7 +1322,7 @@
         TextInputComponent = __decorate([
             core.Component({
                 selector: 'aup-text-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"componentValueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
                 styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}"]
             }),
             __metadata("design:paramtypes", [])