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

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

@@ -17,7 +17,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, FocusManager, Form, Guard, DebugContext, MutableListModel, MutableValueModel, TransactionObserver, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Binding, Functions } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, FocusManager, EventListenerList, Form, MutableListModel, Guard, Binding, DebugContext, MutableValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, 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';
@@ -522,6 +522,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     __extends(AbstractInputComponent, _super);
     function AbstractInputComponent() {
         var _this = _super.call(this) || this;
+        _this.onValueEditedListeners = new EventListenerList();
         _this.dense = false;
         // TODO: fix this.
         // tslint:disable-next-line:no-output-native
@@ -572,7 +573,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
         get: function () {
-            return this.inputModel.enabled;
+            return this.formValueModel.enabled;
         },
         enumerable: true,
         configurable: true
@@ -582,7 +583,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
         get: function () {
-            return this.inputModel.errorList;
+            return this.formValueModel.errorList;
         },
         enumerable: true,
         configurable: true
@@ -596,7 +597,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     });
     Object.defineProperty(AbstractInputComponent.prototype, "focusContext", {
         get: function () {
-            return this.inputModel.focusContext;
+            return this.formValueModel.focusContext;
         },
         enumerable: true,
         configurable: true
@@ -615,6 +616,13 @@ var AbstractInputComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    /**
+     * Invokes the callback when this components value is changed by a user edit.
+     * @param callback
+     */
+    AbstractInputComponent.prototype.onValueEdited = function (callback) {
+        return this.onValueEditedListeners.add(callback);
+    };
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -716,35 +724,41 @@ var AbstractListInputComponent = /** @class */ (function (_super) {
          * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
          */
         // We have to register it as a disposable so it ditches any listeners when we're disposed.
-        _this.inputModel = _this.registerDisposable(new Form.DelegatingListModel());
+        _this.formValueModel = _this.registerDisposable(new Form.DelegatingListModel());
+        _this.componentListModel = new MutableListModel();
         _this.setValueIsInProgress = new Guard();
         _this.valueChange = new EventEmitter();
-        var when = Dsl.disposeWith(_this).when;
-        when(_this.inputModel).changes(function (value) { return _this.valueChange.emit(value); }, {
+        var _a = Dsl.disposeWith(_this), when = _a.when, valueOf = _a.valueOf, chain = _a.chain;
+        var binding = new Binding.Identity(_this.formValueModel, _this.componentListModel);
+        var inExternalChange = valueOf.any(_this.setValueIsInProgress, chain(binding.direction).equals(Binding.Direction.RIGHT)).areTruthy();
+        when(_this.componentListModel).changes(function (is, was) {
+            _this.valueChange.emit(is);
+            _this.onValueEditedListeners.fire(function (l) { return l(is, was); });
+        }, {
             initialValue: 'ignore',
-            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
         });
-        DebugContext.tag(_this.inputModel, _this.constructor.name + ".inputModel");
+        DebugContext.tag(_this.formValueModel, _this.constructor.name + ".formValueModel");
         return _this;
     }
     Object.defineProperty(AbstractListInputComponent.prototype, "value", {
+        // We add support for simple direct display of values by allowing components to be used
+        // by `component.value = ...`  This use of the component without a value model in tables
+        // and the like.
         set: function (value) {
             var _this = this;
             this.setValueIsInProgress.whileTrue(function () {
-                if (!_this.listHolder) {
-                    _this.listHolder = new MutableListModel(value);
-                    _this.listModel = _this.listHolder;
-                }
-                else {
-                    _this.listHolder.value = value;
-                }
+                _this.componentListModel.value = value;
             });
         },
         enumerable: true,
         configurable: true
     });
     __decorate([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        Input(), TrackExternal({ delegateTo: 'formValueModel' }),
         __metadata("design:type", Object)
     ], AbstractListInputComponent.prototype, "listModel", void 0);
     __decorate([
@@ -778,38 +792,41 @@ var AbstractValueInputComponent = /** @class */ (function (_super) {
          * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
          */
         // We have to register it as a disposable so it ditches any listeners when we're disposed.
-        _this.inputModel = _this.registerDisposable(new Form.DelegatingValueModel());
+        _this.formValueModel = _this.registerDisposable(new Form.DelegatingValueModel());
         _this.setValueInProgress = new Guard();
+        _this.componentValueModel = new MutableValueModel();
         _this.valueChange = new EventEmitter();
-        var when = Dsl.disposeWith(_this).when;
-        when(_this.inputModel).changes(function (value) { return _this.valueChange.emit(value); }, {
+        var _a = Dsl.disposeWith(_this), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
+        var binding = new Binding.Identity(_this.formValueModel, _this.componentValueModel);
+        var inExternalChange = valueOf.any(_this.setValueInProgress, chain(binding.direction).equals(Binding.Direction.RIGHT)).areTruthy();
+        when(_this.componentValueModel).changes(function (is, was) {
+            _this.valueChange.emit(is);
+            _this.onValueEditedListeners.fire(function (l) { return l(is, was); });
+        }, {
             initialValue: 'ignore',
-            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
         });
-        DebugContext.tag(_this.inputModel, _this.constructor.name + ".inputModel");
+        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 MutableValueModel(value);
-                    _this.valueModel = _this.valueHolder;
-                }
-                else {
-                    _this.valueHolder.value = value;
-                }
+                _this.componentValueModel.value = value;
             });
         },
         enumerable: true,
         configurable: true
     });
     __decorate([
-        Input(), TrackExternal({ delegateTo: 'inputModel' }),
+        Input(), TrackExternal({ delegateTo: 'formValueModel' }),
         __metadata("design:type", Object)
     ], AbstractValueInputComponent.prototype, "valueModel", void 0);
     __decorate([
@@ -847,8 +864,6 @@ var AutocompleteInputComponent = /** @class */ (function (_super) {
             .select(function (option) {
             return ___default.isEmpty(_this.filterValue.value) || _this.optionLabelFormat(option).toString().toLowerCase().includes(lowerCaseFilterValue.value);
         }, { dependsOn: lowerCaseFilterValue });
-        var txo = new TransactionObserver().onEvent(function (e) { return console.log(e.name, e.payload); });
-        txo.observe('this.valueModel', _this.valueModel);
         return _this;
     }
     AutocompleteInputComponent.prototype.ngOnInit = function () {
@@ -889,7 +904,7 @@ var AutocompleteInputComponent = /** @class */ (function (_super) {
     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]=\"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", [])
@@ -920,7 +935,7 @@ var CheckboxInputComponent = /** @class */ (function (_super) {
     CheckboxInputComponent = __decorate([
         Component({
             selector: 'aup-checkbox-input',
-            template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"valueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
+            template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
             styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
         }),
         __metadata("design:paramtypes", [])
@@ -967,7 +982,7 @@ var MultipleSelectInputComponent = /** @class */ (function (_super) {
     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 *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", [])
@@ -998,7 +1013,7 @@ var NumberInputComponent = /** @class */ (function (_super) {
     NumberInputComponent = __decorate([
         Component({
             selector: 'aup-number-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
             styles: [""]
         }),
         __metadata("design:paramtypes", [])
@@ -1018,7 +1033,7 @@ var PasswordInputComponent = /** @class */ (function (_super) {
     PasswordInputComponent = __decorate([
         Component({
             selector: 'aup-password-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
             styles: [""]
         }),
         __metadata("design:paramtypes", [])
@@ -1073,7 +1088,7 @@ var SelectInputComponent = /** @class */ (function (_super) {
     SelectInputComponent = __decorate([
         Component({
             selector: 'aup-select-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">\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", [])
@@ -1087,9 +1102,9 @@ var StringInputComponent = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
         _this.clearCommand = Command.create(function () {
-            _this.valueModel.value = null;
+            _this.componentValueModel.value = null;
         });
-        _this.clearCommand.disableWhile(chain.stringValue(_this.valueModel).isBlank());
+        _this.clearCommand.disableWhile(chain.stringValue(_this.componentValueModel).isBlank());
         return _this;
     }
     StringInputComponent.prototype.ngOnInit = function () {
@@ -1105,7 +1120,7 @@ var StringInputComponent = /** @class */ (function (_super) {
     StringInputComponent = __decorate([
         Component({
             selector: 'aup-string-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
             styles: ["button[disabled]{visibility:hidden}"]
         }),
         __metadata("design:paramtypes", [])
@@ -1136,7 +1151,7 @@ var TextInputComponent = /** @class */ (function (_super) {
     TextInputComponent = __decorate([
         Component({
             selector: 'aup-text-input',
-            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+            template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"componentValueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
             styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}"]
         }),
         __metadata("design:paramtypes", [])