From d6290d01975409fa8dd6f2558e1291311958badb Mon Sep 17 00:00:00 2001
From: Ian O'Neill <ian.oneill@iblocks.co.uk>
Date: Fri, 28 Oct 2016 11:44:26 +0100
Subject: [PATCH 1/2] feat(sidenav): emit event when backdrop is clicked

This allows clients to distinguish between close events caused by
calling close() and those caused by the backdrop being clicked.

Closes #1427
---
 src/lib/sidenav/sidenav.spec.ts | 50 ++++++++++++++++++++++++++++++++-
 src/lib/sidenav/sidenav.ts      |  5 ++++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/lib/sidenav/sidenav.spec.ts b/src/lib/sidenav/sidenav.spec.ts
index 7949279ece82..5cb17badcbe7 100644
--- a/src/lib/sidenav/sidenav.spec.ts
+++ b/src/lib/sidenav/sidenav.spec.ts
@@ -194,6 +194,49 @@ describe('MdSidenav', () => {
         tick();
       }).not.toThrow();
     }));
+
+    it('should emit the backdrop-clicked event when the backdrop is clicked', fakeAsync(() => {
+      let fixture = TestBed.createComponent(BasicTestApp);
+
+      let testComponent: BasicTestApp = fixture.debugElement.componentInstance;
+      let openButtonElement = fixture.debugElement.query(By.css('.open'));
+      openButtonElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(testComponent.backdropClickedCount).toBe(0);
+
+      let sidenavBackdropElement = fixture.debugElement.query(By.css('.md-sidenav-backdrop'));
+      sidenavBackdropElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      expect(testComponent.backdropClickedCount).toBe(1);
+
+      endSidenavTransition(fixture);
+      tick();
+
+      openButtonElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      endSidenavTransition(fixture);
+      tick();
+
+      let closeButtonElement = fixture.debugElement.query(By.css('.close'));
+      closeButtonElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(testComponent.backdropClickedCount).toBe(1);
+    }));
+
   });
 
   describe('attributes', () => {
@@ -271,7 +314,7 @@ class SidenavLayoutTwoSidenavTestApp { }
 /** Test component that contains an MdSidenavLayout and one MdSidenav. */
 @Component({
   template: `
-    <md-sidenav-layout>
+    <md-sidenav-layout (backdrop-clicked)="backdropClicked()">
       <md-sidenav #sidenav align="start"
                   (open-start)="openStart()"
                   (open)="open()"
@@ -288,6 +331,7 @@ class BasicTestApp {
   openCount: number = 0;
   closeStartCount: number = 0;
   closeCount: number = 0;
+  backdropClickedCount: number = 0;
 
   openStart() {
     this.openStartCount++;
@@ -304,6 +348,10 @@ class BasicTestApp {
   close() {
     this.closeCount++;
   }
+
+  backdropClicked() {
+    this.backdropClickedCount++;
+  }
 }
 
 @Component({
diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts
index e725e01f5ce3..a32f89508d34 100644
--- a/src/lib/sidenav/sidenav.ts
+++ b/src/lib/sidenav/sidenav.ts
@@ -293,6 +293,9 @@ export class MdSidenavLayout implements AfterContentInit {
   get start() { return this._start; }
   get end() { return this._end; }
 
+  /** Event emitted when the sidenav backdrop is clicked. */
+  @Output('backdrop-clicked') onBackdropClicked = new EventEmitter<void>();
+
   /** The sidenav at the start/end alignment, independent of direction. */
   private _start: MdSidenav;
   private _end: MdSidenav;
@@ -398,6 +401,8 @@ export class MdSidenavLayout implements AfterContentInit {
   }
 
   _closeModalSidenav() {
+    this.onBackdropClicked.emit(null);
+
     if (this._start != null && this._start.mode != 'side') {
       this._start.close();
     }

From 835360942c7cab3a60262fc96edeb828060e4413 Mon Sep 17 00:00:00 2001
From: Ian O'Neill <ian.oneill@iblocks.co.uk>
Date: Tue, 29 Nov 2016 09:23:09 +0000
Subject: [PATCH 2/2] Address review comments

---
 src/lib/sidenav/sidenav.html | 2 +-
 src/lib/sidenav/sidenav.ts   | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/lib/sidenav/sidenav.html b/src/lib/sidenav/sidenav.html
index fe7f020b5642..2e278d672083 100644
--- a/src/lib/sidenav/sidenav.html
+++ b/src/lib/sidenav/sidenav.html
@@ -1,4 +1,4 @@
-<div class="md-sidenav-backdrop" (click)="_closeModalSidenav()"
+<div class="md-sidenav-backdrop" (click)="_onBackdropClicked()"
      [class.md-sidenav-shown]="_isShowingBackdrop()"></div>
 
 <ng-content select="md-sidenav"></ng-content>
diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts
index a32f89508d34..f429613ec4f4 100644
--- a/src/lib/sidenav/sidenav.ts
+++ b/src/lib/sidenav/sidenav.ts
@@ -400,9 +400,12 @@ export class MdSidenavLayout implements AfterContentInit {
     this._setDrawersValid(true);
   }
 
-  _closeModalSidenav() {
-    this.onBackdropClicked.emit(null);
+  _onBackdropClicked() {
+    this.onBackdropClicked.emit();
+    this._closeModalSidenav();
+  }
 
+  _closeModalSidenav() {
     if (this._start != null && this._start.mode != 'side') {
       this._start.close();
     }