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

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

@@ -0,0 +1,8 @@
+
+it('should open toast', function() {
+  element(by.css('.e2eOpenToast')).click();
+});
+
+it('should close with backdrop click', function() {
+  element(by.css('.backdrop')).click();
+});

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

@@ -0,0 +1,84 @@
+import {App, Page, Toast, NavController} from '../../../../../ionic';
+
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Another Page</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <p>This is another page to show that the toast stays.</p>
+    </ion-content>
+  `
+})
+class AnotherPage {
+
+}
+
+@Page({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+
+  constructor(private nav: NavController) { }
+
+  showToast() {
+    const toast = Toast.create({
+      message: 'User was created successfully',
+      showCloseButton: true,
+      enableBackdropDismiss: false
+    });
+
+    toast.onDismiss(() => {
+      console.log('Dismissed toast');
+    });
+
+    this.nav.present(toast);
+
+    setTimeout(() => {
+      this.nav.push(AnotherPage);
+    }, 1000);
+  }
+
+  showLongToast() {
+    const toast = Toast.create({
+      message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.',
+    });
+
+    toast.onDismiss(this.dismissHandler);
+    this.nav.present(toast);
+  }
+
+  showDismissDurationToast() {
+    const toast = Toast.create({
+      message: 'I am dismissed after 1.5 seconds',
+      duration: 1500
+    });
+    toast.onDismiss(this.dismissHandler);
+    this.nav.present(toast);
+  }
+
+  showToastWithCloseButton() {
+    const toast = Toast.create({
+      message: 'Your internet connection appears to be offline. Data integrity is not gauranteed.',
+      showCloseButton: true,
+      closeButtonText: 'Ok'
+    });
+    toast.onDismiss(this.dismissHandler);
+    this.nav.present(toast);
+  }
+
+  private dismissHandler(toast: Toast) {
+    console.info('Toast onDismiss()');
+
+  }
+
+}
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root = E2EPage;
+  constructor() {
+  }
+}

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

@@ -0,0 +1,23 @@
+<ion-navbar *navbar>
+  <ion-title>Toasts</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+  <button block (click)="showToast()">Show Toast and Navigate</button>
+  <button block (click)="showLongToast()">Show Long Toast</button>
+  <br />
+  <button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>
+  <button block (click)="showToastWithCloseButton()" class="e2eOpenToast">With closeButtonText</button>
+
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia purus ac turpis fermentum, nec accumsan nulla rutrum. Aenean lorem est, luctus id iaculis ac, ultricies quis odio. Aenean imperdiet imperdiet ex et vehicula. Suspendisse vulputate turpis quis ultricies porttitor. Proin malesuada tortor at libero laoreet, eu eleifend enim pulvinar. Nulla facilisi. Fusce sit amet mauris mauris. Mauris consequat libero sed egestas tincidunt.
+  </p>
+
+  <p>
+    In felis augue, sagittis id dui ac, tempor luctus turpis. Vestibulum nec urna vitae nisl malesuada lacinia ut sit amet orci. Suspendisse sed mauris vitae mauris porttitor pulvinar. Donec quis ante id dui cursus malesuada ut nec magna. Vestibulum venenatis efficitur urna, quis tempus quam. Curabitur id elementum eros, at euismod nisl. Aliquam ultricies imperdiet arcu id consequat. Aliquam erat volutpat. Nam quis laoreet dui. Donec eget neque non leo porta scelerisque. In blandit placerat nibh, ut viverra nisi feugiat a. Pellentesque semper, ligula et tincidunt egestas, urna arcu pellentesque massa, vitae accumsan ligula velit vitae sem. Nulla porta est id ligula viverra, ut placerat quam auctor. Morbi eget efficitur nibh.
+  </p>
+
+  <p>
+    Aenean viverra commodo enim eget interdum. Donec condimentum tincidunt sollicitudin. Curabitur malesuada est elementum lectus sodales, vitae eleifend massa dignissim. Pellentesque nec diam dapibus purus vulputate pharetra at id nunc. Vivamus dapibus sed turpis in facilisis. Nulla sollicitudin lacus sem, vel fringilla neque accumsan non. Suspendisse non congue turpis, id mattis ex. Nam sit amet diam quis neque convallis aliquet quis et lorem. Donec sit amet libero sit amet nisl mollis vehicula nec id eros. Curabitur rutrum condimentum porta. Donec pellentesque consectetur lacus. Etiam maximus ante vitae varius eleifend. Integer ac justo sem. Morbi iaculis vel urna in tempus. Aenean at rhoncus nulla.
+  </p>
+</ion-content>

src/components/toast/test/toast.spec.ts

@@ -0,0 +1,22 @@
+import {Toast} from '../../../../ionic';
+
+export function run() {
+
+describe('Toast', () => {
+
+  describe('create', () => {
+
+    it('should create toast with close button', () => {
+      let toast = Toast.create({
+        message: 'Please Wait...',
+        showCloseButton: true
+      });
+
+      expect(toast.data.message).toEqual('Please Wait...');
+      expect(toast.data.showCloseButton).toEqual(true);
+    });
+
+  });
+});
+
+}

src/components/toast/toast.ios.scss

@@ -0,0 +1,52 @@
+@import "../../globals.ios";
+@import "./toast";
+
+// iOS Toast
+// --------------------------------------------------
+
+$toast-ios-text-align:                            left !default;
+$toast-ios-background:                            rgba(0, 0, 0, .9) !default;
+$toast-ios-border-radius:                         .65rem !default;
+
+$toast-ios-title-color:                           #fff !default;
+$toast-ios-title-font-size:                       1.4rem !default;
+$toast-ios-title-padding:                         1.5rem !default;
+
+
+ion-toast {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-overlay;
+  display: block;
+
+  width: $toast-width;
+  height: $toast-width;
+}
+
+.toast-wrapper {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+  z-index: $z-index-overlay-wrapper;
+  display: block;
+
+  margin: auto;
+
+  max-width: $toast-max-width;
+
+  border-radius: $toast-ios-border-radius;
+
+  background: $toast-ios-background;
+
+  transform: translate3d(0, 100%, 0);
+}
+
+.toast-message {
+  padding: $toast-ios-title-padding;
+
+  font-size: $toast-ios-title-font-size;
+
+  color: $toast-ios-title-color;
+}

src/components/toast/toast.md.scss

@@ -0,0 +1,51 @@
+@import "../../globals.md";
+@import "./toast";
+
+// Material Design Toast
+// --------------------------------------------------
+
+$toast-md-text-align:                            left !default;
+$toast-md-background:                            #333 !default;
+$toast-md-group-margin-bottom:                   8px !default;
+
+$toast-md-title-color:                           #fff !default;
+$toast-md-title-font-size:                       1.5rem !default;
+$toast-md-title-padding:                         19px 16px 17px !default;
+
+
+ion-toast {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-overlay;
+  display: block;
+
+  width: $toast-width;
+  height: $toast-width;
+}
+
+.toast-wrapper {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-overlay-wrapper;
+  display: block;
+
+  margin: auto;
+
+  width: $toast-width;
+  max-width: $toast-max-width;
+
+  background: $toast-md-background;
+
+  transform: translate3d(0, 100%, 0);
+}
+
+.toast-message {
+  padding: $toast-md-title-padding;
+
+  font-size: $toast-md-title-font-size;
+
+  color: $toast-md-title-color;
+}

src/components/toast/toast.scss

@@ -0,0 +1,52 @@
+@import "../../globals.core";
+
+
+// Toast
+// --------------------------------------------------
+
+$toast-width:                             100% !default;
+$toast-max-width:                         700px !default;
+
+
+ion-toast {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-overlay;
+
+  display: block;
+
+  width: $toast-width;
+  height: $toast-width;
+}
+
+.toast-container {
+  display: flex;
+
+  align-items: center;
+
+  button {
+    padding: 19px 16px 17px;
+
+    font-size: 1.5rem;
+  }
+}
+
+.toast-message {
+  flex: 1;
+}
+
+.toast-wrapper {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-overlay-wrapper;
+  display: block;
+
+  margin: auto;
+
+  max-width: $toast-max-width;
+
+  transform: translate3d(0, 100%, 0);
+}

src/components/toast/toast.ts

@@ -0,0 +1,317 @@
+import {Component, ElementRef, Renderer, Output, EventEmitter} from '@angular/core';
+
+import {ActionSheet, ActionSheetOptions} from '../action-sheet/action-sheet';
+import {Animation} from '../../animations/animation';
+import {Transition, TransitionOptions} from '../../transitions/transition';
+
+import {Config} from '../../config/config';
+import {isPresent} from '../../util/util';
+import {NavParams} from '../nav/nav-params';
+import {NavController} from '../nav/nav-controller';
+import {ViewController} from '../nav/view-controller';
+
+/**
+ * @name Toast
+ * @description
+ * A Toast is a subtle notification that appears at the bottom of the
+ * screen. It can be used to provide feedback about an operation or to
+ * display a system message. The toast appears on top of the app's content,
+ * and can be dismissed by the app to resume user interaction with
+ * the app. It includes a backdrop, which can optionally be clicked to
+ * dismiss the toast.
+ *
+ * ### Creating
+ * All of the toast options should be passed in the first argument of
+ * the create method: `Toast.create(opts)`. The message to display should be
+ * passed in the `message` property. The `showCloseButton` option can be set to
+ * true in order to display a close button on the toast. See the [create](#create)
+ * method below for all available options.
+ *
+ * ### Dismissing
+ * The toast can be dismissed automatically after a specific amount of time
+ * by passing the number of milliseconds to display it in the `duration` of
+ * the toast options. It can also be dismissed by clicking on the backdrop,
+ * unless `enableBackdropDismiss` is set to `false` upon creation. If `showCloseButton`
+ * is set to true, then the close button will dismiss the toast. To dismiss
+ * the toast after creation, call the `dismiss()` method on the Toast instance.
+ * The `onDismiss` function can be called to perform an action after the toast
+ * is dismissed.
+ *
+ * @usage
+ * ```ts
+ * constructor(nav: NavController) {
+ *   this.nav = nav;
+ * }
+ *
+ * presentToast() {
+ *   let toast = Toast.create({
+ *     message: 'User was added successfully',
+ *     duration: 3000
+ *   });
+ *
+ *   toast.onDismiss(() => {
+ *     console.log('Dismissed toast');
+ *   });
+ *
+ *   this.nav.present(toast);
+ * }
+ * ```
+ *
+ * @demo /docs/v2/demos/toast/
+ */
+export class Toast extends ViewController {
+
+  constructor(opts: ToastOptions = {}) {
+    opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
+    opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false;
+
+    super(ToastCmp, opts);
+    this.viewType = 'toast';
+    this.isOverlay = true;
+    this.usePortal = true;
+
+    // by default, toasts should not fire lifecycle events of other views
+    // for example, when an toast enters, the current active view should
+    // not fire its lifecycle events because it's not conceptually leaving
+    this.fireOtherLifecycles = false;
+  }
+
+
+
+  /**
+  * @private
+  */
+  getTransitionName(direction: string) {
+    let key = 'toast' + (direction === 'back' ? 'Leave' : 'Enter');
+    return this._nav && this._nav.config.get(key);
+  }
+
+  /**
+   * @param {string} message  Toast message content
+   */
+  setMessage(message: string) {
+    this.data.message = message;
+  }
+
+  /**
+   *
+   *  Toast options
+   *
+   *  | Property              | Type      | Default         | Description                                                                                                   |
+   *  |-----------------------|-----------|-----------------|---------------------------------------------------------------------------------------------------------------|
+   *  | message               | `string`  | -               | The message for the toast. Long strings will wrap and the toast container will expand.                        |
+   *  | duration              | `number`  | -               | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.  |
+   *  | cssClass              | `string`  | -               | Any additional class for custom styles.                                                                       |
+   *  | showCloseButton       | `boolean` | false           | Whether or not to show a button to close the toast.                                                           |
+   *  | closeButtonText       | `string`  | "Close"         | Text to display in the close button.                                                                          |
+   *  | enableBackdropDismiss | `boolean` | true            | Whether the toast should be dismissed by tapping the backdrop.                                                |
+   *  | dismissOnPageChange   | `boolean` | false           | Whether to dismiss the toast when navigating to a new page.                                                   |
+   *
+   * @param {object} opts Toast options. See the above table for available options.
+   */
+  static create(opts: ToastOptions = {}) {
+    return new Toast(opts);
+  }
+
+}
+
+
+/**
+* @private
+*/
+@Component({
+  selector: 'ion-toast',
+  template: `
+    <div (click)="bdClick()" tappable disable-activated class="backdrop" role="presentation"></div>
+    <div class="toast-wrapper">
+      <div class="toast-container">
+        <div class="toast-message" id="{{hdrId}}" *ngIf="d.message">{{d.message}}</div>
+        <button clear class="toast-button" *ngIf="d.showCloseButton" (click)="cbClick()">
+          {{ d.closeButtonText || 'Close' }}
+         </button>
+      </div>
+    </div>
+  `,
+  host: {
+    'role': 'dialog',
+    '[attr.aria-labelledby]': 'hdrId',
+    '[attr.aria-describedby]': 'descId',
+  },
+})
+class ToastCmp {
+  private d: any;
+  private descId: string;
+  private hdrId: string;
+  private created: number;
+  private id: number;
+  private dismissTimeout: number = undefined;
+
+  constructor(
+    private _nav: NavController,
+    private _viewCtrl: ViewController,
+    private _config: Config,
+    private _elementRef: ElementRef,
+    params: NavParams,
+    renderer: Renderer
+  ) {
+
+    this.d = params.data;
+    this.created = Date.now();
+
+    if (this.d.cssClass) {
+      renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
+    }
+
+    this.id = (++toastIds);
+    if (this.d.message) {
+      this.hdrId = 'toast-hdr-' + this.id;
+    }
+  }
+
+  onPageDidEnter() {
+    const { activeElement }: any = document;
+    if (activeElement) {
+      activeElement.blur();
+    }
+
+    let focusableEle = this._elementRef.nativeElement.querySelector('button');
+
+    if (focusableEle) {
+      focusableEle.focus();
+    }
+
+    // if there's a `duration` set, automatically dismiss.
+    if (this.d.duration) {
+      this.dismissTimeout =
+        setTimeout(() => {
+          this.dismiss('backdrop');
+        }, this.d.duration);
+    }
+  }
+
+  bdClick() {
+    if (this.isEnabled() && this.d.enableBackdropDismiss) {
+      this.dismiss('backdrop');
+    }
+  }
+
+  cbClick() {
+    if (this.isEnabled()) {
+      this.dismiss('close');
+    }
+  }
+
+  dismiss(role): Promise<any> {
+    clearTimeout(this.dismissTimeout);
+    this.dismissTimeout = undefined;
+    return this._viewCtrl.dismiss(null, role);
+  }
+
+  isEnabled() {
+    let tm = this._config.getNumber('overlayCreatedDiff', 750);
+    return (this.created + tm < Date.now());
+  }
+
+}
+
+export interface ToastOptions {
+  message?: string;
+  cssClass?: string;
+  duration?: number;
+  showCloseButton?: boolean;
+  closeButtonText?: string;
+  enableBackdropDismiss?: boolean;
+  dismissOnPageChange?: boolean;
+}
+
+class ToastSlideIn extends Transition {
+  constructor(enteringView, leavingView, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = enteringView.pageRef().nativeElement;
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    wrapper.fromTo('translateY', '120%', '0%');
+    this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(wrapper);
+  }
+}
+
+class ToastSlideOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = leavingView.pageRef().nativeElement;
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    wrapper.fromTo('translateY', '0%', '120%');
+    this.easing('cubic-bezier(.36,.66,.04,1)').duration(300).add(wrapper);
+  }
+}
+
+class ToastMdSlideIn extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = enteringView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    backdrop.fromTo('opacity', 0, 0);
+    wrapper.fromTo('translateY', '120%', '0%');
+    this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(backdrop).add(wrapper);
+  }
+}
+
+class ToastMdSlideOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = leavingView.pageRef().nativeElement;
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+
+    wrapper.fromTo('translateY', '0%', '120%');
+    backdrop.fromTo('opacity', 0, 0);
+    this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
+  }
+}
+
+class ToastWpPopIn extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = enteringView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
+    backdrop.fromTo('opacity', 0, 0);
+
+    this.easing('cubic-bezier(0,0 0.05,1)').duration(200).add(backdrop).add(wrapper);
+  }
+}
+
+class ToastWpPopOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = leavingView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
+    backdrop.fromTo('opacity', 0, 0);
+
+    this.easing('ease-out').duration(150).add(backdrop).add(wrapper);
+  }
+}
+
+
+Transition.register('toast-slide-in', ToastSlideIn);
+Transition.register('toast-slide-out', ToastSlideOut);
+Transition.register('toast-md-slide-in', ToastMdSlideIn);
+Transition.register('toast-md-slide-out', ToastMdSlideOut);
+Transition.register('toast-wp-slide-out', ToastWpPopOut);
+Transition.register('toast-wp-slide-in', ToastWpPopIn);
+
+let toastIds = -1;

src/components/toast/toast.wp.scss

@@ -0,0 +1,44 @@
+@import "../../globals.wp";
+@import "./toast";
+
+// Windows Phone Toast
+// --------------------------------------------------
+
+$toast-wp-text-align:                            left !default;
+$toast-wp-background:                            rgba(0, 0, 0, 1) !default;
+$toast-wp-border-radius:                         0 !default;
+$toast-wp-button-color:                          #fff !default;
+
+$toast-wp-title-color:                           #fff !default;
+$toast-wp-title-font-size:                       1.4rem !default;
+$toast-wp-title-padding:                         1.5rem !default;
+
+
+.toast-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-overlay-wrapper;
+  display: block;
+
+  margin: auto;
+
+  max-width: $toast-max-width;
+
+  border-radius: $toast-wp-border-radius;
+  background: $toast-wp-background;
+
+  transform: translate3d(0, 100%, 0);
+}
+
+.toast-message {
+  padding: $toast-wp-title-padding;
+
+  font-size: $toast-wp-title-font-size;
+
+  color: $toast-wp-title-color;
+}
+
+.toast-button {
+  color: $toast-wp-button-color;
+}