feat(panel): Add hasBackdrop config to the panel.

Author: KarenParker

src/components/backdrop/backdrop.scss

@@ -1,5 +1,5 @@
 // !!Important - Theme-based Background-color can be configured in backdrop-theme.scss
-//             - Animate background-color opacityy only for `.md-opaque` styles
+//             - Animate background-color opacity only for `.md-opaque` styles
 
 md-backdrop {
   transition: opacity 450ms;

src/components/panel/demoBasicUsage/script.js

@@ -29,6 +29,7 @@ BasicDemoCtrl.prototype.showDialog = function() {
     controller: PanelDialogCtrl,
     controllerAs: 'ctrl',
     templateUrl: 'panel.tmpl.html',
+    hasBackdrop: true,
     panelClass: 'demo-dialog-example',
     position: position,
     trapFocus: true,

src/components/panel/demoPanelAnimations/script.js

@@ -79,7 +79,10 @@ AnimationCtrl.prototype.showDialog = function() {
     panelClass: 'demo-dialog-example',
     position: position,
     trapFocus: true,
-    zIndex: 150
+    zIndex: 150,
+    clickOutsideToClose: true,
+    clickEscapeToClose: true,
+    hasBackdrop: true,
   };
 
   this._panelRef = this._mdPanel.open(config);

src/components/panel/panel-theme.scss

@@ -0,0 +1,9 @@
+.md-panel {
+
+  background-color: '{{background-900-0.0}}';
+
+  &._md-panel-backdrop.md-THEME_NAME-theme {
+    background-color: '{{background-900-1.0}}';
+  }
+
+}