refactor(refresher): allow refresher content customization

Breaking Change:

## Refresher:

- `<ion-refresher>` now takes a child `<ion-refresher-content>`
component.
- Custom refresh content components can now be replaced for Ionic's
default refresher content.
- Properties `pullingIcon`, `pullingText` and `refreshingText` have
been moved to the `<ion-refresher-content>` component.
- `spinner` property has been renamed to `refreshingSpinner` and now
goes on the `<ion-refresher-content>` component.
- `refreshingIcon` property is no longer an input, but instead
`refreshingSpinner` should be used.

Was:

```
<ion-refresher (refresh)="doRefresh($event)"
pullingIcon="arrow-dropdown">
</ion-refresher>
```

Now:

```
<ion-refresher (refresh)="doRefresh($event)">
  <ion-refresher-content
pullingIcon="arrow-dropdown"></ion-refresher-content>
</ion-refresher>
```

demos/refresher/index.ts

@@ -1,22 +1,31 @@
-import {App, Page, IonicApp} from 'ionic-angular';
+import {App, Page, Refresher} from 'ionic-angular';
+import {MockProvider} from './mock-provider';
+
 
 @App({
-  templateUrl: 'main.html'
+  templateUrl: 'main.html',
+  providers: [MockProvider]
 })
 class ApiDemoApp {
-  doRefresh(refresher) {
-    console.log('DOREFRESH', refresher)
+  items: string[];
 
-    setTimeout(() => {
-      refresher.complete();
-    })
+  constructor(private mockProvider: MockProvider) {
+    this.items = mockProvider.getData();
   }
 
-  doStarting() {
-    console.log('DOSTARTING');
+  doRefresh(refresher: Refresher) {
+    console.log('DOREFRESH', refresher);
+
+    this.mockProvider.getAsyncData().then((newData) => {
+      for (var i = 0; i < newData.length; i++) {
+        this.items.unshift( newData[i] );
+      }
+
+      refresher.endRefreshing();
+    });
   }
 
-  doPulling(amt) {
-    console.log('DOPULLING', amt);
+  doPulling(refresher: Refresher) {
+    console.log('DOPULLING', refresher.progress);
   }
 }

demos/refresher/main.html

@@ -1,33 +1,20 @@
 <ion-toolbar>
-  <ion-title>Refresher</ion-title>
+  <ion-title>Pull To Refresh</ion-title>
 </ion-toolbar>
 
 
 <ion-content>
-  <ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
+  <ion-refresher (refresh)="doRefresh($event)" (pulling)="doPulling($event)">
+    <ion-refresher-content
+      pullingText="Pull to refresh..."
+      refreshingText="Refreshing...">
+    </ion-refresher-content>
   </ion-refresher>
 
   <ion-list>
-    <ion-item>Item 1</ion-item>
-    <ion-item>Item 2</ion-item>
-    <ion-item>Item 3</ion-item>
-    <ion-item>Item 4</ion-item>
-    <ion-item>Item 5</ion-item>
-    <ion-item>Item 6</ion-item>
-    <ion-item>Item 7</ion-item>
-    <ion-item>Item 8</ion-item>
-    <ion-item>Item 9</ion-item>
-    <ion-item>Item 10</ion-item>
-    <ion-item>Item 11</ion-item>
-    <ion-item>Item 12</ion-item>
-    <ion-item>Item 13</ion-item>
-    <ion-item>Item 14</ion-item>
-    <ion-item>Item 15</ion-item>
-    <ion-item>Item 16</ion-item>
-    <ion-item>Item 17</ion-item>
-    <ion-item>Item 18</ion-item>
-    <ion-item>Item 19</ion-item>
-    <ion-item>Item 20</ion-item>
+    <ion-item *ngFor="#item of items">
+      {{ item }}
+    </ion-item>
   </ion-list>
 
 </ion-content>

demos/refresher/mock-provider.ts

@@ -0,0 +1,61 @@
+import {Injectable} from 'angular2/core';
+
+/**
+ * Mock Data Access Object
+ **/
+@Injectable()
+export class MockProvider {
+
+  getData() {
+    // return mock data synchronously
+    let data = [];
+    for (var i = 0; i < 3; i++) {
+      data.push( this._getRandomData() );
+    }
+    return data;
+  }
+
+  getAsyncData() {
+    // async receive mock data
+    return new Promise(resolve => {
+
+      setTimeout(() => {
+        resolve(this.getData());
+      }, 1000);
+
+    });
+  }
+
+  private _getRandomData() {
+    let i = Math.floor( Math.random() * this._data.length );
+    return this._data[i];
+  }
+
+  private _data = [
+    'Fast Times at Ridgemont High',
+    'Peggy Sue Got Married',
+    'Raising Arizona',
+    'Moonstruck',
+    'Fire Birds',
+    'Honeymoon in Vegas',
+    'Amos & Andrew',
+    'It Could Happen to You',
+    'Trapped in Paradise',
+    'Leaving Las Vegas',
+    'The Rock',
+    'Con Air',
+    'Face/Off',
+    'City of Angels',
+    'Gone in Sixty Seconds',
+    'The Family Man',
+    'Windtalkers',
+    'Matchstick Men',
+    'National Treasure',
+    'Ghost Rider',
+    'Grindhouse',
+    'Next',
+    'Kick-Ass',
+    'Drive Angry',
+  ];
+
+}