refactor(cssClass): use host class instead of renderer

Since angular2 alpha46 we can now use host: {‘class’:’item’} without it
getting removed by user css classes.

ionic/components/checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, Optional, NgControl, ElementRef, Renderer} from 'angular2/angular2';
+import {Component, Directive, Optional, NgControl, ElementRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Form} from '../../util/form';
@@ -30,7 +30,8 @@ import {Form} from '../../util/form';
     '[attr.aria-checked]': 'checked',
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-labelledby]': 'labelId',
-    '(click)': 'click($event)'
+    '(click)': 'click($event)',
+    'class': 'item'
   },
   template:
     '<div class="item-inner">' +
@@ -47,10 +48,8 @@ export class Checkbox {
   constructor(
     form: Form,
     @Optional() ngControl: NgControl,
-    elementRef: ElementRef,
-    renderer: Renderer
+    elementRef: ElementRef
   ) {
-    renderer.setElementClass(elementRef, 'item', true);
     this.form = form;
     form.register(this);
 

ionic/components/item/item.ts

@@ -5,16 +5,16 @@ import {Component} from 'angular2/angular2';
  * Creates a list-item that can easily be swiped,
  * deleted, reordered, edited, and more.
  *
- * There are three common ways to use an item: 
+ * There are three common ways to use an item:
  * - Use `<ion-item>` for something that is only non-clickable text.
  * - Use `<button ion-item>` for something that can be clicked/tapped. Typically this element will also have a `(click)` handler.
  * - Use `<a ion-item>` for when the item needs to contain a `href`.
  *
  * By default, `<button ion-item>` and `<a ion-item>` will receive a right arrow icon on iOS to signal that tapping the item will reveal more information.
- * To hide this icon, add the `detail-none` attribute to the item (eg: `<button ion-item detail-none>`). To add the icon when it is not displayed by default, 
+ * To hide this icon, add the `detail-none` attribute to the item (eg: `<button ion-item detail-none>`). To add the icon when it is not displayed by default,
  * add the `detail-push` attribute (eg: `<ion-item detail-push>`).
  *
- * 
+ *
  * @usage
  * ```html
  * <ion-list>
@@ -26,24 +26,20 @@ import {Component} from 'angular2/angular2';
  *   </ion-item>
  * </ion-list>
  *  ```
- * 
+ *
  */
 @Component({
   selector: 'ion-item,[ion-item]',
   template:
     '<ng-content select="[item-left]"></ng-content>' +
     '<div class="item-inner">' +
-      '<ng-content select="[item-right]"></ng-content>' +
       '<ion-item-content>' +
         '<ng-content></ng-content>'+
       '</ion-item-content>' +
+      '<ng-content select="[item-right]"></ng-content>' +
     '</div>',
   host: {
-    '[class.item]': 'isItem'
+    'class': 'item'
   }
 })
-export class Item {
-  constructor() {
-    this.isItem = true;
-  }
-}
+export class Item {}

ionic/components/list/list.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Renderer, NgZone} from 'angular2/angular2';
+import {Directive, ElementRef, NgZone} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
@@ -23,22 +23,18 @@ import * as util from 'ionic/util';
     'items',
     'virtual',
     'content'
-  ]
+  ],
+  host: {
+    'class': 'list'
+  }
 })
 export class List extends Ion {
-  /**
-   * TODO
-   * @param {ElementRef} elementRef  TODO
-   * @param {Config} config  TODO
-   */
-  constructor(elementRef: ElementRef, config: Config, renderer: Renderer, private zone: NgZone) {
+
+  constructor(elementRef: ElementRef, config: Config, private zone: NgZone) {
     super(elementRef, config);
-    renderer.setElementClass(elementRef, 'list', true);
     this.ele = elementRef.nativeElement;
   }
-  /**
-   * TODO
-   */
+
   onInit() {
     super.onInit();
 

ionic/components/navbar/navbar.ts

@@ -78,7 +78,8 @@ class ToolbarBackground {
       '<ng-content></ng-content>' +
     '</toolbar-content>',
   host: {
-    '[hidden]': '_hidden'
+    '[hidden]': '_hidden',
+    'class': 'toolbar'
   },
   inputs: [
     'hideBackButton',
@@ -98,8 +99,6 @@ export class Navbar extends ToolbarBase {
     this.app = app;
     this.renderer = renderer;
 
-    renderer.setElementClass(elementRef, 'toolbar', true);
-
     let navbarStyle = config.get('navbarStyle');
     if (navbarStyle) {
       renderer.setElementAttribute(elementRef, navbarStyle, '');

ionic/components/radio/radio.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2';
+import {Component, Directive, ElementRef, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2';
 
 import {Config} from '../../config/config';
 import {Ion} from '../ion';
@@ -47,7 +47,8 @@ import {ListHeader} from '../list/list';
   host: {
     'role': 'radiogroup',
     '[attr.aria-activedescendant]': 'activeId',
-    '[attr.aria-describedby]': 'describedById'
+    '[attr.aria-describedby]': 'describedById',
+    'class': 'list'
   }
 })
 export class RadioGroup extends Ion {
@@ -63,12 +64,10 @@ export class RadioGroup extends Ion {
   constructor(
     elementRef: ElementRef,
     config: Config,
-    renderer: Renderer,
     @Optional() ngControl: NgControl,
     @Query(ListHeader) private headerQuery: QueryList<ListHeader>
   ) {
     super(elementRef, config);
-    renderer.setElementClass(elementRef, 'list', true);
 
     this.id = ++radioGroupIds;
     this.radioIds = -1;
@@ -179,7 +178,8 @@ export class RadioGroup extends Ion {
     '[attr.aria-checked]': 'checked',
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-labelledby]': 'labelId',
-    '(click)': 'click($event)'
+    '(click)': 'click($event)',
+    'class': 'item'
   },
   template:
     '<div class="item-inner">' +
@@ -201,11 +201,9 @@ export class RadioButton extends Ion {
   constructor(
     @Host() @Optional() group: RadioGroup,
     elementRef: ElementRef,
-    config: Config,
-    renderer: Renderer
+    config: Config
   ) {
     super(elementRef, config);
-    renderer.setElementClass(elementRef, 'item', true);
 
     this.group = group;
     this.tabIndex = 0;

ionic/components/switch/switch.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2';
+import {Component, Directive, ElementRef, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2';
 
 import {Form} from '../../util/form';
 import {Config} from '../../config/config';
@@ -83,7 +83,8 @@ class MediaSwitch {
     '(touchstart)': 'pointerDown($event)',
     '(mousedown)': 'pointerDown($event)',
     '(touchend)': 'pointerUp($event)',
-    '(mouseup)': 'pointerUp($event)'
+    '(mouseup)': 'pointerUp($event)',
+    'class': 'item'
   },
   template:
     '<ng-content select="[item-left]"></ng-content>' +
@@ -108,14 +109,11 @@ export class Switch {
     form: Form,
     elementRef: ElementRef,
     config: Config,
-    renderer: Renderer,
     @Optional() private ngControl: NgControl
   ) {
     this.form = form;
     form.register(this);
 
-    renderer.setElementClass(elementRef, 'item', true);
-
     this.lastTouch = 0;
     this.mode = config.get('mode');
 

ionic/components/text-input/text-input.ts

@@ -17,7 +17,8 @@ import {Platform} from '../../platform/platform';
   host: {
     '(touchstart)': 'pointerStart($event)',
     '(touchend)': 'pointerEnd($event)',
-    '(mouseup)': 'pointerEnd($event)'
+    '(mouseup)': 'pointerEnd($event)',
+    'class': 'item'
   },
   template:
     '<div class="item-inner">' +
@@ -37,7 +38,6 @@ export class TextInput {
     platform: Platform,
     @Optional() @Host() scrollView: Content
   ) {
-    renderer.setElementClass(elementRef, 'item', true);
     this.renderer = renderer;
 
     this.form = form;

ionic/components/toolbar/toolbar.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, Host, ElementRef, Renderer, Optional, forwardRef, Inject} from 'angular2/angular2';
+import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
@@ -64,16 +64,17 @@ export class ToolbarBase extends Ion  {
     '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
     '<toolbar-content>' +
       '<ng-content></ng-content>' +
-    '</toolbar-content>'
+    '</toolbar-content>',
+  host: {
+    'class': 'toolbar'
+  }
 })
 export class Toolbar extends ToolbarBase {
   constructor(
     elementRef: ElementRef,
-    config: Config,
-    renderer: Renderer
+    config: Config
   ) {
     super(elementRef, config);
-    renderer.setElementClass(elementRef, 'toolbar', true);
   }
 
 }