From 6d606c220ff9a1f24e1a1803b1c8153b352cbd7f Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 30 Jan 2018 22:37:17 +0100
Subject: [PATCH] feat(drawer): allow for backdrop to be disabled

Adds the `hasBackdrop` input to the drawer container, allowing users to disable the backdrop.

Fixes #5300.
---
 src/lib/sidenav/drawer-container.html  |  2 +-
 src/lib/sidenav/drawer.spec.ts         | 18 ++++++++++++++++--
 src/lib/sidenav/drawer.ts              | 14 ++++++++++++++
 src/lib/sidenav/sidenav-container.html |  2 +-
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/lib/sidenav/drawer-container.html b/src/lib/sidenav/drawer-container.html
index c674a0cfe98a..4791878555ef 100644
--- a/src/lib/sidenav/drawer-container.html
+++ b/src/lib/sidenav/drawer-container.html
@@ -1,4 +1,4 @@
-<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()"
+<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()" *ngIf="hasBackdrop"
      [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
 
 <ng-content select="mat-drawer"></ng-content>
diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts
index b84afe17ed25..67ac8d3fe570 100644
--- a/src/lib/sidenav/drawer.spec.ts
+++ b/src/lib/sidenav/drawer.spec.ts
@@ -483,6 +483,7 @@ describe('MatDrawerContainer', () => {
         DrawerSetToOpenedTrue,
         DrawerContainerStateChangesTestApp,
         AutosizeDrawer,
+        BasicTestApp,
       ],
     });
 
@@ -630,6 +631,18 @@ describe('MatDrawerContainer', () => {
       discardPeriodicTasks();
     }));
 
+    it('should be able to toggle whether the container has a backdrop', fakeAsync(() => {
+      const fixture = TestBed.createComponent(BasicTestApp);
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.querySelector('.mat-drawer-backdrop')).toBeTruthy();
+
+      fixture.componentInstance.hasBackdrop = false;
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.querySelector('.mat-drawer-backdrop')).toBeFalsy();
+    }));
+
 });
 
 
@@ -652,13 +665,13 @@ class DrawerContainerTwoDrawerTestApp {
 /** Test component that contains an MatDrawerContainer and one MatDrawer. */
 @Component({
   template: `
-    <mat-drawer-container (backdropClick)="backdropClicked()">
+    <mat-drawer-container (backdropClick)="backdropClicked()" [hasBackdrop]="hasBackdrop">
       <mat-drawer #drawer position="start"
                  (opened)="open()"
                  (openedStart)="openStart()"
                  (closed)="close()"
                  (closedStart)="closeStart()">
-        <button #drawerButton>Content.</button>
+        <button #drawerButton>Content</button>
       </mat-drawer>
       <button (click)="drawer.open()" class="open" #openButton></button>
       <button (click)="drawer.close()" class="close" #closeButton></button>
@@ -670,6 +683,7 @@ class BasicTestApp {
   closeCount = 0;
   closeStartCount = 0;
   backdropClickedCount = 0;
+  hasBackdrop = true;
 
   @ViewChild('drawerButton') drawerButton: ElementRef;
   @ViewChild('openButton') openButton: ElementRef;
diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts
index 84863c060ff1..563bf24e966f 100644
--- a/src/lib/sidenav/drawer.ts
+++ b/src/lib/sidenav/drawer.ts
@@ -456,6 +456,20 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
   set autosize(value: boolean) { this._autosize = coerceBooleanProperty(value); }
   private _autosize: boolean;
 
+  /** Whether the drawer container should have a backdrop while one of the sidenavs is open. */
+  @Input()
+  get hasBackdrop() {
+    if (this._hasBackdrop == null) {
+      return !this._start || this._start.mode !== 'side' || !this._end || this._end.mode !== 'side';
+    }
+
+    return this._hasBackdrop;
+  }
+  set hasBackdrop(value: any) {
+    this._hasBackdrop = value == null ? null : coerceBooleanProperty(value);
+  }
+  private _hasBackdrop: boolean | null;
+
   /** Event emitted when the drawer backdrop is clicked. */
   @Output() readonly backdropClick = new EventEmitter<void>();
 
diff --git a/src/lib/sidenav/sidenav-container.html b/src/lib/sidenav/sidenav-container.html
index a54bd1485414..19d4a7fb52e9 100644
--- a/src/lib/sidenav/sidenav-container.html
+++ b/src/lib/sidenav/sidenav-container.html
@@ -1,4 +1,4 @@
-<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()"
+<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()" *ngIf="hasBackdrop"
      [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
 
 <ng-content select="mat-sidenav"></ng-content>