Merge branch '2.0' into pr/5379

# Conflicts:
#	ionic/components/slides/slides.ts

ionic/components/slides/slides.ts

@@ -48,17 +48,6 @@ import {Scroll} from '../scroll/scroll';
  *})
  *
  *```
- * @property {Boolean} [autoplay] - whether or not the slides should automatically change
- * @property {Boolean} [loop] - whether the slides should loop from the last slide back to the first
- * @property {Number} [index] - The slide index to start on
- * @property {Boolean} [bounce] - whether the slides should bounce
- * @property {Boolean} [pager] - Whether the slide should show the page or not
- * @property {Any} [options] - Any additional slider options you want to pass
- * @property {Number} [zoom] - Whether or not the slider can zoom in or out
- * @property {Number} [zoomDuration] - how long it should take to zoom a slide
- * @property {Number} [zoomMax] - the max scale an slide can be zoomed
- * @property {Any} (change) - expression to evaluate when a slide has been changed
- * @property {Any} (move) - expression to evaluate when a slide is moving
  * @demo /docs/v2/demos/slides/
  * @see {@link /docs/v2/components#slides Slides Component Docs}
  *
@@ -166,57 +155,62 @@ export class Slides extends Ion {
 
 
   /**
-   * @private
+   * @input {boolean} whether or not the slides should automatically change
    */
   @Input() autoplay: any;
 
   /**
-   * @private
+   * @input {boolean} whether or not the slides should automatically change
    */
   @Input() loop: any;
 
   /**
-   * @private
+   * @input {number} The slide index to start on
    */
   @Input() index: any;
 
   /**
-   * @private
+   * @input {boolean} whether the slides should bounce
    */
   @Input() bounce: any;
 
   /**
-   * @private
+   * @input {boolean} Whether the slide should show the page or not
    */
   @Input() pager: any;
 
   /**
-   * @private
+   * @input {any} Any additional slider options you want to pass
    */
   @Input() options: any;
 
   /**
-   * @private
+   * @input {number} Whether or not the slider can zoom in or out
    */
   @Input() zoom: any;
 
   /**
-   * @private
+   * @input {number} how long it should take to zoom a slide
    */
   @Input() zoomDuration: any;
 
   /**
-   * @private
+   * @input {number} the max scale an slide can be zoomed
    */
   @Input() zoomMax: any;
 
   /**
-   * @private
+   * @output {any} expression to evaluate when a slide has been changed
    */
   @Output() change: EventEmitter<any> = new EventEmitter();
 
   /**
-   * @private
+   * @output {any} expression to evaluate when a slide change starts
+   */
+  @Output() slideChangeStart: EventEmitter<any> = new EventEmitter();
+
+  /**
+   * @output {any} expression to evaluate when a slide moves
    */
   @Output() move: EventEmitter<any> = new EventEmitter();
 
@@ -276,6 +270,7 @@ export class Slides extends Ion {
       return this.options.onTransitionEnd && this.options.onTransitionEnd(swiper, e);
     };
     options.onSlideChangeStart = (swiper) => {
+      this.slideChangeStart.emit(swiper);
       return this.options.onSlideChangeStart && this.options.onSlideChangeStart(swiper);
     };
     options.onSlideChangeEnd = (swiper) => {
@@ -464,8 +459,7 @@ export class Slides extends Ion {
 
     let zi = new Animation(this.touch.target.children[0])
       .duration(this.zoomDuration)
-      .easing('linear')
-      .fill('none');
+      .easing('linear');
 
     let zw = new Animation(this.touch.target.children[0])
       .duration(this.zoomDuration)

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

@@ -1,4 +1,4 @@
-import {App, IonicApp} from 'ionic/ionic';
+import {App, IonicApp} from '../../../../../ionic/ionic';
 import {Http} from 'angular2/http';
 
 @App({
@@ -22,14 +22,13 @@ class MyApp {
 
     this.http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key='
                   + FLICKR_API_KEY + '&nojsoncallback=1&format=json&tags=' + tags)
-       .map(res => res.json())
       .subscribe(data => {
-        this.images = data.photos.photo.slice(0, 20);
+        this.images = data.json().photos.photo.slice(0, 20);
         setTimeout(() => {
           this.slider.update();
         });
     }, (err) => {
-      alert('Unable to load images');
+      console.info('Unable to load images');
       console.error(err);
     })
   }

ionic/components/slides/test/intro/index.ts

@@ -1,11 +1,51 @@
-import {App} from 'ionic/ionic';
+import {App, Page, NavController} from 'ionic/ionic';
 
 
 @App({
-  templateUrl: 'main.html'
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
 })
 class MyApp {
-  onSlideChanged(slider) {
-    console.log('Slide changed', slider);
+  constructor() {
+    this.rootPage = IntroPage;
   }
 }
+
+@Page({
+  templateUrl: 'main.html'
+})
+class IntroPage {
+  continueText: string = "Skip";
+
+  constructor(public nav: NavController) {
+
+  }
+
+  onSlideChanged(slider) {
+    console.log("Slide changed", slider);
+  }
+
+  onSlideChangeStart(slider) {
+    console.log("Slide change start", slider);
+    slider.isEnd ? this.continueText = "Continue" : this.continueText = "Skip";
+  }
+
+  skip() {
+    this.nav.push(MainPage);
+  }
+}
+
+@Page({
+  template: `
+  <ion-navbar *navbar>
+    <ion-title>Slides</ion-title>
+  </ion-navbar>
+
+  <ion-content padding>
+    <h1>Another Page</h1>
+  </ion-content>
+
+  `
+})
+class MainPage {
+
+}

ionic/components/slides/test/intro/main.html

@@ -1,3 +1,41 @@
+<ion-navbar *navbar>
+  <ion-buttons end>
+    <button (click)="skip()">
+      {{continueText}}
+    </button>
+  </ion-buttons>
+  <ion-title>Slides</ion-title>
+</ion-navbar>
+
+<ion-content>
+  <ion-slides pager (change)="onSlideChanged($event)" (slideChangeStart)="onSlideChangeStart($event)" loop="true">
+    <ion-slide>
+      <h3>Thank you for choosing the Awesome App!</h3>
+      <div id="logo">
+        <img src="appicon.png" style="max-width: 128px">
+      </div>
+      <p>
+        The number one app for everything awesome.
+      </p>
+    </ion-slide>
+    <ion-slide>
+      <h3>Using Awesome</h3>
+
+       <div id="list">
+         <h5>Just three steps:</h5>
+         <ol>
+           <li>Be awesome</li>
+           <li>Stay awesome</li>
+           <li>There is no step 3</li>
+         </ol>
+       </div>
+    </ion-slide>
+    <ion-slide>
+      <h3>Any questions?</h3>
+    </ion-slide>
+  </ion-slides>
+</ion-content>
+
 <style>
 .slide {
   color: #000;
@@ -29,42 +67,3 @@
   display:none;
 }
 </style>
-<ion-navbar *navbar>
-  <ion-buttons start>
-    <button>
-      Skip
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button (click)="next()">
-      Next
-    </button>
-  </ion-buttons>
-  <ion-title>Grid Icons</ion-title>
-</ion-navbar>
-<ion-slides pager (change)="onSlideChanged($event)" loop="true" autoplay="true">
-  <ion-slide>
-    <h3>Thank you for choosing the Awesome App!</h3>
-    <div id="logo">
-      <img src="appicon.png" style="max-width: 128px">
-    </div>
-    <p>
-      The number one app for everything awesome.
-    </p>
-  </ion-slide>
-  <ion-slide>
-    <h3>Using Awesome</h3>
-
-     <div id="list">
-       <h5>Just three steps:</h5>
-       <ol>
-         <li>Be awesome</li>
-         <li>Stay awesome</li>
-         <li>There is no step 3</li>
-       </ol>
-     </div>
-  </ion-slide>
-  <ion-slide>
-    <h3>Any questions?</h3>
-  </ion-slide>
-</ion-slides>

ionic/components/slides/test/loop/index.ts

@@ -1,4 +1,4 @@
-import {App, IonicApp} from 'ionic/ionic';
+import {App, IonicApp} from '../../../../../ionic/ionic';
 
 @App({
   templateUrl: 'main.html'

ionic/components/slides/test/scroll/index.ts

@@ -1,4 +1,4 @@
-import {App} from 'ionic/ionic';
+import {App} from '../../../../../ionic/ionic';
 
 @App({
   templateUrl: 'main.html',