feat(backdrop): basic component that can be closed and emits onHiding…

…/onHidden

 - can be positioned fixed or absolutely

ng2-material/components/backdrop/backdrop.scss

@@ -0,0 +1,38 @@
+@import "../../core/style/variables";
+
+.md-backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.12);
+  transition: opacity 450ms;
+  opacity: 0;
+  z-index: $z-index-backdrop;
+
+  &.md-backdrop-absolute {
+    position: absolute;
+  }
+
+  &.md-active {
+    opacity: 1;
+  }
+
+  &.md-select-backdrop {
+    z-index: $z-index-dialog + 1;
+    transition-duration: 0;
+  }
+  &.md-dialog-backdrop {
+    z-index: $z-index-dialog - 1;
+  }
+  &.md-bottom-sheet-backdrop {
+    z-index: $z-index-bottom-sheet - 1;
+  }
+  &.md-sidenav-backdrop {
+    z-index: $z-index-sidenav - 1;
+  }
+
+}

ng2-material/components/backdrop/backdrop.ts

@@ -0,0 +1,61 @@
+import {Animate} from "../../core/util/animate";
+import {ElementRef} from "angular2/core";
+import {AfterViewInit} from "angular2/core";
+import {ViewEncapsulation} from "angular2/core";
+import {View} from "angular2/core";
+import {Component} from "angular2/core";
+import {Input} from "angular2/core";
+import {Output} from "angular2/core";
+import {EventEmitter} from "angular2/core";
+/** Component for the dialog "backdrop", a transparent overlay over the rest of the page. */
+@Component({
+  selector: 'md-backdrop',
+  host: {
+    '(click)': 'onClick()',
+  },
+})
+@View({template: '', encapsulation: ViewEncapsulation.None})
+export class MdBackdrop implements AfterViewInit {
+
+  /**
+   * When true, clicking on the backdrop will close it
+   */
+  @Input()
+  clickClose: boolean = false;
+
+  @Output()
+  onHiding: EventEmitter<MdBackdrop> = new EventEmitter<MdBackdrop>();
+
+  @Output()
+  onHidden: EventEmitter<MdBackdrop> = new EventEmitter<MdBackdrop>();
+
+  /** Whether this checkbox is checked. */
+  @Input() checked: boolean;
+
+  constructor(public element: ElementRef) {
+  }
+
+  active: boolean = false;
+
+  ngAfterViewInit() {
+    Animate.enter(this.element.nativeElement, 'md-active');
+    this.active = true;
+  }
+
+  onClick() {
+    if (this.clickClose && this.active) {
+      this.hide();
+    }
+  }
+
+  hide(): Promise<void> {
+    if (!this.active) {
+      return Promise.resolve();
+    }
+    this.active = false;
+    this.onHiding.emit(this);
+    return Animate.leave(this.element.nativeElement, 'md-active').then(() => {
+      this.onHidden.emit(this);
+    });
+  }
+}