fix(input): update input css/tests

ionic/components/card/test/list/main.html

@@ -11,10 +11,11 @@
         Card List
       </ion-list-header>
 
-      <ion-toggle>
+      <ion-item>
         <ion-icon name="wifi" item-left></ion-icon>
-        Wifi
+        <ion-label>Wifi</ion-label>
-      </ion-toggle>
+        <ion-toggle></ion-toggle>
+      </ion-item>
 
       <ion-item>
         <ion-icon name="heart" item-left></ion-icon>
@@ -44,10 +45,11 @@
         Card List Without Lines
       </ion-list-header>
 
-      <ion-toggle>
+      <ion-item>
         <ion-icon name="wifi" item-left></ion-icon>
-        Wifi
+        <ion-label>Wifi</ion-label>
-      </ion-toggle>
+        <ion-toggle></ion-toggle>
+      </ion-item>
 
       <ion-item>
         <ion-icon name="heart" item-left></ion-icon>
@@ -75,10 +77,11 @@
       Card With Items (No List)
     </ion-card-header>
 
-    <ion-toggle>
+    <ion-item>
       <ion-icon name="wifi" item-left></ion-icon>
-      Wifi
+      <ion-label>Wifi</ion-label>
-    </ion-toggle>
+      <ion-toggle></ion-toggle>
+    </ion-item>
 
     <ion-item>
       <ion-icon name="heart" item-left></ion-icon>

ionic/components/checkbox/checkbox.ios.scss

@@ -19,7 +19,7 @@ $checkbox-ios-icon-checkmark-color:       $background-ios-color !default;
 
 $checkbox-ios-media-margin:               $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
 
-$checkbox-ios-disabled-opacity:           0.5 !default;
+$checkbox-ios-disabled-opacity:           0.4 !default;
 
 
 // iOS Checkbox Outer Circle: Unchecked

ionic/components/checkbox/checkbox.md.scss

@@ -9,7 +9,7 @@ $checkbox-md-border-bottom-color:        $list-md-border-color !default;
 $checkbox-md-padding:                    $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
 $checkbox-md-margin:                     0 !default;
 $checkbox-md-media-margin:               $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
-$checkbox-md-disabled-opacity:           0.5 !default;
+$checkbox-md-disabled-opacity:           0.4 !default;
 
 $checkbox-md-icon-background-color-off:  $list-md-background-color !default;
 $checkbox-md-icon-background-color-on:   map-get($colors-md, primary) !default;
@@ -78,13 +78,17 @@ $checkbox-md-icon-border-color-on:       map-get($colors-md, primary) !default;
 }
 
 
-// Material Design Checkbox within an item
+// Material Design Checkbox Within An Item
 // -----------------------------------------
 
 .item ion-checkbox {
   margin: $checkbox-md-media-margin;
 }
 
+ion-checkbox + .item-inner ion-label {
+  margin-left: 0;
+}
+
 
 // Material Design Checkbox Color Mixin
 // --------------------------------------------------

ionic/components/checkbox/checkbox.ts

@@ -80,6 +80,7 @@ export class Checkbox {
     if (_item) {
       this.id = 'chk-' + _item.registerInput('checkbox');
       this._labelId = 'lbl-' + _item.id;
+      this._item.setCssClass('item-checkbox', true);
     }
   }
 
@@ -91,11 +92,11 @@ export class Checkbox {
     this.checked = !this.checked;
   }
 
+  @Input()
   get checked() {
     return this._checked;
   }
 
-  @Input()
   set checked(val) {
     if (!this._disabled) {
       this._checked = (val === true || val === 'true');
@@ -104,11 +105,11 @@ export class Checkbox {
     }
   }
 
+  @Input()
   get disabled() {
     return this._disabled;
   }
 
-  @Input()
   set disabled(val) {
     this._disabled = (val === true || val === 'true');
     this._item && this._item.setCssClass('item-checkbox-disabled', this._disabled);

ionic/components/input/input.scss

@@ -1,14 +1,25 @@
 @import "../../globals.core";
 
-// Input Wrapper
+// Input/Textarea Wrapper
 // --------------------------------------------------
 
-ion-input {
+ion-input,
+ion-textarea {
   display: block;
   flex: 1;
 }
 
 
+
+
+// Textarea Within An Item
+// --------------------------------------------------
+
+.item.item-textarea {
+  align-items: stretch;
+}
+
+
 // Native Text Input
 // --------------------------------------------------
 

ionic/components/input/test/fixed-inline-labels/index.ts

@@ -8,6 +8,6 @@ class E2EApp {
   url;
 
   constructor() {
-    this.url = 'hello';
+    this.input1 = 'Text 1';
   }
 }

ionic/components/input/test/fixed-inline-labels/main.html

@@ -9,12 +9,7 @@
 
     <ion-item>
       <ion-label fixed>To</ion-label>
-      <ion-input [(ngModel)]="url" type="url"></ion-input>
+      <ion-input [(ngModel)]="input1"></ion-input>
-    </ion-item>
-
-    <ion-item>
-      <ion-label fixed>Comments</ion-label>
-      <ion-textarea value="Comment value"></ion-textarea>
     </ion-item>
 
     <ion-item>
@@ -30,6 +25,11 @@
       </button>
     </ion-item>
 
+    <ion-item>
+      <ion-label fixed>Comments</ion-label>
+      <ion-textarea value="Comment value"></ion-textarea>
+    </ion-item>
+
     <ion-item>
       <ion-icon name="globe" item-left></ion-icon>
       <ion-label fixed>Website</ion-label>

ionic/components/input/test/inline-labels/main.html

@@ -90,9 +90,8 @@
 
     <ion-item>
       <ion-label>No List</ion-label>
-      <ion-input value="ListFreeeee">
+      <ion-input value="ListFreeeee"></ion-input>
     </ion-item>
-    <ion-textarea></ion-textarea>
 
   </form>
 

ionic/components/input/test/placeholder-labels/main.html

@@ -27,11 +27,11 @@
     </ion-item>
 
     <ion-item>
-      <ion-textarea placeholder="ion-textarea Placeholder"></ion-textarea>
+      <ion-textarea placeholder="Textarea Placeholder"></ion-textarea>
     </ion-item>
 
     <ion-item>
-      <ion-textarea placeholder="ion-textarea Placeholder">ion-textarea value</ion-textarea>
+      <ion-textarea placeholder="ion-textarea Placeholder" value="Textarea value"></ion-textarea>
     </ion-item>
 
   </ion-list>

ionic/components/label/label.scss

@@ -9,10 +9,6 @@ ion-label {
   white-space: nowrap;
 }
 
-ion-label:empty {
-  display: none;
-}
-
 
 .item-input ion-label {
   max-width: 200px;
@@ -24,6 +20,7 @@ ion-label:empty {
 // --------------------------------------------------
 
 ion-label[fixed] {
+  flex: 0;
   width: 30%;
   min-width: 100px;
   max-width: 200px;

ionic/components/label/test/basic/main.html

@@ -5,9 +5,9 @@
 
 <ion-content>
 
-  <ion-input>
+  <ion-item>
     <ion-label>Username</ion-label>
-    <input type="text" value="">
+    <ion-input></ion-input>
-  </ion-input>
+  </ion-item>
 
 </ion-content>

ionic/components/list/test/headers/main.html

@@ -8,10 +8,11 @@
       List Header
     </ion-list-header>
 
-    <ion-toggle>
+    <ion-item>
       <ion-icon name="wifi" item-left></ion-icon>
-      Wifi
+      <ion-label>Wifi</ion-label>
-    </ion-toggle>
+      <ion-toggle></ion-toggle>
+    </ion-item>
 
     <ion-item>
       <ion-icon name="heart" item-left></ion-icon>

ionic/components/list/test/inset/main.html

@@ -20,13 +20,15 @@
       List Link Item 2
     </a>
 
-    <ion-toggle checked="true">
+    <ion-item>
-      Toggle
+      <ion-label>Toggle</ion-label>
-    </ion-toggle>
+      <ion-toggle checked="true"></ion-toggle>
+    </ion-item>
 
-    <ion-checkbox checked="true">
+    <ion-item>
-      Checkbox
+      <ion-label>Checkbox</ion-label>
-    </ion-checkbox>
+      <ion-checkbox checked="true"></ion-checkbox>
+    </ion-item>
 
     <button ion-item>
       <ion-icon name="boat" item-left></ion-icon>

ionic/components/list/test/no-lines/main.html

@@ -6,10 +6,11 @@
       List With No Lines
     </ion-list-header>
 
-    <ion-toggle>
+    <ion-item>
       <ion-icon name="wifi" item-left></ion-icon>
-      Wifi
+      <ion-label>Wifi</ion-label>
-    </ion-toggle>
+      <ion-toggle></ion-toggle>
+    </ion-item>
 
     <ion-item>
       <ion-icon name="heart" item-left></ion-icon>

ionic/components/menu/test/basic/page1.html

@@ -41,10 +41,10 @@
   </p>
 
   <ion-card>
-    <ion-input>
+    <ion-item>
       <ion-label>Username:</ion-label>
-      <input type="text">
+      <ion-input></ion-input>
-    </ion-input>
+    </ion-item>
   </ion-card>
 
   <p>

ionic/components/modal/test/basic/index.ts

@@ -71,14 +71,14 @@ class E2EPage {
     </ion-navbar>
     <ion-content>
       <ion-list>
-        <ion-input>
+        <ion-item>
           <ion-label>UserId</ion-label>
-          <input type="number" [(ngModel)]="data.userId">
+          <ion-input type="number" [(ngModel)]="data.userId"></ion-input>
-        </ion-input>
+        </ion-item>
-        <ion-input>
+        <ion-item>
           <ion-label>Name</ion-label>
-          <input type="text" [(ngModel)]="data.name">
+          <ion-input [(ngModel)]="data.name"></ion-input>
-        </ion-input>
+        </ion-item>
       </ion-list>
       <button full (click)="submit()">Submit</button>
     </ion-content>

ionic/components/nav/test/basic/index.ts

@@ -33,10 +33,10 @@ class MyCmpTest{}
         <button ion-item (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button>
         <button ion-item (click)="pushAnother()">Push to AnotherPage</button>
 
-        <ion-input>
+        <ion-item>
           <ion-label>Text Input</ion-label>
-          <textarea></textarea>
+          <ion-textarea></ion-textarea>
-        </ion-input>
+        </ion-item>
 
         <button ion-item [navPush]="[pushPage, {id: 42}]">Push FullPage w/ [navPush] array</button>
         <button ion-item [navPush]="pushPage" [navParams]="{id:40}">Push w/ [navPush] and [navParams]</button>
@@ -218,10 +218,10 @@ class PrimaryHeaderPage {
     <ion-content>
       <ion-list>
 
-        <ion-input>
+        <ion-item>
           <ion-label>Text Input</ion-label>
-          <textarea></textarea>
+          <ion-textarea></ion-textarea>
-        </ion-input>
+        </ion-item>
 
         <ion-item>Back button hidden w/ <code>ion-navbar hideBackButton</code></ion-item>
         <button ion-item (click)="nav.pop()">Pop</button>

ionic/components/radio/radio-button.ts

@@ -9,17 +9,22 @@ import {RadioGroup} from './radio-group';
 
 /**
  * @description
- * A radio button with a unique value. Note that all `<ion-radio>` components
+ * A radio button with a unique value. Note that all `<ion-radio>`
- * must be wrapped within a `<ion-list radio-group>`, and there must be at
+ * components must be wrapped within a `<ion-list radio-group>`,
- * least two `<ion-radio>` components within the radio group.
+ * and there must be at least two `<ion-radio>` components within
+ * the radio group.
  *
- * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
+ * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for
+ * more info on forms and input.
  *
  * @usage
  * ```html
- * <ion-radio value="my-value" checked="true">
+ *
- *   Radio Label
+ * <ion-item>
- * </ion-radio>
+ *   <ion-label>Radio Label</ion-label>
+ *   <ion-radio value="radio-value"></ion-radio>
+ * </ion-item>
+ *
  * ```
  * @demo /docs/v2/demos/radio/
  * @see {@link /docs/v2/components#radio Radio Component Docs}
@@ -61,6 +66,7 @@ export class RadioButton {
     if (_item) {
       this.id = 'rb-' + _item.registerInput('radio');
       this._labelId = 'lbl-' + _item.id;
+      this._item.setCssClass('item-radio', true);
     }
 
     if (_group) {
@@ -78,16 +84,11 @@ export class RadioButton {
   }
 
   set checked(val) {
-<<<<<<< HEAD
     if (!this._disabled) {
       this._checked = (val === true || val === 'true');
       this.select.emit(this);
       this._item && this._item.setCssClass('item-radio-checked', this._checked);
     }
-=======
-    this._checked = (val === true || val === 'true');
-    this.select.emit(this);
->>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
   }
 
   @Input()
@@ -97,11 +98,7 @@ export class RadioButton {
 
   set disabled(val) {
     this._disabled = (val === true || val === 'true');
-<<<<<<< HEAD
     this._item && this._item.setCssClass('item-radio-disabled', this._disabled);
-=======
-    this._item && this._item.setCssClass('radio-disabled', val);
->>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
   }
 
   /**
@@ -109,11 +106,7 @@ export class RadioButton {
    */
   setChecked(val: boolean) {
     this._checked = val;
-<<<<<<< HEAD
     this._item && this._item.setCssClass('item-radio-checked', val);
-=======
-    this._item && this._item.setCssClass('radio-checked', val);
->>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
   }
 
   /**
@@ -121,11 +114,7 @@ export class RadioButton {
    */
   @HostListener('click', ['$event'])
   private _click(ev) {
-<<<<<<< HEAD
     console.debug('radio, select', this.value);
-=======
-    console.debug('RadioButton, select', this.value);
->>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
     ev.preventDefault();
     ev.stopPropagation();
     this.toggle();

ionic/components/radio/radio-group.ts

@@ -8,14 +8,14 @@ import {isDefined} from '../../util/util';
 
 /**
  * A radio group is a group of radio components, and its value comes
- * fr0m the selected radio button's value. Selecting a radio button
+ * from the selected radio button's value. Selecting a radio button
  * in the group unselects all others in the group.
  *
  * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
  *
  * @usage
  * ```html
- * <ion-list radio-group ngControl="autoManufacturers">
+ * <ion-list radio-group [(ngModel)]="autoManufacturers">
  *
  *   <ion-list-header>
  *     Auto Manufacturers

ionic/components/radio/radio-group.ts~3d61141c0391dbefcc6565ad94ab918ba2fff603

@@ -1,167 +0,0 @@
-import {Directive, ElementRef, Renderer, Optional, Input, Output, ContentChild, EventEmitter} from 'angular2/core';
-import {NgControl} from 'angular2/common';
-
-import {RadioButton} from './radio-button';
-import {ListHeader} from '../list/list';
-import {isDefined} from '../../util/util';
-
-
-/**
- * A radio group is a group of radio components, and its value comes
- * fr0m the selected radio button's value. Selecting a radio button
- * in the group unselects all others in the group.
- *
- * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
- *
- * @usage
- * ```html
- * <ion-list radio-group ngControl="autoManufacturers">
- *
- *   <ion-list-header>
- *     Auto Manufacturers
- *   </ion-list-header>
- *
- *   <ion-item>
- *     <ion-label>Cord</ion-label>
- *     <ion-radio value="cord"></ion-radio>
- *   </ion-item>
- *
- *   <ion-item>
- *     <ion-label>Duesenberg</ion-label>
- *     <ion-radio value="duesenberg" checked="true"></ion-radio>
- *   </ion-item>
- *
- *   <ion-item>
- *     <ion-label>Hudson</ion-label>
- *     <ion-radio value="hudson"></ion-radio>
- *   </ion-item>
- *
- *   <ion-item>
- *     <ion-label>Packard</ion-label>
- *     <ion-radio value="packard"></ion-radio>
- *   </ion-item>
- *
- *   <ion-item>
- *     <ion-label>Studebaker</ion-label>
- *     <ion-radio value="studebaker"></ion-radio>
- *   </ion-item>
- *
- * </ion-list>
- * ```
- * @demo /docs/v2/demos/radio/
- * @see {@link /docs/v2/components#radio Radio Component Docs}
-*/
-@Directive({
-  selector: '[radio-group]',
-  host: {
-    '[attr.aria-activedescendant]': 'activeId',
-    'role': 'radiogroup'
-  }
-})
-export class RadioGroup {
-  private _buttons: Array<RadioButton> = [];
-
-  id;
-  value;
-
-  @Output() change: EventEmitter<RadioGroup> = new EventEmitter();
-
-  constructor(
-    @Optional() ngControl: NgControl,
-    private _renderer: Renderer,
-    private _elementRef: ElementRef
-  ) {
-    this.id = ++radioGroupIds;
-
-    if (ngControl) {
-      ngControl.valueAccessor = this;
-    }
-  }
-
-  /**
-   * @private
-   * Angular2 Forms API method called by the model (Control) on change to update
-   * the checked value.
-   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
-   */
-  writeValue(value) {
-    this.value = isDefined(value) ? value : '';
-    this._buttons.forEach(button => {
-      let isChecked = (button.value === this.value);
-      button.setChecked(isChecked);
-      if (isChecked) {
-        this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
-      }
-    });
-  }
-
-  register(button: RadioButton) {
-    this._buttons.push(button);
-
-    button.select.subscribe(() => {
-      this.writeValue(button.value);
-      this.onChange(button.value);
-      this.change.emit(this);
-    });
-  }
-
-  ngAfterContentInit() {
-    this._buttons.forEach(button => {
-
-      if (isDefined(this.value)) {
-        let isChecked = (button.value === this.value) || button.checked;
-        button.setChecked(isChecked);
-        if (isChecked) {
-          this.writeValue(button.value);
-          //this.onChange(button.value);
-          this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
-        }
-      }
-
-    });
-  }
-
-  @ContentChild(ListHeader)
-  private set _header(header) {
-    if (header) {
-      if (!header.id) {
-        header.id = 'rg-hdr-' + this.id;
-      }
-      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
-    }
-  }
-
-  /**
-   * @private
-   */
-  onChange(val) {
-    // TODO: figure the whys and the becauses
-  }
-
-  /**
-   * @private
-   */
-  onTouched(val) {
-    // TODO: figure the whys and the becauses
-  }
-
-  /**
-   * @private
-   * Angular2 Forms API method called by the view (NgControl) to register the
-   * onChange event handler that updates the model (Control).
-   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
-   * @param {Function} fn  the onChange event handler.
-   */
-  registerOnChange(fn) { this.onChange = fn; }
-
-  /**
-   * @private
-   * Angular2 Forms API method called by the the view (NgControl) to register
-   * the onTouched event handler that marks the model (Control) as touched.
-   * @param {Function} fn  onTouched event handler.
-   */
-  registerOnTouched(fn) { this.onTouched = fn; }
-
-}
-
-let radioGroupIds = -1;

ionic/components/radio/radio-group.ts~HEAD

@@ -1,167 +0,0 @@
-import {Directive, ElementRef, Renderer, Optional, Input, Output, ContentChild, EventEmitter} from 'angular2/core';
-import {NgControl} from 'angular2/common';
-
-import {RadioButton} from './radio-button';
-import {ListHeader} from '../list/list';
-import {isDefined} from '../../util/util';
-
-
-/**
- * A radio group is a group of radio components, and its value comes
- * fr0m the selected radio button's value. Selecting a radio button
- * in the group unselects all others in the group.
- *
- * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
- *
- * @usage
- * ```html
- * <ion-list radio-group ngControl="autoManufacturers">
- *
- *   <ion-list-header>
- *     Auto Manufacturers
- *   </ion-list-header>
- *
- *   <ion-item>
- *     <ion-label>Cord</ion-label>
- *     <ion-radio value="cord"></ion-radio>
- *   </ion-item>
- *
- *   <ion-item>
- *     <ion-label>Duesenberg</ion-label>
- *     <ion-radio value="duesenberg" checked="true"></ion-radio>
- *   </ion-item>
- *
- *   <ion-item>
- *     <ion-label>Hudson</ion-label>
- *     <ion-radio value="hudson"></ion-radio>
- *   </ion-item>
- *
- *   <ion-item>
- *     <ion-label>Packard</ion-label>
- *     <ion-radio value="packard"></ion-radio>
- *   </ion-item>
- *
- *   <ion-item>
- *     <ion-label>Studebaker</ion-label>
- *     <ion-radio value="studebaker"></ion-radio>
- *   </ion-item>
- *
- * </ion-list>
- * ```
- * @demo /docs/v2/demos/radio/
- * @see {@link /docs/v2/components#radio Radio Component Docs}
-*/
-@Directive({
-  selector: '[radio-group]',
-  host: {
-    '[attr.aria-activedescendant]': 'activeId',
-    'role': 'radiogroup'
-  }
-})
-export class RadioGroup {
-  private _buttons: Array<RadioButton> = [];
-
-  id;
-  value;
-
-  @Output() change: EventEmitter<RadioGroup> = new EventEmitter();
-
-  constructor(
-    @Optional() ngControl: NgControl,
-    private _renderer: Renderer,
-    private _elementRef: ElementRef
-  ) {
-    this.id = ++radioGroupIds;
-
-    if (ngControl) {
-      ngControl.valueAccessor = this;
-    }
-  }
-
-  /**
-   * @private
-   * Angular2 Forms API method called by the model (Control) on change to update
-   * the checked value.
-   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
-   */
-  writeValue(value) {
-    this.value = isDefined(value) ? value : '';
-    this._buttons.forEach(button => {
-      let isChecked = (button.value === this.value);
-      button.setChecked(isChecked);
-      if (isChecked) {
-        this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
-      }
-    });
-  }
-
-  register(button: RadioButton) {
-    this._buttons.push(button);
-
-    button.select.subscribe(() => {
-      this.writeValue(button.value);
-      this.onChange(button.value);
-      this.change.emit(this);
-    });
-  }
-
-  ngAfterContentInit() {
-    this._buttons.forEach(button => {
-
-      if (isDefined(this.value)) {
-        let isChecked = (button.value === this.value) || button.checked;
-        button.setChecked(isChecked);
-        if (isChecked) {
-          this.writeValue(button.value);
-          //this.onChange(button.value);
-          this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
-        }
-      }
-
-    });
-  }
-
-  @ContentChild(ListHeader)
-  private set _header(header) {
-    if (header) {
-      if (!header.id) {
-        header.id = 'rg-hdr-' + this.id;
-      }
-      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
-    }
-  }
-
-  /**
-   * @private
-   */
-  onChange(val) {
-    // TODO: figure the whys and the becauses
-  }
-
-  /**
-   * @private
-   */
-  onTouched(val) {
-    // TODO: figure the whys and the becauses
-  }
-
-  /**
-   * @private
-   * Angular2 Forms API method called by the view (NgControl) to register the
-   * onChange event handler that updates the model (Control).
-   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
-   * @param {Function} fn  the onChange event handler.
-   */
-  registerOnChange(fn) { this.onChange = fn; }
-
-  /**
-   * @private
-   * Angular2 Forms API method called by the the view (NgControl) to register
-   * the onTouched event handler that marks the model (Control) as touched.
-   * @param {Function} fn  onTouched event handler.
-   */
-  registerOnTouched(fn) { this.onTouched = fn; }
-
-}
-
-let radioGroupIds = -1;

ionic/components/radio/radio.ios.scss

@@ -10,7 +10,7 @@ $radio-ios-icon-height:            21px !default;
 $radio-ios-icon-border-width:      2px !default;
 $radio-ios-icon-border-style:      solid !default;
 
-$radio-ios-disabled-opacity:       0.5 !default;
+$radio-ios-disabled-opacity:       0.4 !default;
 
 
 // iOS Radio Circle: Unchecked
@@ -32,10 +32,10 @@ $radio-ios-disabled-opacity:       0.5 !default;
   border-width: $radio-ios-icon-border-width;
   border-style: $radio-ios-icon-border-style;
   border-color: $radio-ios-color-on;
-  top: 3px;
+  top: 4px;
   left: 7px;
-  width: 4px;
+  width: 5px;
-  height: 10px;
+  height: 12px;
   border-left: none;
   border-top: none;
   transform: rotate(45deg);
@@ -60,6 +60,10 @@ $radio-ios-disabled-opacity:       0.5 !default;
   margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
 }
 
+.item-radio ion-label {
+  margin-left: 0;
+}
+
 
 // iOS Radio Item Label: Checked
 // -----------------------------------------

ionic/components/radio/radio.md.scss

@@ -15,7 +15,7 @@ $radio-md-icon-border-radius:     50% !default;
 $radio-md-transition-duration:    280ms !default;
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
-$radio-md-disabled-opacity:       0.5 !default;
+$radio-md-disabled-opacity:       0.4 !default;
 
 
 // Material Design Radio Outer Circle: Unchecked
@@ -83,7 +83,11 @@ $radio-md-disabled-opacity:       0.5 !default;
 
 .item ion-radio {
   display: block;
-  margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
+  margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
+}
+
+.item-radio ion-label {
+  margin-left: 0;
 }
 
 
@@ -100,10 +104,13 @@ $radio-md-disabled-opacity:       0.5 !default;
 
 @mixin radio-theme-md($color-name, $color-value) {
 
-  ion-radio[#{$color-name}] .radio-checked {
+  ion-radio[#{$color-name}] {
-    border-color: $color-value;
 
-    .radio-icon {
+    .radio-checked {
+      border-color: $color-value;
+    }
+
+    .radio-inner {
       background-color: $color-value;
     }
 

ionic/components/radio/test/basic/e2e.ts

@@ -1,4 +1,4 @@
 
 it('should check Cherry', function() {
-  element(by.css('.e2eCherry button')).click();
+  element(by.css('[value="cherry"] button')).click();
 });

ionic/components/select/select.ios.scss

@@ -13,3 +13,23 @@ $select-ios-padding-left:        $item-ios-padding-left !default;
 ion-select {
   padding: $select-ios-padding-top $select-ios-padding-right  $select-ios-padding-bottom $select-ios-padding-left;
 }
+
+.select-icon {
+  position: relative;
+  width: 12px;
+  height: 18px;
+}
+
+.select-icon .select-icon-inner {
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  margin-top: -2px;
+  width: 0;
+  height: 0;
+  border-top: 5px solid;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  color: #999;
+  pointer-events: none;
+}

ionic/components/select/select.md.scss

@@ -13,3 +13,27 @@ $select-md-padding-left:        $item-md-padding-left !default;
 ion-select {
   padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left;
 }
+
+.item-select ion-label {
+  margin-left: 0;
+}
+
+.select-icon {
+  position: relative;
+  width: 12px;
+  height: 19px;
+}
+
+.select-icon .select-icon-inner {
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  margin-top: -3px;
+  width: 0;
+  height: 0;
+  border-top: 5px solid;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  color: #999;
+  pointer-events: none;
+}

ionic/components/select/select.scss

@@ -18,26 +18,6 @@ ion-select {
   text-overflow: ellipsis;
 }
 
-.select-icon {
-  position: relative;
-  width: 16px;
-  height: 16px;
-}
-
-.select-icon .select-icon-inner {
-  position: absolute;
-  top: 50%;
-  left: 5px;
-  margin-top: -2px;
-  width: 0;
-  height: 0;
-  border-top: 5px solid;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-  color: #999;
-  pointer-events: none;
-}
-
 .item-multiple-inputs ion-select {
   position: relative;
 }

ionic/components/select/select.ts

@@ -4,7 +4,7 @@ import {NgControl} from 'angular2/common';
 import {Alert} from '../alert/alert';
 import {Form} from '../../util/form';
 import {Item} from '../item/item';
-import {merge} from '../../util/util';
+import {merge, isDefined} from '../../util/util';
 import {NavController} from '../nav/nav-controller';
 import {Option} from '../option/option';
 
@@ -143,6 +143,7 @@ export class Select {
     if (_item) {
       this.id = 'sel-' + _item.registerInput('select');
       this._labelId = 'lbl-' + _item.id;
+      this._item.setCssClass('item-select', true);
     }
 
     if (!_nav) {
@@ -154,24 +155,22 @@ export class Select {
    * @private
    */
   ngAfterContentInit() {
-    var selectedOption = this.options.toArray().find(o => o.checked);
+    let values = [];
+    let selectedTexts = [];
 
-    if (!selectedOption) {
+    this.options.toArray().forEach(option => {
-      this.options.toArray().forEach(o => {
+      if (option.checked) {
-        o.checked = o.value === this.value + '';
+        values.push( isDefined(option.value) ? option.value : option.text );
-        if (o.checked) {
+        selectedTexts.push(option.text);
-          selectedOption = o;
+      }
-        }
+    });
-      });
 
-    } else {
+    this.value = values.join(',');
-      this.value = selectedOption.value;
+    this._selectedText = selectedTexts.join(', ');
-      this._selectedText = selectedOption.text;
 
-      setTimeout(()=> {
+    setTimeout(()=> {
-        this.onChange(this.value);
+      this.onChange(this.value);
-      });
+    });
-    }
   }
 
   /**

ionic/components/select/test/multiple-value/e2e.ts

@@ -1 +1,4 @@
 
+it('should open toppings multiple select', function() {
+  element(by.css('.e2eSelectToppings button')).click();
+});

ionic/components/select/test/multiple-value/main.html

@@ -6,10 +6,10 @@
 
   <ion-item>
     <ion-label>Toppings</ion-label>
-    <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
+    <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!" class="e2eSelectToppings">
-      <ion-option value="bacon">Bacon</ion-option>
+      <ion-option value="bacon" checked="true">Bacon</ion-option>
       <ion-option value="olives">Black Olives</ion-option>
-      <ion-option value="xcheese">Extra Cheese</ion-option>
+      <ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
       <ion-option value="peppers">Green Peppers</ion-option>
       <ion-option value="mushrooms">Mushrooms</ion-option>
       <ion-option value="onions">Onions</ion-option>

ionic/components/select/test/single-value/e2e.ts

@@ -1 +1,4 @@
 
+it('should open gender single select', function() {
+  element(by.css('.e2eSelectGender button')).click();
+});

ionic/components/select/test/single-value/main.html

@@ -1,10 +1,12 @@
-<ion-toolbar><ion-title>Select Item: Single Value</ion-title></ion-toolbar>
+<ion-toolbar>
+  <ion-title>Select Item: Single Value</ion-title>
+</ion-toolbar>
 
 <ion-content class="outer-content">
 
   <ion-item>
     <ion-label>Gender</ion-label>
-    <ion-select [(ngModel)]="gender">
+    <ion-select [(ngModel)]="gender" class="e2eSelectGender">
       <ion-option value="f" checked="true">Female</ion-option>
       <ion-option value="m">Male</ion-option>
     </ion-select>
@@ -38,15 +40,13 @@
   <ion-item>
     <ion-label>Music</ion-label>
     <ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
-      <ion-option value="aliceinchains">Alice in Chains</ion-option>
+      <ion-option>Alice in Chains</ion-option>
-      <ion-option value="greenday">Green Day</ion-option>
+      <ion-option>Green Day</ion-option>
-      <ion-option value="hole">Hole</ion-option>
+      <ion-option>Nirvana</ion-option>
-      <ion-option value="korn">Korn</ion-option>
+      <ion-option>Pearl Jam</ion-option>
-      <ion-option value="nirvana">Nirvana</ion-option>
+      <ion-option>Smashing Pumpkins</ion-option>
-      <ion-option value="pearljam">Pearl Jam</ion-option>
+      <ion-option>Soundgarden</ion-option>
-      <ion-option value="smashingpumpkins">Smashing Pumpkins</ion-option>
+      <ion-option>Stone Temple Pilots</ion-option>
-      <ion-option value="soundgarden">Soundgarden</ion-option>
-      <ion-option value="stp">Stone Temple Pilots</ion-option>
     </ion-select>
   </ion-item>
 
@@ -60,11 +60,11 @@
       <ion-option value="05">May</ion-option>
       <ion-option value="06">June</ion-option>
       <ion-option value="07">July</ion-option>
-      <ion-option value="08" checked="true">August</ion-option>
+      <ion-option value="08">August</ion-option>
       <ion-option value="09">September</ion-option>
       <ion-option value="10">October</ion-option>
       <ion-option value="11">November</ion-option>
-      <ion-option value="12">December</ion-option>
+      <ion-option value="12" checked="true">December</ion-option>
     </ion-select>
     <ion-select [(ngModel)]="year">
       <ion-option>1989</ion-option>
@@ -86,6 +86,7 @@
     <code>gaming: {{gaming}}</code><br>
     <code>os: {{os}}</code><br>
     <code>music: {{music}}</code><br>
+    <code>date: {{month}}/{{year}}</code><br>
   </p>
 
 </ion-content>

ionic/components/tabs/test/advanced/index.ts

@@ -11,14 +11,14 @@ import {App, Page, NavController, Modal, ViewController, Tabs} from 'ionic/ionic
     </ion-navbar>
     <ion-content padding>
       <ion-card>
-        <ion-input>
+        <ion-item>
           <ion-label>Username:</ion-label>
-          <input type="text">
+          <ion-input></ion-input>
-        </ion-input>
+        </ion-item>
-        <ion-input>
+        <ion-item>
           <ion-label>Password:</ion-label>
-          <input type="password">
+          <ion-input type="password"></ion-input>
-        </ion-input>
+        </ion-item>
         <ion-item>
           <button block id="signIn" (click)="push()">Sign In</button>
         </ion-item>

ionic/components/toggle/test/basic/e2e.ts

@@ -1,6 +1,6 @@
 
 it('should check apple via switch element click', function() {
-  element(by.css('[ngControl=appleCtrl] .toggle-media')).click();
+  element(by.css('[value="apple"] button')).click();
 });
 
 

ionic/components/toggle/toggle.ios.scss

@@ -25,7 +25,7 @@ $toggle-ios-media-padding:             6px ($item-ios-padding-right / 2) 5px ($i
 
 $toggle-ios-transition-duration:       300ms !default;
 
-$toggle-ios-disabled-opacity:          0.5 !default;
+$toggle-ios-disabled-opacity:          0.4 !default;
 
 
 // iOS Toggle

ionic/components/toggle/toggle.md.scss

@@ -22,7 +22,7 @@ $toggle-md-media-padding:                12px ($item-md-padding-right / 2) 12px
 
 $toggle-md-transition-duration:          300ms !default;
 
-$toggle-md-disabled-opacity:             0.5 !default;
+$toggle-md-disabled-opacity:             0.4 !default;
 
 
 // Material Design Toggle
@@ -101,7 +101,7 @@ ion-toggle {
 }
 
 
-// Material Design Toggle within an item
+// Material Design Toggle Within An Item
 // -----------------------------------------
 
 .item ion-toggle {
@@ -110,14 +110,8 @@ ion-toggle {
   cursor: pointer;
 }
 
-
+.item-toggle ion-label {
-// Material Design Toggle Within An Item
+  margin-left: 0;
-// -----------------------------------------
-
-.item ion-toggle {
-  margin: $toggle-md-media-margin;
-  padding: $toggle-md-media-padding;
-  cursor: pointer;
 }
 
 

ionic/components/toggle/toggle.ts

@@ -106,6 +106,7 @@ export class Toggle {
     if (_item) {
       this.id = 'tgl-' + _item.registerInput('toggle');
       this._labelId = 'lbl-' + _item.id;
+      this._item.setCssClass('item-toggle', true);
     }
   }
 

ionic/util/form.ts

@@ -2,17 +2,9 @@ import {Injectable} from 'angular2/core';
 
 
 /**
- * The Input component is used to focus text input elements.
+ * @private
- *
- * @usage
- * ```html
- * <ion-input>
- *   <ion-label>Name</ion-label>
- *   <input value="Name" type="text">
- * </ion-input>
- * ```
  */
- @Injectable()
+@Injectable()
 export class Form {
   private _blur: HTMLElement;
   private _focused = null;

scripts/snapshot/snapshot.config.js

@@ -9,7 +9,7 @@ exports.config = {
   //domain: 'localhost:8080',
 
   //specs: 'dist/e2e/**/*e2e.js',
-  specs: 'dist/e2e/checkbox/**/*e2e.js',
+  specs: 'dist/e2e/input/**/*e2e.js',
 
   sleepBetweenSpecs: 350,