feat(button-toggle): add initial button-toggle (#517)

* md-toggle initial prototype

* Use directives, no sass nesting, and private event emitter

* Move toggle and radio dispatcher into shared unique selection dispatcher

* Rename toggles to button-toggles

* Update toggle to look more like radio after updates

* Update child name from parent name

* TSLint fixes

* Misc style fixes for PR.

* Update comment
* Remove unused `_buttonToggles`
* Use string literals for button toggle type
* Move instantiation into the constructor
* Add `isSingleSelection` getter

* Move click event binding to component

* Add missing tests to button toggles

* Exclusive toggle should deselect all when group value is cleared
* Button toggles should be checked when the checkbox is interacted with

* Remove onClick()

* Remove click event

* Remove unnecessary getters and setters.

* Add icons to demo app

* Add missing semicolon

* Change eventemitter to private in button toggle class

* Get native elements in tests from debug elements

* Move internal to end of comment and use BooleanFieldValue

* Fix typo in test description.

* vertical align middle all children in button toggle

Author: iveysaur

src/components/button-toggle/button-toggle.html

@@ -0,0 +1,13 @@
+<label [attr.for]="inputId" class="md-button-toggle-label">
+  <input #input class="md-button-toggle-input"
+         [type]="type"
+         [id]="inputId"
+         [checked]="checked"
+         [disabled]="disabled"
+         [name]="name"
+         (change)="onInputChange($event)">
+
+  <div class="md-button-toggle-label-content">
+    <ng-content></ng-content>
+  </div>
+</label>

src/components/button-toggle/button-toggle.scss

@@ -0,0 +1,46 @@
+@import "elevation";
+@import "default-theme";
+@import "palette";
+@import "mixins";
+
+$md-button-toggle-padding: 0 16px !default;
+$md-button-toggle-line-height: 36px !default;
+$md-button-toggle-border-radius: 3px !default;
+
+md-button-toggle-group {
+  @include md-elevation(2);
+  position: relative;
+  display: inline-flex;
+  border-radius: $md-button-toggle-border-radius;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+
+.md-button-toggle-checked .md-button-toggle-label-content {
+  background-color: md-color($md-grey, 300);
+}
+
+.md-button-toggle-disabled .md-button-toggle-label-content {
+  background-color: md-color($md-foreground, disabled);
+  cursor: not-allowed;
+}
+
+md-button-toggle {
+  white-space: nowrap;
+}
+
+.md-button-toggle-input {
+  @include md-visually-hidden;
+}
+
+.md-button-toggle-label-content {
+  display: inline-block;
+  line-height: $md-button-toggle-line-height;
+  padding: $md-button-toggle-padding;
+  cursor: pointer;
+}
+
+.md-button-toggle-label-content > * {
+  vertical-align: middle;
+}