update to use host

ionic/components/action-menu/action-menu.js

@@ -42,8 +42,8 @@ export class ActionMenu extends Overlay {
   static get config() {
     return {
       selector: 'ion-action-menu',
-      hostProperties: {
+      host: {
-        'zIndex': 'style.z-index'
+        '[style.z-index]': 'zIndex'
       }
     }
   }

ionic/components/icon/icon.js

@@ -7,10 +7,8 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref';
   properties: [
     'name'
   ],
-  hostProperties: {
+  host: {
-    'label': 'attr.aria-label'
+    '[attr.aria-label]': 'label'
-  },
-  hostAttributes: {
     'role': 'img'
   },
   lifecycle: [onInit]

ionic/components/modal/modal.js

@@ -7,8 +7,8 @@ export class Modal extends Overlay {
   static get config() {
     return {
       selector: 'ion-modal',
-      hostProperties: {
+      host: {
-        'zIndex': 'style.z-index'
+        '[style.z-index]': 'zIndex'
       }
     }
   }

ionic/components/nav-bar/nav-bar.js

@@ -133,8 +133,8 @@ export class Navbar {
 
 @Directive({
   selector: '.back-button',
-  hostListeners: {
+  host: {
-    '^click': 'goBack($event)'
+    '(^click)': 'goBack($event)'
   }
 })
 class BackButton {

ionic/components/nav/nav-push.js

@@ -10,14 +10,12 @@ import {NavController} from './nav-controller';
 
 @Directive({
   selector: '[nav-push]',
-  hostListeners: {
-    '^click': 'onClick($event)'
-  },
   properties: [
     'navPush',
     'pushData'
   ],
-  hostAttributes: {
+  host: {
+    '(^click)': 'onClick($event)',
     'role': 'link'
   }
 })
@@ -33,10 +31,8 @@ export class NavPush {
 
 @Directive({
   selector: '[nav-pop]',
-  hostListeners: {
+  host: {
-    '^click': 'onClick($event)'
+    '(^click)': 'onClick($event)',
-  },
-  hostAttributes: {
     'role': 'link'
   }
 })

ionic/components/nav/pane.js

@@ -139,7 +139,7 @@ class PaneContentAnchor {
 
 @Component({
   selector: 'section',
-  hostAttributes: {
+  host: {
     'class': 'navbar-container'
   }
 })

ionic/components/nav/swipe-handle.js

@@ -10,8 +10,8 @@ import {Gesture} from 'ionic/gestures/gesture';
 
 @Directive({
   selector: '.swipe-handle',
-  hostProperties: {
+  host: {
-    'showHandle()': 'class.show-handle'
+    '[class.show-handle]': 'showHandle()'
   }
 })
 export class SwipeHandle {

ionic/components/radio/radio.js

@@ -109,12 +109,12 @@ export class RadioButton {
   static get config() {
     return {
       selector: 'ion-radio',
-      hostListeners: {
-        '^click': 'buttonClicked($event)'
-      },
       properties: [
         'value'
-      ]
+      ],
+      host: {
+        '(^click)': 'buttonClicked($event)'
+      }
     }
   }
 

ionic/components/segment/segment.js

@@ -23,14 +23,12 @@ export class Segment {
     return {
       selector: 'ion-segment',
       appInjector: [ControlDirective],
-      hostListeners: {
-        'click': 'buttonClicked($event)'
-      },
       properties: [
         'value'
       ],
-      hostProperties: {
+      host: {
-        value: 'value'
+        '(click)': 'buttonClicked($event)',
+        '[value]': 'value'
       }
     }
   }
@@ -113,17 +111,14 @@ export class Segment {
 }
 
 
-@Component({
+@Directive({
   selector: 'ion-segment-button',
-  hostListeners: {
-    'click': 'buttonClicked($event)'
-  },
   properties: [
     'value'
-  ]
+  ],
-})
+  host: {
-@View({
+    '(click)': 'buttonClicked($event)'
-  template: '<content></content>'
+  }
 })
 export class SegmentButton {
   constructor(

ionic/components/switch/switch.js

@@ -26,8 +26,8 @@ export class Switch {
       properties: [
         'checked'
       ],
-      hostListeners: {
+      host: {
-        'click': 'switchClicked($event)'
+        '(click)': 'switchClicked($event)'
       }
     }
   }

ionic/components/tabs/tab-button.js

@@ -7,13 +7,11 @@ import {Tabs} from './tabs';
 @Directive({
   selector: 'button.tab-button',
   properties: ['tab'],
-  hostProperties: {
+  host: {
-    'btnId': 'attr.id',
+    '[attr.id]': 'btnId',
-    'panelId': 'attr.aria-controls',
+    '[attr.aria-controls]': 'panelId',
-    'tab.isSelected': 'attr.aria-selected'
+    '[attr.aria-selected]': 'tab.isSelected',
-  },
+    '(^click)': 'onClick($event)'
-  hostListeners: {
-    '^click': 'onClick($event)'
   },
   lifecycle: [onInit]
 })

ionic/components/tabs/tab.js

@@ -20,13 +20,11 @@ import {Content} from '../content/content';
     'tabTitle',
     'tabIcon'
   ],
-  hostProperties: {
+  host: {
-    'panelId': 'attr.id',
+    '[attr.id]': 'panelId',
-    'labeledBy': 'attr.aria-labelledby',
+    '[attr.aria-labelledby]': 'labeledBy',
-    '!isSelected': 'attr.aria-hidden',
+    '[attr.aria-hidden]': '!isSelected',
-    'isSelected': 'class.tab-selected'
+    '[class.tab-selected]': 'isSelected',
-  },
-  hostAttributes: {
     'role': 'tabpanel'
   }
 })

ionic/config/component.js

@@ -1,4 +1,5 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {DirectiveMetadata} from 'angular2/src/render/api';
 
 import * as util from 'ionic/util';
 import {Platform} from 'ionic/platform/platform';
@@ -20,10 +21,13 @@ export class IonicComponent extends Component {
 
 function appendModeConfig(ComponentType) {
   let config = ComponentType.config;
+  config.host = config.host || {};
+
+//  let host = DirectiveMetadata.parseHostConfig(config.host);
+
   const defaultProperties = config.defaultProperties;
 
   config.properties = config.properties || [];
-  config.hostProperties = config.hostProperties || {};
 
   for (let prop in defaultProperties) {
     // add the property to the component "properties"
@@ -31,7 +35,7 @@ function appendModeConfig(ComponentType) {
 
     // set the component "hostProperties", so the instance's
     // property value will be used to set the element's attribute
-    config.hostProperties[prop] = 'attr.' + util.pascalCaseToDashCase(prop);
+    config.host['[attr.' + util.pascalCaseToDashCase(prop)] = prop;
   }
 
   // called by the component's onInit when an instance has been created and properties bound
@@ -88,10 +92,8 @@ function appendModeConfig(ComponentType) {
     };
   }
 
-  config.hostAttributes = config.hostAttributes || {};
-  let className = (config.hostAttributes['class'] || '');
   let id = config.classId || config.selector.replace('ion-', '');
-  config.hostAttributes['class'] = (className + ' ' + id + ' ' + id + '-' + platformMode).trim();
+  config.host['class'] = (id + ' ' + id + '-' + platformMode);
 
   return config;
 }