chore(): begin adding ionic components to mono-repo.

packages/ionic-angular/demos/src/item-reorder/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

packages/ionic-angular/demos/src/item-reorder/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/demos/src/item-reorder/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/demos/src/item-reorder/pages/page-one/page-one.html

@@ -0,0 +1,28 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Item Reorder</ion-title>
+    <ion-buttons end>
+      <ion-button (click)="toggleEdit()">{{editButton}}</ion-button>
+    </ion-buttons>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content fullscreen>
+
+  <ion-list class="chat-sliding-demo">
+    <ion-list-header>
+      Playlist
+    </ion-list-header>
+
+    <ion-item-group [reorder]="editing" (ionItemReorder)="reorderData($event)">
+      <ion-item *ngFor="let song of songs">
+        <h2>{{ song.title }}</h2>
+        <p>{{ song.band }} • {{ song.album }}</p>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+</ion-content>

packages/ionic-angular/demos/src/item-reorder/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

packages/ionic-angular/demos/src/item-reorder/pages/page-one/page-one.ts

@@ -0,0 +1,74 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { NavController, reorderArray } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-one.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class PageOne {
+  songs: any[];
+  editButton: string = 'Edit';
+  editing: boolean = false;
+
+  constructor(public navCtrl: NavController) {
+    this.songs = [
+    {
+      title: 'Everything Beta',
+      band: 'Phoria',
+      album: 'Volition'
+    },
+    {
+      title: 'Hello',
+      band: 'Adele',
+      album: '25'
+    },
+    {
+      title: 'Bohemian Rhapsody',
+      band: 'Queen',
+      album: 'A Night at the Opera'
+    },
+    {
+      title: 'Don\'t Stop Believin\'',
+      band: 'Journey',
+      album: 'Escape'
+    },
+    {
+      title: 'Smells Like Teen Spirit',
+      band: 'Nirvana',
+      album: 'Nevermind'
+    },
+    {
+      title: 'All You Need Is Love',
+      band: 'The Beatles',
+      album: 'Magical Mystery Tour'
+    },
+    {
+      title: 'Hotel California',
+      band: 'The Eagles',
+      album: 'Hotel California'
+    },
+    {
+      title: 'The Hand That Feeds',
+      band: 'Nine Inch Nails',
+      album: 'With Teeth'
+    },
+    {
+      title: 'Who Are You',
+      band: 'The Who',
+      album: 'Who Are You'
+    }];
+  }
+
+  toggleEdit() {
+    this.editing = !this.editing;
+    if (this.editing) {
+      this.editButton = 'Done';
+    } else {
+      this.editButton = 'Edit';
+    }
+  }
+
+  reorderData(indexes: any) {
+    this.songs = reorderArray(this.songs, indexes);
+  }
+}