feat(igxExpansionPanel): body is component now, collapse&expand anima…

…tion, #307
IgniteUI · Sep 5, 2018 · d9a7385 · d9a7385
1 parent 35edd69
commit d9a7385
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 11 deletions.
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.html b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.html
@@ -2,6 +2,6 @@
 <ng-content select="igx-expansion-panel-header"></ng-content>
 <div #collapseBody [attr.aria-labelledby] = "labelledby" [attr.role] = "'region'"
    [attr.aria-label] = "label || id + '-region'" style="border: 1px solid rgb(58, 53, 56); background-color:gainsboro">
-    <ng-content *ngIf="!collapsed" select="igx-expansion-panel-body"></ng-content>
+    <ng-content select="igx-expansion-panel-body"></ng-content>
 </div>
 
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts
@@ -123,10 +123,11 @@ export class IgxExpansionPanelComponent {
     }
 
     collapse (evt?: Event) {
+        this.collapsed = true;
         this.playCloseAnimation(
             () => {
                 this.onCollapsed.emit({event: evt});
-                this.collapsed = true; }
+                }
             );
     }
 

diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.directives.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.directives.ts
@@ -1,4 +1,6 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { Directive, HostBinding, Input, Host, Component } from '@angular/core';
+import { IgxExpansionPanelComponent } from './expansion-panel.component';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 let NEXT_ID = 0;
 
@@ -30,11 +32,26 @@ export class IgxExpansionPanelDescriptionDirective {
     public cssClass = `igx-expansion-panel__header-description`;
 }
 
-@Directive({
+@Component({
     // tslint:disable-next-line:directive-selector
-    selector: 'igx-expansion-panel-body'
+    selector: 'igx-expansion-panel-body',
+    template: '<div *ngIf="!panel.collapsed" [@enterAnimation]><ng-content></ng-content></div>',
+    animations: [
+        trigger('enterAnimation', [
+            transition(':enter', [
+                style({height: '0px', opacity: 0}),
+                animate('300ms', style({height: '*', opacity: 1}))
+              ]),
+              transition(':leave', [
+                style({height: '*', opacity: 1}),
+                animate('300ms', style({height: '0px', opacity: 0}))
+              ])
+        ])
+    ]
 })
-export class IgxExpansionPanelBodyDirective {
+export class IgxExpansionPanelBodyComponent {
+    constructor(@Host() public panel: IgxExpansionPanelComponent) {
+    }
     @HostBinding('class.igx-expansion-panel__header-body')
     public cssClass = `igx-expansion-panel__header-body`;
 }

diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.module.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.module.ts
@@ -7,7 +7,7 @@ import { IgxIconModule } from '../icon/index';
 import { IgxExpansionPanelComponent } from './expansion-panel.component';
 import { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component';
 import { IgxExpansionPanelDescriptionDirective, IgxExpansionPanelTitleDirective,
-  IgxExpansionPanelBodyDirective,
+  IgxExpansionPanelBodyComponent,
   IgxExpansionPanelHeaderDirective,
   IgxExpansionPanelIconDirective } from './expansion-panel.directives';
 
@@ -18,7 +18,7 @@ import { IgxExpansionPanelDescriptionDirective, IgxExpansionPanelTitleDirective,
     IgxExpansionPanelHeaderDirective,
     IgxExpansionPanelDescriptionDirective,
     IgxExpansionPanelTitleDirective,
-    IgxExpansionPanelBodyDirective,
+    IgxExpansionPanelBodyComponent,
     IgxExpansionPanelIconDirective
   ],
   entryComponents: [
@@ -28,7 +28,7 @@ import { IgxExpansionPanelDescriptionDirective, IgxExpansionPanelTitleDirective,
     IgxExpansionPanelHeaderComponent,
     IgxExpansionPanelDescriptionDirective,
     IgxExpansionPanelTitleDirective,
-    IgxExpansionPanelBodyDirective,
+    IgxExpansionPanelBodyComponent,
     IgxExpansionPanelIconDirective,
     IgxExpansionPanelHeaderDirective
   ],

diff --git a/src/app/expansion-panel/expansion-panel-sample.scss b/src/app/expansion-panel/expansion-panel-sample.scss
@@ -31,3 +31,7 @@
     display: none;
     visibility: hidden;
 }
+
+.igx-expansion-panel__header-body {
+    display: block;
+}
diff --git a/src/app/expansion-panel/expansion-panel-sample.ts b/src/app/expansion-panel/expansion-panel-sample.ts
@@ -19,7 +19,7 @@ export class ExpansionPanelSampleComponent implements OnInit {
                 params: Object.assign(scaleInVerTop.options.params, {
                     startOpacity: 0.5,
                     fromScale: 0,
-                    duration: '250ms'
+                    duration: '300ms'
                 })
             }
         }),
@@ -30,7 +30,7 @@ export class ExpansionPanelSampleComponent implements OnInit {
                     endOpacity: 0.5,
                     fromScale: 1,
                     toScale: 0,
-                    duration: '350ms'
+                    duration: '300ms'
                 })
             }
         })