Search bar cleanup

ionic/components/content/test/basic/index.js

@@ -1,4 +1,4 @@
-import {bootstrap} from 'angular2/angular2'
+import {bootstrap, For} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
@@ -6,15 +6,26 @@ import {Content} from 'ionic/components/content/content';
 import {Icon} from 'ionic/components/icon/icon';
 import {Checkbox} from 'ionic/components/checkbox/checkbox';
 import {List} from 'ionic/components/list/list';
+import {Item} from 'ionic/components/item/item';
 
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [Content, Icon, Checkbox, List]
+  directives: [Content, Icon, Checkbox, List, Item, For]
 })
 class IonicApp {
   constructor() {
     console.log('IonicApp Start')
+
+    this.items = [];
+    for(let i = 0; i < 100; i++) {
+      this.items.push({
+        title: 'Item ' + i
+      });
+    }
+    setTimeout(() => {
+      console.log(this.items);
+    })
   }
 }
 

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

@@ -3,15 +3,27 @@
 
   <ion-content>
 
+    <!--
   <f></f>
   <f></f>
   <f></f>
   <f></f>
   <f></f>
+-->
+    <b>Items: {{items.length}}</b>
+    <ion-list>
+      <ion-item *for="#item of items">
+        {{item.title}}
+      </ion-item>
+    </ion-list>
 
   </ion-content>
 
 </ion-view>
 <style>
-  f { display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px; }
+  ion-content { background-color: black !important; }
+  .item { background: transparent !important; }
+  .item-content { background: transparent !important; }
+  .item-label { color: #fff; }
+  /*f { display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px; }*/
 </style>

ionic/components/search-bar/search-bar.js

@@ -1,4 +1,6 @@
-import {NgElement, Component, View} from 'angular2/angular2'
+import {ElementRef} from 'angular2/angular2'
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
 import {IonicComponent} from 'ionic/config/component'
 
 
@@ -17,9 +19,9 @@ import {IonicComponent} from 'ionic/config/component'
 })
 export class SearchBar {
   constructor(
-    ngElement: NgElement
+    elementRef: ElementRef
   ) {
-    this.domElement = ngElement.domElement
+    this.domElement = elementRef.domElement
     this.config = SearchBar.config.invoke(this)
   }
 }

ionic/components/segment/test/basic/index.js

@@ -1,4 +1,4 @@
-import {bootstrap} from 'angular2/angular2'
+import {bootstrap, Switch, SwitchWhen} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
@@ -9,7 +9,7 @@ import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/fo
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [FormDirectives].concat([Segment, SegmentButton, Content, Button])
+  directives: [FormDirectives].concat([Segment, SegmentButton, Content, Button, Switch, SwitchWhen])
 })
 class IonicApp {
   constructor() {

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

@@ -30,4 +30,16 @@
   </form>
 
   Map mode: <b>{{form.controls.mapStyle.value}}</b>
+
+  <div [switch]="form.controls.mapStyle.value">
+    <div *switch-when="'standard'">
+      <h2>Standard</h2>
+    </div>
+    <div *switch-when="'hybrid'">
+      <h2>Hybrid</h2>
+    </div>
+    <div *switch-when="'sat'">
+      <h2>Satellite!!</h2>
+    </div>
+  </div>
 </ion-content>