Merge remote-tracking branch 'origin/master'

Conflicts:
	ionic/components/nav/nav-item.js
	ionic/components/view/view.scss

ionic/components.js

@@ -20,11 +20,10 @@ export * from 'ionic/components/nav/nav-item'
 export * from 'ionic/components/nav-bar/nav-bar'
 export * from 'ionic/components/slides/slides'
 export * from 'ionic/components/radio/radio'
-// export * from 'ionic/components/search-bar/search-bar'
+export * from 'ionic/components/search-bar/search-bar'
 // export * from 'ionic/components/split-view/split-view'
 export * from 'ionic/components/segment/segment'
 export * from 'ionic/components/switch/switch'
-export * from 'ionic/components/toolbar/toolbar'
 export * from 'ionic/components/view/view'
 export * from 'ionic/components/tabs/tabs'
 export * from 'ionic/components/tabs/tab'

ionic/components/app/structure.scss

@@ -117,7 +117,8 @@ ion-content {
   right: 0;
   bottom: 0;
   left: 0;
-  overflow-y: scroll;
+  overflow-y: auto;
+  overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
   will-change: scroll-position;
 }

ionic/components/app/test/sink/index.js

@@ -6,7 +6,7 @@ import {Query} from 'angular2/src/core/annotations_impl/di';
 
 console.log(Query, QueryList);
 
-import {Ionic, Nav, Toolbar, ViewContainer, Aside, List, Item, Content, Button} from 'ionic/ionic';
+import {Ionic, Nav, ViewContainer, Aside, List, Item, Content, Button} from 'ionic/ionic';
 
 import {ButtonPage} from './pages/button'
 import {NavPage} from './pages/nav'
@@ -14,19 +14,22 @@ import {ListPage} from './pages/list'
 import {CardPage} from './pages/card'
 import {FormPage} from './pages/form'
 import {SegmentPage} from './pages/segment'
-import {SearchBar} from './pages/search-bar'
+import {SearchBarPage} from './pages/search-bar'
 import {IconsPage} from './pages/ionicons'
+import {TabsPage} from './pages/tabs'
 import {AsidePage} from './pages/aside'
 import {SlidePage} from './pages/slides'
 import {ActionMenuPage} from './pages/action-menu'
 import {ModalPage} from './pages/modal'
 
+console.log('Loaded', Nav, NgFor, NgIf, Aside, List, ViewContainer, Item, Content, Button);
+
 @Component({
   selector: 'ion-app',
 })
 @View({
   templateUrl: 'main.html',
-  directives: [Nav, NgFor, NgIf, Aside, List, ViewContainer, Toolbar, Item, Content, Button]
+  directives: [Nav, NgFor, NgIf, Aside, List, ViewContainer, Item, Content, Button]
 })
 export class IonicApp {
   constructor(elementRef: ElementRef) {//, @Query(Aside) nav: QueryList) {//, @Descendant() aside: Aside) {
@@ -39,8 +42,9 @@ export class IonicApp {
       { title: 'Cards', component: CardPage },
       { title: 'Forms', component: FormPage },
       { title: 'Segments', component: SegmentPage },
-      { title: 'Search Bar', component: SearchBar},
+      { title: 'Search Bar', component: SearchBarPage },
       { title: 'Icons', component: IconsPage },
+      { title: 'Tabs', component: TabsPage },
       { title: 'Aside', component: AsidePage },
       { title: 'Slides', component: SlidePage},
       { title: 'Action Menu', component: ActionMenuPage },

ionic/components/app/test/sink/main.html

@@ -1,9 +1,14 @@
 <ion-aside #aside [content]="content">
-  <ion-list inset>
-    <ion-item *ng-for="#c of components" (^click)="openPage(aside, c)">
-      {{c.title}}
-    </ion-item>
-  </ion-list>
+  <ion-toolbar>
+    <ion-title>Ionic 2.0</ion-title>
+  </ion-toolbar>
+  <ion-content>
+    <ion-list inset>
+      <ion-item *ng-for="#c of components" (^click)="openPage(aside, c)">
+        {{c.title}}
+      </ion-item>
+    </ion-list>
+  </ion-content>
 </ion-aside>
 
 <ion-nav #content [initial]="firstPage"></ion-nav>

ionic/components/app/test/sink/pages/button.js

@@ -3,7 +3,7 @@ import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+import {Routable, NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'
@@ -43,3 +43,8 @@ export class ButtonPage {
     window.nav = nav;
   }
 }
+
+new Routable(ButtonPage, {
+  url: '/components/button',
+  tag: 'button'
+})

ionic/components/app/test/sink/pages/card.js

@@ -20,8 +20,8 @@ import {List, Item, ActionMenu, Modal, ModalRef,
       like it would be on an index card or a piece of paper.
     </p>
     <p>
-      Cards are great for displaying contextual informaion in a small amount of space,
-      like a Tweet, today's weather report, and a photo.
+      Cards are great for displaying contextual information in a small space,
+      like a Tweet, today's weather report, or a photo.
     </p>
     <div class="card">
 

ionic/components/app/test/sink/pages/form.js

@@ -3,7 +3,9 @@ import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {List, Item, ActionMenu, Modal, ModalRef,
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
+
+import {List, Item, Input, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
 
 @Component({
@@ -23,11 +25,31 @@ import {List, Item, ActionMenu, Modal, ModalRef,
       Ionic comes with a variety of useful from controls, like
       text inputs, text areas, toggle switches, and sliders.
     </p>
+    <form (^submit)="doSubmit($event)" [control-group]="form">
+      <ion-input>
+        <input control="email" type="email" placeholder="Your email">
+      </ion-input>
+      <ion-input>
+        <input control="password" type="password" placeholder="Your password">
+      </ion-input>
+      <button ion-button primary block type="submit">Submit</button>
+    </form>
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, List, Item]
+  directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input, Button]
 })
 export class FormPage {
   constructor() {
+    var fb = new FormBuilder()
+
+    this.form = fb.group({
+      email: ['', Validators.required],
+      password: ['', Validators.required],
+    });
+  }
+
+  doSubmit(event) {
+    console.log('Submitted:', this.form.value);
+    event.preventDefault();
   }
 }

ionic/components/app/test/sink/pages/search-bar.js

@@ -2,17 +2,19 @@ import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from '
 import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
-import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
-import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
+import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
 
+  console.log(NavbarTemplate, Navbar, Content, formDirectives);
+
 @Component({
   selector: 'ion-view'
 })
 @View({
   template: `
-  <ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
+  <ion-navbar *navbar><ion-title>Search Bar</ion-title></ion-navbar>
 
   <ion-content class="padding">
     <h2>Search Bar</h2>
@@ -25,17 +27,20 @@ import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
     </p>
 
     <form (^submit)="doSubmit($event)" [control-group]="form">
+      <ion-search-bar control="searchQuery"></ion-search-bar>
+      <div>
+        Query: <b>{{form.controls.searchQuery.value}}</b>
+      </div>
     </form>
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, List, Item, Segment, SegmentButton]
+  directives: [formDirectives, NavbarTemplate, Navbar, Content, SearchBar]
 })
-export class SegmentPage {
+export class SearchBarPage {
   constructor() {
     var fb = new FormBuilder();
     this.form = fb.group({
-      mapStyle: ['hybrid', Validators.required]
+      searchQuery: ['', Validators.required]
     });
-
   }
 }

ionic/components/app/test/sink/pages/segment.js

@@ -7,8 +7,6 @@ import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/fo
 import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
 
-console.log('imporrted', formDirectives, Segment, SegmentButton);
-
 @Component({
   selector: 'ion-view'
 })

ionic/components/app/test/sink/pages/tabs.js

@@ -0,0 +1,25 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
+
+import {NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Tabs</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content]
+})
+export class TabsPage {
+  constructor() {
+  }
+}

ionic/components/aside/aside.scss

@@ -1,12 +1,18 @@
-$aside-width: 304px;
-$aside-height: 304px;
-$aside-transition: 0.2s ease transform;
+$aside-width: 304px !default;
+$aside-height: 304px !default;
+$aside-transition: 0.2s ease transform !default;
+$aside-background: #fff !default;
+$aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !default;
 
 .aside {
   display: block;
   position: absolute;
 
-  background: #eee;
+  background: $aside-background;
+
+  display: flex;
+  flex-direction: column;
+
 
   &[type=overlay] {
     z-index: $z-index-aside-overlay;
@@ -72,6 +78,7 @@ $aside-transition: 0.2s ease transform;
 .aside-content {
   transition: $aside-transition;
   transform: translate3d(0,0,0);
+  box-shadow: $aside-shadow;
   &.aside-open-left {
     transform: translate3d($aside-width,0,0);
   }

ionic/components/button/button.scss

@@ -201,6 +201,7 @@ a.button {
     text-decoration: none;
   }
 
+  &:active,
   &.activated {
     opacity: 1;
     background-color: darken($bg-color, 12%);

ionic/components/card/card.scss

@@ -1,6 +1,9 @@
 
 // Card
 // --------------------------------------------------
+$card-border-color:               #ccc !default;
+$card-border-radius:              2px !default;
+$card-box-shadow:                 0 1px 3px rgba(0, 0, 0, .3) !default;
 
 .card {
   position: relative;
@@ -10,3 +13,24 @@
 .card .item-label {
   white-space: normal;
 }
+
+.card .item {
+  &:first-child {
+    border-top-left-radius: $card-border-radius;
+    border-top-right-radius: $card-border-radius;
+
+    .item-content {
+      border-top-left-radius: $card-border-radius;
+      border-top-right-radius: $card-border-radius;
+    }
+  }
+  &:last-child {
+    border-bottom-right-radius: $card-border-radius;
+    border-bottom-left-radius: $card-border-radius;
+
+    .item-content {
+      border-bottom-right-radius: $card-border-radius;
+      border-bottom-left-radius: $card-border-radius;
+    }
+  }
+}

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

@@ -2,16 +2,16 @@ import {bootstrap} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 //import {Button, Switch, Form, List, Label, Item, Input, Content} from 'ionic/ionic';
 import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
-console.log([FormDirectives].concat(IONIC_DIRECTIVES));
+console.log([formDirectives].concat(IONIC_DIRECTIVES));
 
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [FormDirectives].concat(IONIC_DIRECTIVES)
+  directives: [formDirectives].concat(IONIC_DIRECTIVES)
 })
 class IonicApp {
   constructor() {

ionic/components/item/item.scss

@@ -102,6 +102,10 @@ ion-primary-swipe-buttons {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  img {
+    max-width: 100%;
+  }
 }
 
 .item-media + .item-label {
@@ -109,7 +113,7 @@ ion-primary-swipe-buttons {
 }
 
 .item-media:last-child {
-  padding-right: $item-padding;
+  //padding-right: $item-padding;
 }
 
 .item-note {

ionic/components/nav/nav-item.js

@@ -5,6 +5,7 @@ import * as util from 'ionic/util';
 import {NavController} from './nav-controller';
 import {Nav} from './nav';
 import {NavPane, NavPaneSection} from './nav';
+import {Lifecycle} from 'ionic/components/view/lifecycle';
 
 
 export class NavItem {
@@ -194,14 +195,14 @@ export class NavItem {
 
   titleElement() {
     if (this._titleEle === undefined) {
-      //let navbarElement = this.navbarElement();
-      //if (navbarElement) {
-        // let titleEle = navbarElement.querySelector('ion-title');
-        // if (titleEle) {
-        //   this._titleEle = titleEle;
-        //   return this._titleEle;
-        // }
-      //}
+      let navbarElement = this.navbarElement();
+      if (navbarElement) {
+        let titleEle = navbarElement.querySelector('ion-title');
+        if (titleEle) {
+          this._titleEle = titleEle;
+          return this._titleEle;
+        }
+      }
       this._titleEle = null;
     }
     return this._titleEle;

ionic/components/nav/nav-item.js.orig

@@ -0,0 +1,244 @@
+import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
+import {bind} from 'angular2/di';
+
+import * as util from 'ionic/util';
+import {NavController} from './nav-controller';
+<<<<<<< HEAD
+import {Nav} from './nav';
+import {NavPane, NavPaneSection} from './nav';
+=======
+import {Lifecycle} from 'ionic/components/view/lifecycle';
+>>>>>>> origin/master
+
+
+export class NavItem {
+
+  constructor(nav, Component, params = {}) {
+    this.nav = nav;
+    this.Component = Component;
+    this.params = params;
+    this.id = util.nextUid();
+    this._titleEle = undefined;
+    this._backBtn = undefined;
+    this.disposals = [];
+
+    // if it's possible to go back from this nav item
+    this.enableBack = false;
+
+    this.protos = {};
+  }
+
+  addProtoViewRef(name, protoViewRef) {
+    this.protos[name] = protoViewRef;
+  }
+
+  stage() {
+    // update if it's possible to go back from this nav item
+    //this.enableBack = !!this.nav.getPrevious(this);
+
+    return this.render();;
+  }
+
+  render() {
+    if (this.isRendered) {
+      console.log('showed existing view', this.id);
+      return Promise.resolve();
+    }
+    this.isRendered = true;
+
+    let resolve;
+    let promise = new Promise((res) => { resolve = res; });
+
+    // compile the Component
+    this.nav.compiler.compileInHost(this.Component).then(componentProtoViewRef => {
+
+<<<<<<< HEAD
+      // figure out the sturcture of this Component
+      // does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars?
+      let itemStructure = this.getStructure(componentProtoViewRef);
+=======
+    this.nav.loader.loadNextToExistingLocation(this.Component, this.nav.contentElementRef, injector).then((componentRef) => {
+
+      Lifecycle.viewLoaded(componentRef.instance);
+
+      console.log('nav-item loadNextToExistingLocation', this.nav.contentElementRef);
+      let navbarContainer = this.nav.navbarContainerRef;
+>>>>>>> origin/master
+
+      // get the appropriate NavPane which this NavItem will fit into
+      this.nav.getNavPane(itemStructure).then(navPane => {
+
+        // create a new injector just for this NavItem
+        let injector = this.nav.injector.resolveAndCreateChild([
+          bind(NavController).toValue(this.nav.navCtrl),
+          bind(NavParams).toValue(new NavParams(this.params)),
+          bind(NavItem).toValue(this)
+        ]);
+
+        // add the content of the view to the content area
+        let viewContainer = navPane.contentContainerRef;
+        let hostViewRef = viewContainer.create(componentProtoViewRef, -1, null, injector);
+
+        this.disposals.push(() => {
+          viewContainer.remove( viewContainer.indexOf(hostViewRef) );
+        });
+
+        this.viewEle = hostViewRef._view.render._view.rootNodes[0];
+        this.viewEle.classList.add('nav-item');
+
+        // add only the sections it needs
+        if (itemStructure.navbar) {
+          let navbarViewContainer = navPane.sections.navbar.viewContainerRef;
+          this.navbarView = navbarViewContainer.create(this.protos.navbar, -1, null, injector);
+
+          this.disposals.push(() => {
+            navbarViewContainer.remove( navbarViewContainer.indexOf(this.navbarView) );
+          });
+        }
+
+        resolve();
+      });
+
+    });
+
+    return promise;
+  }
+
+  getStructure(componentProtoViewRef) {
+    // navbar - toolbar - toolbar - content - toolbar - tabbar
+    let itemStructure = {
+      navbar: true,
+      tabbar: false,
+      toolbars: [],
+      key: 'c'
+    };
+
+    return itemStructure;
+  }
+//     if (this.created) {
+//       console.log('showed existing view', this.id);
+//       return Promise.resolve();
+//     }
+
+//     this.created = true;
+
+//     let resolve;
+//     let promise = new Promise((res) => { resolve = res; });
+
+//     let injector = this.nav.injector.resolveAndCreateChild([
+//       bind(NavController).toValue(this.nav.navCtrl),
+//       bind(NavParams).toValue(new NavParams(this.params)),
+//       bind(NavItem).toValue(this)
+//     ]);
+
+//     this.nav.loader.loadNextToExistingLocation(this.Component, this.nav.contentElementRef, injector).then((componentRef) => {
+//       let navbarContainer = this.nav.navbarContainerRef;
+
+//       if (componentRef && componentRef.dispose && navbarContainer) {
+//         this.disposals.push(componentRef.dispose);
+
+//         this.viewEle = componentRef.location.domElement;
+//         this.viewEle.classList.add('ion-view');
+
+//         if (this._navbarProto) {
+//           let context = {
+//             boundElementIndex: 0,
+//             parentView: {
+//               _view: componentRef.location.parentView._view.componentChildViews[0]
+//             }
+//           };
+
+//           let atIndex = -1;
+
+//           this._navbarView = navbarContainer.create(this._navbarProto, atIndex, context, injector);
+
+//           if (this._navbarView) {
+//             this.disposals.push(() => {
+//               navbarContainer.remove( navbarContainer.indexOf(this._navbarView) );
+//             });
+//           }
+//         }
+//       }
+
+//       console.log('created view', this.id);
+//       resolve();
+//     });
+
+//     return promise;
+
+
+  cache() {
+    console.log('cached view', this.id);
+  }
+
+  destroy() {
+    console.log('destroyed view', this.id);
+
+    for (let i = 0; i < this.disposals.length; i++) {
+      this.disposals[i]();
+    }
+
+    // just to help prevent any possible memory leaks
+    for (let name in this) {
+      if (this.hasOwnProperty(name)) {
+        this[name] = null;
+      }
+    }
+  }
+
+  navbarProto(navbarProtoView) {
+    console.log('nav-item navbarProto')
+    this._navbarProto = navbarProtoView;
+  }
+
+  viewElement() {
+    return this.viewEle;
+  }
+
+  navbarElement() {
+    if (this.navbarView && this.navbarView._view) {
+      return this.navbarView._view.render._view.rootNodes[0];
+    }
+  }
+
+  contentElement() {
+    return this.viewEle.querySelector('ion-content');
+  }
+
+  titleElement() {
+    if (this._titleEle === undefined) {
+      //let navbarElement = this.navbarElement();
+      //if (navbarElement) {
+        // let titleEle = navbarElement.querySelector('ion-title');
+        // if (titleEle) {
+        //   this._titleEle = titleEle;
+        //   return this._titleEle;
+        // }
+      //}
+      this._titleEle = null;
+    }
+    return this._titleEle;
+  }
+
+  backButtonElement() {
+    if (this._backBtn === undefined) {
+      let navbarElement = this.navbarElement();
+      if (navbarElement) {
+        let backBtn = navbarElement.querySelector('back-button');
+        if (backBtn) {
+          this._backBtn = backBtn;
+          return this._backBtn;
+        }
+      }
+      this._backBtn = null;
+    }
+    return this._backBtn;
+  }
+
+}
+
+export class NavParams {
+  constructor(params) {
+    util.extend(this, params);
+  }
+}

ionic/components/nav/test/basic/pages/first-page.js

@@ -34,6 +34,14 @@ export class FirstPage {
     this.val = Math.round(Math.random() * 8999) + 1000;
   }
 
+  viewLoaded() {
+    console.log('VIEW LOADED');
+  }
+
+  viewWillShow() {
+    console.log('VIEW WILL SHOW');
+  }
+
   push() {
     this.nav.push(SecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' });
   }

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

@@ -32,8 +32,8 @@ export class SearchBar {
     cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
 
     setTimeout(() => {
-      console.log('Search bar for list', this.list);
-      this.query = 'Cats';
+      //console.log('Search bar for list', this.list);
+      this.query = '';
     })
   }
 
@@ -53,6 +53,7 @@ export class SearchBar {
   }
 }
 
+/*
 export class SearchPipe extends Pipe {
   constructor() {
     super();
@@ -74,6 +75,7 @@ export class SearchPipe extends Pipe {
     return new SearchPipe(cdRef);
   }
 }
+*/
 
 new IonicComponent(SearchBar, {
   properties: {

ionic/components/search-bar/test/basic/index.js

@@ -1,11 +1,11 @@
-import {bootstrap, For} from 'angular2/angular2'
+import {bootstrap, NgFor} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import { bind } from 'angular2/di';
 import { PipeRegistry } from 'angular2/change_detection';
 
-import {FormBuilder, Validators, FormDirectives, Control, ControlGroup} from 'angular2/forms';
+import {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/forms';
 
 import {Content} from 'ionic/components/content/content';
 import {List} from 'ionic/components/list/list';
@@ -21,7 +21,7 @@ function randomTitle() {
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [FormDirectives].concat([Content, List, Item, SearchBar, For])
+  directives: [formDirectives].concat([Content, List, Item, SearchBar, NgFor])
 })
 class IonicApp {
   constructor() {
@@ -56,15 +56,17 @@ class IonicApp {
   }
 }
 
+/*
 import { defaultPipes } from 'angular2/change_detection';
 export var pipes = Object.assign({}, defaultPipes, {
   'search': [
     new SearchPipe()
   ]
 });
+*/
 
 export function main() {
   bootstrap(IonicApp, [
-    bind(PipeRegistry).toValue(new PipeRegistry(pipes))
+    //bind(PipeRegistry).toValue(new PipeRegistry(pipes))
   ]);
 }

ionic/components/search-bar/test/basic/main.html

@@ -7,7 +7,7 @@
 
     <ion-list #list>
 
-      <ion-item *for="#item of getItems()"><!--items | search:form.controls.searchControl.value">-->
+      <ion-item *ng-for="#item of getItems()"><!--items | search:form.controls.searchControl.value">-->
         {{item.title}}
       </ion-item>
     </ion-list>

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

@@ -1,15 +1,17 @@
-import {bootstrap, Switch, SwitchWhen} from 'angular2/angular2'
+import {bootstrap, NgSwitch, NgSwitchWhen} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {Segment, SegmentButton, Content, Button} from 'ionic/ionic';
-import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 //import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
+console.log('Loaded', formDirectives, Segment, SegmentButton, Content, Button, NgSwitch, NgSwitchWhen);
+
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [FormDirectives].concat([Segment, SegmentButton, Content, Button, Switch, SwitchWhen])
+  directives: [formDirectives].concat([Segment, SegmentButton, Content, Button, NgSwitch, NgSwitchWhen])
 })
 class IonicApp {
   constructor() {

ionic/components/toolbar/extensions/ios.scss

@@ -17,7 +17,7 @@ $toolbar-ios-button-text-color:             #007aff !default;
 $toolbar-ios-button-background-color:       transparent !default;
 
 
-.platform-ios .toolbar {
+.platform-ios ion-toolbar {
 
   height: $toolbar-ios-height;
   background: $toolbar-ios-background;

ionic/components/toolbar/toolbar.scss

@@ -10,13 +10,14 @@ $toolbar-order: (
 
 
 ion-toolbar {
+  display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  position: relative;
 }
 
 .toolbar-inner {
-  display: flex;
   width: 100%;
 }
 

ionic/components/view/lifecycle.js

@@ -0,0 +1,14 @@
+export class Lifecycle {
+  static viewLoaded(component) {
+    component.viewLoaded && component.viewLoaded();
+  }
+  static viewWillShow(component) {
+    component.viewWillShow && component.viewWillShow();
+  }
+  static viewEntered(component) {
+    component.viewEntered && component.viewEntered();
+  }
+  static viewDestroyed(component) {
+    component.viewDestroyed && component.viewDestroyed();
+  }
+}

ionic/components/view/view.scss.orig

@@ -0,0 +1,30 @@
+
+ion-view {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background-color: white;
+<<<<<<< HEAD
+=======
+
+  // by default this is display: none;
+  // and the transition animation will display it
+  //display: none;
+  flex-direction: column;
+
+  display: flex;
+
+  /*
+  TODO: This is probably not the most common case,
+        should be display flex first, then remove for special cases.
+  &.show-view {
+    display: flex;
+  }
+  */
+
+>>>>>>> origin/master
+}

ionic/platform/platform.js

@@ -32,6 +32,10 @@ class PlatformController {
     registry[platform.name] = platform;
   }
 
+  getPlatform(name) {
+    return registry[name];
+  }
+
   set(platform) {
     activePlatform = platform;
 
@@ -92,7 +96,7 @@ Platform.register({
 
 // Last case is a catch-all
 Platform.setDefault({
-  name: 'core'
+  name: 'ios'
 });
 
-Platform.set( Platform.detect() );
+Platform.set( Platform.get('ios') );//Platform.detect() );