From 9b88aac155e695af761cf16272c7fd59492007fd Mon Sep 17 00:00:00 2001
From: Joey Perrott <josephperrott.github@gmail.com>
Date: Tue, 7 Nov 2017 09:55:54 -0800
Subject: [PATCH] fix(expansion) Add expansion panel outputs (#7309)

---
 e2e/components/expansion-e2e.spec.ts          | 27 ++++++++--
 src/e2e-app/main.ts                           |  3 ++
 src/lib/expansion/expansion-panel.ts          |  1 +
 .../expansion-overview-example.html           | 50 ++++++++++++-------
 .../expansion-overview-example.ts             |  4 +-
 5 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/e2e/components/expansion-e2e.spec.ts b/e2e/components/expansion-e2e.spec.ts
index 944c4e46653..b50d6281d0b 100644
--- a/e2e/components/expansion-e2e.spec.ts
+++ b/e2e/components/expansion-e2e.spec.ts
@@ -5,15 +5,19 @@ describe('expansion', () => {
 
   beforeEach(() => browser.get('/expansion'));
 
-  it('should show a expansion panel', async () => {
-    expect(element(by.css('.mat-expansion-panel'))).toBeDefined();
+  it('should show an accordion', async () => {
+    expect(element(by.css('.mat-accordion'))).toBeDefined();
+    screenshot();
+  });
 
+  it('should show two panels', async () => {
+    expect(element.all(by.css('.mat-expansion-panel')).count()).toBe(2);
     screenshot();
   });
 
   it('should hide contents of the expansion panel on click', async () => {
-    const panelHeader = element(by.css('.mat-expansion-panel-header'));
-    const panelContent = element(by.css('.mat-expansion-panel-content'));
+    const panelHeader = element.all(by.css('.mat-expansion-panel-header')).get(0);
+    const panelContent = element.all(by.css('.mat-expansion-panel-content')).get(0);
 
     expect(panelContent.isDisplayed()).toBe(false);
 
@@ -22,4 +26,19 @@ describe('expansion', () => {
     expect(panelContent.isDisplayed()).toBe(true);
   });
 
+  it('should emit events for expanding and collapsing', async () => {
+    const panelHeader = element.all(by.css('.mat-expansion-panel-header')).get(1);
+    const panelDescription = element
+      .all(by.css('.mat-expansion-panel-header mat-panel-description')).get(1);
+
+    panelHeader.click();
+
+    expect(panelDescription.getText()).toContain('Currently I am open');
+
+    panelHeader.click();
+
+    expect(panelDescription.getText()).toContain('Currently I am closed');
+  });
+
 });
+
diff --git a/src/e2e-app/main.ts b/src/e2e-app/main.ts
index f90682639bf..361873c20f2 100644
--- a/src/e2e-app/main.ts
+++ b/src/e2e-app/main.ts
@@ -1,4 +1,7 @@
 import {platformBrowser} from '@angular/platform-browser';
 import {E2eAppModuleNgFactory} from './e2e-app-module.ngfactory';
+import {enableProdMode} from '@angular/core';
+
+enableProdMode();
 
 platformBrowser().bootstrapModuleFactory(E2eAppModuleNgFactory);
diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts
index 4ab23c55a50..2c5eed73a98 100644
--- a/src/lib/expansion/expansion-panel.ts
+++ b/src/lib/expansion/expansion-panel.ts
@@ -72,6 +72,7 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['disabled', 'expanded'],
+  outputs: ['opened', 'closed'],
   host: {
     'class': 'mat-expansion-panel',
     '[class.mat-expanded]': 'expanded',
diff --git a/src/material-examples/expansion-overview/expansion-overview-example.html b/src/material-examples/expansion-overview/expansion-overview-example.html
index 9d105bef4d6..8ba383c3174 100644
--- a/src/material-examples/expansion-overview/expansion-overview-example.html
+++ b/src/material-examples/expansion-overview/expansion-overview-example.html
@@ -1,18 +1,32 @@
-<mat-expansion-panel>
-  <mat-expansion-panel-header>
-    <mat-panel-title>
-      Personal data
-    </mat-panel-title>
-    <mat-panel-description>
-      Type your name and age
-    </mat-panel-description>
-  </mat-expansion-panel-header>
-  
-  <mat-form-field>
-    <input matInput placeholder="First name">
-  </mat-form-field>
-  
-  <mat-form-field>
-    <input matInput placeholder="Age">
-  </mat-form-field>
-</mat-expansion-panel>
+<mat-accordion>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Personal data
+      </mat-panel-title>
+      <mat-panel-description>
+        Type your name and age
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <mat-form-field>
+      <input matInput placeholder="First name">
+    </mat-form-field>
+
+    <mat-form-field>
+      <input matInput placeholder="Age">
+    </mat-form-field>
+  </mat-expansion-panel>
+  <mat-expansion-panel (opened)="panelOpenState = true"
+                       (closed)="panelOpenState = false">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Self aware panel
+      </mat-panel-title>
+      <mat-panel-description>
+        Currently I am {{panelOpenState ? 'open' : 'closed'}}
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+    <p>I'm visible because I am open</p>
+  </mat-expansion-panel>
+</mat-accordion>
diff --git a/src/material-examples/expansion-overview/expansion-overview-example.ts b/src/material-examples/expansion-overview/expansion-overview-example.ts
index 75cff7cc4ca..dcf49d93afa 100644
--- a/src/material-examples/expansion-overview/expansion-overview-example.ts
+++ b/src/material-examples/expansion-overview/expansion-overview-example.ts
@@ -7,4 +7,6 @@ import {Component} from '@angular/core';
   selector: 'expansion-overview-example',
   templateUrl: 'expansion-overview-example.html',
 })
-export class ExpansionOverviewExample {}
+export class ExpansionOverviewExample {
+  panelOpenState: boolean = false;
+}