@coolon/angular-ui-powerups 1.5.0 → 1.6.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.6.1](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.6.0...v1.6.1) (2020-05-24)
+
+
+### Bug Fixes
+
+* removed obsolete internal methods from list place nav ([098a343](https://bitbucket.org/coolon/angular-ui-powerups/commit/098a343a975af87b0c2c7c1dba968c847d30ab1e))
+* updated card container to extend disposable component ([a878141](https://bitbucket.org/coolon/angular-ui-powerups/commit/a87814137544a20c3fc2b43dbc4910878e5b6114))
+* visual tweaks to list place nav ([ca25a87](https://bitbucket.org/coolon/angular-ui-powerups/commit/ca25a87b4a03f27da5d16c2b82cabfb54bd1667e))
+
+## [1.6.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.5.0...v1.6.0) (2020-05-22)
+
+
+### Features
+
+* added min height support for aup-card-container ([1366ac6](https://bitbucket.org/coolon/angular-ui-powerups/commit/1366ac63fc052e37a9e6dc413af33ed3eb9ce405))
+
 ## [1.5.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.4.2...v1.5.0) (2020-05-22)
 
 

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -1225,10 +1225,13 @@
     /**
      * @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);
+     * aup-card-container {
+     *   --card-gap: var(--card-gap, 16px);
+     *   --card-width: var(--card-width, 300px);
+     *   --card-height: var(--card-height, auto);
+     *   --card-min-height: var(--card-min-height, auto);
+     *   --card-background: var(--card-background, #fcfcfb);
+     * }
      *
      * // Content Templates:
      * #addCardTemplate
@@ -1237,8 +1240,10 @@
      * </nav-template>
      *
      */
-    var CardContainerComponent = /** @class */ (function () {
+    var CardContainerComponent = /** @class */ (function (_super) {
+        __extends(CardContainerComponent, _super);
         function CardContainerComponent() {
+            return _super.call(this) || this;
         }
         CardContainerComponent.prototype.ngOnInit = function () {
         };
@@ -1255,12 +1260,12 @@
             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}"]
+                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-min-height:var(--card-min-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);min-height:var(--resolved-card-min-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;
-    }());
+    }(DisposableComponent));
 
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule() {
@@ -4266,31 +4271,16 @@
     var ListPlaceNavComponent = /** @class */ (function (_super) {
         __extends(ListPlaceNavComponent, _super);
         function ListPlaceNavComponent(placeRouter) {
-            var _this = _super.call(this, placeRouter) || this;
-            _this.expanded = true;
-            return _this;
+            return _super.call(this, placeRouter) || this;
         }
-        ListPlaceNavComponent.prototype.expandMenu = function () {
-            this.expanded = true;
-        };
-        ListPlaceNavComponent.prototype.collapseMenu = function () {
-            this.expanded = false;
-        };
-        ListPlaceNavComponent.prototype.toggleMenu = function () {
-            this.expanded = !this.expanded;
-        };
         ListPlaceNavComponent.ctorParameters = function () { return [
             { type: PlaceRouter }
         ]; };
-        __decorate([
-            core.HostBinding('class.expanded'),
-            __metadata("design:type", Object)
-        ], ListPlaceNavComponent.prototype, "expanded", void 0);
         ListPlaceNavComponent = __decorate([
             core.Component({
                 selector: 'aup-list-place-nav',
-                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}"]
+                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>{{getNav(placeDefinition).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+                styles: [":host{display:flex;flex-direction:column;--selected-border-color:#838383;--selected-color:inherit;--selected-background:#f1f1f1}mat-nav-list{padding-top:0}a.active{border-right:2px solid var(--selected-border-color);background:var(--selected-background);color:var(--selected-color)}"]
             }),
             __metadata("design:paramtypes", [PlaceRouter])
         ], ListPlaceNavComponent);
@@ -4325,18 +4315,20 @@
      * <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);
+     * aup-side-place-navigation {
+     *   --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>
+     *    <span *ngIf="sideNav.expanded">Logout</span>
      *    </a>
      * </nav-template>
      *