chore(build): rename ionic directory to src and update all references in the build process.

src/components/modal/modal.ios.scss

@@ -0,0 +1,19 @@
+@import "../../globals.ios";
+
+// iOS Modals
+// --------------------------------------------------
+
+$modal-ios-background-color:          $background-ios-color !default;
+$modal-ios-border-radius:             5px !default;
+
+.modal ion-page {
+  background-color: $modal-ios-background-color;
+}
+
+.modal-wrapper {
+  @media only screen and (min-width: 768px) and (min-height: 600px) {
+    overflow: hidden;
+
+    border-radius: $modal-ios-border-radius;
+  }
+}

src/components/modal/modal.md.scss

@@ -0,0 +1,11 @@
+@import "../../globals.md";
+
+// Material Design Modals
+// --------------------------------------------------
+
+$modal-md-background-color:          $background-md-color !default;
+
+
+.modal ion-page {
+  background-color: $modal-md-background-color;
+}

src/components/modal/modal.scss

@@ -0,0 +1,56 @@
+@import "../../globals.core";
+
+// Modals
+// --------------------------------------------------
+
+$modal-inset-min-width:                      768px !default;
+$modal-inset-min-height-small:               600px !default;
+$modal-inset-min-height-large:               768px !default;
+$modal-inset-width:                          600px !default;
+$modal-inset-height-small:                   500px !default;
+$modal-inset-height-large:                   600px !default;
+
+.modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  .backdrop {
+    @media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+      display: none;
+    }
+  }
+}
+
+.modal-wrapper {
+  z-index: 10;
+
+  height: 100%;
+
+  @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+    position: absolute;
+    top: calc(50% - (#{$modal-inset-height-small}/2));
+    left: calc(50% - (#{$modal-inset-width}/2));
+
+    width: $modal-inset-width;
+    height: $modal-inset-height-small;
+  }
+
+  @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
+    position: absolute;
+    top: calc(50% - (#{$modal-inset-height-large}/2));
+    left: calc(50% - (#{$modal-inset-width}/2));
+
+    width: $modal-inset-width;
+    height: $modal-inset-height-large;
+  }
+}
+
+.show-page ion-page {
+  display: flex;
+}

src/components/modal/modal.ts

@@ -0,0 +1,260 @@
+import {Component, DynamicComponentLoader, ViewChild, ViewContainerRef} from '@angular/core';
+
+import {NavParams} from '../nav/nav-params';
+import {ViewController} from '../nav/view-controller';
+import {Animation} from '../../animations/animation';
+import {Transition, TransitionOptions} from '../../transitions/transition';
+
+/**
+ * @name Modal
+ * @description
+ * A Modal is a content pane that goes over the user's current page.
+ * Usually it is used for making a choice or editing an item. A modal uses the
+ * `NavController` to
+ * {@link /docs/v2/api/components/nav/NavController/#present present}
+ * itself in the root nav stack. It is added to the stack similar to how
+ * {@link /docs/v2/api/components/nav/NavController/#push NavController.push}
+ * works.
+ *
+ * When a modal (or any other overlay such as an alert or actionsheet) is
+ * "presented" to a nav controller, the overlay is added to the app's root nav.
+ * After the modal has been presented, from within the component instance The
+ * modal can later be closed or "dismissed" by using the ViewController's
+ * `dismiss` method. Additionally, you can dismiss any overlay by using `pop`
+ * on the root nav controller.
+ *
+ * Data can be passed to a new modal through `Modal.create()` as the second
+ * argument. The data can then be accessed from the opened page by injecting
+ * `NavParams`. Note that the page, which opened as a modal, has no special
+ * "modal" logic within it, but uses `NavParams` no differently than a
+ * standard page.
+ *
+ * @usage
+ * ```ts
+ * import {Page, Modal, NavController, NavParams} from 'ionic-angular';
+ *
+ * @Page(...)
+ * class HomePage {
+ *
+ *  constructor(nav: NavController) {
+ *    this.nav = nav;
+ *  }
+ *
+ *  presentProfileModal() {
+ *    let profileModal = Modal.create(Profile, { userId: 8675309 });
+ *    this.nav.present(profileModal);
+ *  }
+ *
+ * }
+ *
+ * @Page(...)
+ * class Profile {
+ *
+ *  constructor(params: NavParams) {
+ *    console.log('UserId', params.get('userId'));
+ *  }
+ *
+ * }
+ * ```
+ *
+ * A modal can also emit data, which is useful when it is used to add or edit
+ * data. For example, a profile page could slide up in a modal, and on submit,
+ * the submit button could pass the updated profile data, then dismiss the
+ * modal.
+ *
+ * ```ts
+ * import {Page, Modal, NavController, ViewController} from 'ionic-angular';
+ *
+ * @Page(...)
+ * class HomePage {
+ *
+ *  constructor(nav: NavController) {
+ *    this.nav = nav;
+ *  }
+ *
+ *  presentContactModal() {
+ *    let contactModal = Modal.create(ContactUs);
+ *    this.nav.present(contactModal);
+ *  }
+ *
+ *  presentProfileModal() {
+ *    let profileModal = Modal.create(Profile, { userId: 8675309 });
+ *    profileModal.onDismiss(data => {
+ *      console.log(data);
+ *    });
+ *    this.nav.present(profileModal);
+ *  }
+ *
+ * }
+ *
+ * @Page(...)
+ * class Profile {
+ *
+ *  constructor(viewCtrl: ViewController) {
+ *    this.viewCtrl = viewCtrl;
+ *  }
+ *
+ *  dismiss() {
+ *    let data = { 'foo': 'bar' };
+ *    this.viewCtrl.dismiss(data);
+ *  }
+ *
+ * }
+ * ```
+ * @demo /docs/v2/demos/modal/
+ * @see {@link /docs/v2/components#modals Modal Component Docs}
+ */
+export class Modal extends ViewController {
+
+  constructor(componentType, data: any = {}) {
+    data.componentToPresent = componentType;
+    super(ModalComponent, data);
+    this.viewType = 'modal';
+    this.isOverlay = true;
+  }
+
+  /**
+  * @private
+  */
+  getTransitionName(direction) {
+    let key = (direction === 'back' ? 'modalLeave' : 'modalEnter');
+    return this._nav && this._nav.config.get(key);
+  }
+
+  /**
+   * @param {any} componentType Modal
+   * @param {object} data Modal options
+   */
+  static create(componentType, data = {}) {
+    return new Modal(componentType, data);
+  }
+
+}
+
+@Component({
+  selector: 'ion-modal',
+  template: `
+    <div class="backdrop"></div>
+    <div class="modal-wrapper">
+      <div #wrapper></div>
+    </div>
+  `
+})
+class ModalComponent {
+
+  @ViewChild('wrapper', {read: ViewContainerRef}) wrapper: ViewContainerRef;
+
+  constructor(private _loader: DynamicComponentLoader, private _navParams: NavParams, private _viewCtrl: ViewController) {
+  }
+
+  ngAfterViewInit() {
+    let component = this._navParams.data.componentToPresent;
+    this._loader.loadNextToLocation(component, this.wrapper).then(componentInstance => {
+      this._viewCtrl.setInstance(componentInstance.instance);
+      // TODO - validate what life cycle events aren't call and possibly call them here if needed
+    });
+  }
+}
+
+/**
+ * Animations for modals
+ */
+class ModalSlideIn extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = enteringView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    backdrop.fromTo('opacity', 0.01, 0.4);
+    let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
+    wrapper.fromTo('translateY', '100%', '0%');
+    this
+      .element(enteringView.pageRef())
+      .easing('cubic-bezier(0.36,0.66,0.04,1)')
+      .duration(400)
+      .before.addClass('show-page')
+      .add(backdrop)
+      .add(wrapper);
+
+    if (enteringView.hasNavbar()) {
+      // entering page has a navbar
+      let enteringNavBar = new Animation(enteringView.navbarRef());
+      enteringNavBar.before.addClass('show-navbar');
+      this.add(enteringNavBar);
+    }
+  }
+}
+Transition.register('modal-slide-in', ModalSlideIn);
+
+
+class ModalSlideOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = leavingView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    backdrop.fromTo('opacity', 0.4, 0.0);
+    let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
+    wrapper.fromTo('translateY', '0%', '100%');
+
+    this
+      .element(leavingView.pageRef())
+      .easing('ease-out')
+      .duration(250)
+      .add(backdrop)
+      .add(wrapper);
+  }
+}
+Transition.register('modal-slide-out', ModalSlideOut);
+
+
+class ModalMDSlideIn extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = enteringView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    backdrop.fromTo('opacity', 0.01, 0.4);
+    let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
+    wrapper.fromTo('translateY', '40px', '0px');
+
+    this
+      .element(enteringView.pageRef())
+      .easing('cubic-bezier(0.36,0.66,0.04,1)')
+      .duration(280)
+      .fadeIn()
+      .before.addClass('show-page')
+      .add(backdrop)
+      .add(wrapper);
+
+    if (enteringView.hasNavbar()) {
+      // entering page has a navbar
+      let enteringNavBar = new Animation(enteringView.navbarRef());
+      enteringNavBar.before.addClass('show-navbar');
+      this.add(enteringNavBar);
+    }
+  }
+}
+Transition.register('modal-md-slide-in', ModalMDSlideIn);
+
+
+class ModalMDSlideOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = leavingView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    backdrop.fromTo('opacity', 0.4, 0.0);
+    let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
+    wrapper.fromTo('translateY', '0px', '40px');
+
+    this
+      .element(leavingView.pageRef())
+      .duration(200)
+      .easing('cubic-bezier(0.47,0,0.745,0.715)')
+      .fadeOut()
+      .add(wrapper)
+      .add(backdrop);
+  }
+}
+Transition.register('modal-md-slide-out', ModalMDSlideOut);

src/components/modal/modal.wp.scss

@@ -0,0 +1,11 @@
+@import "../../globals.wp";
+
+// Windows Modals
+// --------------------------------------------------
+
+$modal-wp-background-color:          $background-wp-color !default;
+
+
+.modal ion-page {
+  background-color: $modal-wp-background-color;
+}

src/components/modal/test/basic/e2e.ts

@@ -0,0 +1,16 @@
+
+it('should open modal', function() {
+  element(by.css('.e2eOpenModal')).click();
+});
+
+it('should close with close button click', function() {
+  element(by.css('.e2eCloseMenu')).click();
+});
+
+it('should open toolbar modal', function() {
+  element(by.css('.e2eOpenToolbarModal')).click();
+});
+
+it('should close toolbar modal', function() {
+  element(by.css('.e2eCloseToolbarModal')).click();
+});

src/components/modal/test/basic/index.ts

@@ -0,0 +1,401 @@
+import {App, Page, Config, Platform} from '../../../../../ionic';
+import {Modal, ActionSheet, NavController, NavParams, Transition, TransitionOptions, ViewController} from '../../../../../ionic';
+
+@Page({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  platforms;
+
+  constructor(private nav: NavController, config: Config, platform: Platform) {
+    console.log('platforms', platform.platforms());
+    console.log('mode', config.get('mode'));
+
+    console.log('isRTL', platform.isRTL());
+    console.log('core', platform.is('core'));
+    console.log('cordova', platform.is('cordova'));
+    console.log('mobile', platform.is('mobile'));
+    console.log('mobileweb', platform.is('mobileweb'));
+    console.log('ipad', platform.is('ipad'));
+    console.log('iphone', platform.is('iphone'));
+    console.log('phablet', platform.is('phablet'));
+    console.log('tablet', platform.is('tablet'));
+    console.log('ios', platform.is('ios'));
+    console.log('android', platform.is('android'));
+    console.log('windows phone', platform.is('windows'));
+
+    platform.ready().then((readySource) => {
+      console.log('platform.ready, readySource:', readySource);
+    });
+
+    this.platforms = platform.platforms();
+  }
+
+  presentModal() {
+    let modal = Modal.create(ModalPassData, { userId: 8675309 });
+    this.nav.present(modal);
+
+    modal.onDismiss(data => {
+      console.log('modal data', data);
+    });
+  }
+
+  presentModalChildNav() {
+    let modal = Modal.create(ContactUs);
+    this.nav.present(modal);
+  }
+
+  presentToolbarModal() {
+    let modal = Modal.create(ToolbarModal);
+    this.nav.present(modal);
+
+    modal.subscribe(data => {
+      console.log('modal data', data);
+    });
+  }
+
+  presentModalWithInputs() {
+	  let modal = Modal.create(ModalWithInputs);
+    modal.onDismiss((data) => {
+      console.log('Modal with inputs data:', data);
+    });
+    this.nav.present(modal);
+  }
+
+  presentModalCustomAnimation() {
+    let modal = Modal.create(ContactUs);
+    this.nav.present(modal, {
+      animation: 'my-fade-in'
+    });
+  }
+}
+
+
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Data in/out</ion-title>
+    </ion-navbar>
+    <ion-content>
+      <ion-list>
+        <ion-item>
+          <ion-label>UserId</ion-label>
+          <ion-input type="number" [(ngModel)]="data.userId"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label>Name</ion-label>
+          <ion-input [(ngModel)]="data.name"></ion-input>
+        </ion-item>
+      </ion-list>
+      <button full (click)="submit()">Submit</button>
+    </ion-content>
+  `
+})
+class ModalPassData {
+  data;
+
+  constructor(params: NavParams, private viewCtrl: ViewController) {
+    this.data = {
+      userId: params.get('userId'),
+      name: 'Jenny'
+    };
+  }
+
+  submit() {
+    this.viewCtrl.dismiss(this.data);
+  }
+
+  onPageWillEnter(){
+    console.log("ModalPassData onPagewillEnter fired");
+  }
+
+  onPageDidEnter(){
+    console.log("ModalPassData onPageDidEnter fired");
+  }
+
+  onPageWillLeave(){
+    console.log("ModalPassData onPageWillLeave fired");
+  }
+
+  onPageDidLeave(){
+    console.log("ModalPassData onPageDidLeave fired");
+  }
+}
+
+
+@Page({
+  template: `
+    <ion-toolbar primary>
+      <ion-title>Toolbar 1</ion-title>
+    </ion-toolbar>
+
+    <ion-toolbar>
+      <ion-title>Toolbar 2</ion-title>
+    </ion-toolbar>
+
+    <ion-content padding>
+      <button block danger (click)="dismiss()" class="e2eCloseToolbarModal">
+        Dismission Modal
+      </button>
+    </ion-content>
+  `
+})
+class ToolbarModal {
+
+  constructor(private viewCtrl: ViewController) {}
+
+  dismiss() {
+    this.viewCtrl.emit({
+      toolbar: 'data'
+    });
+    this.viewCtrl.dismiss();
+  }
+
+}
+
+
+@Page({
+  template: `
+    <ion-toolbar secondary>
+      <ion-buttons start>
+        <button (click)="dismiss()">Close</button>
+      </ion-buttons>
+      <ion-title>Modal w/ Inputs</ion-title>
+    </ion-toolbar>
+    <ion-content>
+      <form #addForm="ngForm" (submit)="save($event)" novalidate>
+        <ion-list>
+          <ion-item>
+            <ion-label floating>Title <span [hidden]="title.valid">(Required)</span></ion-label>
+            <ion-input ngControl="title" type="text" [(ngModel)]="data.title" #title="ngForm" required autofocus></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label floating>Note <span [hidden]="note.valid">(Required)</span></ion-label>
+            <ion-input ngControl="note" type="text" [(ngModel)]="data.note" #note="ngForm" required></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label floating>Icon</ion-label>
+            <ion-input ngControl="icon" type="text" [(ngModel)]="data.icon" #icon="ngForm" autocomplete="on" autocorrect="on"></ion-input>
+          </ion-item>
+        </ion-list>
+        <div padding>
+          <button block large type="submit" [disabled]="!addForm.valid">Save</button>
+        </div>
+      </form>
+    </ion-content>
+  `
+})
+class ModalWithInputs {
+  data;
+
+  constructor(private viewCtrl: ViewController) {
+    this.data = {
+      title: 'Title',
+      note: 'Note',
+      icon: 'home'
+    };
+  }
+
+  public save(ev) {
+    this.viewCtrl.dismiss(this.data);
+  }
+
+  public dismiss() {
+    this.viewCtrl.dismiss(null);
+  }
+}
+
+
+@Page({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ContactUs {
+  root;
+
+  constructor() {
+    console.log('ContactUs constructor');
+    this.root = ModalFirstPage;
+  }
+  onPageLoaded() {
+    console.log('ContactUs onPageLoaded');
+  }
+  onPageWillEnter() {
+    console.log('ContactUs onPageWillEnter');
+  }
+  onPageDidEnter() {
+    console.log('ContactUs onPageDidEnter');
+  }
+  onPageWillLeave() {
+    console.log('ContactUs onPageWillLeave');
+  }
+  onPageDidLeave() {
+    console.log('ContactUs onPageDidLeave');
+  }
+  onPageWillUnload() {
+    console.log('ContactUs onPageWillUnload');
+  }
+  onPageDidUnload() {
+    console.log('ContactUs onPageDidUnload');
+  }
+}
+
+
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>First Page Header</ion-title>
+      <ion-buttons start>
+        <button class="e2eCloseMenu" (click)="dismiss()">Close</button>
+      </ion-buttons>
+    </ion-navbar>
+    <ion-content padding>
+      <p>
+        <button (click)="push()">Push (Go to 2nd)</button>
+      </p>
+      <p>
+        <button (click)="openActionSheet()">Open Action Sheet</button>
+      </p>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <ion-list>
+        <ion-item *ngFor="#item of items">
+          Item Number: {{item.value}}
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  `
+})
+class ModalFirstPage {
+
+  private items:any[];
+  constructor(private nav: NavController) {
+    this.items = [];
+    for ( let i = 0; i < 50; i++ ){
+      this.items.push({
+        value: (i + 1)
+      });
+    }
+  }
+
+  push() {
+    let page = ModalSecondPage;
+    let params = { id: 8675309, myData: [1,2,3,4] };
+    let opts = { animation: 'ios-transition' };
+
+    this.nav.push(page, params, opts);
+  }
+
+  dismiss() {
+    this.nav.rootNav.pop();
+  }
+
+  openActionSheet() {
+    let actionSheet = ActionSheet.create({
+      buttons: [
+        {
+          text: 'Destructive',
+          role: 'destructive',
+          handler: () => {
+            console.log('Destructive clicked');
+          }
+        },
+        {
+          text: 'Archive',
+          handler: () => {
+            console.log('Archive clicked');
+          }
+        },
+        {
+          text: 'Go To Root',
+          handler: () => {
+            // overlays are added and removed from the root navigation
+            // find the root navigation, and pop this alert
+            // when the alert is done animating out, then pop off the modal
+            this.nav.rootNav.pop().then(() => {
+              this.nav.rootNav.pop();
+            });
+
+            // by default an alert will dismiss itself
+            // however, we don't want to use the default
+            // but rather fire off our own pop navigation
+            // return false so it doesn't pop automatically
+            return false;
+          }
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            console.log('cancel this clicked');
+          }
+        }
+      ]
+    });
+
+    this.nav.present(actionSheet);
+  }
+}
+
+
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Second Page Header</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <p>
+        <button (click)="nav.pop()">Pop (Go back to 1st)</button>
+      </p>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+    </ion-content>
+  `
+})
+class ModalSecondPage {
+  constructor(
+    private nav: NavController,
+    params: NavParams
+  ) {
+    console.log('Second page params:', params);
+  }
+}
+
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root;
+
+  constructor() {
+    this.root = E2EPage;
+  }
+}
+
+
+class FadeIn extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+    this
+      .element(enteringView.pageRef())
+      .easing('ease')
+      .duration(1000)
+      .fromTo('translateY', '0%', '0%')
+      .fadeIn()
+      .before.addClass('show-page');
+  }
+}
+Transition.register('my-fade-in', FadeIn);
+
+class FadeOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+    this
+      .element(leavingView.pageRef())
+      .easing('ease')
+      .duration(500)
+      .fadeOut()
+      .before.addClass('show-page');
+  }
+}
+Transition.register('my-fade-out', FadeOut);

src/components/modal/test/basic/main.html

@@ -0,0 +1,25 @@
+
+<ion-navbar *navbar>
+  <ion-title>Modals</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+  <p>
+    <button (click)="presentModal()">Present modal, pass params</button>
+  </p>
+  <p>
+    <button class="e2eOpenModal" (click)="presentModalChildNav()">Present modal w/ child ion-nav</button>
+  </p>
+  <p>
+    <button class="e2eOpenToolbarModal" (click)="presentToolbarModal()">Present modal w/ toolbar</button>
+  </p>
+  <p>
+    <button (click)="presentModalWithInputs()">Present modal w/ inputs</button>
+  </p>
+  <p>
+    <button (click)="presentModalCustomAnimation()">Modal: Custom Animation</button>
+  </p>
+  <p>
+    {{platforms | json}}
+  </p>
+</ion-content>