@coolon/angular-ui-powerups 1.4.1 → 1.5.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.5.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.4.2...v1.5.0) (2020-05-22)
+
+
+### Features
+
+* added CardContainerComponent ([21730e9](https://bitbucket.org/coolon/angular-ui-powerups/commit/21730e99ea04ebd09b2a94c1496a882ad63d2c54))
+* added SidePlaceNavigationComponent ([17d201d](https://bitbucket.org/coolon/angular-ui-powerups/commit/17d201d7048626232ee6348b9e3b9be2e87dfb35))
+
+
+### Bug Fixes
+
+* corrected place-builder ts compiler include error message ([72e46d8](https://bitbucket.org/coolon/angular-ui-powerups/commit/72e46d8f8073cc84b5c3fe936cc1a63ebadc5891))
+* updated to extend DisposableComponent to ensure garbage collection ([558dd10](https://bitbucket.org/coolon/angular-ui-powerups/commit/558dd103ed1f749e41c4e411f05292721560d8ac))
+
+### [1.4.2](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.4.1...v1.4.2) (2020-05-21)
+
+
+### Bug Fixes
+
+* missing dispose of focusContext ([6edfc2f](https://bitbucket.org/coolon/angular-ui-powerups/commit/6edfc2faad04095cb25948d545ccce552f0bf0d0))
+* reinstated arrowLeft/Right commands ([869be40](https://bitbucket.org/coolon/angular-ui-powerups/commit/869be40b8e97eb995448404a779d87efcabafc1d))
+
 ### [1.4.1](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.4.0...v1.4.1) (2020-05-21)
 
 

package/assets/styles.scss

@@ -1,3 +1,5 @@
+@import "~@angular/material/theming";
+
 :root {
   --aup-default-padding: var(--default-padding, 18px);
 }
@@ -39,3 +41,33 @@
     right: 0;
   }
 }
+
+@mixin elevate-on-hover($height:2) {
+  @include mat-elevation-transition;
+  //@include mat-elevation(2);
+  &:hover {
+    @include mat-elevation($height);
+  }
+}
+
+@mixin new-card-placeholder-style($color: rgba(0,0,0,0.54), $background-color: rgba(255,255,255,0.8), $hover-color: $color, $background-hover-color: white) {
+  box-sizing: border-box;
+  border: 2px dashed rgba(0,0,0,0.1);
+  border-radius: 6px;
+
+  font-weight: 300;
+  cursor: pointer;
+  color: $color;
+  background-color: $background-color;
+  transition: all $mat-elevation-transition-duration $mat-elevation-transition-timing-function;
+
+  &:hover {
+    @include elevate-on-hover(4);
+    transition: all $mat-elevation-transition-duration $mat-elevation-transition-timing-function;
+    border-color: transparent;
+    background-color: $background-hover-color;
+    color: $hover-color;
+  }
+
+}
+

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/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('@angular/router'), require('@coolon/typescript-utilities'), require('lodash'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill'), 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/material/button', '@angular/material/checkbox', '@angular/material/icon', '@coolon/pectin', '@angular/cdk/portal', '@angular/material/dialog', '@angular/router', '@coolon/typescript-utilities', 'lodash', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill', '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.material.button, global.ng.material.checkbox, global.ng.material.icon, global.pectin, global.ng.cdk.portal, global.ng.material.dialog, global.ng.router, global.typescriptUtilities, global.___default, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver, global.rxjs));
-}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, button, checkbox, icon, pectin, portal, dialog, router, typescriptUtilities, ___default, progressSpinner, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver, 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/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('@angular/router'), require('@coolon/typescript-utilities'), require('lodash'), require('@angular/flex-layout'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill'), 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/material/button', '@angular/material/checkbox', '@angular/material/icon', '@coolon/pectin', '@angular/cdk/portal', '@angular/material/dialog', '@angular/router', '@coolon/typescript-utilities', 'lodash', '@angular/flex-layout', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill', '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.material.button, global.ng.material.checkbox, global.ng.material.icon, global.pectin, global.ng.cdk.portal, global.ng.material.dialog, global.ng.router, global.typescriptUtilities, global.___default, global.ng.flexLayout, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver, global.rxjs));
+}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, button, checkbox, icon, pectin, portal, dialog, router, typescriptUtilities, ___default, flexLayout, progressSpinner, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     ResizeObserver = ResizeObserver && Object.prototype.hasOwnProperty.call(ResizeObserver, 'default') ? ResizeObserver['default'] : ResizeObserver;
@@ -587,6 +587,7 @@
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             if (_this.focusManager) {
                 _this._focusContext = _this.focusManager.registerFocusable(_this);
+                _this.registerDisposable(_this._focusContext);
                 _this.registerDisposable(focusBindingFactory.createBinding(el.nativeElement, _this.focusContext));
             }
             return _this;
@@ -1143,32 +1144,20 @@
             _this.focusManager = focusManager;
             return _this;
         }
-        // The key listeners seem to be preventing manual binding
-        // @Input('command.arrowRight')
-        // @TrackExternal()
-        // rightArrowCommand: Command<void>;
-        //
-        // @Input('command.arrowLeft')
-        // @TrackExternal()
-        // leftArrowCommand: Command<void>;
-        //
-        // @HostListener('keyup.arrowLeft', ['$event'])
-        // arrowLeft(event: KeyboardEvent) {
-        //   if (this.leftArrowCommand.enabled.value) {
-        //     event.preventDefault();
-        //     event.stopPropagation();
-        //     this.leftArrowCommand.execute();
-        //   }
-        // }
-        //
-        // @HostListener('keyup.arrowRight', ['$event'])
-        // arrowRight(event: KeyboardEvent) {
-        //   if (this.rightArrowCommand.enabled.value) {
-        //     event.preventDefault();
-        //     event.stopPropagation();
-        //     this.rightArrowCommand.execute();
-        //   }
-        // }
+        VerticalFocusContainerComponent.prototype.arrowLeft = function (event) {
+            if (this.leftArrowCommand.enabled.value) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.leftArrowCommand.execute();
+            }
+        };
+        VerticalFocusContainerComponent.prototype.arrowRight = function (event) {
+            if (this.rightArrowCommand.enabled.value) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.rightArrowCommand.execute();
+            }
+        };
         VerticalFocusContainerComponent.prototype.arrowDown = function (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -1184,6 +1173,28 @@
         VerticalFocusContainerComponent.ctorParameters = function () { return [
             { type: pectin.FocusManager, decorators: [{ type: core.Self }] }
         ]; };
+        __decorate([
+            core.Input('command.arrowRight'),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], VerticalFocusContainerComponent.prototype, "rightArrowCommand", void 0);
+        __decorate([
+            core.Input('command.arrowLeft'),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], VerticalFocusContainerComponent.prototype, "leftArrowCommand", void 0);
+        __decorate([
+            core.HostListener('keyup.arrowLeft', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], VerticalFocusContainerComponent.prototype, "arrowLeft", null);
+        __decorate([
+            core.HostListener('keyup.arrowRight', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], VerticalFocusContainerComponent.prototype, "arrowRight", null);
         __decorate([
             core.HostListener('keyup.arrowDown', ['$event']),
             __metadata("design:type", Function),
@@ -1211,6 +1222,46 @@
         return VerticalFocusContainerComponent;
     }(FocusContainerComponent));
 
+    /**
+     * @example
+     * // CSS Vars
+     * --resolved-card-gap: var(--card-gap, 16px);
+     * --resolved-card-width: var(--card-width, 300px);
+     * --resolved-card-height: var(--card-height, auto);
+     * --resolved-card-background: var(--card-background, #fcfcfb);
+     *
+     * // Content Templates:
+     * #addCardTemplate
+     * <ng-template #addCardTemplate>
+     *  This is a new card template, it will the the size of the other cards.
+     * </nav-template>
+     *
+     */
+    var CardContainerComponent = /** @class */ (function () {
+        function CardContainerComponent() {
+        }
+        CardContainerComponent.prototype.ngOnInit = function () {
+        };
+        __decorate([
+            core.Input(),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], CardContainerComponent.prototype, "addCardCommand", void 0);
+        __decorate([
+            core.ContentChild("addCardTemplate"),
+            __metadata("design:type", core.TemplateRef)
+        ], CardContainerComponent.prototype, "addCardTemplate", void 0);
+        CardContainerComponent = __decorate([
+            core.Component({
+                selector: 'aup-card-container',
+                template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <mat-icon>add</mat-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
+                styles: [":root{--aup-default-padding:var(--default-padding, 18px)}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], CardContainerComponent);
+        return CardContainerComponent;
+    }());
+
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule() {
         }
@@ -1230,7 +1281,8 @@
                     SwitchCaseDefaultDirective,
                     FocusContainerComponent,
                     VerticalFocusContainerComponent,
-                    FocusableComponent
+                    FocusableComponent,
+                    CardContainerComponent
                 ],
                 imports: [
                     common.CommonModule,
@@ -1258,7 +1310,8 @@
                     SwitchCaseDefaultDirective,
                     FocusContainerComponent,
                     VerticalFocusContainerComponent,
-                    FocusableComponent
+                    FocusableComponent,
+                    CardContainerComponent
                 ],
                 providers: [
                     FocusBindingFactory
@@ -1315,7 +1368,7 @@
             return !!this._activityContext;
         };
         return Activity;
-    }(pectin.GarbageCollector));
+    }(DisposableComponent));
 
     var AlertDialogComponent = /** @class */ (function (_super) {
         __extends(AlertDialogComponent, _super);
@@ -1805,7 +1858,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵbe = /** @class */ (function () {
+    exports.ɵbf = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -1965,7 +2018,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵbe || (exports.ɵbe = {}));
+    })(exports.ɵbf || (exports.ɵbf = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -2009,7 +2062,7 @@
             return this.activityContainerComponent.startActivity(activityType, data);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbe }
+            { type: exports.ɵbf }
         ]; };
         __decorate([
             core.ViewChild('activityContainer', { static: true }),
@@ -2021,7 +2074,7 @@
                 template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
-            __metadata("design:paramtypes", [exports.ɵbe])
+            __metadata("design:paramtypes", [exports.ɵbf])
         ], InPlaceInteractionContextComponent);
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
@@ -2059,7 +2112,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵbe,
+                    exports.ɵbf,
                 ]
             })
         ], InteractionModule);
@@ -3178,7 +3231,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵbh = /** @class */ (function () {
+    exports.ɵbi = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -3315,7 +3368,7 @@
         //   }
         //
         // }
-    })(exports.ɵbh || (exports.ɵbh = {}));
+    })(exports.ɵbi || (exports.ɵbi = {}));
 
     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.
@@ -3838,11 +3891,11 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵbe },
+            { type: exports.ɵbf },
             { type: UrlService },
-            { type: exports.ɵbh }
+            { type: exports.ɵbi }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbe), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵbh)); }, 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.ɵbf), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵbi)); }, token: PlaceRouter, providedIn: "root" });
         __decorate([
             pectin.Trace(),
             __metadata("design:type", Function),
@@ -3855,9 +3908,9 @@
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵbe,
+                exports.ɵbf,
                 UrlService,
-                exports.ɵbh])
+                exports.ɵbi])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
@@ -4236,8 +4289,8 @@
         ListPlaceNavComponent = __decorate([
             core.Component({
                 selector: 'aup-list-place-nav',
-                template: "<mat-nav-list class=\"app-menu\">\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    <mat-icon *ngIf=\"getNav(placeDefinition).icon()\">{{getNav(placeDefinition).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(placeDefinition).title()}}</span>\n  </a>\n</mat-nav-list>\n",
-                styles: [":host{display:flex;flex-direction:column;--expanded-width:235px;--nav-item-width:var(--nav-bar-height);width:var(--nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--expanded-width);max-width:var(--expanded-width)}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}.header{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:var(--nav-bar-height);border-bottom:var(--pinstripe-border);cursor:pointer}.header .menu{flex:1}.header button{color:inherit;width:var(--nav-item-width);height:var(--nav-bar-height)}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--nav-item-width);height:var(--nav-bar-height);color:rgba(0,0,0,.6)}.mat-list-item.active{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.9)}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item mat-icon{margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}a[ng-reflect-router-link=manage-instruments] mat-icon{transform:rotate(90deg)}.app-menu{padding-top:0}"]
+                template: "<mat-nav-list fxFlex>\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    <mat-icon *ngIf=\"getNav(placeDefinition).icon()\">{{getNav(placeDefinition).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(placeDefinition).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+                styles: [":host{display:flex;flex-direction:column}"]
             }),
             __metadata("design:paramtypes", [PlaceRouter])
         ], ListPlaceNavComponent);
@@ -4263,6 +4316,86 @@
         return TabbedPlaceNavigationComponent;
     }(AbstractPlaceNavigationComponent));
 
+    /**
+     * @example
+     * // Usage
+     * <aup-vertical-place-navigation [places]="placeConstructorArray"
+     *                                [placeOutlet]="placeOutletComponent">
+     * </aup-vertical-place-navigation>
+     * <aup-place-outlet #placeOutletComponent></aup-place-outlet>
+     *
+     * // CSS overrides:
+     * --nav-width: 56px
+     * --nav-expanded-width: 235px
+     * --nav-item-height: var(--nav-width)
+     * --nav-background-color: #555;
+     * --nav-color: rgba(255, 255, 255, 0.9);
+     *
+     * // Content Templates:
+     * #navEndTemplate
+     * <ng-template #navEndTemplate>
+     *    <a mat-list-item (click)="logout()" matTooltip="Logout">
+     *    <mat-icon>exit_to_app</mat-icon>
+     *    <span class="expanded-only">Logout</span>
+     *    </a>
+     * </nav-template>
+     *
+     * // Place nav item in an i18n.yml
+     * places:
+     *   myPlace:
+     *     nav(NavItem):
+     *       title: "Activities"
+     *       icon: "build"
+     *       tooltip: "Alerts, confirms and dialogs"
+     *
+     * // In your place
+     * (at)Place({
+     *   path: 'myPlace',
+     *   data: {
+     *     nav: I18n.places.myPlace.nav()
+     *   }
+     * })
+     */
+    var SidePlaceNavigationComponent = /** @class */ (function (_super) {
+        __extends(SidePlaceNavigationComponent, _super);
+        function SidePlaceNavigationComponent(router, placeRouter) {
+            var _this = _super.call(this, placeRouter) || this;
+            _this.router = router;
+            _this.expanded = false;
+            return _this;
+        }
+        SidePlaceNavigationComponent.prototype.expandMenu = function () {
+            this.expanded = true;
+        };
+        SidePlaceNavigationComponent.prototype.collapseMenu = function () {
+            this.expanded = false;
+        };
+        SidePlaceNavigationComponent.prototype.toggleMenu = function () {
+            this.expanded = !this.expanded;
+        };
+        SidePlaceNavigationComponent.ctorParameters = function () { return [
+            { type: router.Router },
+            { type: PlaceRouter }
+        ]; };
+        __decorate([
+            core.HostBinding('class.expanded'),
+            __metadata("design:type", Object)
+        ], SidePlaceNavigationComponent.prototype, "expanded", void 0);
+        __decorate([
+            core.ContentChild('navEndTemplate'),
+            __metadata("design:type", core.TemplateRef)
+        ], SidePlaceNavigationComponent.prototype, "navEndTemplate", void 0);
+        SidePlaceNavigationComponent = __decorate([
+            core.Component({
+                selector: 'aup-side-place-navigation',
+                template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <mat-icon class=\"collapsed-only\">menu</mat-icon>\n    <mat-icon class=\"expanded-only\">arrow_back</mat-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    <mat-icon *ngIf=\"getNav(placeDefinition).icon()\">{{getNav(placeDefinition).icon()}}</mat-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 mat-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])
+        ], SidePlaceNavigationComponent);
+        return SidePlaceNavigationComponent;
+    }(AbstractPlaceNavigationComponent));
+
     var PlaceModule = /** @class */ (function () {
         function PlaceModule() {
         }
@@ -4277,7 +4410,8 @@
                     list.MatListModule,
                     tooltip.MatTooltipModule,
                     icon.MatIconModule,
-                    DirectivesModule
+                    DirectivesModule,
+                    flexLayout.FlexModule
                 ],
                 declarations: [
                     EmptyStateComponent,
@@ -4285,6 +4419,7 @@
                     PlaceOutletComponent,
                     TabbedPlaceNavigationComponent,
                     ListPlaceNavComponent,
+                    SidePlaceNavigationComponent,
                     AbstractPlaceNavigationComponent
                 ],
                 entryComponents: [BusyOverlayComponent],
@@ -4294,6 +4429,7 @@
                     EmptyStateComponent,
                     TabbedPlaceNavigationComponent,
                     ListPlaceNavComponent,
+                    SidePlaceNavigationComponent,
                     AbstractPlaceNavigationComponent
                 ],
                 providers: [
@@ -4985,6 +5121,7 @@
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
     exports.BusyOverlayComponent = BusyOverlayComponent;
+    exports.CardContainerComponent = CardContainerComponent;
     exports.CheckboxInputComponent = CheckboxInputComponent;
     exports.CommandDirective = CommandDirective;
     exports.ComponentsModule = ComponentsModule;
@@ -5007,7 +5144,7 @@
     exports.FocusableComponent = FocusableComponent;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵbe;
+    exports.InteractionService = exports.ɵbf;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
@@ -5023,7 +5160,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵbh;
+    exports.PlaceHistory = exports.ɵbi;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -5036,6 +5173,7 @@
     exports.RouteId = RouteId;
     exports.ScrollContainerComponent = ScrollContainerComponent;
     exports.SelectInputComponent = SelectInputComponent;
+    exports.SidePlaceNavigationComponent = SidePlaceNavigationComponent;
     exports.StringInputComponent = StringInputComponent;
     exports.SwitchCaseComponent = SwitchCaseComponent;
     exports.SwitchCaseDefaultDirective = SwitchCaseDefaultDirective;
@@ -5057,24 +5195,26 @@
     exports.slideRightOnEnterAnimation = slideRightOnEnterAnimation;
     exports.ɵa = DirectivesModule;
     exports.ɵb = CommandDirective;
-    exports.ɵba = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵbb = AUP_PLACE_CONFIG;
-    exports.ɵbd = PlaceRouter;
-    exports.ɵbf = ModalInteractionContextFactory;
-    exports.ɵbg = UrlService;
-    exports.ɵbi = TabbedPlaceNavigationComponent;
-    exports.ɵbj = AbstractPlaceNavigationComponent;
-    exports.ɵbk = ListPlaceNavComponent;
-    exports.ɵbl = InteractionModule;
-    exports.ɵbm = ActivityContainerComponent;
-    exports.ɵbn = AbstractInteractionContext;
-    exports.ɵbo = ActivityOutletComponent;
-    exports.ɵbp = ConfirmationDialogComponent;
-    exports.ɵbq = ACTIVITY_DATA;
-    exports.ɵbr = Activity;
-    exports.ɵbt = ConfirmThenDialogComponent;
-    exports.ɵbu = AlertDialogComponent;
-    exports.ɵbw = InPlaceInteractionContextComponent;
+    exports.ɵba = leftRightPlaceAnimation;
+    exports.ɵbb = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵbc = AUP_PLACE_CONFIG;
+    exports.ɵbe = PlaceRouter;
+    exports.ɵbg = ModalInteractionContextFactory;
+    exports.ɵbh = UrlService;
+    exports.ɵbj = TabbedPlaceNavigationComponent;
+    exports.ɵbk = AbstractPlaceNavigationComponent;
+    exports.ɵbl = ListPlaceNavComponent;
+    exports.ɵbm = SidePlaceNavigationComponent;
+    exports.ɵbn = InteractionModule;
+    exports.ɵbo = ActivityContainerComponent;
+    exports.ɵbp = AbstractInteractionContext;
+    exports.ɵbq = ActivityOutletComponent;
+    exports.ɵbr = ConfirmationDialogComponent;
+    exports.ɵbs = ACTIVITY_DATA;
+    exports.ɵbt = Activity;
+    exports.ɵbv = ConfirmThenDialogComponent;
+    exports.ɵbw = AlertDialogComponent;
+    exports.ɵby = InPlaceInteractionContextComponent;
     exports.ɵc = FocusBindingDirective;
     exports.ɵd = DisposableComponent;
     exports.ɵe = FocusBindingFactory;
@@ -5094,11 +5234,11 @@
     exports.ɵs = FocusContainerComponent;
     exports.ɵt = VerticalFocusContainerComponent;
     exports.ɵu = FocusableComponent;
-    exports.ɵv = PlaceModule;
-    exports.ɵw = EmptyStateComponent;
-    exports.ɵx = BusyOverlayComponent;
-    exports.ɵy = PlaceOutletComponent;
-    exports.ɵz = leftRightPlaceAnimation;
+    exports.ɵv = CardContainerComponent;
+    exports.ɵw = PlaceModule;
+    exports.ɵx = EmptyStateComponent;
+    exports.ɵy = BusyOverlayComponent;
+    exports.ɵz = PlaceOutletComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });