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

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.21.0...v2.0.0-alpha.0) (2020-07-02)
+
+
+### ⚠ BREAKING CHANGES
+
+* updated to pectin 3.0
+
+* updated to pectin 3.0 ([5c2ca5c](https://bitbucket.org/coolon/angular-ui-powerups/commit/5c2ca5c39789f9f38a8bd36a2d1401349550e62c))
+
+## [1.21.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.20.0...v1.21.0) (2020-06-30)
+
+
+### Features
+
+* added row class specifiers to table model ([1ab39cf](https://bitbucket.org/coolon/angular-ui-powerups/commit/1ab39cf3375114659beaf3dada5a3b479f03867e))
+
+
+### Bug Fixes
+
+* fixed icon failing to update when icon type changed ([24d3e87](https://bitbucket.org/coolon/angular-ui-powerups/commit/24d3e875768db3609e41fcc842c1219961e0a7bf))
+
 ## [1.20.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.19.1...v1.20.0) (2020-06-26)
 
 

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/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('@angular/material/tooltip'), 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/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@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.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, 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, flexLayout, dialog, router, overlay, ResizeObserver, progressSpinner, list, tooltip, 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/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';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     produce = produce && Object.prototype.hasOwnProperty.call(produce, 'default') ? produce['default'] : produce;
@@ -860,14 +860,14 @@
              * 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 pectin.DelegatingFormListModel());
+            _this.inputModel = _this.registerDisposable(new pectin.Form.DelegatingListModel());
             return _this;
         }
         AbstractListInputComponent = __decorate([
@@ -884,14 +884,14 @@
              * 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 pectin.DelegatingFormValueModel());
+            _this.inputModel = _this.registerDisposable(new pectin.Form.DelegatingValueModel());
             return _this;
         }
         AbstractValueInputComponent = __decorate([
@@ -974,7 +974,7 @@
         PasswordInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: "inputModel" }),
+            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
             __metadata("design:type", Object)
         ], PasswordInputComponent.prototype, "valueModel", void 0);
         PasswordInputComponent = __decorate([
@@ -998,7 +998,7 @@
         SelectInputComponent.prototype.ngOnInit = function () {
         };
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: "inputModel" }),
+            core.Input(), pectin.TrackExternal({ delegateTo: 'inputModel' }),
             __metadata("design:type", Object)
         ], SelectInputComponent.prototype, "valueModel", void 0);
         __decorate([
@@ -1018,11 +1018,11 @@
             __metadata("design:type", Boolean)
         ], SelectInputComponent.prototype, "allowNil", void 0);
         __decorate([
-            core.ContentChild("optionTemplate"),
+            core.ContentChild('optionTemplate'),
             __metadata("design:type", core.TemplateRef)
         ], SelectInputComponent.prototype, "optionTemplateRef", void 0);
         __decorate([
-            core.ContentChild("nilOptionTemplate"),
+            core.ContentChild('nilOptionTemplate'),
             __metadata("design:type", core.TemplateRef)
         ], SelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
         __decorate([
@@ -1851,6 +1851,13 @@
 
     // export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
     // export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
+    var RowClass = /** @class */ (function () {
+        function RowClass(className, matches) {
+            this.className = className;
+            this.matches = matches;
+        }
+        return RowClass;
+    }());
     /**
      * Example:
      * @example
@@ -1871,7 +1878,7 @@
      * }
      * 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")]
      *   });
@@ -1900,7 +1907,7 @@
      *        // 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}`);
      * });
      *
@@ -1923,11 +1930,13 @@
      */
     var TableModel = /** @class */ (function () {
         function TableModel(sourceOfTruth) {
+            var _this = this;
             this.sourceOfTruth = sourceOfTruth;
             this._garbage = new pectin.GarbageCollector();
             this._columns = new pectin.MutableListModel();
             this._editorSessions = new pectin.MutableListModel();
-            this._createForm = function (row) { return new pectin.Form(); };
+            this.rowClassNamePredicates = [];
+            this._createForm = function (row) { return new pectin.DirtyTrackingForm(); };
             this.identityOf = sourceOfTruth.identityOf;
             var _a = pectin.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');
@@ -1939,6 +1948,7 @@
             this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
             this.firstEditableColumn = chain(this.columns).select(function (c) { return c.hasEditorPortal(); }).first();
             this.hasColumnsWithRowSelectionExplicitlyEnabled = chain(this._columns).findIndex(function (column) { return column.isRowSelectionExplicitlyEnabled(); }).isGreaterThanOrEqualTo(0);
+            this.addRowClass("enable-hover", function () { return _this.isRowSelectionEnabled(); });
         }
         TableModel_1 = TableModel;
         TableModel.fromList = function (sourceOfTruth, builder) {
@@ -1987,6 +1997,18 @@
         TableModel.prototype.addTemplateColumn = function (columnId) {
             return this.addColumn(new CustomTemplateColumnModel(columnId, this));
         };
+        TableModel.prototype.addRowClass = function (className, predicate) {
+            this.rowClassNamePredicates.push(new RowClass(className, predicate));
+        };
+        TableModel.prototype.getRowClasses = function (row) {
+            var classNames = [];
+            this.rowClassNamePredicates.forEach(function (i) {
+                if (i.matches(row)) {
+                    classNames.push(i.className);
+                }
+            });
+            return classNames;
+        };
         TableModel.prototype.useFormFactory = function (factory) {
             this._createForm = factory;
             return this;
@@ -2123,7 +2145,7 @@
         TableComponent = __decorate([
             core.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;\" [class.enable-hover]=\"tableModel.isRowSelectionEnabled()\"></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                                      [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",
                 styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}"]
             }),
             __metadata("design:paramtypes", [])
@@ -2446,38 +2468,41 @@
     var IconComponent = /** @class */ (function () {
         function IconComponent() {
         }
-        IconComponent.prototype.ligature = function () {
-            if (this.icon.startsWith('mat:')) {
-                return this.icon.slice(4);
-            }
-            if (!this.icon.includes(":")) {
-                return this.icon;
-            }
-        };
-        IconComponent.prototype.svgIcon = function () {
-            if (this.icon.startsWith('svg:')) {
-                return this.icon.slice(4);
-            }
-        };
-        IconComponent.prototype.isFontAwesome = function () {
-            return this.icon.startsWith('fab:');
-        };
-        IconComponent.prototype.fontAwesomeIcon = function () {
-            if (this.isFontAwesome()) {
-                return this.icon.slice(4);
-            }
-        };
+        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)
-        ], IconComponent.prototype, "icon", void 0);
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [String])
+        ], IconComponent.prototype, "icon", null);
         IconComponent = __decorate([
             core.Component({
                 selector: 'aup-icon',
-                template: "<mat-icon *ngIf=\"!isFontAwesome()\"\n          [svgIcon]=\"svgIcon()\">\n  {{ligature()}}\n</mat-icon>\n<fa-icon *ngIf=\"isFontAwesome()\"\n         [icon]=\"fontAwesomeIcon()\">\n</fa-icon>\n\n",
-                styles: [":host{display:inline-flex;width:24px}fa-icon{width:100%;text-align:center}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}"]
-            }),
-            __metadata("design:paramtypes", [])
+                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;
     }());
@@ -2538,7 +2563,8 @@
                     table.MatTableModule,
                     portal.PortalModule,
                     scrolling.CdkScrollableModule,
-                    angularFontawesome.FontAwesomeModule
+                    angularFontawesome.FontAwesomeModule,
+                    tooltip.MatTooltipModule
                 ],
                 exports: [
                     NumberInputComponent,
@@ -3431,6 +3457,15 @@
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
 
+    /**
+     * Css Vars.
+     *   --link-color
+     *   --link-color-hover
+     *   --link-background
+     *   --link-background-hover
+     *   --link-border-radius
+     *   --link-padding
+     */
     var AddItemInteractionContextComponent = /** @class */ (function (_super) {
         __extends(AddItemInteractionContextComponent, _super);
         function AddItemInteractionContextComponent() {
@@ -3499,7 +3534,7 @@
             core.Component({
                 selector: 'aup-add-item-interaction-context',
                 template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><aup-icon [icon]=\"icon\"></aup-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n",
-                styles: [":host{--def-link-color:var(--link-color, currentColor);--def-link-color-hover:var(--link-color-hover, currentColor);--def-link-backgound:var(--link-background, transparent);--def-link-backgound-hover:var(--link-background-hover, rgba(0, 0, 0, 0.05));--def-link-border-radius:var(--link-border-radius, 4px);--def-link-padding:var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:0}:host:hover a.link{color:var(--def-link-color-hover);background-color:var(--def-link-backgound-hover)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-backgound);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}"]
+                styles: [":host{--def-link-color:var(--link-color, currentColor);--def-link-color-hover:var(--link-color-hover, currentColor);--def-link-background:var(--link-background, transparent);--def-link-background-hover:var(--link-background-hover, rgba(0, 0, 0, 0.05));--def-link-border-radius:var(--link-border-radius, 4px);--def-link-padding:var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:0}:host:hover a.link{color:var(--def-link-color-hover);background-color:var(--def-link-background-hover)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-background);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}"]
             }),
             __metadata("design:paramtypes", [])
         ], AddItemInteractionContextComponent);
@@ -3708,7 +3743,7 @@
             var _this = _super.call(this) || this;
             _this.data = data;
             _this.class = 'aup-input-activity';
-            var form = new pectin.Form();
+            var form = new pectin.DirtyTrackingForm();
             _this.valueModel = form.valueModel(_this.data.initialValue);
             _this.valueModel.validateUsing(data.validators || []);
             _this.confirmCommand = pectin.Command.create(function () {
@@ -6222,7 +6257,7 @@
         SidePlaceNavigationComponent = __decorate([
             core.Component({
                 selector: 'aup-side-place-navigation',
-                template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span\n      class=\"expanded-only\">{{getNav(placeDefinition).title()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
+                template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNav(placeDefinition).icon()\" [icon]=\"getNav(placeDefinition).icon()\"></aup-icon>\n    <span\n      class=\"expanded-only\">{{getNav(placeDefinition).title()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
                 styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width:var(--nav-width, 56px);--resolved-nav-item-height:var(--nav-item-height, var(--resolved-nav-item-width));--resolved-expanded-width:var(--nav-expanded-width, 235px);--resolved-color:var(--nav-color, rgba(255, 255, 255, 0.9));--resolved-background-color:var(--nav-background-color, #555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}"]
             }),
             __metadata("design:paramtypes", [router.Router, PlaceRouter])