revert(item): revert the change from margin to padding right

this should have been changed for margin, not padding

.github/ISSUE_TEMPLATE.md

@@ -1,12 +1,19 @@
+**Resources:**
+Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/)
+
+Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Pro services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Pro support portal (http://support.ionicjs.com)
+
 **Ionic version:**  (check one with "x")
-[ ] **1.x** (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
+(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
 [ ] **2.x**
 [ ] **3.x**
+[ ] **4.x**
 
 **I'm submitting a ...**  (check one with "x")
 [ ] bug report
 [ ] feature request
-[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
+
+Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
 
 **Current behavior:**
 <!-- Describe how the bug manifests. -->
@@ -15,17 +22,22 @@
 <!-- Describe what the behavior would be without the bug. -->
 
 **Steps to reproduce:**
-<!-- If you are able to illustrate the bug or feature request with an example, please provide steps to reproduce and if possible a demo using one of the following templates:
-
-For Ionic V1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview
-
-For Ionic issues - http://plnkr.co/edit/cpeRJs?p=preview
--->
+<!--  Please explain the steps required to duplicate the issue, especially if you are able to provide a sample application. -->
 
 **Related code:**
 
+<!-- If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means:
+
+A sample application via GitHub
+
+StackBlitz (https://stackblitz.com)
+
+Plunker (http://plnkr.co/edit/cpeRJs?p=preview)
+
+-->
+
 ```
-insert any relevant code here
+insert short code snippets here
 ```
 
 **Other information:**

.gitignore

@@ -9,6 +9,7 @@ log.txt
 *.sublime-workspace
 
 .idea/
+.sourcemaps/
 .vscode/
 .sass-cache/
 .versions/

CHANGELOG.md

@@ -1,3 +1,95 @@
+<a name="3.6.1"></a>
+## [3.6.1](https://github.com/ionic-team/ionic/compare/v3.6.0...v3.6.1) (2017-09-07)
+
+### Upgrade Instructions
+
+`ionic-angular@3.6.1` is a drop-in replacement for 3.6.0. To install it, please run:
+
+```
+npm install -g ionic@latest
+npm install @ionic/app-scripts@2.1.4 --save-dev
+npm install ionic-angular@3.6.1 --save
+```
+
+
+### Bug Fixes
+
+* **generators:** Update documentation URLs for templates ([475b722](https://github.com/ionic-team/ionic/commit/475b722))
+* **navigation:** check existence of done transition callback ([#12640](https://github.com/ionic-team/ionic/issues/12640)) ([0a6bb3b](https://github.com/ionic-team/ionic/commit/0a6bb3b))
+* **navigation:** ensure secondaryId always has a string value ([#12641](https://github.com/ionic-team/ionic/issues/12641)) ([1069505](https://github.com/ionic-team/ionic/commit/1069505))
+* **navigation:** fix popTo signature and make usage uniform ([3187375](https://github.com/ionic-team/ionic/commit/3187375))
+* **slider:** guard the processing of _slides ([b809665](https://github.com/ionic-team/ionic/commit/b809665)), closes [#12791](https://github.com/ionic-team/ionic/issues/12791)
+
+
+
+<a name="3.6.0"></a>
+# [3.6.0](https://github.com/ionic-team/ionic/compare/v3.5.3...v3.6.0) (2017-07-27)
+
+
+### Upgrade Instructions
+
+`ionic-angular` 3.6.0 requires developer's to update to the latest version of the `Ionic CLI` and `@ionic/app-scripts`.
+
+To upgrade, please run
+
+```
+npm install -g ionic@latest
+npm install @ionic/app-scripts@latest --save-dev
+npm install ionic-angular@latest --save
+```
+
+### Notes
+
+The URL when using deep linking is shortened and improved in this release. Due to a limitation in our nav system, if you're using `ion-tabs` and have a tab name that matches a segment, meaning you have a tab name of `schedule` and a segment of `schedule`, there could potentially be issues. To mitigate these issues, make sure you set the `tabUrlPath` property on the `ion-tab` and give it a unique name. This limitation will require an API change to fix so it will be resolved in `ionic-angular` 4.x.
+
+
+The upgrades include necessary changes to generators that add back lazy loading functionality, as well as an improved way of generating component/directives/and pipes.
+
+### New Generators
+
+The release adds back the functionality to generate lazy loaded pages.
+To generate a lazy loaded page, run:
+
+```bash
+ionic g page <Page-Name>
+```
+
+This will include a `.module.ts` file in the page directory created. If you do not want to generate a lazy loaded page, you can run:
+
+```bash
+ionic g page <Page-Name> --no-module
+```
+
+This will also generate lazy loaded tabs as well, accepting the `--no-module` flag as well to disable it.
+
+
+For pipes/components/components, we now generate a shared common module for each of these.
+
+So running:
+
+```bash
+ionic g component music-card
+```
+
+Will create a `components/components.module.ts` file that declares and exports the `music-card` component.
+We think that this will allow developers to get up and running with custom components much faster and will less overhead.
+
+### Bug Fixes
+
+* **list:** remove margin of MD buttons in ion-item-options ([#12263](https://github.com/ionic-team/ionic/issues/12263)) ([97f9522](https://github.com/ionic-team/ionic/commit/97f9522))
+* **nav:** make call to setPages return the promise so if it rejects it doesn't get lost ([de0f9d5](https://github.com/ionic-team/ionic/commit/de0f9d5))
+* **navigation:** account for race conditions in developer's code ([4596dbe](https://github.com/ionic-team/ionic/commit/4596dbe))
+* **navigation:** fix bug where that occurred when tab identifier and segment had the exact same string ([add0c4e](https://github.com/ionic-team/ionic/commit/add0c4e))
+* **navigation:** fix null pointer exceptions that would occur when destroying a nav controller while its transitioning ([584afd0](https://github.com/ionic-team/ionic/commit/584afd0))
+* **navigation:** reduce urls to minimum set of fields ([a8ceee4](https://github.com/ionic-team/ionic/commit/a8ceee4))
+
+
+### Features
+
+* **generators:** refactor generators ([400aa54](https://github.com/ionic-team/ionic/commit/400aa54))
+
+
+
 <a name="3.5.3"></a>
 ## [3.5.3](https://github.com/ionic-team/ionic/compare/v3.5.2...v3.5.3) (2017-07-14)
 

LICENSE

@@ -20,4 +20,4 @@ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

circle.yml

@@ -4,6 +4,9 @@ jobs:
     working_directory: ~/ionic/
     docker:
       - image: node:7
+    branches:
+      ignore:
+        - mono-refactor
     steps:
       - checkout
       - restore_cache:

demos/src/searchbar/pages/page-one/page-one.ts

@@ -16,7 +16,7 @@ export class PageOne {
 
   filterItems(ev: any) {
     this.setItems();
-    let val = ev.value;
+    let val = ev.target.value;
 
     if (val && val.trim() !== '') {
       this.items = this.items.filter(function(item) {

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "ionic2",
-  "version": "3.5.3",
+  "version": "3.6.1",
   "description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular",
   "keywords": [
     "ionic",
@@ -26,20 +26,20 @@
     "tsc": "tsc --outdir .tmp"
   },
   "dependencies": {
-    "@angular/common": "4.1.3",
-    "@angular/compiler": "4.1.3",
-    "@angular/compiler-cli": "4.1.3",
-    "@angular/core": "4.1.3",
-    "@angular/forms": "4.1.3",
-    "@angular/http": "4.1.3",
-    "@angular/platform-browser": "4.1.3",
-    "@angular/platform-browser-dynamic": "4.1.3",
+    "@angular/common": "4.4.3",
+    "@angular/compiler": "4.4.3",
+    "@angular/compiler-cli": "4.4.3",
+    "@angular/core": "4.4.3",
+    "@angular/forms": "4.4.3",
+    "@angular/http": "4.4.3",
+    "@angular/platform-browser": "4.4.3",
+    "@angular/platform-browser-dynamic": "4.4.3",
     "ionicons": "~3.0.0",
-    "rxjs": "5.4.0",
-    "zone.js": "0.8.12"
+    "rxjs": "5.4.3",
+    "zone.js": "0.8.17"
   },
   "devDependencies": {
-    "@ionic/app-scripts": "^1.3.11",
+    "@ionic/app-scripts": "2.1.4-201709271749",
     "@ionic/commit-hooks": "1.0.3",
     "@types/connect": "3.4.30",
     "@types/del": "2.2.31",
@@ -52,7 +52,7 @@
     "@types/lodash": "4.14.35",
     "@types/merge2": "0.3.29",
     "@types/mkdirp": "0.3.29",
-    "@types/node": "^6.0.34",
+    "@types/node": "^6.0.88",
     "@types/protractor": "^4.0.0",
     "@types/run-sequence": "0.0.28",
     "@types/semver": "5.3.30",
@@ -131,12 +131,11 @@
     "sw-toolbox": "3.4.0",
     "systemjs": "0.19.38",
     "through2": "2.0.1",
-    "ts-node": "1.3.0",
+    "ts-node": "3.3.0",
     "tslint": "^5.4.3",
     "tslint-ionic-rules": "0.0.11",
-    "typescript": "~2.3.3",
+    "typescript": "~2.3.2",
     "vinyl": "1.2.0",
-    "webpack": "^2.1.0-beta.27",
     "yargs": "5.0.0"
   },
   "config": {

scripts/demos/index.html

@@ -14,6 +14,7 @@
   <ion-app></ion-app>
 
   <script src="./build/polyfills.js"></script>
+  <script src="./build/vendor.js"></script>
   <script src="./build/main.js"></script>
 </body>
 </html>

scripts/e2e/index.html

@@ -53,6 +53,7 @@
     }
   </script>
   <script src="./build/polyfills.ng.js"></script>
+  <script src="./build/vendor.js"></script>
   <script src="./build/main.js"></script>
 </body>
 </html>

scripts/gulp/tasks/demos.prod.ts

@@ -59,9 +59,9 @@ function getDemosEntryPoints() {
 
 
 function buildDemos(filePaths: string[]) {
-  var batches = chunkArrayInGroups(filePaths, argv.batches || 1);
-  var batch = argv.batch || 0;
-  if(batch >= batches.length) {
+  const batches = chunkArrayInGroups(filePaths, argv.batches || 1);
+  const batch = argv.batch || 0;
+  if (batch >= batches.length) {
     throw new Error(`Batch number higher than total number of batches.`);
   }
 
@@ -100,13 +100,13 @@ function buildDemo(filePath: string) {
   const distDir = join(distTestRoot, 'www');
 
   return runAppScriptsBuild(
-    appEntryPoint, 
-    appNgModulePath, 
-    ionicAngularDir, 
-    distDir, 
-    pathToWriteFile, 
-    ionicAngularDir, 
-    sassConfigPath, 
+    appEntryPoint,
+    appNgModulePath,
+    ionicAngularDir,
+    distDir,
+    pathToWriteFile,
+    ionicAngularDir,
+    sassConfigPath,
     copyConfigPath
   ).then(() => {
     const end = Date.now();
@@ -116,8 +116,8 @@ function buildDemo(filePath: string) {
 }
 
 function chunkArrayInGroups(arr, size) {
-  var result = [];
-  for(var i = 0; i < arr.length; i++) {
+  const result = [];
+  for (let i = 0; i < arr.length; i++) {
     if (!Array.isArray(result[i % size])) {
       result[i % size] = [];
     }
@@ -129,7 +129,7 @@ function chunkArrayInGroups(arr, size) {
 function uploadToS3(path) {
   // fail silently if envars not present
   if (!process.env.AWS_KEY || !process.env.AWS_SECRET) {
-    return new Promise((resolve) => {resolve();});
+    return Promise.resolve();
   }
 
   let client = s3.createClient({
@@ -143,23 +143,23 @@ function uploadToS3(path) {
   let demo = path.split('/')[path.split('/').length - 2];
 
   let params = {
-    localDir: path.replace('tsconfig.json',''),
-    deleteRemoved: true, 
+    localDir: path.replace('tsconfig.json', ''),
+    deleteRemoved: true,
     s3Params: {
-      Bucket: "ionic-demos",
+      Bucket: 'ionic-demos',
       Prefix: demo,
     },
   };
 
-  var uploader = client.uploadDir(params);
+  const uploader = client.uploadDir(params);
 
-  return new Promise((resolve, reject) => {    
+  return new Promise((resolve, reject) => {
     uploader.on('error', function(err) {
-      console.error("s3 Upload Error:", err.stack);
+      console.error('s3 Upload Error:', err.stack);
       reject();
     });
     uploader.on('end', function() {
-      console.log(demo, " demo uploaded to s3");
+      console.log(demo, ' demo uploaded to s3');
       resolve();
     });
   });
@@ -167,7 +167,7 @@ function uploadToS3(path) {
 
 task('demos.download', (done: Function) => {
   if (!process.env.AWS_KEY || !process.env.AWS_SECRET) {
-    return new Promise((resolve) => {resolve();});
+    return Promise.resolve();
   }
 
   let client = s3.createClient({
@@ -180,23 +180,23 @@ task('demos.download', (done: Function) => {
   let params = {
     localDir: join(process.cwd(), 'dist', 'demos', 'src'),
     s3Params: {
-      Bucket: "ionic-demos",
+      Bucket: 'ionic-demos',
     },
   };
 
   let uploader = client.downloadDir(params);
 
-  return new Promise((resolve, reject) => {    
+  return new Promise((resolve, reject) => {
     uploader.on('error', function(err) {
-      console.error("s3 Download Error:", err.stack);
+      console.error('s3 Download Error:', err.stack);
       reject();
     });
     uploader.on('end', function() {
-      console.log("Demos downloaded from s3");
+      console.log('Demos downloaded from s3');
       resolve();
     });
   });
-})
+});
 
 task('demos.clean', (done: Function) => {
   // this is a super hack, but it works for now

scripts/gulp/tasks/demos.ts

@@ -22,34 +22,10 @@ task('demos.polyfill', (done: Function) => {
   });
 });
 
-task('demos.copyAndCompile', (done: (err: any) => void) => {
-  runSequence(
-    'demos.copySource',
-    'demos.compileTests',
-    'demos.bundle',
-    done);
-});
-
-task('demos.copyExternalDependencies', () => {
-  src([`${SCRIPTS_ROOT}/${DEMOS_NAME}/*.css`]).pipe(dest(`${DIST_DEMOS_ROOT}/css`));
-});
-
 task('demos.sass', () => {
   // ensure there is a version.scss file
   setSassIonicVersion(`E2E-${createTimestamp()}`);
   return compileSass(`${DIST_DEMOS_ROOT}/css`);
 });
 
-task('demos.fonts', () => {
-  return copyFonts(`${DIST_DEMOS_ROOT}/fonts`);
-});
 
-task('demos.serve', function() {
-  connect.server({
-    root: './',
-    port: LOCAL_SERVER_PORT,
-    livereload: {
-      port: 35700
-    }
-  });
-});

scripts/gulp/tasks/polyfill.ts

@@ -1,5 +1,5 @@
-import { task, src, dest } from 'gulp';
-import { writePolyfills } from '../util';
+import { dest, src, task } from 'gulp';
+import { readFileAsync, writeFileAsync, writePolyfills } from '../util';
 import { join } from 'path';
 
 task('polyfill', ['polyfill.copy-readme', 'polyfill.write']);
@@ -13,6 +13,9 @@ task('polyfill.write', (done: Function) => {
 });
 
 task('polyfill.copy-readme', (done: Function) => {
-  return src(join('scripts', 'polyfill', 'readme.md'))
-    .pipe(dest(join('dist', 'ionic-angular', 'polyfills')), done);
+  return readFileAsync(join('scripts', 'polyfill', 'readme.md')).then((fileContent: string) => {
+    return writeFileAsync(join('dist', 'ionic-angular', 'polyfills', 'readme.md'), fileContent);
+  }).then(() => {
+    done();
+  });
 });

scripts/gulp/util.ts

@@ -325,7 +325,7 @@ export function writePolyfills(outputDirectory: string) {
   promises.push(bundlePolyfill(NG_ENTRIES, join(outputDirectory, 'polyfills.ng.js')));
 
   return Promise.all(promises);
-};
+}
 
 function bundlePolyfill(pathsToIncludeInPolyfill: string[], outputPath: string) {
   return rollup({

scripts/templates/component/ts.tmpl

@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
 /**
  * Generated class for the $CLASSNAME component.
  *
- * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
- * for more info on Angular Components.
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
  */
 @Component({
   selector: '$FILENAME',

scripts/templates/directive/ts.tmpl

@@ -3,8 +3,8 @@ import { Directive } from '@angular/core';
 /**
  * Generated class for the $CLASSNAME directive.
  *
- * See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html
- * for more info on Angular Directives.
+ * See https://angular.io/api/core/Directive for more info on Angular
+ * Directives.
  */
 @Directive({
   selector: '[$FILENAME]' // Attribute selector

scripts/templates/page/ts.tmpl

@@ -4,8 +4,8 @@ $IMPORTSTATEMENT
 /**
  * Generated class for the $CLASSNAME page.
  *
- * See http://ionicframework.com/docs/components/#navigation for more info
- * on Ionic pages and navigation.
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
  */
 $IONICPAGE
 @Component({

scripts/templates/pipe/ts.tmpl

@@ -3,8 +3,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 /**
  * Generated class for the $CLASSNAME pipe.
  *
- * See https://angular.io/docs/ts/latest/guide/pipes.html for more info on
- * Angular Pipes.
+ * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
  */
 @Pipe({
   name: '$PIPENAME',

scripts/templates/provider/ts.tmpl

@@ -5,8 +5,8 @@ import 'rxjs/add/operator/map';
 /*
   Generated class for the $CLASSNAME provider.
 
-  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
-  for more info on providers and Angular DI.
+  See https://angular.io/guide/dependency-injection for more info on providers
+  and Angular DI.
 */
 @Injectable()
 export class $CLASSNAME {

scripts/templates/tabs/ts.tmpl

@@ -4,8 +4,8 @@ $TABS_IMPORTSTATEMENT
 /**
  * Generated class for the $CLASSNAME tabs.
  *
- * See https://angular.io/docs/ts/latest/guide/dependency-injection.html for
- * more info on providers and Angular DI.
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
  */
 $IONICPAGE
 @Component({

src/components/action-sheet/action-sheet-controller.ts

@@ -39,10 +39,10 @@ import { Config } from '../../config/config';
  *
  * export class MyClass{
  *
- *  constructor(public actionSheetCtrl: ActionSheetController) {}
+ *  constructor(public actionSheetCtrl: ActionSheetController) { }
  *
  *  presentActionSheet() {
- *    let actionSheet = this.actionSheetCtrl.create({
+ *    const actionSheet = this.actionSheetCtrl.create({
  *      title: 'Modify your album',
  *      buttons: [
  *        {
@@ -115,7 +115,7 @@ import { Config } from '../../config/config';
  * out first, *then* start the next transition.
  *
  * ```ts
- * let actionSheet = this.actionSheetCtrl.create({
+ * const actionSheet = this.actionSheetCtrl.create({
  *   title: 'Hello',
  *   buttons: [{
  *     text: 'Ok',

src/components/action-sheet/action-sheet.ios.scss

@@ -89,6 +89,10 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
   @include text-align($action-sheet-ios-text-align);
 }
 
+.action-sheet-ios .action-sheet-wrapper {
+  @include margin(auto, auto, constant(safe-area-inset-bottom), auto);
+}
+
 .action-sheet-ios .action-sheet-container {
   @include deprecated-variable(padding, $action-sheet-ios-padding) {
     @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);

src/components/alert/alert-controller.ts

@@ -51,12 +51,10 @@ import { Config } from '../../config/config';
  * ```ts
  * import { AlertController } from 'ionic-angular';
  *
- * constructor(private alertCtrl: AlertController) {
- *
- * }
+ * constructor(public alertCtrl: AlertController) { }
  *
  * presentAlert() {
- *   let alert = this.alertCtrl.create({
+ *   const alert = this.alertCtrl.create({
  *     title: 'Low battery',
  *     subTitle: '10% of battery remaining',
  *     buttons: ['Dismiss']
@@ -65,7 +63,7 @@ import { Config } from '../../config/config';
  * }
  *
  * presentConfirm() {
- *   let alert = this.alertCtrl.create({
+ *   const alert = this.alertCtrl.create({
  *     title: 'Confirm purchase',
  *     message: 'Do you want to buy this book?',
  *     buttons: [
@@ -88,7 +86,7 @@ import { Config } from '../../config/config';
  * }
  *
  * presentPrompt() {
- *   let alert = this.alertCtrl.create({
+ *   const alert = this.alertCtrl.create({
  *     title: 'Login',
  *     inputs: [
  *       {
@@ -181,14 +179,14 @@ import { Config } from '../../config/config';
  * out first, *then* start the next transition.
  *
  * ```ts
- * let alert = this.alertCtrl.create({
+ * const alert = this.alertCtrl.create({
  *   title: 'Hello',
  *   buttons: [{
  *     text: 'Ok',
  *     handler: () => {
  *       // user has clicked the alert button
  *       // begin the alert's dismiss transition
- *       let navTransition = alert.dismiss();
+ *       const navTransition = alert.dismiss();
  *
  *       // start some async method
  *       someAsyncOperation().then(() => {

src/components/checkbox/checkbox.ts

@@ -126,6 +126,7 @@ export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDes
     ev.preventDefault();
     ev.stopPropagation();
     this.value = !this.value;
+    this._fireTouched();
   }
 
   /**
@@ -141,5 +142,4 @@ export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDes
   _inputUpdated() {
     this._item && this._item.setElementClass('item-checkbox-checked', this._value);
   }
-
 }

src/components/content/content.scss

@@ -91,40 +91,66 @@ ion-app [no-padding] .scroll-content {
 }
 
 @mixin content-padding($mode, $content-padding) {
-  ion-app.#{$mode} [padding],
-  ion-app.#{$mode} [padding] .scroll-content {
+  ion-app.#{$mode} [padding] {
     @include padding($content-padding);
   }
 
-  ion-app.#{$mode} [padding-top],
-  ion-app.#{$mode} [padding-top] .scroll-content {
+  ion-app.#{$mode} [padding-top] {
     @include padding($content-padding, null, null, null);
   }
 
-  ion-app.#{$mode} [padding-left],
-  ion-app.#{$mode} [padding-left] .scroll-content {
+  ion-app.#{$mode} [padding-left] {
     @include padding-horizontal($content-padding, null);
   }
 
-  ion-app.#{$mode} [padding-right],
-  ion-app.#{$mode} [padding-right] .scroll-content {
+  ion-app.#{$mode} [padding-right] {
     @include padding-horizontal(null, $content-padding);
   }
 
-  ion-app.#{$mode} [padding-bottom],
-  ion-app.#{$mode} [padding-bottom] .scroll-content {
+  ion-app.#{$mode} [padding-bottom] {
     @include padding(null, null, $content-padding, null);
   }
 
-  ion-app.#{$mode} [padding-vertical],
-  ion-app.#{$mode} [padding-vertical] .scroll-content {
+  ion-app.#{$mode} [padding-vertical] {
     @include padding($content-padding, null, $content-padding, null);
   }
 
-  ion-app.#{$mode} [padding-horizontal],
-  ion-app.#{$mode} [padding-horizontal] .scroll-content {
+  ion-app.#{$mode} [padding-horizontal] {
     @include padding-horizontal($content-padding);
   }
+
+  // Scroll content should use safe-area-padding
+  ion-app.#{$mode} [padding] .scroll-content {
+    @include safe-area-padding($content-padding);
+  }
+
+  ion-app.#{$mode} .scroll-content {
+    @include safe-area-no-padding($content-padding);
+  }
+
+  ion-app.#{$mode} [padding-top] .scroll-content {
+    @include safe-area-padding($content-padding, null, null, null);
+  }
+
+  ion-app.#{$mode} [padding-left] .scroll-content {
+    @include safe-area-padding-horizontal($content-padding, null);
+  }
+
+  ion-app.#{$mode} [padding-right] .scroll-content {
+    @include safe-area-padding-horizontal(null, $content-padding);
+  }
+
+  ion-app.#{$mode} [padding-bottom] .scroll-content {
+    @include safe-area-padding(null, null, $content-padding, null);
+  }
+
+  ion-app.#{$mode} [padding-vertical] .scroll-content {
+    @include safe-area-padding($content-padding, null, $content-padding, null);
+  }
+
+  ion-app.#{$mode} [padding-horizontal] .scroll-content {
+    @include safe-area-padding-horizontal($content-padding);
+  }
 }
 
 

src/components/content/content.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, Optional, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, NgZone, OnDestroy, Optional, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
 
 import { App } from '../app/app';
 import { Config } from '../../config/config';
@@ -31,7 +31,7 @@ export class EventEmitterProxy<T> extends EventEmitter<T> {
  * The Content component provides an easy to use content area with
  * some useful methods to control the scrollable area. There should
  * only be one content in a single view component. If additional scrollable
- * elements are need, use [ionScroll](../../scroll/Scroll).
+ * elements are needed, use [ionScroll](../../scroll/Scroll).
  *
  *
  * The content area can also implement pull-to-refresh with the
@@ -670,6 +670,7 @@ export class Content extends Ion implements OnDestroy, AfterViewInit, IContent {
    * Tell the content to recalculate its dimensions. This should be called
    * after dynamically adding/removing headers, footers, or tabs.
    */
+  @HostListener('window:resize')
   resize() {
     this._dom.read(this._readDimensions.bind(this));
     this._dom.write(this._writeDimensions.bind(this));

src/components/datetime/datetime.ts

@@ -135,6 +135,8 @@ import {
  * to serialize and pass within JSON objects, and sending databases a standardized
  * format which it can be easily parsed if need be.
  *
+ * To create an ISO datetime string for the current date and time, e.g. use `const currentDate = (new Date()).toISOString();`.
+ *
  * An ISO format can be used as a simple year, or just the hour and minute, or get more
  * detailed down to the millisecond and timezone. Any of the ISO formats below can be used,
  * and after a user selects a new value, Ionic will continue to use the same ISO format
@@ -167,7 +169,7 @@ import {
  * ## Min and Max Datetimes
  *
  * Dates are infinite in either direction, so for a user's selection there should be at
- * least some form of restricting the dates that can be selected. Be default, the maximum
+ * least some form of restricting the dates that can be selected. By default, the maximum
  * date is to the end of the current year, and the minimum date is from the beginning
  * of the year that was 100 years ago.
  *

src/components/datetime/test/datetime.spec.ts

@@ -736,7 +736,7 @@ describe('DateTime', () => {
 
 function zoned(fn: () => any): (done: DoneFn) => void {
   return () => {
-    const zone = new NgZone(false);
+    const zone = new NgZone({enableLongStackTrace: false});
     zone.run(fn);
   };
 }

src/components/input/input.ts

@@ -211,12 +211,12 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
   @ViewChild('textInput', { read: ElementRef }) _native: ElementRef;
 
   /**
-   * @input {string} Instructional text that shows before the input has a value.
+   * @input {string} Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
    */
   @Input() autocomplete: string = '';
 
   /**
-   * @input {string} Instructional text that shows before the input has a value.
+   * @input {string} Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
    */
   @Input() autocorrect: string = '';
 

src/components/loading/loading-controller.ts

@@ -47,12 +47,12 @@ import { LoadingOptions } from './loading-options';
  *
  * @usage
  * ```ts
- * constructor(public loadingCtrl: LoadingController) {
+ * import { LoadingController } from 'ionic-angular';
  *
- * }
+ * constructor(public loadingCtrl: LoadingController) { }
  *
  * presentLoadingDefault() {
- *   let loading = this.loadingCtrl.create({
+ *   const loading = this.loadingCtrl.create({
  *     content: 'Please wait...'
  *   });
  *
@@ -64,7 +64,7 @@ import { LoadingOptions } from './loading-options';
  * }
  *
  * presentLoadingCustom() {
- *   let loading = this.loadingCtrl.create({
+ *   const loading = this.loadingCtrl.create({
  *     spinner: 'hide',
  *     content: `
  *       <div class="custom-spinner-container">
@@ -81,7 +81,7 @@ import { LoadingOptions } from './loading-options';
  * }
  *
  * presentLoadingText() {
- *   let loading = this.loadingCtrl.create({
+ *   const loading = this.loadingCtrl.create({
  *     spinner: 'hide',
  *     content: 'Loading Please Wait...'
  *   });

src/components/menu/menu-toggle.ts

@@ -9,7 +9,7 @@ import { ViewController } from '../../navigation/view-controller';
  * @name MenuToggle
  * @description
  * The `menuToggle` directive can be placed on any button to toggle a menu open or closed.
- * If it is added to the [NavBar](../../navbar/NavBar) of a page, the button will only appear
+ * If it is added to the [NavBar](../../toolbar/Navbar) of a page, the button will only appear
  * when the page it's in is currently a root page. See the [Menu Navigation Bar Behavior](../Menu#navigation-bar-behavior)
  * docs for more information.
  *

src/components/modal/modal-controller.ts

@@ -19,7 +19,7 @@ import { DeepLinker } from '../../navigation/deep-linker';
  *
  * 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
+ * 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. Modals are not reusable. When a modal is dismissed
@@ -38,12 +38,10 @@ import { DeepLinker } from '../../navigation/deep-linker';
  * @Component(...)
  * class HomePage {
  *
- *  constructor(public modalCtrl: ModalController) {
- *
- *  }
+ *  constructor(public modalCtrl: ModalController) { }
  *
  *  presentProfileModal() {
- *    let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
+ *    const profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
  *    profileModal.present();
  *  }
  *
@@ -112,6 +110,25 @@ import { DeepLinker } from '../../navigation/deep-linker';
  *
  * }
  * ```
+ *
+ * A common issue is that a developer may try to implement navigation in a modal, but when you try NavController.push(),
+ * you will notice that the status bar on iOS gets cut off. The proper way to implement navigation in a modal is to
+ * make the modal component a navigation container, and set the root page to the page you want to show in your modal.
+ *
+ * ```ts
+ * @Component({
+ *   template: '<ion-nav [root]="rootPage" [rootParams]="rootParams"></ion-nav>'
+ * })
+ * export class MyModalWrapper {
+ *   rootPage = 'MyModalContentPage'; // This is the page you want your modal to display
+ *   rootParams;
+ *
+ *   constructor(navParams: NavParams, private viewCtrl: ViewController) {
+ *       this.rootParams = Object.assign({}, navParams.data, {viewCtrl: viewCtrl});
+ *       // This line will send the view controller into your child views, so you can dismiss the modals from there.
+ *   }
+ * }
+ * ```
  * @demo /docs/demos/src/modal/
  * @see {@link /docs/components#modals Modal Component Docs}
  */

src/components/nav/nav-push.ts

@@ -32,8 +32,8 @@ import { Page } from '../../navigation/nav-util';
  *   template: `<button ion-button [navPush]="pushPage" [navParams]="params">Go</button>`
  * })
  * class MyPage {
- *   params: Object;
  *   pushPage: any;
+ *   params: Object;
  *   constructor(){
  *     this.pushPage = LoginPage;
  *     this.params = { id: 42 };

src/components/picker/picker.scss

@@ -51,6 +51,7 @@ ion-picker-cmp {
 }
 
 .picker-columns {
+  @include margin(null, null, constant(safe-area-inset-bottom), null);
   position: relative;
   display: flex;
 

src/components/radio/test/basic/pages/page-one/page-one.ts

@@ -42,15 +42,18 @@ export class PageOne {
   }
 
   setApple() {
-    this.fruitsCtrl.updateValueAndValidity('apple');
+    this.fruitsCtrl.setValue('apple');
+    this.fruitsCtrl.updateValueAndValidity();
   }
 
   setBanana() {
-    this.fruitsCtrl.updateValueAndValidity('banana');
+    this.fruitsCtrl.setValue('banana');
+    this.fruitsCtrl.updateValueAndValidity();
   }
 
   setCherry() {
-    this.fruitsCtrl.updateValueAndValidity('cherry');
+    this.fruitsCtrl.setValue('cherry');
+    this.fruitsCtrl.updateValueAndValidity();
   }
 
   doSubmit(ev: UIEvent) {

src/components/segment/segment.ts

@@ -90,7 +90,10 @@ export class Segment extends BaseInput<string> implements AfterContentInit {
   ngAfterContentInit() {
     this._initialize();
     this._buttons.forEach(button => {
-      button.ionSelect.subscribe((selectedButton: any) => this.value = selectedButton.value);
+      button.ionSelect.subscribe((selectedButton: any) => {
+        this.value = selectedButton.value;
+        this._fireTouched();
+      });
     });
   }
 
@@ -109,6 +112,4 @@ export class Segment extends BaseInput<string> implements AfterContentInit {
       button.isActive = (button.value === value);
     }
   }
-
-
 }

src/components/slides/slides.ts

@@ -106,6 +106,34 @@ import { ViewController } from '../../navigation/view-controller';
  * }
  * ```
  *
+ * ### Zooming
+ * If your slides contain images, you can enable zooming on them by setting `zoom="true" and
+ * wrapping each image in a `div` with the class `swiper-zoom-container`. Zoom supports
+ * `img`, `svg`, `canvas`, and `ion-img`.
+ *
+ * ```html
+ * <ion-slidesj zoom="true">
+ *   <ion-slide>
+ *     <div class="swiper-zoom-container">
+ *       <img src="assets/img/dog.jpg">
+ *     </div>
+ *     <ion-label>Woof</ion-label>
+ *   </ion-slide>
+ *   <ion-slide>
+ *     <div class="swiper-zoom-container">
+ *       <img src="assets/img/cat.jpg">
+ *     </div>
+ *     <ion-label>Meow</ion-label>
+ *   </ion-slide>
+ *   <ion-slide>
+ *     <div class="swiper-zoom-container">
+ *       <img src="assets/img/fish.jpg">
+ *     </div>
+ *     <ion-label>Just keep swimming</ion-label>
+ *   </ion-slide>
+ * </ion-slides>
+ * ```
+ *
  * @advanced
  *
  * There are several options available to create customized slides. Ionic exposes

src/components/slides/swiper/swiper-zoom.ts

@@ -462,7 +462,7 @@ export function resetZoomEvents(s: Slides, plt: Platform) {
 
   // Scale image
   if (s._supportGestures) {
-    for (var i = 0; i < slides.length; i++) {
+    for (let i = 0; i < slides.length; i++) {
       slide = slides[i];
       // gesturestart
       plt.registerListener(slide, 'gesturestart', (ev: TouchEvent) => {

src/components/slides/swiper/swiper.ts

@@ -693,8 +693,10 @@ function destroyLoop(s: Slides) {
   eachChild(s._wrapper, '.' + CLS.slide + '.' + CLS.slideDuplicate, ele => {
     ele.parentElement.removeChild(ele);
   });
-  for (var i = 0; i < s._slides.length; i++) {
-    s._slides[i].removeAttribute('data-swiper-slide-index');
+  if (s._slides) {
+    for (var i = 0; i < s._slides.length; i++) {
+      s._slides[i].removeAttribute('data-swiper-slide-index');
+    }
   }
 }
 

src/components/tabs/tab.ts

@@ -8,7 +8,7 @@ import { GestureController } from '../../gestures/gesture-controller';
 import { isTrueProperty } from '../../util/util';
 import { Tab as ITab } from '../../navigation/nav-interfaces';
 import { NavControllerBase } from '../../navigation/nav-controller-base';
-import { NavOptions } from '../../navigation/nav-util';
+import { NavOptions, TransitionDoneFn } from '../../navigation/nav-util';
 import { Platform } from '../../platform/platform';
 import { TabButton } from './tab-button';
 import { Tabs } from './tabs';
@@ -98,7 +98,7 @@ import { ViewController } from '../../navigation/view-controller';
  * ```html
  * <ion-tabs>
  *   <ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
- * </ion-tabs>
+ * </ion-tabs>pop
  * ```
  *
  * ```ts
@@ -304,7 +304,7 @@ export class Tab extends NavControllerBase implements ITab {
   /**
    * @hidden
    */
-  load(opts: NavOptions, done?: () => void) {
+  load(opts: NavOptions, done?: TransitionDoneFn) {
     if (this._lazyRootFromUrl || (!this._loaded && this.root)) {
       this.setElementClass('show-tab', true);
       // okay, first thing we need to do if check if the view already exists
@@ -317,7 +317,10 @@ export class Tab extends NavControllerBase implements ITab {
           if (i === numViews) {
             // this is the last view in the stack and it's the same
             // as the segment so there's no change needed
-            return done();
+            if (done) {
+              done(false, false);
+            }
+            return;
           } else {
             // it's not the exact view as the end
             // let's have this nav go back to this exact view
@@ -343,7 +346,10 @@ export class Tab extends NavControllerBase implements ITab {
       this._dom.read(() => {
         this.resize();
       });
-      return done();
+      if (done) {
+        done(false, false);
+      }
+      return;
     }
   }
 

src/components/tabs/tabs.ios.scss

@@ -42,6 +42,9 @@ $tabs-ios-tab-icon-color-active:    $tabs-ios-tab-color-active !default;
 /// @prop - Font size of the tab button text
 $tabs-ios-tab-font-size:            10px !default;
 
+/// @prop - Font weight of the tab button text
+$tabs-ios-tab-font-weight:          500 !default;
+
 /// @prop - Size of the tab button icon
 $tabs-ios-tab-icon-size:            30px !default;
 
@@ -63,6 +66,7 @@ $tabs-ios-tab-icon-size:            30px !default;
   min-height: $tabs-ios-tab-min-height;
 
   font-size: $tabs-ios-tab-font-size;
+  font-weight: $tabs-ios-tab-font-weight;
   color: $tabs-ios-tab-text-color;
 
   @include deprecated-variable(padding, $tabs-ios-tab-padding) {

src/components/tabs/tabs.ts

@@ -642,7 +642,7 @@ export class Tabs extends Ion implements AfterViewInit, RootNode, ITabs, Navigat
   /**
    * @private
    */
-  _getSelectedTabIndex(secondaryId: string, fallbackIndex: number = 0): number {
+  _getSelectedTabIndex(secondaryId: string = '', fallbackIndex: number = 0): number {
     // we found a segment which probably represents which tab to select
     const indexMatch = secondaryId.match(/tab-(\d+)/);
     if (indexMatch) {

src/components/toast/toast-controller.ts

@@ -39,12 +39,10 @@ import { ToastOptions } from './toast-options';
  * ```ts
  * import { ToastController } from 'ionic-angular';
  *
- * constructor(private toastCtrl: ToastController) {
- *
- * }
+ * constructor(public toastCtrl: ToastController) { }
  *
  * presentToast() {
- *   let toast = this.toastCtrl.create({
+ *   const toast = this.toastCtrl.create({
  *     message: 'User was added successfully',
  *     duration: 3000,
  *     position: 'top'

src/components/toast/toast.ios.scss

@@ -48,6 +48,7 @@ $toast-ios-title-padding-start:                   $toast-ios-title-padding-end !
 
 .toast-ios .toast-wrapper.toast-top {
   @include transform(translate3d(0, -100%, 0));
+  @include margin(constant(safe-area-inset-top), auto, auto, auto);
 
   top: 0;
 }
@@ -55,6 +56,7 @@ $toast-ios-title-padding-start:                   $toast-ios-title-padding-end !
 .toast-ios .toast-wrapper.toast-bottom {
   @include transform(translate3d(0, 100%, 0));
 
+  @include margin(auto, auto, constant(safe-area-inset-bottom), auto);
   bottom: 0;
 }
 

src/components/toolbar/toolbar-header.ts

@@ -9,7 +9,7 @@ import { ViewController } from '../../navigation/view-controller';
  * @name Header
  * @description
  * Header is a parent component that holds the navbar and toolbar component.
- * It's important to note that `ion-header` needs to be the one of the three root elements of a page
+ * It's important to note that `ion-header` needs to be one of the three root elements of a page
  *
  * @usage
  *

src/components/virtual-scroll/virtual-scroll.ts

@@ -88,7 +88,7 @@ import { VirtualHeader } from './virtual-header';
  * ### Approximate Widths and Heights
  *
  * If the height of items in the virtual scroll are not close to the
- * default size of 40px, it is extremely important to provide an value for
+ * default size of 40px, it is extremely important to provide a value for
  * approxItemHeight height. An exact pixel-perfect size is not necessary,
  * but without an estimate the virtual scroll will not render correctly.
  *

src/config/config.ts

@@ -118,6 +118,7 @@ import { isArray, isDefined, isFunction, isObject } from '../util/util';
  * | `popoverEnter`           | `string`            | The name of the transition to use while a popover is presented.                                                                                  |
  * | `popoverLeave`           | `string`            | The name of the transition to use while a popover is dismissed.                                                                                  |
  * | `spinner`                | `string`            | The default spinner to use when a name is not defined.                                                                                           |
+ * | `statusbarPadding`       | `boolean`           | Whether to hide extra padding for statusbar.                                                                                                     |
  * | `swipeBackEnabled`       | `boolean`           | Whether native iOS swipe to go back functionality is enabled.                                                                                    |
  * | `tabsHighlight`          | `boolean`           | Whether to show a highlight line under the tab when it is selected.                                                                              |
  * | `tabsLayout`             | `string`            | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`.   |

src/gestures/simulator.ts

@@ -69,7 +69,7 @@ export class Simulate {
   velocity(vel: number): Simulate {
     let p1 = this.getLastPoint();
     let p2 = this.getPreviousPoint();
-    let d = distance(p1, p2);
+    let d = distance(p1.coord, p2.coord);
     return this.duration(d / vel);
   }
 

src/gestures/test/recognizers.spec.ts

@@ -7,7 +7,7 @@ describe('recognizers', () => {
     let p = new PanRecognizer('x', 2, 2);
     expect(p.pan()).toEqual(0);
 
-    Simulate.from(0, 0).to(99, 0).run((coord: Coordinates) => {
+    Simulate.from(0, 0).to(99, 0).run((coord: any) => {
       expect(p.detect(coord)).toEqual(false);
     });
   });
@@ -18,7 +18,7 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     expect(p.pan()).toEqual(0);
 
-    Simulate.from(0, 0).to(10, 0).run((coord: Coordinates) => {
+    Simulate.from(0, 0).to(10, 0).run((coord: any) => {
       p.detect(coord);
     });
     expect(p.pan()).toEqual(1);
@@ -26,7 +26,7 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     expect(p.pan()).toEqual(0);
 
-    Simulate.from(0, 0).to(-10, 0).run((coord: Coordinates) => {
+    Simulate.from(0, 0).to(-10, 0).run((coord: any) => {
       p.detect(coord);
     });
     expect(p.pan()).toEqual(-1);
@@ -40,11 +40,11 @@ describe('recognizers', () => {
     Simulate
       .from(0, 0).to(99, 0)
       // Since threshold is 100, it should not fire yet
-      .run((coord: Coordinates) => expect(p.detect(coord)).toEqual(false))
+      .run((coord: any) => expect(p.detect(coord)).toEqual(false))
 
       // Now it should fire
       .delta(2, 0)
-      .run((coord: Coordinates) => {
+      .run((coord: any) => {
         if (p.detect(coord)) {
           // it should detect a horizontal pan
           expect(p.pan()).toEqual(1);
@@ -56,7 +56,7 @@ describe('recognizers', () => {
       .delta(20, 0)
       .to(0, 0)
       .to(102, 0)
-      .run((coord: Coordinates) => expect(p.detect(coord)).toEqual(false));
+      .run((coord: any) => expect(p.detect(coord)).toEqual(false));
 
     expect(detected).toEqual(true);
   });
@@ -66,13 +66,13 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(19, 21).delta(-30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(1);
 
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(-19, 21).delta(-30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(1);
   });
 
@@ -81,13 +81,13 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(180 - 19, 21).delta(30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(-1);
 
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(180 + 19, 21).delta(30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(-1);
   });
 
@@ -96,13 +96,13 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(21, 21).delta(-30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(0);
 
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(-21, 21).delta(-30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(0);
   });
 
@@ -111,13 +111,13 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(180 - 21, 21).delta(30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(0);
 
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(180 + 21, 21).delta(30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(0);
   });
 
@@ -128,13 +128,13 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(90 - 19, 21).delta(-30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(1);
 
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(90 + 19, 21).delta(-30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(1);
   });
 
@@ -143,13 +143,13 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(-90 + 19, 21).delta(30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(-1);
 
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(-90 - 19, 21).delta(30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(-1);
   });
 
@@ -158,13 +158,13 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(90 - 21, 21).delta(-30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(0);
 
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(90 + 21, 21).delta(-30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(0);
   });
 
@@ -173,13 +173,13 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(-90 + 21, 21).delta(30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(0);
 
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(-90 - 21, 21).delta(30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
     expect(p.pan()).toEqual(0);
   });
 
@@ -188,7 +188,7 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).deltaPolar(90, 21).delta(30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
 
     expect(p.pan()).toEqual(0);
   });
@@ -198,7 +198,7 @@ describe('recognizers', () => {
     p.start({ x: 0, y: 0 });
     Simulate
       .from(0, 0).delta(30, 0)
-      .run((coord: Coordinates) => p.detect(coord));
+      .run((coord: any) => p.detect(coord));
 
     expect(p.pan()).toEqual(0);
   });

src/navigation/deep-linker.ts

@@ -2,7 +2,7 @@ import { ComponentFactory, ComponentFactoryResolver } from '@angular/core';
 import { Location } from '@angular/common';
 
 import { App } from '../components/app/app';
-import { DIRECTION_BACK, NavLink, NavSegment, convertToViews, isNav, isTab, isTabs,  } from './nav-util';
+import { DIRECTION_BACK, NavLink, NavSegment, TransitionDoneFn, convertToViews, isNav, isTab, isTabs } from './nav-util';
 import { ModuleLoader } from '../util/module-loader';
 import { isArray, isPresent } from '../util/util';
 import { Tab, Tabs } from './nav-interfaces';
@@ -380,9 +380,9 @@ export class DeepLinker {
    *
    * @internal
    */
-  _loadViewForSegment(navContainer: NavigationContainer, segment: NavSegment, done: Function) {
+  _loadViewForSegment(navContainer: NavigationContainer, segment: NavSegment, done: TransitionDoneFn) {
     if (!segment) {
-      return done();
+      return done(false, false);
     }
 
     if (isTabs(navContainer) || (isTab(navContainer) && navContainer.parent)) {
@@ -395,7 +395,7 @@ export class DeepLinker {
         updateUrl: false,
         animate: false
       }, true);
-      return done();
+      return done(false, false);
     }
 
     const navController = <NavController> <any> navContainer;
@@ -410,14 +410,14 @@ export class DeepLinker {
         if (i === numViews) {
           // this is the last view in the stack and it's the same
           // as the segment so there's no change needed
-          return done();
+          return done(false, false);
         } else {
           // it's not the exact view as the end
           // let's have this nav go back to this exact view
           return navController.popTo(viewController, {
             animate: false,
             updateUrl: false,
-          }, {}, done);
+          }, done);
         }
       }
     }

src/navigation/nav-controller-base.ts

@@ -24,6 +24,7 @@ import {
   STATE_DESTROYED,
   STATE_INITIALIZED,
   STATE_NEW,
+  TransitionDoneFn,
   TransitionInstruction,
   convertToViews,
 } from './nav-util';
@@ -106,7 +107,7 @@ export class NavControllerBase extends Ion implements NavController {
     this._destroyed = false;
   }
 
-  push(page: any, params?: any, opts?: NavOptions, done?: () => void): Promise<any> {
+  push(page: any, params?: any, opts?: NavOptions, done?: TransitionDoneFn): Promise<any> {
     return this._queueTrns({
       insertStart: -1,
       insertViews: [{ page: page, params: params }],
@@ -114,7 +115,7 @@ export class NavControllerBase extends Ion implements NavController {
     }, done);
   }
 
-  insert(insertIndex: number, page: any, params?: any, opts?: NavOptions, done?: () => void): Promise<any> {
+  insert(insertIndex: number, page: any, params?: any, opts?: NavOptions, done?: TransitionDoneFn): Promise<any> {
     return this._queueTrns({
       insertStart: insertIndex,
       insertViews: [{ page: page, params: params }],
@@ -122,7 +123,7 @@ export class NavControllerBase extends Ion implements NavController {
     }, done);
   }
 
-  insertPages(insertIndex: number, insertPages: any[], opts?: NavOptions, done?: () => void): Promise<any> {
+  insertPages(insertIndex: number, insertPages: any[], opts?: NavOptions, done?: TransitionDoneFn): Promise<any> {
     return this._queueTrns({
       insertStart: insertIndex,
       insertViews: insertPages,
@@ -130,7 +131,7 @@ export class NavControllerBase extends Ion implements NavController {
     }, done);
   }
 
-  pop(opts?: NavOptions, done?: () => void): Promise<any> {
+  pop(opts?: NavOptions, done?: TransitionDoneFn): Promise<any> {
     return this._queueTrns({
       removeStart: -1,
       removeCount: 1,
@@ -138,7 +139,7 @@ export class NavControllerBase extends Ion implements NavController {
     }, done);
   }
 
-  popTo(indexOrViewCtrl: any, opts?: NavOptions, done?: () => void): Promise<any> {
+  popTo(indexOrViewCtrl: any, opts?: NavOptions, done?: TransitionDoneFn): Promise<any> {
     let config: TransitionInstruction = {
       removeStart: -1,
       removeCount: -1,
@@ -153,7 +154,7 @@ export class NavControllerBase extends Ion implements NavController {
     return this._queueTrns(config, done);
   }
 
-  popToRoot(opts?: NavOptions, done?: () => void): Promise<any> {
+  popToRoot(opts?: NavOptions, done?: TransitionDoneFn): Promise<any> {
     return this._queueTrns({
       removeStart: 1,
       removeCount: -1,
@@ -169,7 +170,7 @@ export class NavControllerBase extends Ion implements NavController {
     return Promise.all(promises);
   }
 
-  remove(startIndex: number, removeCount: number = 1, opts?: NavOptions, done?: () => void): Promise<any> {
+  remove(startIndex: number, removeCount: number = 1, opts?: NavOptions, done?: TransitionDoneFn): Promise<any> {
     return this._queueTrns({
       removeStart: startIndex,
       removeCount: removeCount,
@@ -177,7 +178,7 @@ export class NavControllerBase extends Ion implements NavController {
     }, done);
   }
 
-  removeView(viewController: ViewController, opts?: NavOptions, done?: () => void): Promise<any> {
+  removeView(viewController: ViewController, opts?: NavOptions, done?: TransitionDoneFn): Promise<any> {
     return this._queueTrns({
       removeView: viewController,
       removeStart: 0,
@@ -186,12 +187,12 @@ export class NavControllerBase extends Ion implements NavController {
     }, done);
   }
 
-  setRoot(pageOrViewCtrl: any, params?: any, opts?: NavOptions, done?: () => void): Promise<any> {
+  setRoot(pageOrViewCtrl: any, params?: any, opts?: NavOptions, done?: TransitionDoneFn): Promise<any> {
     return this.setPages([{ page: pageOrViewCtrl, params: params }], opts, done);
   }
 
 
-  setPages(viewControllers: any[], opts?: NavOptions, done?: () => void): Promise<any> {
+  setPages(viewControllers: any[], opts?: NavOptions, done?: TransitionDoneFn): Promise<any> {
     if (isBlank(opts)) {
       opts = {};
     }
@@ -218,7 +219,7 @@ export class NavControllerBase extends Ion implements NavController {
   // 7. _transitionStart(): called once the transition actually starts, it initializes the Animation underneath.
   // 8. _transitionFinish(): called once the transition finishes
   // 9. _cleanup(): syncs the navigation internal state with the DOM. For example it removes the pages from the DOM or hides/show them.
-  _queueTrns(ti: TransitionInstruction, done: () => void): Promise<boolean> {
+  _queueTrns(ti: TransitionInstruction, done: TransitionDoneFn): Promise<boolean> {
     const promise = new Promise<boolean>((resolve, reject) => {
       ti.resolve = resolve;
       ti.reject = reject;

src/navigation/nav-controller.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '@angular/core';
 
 import { Config } from '../config/config';
-import { NavOptions } from './nav-util';
+import { NavOptions, TransitionDoneFn } from './nav-util';
 import { Page } from './nav-util';
 import { ViewController } from './view-controller';
 import { NavigationContainer } from './navigation-container';
@@ -420,7 +420,7 @@ export abstract class NavController implements NavigationContainer {
    * @param {object} [opts={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  abstract push(page: Page | string, params?: any, opts?: NavOptions, done?: Function): Promise<any>;
+  abstract push(page: Page | string, params?: any, opts?: NavOptions, done?: TransitionDoneFn): Promise<any>;
 
   /**
    * Inserts a component into the nav stack at the specified index. This is useful if
@@ -433,7 +433,7 @@ export abstract class NavController implements NavigationContainer {
    * @param {object} [opts={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  abstract insert(insertIndex: number, page: Page | string, params?: any, opts?: NavOptions, done?: Function): Promise<any>;
+  abstract insert(insertIndex: number, page: Page | string, params?: any, opts?: NavOptions, done?: TransitionDoneFn): Promise<any>;
 
   /**
    * Inserts an array of components into the nav stack at the specified index.
@@ -445,7 +445,7 @@ export abstract class NavController implements NavigationContainer {
    * @param {object} [opts={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  abstract insertPages(insertIndex: number, insertPages: Array<{page: Page | string, params?: any}>, opts?: NavOptions, done?: Function): Promise<any>;
+  abstract insertPages(insertIndex: number, insertPages: Array<{page: Page | string, params?: any}>, opts?: NavOptions, done?: TransitionDoneFn): Promise<any>;
 
   /**
    * Call to navigate back from a current component. Similar to `push()`, you
@@ -454,7 +454,7 @@ export abstract class NavController implements NavigationContainer {
    * @param {object} [opts={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  abstract pop(opts?: NavOptions, done?: Function): Promise<any>;
+  abstract pop(opts?: NavOptions, done?: TransitionDoneFn): Promise<any>;
 
   /**
    * Navigate back to the root of the stack, no matter how far back that is.
@@ -462,7 +462,7 @@ export abstract class NavController implements NavigationContainer {
    * @param {object} [opts={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  abstract popToRoot(opts?: NavOptions, done?: Function): Promise<any>;
+  abstract popToRoot(opts?: NavOptions, done?: TransitionDoneFn): Promise<any>;
 
   /**
    * @hidden
@@ -475,11 +475,10 @@ export abstract class NavController implements NavigationContainer {
    * when a new instance needs to be created.
    *
    * @param {Page|string|ViewController} page The component class or deeplink name you want to push onto the navigation stack.
-   * @param {object} [params={}] Any NavParams to be used when a new view instance is created at the root.
    * @param {object} [opts={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  abstract popTo(page: Page | string | ViewController, params?: any, opts?: NavOptions, done?: Function): Promise<any>;
+  abstract popTo(page: Page | string | ViewController, opts?: NavOptions, done?: TransitionDoneFn): Promise<any>;
 
   /**
    * @hidden
@@ -497,7 +496,7 @@ export abstract class NavController implements NavigationContainer {
    * @param {object} [opts={}] Any options you want to use pass to transtion.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  abstract remove(startIndex: number, removeCount?: number, opts?: NavOptions, done?: Function): Promise<any>;
+  abstract remove(startIndex: number, removeCount?: number, opts?: NavOptions, done?: TransitionDoneFn): Promise<any>;
 
   /**
    * Removes the specified view controller from the nav stack.
@@ -506,7 +505,7 @@ export abstract class NavController implements NavigationContainer {
    * @param {object} [opts={}] Any options you want to use pass to transtion.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  abstract removeView(viewController: ViewController, opts?: NavOptions, done?: Function): Promise<any>;
+  abstract removeView(viewController: ViewController, opts?: NavOptions, done?: TransitionDoneFn): Promise<any>;
 
   /**
    * Set the root for the current navigation stack.
@@ -516,7 +515,7 @@ export abstract class NavController implements NavigationContainer {
    * @param {Function} done Callback function on done.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  abstract setRoot(pageOrViewCtrl: Page | string | ViewController, params?: any, opts?: NavOptions, done?: Function): Promise<any>;
+  abstract setRoot(pageOrViewCtrl: Page | string | ViewController, params?: any, opts?: NavOptions, done?: TransitionDoneFn): Promise<any>;
   abstract goToRoot(options: NavOptions): Promise<any>;
 
   /**
@@ -529,7 +528,7 @@ export abstract class NavController implements NavigationContainer {
    * @param {Object} [opts={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
-  abstract setPages(pages: ({page: Page | string, params?: any} | ViewController)[], opts?: NavOptions, done?: Function): Promise<any>;
+  abstract setPages(pages: ({page: Page | string, params?: any} | ViewController)[], opts?: NavOptions, done?: TransitionDoneFn): Promise<any>;
 
   /**
    * @param {number} index The index of the page to get.

src/navigation/nav-params.ts

@@ -7,11 +7,15 @@
  *
  * @usage
  * ```ts
+ * import { NavParams } from 'ionic-angular';
+ *
  * export class MyClass{
- *  constructor(public navParams: NavParams){
+ *
+ *  constructor(navParams: NavParams){
  *    // userParams is an object we have in our nav-parameters
- *    this.navParams.get('userParams');
+ *    navParams.get('userParams');
  *  }
+ *
  * }
  * ```
  * @demo /docs/demos/src/nav-params/
@@ -32,6 +36,8 @@ export class NavParams {
    * Get the value of a nav-parameter for the current view
    *
    * ```ts
+   * import { NavParams } from 'ionic-angular';
+   *
    * export class MyClass{
    *  constructor(public navParams: NavParams){
    *    // userParams is an object we have in our nav-parameters

src/navigation/nav-util.ts

@@ -221,6 +221,10 @@ export interface TransitionRejectFn {
   (rejectReason: any, transition?: Transition): void;
 }
 
+export interface TransitionDoneFn {
+  (hasCompleted: boolean, requiresTransition: boolean, enteringName?: string, leavingName?: string, direction?: string): void;
+}
+
 export interface TransitionInstruction {
   opts: NavOptions;
   insertStart?: number;
@@ -230,7 +234,7 @@ export interface TransitionInstruction {
   removeCount?: number;
   resolve?: (hasCompleted: boolean) => void;
   reject?: (rejectReason: string) => void;
-  done?: Function;
+  done?: TransitionDoneFn;
   leavingRequiresTransition?: boolean;
   enteringRequiresTransition?: boolean;
   requiresTransition?: boolean;

src/platform/cordova.ios.scss

@@ -11,5 +11,7 @@ $cordova-ios-statusbar-padding-modal-max-width:         $cordova-statusbar-paddi
 
 // Cordova mixins are in the main cordova file
 .ios {
-  @include statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
-}
+ @include statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
+
+ @include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding);
+}

src/platform/cordova.md.scss

@@ -12,5 +12,7 @@ $cordova-md-statusbar-padding-modal-max-width:         $cordova-statusbar-paddin
 // Cordova mixins are in the main cordova file
 .md {
   @include statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $cordova-md-statusbar-padding, $cordova-md-statusbar-padding-modal-max-width);
+
+  @include footer-safe-area($toolbar-md-height, $toolbar-md-padding);
 }
 

src/platform/cordova.scss

@@ -11,6 +11,7 @@ $cordova-statusbar-padding-modal-max-width:         767px !default;
 
   ion-nav > .ion-page,
   ion-nav > .ion-page > ion-header,
+  ion-tab > .ion-page,
   ion-tab > .ion-page > ion-header,
   ion-tabs > .ion-page.tab-subpage > ion-header,
   ion-menu > .menu-inner,
@@ -20,7 +21,7 @@ $cordova-statusbar-padding-modal-max-width:         767px !default;
 
     // If we should style the title elements in the toolbar
     @if ($style-title) {
-      @include toolbar-title-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding);
+      @include toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
     }
   }
 
@@ -30,7 +31,7 @@ $cordova-statusbar-padding-modal-max-width:         767px !default;
 
       // If we should style the title elements in the toolbar
       @if ($style-title) {
-        @include toolbar-title-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding);
+        @include toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
       }
     }
   }
@@ -42,19 +43,24 @@ $cordova-statusbar-padding-modal-max-width:         767px !default;
 
 @mixin toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding) {
 
+
   > .toolbar.statusbar-padding:first-child {
     @include padding(calc(#{$cordova-statusbar-padding} + #{$toolbar-padding}), null, null, null);
+    @include padding(calc(constant(safe-area-inset-top) + #{$toolbar-padding}), calc(constant(safe-area-inset-right) + #{$toolbar-padding}), null, calc(constant(safe-area-inset-left) + #{$toolbar-padding}));
 
     min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
+    min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
   }
 
   > ion-content.statusbar-padding:first-child .scroll-content {
     @include padding($cordova-statusbar-padding, null, null, null);
+    @include padding(calc(#{$cordova-statusbar-padding} + constant(safe-area-inset-top)), null, null, null);
   }
 
   > ion-content.statusbar-padding:first-child[padding] .scroll-content,
   > ion-content.statusbar-padding:first-child[padding-top] .scroll-content {
     @include padding(calc(#{$content-padding} + #{$cordova-statusbar-padding}), null, null, null);
+    @include padding(calc(#{$content-padding} + constant(safe-area-inset-top)), null, null, null);
   }
 
 }
@@ -63,14 +69,31 @@ $cordova-statusbar-padding-modal-max-width:         767px !default;
 // iOS is the only mode that uses this mixin and it should be removed with #5036
 // --------------------------------------------------------------------------------
 
-@mixin toolbar-title-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding) {
+@mixin toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding) {
 
   > .toolbar.statusbar-padding:first-child ion-segment,
   > .toolbar.statusbar-padding:first-child ion-title {
     @include padding($cordova-statusbar-padding, null, null, null);
+    @include padding(calc(constant(safe-area-inset-top) + #{$toolbar-padding}), null, null, null);
 
     height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
+    height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
+
     min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
+    min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
   }
 
 }
+
+
+@mixin footer-safe-area($toolbar-height, $toolbar-padding) {
+  .tabs .tabbar {
+    @include padding(null, null, constant(safe-area-inset-bottom), null);
+  }
+
+  ion-footer .toolbar:last-child {
+    @include padding(null, null, calc(constant(safe-area-inset-top) + #{$toolbar-padding}), null);
+    height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
+    min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
+  }
+}

src/platform/cordova.wp.scss

@@ -12,4 +12,6 @@ $cordova-wp-statusbar-padding-modal-max-width:         $cordova-statusbar-paddin
 // Cordova mixins are in the main cordova file
 .wp {
   @include statusbar-padding($toolbar-wp-height, $toolbar-wp-padding, $content-wp-padding, $cordova-wp-statusbar-padding, $cordova-wp-statusbar-padding-modal-max-width);
+
+  @include footer-safe-area($toolbar-wp-height, $toolbar-wp-padding);
 }

src/platform/keyboard.ts

@@ -16,9 +16,9 @@ import { Platform } from './platform';
  * @usage
  * ```ts
  * export class MyClass {
- *   constructor(public keyboard: Keyboard) {
  *
- *   }
+ *   constructor(public keyboard: Keyboard) { }
+ *
  * }
  * ```
  */

src/platform/platform.ts

@@ -23,7 +23,7 @@ export type DocumentDirection = 'ltr' | 'rtl';
  *
  * @Component({...})
  * export MyPage {
- *   constructor(public plt: Platform) {
+ *   constructor(public platform: Platform) {
  *
  *   }
  * }
@@ -145,8 +145,8 @@ export class Platform {
    *
    * @Component({...})
    * export MyPage {
-   *   constructor(public plt: Platform) {
-   *     if (this.plt.is('ios')) {
+   *   constructor(public platform: Platform) {
+   *     if (this.platform.is('ios')) {
    *       // This will only print when on iOS
    *       console.log('I am an iOS device!');
    *     }
@@ -186,9 +186,9 @@ export class Platform {
    *
    * @Component({...})
    * export MyPage {
-   *   constructor(public plt: Platform) {
+   *   constructor(public platform: Platform) {
    *     // This will print an array of the current platforms
-   *     console.log(this.plt.platforms());
+   *     console.log(this.platform.platforms());
    *   }
    * }
    * ```
@@ -208,10 +208,10 @@ export class Platform {
    *
    * @Component({...})
    * export MyPage {
-   *   constructor(public plt: Platform) {
+   *   constructor(public platform: Platform) {
    *     // This will print an object containing
    *     // all of the platforms and their versions
-   *     console.log(plt.versions());
+   *     console.log(platform.versions());
    *   }
    * }
    * ```
@@ -255,8 +255,8 @@ export class Platform {
    *
    * @Component({...})
    * export MyApp {
-   *   constructor(public plt: Platform) {
-   *     this.plt.ready().then((readySource) => {
+   *   constructor(public platform: Platform) {
+   *     this.platform.ready().then((readySource) => {
    *       console.log('Platform ready from', readySource);
    *       // Platform now ready, execute any required native code
    *     });

src/tap-click/haptic.ts

@@ -14,8 +14,9 @@ import { Platform } from '../platform/platform';
  *
  * @usage
  * ```ts
- * export class MyClass{
- *  constructor(haptic: Haptic){
+ * export class MyClass {
+ *
+ *  constructor(haptic: Haptic) {
  *    haptic.selection();
  *  }
  * }

src/themes/ionic.mixins.scss

@@ -538,3 +538,111 @@
     }
   }
 }
+
+
+// Add safe-area transform for all directions
+// Used by item-reorder
+// @param {string} $transforms - comma separated list of transforms
+@mixin reorder-safe-translate($transforms...) {
+  $extra: null;
+
+  $x: null;
+  $ltr-translate: null;
+  $rtl-translate: null;
+
+  @each $transform in $transforms {
+    @if (str-index($transform, translate3d)) {
+      $transform: str-replace($transform, 'translate3d(');
+      $transform: str-replace($transform, ')');
+
+      $coordinates: str-split($transform, ',');
+
+      $x: nth($coordinates, 1);
+      $y: nth($coordinates, 2);
+      $z: nth($coordinates, 3);
+
+      $ltr-translate: translate3d(calc(-1 * constant(safe-area-inset-right)), 0, 0);
+      $rtl-translate: translate3d(constant(safe-area-inset-left), $y, $z);
+    } @else {
+      @if $extra == null {
+        $extra: $transform;
+      } @else {
+        $extra: $extra $transform;
+      }
+    }
+  }
+
+  @if $x == '0' or $x == null {
+    @include multi-dir() {
+      transform: $ltr-translate $extra;
+    }
+  } @else {
+    @include ltr() {
+      transform: $ltr-translate $extra;
+    }
+
+    @include rtl() {
+      transform: $rtl-translate $extra;
+    }
+  }
+}
+
+// Add safe-area-padding for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin safe-area-padding($top, $end: $top, $bottom: $top, $start: $end) {
+  $safe-area-start: null;
+
+  @if ($start) {
+    $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
+  }
+
+  @include padding($top, $end, $bottom, $start);
+
+  @media screen and (orientation: landscape) {
+    @include padding($top, $end, $bottom, $safe-area-start);
+  }
+}
+
+
+// Add safe area padding horizontal
+// @param {string} $start
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin safe-area-padding-horizontal($start, $end: $start) {
+  $safe-area-end: null;
+  $safe-area-start: null;
+
+  @if ($end) {
+    $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
+  }
+  @if ($start) {
+    $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
+  }
+
+  @include padding-horizontal($start, $end);
+
+  @media screen and (orientation: landscape) {
+    @include padding-horizontal($safe-area-start, $safe-area-end);
+  }
+}
+
+
+// Add safe area padding to a screen
+// only if it is landscape mode, then only on the left
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin safe-area-no-padding($start) {
+  $safe-area-start: null;
+
+  @if ($start) {
+    $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
+  }
+
+  @media screen and (orientation: landscape) {
+    @include padding-horizontal($safe-area-start, null);
+  }
+}

src/util/base-input.ts

@@ -2,7 +2,7 @@ import { AfterContentInit, ElementRef, EventEmitter, Input, NgZone, Output, Rend
 import { ControlValueAccessor } from '@angular/forms';
 import { NgControl } from '@angular/forms';
 
-import { assert, deepCopy, isArray, isPresent, isString, isTrueProperty, isUndefined  } from './util';
+import { assert, deepCopy, isArray, isPresent, isString, isTrueProperty, isUndefined } from './util';
 import { IonicFormInput } from './form';
 import { Ion } from '../components/ion';
 import { Config } from '../config/config';
@@ -228,9 +228,17 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
 
     this._form && this._form.unsetAsFocused(this);
     this._setFocus(false);
+    this._fireTouched();
     this.ionBlur.emit(this);
   }
 
+  /**
+   * @hidden
+   */
+  _fireTouched() {
+    this._onTouched && this._onTouched();
+  }
+
   /**
    * @hidden
    */
@@ -253,7 +261,6 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
    */
   private onChange() {
     this._onChanged && this._onChanged(this._inputNgModelEvent());
-    this._onTouched && this._onTouched();
   }
 
   /**

src/util/events.ts

@@ -13,7 +13,8 @@ import { ScrollView } from './scroll-view';
  * import { Events } from 'ionic-angular';
  *
  * // first page (publish an event when a user is created)
- * constructor(public events: Events) {}
+ * constructor(public events: Events) { }
+ *
  * createUser(user) {
  *   console.log('User created!')
  *   this.events.publish('user:created', user, Date.now());

src/util/input-tester.ts

@@ -56,7 +56,7 @@ export function commonInputTest<T>(input: BaseInput<T>, config: TestConfig) {
   // TODO test form register/deregister
   // TODO test item classes
   // TODO test disable
-  const zone = new NgZone(true);
+  const zone = new NgZone({ enableLongStackTrace: true });
   zone.run(() => {
     if (config.testItem === true && !input._item) {
       assert(false, 'input is invalid');
@@ -107,6 +107,7 @@ function testState<T>(input: BaseInput<T>, config: TestConfig, isInit: boolean)
   if (isInit) {
     let blurCount = 0;
     let focusCount = 0;
+    let onTouchedCalled = 0;
     const subBlur = input.ionBlur.subscribe((ev: any) => {
       assertEqual(ev, input, 'ionBlur argument is wrong');
       blurCount++;
@@ -121,6 +122,15 @@ function testState<T>(input: BaseInput<T>, config: TestConfig, isInit: boolean)
         assert(false, 'onFocusChange test failed');
       }
     });
+    input.registerOnTouched(() => {
+      assertEqual(onTouchedCalled, 0, 'registerOnTouched: internal error');
+      onTouchedCalled++;
+    });
+
+    input._fireBlur();
+    assertEqual(blurCount, 0, 'blur should not have been emitted');
+    assertEqual(onTouchedCalled, 0, 'touched should not have been called');
+
     input._fireFocus();
     assertEqual(input._isFocus, true, 'should be focus');
     assertEqual(input.isFocus(), true, 'should be focus');
@@ -129,6 +139,7 @@ function testState<T>(input: BaseInput<T>, config: TestConfig, isInit: boolean)
     input._fireBlur();
     assertEqual(input._isFocus, false, 'should be not focus');
     assertEqual(input.isFocus(), false, 'should be not focus');
+    assertEqual(onTouchedCalled, 1, 'touched should have been called');
     input._fireBlur(); // it should not crash
 
     assertEqual(focusCount, 1, 'ionFocus was not called correctly');
@@ -166,7 +177,7 @@ function testWriteValue<T>(input: BaseInput<T>, config: TestConfig, isInit: bool
     OnChangeCalled++;
   });
 
-  // Test registerOnChange
+  // Test registerOnTouched
   input.registerOnTouched(() => {
     assertEqual(OnTouchedCalled, 0, 'registerOnTouched: internal error');
 
@@ -187,7 +198,7 @@ function testWriteValue<T>(input: BaseInput<T>, config: TestConfig, isInit: bool
       assertEqual(ionChangeCalled, 0, 'loop: ionChange error');
     }
     assertEqual(OnChangeCalled, 1, 'loop: OnChangeCalled was not called');
-    assertEqual(OnTouchedCalled, 1, 'loop: OnTouchedCalled was not called');
+    assertEqual(OnTouchedCalled, 0, 'loop: OnTouchedCalled was called');
 
     OnTouchedCalled = OnChangeCalled = ionChangeCalled = 0;
 
@@ -212,7 +223,7 @@ function testWriteValue<T>(input: BaseInput<T>, config: TestConfig, isInit: bool
   input.value = null;
   assertEqual(input.value, config.defaultValue, 'null: wrong default value');
   assertEqual(OnChangeCalled, 1, 'null: OnChangeCalled was not called');
-  assertEqual(OnTouchedCalled, 1, 'null: OnTouchedCalled was not called');
+  assertEqual(OnTouchedCalled, 0, 'null: OnTouchedCalled was called');
 
 
   input.registerOnChange(null);

src/util/ionic-error-handler.ts

@@ -10,13 +10,13 @@ import { ErrorHandler } from '@angular/core';
  * ### IonicErrorHandler Example
  *
  * ```typescript
- * import { NgModule, ErrorHandler } from '@angular/core';
+ * import { ErrorHandler, NgModule } from '@angular/core';
  * import { IonicErrorHandler } from 'ionic-angular';
  *
  * @NgModule({
  *   providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
  * })
- * class AppModule {}
+ * class AppModule { }
  * ```
  *
  *
@@ -35,7 +35,7 @@ import { ErrorHandler } from '@angular/core';
  * @NgModule({
  *   providers: [{ provide: ErrorHandler, useClass: MyErrorHandler }]
  * })
- * class AppModule {}
+ * class AppModule { }
  * ```
  *
  * More information about Angular's [`ErrorHandler`](https://angular.io/docs/ts/latest/api/core/index/ErrorHandler-class.html).

src/util/mock-providers.ts

@@ -11,7 +11,7 @@ import { GestureController } from '../gestures/gesture-controller';
 import { Haptic } from '../tap-click/haptic';
 import { IonicApp } from '../components/app/app-root';
 import { Menu } from '../components/menu/menu';
-import { NavOptions } from '../navigation/nav-util';
+import { NavOptions, TransitionDoneFn } from '../navigation/nav-util';
 import { NavControllerBase } from '../navigation/nav-controller-base';
 import { OverlayPortal } from '../components/app/overlay-portal';
 import { PageTransition } from '../transitions/page-transition';
@@ -501,8 +501,9 @@ export function mockTab(parentTabs: Tabs, overrideLoad: boolean = true): Tab {
   );
 
   if (overrideLoad) {
-    tab.load = (_opts: any, cb: Function) => {
-      cb();
+    tab.load = (_opts: any, cb: TransitionDoneFn) => {
+      cb(false, false);
+      return Promise.resolve();
     };
   }