@coolon/angular-ui-powerups 1.21.0 → 2.0.0-alpha.1

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

@@ -1,6 +1,6 @@
 import { __extends, __decorate, __metadata, __param, __assign, __awaiter, __generator, __spread } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, ContentChild, TemplateRef, Component, Self, HostBinding, EventEmitter, Output, ChangeDetectorRef, ContentChildren, QueryList, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, ViewChild, ViewChildren, Optional, SkipSelf } from '@angular/core';
+import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, ContentChild, TemplateRef, Component, Self, HostBinding, EventEmitter, Output, ChangeDetectorRef, ContentChildren, QueryList, ViewEncapsulation, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver, ViewChild, ViewChildren, Optional, SkipSelf } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -13,7 +13,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, FocusManager, DelegatingFormListModel, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, MutableListModel, Form, DelegatingCommand, Deferred, Trace, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, FocusManager, Form, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, MutableListModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
 import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import ___default, { isEqual, isNil } from 'lodash';
@@ -688,14 +688,14 @@ var AbstractListInputComponent = /** @class */ (function (_super) {
          * A backing model for all our @Input() valueModel properties which should be defined as follows.
          *
          *    @Input() @TrackExternal({useExisting: "inputModel"})
-         *    valueModel: FormListModel<string> | IMutableListModel<string>;
+         *    valueModel: Form.ListModelBase<string> | IMutableListModel<string>;
          *
          * This approach allows the input to accept plain or form models but all backed by a form
          * friendly delegate.  We have to use an existing delegate for union types as pectin just
          * 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 DelegatingFormListModel());
+        _this.inputModel = _this.registerDisposable(new Form.DelegatingListModel());
         return _this;
     }
     AbstractListInputComponent = __decorate([
@@ -707,23 +707,29 @@ var AbstractListInputComponent = /** @class */ (function (_super) {
 var AbstractValueInputComponent = /** @class */ (function (_super) {
     __extends(AbstractValueInputComponent, _super);
     function AbstractValueInputComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super.call(this) || this;
         /**
          * A backing model for all our @Input() valueModel properties which should be defined as follows.
          *
          *    @Input() @TrackExternal({useExisting: "inputModel"})
-         *    valueModel: FormValueModel<string> | IMutableValueModel<string>;
+         *    valueModel:  DirtyTrackingForm.ValueModel<string> | IMutableValueModel<string>;
          *
          * This approach allows the input to accept plain or form models but all backed by a form
          * friendly delegate.  We have to use an existing delegate for union types as pectin just
          * 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 DelegatingFormValueModel());
+        _this.inputModel = _this.registerDisposable(new Form.DelegatingValueModel());
+        _this.inputModel.onTransactionStart(function (tx) {
+            tx.onRootTransactionFinalised(function () {
+                console.log({ changed: tx.hasChanged() });
+            });
+        });
         return _this;
     }
     AbstractValueInputComponent = __decorate([
-        Component({ template: '' })
+        Component({ template: '' }),
+        __metadata("design:paramtypes", [])
     ], AbstractValueInputComponent);
     return AbstractValueInputComponent;
 }(AbstractInputComponent));
@@ -802,7 +808,7 @@ var PasswordInputComponent = /** @class */ (function (_super) {
     PasswordInputComponent.prototype.ngOnInit = function () {
     };
     __decorate([
-        Input(), TrackExternal({ delegateTo: "inputModel" }),
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
         __metadata("design:type", Object)
     ], PasswordInputComponent.prototype, "valueModel", void 0);
     PasswordInputComponent = __decorate([
@@ -826,7 +832,7 @@ var SelectInputComponent = /** @class */ (function (_super) {
     SelectInputComponent.prototype.ngOnInit = function () {
     };
     __decorate([
-        Input(), TrackExternal({ delegateTo: "inputModel" }),
+        Input(), TrackExternal({ delegateTo: 'inputModel' }),
         __metadata("design:type", Object)
     ], SelectInputComponent.prototype, "valueModel", void 0);
     __decorate([
@@ -846,11 +852,11 @@ var SelectInputComponent = /** @class */ (function (_super) {
         __metadata("design:type", Boolean)
     ], SelectInputComponent.prototype, "allowNil", void 0);
     __decorate([
-        ContentChild("optionTemplate"),
+        ContentChild('optionTemplate'),
         __metadata("design:type", TemplateRef)
     ], SelectInputComponent.prototype, "optionTemplateRef", void 0);
     __decorate([
-        ContentChild("nilOptionTemplate"),
+        ContentChild('nilOptionTemplate'),
         __metadata("design:type", TemplateRef)
     ], SelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
     __decorate([
@@ -1706,7 +1712,7 @@ var RowClass = /** @class */ (function () {
  * }
  * const colorsNames: ListModel<string> = ...;
  * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+ *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel:  DirtyTrackingForm.ValueModel<string> | ValueModel<string>; }
  *   table.pluck("lastName").cellEditor(StringInputComponent, {
  *     validators: [Validator.present("We need a last name")]
  *   });
@@ -1735,7 +1741,7 @@ var RowClass = /** @class */ (function () {
  *        // configure your component with what ever you need.
  *      });
  *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
- *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+ *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel:  DirtyTrackingForm.ValueModel<string> | ValueModel<string>; }
  *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
  * });
  *
@@ -1764,7 +1770,7 @@ var TableModel = /** @class */ (function () {
         this._columns = new MutableListModel();
         this._editorSessions = new MutableListModel();
         this.rowClassNamePredicates = [];
-        this._createForm = function (row) { return new Form(); };
+        this._createForm = function (row) { return new DirtyTrackingForm(); };
         this.identityOf = sourceOfTruth.identityOf;
         var _a = Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
         this._columnsById = chain(this._columns).indexBy('columnId');
@@ -1973,7 +1979,8 @@ var TableComponent = /** @class */ (function (_super) {
     TableComponent = __decorate([
         Component({
             selector: 'aup-table',
-            template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.getTrackByFunction()\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" (click)=\"onCellClicked(column, row)\" [class.enable-cursor]=\"tableModel.isRowSelectionEnabledFor(column)\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\n      ></aup-table-cell-renderer>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnIds.value;\"\n      [ngClass]=\"tableModel.getRowClasses(row)\"\n  ></tr>\n\n</table>\n",
+            template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.getTrackByFunction()\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [attr.column-id]=\"column.columnId\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" (click)=\"onCellClicked(column, row)\" [class.enable-cursor]=\"tableModel.isRowSelectionEnabledFor(column)\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\n      ></aup-table-cell-renderer>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnIds.value;\"\n      [ngClass]=\"tableModel.getRowClasses(row)\"\n  ></tr>\n\n</table>\n",
+            encapsulation: ViewEncapsulation.None,
             styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}"]
         }),
         __metadata("design:paramtypes", [])
@@ -3571,7 +3578,7 @@ var AbstractInputActivity = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.data = data;
         _this.class = 'aup-input-activity';
-        var form = new Form();
+        var form = new DirtyTrackingForm();
         _this.valueModel = form.valueModel(_this.data.initialValue);
         _this.valueModel.validateUsing(data.validators || []);
         _this.confirmCommand = Command.create(function () {