refactor(cssClass): update/cleanup css class usage

ionic/components/text-input/label.scss

@@ -32,7 +32,7 @@ ion-input[floating-label] {
     max-width: 100%;
   }
 
-  .text-input {
+  [text-input] {
     align-self: stretch;
     width: auto;
   }

ionic/components/text-input/label.ts

@@ -14,7 +14,6 @@ import {pointerCoord, hasPointerMoved} from '../../util/dom';
   ],
   host: {
     '[attr.id]': 'id',
-    'class': 'input-label',
     '(touchstart)': 'pointerStart($event)',
     '(touchend)': 'pointerEnd($event)',
     '(mousedown)': 'pointerStart($event)',

ionic/components/text-input/modes/ios.scss

@@ -8,12 +8,12 @@ $input-label-ios-color:         #7f7f7f !default;
 .list,
 ion-card {
 
-  .text-input {
+  [text-input] {
     margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
     padding: 0;
   }
 
-  ion-input[inset] .text-input {
+  ion-input[inset] [text-input] {
     margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left;
     padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
   }
@@ -28,8 +28,8 @@ ion-card {
     margin-bottom: 4px;
   }
 
-  [stacked-label] .text-input,
-  [floating-label] .text-input {
+  [stacked-label] [text-input],
+  [floating-label] [text-input] {
     margin-top: 8px;
     margin-bottom: 8px;
   }

ionic/components/text-input/modes/md.scss

@@ -9,7 +9,7 @@ $input-label-md-color:            #999 !default;
 .list,
 ion-card {
 
-  .text-input {
+  [text-input] {
     margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
     padding: 0;
   }
@@ -19,7 +19,7 @@ ion-card {
     left: 0;
   }
 
-  ion-input[inset] .text-input {
+  ion-input[inset] [text-input] {
     margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
     padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
   }
@@ -48,8 +48,8 @@ ion-card {
     color: $text-input-highlight-color;
   }
 
-  [stacked-label] .text-input,
-  [floating-label] .text-input {
+  [stacked-label] [text-input],
+  [floating-label] [text-input] {
     margin-bottom: 8px;
     margin-top: 8px;
   }

ionic/components/text-input/text-input.scss

@@ -24,13 +24,13 @@ ion-input.item {
   }
 }
 
-ion-input .text-input {
+ion-input [text-input] {
   flex: 1;
   background-color: $text-input-background-color;
   pointer-events: none;
 }
 
-ion-input.has-focus .text-input {
+ion-input.has-focus [text-input] {
   pointer-events: auto;
 }
 

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

@@ -1,4 +1,4 @@
-import {Directive, View, Host, Optional, ElementRef, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
+import {Directive, View, Host, Optional, ElementRef, Renderer, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import {IonicForm} from '../form/form';
@@ -21,8 +21,7 @@ import {IonicPlatform} from '../../platform/platform';
     '(touchend)': 'pointerEnd($event)',
     '(mouseup)': 'pointerEnd($event)',
     '[class.has-focus]': 'hasFocus',
-    '[class.has-value]': 'hasValue',
-    'class': 'item'
+    '[class.has-value]': 'hasValue'
   }
 })
 export class TextInput {
@@ -40,11 +39,14 @@ export class TextInput {
     form: IonicForm,
     elementRef: ElementRef,
     config: IonicConfig,
+    renderer: Renderer,
     app: IonicApp,
     zone: NgZone,
     platform: IonicPlatform,
     @Optional() @Host() scrollView: Content
   ) {
+    renderer.setElementClass(elementRef, 'item', true);
+
     this.form = form;
     form.register(this);
 
@@ -72,7 +74,8 @@ export class TextInput {
    */
   onInit() {
     if (this.input && this.label) {
-      this.input.labelledBy = this.label.id = (this.label.id || 'label-' + this.inputId);
+      this.label.id = (this.label.id || 'label-' + this.inputId)
+      this.input.labelledBy(this.label.id);
     }
 
     let self = this;
@@ -384,9 +387,7 @@ export class TextInput {
     'tabIndex'
   ],
   host: {
-    '[tabIndex]': 'tabIndex',
-    '[attr.aria-labelledby]': 'labelledBy',
-    'class': 'text-input'
+    '[tabIndex]': 'tabIndex'
   }
 })
 export class TextInputElement {
@@ -395,6 +396,7 @@ export class TextInputElement {
     form: IonicForm,
     @Attribute('type') type: string,
     elementRef: ElementRef,
+    renderer: Renderer,
     @Optional() textInputWrapper: TextInput
   ) {
     this.form = form;
@@ -402,6 +404,9 @@ export class TextInputElement {
     this.elementRef = elementRef;
     this.tabIndex = 0;
 
+    this.renderer = renderer;
+    renderer.setElementAttribute(this.elementRef, 'text-input', '');
+
     if (textInputWrapper) {
       // it's within ionic's ion-input, let ion-input handle what's up
       textInputWrapper.registerInput(this);
@@ -412,6 +417,10 @@ export class TextInputElement {
     }
   }
 
+  labelledBy(val) {
+    this.renderer.setElementAttribute(this.elementRef, 'aria-labelledby', val);
+  }
+
   initFocus() {
     this.elementRef.nativeElement.focus();
   }