feat(Directive): Have a single Directive.host which mimics HTML

fixes #2268

BREAKING CHANGE:

Before

    @Directive({
      hostListeners: {'event': 'statement'},
      hostProperties: {'expression': 'hostProp'},
      hostAttributes: {'attr': 'value'},
      hostActions: {'action': 'statement'}
    })

After

    @Directive({
      host: {
        '(event)': 'statement',
        '[hostProp]': 'expression'  // k & v swapped
        'attr': 'value',
        '@action': 'statement'
      }
    })

modules/angular2_material/src/components/button/button.ts

@@ -12,8 +12,7 @@ export class MdButton {
 @Component({
   selector: '[md-button][href]',
   properties: ['disabled'],
-  hostListeners: {'click': 'onClick($event)'},
-  hostProperties: {'tabIndex': 'tabIndex'},
+  host: {'(click)': 'onClick($event)', '[tabIndex]': 'tabIndex'},
   lifecycle: [onChange]
 })
 @View({templateUrl: 'angular2_material/src/components/button/button.html'})

modules/angular2_material/src/components/checkbox/checkbox.ts

@@ -7,12 +7,12 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
 @Component({
   selector: 'md-checkbox',
   properties: ['checked', 'disabled'],
-  hostListeners: {'keydown': 'onKeydown($event)'},
-  hostProperties: {
-    'tabindex': 'tabindex',
-    'role': 'attr.role',
-    'checked': 'attr.aria-checked',
-    'disabled': 'attr.aria-disabled'
+  host: {
+    '(keydown)': 'onKeydown($event)',
+    '[tabindex]': 'tabindex',
+    '[attr.role]': 'role',
+    '[attr.aria-checked]': 'checked',
+    '[attr.aria-disabled]': 'disabled'
   }
 })
 @View({templateUrl: 'angular2_material/src/components/checkbox/checkbox.html', directives: []})

modules/angular2_material/src/components/dialog/dialog.ts

@@ -209,7 +209,7 @@ export class MdDialogConfig {
  */
 @Component({
   selector: 'md-dialog-container',
-  hostListeners: {'body:^keydown': 'documentKeypress($event)'},
+  host: {'(body:^keydown)': 'documentKeypress($event)'},
 })
 @View({
   templateUrl: 'angular2_material/src/components/dialog/dialog.html',
@@ -253,7 +253,7 @@ class MdDialogContent {
 /** Component for the dialog "backdrop", a transparent overlay over the rest of the page. */
 @Component({
   selector: 'md-backdrop',
-  hostListeners: {'click': 'onClick()'},
+  host: {'(click)': 'onClick()'},
 })
 @View({template: ''})
 class MdBackdrop {

modules/angular2_material/src/components/grid_list/grid_list.ts

@@ -218,14 +218,14 @@ export class MdGridList {
 @Component({
   selector: 'md-grid-tile',
   properties: ['rowspan', 'colspan'],
-  hostProperties: {
-    'styleHeight': 'style.height',
-    'styleWidth': 'style.width',
-    'styleTop': 'style.top',
-    'styleLeft': 'style.left',
-    'styleMarginTop': 'style.marginTop',
-    'stylePaddingTop': 'style.paddingTop',
-    'role': 'role'
+  host: {
+    '[style.height]': 'styleHeight',
+    '[style.width]': 'styleWidth',
+    '[style.top]': 'styleTop',
+    '[style.left]': 'styleLeft',
+    '[style.marginTop]': 'styleMarginTop',
+    '[style.paddingTop]': 'stylePaddingTop',
+    '[role]': 'role'
   },
   lifecycle: [onDestroy, onChange]
 })

modules/angular2_material/src/components/input/input.ts

@@ -10,8 +10,8 @@ import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
 @Directive({
   selector: 'md-input-container',
   lifecycle: [onAllChangesDone],
-  hostProperties:
-      {'inputHasValue': 'class.md-input-has-value', 'inputHasFocus': 'class.md-input-focused'}
+  host:
+      {'[class.md-input-has-value]': 'inputHasValue', '[class.md-input-focused]': 'inputHasFocus'}
 })
 export class MdInputContainer {
   // The MdInput or MdTextarea inside of this container.
@@ -57,9 +57,12 @@ export class MdInputContainer {
 @Directive({
   selector: 'md-input-container input',
   events: ['mdChange', 'mdFocusChange'],
-  hostProperties: {'yes': 'class.md-input'},
-  hostListeners:
-      {'input': 'updateValue($event)', 'focus': 'setHasFocus(true)', 'blur': 'setHasFocus(false)'}
+  host: {
+    '[class.md-input]': 'yes',
+    '(input)': 'updateValue($event)',
+    '(focus)': 'setHasFocus(true)',
+    '(blur)': 'setHasFocus(false)'
+  }
 })
 export class MdInput {
   value: string;

modules/angular2_material/src/components/progress-linear/progress_linear.ts

@@ -7,11 +7,11 @@ import {Math} from 'angular2/src/facade/math';
   selector: 'md-progress-linear',
   lifecycle: [onChange],
   properties: ['value', 'bufferValue'],
-  hostProperties: {
-    'role': 'attr.role',
-    'ariaValuemin': 'attr.aria-valuemin',
-    'ariaValuemax': 'attr.aria-valuemax',
-    'value': 'attr.aria-valuenow'
+  host: {
+    '[attr.role]': 'role',
+    '[attr.aria-valuemin]': 'ariaValuemin',
+    '[attr.aria-valuemax]': 'ariaValuemax',
+    '[attr.aria-valuenow]': 'value'
   }
 })
 @View({

modules/angular2_material/src/components/radio/radio_button.ts

@@ -27,15 +27,13 @@ var _uniqueIdCounter: number = 0;
   lifecycle: [onChange],
   events: ['change'],
   properties: ['disabled', 'value'],
-  hostListeners: {
+  host: {
     // TODO(jelbourn): Remove ^ when event retargeting is fixed.
-    '^keydown': 'onKeydown($event)'
-  },
-  hostProperties: {
-    'tabindex': 'tabindex',
-    'role': 'attr.role',
-    'disabled': 'attr.aria-disabled',
-    'activedescendant': 'attr.aria-activedescendant'
+    '(^keydown)': 'onKeydown($event)',
+    '[tabindex]': 'tabindex',
+    '[attr.role]': 'role',
+    '[attr.aria-disabled]': 'disabled',
+    '[attr.aria-activedescendant]': 'activedescendant'
   }
 })
 @View({templateUrl: 'angular2_material/src/components/radio/radio_group.html'})
@@ -187,13 +185,13 @@ export class MdRadioGroup {
   selector: 'md-radio-button',
   lifecycle: [onChange],
   properties: ['id', 'name', 'value', 'checked', 'disabled'],
-  hostListeners: {'keydown': 'onKeydown($event)'},
-  hostProperties: {
-    'id': 'id',
-    'tabindex': 'tabindex',
-    'role': 'attr.role',
-    'checked': 'attr.aria-checked',
-    'disabled': 'attr.aria-disabled'
+  host: {
+    '(keydown)': 'onKeydown($event)',
+    '[id]': 'id',
+    '[tabindex]': 'tabindex',
+    '[attr.role]': 'role',
+    '[attr.aria-checked]': 'checked',
+    '[attr.aria-disabled]': 'disabled'
   }
 })
 @View({templateUrl: 'angular2_material/src/components/radio/radio_button.html', directives: []})

modules/angular2_material/src/components/switcher/switch.ts

@@ -9,9 +9,12 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
 @Component({
   selector: 'md-switch',
   properties: ['checked', 'disabled'],
-  hostListeners: {'keydown': 'onKeydown($event)'},
-  hostProperties:
-      {'checked': 'attr.aria-checked', 'disabled_': 'attr.aria-disabled', 'role': 'attr.role'}
+  host: {
+    '(keydown)': 'onKeydown($event)',
+    '[attr.aria-checked]': 'checked',
+    '[attr.aria-disabled]': 'disabled_',
+    '[attr.role]': 'role'
+  }
 })
 @View({templateUrl: 'angular2_material/src/components/switcher/switch.html', directives: []})
 export class MdSwitch {