fix(input): update input css/tests

ionic/components/select/select.ios.scss

@@ -12,4 +12,24 @@ $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

@@ -12,4 +12,28 @@ $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(o => {
-        o.checked = o.value === this.value + '';
-        if (o.checked) {
-          selectedOption = o;
-        }
-      });
+    this.options.toArray().forEach(option => {
+      if (option.checked) {
+        values.push( isDefined(option.value) ? option.value : option.text );
+        selectedTexts.push(option.text);
+      }
+    });
 
-    } else {
-      this.value = selectedOption.value;
-      this._selectedText = selectedOption.text;
+    this.value = values.join(',');
+    this._selectedText = selectedTexts.join(', ');
 
-      setTimeout(()=> {
-        this.onChange(this.value);
-      });
-    }
+    setTimeout(()=> {
+      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-option value="bacon">Bacon</ion-option>
+    <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!" class="e2eSelectToppings">
+      <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 value="greenday">Green Day</ion-option>
-      <ion-option value="hole">Hole</ion-option>
-      <ion-option value="korn">Korn</ion-option>
-      <ion-option value="nirvana">Nirvana</ion-option>
-      <ion-option value="pearljam">Pearl Jam</ion-option>
-      <ion-option value="smashingpumpkins">Smashing Pumpkins</ion-option>
-      <ion-option value="soundgarden">Soundgarden</ion-option>
-      <ion-option value="stp">Stone Temple Pilots</ion-option>
+      <ion-option>Alice in Chains</ion-option>
+      <ion-option>Green Day</ion-option>
+      <ion-option>Nirvana</ion-option>
+      <ion-option>Pearl Jam</ion-option>
+      <ion-option>Smashing Pumpkins</ion-option>
+      <ion-option>Soundgarden</ion-option>
+      <ion-option>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>