Merge branch '2.0' into ion-range

demos/infinite-scroll/main.html

@@ -10,7 +10,7 @@
     </ion-item>
   </ion-list>
 
-  <ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
+  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
     <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="Loading more data...">

demos/popover/index.ts

@@ -4,7 +4,7 @@ import {App, Page, Popover, NavController, Content, NavParams} from 'ionic-angul
 
 @Page({
   template: `
-    <ion-list radio-group [(ngModel)]="fontFamily" (change)="changeFontFamily()">
+    <ion-list radio-group [(ngModel)]="fontFamily" (ionChange)="changeFontFamily()">
       <ion-row>
         <ion-col>
           <button (click)="changeFontSize('smaller')" ion-item detail-none class="text-button text-smaller">A</button>

demos/radio/main.html

@@ -36,7 +36,7 @@
 
     <ion-item>
       <ion-label>Enable "Never"</ion-label>
-      <ion-toggle (change)="isDisabled = !isDisabled"></ion-toggle>
+      <ion-toggle (ionChange)="isDisabled = !isDisabled"></ion-toggle>
     </ion-item>
 
     <ion-item>

demos/refresher/main.html

@@ -4,7 +4,7 @@
 
 
 <ion-content>
-  <ion-refresher (refresh)="doRefresh($event)" (pulling)="doPulling($event)">
+  <ion-refresher (ionRefresh)="doRefresh($event)" (ionPull)="doPulling($event)">
     <ion-refresher-content
       pullingText="Pull to refresh..."
       refreshingText="Refreshing...">

demos/select/main.html

@@ -29,7 +29,7 @@
 
     <ion-item>
       <ion-label>Date</ion-label>
-      <ion-select (change)="monthChange($event)">
+      <ion-select (ionChange)="monthChange($event)">
         <ion-option value="01">January</ion-option>
         <ion-option value="02">February</ion-option>
         <ion-option value="03" checked="true">March</ion-option>
@@ -43,7 +43,7 @@
         <ion-option value="11">November</ion-option>
         <ion-option value="12">December</ion-option>
       </ion-select>
-      <ion-select (change)="yearChange($event)">
+      <ion-select (ionChange)="yearChange($event)">
         <ion-option>1989</ion-option>
         <ion-option>1990</ion-option>
         <ion-option>1991</ion-option>

src/components/checkbox/checkbox.ts

@@ -83,7 +83,7 @@ export class Checkbox {
   /**
    * @output {Checkbox} expression to evaluate when the checkbox value changes
    */
-  @Output() change: EventEmitter<Checkbox> = new EventEmitter();
+  @Output() ionChange: EventEmitter<Checkbox> = new EventEmitter();
 
   constructor(
     private _form: Form,
@@ -129,7 +129,7 @@ export class Checkbox {
     if (isChecked !== this._checked) {
       this._checked = isChecked;
       if (this._init) {
-        this.change.emit(this);
+        this.ionChange.emit(this);
       }
       this._item && this._item.setCssClass('item-checkbox-checked', isChecked);
     }

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

@@ -29,13 +29,13 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Kiwi, (change) Secondary color</ion-label>
-        <ion-checkbox secondary (change)="kiwiChange($event)"></ion-checkbox>
+        <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
+        <ion-checkbox secondary (ionChange)="kiwiChange($event)"></ion-checkbox>
       </ion-item>
 
       <ion-item>
-        <ion-label>Strawberry, (change) [checked]="true"</ion-label>
-        <ion-checkbox light (change)="strawberryChange($event)" [checked]="true"></ion-checkbox>
+        <ion-label>Strawberry, (ionChange) [checked]="true"</ion-label>
+        <ion-checkbox light (ionChange)="strawberryChange($event)" [checked]="true"></ion-checkbox>
       </ion-item>
 
       <ion-item>

src/components/datetime/datetime.ts

@@ -407,12 +407,12 @@ export class DateTime {
   /**
    * @output {any} Any expression to evaluate when the datetime selection has changed.
    */
-  @Output() change: EventEmitter<any> = new EventEmitter();
+  @Output() ionChange: EventEmitter<any> = new EventEmitter();
 
   /**
    * @output {any} Any expression to evaluate when the datetime selection was cancelled.
    */
-  @Output() cancel: EventEmitter<any> = new EventEmitter();
+  @Output() ionCancel: EventEmitter<any> = new EventEmitter();
 
   constructor(
     private _form: Form,
@@ -469,23 +469,23 @@ export class DateTime {
         text: this.cancelText,
         role: 'cancel',
         handler: () => {
-          this.cancel.emit(null);
+          this.ionCancel.emit(null);
         }
       },
       {
         text: this.doneText,
         handler: (data) => {
           console.log('datetime, done', data);
           this.onChange(data);
-          this.change.emit(data);
+          this.ionChange.emit(data);
         }
       }
     ];
 
     this.generate(picker);
     this.validate(picker);
 
-    picker.change.subscribe(() => {
+    picker.ionChange.subscribe(() => {
       this.validate(picker);
     });
 

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

@@ -26,6 +26,14 @@ class E2EPage {
     'l\u00f8r'
   ];
 
+  onChange(ev) {
+    console.log("Changed", ev);
+  }
+
+  onCancel(ev) {
+    console.log("Canceled", ev);
+  }
+
 }
 
 

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

@@ -44,7 +44,7 @@
 
   <ion-item>
     <ion-label>h:mm a</ion-label>
-    <ion-datetime displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
+    <ion-datetime (ionChange)="onChange($event)" (ionCancel)="onCancel($event)" displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
   </ion-item>
 
   <ion-item>

src/components/infinite-scroll/infinite-scroll.ts

@@ -22,7 +22,7 @@ import {Content} from '../content/content';
  *    <ion-item *ngFor="let i of items">{% raw %}{{i}}{% endraw %}</ion-item>
  *  </ion-list>
  *
- *  <ion-infinite-scroll (infinite)="doInfinite($event)">
+ *  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
  *    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  *  </ion-infinite-scroll>
  *
@@ -67,7 +67,7 @@ import {Content} from '../content/content';
  *  ```html
  *  <ion-content>
  *
- *    <ion-infinite-scroll (infinite)="doInfinite($event)">
+ *    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
  *      <ion-infinite-scroll-content
  *        loadingSpinner="bubbles"
  *        loadingText="Loading more data...">
@@ -137,7 +137,7 @@ export class InfiniteScroll {
    * you must call the infinite scroll's `complete()` method when
    * your async operation has completed.
    */
-  @Output() infinite: EventEmitter<InfiniteScroll> = new EventEmitter();
+  @Output() ionInfinite: EventEmitter<InfiniteScroll> = new EventEmitter();
 
   constructor(
     @Host() private _content: Content,
@@ -179,7 +179,7 @@ export class InfiniteScroll {
     if (distanceFromInfinite < 0) {
       this._zone.run(() => {
         this.state = STATE_LOADING;
-        this.infinite.emit(this);
+        this.ionInfinite.emit(this);
       });
       return 5;
     }

src/components/infinite-scroll/test/basic/main.html

@@ -16,7 +16,7 @@
     </button>
   </ion-list>
 
-  <ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
+  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
     <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="Loading more data...">

src/components/infinite-scroll/test/short-list/main.html

@@ -8,7 +8,7 @@
     </ion-item>
   </ion-list>
 
-  <ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
+  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
     <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="Loading more data...">

src/components/input/input.wp.scss

@@ -107,8 +107,8 @@ ion-input[clearInput] {
 .text-input-clear-icon {
   @include svg-background-image($text-input-wp-input-clear-icon-svg);
 
+  top: $item-wp-padding-top;
   right: ($item-wp-padding-right / 2);
-  bottom: 7px;
 
   width: $text-input-wp-input-clear-icon-width;
 

src/components/menu/menu.ts

@@ -283,17 +283,17 @@ export class Menu extends Ion {
   /**
    * @output {event} When the menu is being dragged open.
    */
-  @Output() opening: EventEmitter<number> = new EventEmitter();
+  @Output() ionDrag: EventEmitter<number> = new EventEmitter();
 
   /**
    * @output {event} When the menu has been opened.
    */
-  @Output() opened: EventEmitter<boolean> = new EventEmitter();
+  @Output() ionOpen: EventEmitter<boolean> = new EventEmitter();
 
   /**
    * @output {event} When the menu has been closed.
    */
-  @Output() closed: EventEmitter<boolean> = new EventEmitter();
+  @Output() ionClose: EventEmitter<boolean> = new EventEmitter();
 
   constructor(
     private _menuCtrl: MenuController,
@@ -444,7 +444,7 @@ export class Menu extends Ion {
     if (this._isEnabled && this._isSwipeEnabled) {
       this._prevent();
       this._getType().setProgessStep(stepValue);
-      this.opening.next(stepValue);
+      this.ionDrag.emit(stepValue);
     }
   }
 
@@ -490,12 +490,12 @@ export class Menu extends Ion {
 
       if (isOpen) {
         this._cntEle.addEventListener('click', this.onContentClick);
-        this.opened.emit(true);
+        this.ionOpen.emit(true);
 
       } else {
         this.getNativeElement().classList.remove('show-menu');
         this.getBackdropElement().classList.remove('show-backdrop');
-        this.closed.emit(true);
+        this.ionClose.emit(true);
       }
     }
   }

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

@@ -67,8 +67,16 @@ class E2EApp {
     });
   }
 
-  onMenuOpening(ev) {
-    console.log('onMenuOpening', ev);
+  onDrag(ev) {
+    console.log('Menu is being dragged', ev);
+  }
+
+  onOpen(ev) {
+    console.log('Menu is open', ev);
+  }
+
+  onClose(ev) {
+    console.log('Menu is closed', ev);
   }
 
   isChangeDetecting() {

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

@@ -1,4 +1,4 @@
-<ion-menu [content]="content" side="left" persistent="true">
+<ion-menu [content]="content" side="left" persistent="true" (ionDrag)="onDrag($event)" (ionOpen)="onOpen($event)"(ionClose)="onClose($event)">
 
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
@@ -140,4 +140,4 @@
 
 <ion-nav id="nav" [root]="rootPage" #content></ion-nav>
 
-<div [hidden]="isChangeDetecting()"></div>
+<div [hidden]="isChangeDetecting()"></div>

src/components/modal/modal.ios.scss

@@ -6,14 +6,7 @@
 $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;
-  }
+  background-color: $modal-ios-background-color;
 }

src/components/modal/modal.md.scss

@@ -6,6 +6,6 @@
 $modal-md-background-color:          $background-md-color !default;
 
 
-.modal ion-page {
+.modal-wrapper {
   background-color: $modal-md-background-color;
 }