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

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

@@ -13,13 +13,14 @@ 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';
 import produce from 'immer';
 import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
@@ -27,7 +28,6 @@ import { Overlay, CdkScrollable } from '@angular/cdk/overlay';
 import ResizeObserver from 'resize-observer-polyfill';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatListModule } from '@angular/material/list';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
@@ -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([
@@ -712,14 +712,14 @@ var AbstractValueInputComponent = /** @class */ (function (_super) {
          * 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());
         return _this;
     }
     AbstractValueInputComponent = __decorate([
@@ -802,7 +802,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 +826,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 +846,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([
@@ -1679,6 +1679,13 @@ var SelectionColumnModel = /** @class */ (function (_super) {
 
 // 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
@@ -1699,7 +1706,7 @@ var SelectionColumnModel = /** @class */ (function (_super) {
  * }
  * 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")]
  *   });
@@ -1728,7 +1735,7 @@ var SelectionColumnModel = /** @class */ (function (_super) {
  *        // 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}`);
  * });
  *
@@ -1751,11 +1758,13 @@ var SelectionColumnModel = /** @class */ (function (_super) {
  */
 var TableModel = /** @class */ (function () {
     function TableModel(sourceOfTruth) {
+        var _this = this;
         this.sourceOfTruth = sourceOfTruth;
         this._garbage = new GarbageCollector();
         this._columns = new MutableListModel();
         this._editorSessions = new MutableListModel();
-        this._createForm = function (row) { return new Form(); };
+        this.rowClassNamePredicates = [];
+        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');
@@ -1767,6 +1776,7 @@ var TableModel = /** @class */ (function () {
         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) {
@@ -1815,6 +1825,18 @@ var TableModel = /** @class */ (function () {
     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;
@@ -1951,7 +1973,7 @@ 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;\" [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", [])
@@ -2274,38 +2296,41 @@ var MultipleSelectInputComponent = /** @class */ (function (_super) {
 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([
         Input(),
-        __metadata("design:type", String)
-    ], IconComponent.prototype, "icon", void 0);
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], IconComponent.prototype, "icon", null);
     IconComponent = __decorate([
         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;
 }());
@@ -2366,7 +2391,8 @@ var ComponentsModule = /** @class */ (function () {
                 MatTableModule,
                 PortalModule,
                 CdkScrollableModule,
-                FontAwesomeModule
+                FontAwesomeModule,
+                MatTooltipModule
             ],
             exports: [
                 NumberInputComponent,
@@ -3259,6 +3285,15 @@ var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
     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() {
@@ -3327,7 +3362,7 @@ var AddItemInteractionContextComponent = /** @class */ (function (_super) {
         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);
@@ -3536,7 +3571,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 () {
@@ -6050,7 +6085,7 @@ var SidePlaceNavigationComponent = /** @class */ (function (_super) {
     SidePlaceNavigationComponent = __decorate([
         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, PlaceRouter])