feat(sidenav): emit event when backdrop is clicked (#1638)

* 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

* Address review comments

Author: ianjoneill

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>

src/lib/sidenav/sidenav.spec.ts

@@ -190,6 +190,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', () => {
@@ -267,7 +310,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()"
@@ -284,6 +327,7 @@ class BasicTestApp {
   openCount: number = 0;
   closeStartCount: number = 0;
   closeCount: number = 0;
+  backdropClickedCount: number = 0;
 
   openStart() {
     this.openStartCount++;
@@ -300,6 +344,10 @@ class BasicTestApp {
   close() {
     this.closeCount++;
   }
+
+  backdropClicked() {
+    this.backdropClickedCount++;
+  }
 }
 
 @Component({

src/lib/sidenav/sidenav.ts

@@ -276,6 +276,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;
@@ -380,6 +383,11 @@ export class MdSidenavLayout implements AfterContentInit {
     this._setDrawersValid(true);
   }
 
+  _onBackdropClicked() {
+    this.onBackdropClicked.emit();
+    this._closeModalSidenav();
+  }
+
   _closeModalSidenav() {
     if (this._start != null && this._start.mode != 'side') {
       this._start.close();