feat: customizable animation timings, closes #14 (#15)

projects/demo/src/app/app.component.html

@@ -1,7 +1,7 @@
 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
   <header class="mdl-layout__header">
     <div class="mdl-layout__header-row">
-      <span class="mdl-layout-title">@tfaster/stacked-panels - Demo</span>
+      <span class="mdl-layout-title">@tfaster/stacked-panels</span>
     </div>
   </header>
   <main class="mdl-layout__content">
@@ -10,8 +10,9 @@
       <tfaster-stacked-panels id="stackedPanelsDemo"
                               [rootPanel]="rootPanel"
                               [loadingInfoTemplate]="loadingInfoTemplate"
-                              [panelClass]="'mdl-card mdl-shadow--8dp'"
+                              [panelClass]="'mdl-card'"
                               [enableFocusTrap]="true"
+                              [animationParams]="animationParams"
                               class="mdl-card mdl-shadow--8dp">
       </tfaster-stacked-panels>
 
@@ -22,7 +23,7 @@
 
 <ng-template #bodyTemplate let-panelData$ let-controller="controller" let-panelId="panelId">
   <ng-container *ngIf="getPanelData$(panelData$) | async as panelData; else noDataTemplate">
-    <div class="mdl-card mdl-shadow--8dp demo-card">
+    <div class="mdl-card demo-card">
       <section class="mdl-card__title">
         <button *ngIf="controller.canGoBack()"
                 (click)="controller.back()"

projects/demo/src/app/app.component.scss

@@ -1,5 +1,5 @@
 .mdl-layout__content {
-  background-color: lightblue;
+  display: flex;
 }
 
 .mdl-layout__header-row {
@@ -28,12 +28,11 @@
 .page-content {
   display: flex;
   flex-direction: column;
-  padding: 32px;
+  padding: 24px;
 }
 
 #stackedPanelsDemo {
   width: 320px;
-  max-height: 520px;
 }
 
 .demo-card {

projects/demo/src/app/app.component.ts

@@ -2,8 +2,9 @@ import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } fr
 import { Observable, of, timer } from 'rxjs';
 import { AddSubPanelsFunction, Panel, StackedPanelTemplateOutletContext } from '@tfaster/stacked-panels';
 import { HttpClient } from '@angular/common/http';
-import { map, tap } from 'rxjs/operators';
+import { delay, map, tap } from 'rxjs/operators';
 import * as Faker from 'faker';
+import { AnimationParams } from '../../../stacked-panels/src/lib/stacked-panel/stacked-panel.animations';
 
 @Component({
   selector: 'app-root',
@@ -18,6 +19,15 @@ export class AppComponent implements OnInit {
 
   public rootPanel: Panel<DemoPanelData>;
 
+  public animationParams: AnimationParams = {
+    /*hiddenContentScale: 0.95,
+    panelSlideInTime: '1s',
+    panelSlideOutTime: '1s',
+    panelGrowHeightTime: '1s',
+    panelShrinkHeightTime: '1s',
+    contentFadeAndScaleTime: '1s'*/
+  }
+
   constructor(private _http: HttpClient) {
   }
 
@@ -30,6 +40,7 @@ export class AppComponent implements OnInit {
       header: 'Pedigree',
       footerText: 'Click CHILDREN to drill down...',
       items: [
+        { firstName: Faker.name.firstName(), lastName: Faker.name.lastName() },
         { firstName: Faker.name.firstName(), lastName: Faker.name.lastName() },
         { firstName: Faker.name.firstName(), lastName: Faker.name.lastName(), drilldown: 'subPanel1' }
       ]
@@ -96,7 +107,7 @@ export class AppComponent implements OnInit {
       ]
     };
 
-    const subPanel1Data$ = timer(1500).pipe(
+    const subPanel1Data$ = timer(1000).pipe(
       map(() => subPanel1Data)
     );
 
@@ -147,7 +158,7 @@ export class AppComponent implements OnInit {
     this.rootPanel = {
       id: 'root2',
       bodyTemplate: this._demoBodyTemplate,
-      data: rootPanelData,
+      data: of(rootPanelData).pipe(delay(1500)),
       subPanels: [subPanel1]
     };
   }

projects/stacked-panels/src/lib/stacked-panel/stacked-panel.animations.ts

@@ -0,0 +1,100 @@
+import { animate, group, state, style, transition, trigger } from '@angular/animations';
+
+export interface AnimationParams {
+  contentFadeAndScaleTime?: string;
+  hiddenContentScale?: number;
+  panelGrowHeightTime?: string;
+  panelShrinkHeightTime?: string;
+  panelSlideInTime?: string;
+  panelSlideOutTime?: string;
+}
+
+const animationDefaultParams: AnimationParams = {
+  contentFadeAndScaleTime: '200ms',
+  hiddenContentScale: 0.95,
+  panelGrowHeightTime: '200ms',
+  panelShrinkHeightTime: '500ms',
+  panelSlideInTime: '100ms',
+  panelSlideOutTime: '100ms'
+}
+
+export type ShowHideAnimationState = 'shown' | 'shownAndLoaded' | 'hidden';
+
+export const showHideTrigger = trigger('showHide', [
+  state('shown', style({
+    height: '*',
+    transform: 'translateX(0)'
+  })),
+  state('shownAndLoaded', style({
+    height: '*',
+    transform: 'translateX(0)'
+  })),
+  state('hidden', style({
+    height: 0,
+    transform: 'translateX(calc(100% + 15px))',
+    overflow: 'hidden'
+  })),
+  transition('hidden => shown', [
+    group([
+      animate('{{ panelGrowHeightTime }} ease-in', style({height: '*'})),
+      animate('{{ panelSlideInTime }} {{ panelGrowHeightTime }} ease-out', style({transform: 'translateX(0)'}))
+    ])
+  ], {
+    params: animationDefaultParams
+  }),
+  transition('hidden => shownAndLoaded', [
+    group([
+      animate('{{ panelGrowHeightTime }} ease-out', style({height: '*'})),
+      animate('{{ panelSlideInTime }} {{ panelGrowHeightTime }} ease-out', style({transform: 'translateX(0)'}))
+    ])
+  ], {
+    params: animationDefaultParams
+  }),
+  transition('shown => shownAndLoaded', [
+    style({
+      height: 0,
+      opacity: 0
+    }),
+    group([
+      animate('{{ panelGrowHeightTime }} ease-out', style({height: '*'})),
+      animate('{{ contentFadeAndScaleTime }} {{ panelGrowHeightTime }} ease-out', style({opacity: 1}))
+    ])
+  ], {
+    params: animationDefaultParams
+  }),
+  transition('shownAndLoaded => hidden', [
+    group([
+      animate('{{ panelSlideOutTime }} ease-out', style({transform: 'translateX(calc(100% + 15px))'})),
+      animate('{{ panelShrinkHeightTime }} {{ panelSlideOutTime }} ease-out', style({height: 0}))
+    ])
+  ], {
+    params: animationDefaultParams
+  })
+]);
+
+export type ContentVisibleState = 'visible' | 'hidden';
+
+export const showHideContentTrigger = trigger('visibleHiddenContent', [
+  state('visible', style({
+    opacity: 1,
+    visibility: 'visible',
+    transform: 'scale(1)'
+  })),
+  state('hidden', style({
+    opacity: 0,
+    visibility: 'hidden',
+    transform: 'scale({{ hiddenContentScale }})'
+  }), {
+    params: animationDefaultParams
+  }),
+  transition('* => hidden', [
+    animate('{{ contentFadeAndScaleTime }} ease-out')
+  ], {
+    params: animationDefaultParams
+  }),
+  transition('hidden => visible', [
+    animate('{{ contentFadeAndScaleTime }} ease-in')
+  ], {
+    params: animationDefaultParams
+  })
+])

projects/stacked-panels/src/lib/stacked-panel/stacked-panel.component.html

@@ -1,7 +1,6 @@
 <div class="stacked-panel">
   <div class="stacked-panel-content"
-       *ngIf="isShown(panel.id)"
-       [@visibleHiddenContent]="(topPanel$ | async).id === panel.id ? 'visible' : 'hidden'">
+       [@visibleHiddenContent]="{value: contentVisibleOrHidden$ | async, params: animationParams}">
     <ng-container *ngIf="isLoading && loadingInfoTemplate">
       <div class="stacked-panel-content-loading-overlay">
         <ng-template [ngTemplateOutlet]="loadingInfoTemplate"></ng-template>
@@ -13,4 +12,5 @@
       </ng-template>
     </ng-container>
   </div>
+
 </div>