@coolon/angular-ui-powerups 1.5.0 → 1.6.1

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

@@ -1048,10 +1048,13 @@ var VerticalFocusContainerComponent = /** @class */ (function (_super) {
 /**
  * @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
@@ -1060,8 +1063,10 @@ var VerticalFocusContainerComponent = /** @class */ (function (_super) {
  * </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 () {
     };
@@ -1078,12 +1083,12 @@ var CardContainerComponent = /** @class */ (function () {
         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() {
@@ -4089,31 +4094,16 @@ var EmptyStateComponent = /** @class */ (function () {
 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([
-        HostBinding('class.expanded'),
-        __metadata("design:type", Object)
-    ], ListPlaceNavComponent.prototype, "expanded", void 0);
     ListPlaceNavComponent = __decorate([
         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);
@@ -4148,18 +4138,20 @@ var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
  * <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>
  *