@coolon/angular-ui-powerups 1.19.1 → 1.21.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.
 
+## [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)
+
+
+### Features
+
+* adde more styling options to aup-add-item-interaction-context ([d1253f5](https://bitbucket.org/coolon/angular-ui-powerups/commit/d1253f566659a2603c21093fa84e581e2bd3b62b))
+* added section-header component ([ec2ca50](https://bitbucket.org/coolon/angular-ui-powerups/commit/ec2ca50818b22f5b19985a5ce0a53ca932d046ed))
+
 ### [1.19.1](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.19.0...v1.19.1) (2020-06-25)
 
 

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;
@@ -1139,6 +1139,28 @@
         return ScrollContainerComponent;
     }());
 
+    var SectionHeaderComponent = /** @class */ (function () {
+        function SectionHeaderComponent() {
+            this.underline = false;
+        }
+        SectionHeaderComponent.prototype.ngOnInit = function () {
+        };
+        __decorate([
+            core.Input(),
+            core.HostBinding('class.underline'),
+            __metadata("design:type", Object)
+        ], SectionHeaderComponent.prototype, "underline", void 0);
+        SectionHeaderComponent = __decorate([
+            core.Component({
+                selector: 'aup-section-header',
+                template: "<ng-content></ng-content>\n",
+                styles: [":host{--def-border-bottom-color:var(--border-bottom-color, rgba(0, 0, 0, 0.07));display:block;padding:8px 16px;font-size:12px;line-height:12px;color:rgba(0,0,0,.5)}:host.underline{border-bottom:1px solid var(--def-border-bottom-color)}"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], SectionHeaderComponent);
+        return SectionHeaderComponent;
+    }());
+
     var SwitchCaseOption = /** @class */ (function () {
         function SwitchCaseOption(templateRef) {
             this.templateRef = templateRef;
@@ -1829,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
@@ -1901,10 +1930,12 @@
      */
     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.rowClassNamePredicates = [];
             this._createForm = function (row) { return new pectin.Form(); };
             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;
@@ -1917,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) {
@@ -1965,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;
@@ -2101,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", [])
@@ -2424,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;
     }());
@@ -2498,7 +2545,8 @@
                     DefaultHeaderCellRendererComponent,
                     TableHeaderCellRendererComponent,
                     MultipleSelectInputComponent,
-                    IconComponent
+                    IconComponent,
+                    SectionHeaderComponent
                 ],
                 imports: [
                     common.CommonModule,
@@ -2515,7 +2563,8 @@
                     table.MatTableModule,
                     portal.PortalModule,
                     scrolling.CdkScrollableModule,
-                    angularFontawesome.FontAwesomeModule
+                    angularFontawesome.FontAwesomeModule,
+                    tooltip.MatTooltipModule
                 ],
                 exports: [
                     NumberInputComponent,
@@ -2537,7 +2586,8 @@
                     EditRowControls,
                     ColumnTemplateDirective,
                     MultipleSelectInputComponent,
-                    IconComponent
+                    IconComponent,
+                    SectionHeaderComponent
                 ],
                 providers: [
                     FocusBindingFactory,
@@ -3181,7 +3231,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵbu = /** @class */ (function () {
+    exports.ɵbv = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -3326,7 +3376,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵbu || (exports.ɵbu = {}));
+    })(exports.ɵbv || (exports.ɵbv = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -3384,7 +3434,7 @@
             return this.activityContainerComponent.startActivity(activityType, data, options);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbu },
+            { type: exports.ɵbv },
             { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
         ]; };
         __decorate([
@@ -3402,15 +3452,25 @@
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
             __param(1, core.Inject(tabs.MAT_TABS_CONFIG)), __param(1, core.Optional()),
-            __metadata("design:paramtypes", [exports.ɵbu, Object])
+            __metadata("design:paramtypes", [exports.ɵbv, Object])
         ], InPlaceInteractionContextComponent);
         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() {
             var _this = _super.call(this) || this;
+            _this.icon = "mat:add";
             _this.tabindex = 0;
             _this.clickCommand = pectin.Command.create(function (context) {
                 if (_this.activityClass) {
@@ -3440,6 +3500,10 @@
             core.Input(),
             __metadata("design:type", String)
         ], AddItemInteractionContextComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AddItemInteractionContextComponent.prototype, "icon", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
@@ -3469,8 +3533,8 @@
         AddItemInteractionContextComponent = __decorate([
             core.Component({
                 selector: 'aup-add-item-interaction-context',
-                template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><aup-icon icon=\"mat:add\"></aup-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n",
-                styles: [":host{--def-link-color:var(--link-color, currentColor);--def-link-backgound:var(--link-background, 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{--link-background:rgba(0,0,0,0.1)}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}"]
+                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-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);
@@ -3927,7 +3991,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵbu
+                    exports.ɵbv
                     // {
                     //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
                     // }
@@ -5049,7 +5113,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵbx = /** @class */ (function () {
+    exports.ɵby = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -5186,7 +5250,7 @@
         //   }
         //
         // }
-    })(exports.ɵbx || (exports.ɵbx = {}));
+    })(exports.ɵby || (exports.ɵby = {}));
 
     exports.UrlSnapshot = /** @class */ (function () {
         // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
@@ -5709,11 +5773,11 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵbu },
+            { type: exports.ɵbv },
             { type: UrlService },
-            { type: exports.ɵbx }
+            { type: exports.ɵby }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbu), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵbx)); }, token: PlaceRouter, providedIn: "root" });
+        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbv), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵby)); }, token: PlaceRouter, providedIn: "root" });
         __decorate([
             pectin.Trace(),
             __metadata("design:type", Function),
@@ -5726,9 +5790,9 @@
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵbu,
+                exports.ɵbv,
                 UrlService,
-                exports.ɵbx])
+                exports.ɵby])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
@@ -6193,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])
@@ -6862,7 +6926,7 @@
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵbu;
+    exports.InteractionService = exports.ɵbv;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
@@ -6882,7 +6946,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵbx;
+    exports.PlaceHistory = exports.ɵby;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -6896,6 +6960,7 @@
     exports.ResizeAwareComponent = ResizeAwareComponent;
     exports.RouteId = RouteId;
     exports.ScrollContainerComponent = ScrollContainerComponent;
+    exports.SectionHeaderComponent = SectionHeaderComponent;
     exports.SelectCellRendererComponent = SelectCellRendererComponent;
     exports.SelectHeaderCellRendererComponent = SelectHeaderCellRendererComponent;
     exports.SelectInputActivity = SelectInputActivity;
@@ -6941,39 +7006,40 @@
     exports.ɵbh = TableHeaderCellRendererComponent;
     exports.ɵbi = MultipleSelectInputComponent;
     exports.ɵbj = IconComponent;
-    exports.ɵbk = PlaceModule;
-    exports.ɵbl = ComponentsModule;
-    exports.ɵbm = EmptyStateComponent;
-    exports.ɵbn = BusyOverlayComponent;
-    exports.ɵbo = PlaceOutletComponent;
-    exports.ɵbp = leftRightPlaceAnimation;
-    exports.ɵbq = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵbr = AUP_PLACE_CONFIG;
-    exports.ɵbt = PlaceRouter;
-    exports.ɵbv = ModalInteractionContextFactory;
-    exports.ɵbw = UrlService;
-    exports.ɵby = TabbedPlaceNavigationComponent;
-    exports.ɵbz = AbstractPlaceNavigationComponent;
+    exports.ɵbk = SectionHeaderComponent;
+    exports.ɵbl = PlaceModule;
+    exports.ɵbm = ComponentsModule;
+    exports.ɵbn = EmptyStateComponent;
+    exports.ɵbo = BusyOverlayComponent;
+    exports.ɵbp = PlaceOutletComponent;
+    exports.ɵbq = leftRightPlaceAnimation;
+    exports.ɵbr = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵbs = AUP_PLACE_CONFIG;
+    exports.ɵbu = PlaceRouter;
+    exports.ɵbw = ModalInteractionContextFactory;
+    exports.ɵbx = UrlService;
+    exports.ɵbz = TabbedPlaceNavigationComponent;
     exports.ɵc = FocusBindingDirective;
-    exports.ɵca = ListPlaceNavComponent;
-    exports.ɵcb = SidePlaceNavigationComponent;
-    exports.ɵcc = InteractionModule;
-    exports.ɵcd = ActivityContainerComponent;
-    exports.ɵce = AbstractInteractionContext;
-    exports.ɵcf = ActivityOutletComponent;
-    exports.ɵcg = ConfirmationDialogComponent;
-    exports.ɵch = ACTIVITY_DATA;
-    exports.ɵci = Activity;
-    exports.ɵck = ConfirmThenDialogComponent;
-    exports.ɵcl = AlertDialogComponent;
-    exports.ɵcn = InPlaceInteractionContextComponent;
-    exports.ɵco = AddItemInteractionContextComponent;
-    exports.ɵcp = ActivityActionsComponent;
-    exports.ɵcq = PopupInteractionContextComponent;
-    exports.ɵcr = StringInputActivity;
-    exports.ɵcs = AbstractInputActivity;
-    exports.ɵct = SelectInputActivity;
-    exports.ɵcu = InteractionContextTriggerFor;
+    exports.ɵca = AbstractPlaceNavigationComponent;
+    exports.ɵcb = ListPlaceNavComponent;
+    exports.ɵcc = SidePlaceNavigationComponent;
+    exports.ɵcd = InteractionModule;
+    exports.ɵce = ActivityContainerComponent;
+    exports.ɵcf = AbstractInteractionContext;
+    exports.ɵcg = ActivityOutletComponent;
+    exports.ɵch = ConfirmationDialogComponent;
+    exports.ɵci = ACTIVITY_DATA;
+    exports.ɵcj = Activity;
+    exports.ɵcl = ConfirmThenDialogComponent;
+    exports.ɵcm = AlertDialogComponent;
+    exports.ɵco = InPlaceInteractionContextComponent;
+    exports.ɵcp = AddItemInteractionContextComponent;
+    exports.ɵcq = ActivityActionsComponent;
+    exports.ɵcr = PopupInteractionContextComponent;
+    exports.ɵcs = StringInputActivity;
+    exports.ɵct = AbstractInputActivity;
+    exports.ɵcu = SelectInputActivity;
+    exports.ɵcv = InteractionContextTriggerFor;
     exports.ɵd = DisposableComponent;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;