4.2.1 (#18149)

.circleci/config.yml

@@ -60,7 +60,7 @@ jobs:
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core
       - run:
-          command: npm run build -- --ci
+          command: npm run build -- --max-workers 1
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core-stencil
       - persist_to_workspace:
@@ -119,7 +119,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm run test.spec --ci
+          command: npm run test.spec
           working_directory: /tmp/workspace/core
 
   test-core-treeshake:
@@ -129,7 +129,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm run test.treeshake --ci
+          command: npm run test.treeshake
           working_directory: /tmp/workspace/core
 
   test-core-screenshot:

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,7 @@
 ---
 name: Bug Report
 about: Create a report to help us improve
-title: 'bug: '
+title: ''
 labels: ''
 assignees: ''
 ---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,7 +1,7 @@
 ---
 name: Feature Request
 about: Suggest an idea for this project
-title: 'feat: '
+title: ''
 labels: ''
 assignees: ''
 ---

.github/ISSUE_TEMPLATE/support_question.md

@@ -1,7 +1,7 @@
 ---
 name: Support Question
 about: Question on how to use this project
-title: 'support: '
+title: ''
 labels: 'ionitron: support'
 assignees: ''
 ---

.github/PROCESS.md

@@ -140,14 +140,6 @@ Once the release is ready to ship, it will get merged into `stable` and `master`
 
 See the [steps for releasing](#releasing) below for detailed information on how to publish a release.
 
-### Version Branches
-
-Once a release has shipped and the release branch has been merged into `stable` and `master` it should also be merged into its corrsponding version branch. These version branches allow us to ship updates for specific versions of the framework (i.e. Lets us ship a bug fix that only affects 4.2.x).
-
-Patch releases should be merged into their corresponding version branches. For example, a `release-4.1.1` branch should be merged into the `4.1.x` version branch and a `release-5.0.1` branch should be merged into the `5.0.x` version branch.
-
-When releasing a major version such as `5.0.0 ` or a minor version such as `4.1.0` , the version branch will not exist. The version branch should be created once the release branch has been merged into `stable` and `master`. For example, when releasing `4.1.0`, the `release-4.1.0` release branch should be merged into `stable` and `master` and then the `4.1.x` version branch should be created off the latest `stable`.
-
 
 ### Hotfix Branches
 
@@ -221,31 +213,20 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
 
 ## Releasing
 
-1. Create the release branch from `master`, for example: `release-4.5.0`.
-
-1. For major or minor releases, create a version branch based off the latest version branch. For example, if releasing 4.5.0, create a branch called `4.5.x` based off `4.4.x`.
-
-1. Submit a pull request from the release branch into the version branch. Do not merge this pull request yet.
-
+1. Create the release branch from `master`, for example: `release-4.1.0`.
+1. Submit a pull request from the release branch into `stable`. Do not merge this pull request yet.
 1. Verify all tests are passing, fix any bugs if needed and make sure no undesired commits are in.
-
 1. Navigate to the root of the repository while on the release branch.
-
 1. Run `npm i` if it hasn't already been done.
-
 1. Run `npm run release.prepare`
     - Select the version based on the type of commits and the [Ionic Versioning](https://ionicframework.com/docs/intro/versioning)
     - After the process completes, verify the version number in all packages (`core`, `docs`, `angular`)
     - Verify the changelog commits are accurate and follow the [proper format]((https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format))
-    - For major or minor releases, ensure that the version number has an associated title (for example: `4.5.0 Boron`)
-    - Commit these changes with the version number as the message, e.g. `git commit -m "4.5.0"`
-
+    - Commit these changes with the version number as the message, e.g. `git commit -m "4.1.0"`
 1. Run `npm run release`
-
 1. Click **Merge pull request**. Use the dropdown to select this option if necessary.
 
     <img width="191" alt="Merge pull request button" src="https://user-images.githubusercontent.com/236501/47032669-8be1b980-d138-11e8-9a90-d1518c223184.png">
 
-1. Rewrite the commit message to `merge release-[VERSION]` with the proper release branch. For example, if this release is for `4.5.0`, the message would be `merge release-4.5.0`.
-
-1. Submit a pull request from the release branch into `master`. Merge this pull request using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.
+1. Rewrite the commit message to `merge release-4.1.0` with the proper release branch.
+1. Create a pull request and merge the release branch back into `master` using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,51 +1,12 @@
-<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing -->
-
-## Pull request checklist
-
-Please check if your PR fulfills the following requirements:
-- [ ] Tests for the changes have been added (for bug fixes / features)
-- [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
-- [ ] Build (`npm run build`) was run locally and any changes were pushed
-- [ ] Lint (`npm run lint`) has passed locally and any fixes were made for failures
+#### Short description of what this resolves:
 
 
-## Pull request type
-
-<!-- Please do not submit updates to dependencies unless it fixes an issue. --> 
-
-<!-- Please try to limit your pull request to one type, submit multiple pull requests if needed. --> 
-
-Please check the type of change your PR introduces:
-- [ ] Bugfix
-- [ ] Feature
-- [ ] Code style update (formatting, renaming)
-- [ ] Refactoring (no functional changes, no api changes)
-- [ ] Build related changes
-- [ ] Documentation content changes
-- [ ] Other (please describe): 
-
-
-## What is the current behavior?
-<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
-
-Issue Number: N/A
-
-
-## What is the new behavior?
-<!-- Please describe the behavior or changes that are being added by this PR. -->
+#### Changes proposed in this pull request:
 
 -
 -
 -
 
-## Does this introduce a breaking change?
+**Ionic Version**:
 
-- [ ] Yes
-- [ ] No
-
-<!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. -->
-
-
-## Other information
-
-<!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
+**Fixes**: #

.github/ionic-issue-bot.yml

@@ -118,15 +118,6 @@ labelPullRequest:
 
 wrongRepo:
   repos:
-    - label: "ionitron: capacitor"
-      repo: capacitor
-      message: >
-        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
-        associated with the Ionic Framework. It appears that this issue is associated with Capacitor.
-        I am moving this issue to the Capacitor repository. Please track this issue over there.
-
-
-        Thank you for using Ionic!
     - label: "ionitron: v3"
       repo: ionic-v3
       message: >

.gitignore

@@ -15,7 +15,6 @@ log.txt
 coverage/
 collection/
 dist/
-dist-transpiled/
 node_modules/
 tmp/
 temp/
@@ -50,16 +49,10 @@ demos/src/**/*.ngfactory.ts
 demos/src/**/*.d.ts
 demos/src/**/*.metadata.json
 demos/src/**/*.css.shim.ts
-prerender.html
-prerender-domino.html
-prerender-hydrated.html
-prerender-static.html
 
 # stencil
 angular/css/
 core/css/
-core/hydrated/
 core/loader/
-core/www/
 .stencil/
 angular/build/

.scripts/release-dev.js

@@ -7,7 +7,6 @@ const fs = require('fs-extra');
 
 const common = require('./common');
 
-const DIST_NPM_TAG = 'dev';
 const DIST_TAG = 'dev';
 
 async function main() {
@@ -38,7 +37,7 @@ async function main() {
     packages.forEach(package => {
       common.prepareDevPackage(tasks, package, devVersion);
     });
-    common.publishPackages(tasks, packages, devVersion, DIST_NPM_TAG);
+    common.publishPackages(tasks, packages, devVersion, DIST_TAG);
 
     const listr = new Listr(tasks);
     await listr.run();

.scripts/release.js

@@ -54,7 +54,7 @@ function publishGit(tasks, version, changelog) {
     },
     {
       title: 'Push tags to remove',
-      task: () => execa('git', ['push', 'tag'], { cwd: common.rootDir })
+      task: () => execa('git', ['push', '--tags'], { cwd: common.rootDir })
     },
     {
       title: 'Publish Github release',

.scripts/v3/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "ionic-angular",
-  "version": "`gulp package` generates dist/package.json from this template using the root ./package.json",
-  "description": "",
-  "keywords": [],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ionic-team/ionic-v3.git"
-  },
-  "license": "MIT",
-  "main": "umd/index.js",
-  "module": "index.js",
-  "es2015": "es2015/index.js",
-  "peerDependencies": {
-  }
-}

CHANGELOG.md

@@ -1,213 +1,14 @@
-## [4.6.2](https://github.com/ionic-team/ionic/compare/v4.6.1...v4.6.2) (2019-07-10)
+## [4.2.1](https://github.com/ionic-team/ionic/compare/v4.2.0...v4.2.1) (2019-04-26)
 
 
 ### Bug Fixes
 
-* **menu-button:** hide menu button when auto hide or split pane ([#18702](https://github.com/ionic-team/ionic/issues/18702)) ([24840d4](https://github.com/ionic-team/ionic/commit/24840d4)), closes [#18666](https://github.com/ionic-team/ionic/issues/18666)
-* **menu-button:** move font-size to host for easier customization ([#18699](https://github.com/ionic-team/ionic/issues/18699)) ([876ab41](https://github.com/ionic-team/ionic/commit/876ab41)), closes [#18667](https://github.com/ionic-team/ionic/issues/18667)
-* **overlays:** fallback to step color if overlay background variable is unset ([#18709](https://github.com/ionic-team/ionic/issues/18709)) ([f16b118](https://github.com/ionic-team/ionic/commit/f16b118)), closes [#18658](https://github.com/ionic-team/ionic/issues/18658)
-* **virtual-scroll:**  remove runOutsideAngular error ([#18752](https://github.com/ionic-team/ionic/issues/18752)) ([8beeff2](https://github.com/ionic-team/ionic/commit/8beeff2)), closes [#18746](https://github.com/ionic-team/ionic/issues/18746)
-* **vue:** update imports for types and ionicons ([f56fea6](https://github.com/ionic-team/ionic/commit/f56fea6)), closes [#18701](https://github.com/ionic-team/ionic/issues/18701)
+* **angular:** support replaceUrl with angular <7.2 ([#18107](https://github.com/ionic-team/ionic/issues/18107)) ([26ca72c](https://github.com/ionic-team/ionic/commit/26ca72c))
+* sanitize components using innerHTML ([#18145](https://github.com/ionic-team/ionic/issues/18145)) ([96d7fdd](https://github.com/ionic-team/ionic/commit/96d7fdd))
 
 
-### Performance Improvements
 
-* **all:** minify better by using arrow functions ([#18730](https://github.com/ionic-team/ionic/issues/18730)) ([03c1d19](https://github.com/ionic-team/ionic/commit/03c1d19))
-
-
-
-## [4.6.1](https://github.com/ionic-team/ionic/compare/v4.6.0...v4.6.1) (2019-07-09)
-
-
-### Bug Fixes
-
-* **app:** add hydrated to hide white screen with multiple ionic dependencies ([#18649](https://github.com/ionic-team/ionic/issues/18649))
-* **datetime:** datetime no longer reports having a value if none is set ([#18541](https://github.com/ionic-team/ionic/issues/18541)) ([92e0f98](https://github.com/ionic-team/ionic/commit/92e0f98)), closes [#17979](https://github.com/ionic-team/ionic/issues/17979) [#18540](https://github.com/ionic-team/ionic/issues/18540)
-* **fab-button:** set opacity on disabled fab button ([#18685](https://github.com/ionic-team/ionic/issues/18685)) ([6042b39](https://github.com/ionic-team/ionic/commit/6042b39)), closes [#18682](https://github.com/ionic-team/ionic/issues/18682)
-* **icon:** load icons properly with baseHref ([#18650](https://github.com/ionic-team/ionic/issues/18650)), ([#18637](https://github.com/ionic-team/ionic/issues/18637))
-* **icon:** bind icon name properly ([#18707](https://github.com/ionic-team/ionic/issues/18707))
-* **infinite-scroll:** fix scroll listener ([0d58101](https://github.com/ionic-team/ionic/commit/0d58101))
-* **item:** do not disable entire item if there are multiple inputs ([#18696](https://github.com/ionic-team/ionic/issues/18696)) ([dfa2b13](https://github.com/ionic-team/ionic/commit/dfa2b13)), closes [#18655](https://github.com/ionic-team/ionic/issues/18655) [#18670](https://github.com/ionic-team/ionic/issues/18670)
-* **router-link:** add missing target prop ([#18659](https://github.com/ionic-team/ionic/issues/18659)) ([1f51ab2](https://github.com/ionic-team/ionic/commit/1f51ab2)), closes [#18655](https://github.com/ionic-team/ionic/issues/18655)
-* **router-outlet:** fix swipe to go back ([b69fb69](https://github.com/ionic-team/ionic/commit/b69fb69))
-* **scss:** copy all scss files ([36a58df](https://github.com/ionic-team/ionic/commit/36a58df))
-* **searchbar:** proper styling after navigating ([#18642](https://github.com/ionic-team/ionic/issues/18642))
-* **slides:** use correct order for pushing slides dynamically ([#18633](https://github.com/ionic-team/ionic/issues/18633))
-* **tabs:** select proper tab by default and do not emit tab change if selectedTab is undefined ([03c834c](https://github.com/ionic-team/ionic/commit/03c834c))
-* **overlay:** make create opts optional ([44c88ad](https://github.com/ionic-team/ionic/commit/44c88ad))
-
-
-### Performance Improvements
-
-* **angular:** skip zone ([e059fc8](https://github.com/ionic-team/ionic/commit/e059fc8))
-
-
-
-# [4.6.0 Carbon](https://github.com/ionic-team/ionic/compare/v4.5.0...v4.6.0) (2019-06-26)
-
-
-### Bug Fixes
-
-* **button:** default opacity for disabled clear buttons ([#18560](https://github.com/ionic-team/ionic/issues/18560)) ([f48dc3d](https://github.com/ionic-team/ionic/commit/f48dc3d)), closes [#18555](https://github.com/ionic-team/ionic/issues/18555)
-* **button:** update solid buttons to use tint and shade colors ([#18537](https://github.com/ionic-team/ionic/issues/18537)) ([26ecf2b](https://github.com/ionic-team/ionic/commit/26ecf2b))
-* **menu:** change ARIA role from complementary to navigation ([#18330](https://github.com/ionic-team/ionic/issues/18330)) ([9e4346b](https://github.com/ionic-team/ionic/commit/9e4346b)), closes [#18318](https://github.com/ionic-team/ionic/issues/18318)
-* **segment:** apply hover properly for segment with color ([#18549](https://github.com/ionic-team/ionic/issues/18549)) ([78e477b](https://github.com/ionic-team/ionic/commit/78e477b))
-* **segment:** default ripple to currentColor ([#18547](https://github.com/ionic-team/ionic/issues/18547)) ([832306c](https://github.com/ionic-team/ionic/commit/832306c))
-
-
-### Features
-
-* **components:** add missing button/a props to components that render them ([#17883](https://github.com/ionic-team/ionic/issues/17883)) ([eca4121](https://github.com/ionic-team/ionic/commit/eca4121)), closes [#16848](https://github.com/ionic-team/ionic/issues/16848) [#16889](https://github.com/ionic-team/ionic/issues/16889)
-* **fab-button:** add hover state using tint colors ([#18536](https://github.com/ionic-team/ionic/issues/18536)) ([ad00679](https://github.com/ionic-team/ionic/commit/ad00679)), closes [#17624](https://github.com/ionic-team/ionic/issues/17624)
-* **item:** add hover and focused states ([#18606](https://github.com/ionic-team/ionic/issues/18606)) ([8a88dd2](https://github.com/ionic-team/ionic/commit/8a88dd2)), closes [#18279](https://github.com/ionic-team/ionic/issues/18279) [#17624](https://github.com/ionic-team/ionic/issues/17624)
-* **router-link:** add router-link and deprecate anchor ([#18620](https://github.com/ionic-team/ionic/issues/18620)) ([d4c7b03](https://github.com/ionic-team/ionic/commit/d4c7b03))
-
-
-### Enhancements
-
-* **stencil:** update to Stencil One to improve app performance 🎉🎊 ([b40f7d3](https://github.com/ionic-team/ionic/commit/b40f7d3))
-
-
-
-# [4.5.0 Boron](https://github.com/ionic-team/ionic/compare/v4.4.2...v4.5.0) (2019-06-12)
-
-
-### Bug Fixes
-
-* **angular:** ensure all NavigationExtras values are preserved when navigating ([#18468](https://github.com/ionic-team/ionic/issues/18468)) ([7610787](https://github.com/ionic-team/ionic/commit/7610787)), closes [#18469](https://github.com/ionic-team/ionic/issues/18469)
-* **button:** set opacity on the host element for disabled button ([#18509](https://github.com/ionic-team/ionic/issues/18509)) ([320719b](https://github.com/ionic-team/ionic/commit/320719b)), closes [#16965](https://github.com/ionic-team/ionic/issues/16965)
-* **button:** use correct border-radius on menu and back button ([#18501](https://github.com/ionic-team/ionic/issues/18501)) ([055e125](https://github.com/ionic-team/ionic/commit/055e125)), closes [#17624](https://github.com/ionic-team/ionic/issues/17624)
-* **button:** use correct size on a dynamic button in an item ([#18395](https://github.com/ionic-team/ionic/issues/18395)) ([a3e23fc](https://github.com/ionic-team/ionic/commit/a3e23fc)), closes [#18085](https://github.com/ionic-team/ionic/issues/18085)
-* **card:** remove white space from bottom of card ([#18328](https://github.com/ionic-team/ionic/issues/18328)) ([d53e7aa](https://github.com/ionic-team/ionic/commit/d53e7aa))
-* **content:** prevent ion-searchbar from receiving padding adjustment when keyboard is open ([#18008](https://github.com/ionic-team/ionic/issues/18008)) ([b2290a6](https://github.com/ionic-team/ionic/commit/b2290a6)), closes [#18007](https://github.com/ionic-team/ionic/issues/18007)
-* **datetime:** recalculate time columns on change ([#18380](https://github.com/ionic-team/ionic/issues/18380)) ([292b24a](https://github.com/ionic-team/ionic/commit/292b24a))
-* **item:** start align the content under stacked and floating labels ([#18379](https://github.com/ionic-team/ionic/issues/18379)) ([f0af707](https://github.com/ionic-team/ionic/commit/f0af707)), closes [#16375](https://github.com/ionic-team/ionic/issues/16375)
-* **item:** inherit overflow to allow better customization ([#18502](https://github.com/ionic-team/ionic/issues/18502)) ([8d2a47e](https://github.com/ionic-team/ionic/commit/8d2a47e)), closes [#17670](https://github.com/ionic-team/ionic/issues/17670)
-* **item:** use a step color if the activated background is not set ([#18450](https://github.com/ionic-team/ionic/issues/18450)) ([1899c13](https://github.com/ionic-team/ionic/commit/1899c13)), closes [#18449](https://github.com/ionic-team/ionic/issues/18449)
-* **item-sliding:** use the correct gesture direction and side for rtl ([#18366](https://github.com/ionic-team/ionic/issues/18366)) ([4545100](https://github.com/ionic-team/ionic/commit/4545100)), closes [#17012](https://github.com/ionic-team/ionic/issues/17012)
-* **label:** include the ion-text-wrap class styles for larger font ([#18374](https://github.com/ionic-team/ionic/issues/18374)) ([4bba540](https://github.com/ionic-team/ionic/commit/4bba540))
-* **platform:** prevent error with Platform.is on Android 4.4 ([#18387](https://github.com/ionic-team/ionic/issues/18387)) ([54bdb36](https://github.com/ionic-team/ionic/commit/54bdb36))
-* **react:** ensure element exists in controller before dismissing it ([0fd3e5d](https://github.com/ionic-team/ionic/commit/0fd3e5d))
-* **slides:** resolve issue where double tap to zoom was enabled by default ([10de1da](https://github.com/ionic-team/ionic/commit/10de1da)), closes [#18035](https://github.com/ionic-team/ionic/issues/18035)
-* **tabs:** allow selection on enter and spacebar press ([#18381](https://github.com/ionic-team/ionic/issues/18381)) ([11cde99](https://github.com/ionic-team/ionic/commit/11cde99)), closes [#18363](https://github.com/ionic-team/ionic/issues/18363)
-* **textarea:** inherit white-space for better customization ([#18508](https://github.com/ionic-team/ionic/issues/18508)) ([a583902](https://github.com/ionic-team/ionic/commit/a583902)), closes [#18495](https://github.com/ionic-team/ionic/issues/18495)
-* **virtual-scroll:** do not crash with an empty cell list ([#17799](https://github.com/ionic-team/ionic/issues/17799)) ([20c146e](https://github.com/ionic-team/ionic/commit/20c146e))
-
-
-### Features
-
-* **back-button:** add variables and support for focused and hover states ([#18451](https://github.com/ionic-team/ionic/issues/18451)) ([58672fb](https://github.com/ionic-team/ionic/commit/58672fb)), closes [#18465](https://github.com/ionic-team/ionic/issues/18465)
-* **button:** add variables for customizing hover state ([#18499](https://github.com/ionic-team/ionic/issues/18499)) ([5c5934b](https://github.com/ionic-team/ionic/commit/5c5934b)), closes [#17974](https://github.com/ionic-team/ionic/issues/17974)
-* **item-divider:** add inner padding CSS variables ([#18490](https://github.com/ionic-team/ionic/issues/18490)) ([35c143a](https://github.com/ionic-team/ionic/commit/35c143a)), closes [#18484](https://github.com/ionic-team/ionic/issues/18484)
-* **menu-button:** add variables for hover and focused states ([#18434](https://github.com/ionic-team/ionic/issues/18434)) ([5ba0aa9](https://github.com/ionic-team/ionic/commit/5ba0aa9)), closes [#18279](https://github.com/ionic-team/ionic/issues/18279)
-* **searchbar:** add cancel button options ([b959e0b](https://github.com/ionic-team/ionic/commit/b959e0b))
-* **toast:** allow html content ([#18423](https://github.com/ionic-team/ionic/issues/18423)) ([c8104a2](https://github.com/ionic-team/ionic/commit/c8104a2))
-
-
-
-## [4.4.2](https://github.com/ionic-team/ionic/compare/v4.4.1...v4.4.2) (2019-05-22)
-
-
-### Bug Fixes
-
-* **angular:** account for query params and fragments within a string when navigating ([#18356](https://github.com/ionic-team/ionic/issues/18356)) ([b79f68a](https://github.com/ionic-team/ionic/commit/b79f68a))
-
-
-
-## [4.4.1](https://github.com/ionic-team/ionic/compare/v4.4.0...v4.4.1) (2019-05-22)
-
-
-### Bug Fixes
-
-* **angular:** ensure active page is not removed from change detection ([#18299](https://github.com/ionic-team/ionic/issues/18299)) ([b8d4961](https://github.com/ionic-team/ionic/commit/b8d4961)), closes [#18293](https://github.com/ionic-team/ionic/issues/18293)
-* **angular:** preserve queryParams and fragment when going back ([#18298](https://github.com/ionic-team/ionic/issues/18298)) ([bdd5109](https://github.com/ionic-team/ionic/commit/bdd5109)), closes [#16744](https://github.com/ionic-team/ionic/issues/16744)
-* **buttons:** use theme/color toolbar colors for buttons ([#18191](https://github.com/ionic-team/ionic/issues/18191)) ([0511989](https://github.com/ionic-team/ionic/commit/0511989)), closes [#18184](https://github.com/ionic-team/ionic/issues/18184) [#17840](https://github.com/ionic-team/ionic/issues/17840)
-* **datetime:** update label direction in RTL ([#18340](https://github.com/ionic-team/ionic/issues/18340)) ([17345ef](https://github.com/ionic-team/ionic/commit/17345ef))
-* **fab:** position fab buttons properly in RTL ([#18325](https://github.com/ionic-team/ionic/issues/18325)) ([845def8](https://github.com/ionic-team/ionic/commit/845def8)), references [#17012](https://github.com/ionic-team/ionic/issues/17012)
-* **icon:** remove stroke and move fill to host element ([#18241](https://github.com/ionic-team/ionic/issues/18241)) ([394cf8d](https://github.com/ionic-team/ionic/commit/394cf8d)), closes [#16483](https://github.com/ionic-team/ionic/issues/16483)
-* **input:** keep entire input in view when scrolling with keyboard open ([#18253](https://github.com/ionic-team/ionic/issues/18253)) ([3cad778](https://github.com/ionic-team/ionic/commit/3cad778)), closes [#17457](https://github.com/ionic-team/ionic/issues/17457)
-* **label:** position floating/stacked labels properly in RTL ([#18315](https://github.com/ionic-team/ionic/issues/18315)) ([00a27dc](https://github.com/ionic-team/ionic/commit/00a27dc)), references [#17012](https://github.com/ionic-team/ionic/issues/17012)
-* **loading:** allow html content ([#18242](https://github.com/ionic-team/ionic/issues/18242)) ([a6cb5f2](https://github.com/ionic-team/ionic/commit/a6cb5f2)), closes [#18135](https://github.com/ionic-team/ionic/issues/18135)
-* **overlay:** hide scrollbars on non-scrollable content ([#16767](https://github.com/ionic-team/ionic/issues/16767)) ([875d563](https://github.com/ionic-team/ionic/commit/875d563)), closes [#14178](https://github.com/ionic-team/ionic/issues/14178)
-* **picker:** update the column positions in RTL ([#18339](https://github.com/ionic-team/ionic/issues/18339)) ([788a56c](https://github.com/ionic-team/ionic/commit/788a56c)), closes [#17012](https://github.com/ionic-team/ionic/issues/17012)
-* **range:** update border-radius on range pin for RTL ([#18321](https://github.com/ionic-team/ionic/issues/18321)) ([4855351](https://github.com/ionic-team/ionic/commit/4855351)), closes [#17012](https://github.com/ionic-team/ionic/issues/17012)
-* **searchbar:** position buttons properly in RTL ([#18325](https://github.com/ionic-team/ionic/issues/18325)) ([845def8](https://github.com/ionic-team/ionic/commit/845def8)), references [#17012](https://github.com/ionic-team/ionic/issues/17012)
-* **segment:** update segment border for RTL ([#18326](https://github.com/ionic-team/ionic/issues/18326)) ([805b225](https://github.com/ionic-team/ionic/commit/805b225)), closes [#17012](https://github.com/ionic-team/ionic/issues/17012)
-* **slides:** allow clicks to propagate to buttons ([#16728](https://github.com/ionic-team/ionic/issues/16728)) ([a8f9dfe](https://github.com/ionic-team/ionic/commit/a8f9dfe))
-* **tab-button:** apply background-focused when tabbing into tab button ([#17502](https://github.com/ionic-team/ionic/issues/17502)) ([d788a8e](https://github.com/ionic-team/ionic/commit/d788a8e)), closes [#17042](https://github.com/ionic-team/ionic/issues/17042)
-* **tabs:** position badge properly in RTL (only in Chrome) ([#18325](https://github.com/ionic-team/ionic/issues/18325)) ([845def8](https://github.com/ionic-team/ionic/commit/845def8)), references [#17012](https://github.com/ionic-team/ionic/issues/17012)
-* **tabs:** select the tab called by the select method after initialization ([#18300](https://github.com/ionic-team/ionic/issues/18300)) ([da38647](https://github.com/ionic-team/ionic/commit/da38647)), closes [#17957](https://github.com/ionic-team/ionic/issues/17957)
-* **toggle:** position toggle icon properly in RTL ([#18325](https://github.com/ionic-team/ionic/issues/18325)) ([845def8](https://github.com/ionic-team/ionic/commit/845def8)), references [#17012](https://github.com/ionic-team/ionic/issues/17012)
-* **toolbar:** update md toolbar button spacing and padding to match spec ([#17537](https://github.com/ionic-team/ionic/issues/17537)) ([fa87e35](https://github.com/ionic-team/ionic/commit/fa87e35)), closes [#16950](https://github.com/ionic-team/ionic/issues/16950) [#14444](https://github.com/ionic-team/ionic/issues/14444)
-
-
-
-# [4.4.0 Beryllium](https://github.com/ionic-team/ionic/compare/v4.3.1...v4.4.0) (2019-05-08)
-
-
-### Bug Fixes
-
-* **button:** apply round property to button sizes in iOS ([#18125](https://github.com/ionic-team/ionic/issues/18125)) ([ae0eccc](https://github.com/ionic-team/ionic/commit/ae0eccc)), closes [#18108](https://github.com/ionic-team/ionic/issues/18108)
-* **datetime:** default to current date when value is null ([#18105](https://github.com/ionic-team/ionic/issues/18105)) ([ca233b5](https://github.com/ionic-team/ionic/commit/ca233b5)), closes [#18099](https://github.com/ionic-team/ionic/issues/18099)
-* **input:** clear on edit from inside native input ([#17115](https://github.com/ionic-team/ionic/issues/17115)) ([85093d6](https://github.com/ionic-team/ionic/commit/85093d6)), closes [#17055](https://github.com/ionic-team/ionic/issues/17055)
-* **item:** use the global activated background for md ripple color ([#16752](https://github.com/ionic-team/ionic/issues/16752)) ([95945c0](https://github.com/ionic-team/ionic/commit/95945c0)), closes [#16585](https://github.com/ionic-team/ionic/issues/16585)
-* **label:** use primary color on focus for md input labels ([#18183](https://github.com/ionic-team/ionic/issues/18183)) ([ddb8ef8](https://github.com/ionic-team/ionic/commit/ddb8ef8)), closes [#15602](https://github.com/ionic-team/ionic/issues/15602)
-* **menu** add prefixed transform for side menu animation ([#18128](https://github.com/ionic-team/ionic/issues/18128)) ([2457a23](https://github.com/ionic-team/ionic/commit/2457a23)), closes [#17729](https://github.com/ionic-team/ionic/issues/17729)
-* **reorder-group:** remove required parameter for the complete method ([#18084](https://github.com/ionic-team/ionic/issues/18084)) ([bd96491](https://github.com/ionic-team/ionic/commit/bd96491)), closes [#16302](https://github.com/ionic-team/ionic/issues/16302)
-* **segment:** decrease icon size on ios and stretch segment buttons to fill height ([#17751](https://github.com/ionic-team/ionic/issues/17751)) ([0fa645b](https://github.com/ionic-team/ionic/commit/0fa645b)), closes [#17069](https://github.com/ionic-team/ionic/issues/17069)
-* **textarea:** reposition textarea when keyboard appears ([#18098](https://github.com/ionic-team/ionic/issues/18098)) ([3cdab10](https://github.com/ionic-team/ionic/commit/3cdab10)), closes [#17847](https://github.com/ionic-team/ionic/issues/17847)
-* **toast:** allow button-color CSS variable to be overridden ([#18133](https://github.com/ionic-team/ionic/issues/18133)) ([0c83fd3](https://github.com/ionic-team/ionic/commit/0c83fd3)), closes [#18127](https://github.com/ionic-team/ionic/issues/18127)
-
-
-### Features
-
-* **card:** add button functionality ([#17997](https://github.com/ionic-team/ionic/issues/17997)) ([669ec0d](https://github.com/ionic-team/ionic/commit/669ec0d)), closes [#17773](https://github.com/ionic-team/ionic/issues/17773)
-* **img:** add ionImgWillLoad event and emit ionImgDidLoad when image is loaded ([#18159](https://github.com/ionic-team/ionic/issues/18159)) ([38ffb98](https://github.com/ionic-team/ionic/commit/38ffb98)), closes [#17652](https://github.com/ionic-team/ionic/issues/17652) [#18161](https://github.com/ionic-team/ionic/issues/18161)
-* **item-sliding:** add open method ([#17964](https://github.com/ionic-team/ionic/issues/17964)) ([f912206](https://github.com/ionic-team/ionic/commit/f912206)), closes [#17899](https://github.com/ionic-team/ionic/issues/17899)
-* **menu-button:** add css variables for padding ([#18188](https://github.com/ionic-team/ionic/issues/18188)) ([ef98977](https://github.com/ionic-team/ionic/commit/ef98977)), closes [#18187](https://github.com/ionic-team/ionic/issues/18187)
-* **refresher:** add pullFactor property to control speed ([#16697](https://github.com/ionic-team/ionic/issues/16697)) ([9030dcc](https://github.com/ionic-team/ionic/commit/9030dcc)), closes [#15425](https://github.com/ionic-team/ionic/issues/15425)
-* **searchbar:** add disabled property ([#17935](https://github.com/ionic-team/ionic/issues/17935)) ([a5b9066](https://github.com/ionic-team/ionic/commit/a5b9066)), closes [#17921](https://github.com/ionic-team/ionic/issues/17921)
-* **textarea:** add option to expand textarea as value changes ([#16916](https://github.com/ionic-team/ionic/issues/16916)) ([cc8678a](https://github.com/ionic-team/ionic/commit/cc8678a))
-
-
-
-## [4.3.1](https://github.com/ionic-team/ionic/compare/v4.3.0...v4.3.1) (2019-04-26)
-
-
-### Bug Fixes
-
-* **angular:** support replaceUrl with angular <7.2 ([#18106](https://github.com/ionic-team/ionic/issues/18106)) ([eb3cbe4](https://github.com/ionic-team/ionic/commit/eb3cbe4))
-* **security:** sanitize components using innerHTML ([#18146](https://github.com/ionic-team/ionic/issues/18146)) ([b839e6f](https://github.com/ionic-team/ionic/commit/b839e6f))
-
-
-
-# [4.3.0 Lithium](https://github.com/ionic-team/ionic/compare/v4.2.0...v4.3.0) (2019-04-17)
-
-
-### Bug Fixes
-
-* **action-sheet:** default buttons to empty array ([9e63947](https://github.com/ionic-team/ionic/commit/9e63947))
-* **angular:** back button correctly goes back to proper tab ([#18005](https://github.com/ionic-team/ionic/issues/18005)) ([52e5a8d](https://github.com/ionic-team/ionic/commit/52e5a8d)), closes [#17278](https://github.com/ionic-team/ionic/issues/17278) [#15216](https://github.com/ionic-team/ionic/issues/15216)
-* **components:** add mode classes to components for use in shadow elements ([#17838](https://github.com/ionic-team/ionic/issues/17838)) ([e5c8c10](https://github.com/ionic-team/ionic/commit/e5c8c10)), closes [#17608](https://github.com/ionic-team/ionic/issues/17608)
-* **datetime:** date strings no longer revert to previous day ([#18018](https://github.com/ionic-team/ionic/issues/18018)) ([cc60b60](https://github.com/ionic-team/ionic/commit/cc60b60)), closes [#17977](https://github.com/ionic-team/ionic/issues/17977)
-* **input:** prevent input from losing focus when tapping clear button ([#18004](https://github.com/ionic-team/ionic/issues/18004)) ([29bb4fc](https://github.com/ionic-team/ionic/commit/29bb4fc)), closes [#18002](https://github.com/ionic-team/ionic/issues/18002)
-* **item:** use the correct input highlight for an inset line item ([#18052](https://github.com/ionic-team/ionic/issues/18052)) ([72be80c](https://github.com/ionic-team/ionic/commit/72be80c)), closes [#18051](https://github.com/ionic-team/ionic/issues/18051)
-* **item-sliding:** hide closed side options while dragging side options open ([#17986](https://github.com/ionic-team/ionic/issues/17986)) ([f13722c](https://github.com/ionic-team/ionic/commit/f13722c)), closes [#17822](https://github.com/ionic-team/ionic/issues/17822)
-* **slides:** allow zoom to work ([18b347b](https://github.com/ionic-team/ionic/commit/18b347b)), closes [#17981](https://github.com/ionic-team/ionic/issues/17981)
-* **slides:** expose interface to provide custom animations ([#17959](https://github.com/ionic-team/ionic/issues/17959)) ([4474974](https://github.com/ionic-team/ionic/commit/4474974)), closes [#16616](https://github.com/ionic-team/ionic/issues/16616)
-* **textarea:** float label when a value is changed async ([#18024](https://github.com/ionic-team/ionic/issues/18024)) ([494991e](https://github.com/ionic-team/ionic/commit/494991e)), closes [#17555](https://github.com/ionic-team/ionic/issues/17555) [#17559](https://github.com/ionic-team/ionic/issues/17559)
-* **textarea:** update label alignment for inputs and textareas ([#18042](https://github.com/ionic-team/ionic/issues/18042)) ([38ae362](https://github.com/ionic-team/ionic/commit/38ae362)), closes [#16187](https://github.com/ionic-team/ionic/issues/16187)
-* **vue:** use direction type from core ([#17901](https://github.com/ionic-team/ionic/issues/17901)) ([fa13173](https://github.com/ionic-team/ionic/commit/fa13173))
-
-
-### Features
-
-* **toast:** add header and additional custom toast buttons ([#17147](https://github.com/ionic-team/ionic/issues/17147)) ([6e1a8f1](https://github.com/ionic-team/ionic/commit/6e1a8f1)), closes [#16791](https://github.com/ionic-team/ionic/issues/16791) [#16237](https://github.com/ionic-team/ionic/issues/16237) [#17611](https://github.com/ionic-team/ionic/issues/17611)
-* **toast:** add variables to change position start/end of toast ([#17961](https://github.com/ionic-team/ionic/issues/17961)) ([07e739a](https://github.com/ionic-team/ionic/commit/07e739a)), closes [#17854](https://github.com/ionic-team/ionic/issues/17854)
-
-
-
-# [4.2.0 Helium](https://github.com/ionic-team/ionic/compare/v4.1.2...v4.2.0) (2019-04-03)
+# [4.2.0](https://github.com/ionic-team/ionic/compare/v4.1.2...v4.2.0) (2019-04-03)
 
 
 ### Bug Fixes

angular/BREAKING.md

@@ -182,14 +182,13 @@ These have been renamed to the following, and moved from the button element to t
 
 In addition, several sets of mutually exclusive boolean attributes have been combined into a single string attribute.
 
-The `small` and `large` attributes are now combined under the `size` attribute. The `clear`, `outline`, and `solid` attributes have been combined under `fill`. The `full` and `block` attributes have been combined under `expand`. And, lastly, the `round` attribute is now used under `shape`.
+The `small` and `large` attributes are now combined under the `size` attribute. The `clear`, `outline`, and `solid` attributes have been combined under `fill`. And, lastly, the `full` and `block` attributes have been combined under `expand`.
 
 | Old Property                | New Property | Property Behavior           |
 | --------------------------- | ------------ | --------------------------- |
 | `small`, `large`            | `size`       | Sets the button size.       |
 | `clear`, `outline`, `solid` | `fill`       | Sets the button fill style. |
 | `full`, `block`             | `expand`     | Sets the button width.      |
-| `round`                     | `shape`      | Sets the button shape.      |
 
 
 **Old Usage Example:**
@@ -226,10 +225,6 @@ The `small` and `large` attributes are now combined under the `size` attribute.
 <ion-button full>
   Full-width Button
 </ion-button>
-
-<ion-button round>
-  Round Button
-</ion-button>
 ```
 
 **New Usage Example:**
@@ -256,10 +251,6 @@ The `small` and `large` attributes are now combined under the `size` attribute.
 <ion-button expand="full">
   Full-width Button
 </ion-button>
-
-<ion-button shape="round">
-  Round Button
-</ion-button>
 ```
 
 
@@ -783,26 +774,6 @@ The option component should now be written as an `ion-item-option`. Previously i
 
 The `getSlidingPercent` method has been renamed to `getSlidingRatio` since the function is returning a ratio of the open amount of the item compared to the width of the options.
 
-### Arguments Changed
-
-The `ionDrag` event no longer gets the sliding item as an argument. It now takes an event with a property `details` which contains two properties `amount` and `ratio` reflecting the absolute and ratio values of the sliding action respectively.
-
-**Old Usage Example:**
-
-```typescript
-dragged(item: ItemSliding) {
-  console.log(item.getSlidingPercent());
-  console.log(item.getOpenAmount());
-}
-```
-
-**New Usage Example:**
-```typescript
-dragged(ev: { details: { amount: number, ratio: number } }) {
-  console.log(ev.details.ratio);
-  console.log(ev.details.amount);
-}
-```
 
 ## Label
 
@@ -1094,11 +1065,11 @@ async openLoading() {
   let loading = this.loadingCtrl.create({
     content: 'Loading...'
   });
-
+  
   await loading.present();
-
+  
   const { role, data } = await loading.onDidDismiss();
-
+    
   console.log('Loading dismissed!');
 }
 ```

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "4.6.2",
+  "version": "4.2.1",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -45,7 +45,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "4.6.2",
+    "@ionic/core": "4.2.1",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {
@@ -73,12 +73,12 @@
     "@angular/platform-browser": "^7.2.1",
     "@angular/platform-browser-dynamic": "^7.2.1",
     "@angular/router": "^7.2.1",
-    "@types/node": "~12.0.12",
+    "@types/node": "~10.12.0",
     "fs-extra": "^7.0.0",
     "glob": "^7.1.3",
     "rollup": "^1.1.2",
     "rollup-plugin-node-resolve": "^4.0.0",
-    "rxjs": "^6.5.2",
+    "rxjs": "^6.2.0",
     "tsickle": "^0.34.0",
     "tslint": "^5.12.1",
     "tslint-ionic-rules": "0.0.21",

angular/scripts/rollup.config.js

@@ -7,6 +7,10 @@ export default {
     format: 'es'
   },
   external: (id) => {
+    // inline @ionic/core deps
+    if (id === '@ionic/core') {
+      return false;
+    }
     // anything else is external
     // Windows: C:\xxxxxx\xxx
     const colonPosition = 1;

angular/src/app-initialize.ts

@@ -1,42 +1,55 @@
-import { NgZone } from '@angular/core';
-import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
+import { defineCustomElements } from '@ionic/core/loader';
 
 import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
 
-export function appInitialize(config: Config, doc: Document, zone: NgZone) {
+export function appInitialize(config: Config, doc: Document) {
   return (): any => {
     const win: IonicWindow | undefined = doc.defaultView as any;
     if (win) {
       const Ionic = win.Ionic = win.Ionic || {};
 
-      Ionic.config = {
-        ...config,
-        _zoneGate: (h: any) => zone.run(h)
+      Ionic.config = config;
+      Ionic.asyncQueue = false;
+
+      Ionic.ael = (elm, eventName, cb, opts) => {
+        if (elm.__zone_symbol__addEventListener && skipZone(eventName)) {
+          elm.__zone_symbol__addEventListener(eventName, cb, opts);
+        } else {
+          elm.addEventListener(eventName, cb, opts);
+        }
       };
 
-      const aelFn = '__zone_symbol__addEventListener' in (document.body as any)
-        ? '__zone_symbol__addEventListener'
-        : 'addEventListener';
+      Ionic.rel = (elm, eventName, cb, opts) => {
+        if (elm.__zone_symbol__removeEventListener && skipZone(eventName)) {
+          elm.__zone_symbol__removeEventListener(eventName, cb, opts);
+        } else {
+          elm.removeEventListener(eventName, cb, opts);
+        }
+      };
 
-      return applyPolyfills().then(() => {
-        return defineCustomElements(win, {
-          exclude: ['ion-tabs', 'ion-tab'],
-          syncQueue: true,
-          jmp: (h: any) => zone.runOutsideAngular(h),
-          raf: h => {
-            return zone.runOutsideAngular(() => {
-              return (win.__zone_symbol__requestAnimationFrame) ? win.__zone_symbol__requestAnimationFrame(h) : requestAnimationFrame(h);
-            });
-          },
-          ael(elm, eventName, cb, opts) {
-            (elm as any)[aelFn](eventName, cb, opts);
-          },
-          rel(elm, eventName, cb, opts) {
-            elm.removeEventListener(eventName, cb, opts);
-          }
-        });
+      return defineCustomElements(win, {
+        exclude: ['ion-tabs', 'ion-tab']
       });
     }
   };
 }
+
+const SKIP_ZONE = [
+  'scroll',
+  'resize',
+
+  'touchstart',
+  'touchmove',
+  'touchend',
+
+  'mousedown',
+  'mousemove',
+  'mouseup',
+
+  'ionStyle',
+];
+
+function skipZone(eventName: string) {
+  return SKIP_ZONE.indexOf(eventName) >= 0;
+}

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -42,14 +42,16 @@ export class ValueAccessor implements ControlValueAccessor {
 }
 
 export function setIonicClasses(element: ElementRef) {
-  const input = element.nativeElement as HTMLElement;
-  const classes = getClasses(input);
-  setClasses(input, classes);
+  requestAnimationFrame(() => {
+    const input = element.nativeElement as HTMLElement;
+    const classes = getClasses(input);
+    setClasses(input, classes);
 
-  const item = input.closest('ion-item');
-  if (item) {
-    setClasses(item, classes);
-  }
+    const item = input.closest('ion-item');
+    if (item) {
+      setClasses(item, classes);
+    }
+  });
 }
 
 function getClasses(element: HTMLElement) {

angular/src/directives/navigation/ion-router-outlet.ts

@@ -1,5 +1,4 @@
-import { Location } from '@angular/common';
-import { Attribute, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
+import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, ChildrenOutletContexts, OutletContext, PRIMARY_OUTLET, Router } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
@@ -57,9 +56,9 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     private resolver: ComponentFactoryResolver,
     @Attribute('name') name: string,
     @Optional() @Attribute('tabs') tabs: string,
+    private changeDetector: ChangeDetectorRef,
     private config: Config,
     private navCtrl: NavController,
-    commonLocation: Location,
     elementRef: ElementRef,
     router: Router,
     zone: NgZone,
@@ -69,7 +68,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     this.nativeEl = elementRef.nativeElement;
     this.name = name || PRIMARY_OUTLET;
     this.tabsPrefix = tabs === 'true' ? getUrl(router, activatedRoute) : undefined;
-    this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone, commonLocation);
+    this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone);
     parentContexts.onChildOutletCreated(this.name, this as any);
   }
 
@@ -93,7 +92,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     if ((this.nativeEl as any).componentOnReady) {
       this.nativeEl.componentOnReady().then(() => {
         if (this._swipeGesture === undefined) {
-          this.swipeGesture = this.config.getBoolean('swipeBackEnabled', (this.nativeEl as any).mode === 'ios');
+          this.swipeGesture = this.config.getBoolean('swipeBackEnabled', this.nativeEl.mode === 'ios');
         }
       });
     }
@@ -142,20 +141,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     if (this.activated) {
       if (this.activatedView) {
         this.activatedView.savedData = new Map(this.getContext()!.children['contexts']);
-
-        /**
-         * Ensure we are saving the NavigationExtras
-         * data otherwise it will be lost
-         */
-        this.activatedView.savedExtras = {};
-        const context = this.getContext()!;
-
-        if (context.route) {
-          const contextSnapshot = context.route.snapshot;
-
-          this.activatedView.savedExtras.queryParams = contextSnapshot.queryParams;
-          this.activatedView.savedExtras.fragment = contextSnapshot.fragment;
-        }
       }
       const c = this.component;
       this.activatedView = null;
@@ -205,11 +190,12 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       // Calling `markForCheck` to make sure we will run the change detection when the
       // `RouterOutlet` is inside a `ChangeDetectionStrategy.OnPush` component.
       enteringView = this.stackCtrl.createView(this.activated, activatedRoute);
-      enteringView.ref.changeDetectorRef.detectChanges();
 
       // Store references to the proxy by component
       this.proxyMap.set(cmpRef.instance, activatedRouteProxy);
       this.currentActivatedRoute$.next({ component: cmpRef.instance, activatedRoute });
+
+      this.changeDetector.markForCheck();
     }
 
     this.activatedView = enteringView;

angular/src/directives/navigation/stack-controller.ts

@@ -1,4 +1,3 @@
-import { Location } from '@angular/common';
 import { ComponentRef, NgZone } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterDirection } from '@ionic/core';
@@ -23,7 +22,6 @@ export class StackController {
     private router: Router,
     private navCtrl: NavController,
     private zone: NgZone,
-    private location: Location
   ) {
     this.tabsPrefix = tabsPrefix !== undefined ? toSegments(tabsPrefix) : undefined;
   }
@@ -44,7 +42,11 @@ export class StackController {
 
   getExistingView(activatedRoute: ActivatedRoute): RouteView | undefined {
     const activatedUrlKey = getUrl(this.router, activatedRoute);
-    return this.views.find(vw => vw.url === activatedUrlKey);
+    const view = this.views.find(vw => vw.url === activatedUrlKey);
+    if (view) {
+      view.ref.changeDetectorRef.reattach();
+    }
+    return view;
   }
 
   setActive(enteringView: RouteView): Promise<StackEvent> {
@@ -91,15 +93,15 @@ export class StackController {
     }
 
     const views = this.insertView(enteringView, direction);
-    return this.wait(() => {
-      return this.transition(enteringView, leavingView, animation, this.canGoBack(1), false)
-        .then(() => cleanupAsync(enteringView, views, viewsSnapshot, this.location))
-        .then(() => ({
-          enteringView,
-          direction,
-          animation,
-          tabSwitch
-        }));
+    return this.wait(async () => {
+      await this.transition(enteringView, leavingView, animation, this.canGoBack(1), false);
+      await cleanupAsync(enteringView, views, viewsSnapshot);
+      return {
+        enteringView,
+        direction,
+        animation,
+        tabSwitch
+      };
     });
   }
 
@@ -114,32 +116,17 @@ export class StackController {
         return Promise.resolve(false);
       }
       const view = views[views.length - deep - 1];
-      let url = view.url;
-
-      const viewSavedData = view.savedData;
-      if (viewSavedData) {
-        const primaryOutlet = viewSavedData.get('primary');
-        if (
-          primaryOutlet &&
-          primaryOutlet.route &&
-          primaryOutlet.route._routerState &&
-          primaryOutlet.route._routerState.snapshot &&
-          primaryOutlet.route._routerState.snapshot.url
-        ) {
-          url = primaryOutlet.route._routerState.snapshot.url;
-        }
-      }
-
-      return this.navCtrl.navigateBack(url, view.savedExtras).then(() => true);
+      return this.navCtrl.navigateBack(view.url).then(() => true);
     });
   }
 
-  startBackTransition() {
+  async startBackTransition() {
     const leavingView = this.activeView;
     if (leavingView) {
       const views = this.getStack(leavingView.stackId);
       const enteringView = views[views.length - 2];
-      return this.wait(() => {
+      enteringView.ref.changeDetectorRef.reattach();
+      await this.wait(() => {
         return this.transition(
           enteringView, // entering view
           leavingView, // leaving view
@@ -149,7 +136,6 @@ export class StackController {
         );
       });
     }
-    return Promise.resolve();
   }
 
   endBackTransition(shouldComplete: boolean) {
@@ -185,7 +171,7 @@ export class StackController {
     return this.views.slice();
   }
 
-  private transition(
+  private async transition(
     enteringView: RouteView | undefined,
     leavingView: RouteView | undefined,
     direction: 'forward' | 'back' | undefined,
@@ -194,16 +180,8 @@ export class StackController {
   ) {
     if (this.skipTransition) {
       this.skipTransition = false;
-      return Promise.resolve(false);
+      return;
     }
-    if (enteringView) {
-      enteringView.ref.changeDetectorRef.reattach();
-    }
-    // TODO: disconnect leaving page from change detection to
-    // reduce jank during the page transition
-    // if (leavingView) {
-    //   leavingView.ref.changeDetectorRef.detach();
-    // }
     const enteringEl = enteringView ? enteringView.element : undefined;
     const leavingEl = leavingView ? leavingView.element : undefined;
     const containerEl = this.containerEl;
@@ -213,15 +191,15 @@ export class StackController {
         containerEl.appendChild(enteringEl);
       }
 
-      return this.zone.runOutsideAngular(() => containerEl.commit(enteringEl, leavingEl, {
+      await containerEl.componentOnReady();
+      await containerEl.commit(enteringEl, leavingEl, {
         deepWait: true,
         duration: direction === undefined ? 0 : undefined,
         direction,
         showGoBack,
         progressAnimation
-      }));
+      });
     }
-    return Promise.resolve(false);
   }
 
   private async wait<T>(task: () => Promise<T>): Promise<T> {
@@ -234,34 +212,22 @@ export class StackController {
   }
 }
 
-function cleanupAsync(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) {
+function cleanupAsync(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[]) {
   return new Promise(resolve => {
     requestAnimationFrame(() => {
-      cleanup(activeRoute, views, viewsSnapshot, location);
+      cleanup(activeRoute, views, viewsSnapshot);
       resolve();
     });
   });
 }
 
-function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) {
+function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[]) {
   viewsSnapshot
     .filter(view => !views.includes(view))
     .forEach(destroyView);
 
   views.forEach(view => {
-    /**
-     * In the event that a user navigated multiple
-     * times in rapid succession, we want to make sure
-     * we don't pre-emptively detach a view while
-     * it is in mid-transition.
-     *
-     * In this instance we also do not care about query
-     * params or fragments as it will be the same view regardless
-     */
-    const locationWithoutParams = location.path().split('?')[0];
-    const locationWithoutFragment = locationWithoutParams.split('#')[0];
-
-    if (view !== activeRoute && view.url !== locationWithoutFragment) {
+    if (view !== activeRoute) {
       const element = view.element;
       element.setAttribute('aria-hidden', 'true');
       element.classList.add('ion-page-hidden');

angular/src/directives/navigation/stack-utils.ts

@@ -1,5 +1,5 @@
 import { ComponentRef } from '@angular/core';
-import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { NavDirection, RouterDirection } from '@ionic/core';
 
 export function insertView(views: RouteView[], view: RouteView, direction: RouterDirection) {
@@ -94,6 +94,5 @@ export interface RouteView {
   element: HTMLElement;
   ref: ComponentRef<any>;
   savedData?: any;
-  savedExtras?: NavigationExtras;
   unlistenEvents: () => void;
 }

angular/src/directives/proxies-utils.ts

@@ -6,9 +6,7 @@ export function proxyInputs(Cmp: any, inputs: string[]) {
   inputs.forEach(item => {
     Object.defineProperty(Prototype, item, {
       get() { return this.el[item]; },
-      set(val: any) {
-        this.z.runOutsideAngular(() => this.el[item] = val);
-      },
+      set(val: any) { this.el[item] = val; },
     });
   });
 }
@@ -18,7 +16,7 @@ export function proxyMethods(Cmp: any, methods: string[]) {
   methods.forEach(methodName => {
     Prototype[methodName] = function() {
       const args = arguments;
-      return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
+      return this.el.componentOnReady().then((el: any) => el[methodName].apply(el, args));
     };
   });
 }

angular/src/directives/virtual-scroll/virtual-scroll.ts

@@ -128,7 +128,7 @@ export class IonVirtualScroll {
   @ContentChild(VirtualFooter) ftrTmp!: VirtualFooter;
 
   constructor(
-    private z: NgZone,
+    private zone: NgZone,
     private iterableDiffers: IterableDiffers,
     elementRef: ElementRef,
   ) {
@@ -162,7 +162,7 @@ export class IonVirtualScroll {
   }
 
   private nodeRender(el: HTMLElement | null, cell: Cell, index: number): HTMLElement {
-    return this.z.run(() => {
+    return this.zone.run(() => {
       let node: EmbeddedViewRef<VirtualContext>;
       if (!el) {
         node = this.itmTmp.viewContainer.createEmbeddedView(

angular/src/ionic-module.ts

@@ -1,5 +1,5 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { APP_INITIALIZER, ModuleWithProviders, NgModule, NgZone } from '@angular/core';
+import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { IonicConfig } from '@ionic/core';
 
 import { appInitialize } from './app-initialize';
@@ -142,8 +142,7 @@ export class IonicModule {
           multi: true,
           deps: [
             ConfigToken,
-            DOCUMENT,
-            NgZone
+            DOCUMENT
           ]
         }
       ]

angular/src/providers/action-sheet-controller.ts

@@ -1,5 +1,6 @@
-import { Injectable } from '@angular/core';
-import { ActionSheetOptions, actionSheetController } from '@ionic/core';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { ActionSheetOptions } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -7,7 +8,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class ActionSheetController extends OverlayBaseController<ActionSheetOptions, HTMLIonActionSheetElement> {
-  constructor() {
-    super(actionSheetController);
+  constructor(@Inject(DOCUMENT) doc: any) {
+    super('ion-action-sheet-controller', doc);
   }
 }

angular/src/providers/alert-controller.ts

@@ -1,5 +1,6 @@
-import { Injectable } from '@angular/core';
-import { AlertOptions, alertController } from '@ionic/core';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { AlertOptions } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -7,7 +8,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class AlertController extends OverlayBaseController<AlertOptions, HTMLIonAlertElement> {
-  constructor() {
-    super(alertController);
+  constructor(@Inject(DOCUMENT) doc: any) {
+    super('ion-alert-controller', doc);
   }
 }

angular/src/providers/angular-delegate.ts

@@ -114,14 +114,20 @@ const LIFECYCLES = [
 ];
 
 export function bindLifecycleEvents(instance: any, element: HTMLElement) {
-  const unregisters = LIFECYCLES
-    .filter(eventName => typeof instance[eventName] === 'function')
-    .map(eventName => {
-      const handler = (ev: any) => instance[eventName](ev.detail);
-      element.addEventListener(eventName, handler);
-      return () => element.removeEventListener(eventName, handler);
-    });
-  return () => unregisters.forEach(fn => fn());
+  const unregisters = LIFECYCLES.map(eventName => {
+    const handler = (ev: any) => {
+      if (typeof instance[eventName] === 'function') {
+        instance[eventName](ev.detail);
+      }
+    };
+    element.addEventListener(eventName, handler);
+    return () => {
+      element.removeEventListener(eventName, handler);
+    };
+  });
+  return () => {
+    unregisters.forEach(fn => fn());
+  };
 }
 
 const NavParamsToken = new InjectionToken<any>('NavParamsToken');

angular/src/providers/loading-controller.ts

@@ -1,5 +1,6 @@
-import { Injectable } from '@angular/core';
-import { LoadingOptions, loadingController } from '@ionic/core';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { LoadingOptions } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -7,7 +8,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class LoadingController extends OverlayBaseController<LoadingOptions, HTMLIonLoadingElement> {
-  constructor() {
-    super(loadingController);
+  constructor(@Inject(DOCUMENT) doc: any) {
+    super('ion-loading-controller', doc);
   }
 }

angular/src/providers/modal-controller.ts

@@ -1,5 +1,6 @@
-import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
-import { ModalOptions, modalController } from '@ionic/core';
+import { DOCUMENT } from '@angular/common';
+import { ComponentFactoryResolver, Inject, Injectable, Injector } from '@angular/core';
+import { ModalOptions } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -12,8 +13,9 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
     private angularDelegate: AngularDelegate,
     private resolver: ComponentFactoryResolver,
     private injector: Injector,
+    @Inject(DOCUMENT) doc: any
   ) {
-    super(modalController);
+    super('ion-modal-controller', doc);
   }
 
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {

angular/src/providers/nav-controller.ts

@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { Injectable, Optional } from '@angular/core';
-import { NavigationExtras, NavigationStart, Router, UrlSerializer, UrlTree } from '@angular/router';
+import { NavigationExtras, NavigationStart, Router, UrlTree } from '@angular/router';
 import { NavDirection, RouterDirection } from '@ionic/core';
 
 import { IonRouterOutlet } from '../directives/navigation/ion-router-outlet';
@@ -29,7 +29,6 @@ export class NavController {
   constructor(
     platform: Platform,
     private location: Location,
-    private serializer: UrlSerializer,
     @Optional() private router?: Router,
   ) {
     // Subscribe to router events to detect direction
@@ -185,29 +184,7 @@ export class NavController {
     if (Array.isArray(url)) {
       return this.router!.navigate(url, options);
     } else {
-
-      /**
-       * navigateByUrl ignores any properties that
-       * would change the url, so things like queryParams
-       * would be ignored unless we create a url tree
-       * More Info: https://github.com/angular/angular/issues/18798
-       */
-      const urlTree = this.serializer.parse(url.toString());
-
-      if (options.queryParams !== undefined) {
-        urlTree.queryParams = { ...options.queryParams };
-      }
-
-      if (options.fragment !== undefined) {
-        urlTree.fragment = options.fragment;
-      }
-
-      /**
-       * `navigateByUrl` will still apply `NavigationExtras` properties
-       * that do not modify the url, such as `replaceUrl` which is why
-       * `options` is passed in here.
-       */
-      return this.router!.navigateByUrl(urlTree, options);
+      return this.router!.navigateByUrl(url, options);
     }
   }
 }

angular/src/providers/picker-controller.ts

@@ -1,5 +1,6 @@
-import { Injectable } from '@angular/core';
-import { PickerOptions, pickerController } from '@ionic/core';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { PickerOptions } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -7,7 +8,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class PickerController extends OverlayBaseController<PickerOptions, HTMLIonPickerElement> {
-  constructor() {
-    super(pickerController);
+  constructor(@Inject(DOCUMENT) doc: any) {
+    super('ion-picker-controller', doc);
   }
 }

angular/src/providers/popover-controller.ts

@@ -1,5 +1,6 @@
-import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
-import { PopoverOptions, popoverController } from '@ionic/core';
+import { DOCUMENT } from '@angular/common';
+import { ComponentFactoryResolver, Inject, Injectable, Injector } from '@angular/core';
+import { PopoverOptions } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -12,8 +13,9 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
     private angularDelegate: AngularDelegate,
     private resolver: ComponentFactoryResolver,
     private injector: Injector,
+    @Inject(DOCUMENT) doc: any
   ) {
-    super(popoverController);
+    super('ion-popover-controller', doc);
   }
 
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {

angular/src/providers/toast-controller.ts

@@ -1,5 +1,6 @@
-import { Injectable } from '@angular/core';
-import { ToastOptions, toastController } from '@ionic/core';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { ToastOptions } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -7,7 +8,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class ToastController extends OverlayBaseController<ToastOptions, HTMLIonToastElement> {
-  constructor() {
-    super(toastController);
+  constructor(@Inject(DOCUMENT) doc: any) {
+    super('ion-toast-controller', doc);
   }
 }

angular/src/types/interfaces.ts

@@ -1,15 +1,13 @@
 
 export interface IonicGlobal {
   config?: any;
+  ael?: (elm: any, eventName: string, cb: (ev: Event) => void, opts: any) => void;
+  raf?: (ts: number) => void;
+  rel?: (elm: any, eventName: string, cb: (ev: Event) => void, opts: any) => void;
   asyncQueue?: boolean;
 }
 
 export interface IonicWindow extends Window {
   Ionic: IonicGlobal;
-  __zone_symbol__requestAnimationFrame?: (ts: FrameRequestCallback) => number;
-}
-
-export interface HTMLStencilElement extends HTMLElement {
-  componentOnReady(): Promise<this>;
-  forceUpdate(): void;
+  __zone_symbol__requestAnimationFrame: (ts: number) => void;
 }

angular/src/util/overlay.ts

@@ -1,32 +1,26 @@
+import { proxyMethod } from './util';
 
-interface ControllerShape<Opts, HTMLElm> {
-  create(options: Opts): Promise<HTMLElm>;
-  dismiss(data?: any, role?: string, id?: string): Promise<boolean>;
-  getTop(): Promise<HTMLElm | undefined>;
-}
-
-export class OverlayBaseController<Opts, Overlay> implements ControllerShape<Opts, Overlay> {
-  constructor(private ctrl: ControllerShape<Opts, Overlay>) {}
+export class OverlayBaseController<Opts, Overlay> {
+  constructor(private ctrl: string, private doc: Document) {}
 
   /**
    * Creates a new overlay
    */
-  create(opts?: Opts) {
-    // TODO: next major release opts is not optional
-    return this.ctrl.create((opts || {}) as any);
+  create(opts?: Opts): Promise<Overlay> {
+    return proxyMethod(this.ctrl, this.doc, 'create', opts);
   }
 
   /**
    * When `id` is not provided, it dismisses the top overlay.
    */
-  dismiss(data?: any, role?: string, id?: string) {
-    return this.ctrl.dismiss(data, role, id);
+  dismiss(data?: any, role?: string, id?: string): Promise<void> {
+    return proxyMethod(this.ctrl, this.doc, 'dismiss', data, role, id);
   }
 
   /**
    * Returns the top overlay.
    */
-  getTop() {
-    return this.ctrl.getTop();
+  getTop(): Promise<Overlay | undefined> {
+    return proxyMethod(this.ctrl, this.doc, 'getTop');
   }
 }

angular/src/util/util.ts

@@ -1,4 +1,3 @@
-import { HTMLStencilElement } from '../types/interfaces';
 
 export function proxyMethod(ctrlName: string, doc: Document, methodName: string, ...args: any[]) {
   const controller = ensureElementInBody(ctrlName, doc);

angular/test/test-app/angular.json

@@ -20,16 +20,7 @@
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              {
-                "glob": "**/*",
-                "input": "src/assets",
-                "output": "assets"
-              },
-              {
-                "glob": "**/*.svg",
-                "input": "node_modules/ionicons/dist/ionicons/svg",
-                "output": "./svg"
-              }
+              "src/assets"
             ],
             "styles": [
               "src/styles.css"

angular/test/test-app/e2e/protractor.conf.js

@@ -10,7 +10,7 @@ exports.config = {
   ],
   capabilities: {
     browserName: 'chrome',
-
+  
     chromeOptions: {
        args: [ "--headless", "--disable-gpu", "--window-size=400,1000", "--start-maximized" ]
      }

angular/test/test-app/e2e/src/form.e2e-spec.ts

@@ -4,13 +4,12 @@ import { handleErrorMessages, setProperty, getText, waitTime } from './utils';
 describe('form', () => {
 
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   describe('change', () => {
     beforeEach(async () => {
       await browser.get('/form');
-      await waitTime(30);
     });
 
     it('should have default values', async () => {
@@ -82,7 +81,6 @@ describe('form', () => {
   describe('blur', () => {
     beforeEach(async () => {
       await browser.get('/form#blur');
-      await waitTime(30);
     });
 
     it('ion-toggle should change only after blur', async () => {

angular/test/test-app/e2e/src/inputs.e2e-spec.ts

@@ -1,14 +1,13 @@
 import { browser, element, by } from 'protractor';
-import { getProperty, setProperty, handleErrorMessages, waitTime } from './utils';
+import { getProperty, setProperty, handleErrorMessages } from './utils';
 
 describe('inputs', () => {
 
   beforeEach(async () => {
     await browser.get('/inputs');
-    await waitTime(30);
   });
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should have default value', async () => {

angular/test/test-app/e2e/src/modal.e2e-spec.ts

@@ -5,10 +5,9 @@ describe('modals', () => {
 
   beforeEach(async () => {
     await browser.get('/modals');
-    await waitTime(30);
   });
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should open standalone modal and close', async () => {

angular/test/test-app/e2e/src/navigation.e2e-spec.ts

@@ -4,7 +4,7 @@ import { handleErrorMessages, waitTime, testStack } from './utils';
 describe('navigation', () => {
 
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should navigate correctly', async () => {

angular/test/test-app/e2e/src/nested-outlet.e2e-spec.ts

@@ -4,7 +4,7 @@ import { waitTime, handleErrorMessages, goBack } from './utils';
 describe('nested-outlet', () => {
 
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should navigate correctly', async () => {

angular/test/test-app/e2e/src/providers.e2e-spec.ts

@@ -4,7 +4,7 @@ import { handleErrorMessages, waitTime } from './utils';
 describe('providers', () => {
 
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should load all providers', async () => {

angular/test/test-app/e2e/src/router-link.e2e-spec.ts

@@ -1,59 +1,13 @@
-import { browser, element, by, protractor } from 'protractor';
+import { browser, element, by } from 'protractor';
 import { waitTime, testStack, testLifeCycle, handleErrorMessages } from './utils';
 
-const EC = protractor.ExpectedConditions;
-
-describe('router-link params and fragments', () => {
-  const queryParam = 'A&=#Y';
-  const fragment = 'myDiv1';
-  const id = 'MyPageID==';
-
-  afterEach(() => {
-    return handleErrorMessages();
-  });
-
-  it('should go to a page with properly encoded values', async () => {
-    await browser.get('/router-link?ionic:_testing=true');
-    await element(by.css('#queryParamsFragment')).click();
-
-    const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
-
-    browser.wait(EC.urlContains(expectedRoute), 5000);
-  });
-
-  it('should return to a page with preserved query param and fragment', async () => {
-    await browser.get('/router-link?ionic:_testing=true');
-    await element(by.css('#queryParamsFragment')).click();
-    await waitTime(200);
-    await element(by.css('#goToPage3')).click();
-
-    browser.wait(EC.urlContains('router-link-page3'), 5000);
-    await waitTime(200);
-
-    await element(by.css('#goBackFromPage3')).click();
-
-    const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
-    browser.wait(EC.urlContains(expectedRoute), 5000);
-  });
-
-  it('should preserve query param and fragment with defaultHref string', async () => {
-    await browser.get('/router-link-page3?ionic:_testing=true');
-
-    await element(by.css('#goBackFromPage3')).click();
-
-    const expectedRoute = '?token=ABC#fragment';
-    browser.wait(EC.urlContains(expectedRoute), 5000);
-  });
-});
-
 describe('router-link', () => {
 
   beforeEach(async () => {
     await browser.get('/router-link');
-    await waitTime(30);
   });
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
 
@@ -123,6 +77,7 @@ describe('router-link', () => {
 
     it('should go back with ion-button[routerLink][routerDirection=back]', async () => {
       await element(by.css('#routerLink-back')).click();
+      await testBack();
     });
 
     it('should go back with a[routerLink][routerDirection=back]', async () => {
@@ -138,7 +93,7 @@ describe('router-link', () => {
 });
 
 async function testForward() {
-  await waitTime(2500);
+  await waitTime(500);
   await testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
   await testLifeCycle('app-router-link', {
     ionViewWillEnter: 1,
@@ -152,6 +107,7 @@ async function testForward() {
     ionViewWillLeave: 0,
     ionViewDidLeave: 0,
   });
+
 }
 
 async function testRoot() {
@@ -163,15 +119,6 @@ async function testRoot() {
     ionViewWillLeave: 0,
     ionViewDidLeave: 0,
   });
-  await browser.navigate().back();
-  await waitTime(100);
-  await testStack('ion-router-outlet', ['app-router-link']);
-  await testLifeCycle('app-router-link', {
-    ionViewWillEnter: 1,
-    ionViewDidEnter: 1,
-    ionViewWillLeave: 0,
-    ionViewDidLeave: 0,
-  });
 }
 
 async function testBack() {

angular/test/test-app/e2e/src/slides.e2e-spec.ts

@@ -5,10 +5,9 @@ describe('slides', () => {
 
   beforeEach(async () => {
     await browser.get('/slides');
-    await waitTime(30);
   });
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should change index on slide change', async () => {

angular/test/test-app/e2e/src/tabs.e2e-spec.ts

@@ -3,12 +3,11 @@ import { waitTime, testStack, handleErrorMessages } from './utils';
 
 describe('tabs', () => {
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
   describe('entry url - /tabs', () => {
     beforeEach(async () => {
       await browser.get('/tabs');
-      await waitTime(30);
     });
 
     it('should redirect and load tab-account', async () => {
@@ -100,7 +99,6 @@ describe('tabs', () => {
   describe('entry url - /tabs/account/nested/12', () => {
     beforeEach(async () => {
       await browser.get('/tabs/account/nested/12');
-      await waitTime(30);
     });
 
     it('should only display the back-button when there is a page in the stack', async () => {
@@ -120,7 +118,6 @@ describe('tabs', () => {
   describe('entry url - /tabs/lazy', () => {
     beforeEach(async () => {
       await browser.get('/tabs/lazy');
-      await waitTime(30);
     });
 
     it('should not display the back-button if coming from a different stack', async () => {
@@ -133,27 +130,6 @@ describe('tabs', () => {
       expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
     });
   });
-
-  describe('enter url - /tabs/contact/one', () => {
-    beforeEach(async () => {
-      await browser.get('/tabs/contact/one');
-      await waitTime(30);
-    });
-
-    it('should return to correct tab after going to page in different outlet', async () => {
-      const tab = await getSelectedTab();
-      await tab.$('#goto-nested-page1').click();
-
-      await waitTime(600);
-      await testStack('app-nested-outlet ion-router-outlet', ['app-nested-outlet-page']);
-
-      const nestedOutlet = await element(by.css('app-nested-outlet'));
-      const backButton = await nestedOutlet.$('ion-back-button');
-      await backButton.click();
-
-      await testTabTitle('Tab 2 - Page 1');
-    });
-  })
 });
 
 async function testState(count: number, tab: string) {
@@ -161,7 +137,7 @@ async function testState(count: number, tab: string) {
 }
 
 async function testTabTitle(title: string) {
-  await waitTime(1000);
+  await waitTime(600);
   const tab = await getSelectedTab();
   expect(await tab.$('ion-title').getText()).toEqual(title);
   return tab;

angular/test/test-app/e2e/src/utils.ts

@@ -37,12 +37,19 @@ export interface LifeCycleCount {
 }
 
 export function handleErrorMessages() {
-  return browser.manage().logs().get('browser').then(function (browserLog) {
-    for (let i = 0; i <= browserLog.length - 1; i++) {
-      if (browserLog[i].level.name_ === 'SEVERE') {
-        fail(browserLog[i].message);
-      }
+  browser.manage().logs().get('browser').then(function(browserLog) {
+    let severWarnings = false;
+
+    for (let i; i <= browserLog.length - 1; i++) {
+        if (browserLog[i].level.name === 'SEVERE') {
+            console.log('\n' + browserLog[i].level.name);
+            console.log('(Possibly exception) \n' + browserLog[i].message);
+
+            severWarnings = true;
+        }
     }
+
+    expect(severWarnings).toBe(false);
   });
 }
 

angular/test/test-app/e2e/src/view-child.e2e-spec.ts

@@ -1,14 +1,13 @@
 import { browser, element, by } from 'protractor';
-import { handleErrorMessages, waitTime } from './utils';
+import { handleErrorMessages } from './utils';
 
 describe('view-child', () => {
 
   beforeEach(async () => {
     await browser.get('/view-child');
-    await waitTime(30);
   });
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should get a reference to all children', async () => {

angular/test/test-app/e2e/src/virtual-scroll.e2e-spec.ts

@@ -1,18 +0,0 @@
-import { browser, element, by } from 'protractor';
-import { waitTime, handleErrorMessages } from './utils';
-
-describe('virtual-scroll', () => {
-  afterEach(() => {
-    return handleErrorMessages();
-  });
-  beforeEach(async () => {
-    await browser.get('/virtual-scroll');
-    await waitTime(30);
-  });
-
-  it('should open virtual-scroll', () => {
-    const virtualElements = element.all(by.css('ion-virtual-scroll > *'));
-    expect(virtualElements.count()).toBeGreaterThan(0);
-  });
-
-});

angular/test/test-app/package-lock.json

@@ -83,7 +83,7 @@
       "dependencies": {
         "source-map": {
           "version": "0.5.6",
-          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
           "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
           "dev": true
         },
@@ -421,7 +421,7 @@
         },
         "load-json-file": {
           "version": "2.0.0",
-          "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
           "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
           "dev": true,
           "requires": {
@@ -463,7 +463,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -489,7 +489,7 @@
         },
         "pify": {
           "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         },
@@ -796,28 +796,20 @@
       }
     },
     "@ionic/angular": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-4.6.0.tgz",
-      "integrity": "sha512-T7At4TBHqkNP9zt6nHqgIztOIDB3X/3YojNm5aya/2tlT9mJ+R0DcGBaKD+KOvKmauzIiABs0A3sxFAPZURVCQ==",
+      "version": "4.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-4.0.0-rc.1.tgz",
+      "integrity": "sha512-BoNynQ7s+9v4D/yOg6Po33c8svL3HLrL623cmU2CeXIh8F7c4DTlyn+vE6x1ifWrlHucLc5KmMCGd5YqzsGfNw==",
       "requires": {
-        "@ionic/core": "4.6.0",
+        "@ionic/core": "4.0.0-rc.1",
         "tslib": "^1.9.3"
       }
     },
     "@ionic/core": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-4.6.0.tgz",
-      "integrity": "sha512-yE7zVnj8jQYQfFw+oliXgbpxDGYDS8SKDRLo3I0IQWGIn50nFntQVfH+FfaJ6bWexInq+86+dQLDIjCUQUX0PQ==",
+      "version": "4.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-4.0.0-rc.1.tgz",
+      "integrity": "sha512-HGMjSq0hW7xVczTDib3tJ1aLi6RgE6R3spKWRiEsVvuBz3WGrLAuG6ASFic/U1k5LLG6vyJoWs4qvZ24b3dXag==",
       "requires": {
-        "ionicons": "4.5.10-2",
-        "tslib": "^1.10.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.10.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
-        }
+        "ionicons": "4.5.1"
       }
     },
     "@ngtools/webpack": {
@@ -961,7 +953,7 @@
     },
     "@types/q": {
       "version": "0.0.32",
-      "resolved": "http://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
       "integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU=",
       "dev": true
     },
@@ -1356,7 +1348,6 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
       "dev": true,
-      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -1485,7 +1476,7 @@
         },
         "util": {
           "version": "0.10.3",
-          "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
           "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
           "dev": true,
           "requires": {
@@ -1508,7 +1499,7 @@
     },
     "async": {
       "version": "1.5.2",
-      "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
       "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
       "dev": true
     },
@@ -1588,7 +1579,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -1846,7 +1837,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }
@@ -1943,7 +1934,7 @@
     },
     "browserify-aes": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
       "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "requires": {
@@ -1980,7 +1971,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -2034,7 +2025,7 @@
     },
     "buffer": {
       "version": "4.9.1",
-      "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "dev": true,
       "requires": {
@@ -2109,7 +2100,7 @@
     },
     "cacache": {
       "version": "10.0.4",
-      "resolved": "http://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz",
       "integrity": "sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==",
       "dev": true,
       "requires": {
@@ -2160,7 +2151,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "dev": true,
       "optional": true,
@@ -2567,8 +2558,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -2692,7 +2682,7 @@
     },
     "create-hash": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
       "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "dev": true,
       "requires": {
@@ -2705,7 +2695,7 @@
     },
     "create-hmac": {
       "version": "1.1.7",
-      "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
       "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "dev": true,
       "requires": {
@@ -2939,7 +2929,7 @@
       "dependencies": {
         "globby": {
           "version": "6.1.0",
-          "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
           "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
           "dev": true,
           "requires": {
@@ -2952,7 +2942,7 @@
           "dependencies": {
             "pify": {
               "version": "2.3.0",
-              "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
               "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
               "dev": true
             }
@@ -2970,8 +2960,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "depd": {
       "version": "1.1.2",
@@ -3030,7 +3019,7 @@
     },
     "diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
       "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "dev": true,
       "requires": {
@@ -3197,7 +3186,7 @@
     },
     "engine.io-client": {
       "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz",
+      "resolved": "http://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz",
       "integrity": "sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==",
       "dev": true,
       "requires": {
@@ -3321,7 +3310,7 @@
       "dependencies": {
         "source-map": {
           "version": "0.2.0",
-          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.2.0.tgz",
           "integrity": "sha1-2rc/vPwrqBm03gO9b26qSBZLP50=",
           "dev": true,
           "optional": true,
@@ -3485,7 +3474,7 @@
         },
         "expand-range": {
           "version": "0.1.1",
-          "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-0.1.1.tgz",
+          "resolved": "http://registry.npmjs.org/expand-range/-/expand-range-0.1.1.tgz",
           "integrity": "sha1-TLjtoJk8pW+k9B/ELzy7TMrf8EQ=",
           "dev": true,
           "requires": {
@@ -3544,7 +3533,7 @@
     },
     "expand-range": {
       "version": "1.8.2",
-      "resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
       "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
       "dev": true,
       "requires": {
@@ -3858,7 +3847,7 @@
     },
     "finalhandler": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
       "dev": true,
       "requires": {
@@ -3891,12 +3880,6 @@
         "locate-path": "^2.0.0"
       }
     },
-    "flatted": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.0.tgz",
-      "integrity": "sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg==",
-      "dev": true
-    },
     "flush-write-stream": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz",
@@ -4046,8 +4029,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4068,14 +4050,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4090,20 +4070,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4220,8 +4197,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4233,7 +4209,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4248,7 +4223,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4256,14 +4230,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4282,7 +4254,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4363,8 +4334,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4376,7 +4346,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4462,8 +4431,7 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4499,7 +4467,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4519,7 +4486,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4563,14 +4529,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -4579,7 +4543,6 @@
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
       "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
       "dev": true,
-      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -4592,7 +4555,6 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
-      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -4630,12 +4592,11 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "get-stream": {
       "version": "3.0.0",
-      "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
       "dev": true
     },
@@ -4856,8 +4817,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -5010,7 +4970,7 @@
     },
     "http-proxy-middleware": {
       "version": "0.18.0",
-      "resolved": "http://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
       "integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==",
       "dev": true,
       "requires": {
@@ -5360,9 +5320,9 @@
       "dev": true
     },
     "ionicons": {
-      "version": "4.5.10-2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.5.10-2.tgz",
-      "integrity": "sha512-68GMJBezv9ONng8TskjYFrOnCjXzDSdES6q1C9hTJyA9hKViCqaRcDsq3J/w3OukZEq92o2pX2tRwhj+uFgc9g=="
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.5.1.tgz",
+      "integrity": "sha512-zqfkjpPKsdzzXePdE03IRw6xt7B6N3fcN/7NepyniuEWhKZLy7YpdZLegEwBmKeciXi7rIcv1O/hHJTdokUwXQ=="
     },
     "ip": {
       "version": "1.1.5",
@@ -5618,8 +5578,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "is-windows": {
       "version": "1.0.2",
@@ -5796,7 +5755,7 @@
         },
         "fast-deep-equal": {
           "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
           "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
           "dev": true
         },
@@ -5996,7 +5955,7 @@
     },
     "jsesc": {
       "version": "1.3.0",
-      "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
       "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
       "dev": true
     },
@@ -6032,7 +5991,7 @@
     },
     "json5": {
       "version": "0.5.1",
-      "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
       "dev": true
     },
@@ -6069,13 +6028,13 @@
       "dependencies": {
         "core-js": {
           "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/core-js/-/core-js-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.3.0.tgz",
           "integrity": "sha1-+rg/uwstjchfpjbEudNMdUIMbWU=",
           "dev": true
         },
         "es6-promise": {
           "version": "3.0.2",
-          "resolved": "http://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz",
           "integrity": "sha1-AQ1YWEI6XxGJeWZfRkhqlcbuK7Y=",
           "dev": true
         },
@@ -6087,7 +6046,7 @@
         },
         "readable-stream": {
           "version": "2.0.6",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
           "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=",
           "dev": true,
           "requires": {
@@ -6101,16 +6060,16 @@
         },
         "string_decoder": {
           "version": "0.10.31",
-          "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
           "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
           "dev": true
         }
       }
     },
     "karma": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/karma/-/karma-3.1.4.tgz",
-      "integrity": "sha512-31Vo8Qr5glN+dZEVIpnPCxEGleqE0EY6CtC2X9TagRV3rRQ3SNrvfhddICkJgUK3AgqpeKSZau03QumTGhGoSw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-3.1.1.tgz",
+      "integrity": "sha512-NetT3wPCQMNB36uiL9LLyhrOt8SQwrEKt0xD3+KpTCfm0VxVyUJdPL5oTq2Ic5ouemgL/Iz4wqXEbF3zea9kQQ==",
       "dev": true,
       "requires": {
         "bluebird": "^3.3.0",
@@ -6123,12 +6082,11 @@
         "di": "^0.0.1",
         "dom-serialize": "^2.2.0",
         "expand-braces": "^0.1.1",
-        "flatted": "^2.0.0",
         "glob": "^7.1.1",
         "graceful-fs": "^4.1.2",
         "http-proxy": "^1.13.0",
         "isbinaryfile": "^3.0.0",
-        "lodash": "^4.17.5",
+        "lodash": "^4.17.4",
         "log4js": "^3.0.0",
         "mime": "^2.3.1",
         "minimatch": "^3.0.2",
@@ -6140,13 +6098,13 @@
         "socket.io": "2.1.1",
         "source-map": "^0.6.1",
         "tmp": "0.0.33",
-        "useragent": "2.3.0"
+        "useragent": "2.2.1"
       },
       "dependencies": {
         "mime": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.2.tgz",
-          "integrity": "sha512-zJBfZDkwRu+j3Pdd2aHsR5GfH2jIWhmL1ZzBoc+X+3JEti2hbArWcyJ+1laC1D2/U/W1a/+Cegj0/OnEU2ybjg==",
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz",
+          "integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==",
           "dev": true
         },
         "source-map": {
@@ -6290,10 +6248,9 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
-      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -6304,10 +6261,9 @@
       "dependencies": {
         "pify": {
           "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -6576,8 +6532,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -6634,7 +6589,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "dev": true,
       "optional": true,
@@ -6653,7 +6608,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true,
           "optional": true
@@ -6980,7 +6935,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true,
           "optional": true
@@ -7072,7 +7027,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "optional": true,
@@ -7196,7 +7151,6 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -7413,7 +7367,7 @@
     },
     "os-locale": {
       "version": "1.4.0",
-      "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
       "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
       "dev": true,
       "optional": true,
@@ -7451,7 +7405,7 @@
     },
     "p-is-promise": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
       "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
       "dev": true
     },
@@ -8030,7 +7984,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -8058,7 +8012,7 @@
         },
         "globby": {
           "version": "5.0.0",
-          "resolved": "http://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
           "integrity": "sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=",
           "dev": true,
           "requires": {
@@ -8072,13 +8026,13 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
         "pify": {
           "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         },
@@ -8302,7 +8256,7 @@
       "dependencies": {
         "pify": {
           "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         }
@@ -8313,7 +8267,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "dev": true,
-      "optional": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -8325,7 +8278,6 @@
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
-          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -8334,10 +8286,9 @@
         },
         "pify": {
           "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -8346,7 +8297,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -8357,7 +8307,6 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -8368,7 +8317,6 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
-          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -8730,7 +8678,7 @@
     },
     "sax": {
       "version": "0.5.8",
-      "resolved": "http://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
       "integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=",
       "dev": true
     },
@@ -8758,7 +8706,7 @@
       "dependencies": {
         "source-map": {
           "version": "0.4.4",
-          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
           "dev": true,
           "optional": true,
@@ -8935,7 +8883,7 @@
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "dev": true,
       "requires": {
@@ -9185,7 +9133,7 @@
     },
     "socket.io-parser": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz",
       "integrity": "sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==",
       "dev": true,
       "requires": {
@@ -9559,7 +9507,7 @@
     },
     "stream-browserify": {
       "version": "2.0.1",
-      "resolved": "http://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
       "integrity": "sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=",
       "dev": true,
       "requires": {
@@ -9647,7 +9595,7 @@
     },
     "strip-ansi": {
       "version": "3.0.1",
-      "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
       "dev": true,
       "requires": {
@@ -9659,14 +9607,13 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
       "dev": true,
-      "optional": true,
       "requires": {
         "is-utf8": "^0.2.0"
       }
     },
     "strip-eof": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
@@ -9720,7 +9667,7 @@
         },
         "source-map": {
           "version": "0.1.43",
-          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
           "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
           "dev": true,
           "requires": {
@@ -9763,7 +9710,7 @@
     },
     "tar": {
       "version": "2.2.1",
-      "resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
       "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
       "dev": true,
       "optional": true,
@@ -10396,13 +10343,21 @@
       "dev": true
     },
     "useragent": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/useragent/-/useragent-2.3.0.tgz",
-      "integrity": "sha512-4AoH4pxuSvHCjqLO04sU6U/uE65BYza8l/KKBS0b0hnUPWi+cQ2BpeTEwejCSx9SPV5/U03nniDTrWx5NrmKdw==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/useragent/-/useragent-2.2.1.tgz",
+      "integrity": "sha1-z1k+9PLRdYdei7ZY6pLhik/QbY4=",
       "dev": true,
       "requires": {
-        "lru-cache": "4.1.x",
+        "lru-cache": "2.2.x",
         "tmp": "0.0.x"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "2.2.4",
+          "resolved": "http://registry.npmjs.org/lru-cache/-/lru-cache-2.2.4.tgz",
+          "integrity": "sha1-bGWGGb7PFAMdDQtZSxYELOTcBj0=",
+          "dev": true
+        }
       }
     },
     "util": {
@@ -10575,7 +10530,7 @@
         },
         "source-map": {
           "version": "0.4.4",
-          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
           "dev": true,
           "requires": {
@@ -10975,7 +10930,6 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
-      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }
@@ -10997,7 +10951,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "dev": true,
       "requires": {
@@ -11042,7 +10996,7 @@
     },
     "xmlbuilder": {
       "version": "9.0.7",
-      "resolved": "http://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
       "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
       "dev": true
     },

angular/test/test-app/package.json

@@ -8,8 +8,8 @@
     "sync": "sh scripts/sync.sh",
     "build": "ng build --prod --no-progress",
     "test": "ng e2e --prod",
-    "test.dev": "npm run sync && ng e2e",
-    "lint": "ng lint"
+    "lint": "ng lint",
+    "postinstall": "npm run sync"
   },
   "private": true,
   "dependencies": {
@@ -21,7 +21,7 @@
     "@angular/platform-browser": "~7.2.1",
     "@angular/platform-browser-dynamic": "~7.2.1",
     "@angular/router": "~7.2.1",
-    "@ionic/angular": "^4.5.0",
+    "@ionic/angular": "^4.0.0-rc.1",
     "core-js": "^2.6.2",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
@@ -32,9 +32,9 @@
     "@angular/cli": "~7.2.1",
     "@angular/compiler-cli": "~7.2.1",
     "@angular/language-service": "~7.2.1",
+    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",

angular/test/test-app/scripts/sync.sh

@@ -5,7 +5,6 @@ cp -a ../../package.json node_modules/@ionic/angular/package.json
 
 # Copy core dist
 rm -rf node_modules/@ionic/core/dist
-rm -rf node_modules/@ionic/core/loader
 cp -a ../../../core/dist node_modules/@ionic/core/dist
 cp -a ../../../core/loader node_modules/@ionic/core/loader
 cp -a ../../../core/package.json node_modules/@ionic/core/package.json

angular/test/test-app/src/app/alert/alert.component.html

@@ -1,10 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      Modal test
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content padding>
-  <ion-button (click)="openAlert()" id="action-button">Open Alert</ion-button>
-</ion-content>

angular/test/test-app/src/app/alert/alert.component.ts

@@ -1,31 +0,0 @@
-import { Component, NgZone } from '@angular/core';
-import { AlertController } from '@ionic/angular';
-import { NavComponent } from '../nav/nav.component';
-
-@Component({
-  selector: 'app-alert',
-  templateUrl: './alert.component.html',
-})
-export class AlertComponent {
-
-  constructor(
-    private alertCtrl: AlertController
-  ) { }
-
-  async openAlert() {
-    const alert = await this.alertCtrl.create({
-      header: 'Hello',
-      message: 'Some text',
-      buttons: [
-        {
-          role: 'cancel',
-          text: 'Cancel',
-          handler: () => {
-            NgZone.assertInAngularZone();
-          }
-        }
-      ]
-    });
-    await alert.present();
-  }
-}

angular/test/test-app/src/app/app-routing.module.ts

@@ -4,8 +4,6 @@ import { InputsComponent } from './inputs/inputs.component';
 import { ModalComponent } from './modal/modal.component';
 import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
-import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
-import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
 import { HomePageComponent } from './home-page/home-page.component';
 import { TabsComponent } from './tabs/tabs.component';
 import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
@@ -23,11 +21,9 @@ import { FormComponent } from './form/form.component';
 import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
 import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
 import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
-import { AlertComponent } from './alert/alert.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
-  { path: 'alerts', component: AlertComponent },
   { path: 'inputs', component: InputsComponent },
   { path: 'form', component: FormComponent },
   { path: 'modals', component: ModalComponent },
@@ -35,8 +31,6 @@ const routes: Routes = [
   { path: 'providers', component: ProvidersComponent },
   { path: 'router-link', component: RouterLinkComponent },
   { path: 'router-link-page', component: RouterLinkPageComponent },
-  { path: 'router-link-page2/:id', component: RouterLinkPage2Component },
-  { path: 'router-link-page3', component: RouterLinkPage3Component },
   { path: 'slides', component: SlidesComponent },
   { path: 'virtual-scroll', component: VirtualScrollComponent },
   { path: 'virtual-scroll-detail/:itemId', component: VirtualScrollDetailComponent },

angular/test/test-app/src/app/app.module.ts

@@ -11,8 +11,6 @@ import { ModalComponent } from './modal/modal.component';
 import { ModalExampleComponent } from './modal-example/modal-example.component';
 import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
-import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
-import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
 import { HomePageComponent } from './home-page/home-page.component';
 import { TabsComponent } from './tabs/tabs.component';
 import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
@@ -32,7 +30,6 @@ import { FormComponent } from './form/form.component';
 import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
 import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
 import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
-import { AlertComponent } from './alert/alert.component';
 
 @NgModule({
   declarations: [
@@ -42,8 +39,6 @@ import { AlertComponent } from './alert/alert.component';
     ModalExampleComponent,
     RouterLinkComponent,
     RouterLinkPageComponent,
-    RouterLinkPage2Component,
-    RouterLinkPage3Component,
     HomePageComponent,
     TabsComponent,
     TabsTab1Component,
@@ -62,8 +57,7 @@ import { AlertComponent } from './alert/alert.component';
     FormComponent,
     NavigationPage1Component,
     NavigationPage2Component,
-    NavigationPage3Component,
-    AlertComponent
+    NavigationPage3Component
   ],
   imports: [
     BrowserModule,

angular/test/test-app/src/app/home-page/home-page.component.html

@@ -7,11 +7,6 @@
   </ion-header>
   <ion-content>
     <ion-list>
-      <ion-item routerLink="/alerts">
-        <ion-label>
-          Alerts test
-        </ion-label>
-      </ion-item>
       <ion-item routerLink="/inputs">
         <ion-label>
           Inputs test

angular/test/test-app/src/app/inputs/inputs.component.html

@@ -6,7 +6,6 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
-  <p>Change Detections: <span id="counter">{{counter()}}</span></p>
   <ion-list>
 
     <ion-item>
@@ -90,7 +89,7 @@
       <ion-range [(ngModel)]="range"></ion-range>
       <ion-note slot="end" id="range-note">{{range}}</ion-note>
     </ion-item>
-
+    
     <ion-item color="dark">
       <ion-label>Range Mirror</ion-label>
       <ion-range [(ngModel)]="range"></ion-range>

angular/test/test-app/src/app/inputs/inputs.component.ts

@@ -12,7 +12,6 @@ export class InputsComponent {
   toggle = true;
   select = 'nes';
   range = 10;
-  changes = 0;
 
   setValues() {
     console.log('set values');
@@ -33,8 +32,4 @@ export class InputsComponent {
     this.select = undefined;
     this.range = undefined;
   }
-  counter() {
-    this.changes++;
-    return Math.floor(this.changes / 2);
-  }
 }

angular/test/test-app/src/app/nested-outlet/nested-outlet.component.html

@@ -1,8 +1,5 @@
 <ion-header>
   <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
     <ion-title>
       NESTED OUTLET
     </ion-title>

angular/test/test-app/src/app/providers/providers.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import {
-  Platform, ModalController, AlertController, ActionSheetController,
-  PopoverController, ToastController, Events, PickerController, MenuController,
-  LoadingController, NavController, DomController, Config
+  Platform, Config, ModalController, AlertController, ActionSheetController,
+  PopoverController, ToastController,  Events, PickerController, MenuController,
+  LoadingController, NavController, DomController
 } from '@ionic/angular';
 
 @Component({

angular/test/test-app/src/app/router-link-page2/router-link-page2.component.html

@@ -1,12 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-    <ion-title>Router Page 2</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content padding>
-  <ion-button routerLink="/router-link-page3" id="goToPage3">Go to Page 3</ion-button>
-</ion-content>

angular/test/test-app/src/app/router-link-page2/router-link-page2.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-router-link-page2',
-  templateUrl: './router-link-page2.component.html'
-})
-export class RouterLinkPage2Component implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

angular/test/test-app/src/app/router-link-page3/router-link-page3.component.html

@@ -1,12 +0,0 @@
-<ion-header>
-  <ion-toolbar color="dark">
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/?token=ABC#fragment" id="goBackFromPage3"></ion-back-button>
-    </ion-buttons>
-    <ion-title>Router Page 3</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content padding>
-  Page 3
-</ion-content>

angular/test/test-app/src/app/router-link-page3/router-link-page3.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-router-link-page3',
-  templateUrl: './router-link-page3.component.html'
-})
-export class RouterLinkPage3Component implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

angular/test/test-app/src/app/router-link/router-link.component.html

@@ -11,7 +11,6 @@
   <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>
   <p>ionViewWillLeave: <span id="ionViewWillLeave">{{willLeave}}</span></p>
   <p>ionViewDidLeave: <span id="ionViewDidLeave">{{didLeave}}</span></p>
-  <p>Change Detections: <span id="counter">{{counter()}}</span></p>
 
   <p>
     <ion-button routerLink="/router-link-page" expand="block" color="dark" id="routerLink">ion-button[routerLink]</ion-button>
@@ -28,6 +27,4 @@
   <p><button (click)="navigateRoot()" id="button-root">navigateForward</button></p>
   <p><button (click)="navigateBack()" id="button-back">navigateBack</button></p>
 
-  <p><button id="queryParamsFragment" routerLink="/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }" fragment="myDiv1">Query Params and Fragment</button></p>
-
 </ion-content>

angular/test/test-app/src/app/router-link/router-link.component.ts

@@ -13,7 +13,6 @@ export class RouterLinkComponent implements OnInit {
   didEnter = 0;
   willLeave = 0;
   didLeave = 0;
-  changes = 0;
 
   constructor(
     private navCtrl: NavController,
@@ -36,11 +35,6 @@ export class RouterLinkComponent implements OnInit {
     this.navCtrl.navigateRoot('/router-link-page');
   }
 
-  counter() {
-    this.changes++;
-    return Math.floor(this.changes / 2);
-  }
-
   ngOnInit() {
     NgZone.assertInAngularZone();
     this.onInit++;

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.html

@@ -9,6 +9,5 @@
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
-    <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
   </p>
 </ion-content>

core/README.md

@@ -23,9 +23,8 @@ The Ionic Core package contains the Web Components that make up the reusable UI
 Easiest way to start using Ionic Core is by adding a script tag to the CDN:
 
 ```html
-<script type="module" src="https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.esm.js"></script>
-<script nomodule src="https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.js"></script>
-<link href="https://unpkg.com/@ionic/core@4.6.2/css/ionic.bundle.css" rel="stylesheet">
+<link href="https://unpkg.com/@ionic/core@4.2.1/css/ionic.bundle.css" rel="stylesheet">
+<script src="https://unpkg.com/@ionic/core@4.2.1/dist/ionic.js"></script>
 ```
 
 Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`.

core/api.txt

@@ -1,8 +1,13 @@
 
+ion-action-sheet-controller,none
+ion-action-sheet-controller,method,create,create(opts: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>
+ion-action-sheet-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
+ion-action-sheet-controller,method,getTop,getTop() => Promise<HTMLIonActionSheetElement | undefined>
+
 ion-action-sheet,scoped
 ion-action-sheet,prop,animated,boolean,true,false,false
 ion-action-sheet,prop,backdropDismiss,boolean,true,false,false
-ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],[],false,false
+ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],undefined,true,false
 ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-action-sheet,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-action-sheet,prop,header,string | undefined,undefined,false,false
@@ -15,9 +20,9 @@ ion-action-sheet,method,dismiss,dismiss(data?: any, role?: string | undefined) =
 ion-action-sheet,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-action-sheet,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-action-sheet,method,present,present() => Promise<void>
-ion-action-sheet,event,ionActionSheetDidDismiss,OverlayEventDetail<any>,true
+ion-action-sheet,event,ionActionSheetDidDismiss,OverlayEventDetail,true
 ion-action-sheet,event,ionActionSheetDidPresent,void,true
-ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail<any>,true
+ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
 ion-action-sheet,css-prop,--background
 ion-action-sheet,css-prop,--background-activated
@@ -30,10 +35,10 @@ ion-action-sheet,css-prop,--min-height
 ion-action-sheet,css-prop,--min-width
 ion-action-sheet,css-prop,--width
 
-ion-action-sheet-controller,none
-ion-action-sheet-controller,method,create,create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>
-ion-action-sheet-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-action-sheet-controller,method,getTop,getTop() => Promise<HTMLIonActionSheetElement | undefined>
+ion-alert-controller,none
+ion-alert-controller,method,create,create(opts: AlertOptions) => Promise<HTMLIonAlertElement>
+ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
+ion-alert-controller,method,getTop,getTop() => Promise<HTMLIonAlertElement | undefined>
 
 ion-alert,scoped
 ion-alert,prop,animated,boolean,true,false,false
@@ -53,9 +58,9 @@ ion-alert,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promi
 ion-alert,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-alert,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-alert,method,present,present() => Promise<void>
-ion-alert,event,ionAlertDidDismiss,OverlayEventDetail<any>,true
+ion-alert,event,ionAlertDidDismiss,OverlayEventDetail,true
 ion-alert,event,ionAlertDidPresent,void,true
-ion-alert,event,ionAlertWillDismiss,OverlayEventDetail<any>,true
+ion-alert,event,ionAlertWillDismiss,OverlayEventDetail,true
 ion-alert,event,ionAlertWillPresent,void,true
 ion-alert,css-prop,--background
 ion-alert,css-prop,--height
@@ -65,15 +70,9 @@ ion-alert,css-prop,--min-height
 ion-alert,css-prop,--min-width
 ion-alert,css-prop,--width
 
-ion-alert-controller,none
-ion-alert-controller,method,create,create(options: AlertOptions) => Promise<HTMLIonAlertElement>
-ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-alert-controller,method,getTop,getTop() => Promise<HTMLIonAlertElement | undefined>
-
 ion-anchor,shadow
 ion-anchor,prop,color,string | undefined,undefined,false,false
 ion-anchor,prop,href,string | undefined,undefined,false,false
-ion-anchor,prop,rel,string | undefined,undefined,false,false
 ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-anchor,css-prop,--background
 ion-anchor,css-prop,--color
@@ -86,18 +85,12 @@ ion-avatar,css-prop,--border-radius
 ion-back-button,scoped
 ion-back-button,prop,color,string | undefined,undefined,false,false
 ion-back-button,prop,defaultHref,string | undefined,undefined,false,false
-ion-back-button,prop,disabled,boolean,false,false,true
 ion-back-button,prop,icon,null | string | undefined,undefined,false,false
 ion-back-button,prop,mode,"ios" | "md",undefined,false,false
 ion-back-button,prop,text,null | string | undefined,undefined,false,false
-ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-back-button,css-prop,--background
-ion-back-button,css-prop,--background-focused
-ion-back-button,css-prop,--background-hover
 ion-back-button,css-prop,--border-radius
 ion-back-button,css-prop,--color
-ion-back-button,css-prop,--color-focused
-ion-back-button,css-prop,--color-hover
 ion-back-button,css-prop,--icon-font-size
 ion-back-button,css-prop,--icon-font-weight
 ion-back-button,css-prop,--icon-margin-bottom
@@ -142,24 +135,20 @@ ion-button,shadow
 ion-button,prop,buttonType,string,'button',false,false
 ion-button,prop,color,string | undefined,undefined,false,false
 ion-button,prop,disabled,boolean,false,false,true
-ion-button,prop,download,string | undefined,undefined,false,false
 ion-button,prop,expand,"block" | "full" | undefined,undefined,false,true
 ion-button,prop,fill,"clear" | "default" | "outline" | "solid" | undefined,undefined,false,true
 ion-button,prop,href,string | undefined,undefined,false,false
 ion-button,prop,mode,"ios" | "md",undefined,false,false
-ion-button,prop,rel,string | undefined,undefined,false,false
 ion-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-button,prop,shape,"round" | undefined,undefined,false,true
 ion-button,prop,size,"default" | "large" | "small" | undefined,undefined,false,true
 ion-button,prop,strong,boolean,false,false,false
-ion-button,prop,target,string | undefined,undefined,false,false
 ion-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-button,event,ionBlur,void,true
 ion-button,event,ionFocus,void,true
 ion-button,css-prop,--background
 ion-button,css-prop,--background-activated
 ion-button,css-prop,--background-focused
-ion-button,css-prop,--background-hover
 ion-button,css-prop,--border-color
 ion-button,css-prop,--border-radius
 ion-button,css-prop,--border-style
@@ -168,7 +157,6 @@ ion-button,css-prop,--box-shadow
 ion-button,css-prop,--color
 ion-button,css-prop,--color-activated
 ion-button,css-prop,--color-focused
-ion-button,css-prop,--color-hover
 ion-button,css-prop,--opacity
 ion-button,css-prop,--padding-bottom
 ion-button,css-prop,--padding-end
@@ -179,20 +167,6 @@ ion-button,css-prop,--transition
 
 ion-buttons,scoped
 
-ion-card,scoped
-ion-card,prop,button,boolean,false,false,false
-ion-card,prop,color,string | undefined,undefined,false,false
-ion-card,prop,disabled,boolean,false,false,false
-ion-card,prop,download,string | undefined,undefined,false,false
-ion-card,prop,href,string | undefined,undefined,false,false
-ion-card,prop,mode,"ios" | "md",undefined,false,false
-ion-card,prop,rel,string | undefined,undefined,false,false
-ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-card,prop,target,string | undefined,undefined,false,false
-ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-card,css-prop,--background
-ion-card,css-prop,--color
-
 ion-card-content,none
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
 
@@ -211,6 +185,12 @@ ion-card-title,prop,color,string | undefined,undefined,false,false
 ion-card-title,prop,mode,"ios" | "md",undefined,false,false
 ion-card-title,css-prop,--color
 
+ion-card,scoped
+ion-card,prop,color,string | undefined,undefined,false,false
+ion-card,prop,mode,"ios" | "md",undefined,false,false
+ion-card,css-prop,--background
+ion-card,css-prop,--color
+
 ion-checkbox,shadow
 ion-checkbox,prop,checked,boolean,false,false,false
 ion-checkbox,prop,color,string | undefined,undefined,false,false
@@ -332,25 +312,15 @@ ion-datetime,css-prop,--padding-start
 ion-datetime,css-prop,--padding-top
 ion-datetime,css-prop,--placeholder-color
 
-ion-fab,shadow
-ion-fab,prop,activated,boolean,false,false,false
-ion-fab,prop,edge,boolean,false,false,false
-ion-fab,prop,horizontal,"center" | "end" | "start" | undefined,undefined,false,false
-ion-fab,prop,vertical,"bottom" | "center" | "top" | undefined,undefined,false,false
-ion-fab,method,close,close() => Promise<void>
-
 ion-fab-button,shadow
 ion-fab-button,prop,activated,boolean,false,false,false
 ion-fab-button,prop,color,string | undefined,undefined,false,false
 ion-fab-button,prop,disabled,boolean,false,false,false
-ion-fab-button,prop,download,string | undefined,undefined,false,false
 ion-fab-button,prop,href,string | undefined,undefined,false,false
 ion-fab-button,prop,mode,"ios" | "md",undefined,false,false
-ion-fab-button,prop,rel,string | undefined,undefined,false,false
 ion-fab-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-fab-button,prop,show,boolean,false,false,false
 ion-fab-button,prop,size,"small" | undefined,undefined,false,false
-ion-fab-button,prop,target,string | undefined,undefined,false,false
 ion-fab-button,prop,translucent,boolean,false,false,false
 ion-fab-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-fab-button,event,ionBlur,void,true
@@ -358,7 +328,6 @@ ion-fab-button,event,ionFocus,void,true
 ion-fab-button,css-prop,--background
 ion-fab-button,css-prop,--background-activated
 ion-fab-button,css-prop,--background-focused
-ion-fab-button,css-prop,--background-hover
 ion-fab-button,css-prop,--border-color
 ion-fab-button,css-prop,--border-radius
 ion-fab-button,css-prop,--border-style
@@ -367,7 +336,6 @@ ion-fab-button,css-prop,--box-shadow
 ion-fab-button,css-prop,--color
 ion-fab-button,css-prop,--color-activated
 ion-fab-button,css-prop,--color-focused
-ion-fab-button,css-prop,--color-hover
 ion-fab-button,css-prop,--padding-bottom
 ion-fab-button,css-prop,--padding-end
 ion-fab-button,css-prop,--padding-start
@@ -379,6 +347,13 @@ ion-fab-list,shadow
 ion-fab-list,prop,activated,boolean,false,false,false
 ion-fab-list,prop,side,"bottom" | "end" | "start" | "top",'bottom',false,false
 
+ion-fab,shadow
+ion-fab,prop,activated,boolean,false,false,false
+ion-fab,prop,edge,boolean,false,false,false
+ion-fab,prop,horizontal,"center" | "end" | "start" | undefined,undefined,false,false
+ion-fab,prop,vertical,"bottom" | "center" | "top" | undefined,undefined,false,false
+ion-fab,method,close,close() => void
+
 ion-footer,none
 ion-footer,prop,mode,"ios" | "md",undefined,false,false
 ion-footer,prop,translucent,boolean,false,false,false
@@ -407,19 +382,18 @@ ion-img,prop,alt,string | undefined,undefined,false,false
 ion-img,prop,src,string | undefined,undefined,false,false
 ion-img,event,ionError,void,true
 ion-img,event,ionImgDidLoad,void,true
-ion-img,event,ionImgWillLoad,void,true
+
+ion-infinite-scroll-content,none
+ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
+ion-infinite-scroll-content,prop,loadingText,string | undefined,undefined,false,false
 
 ion-infinite-scroll,none
 ion-infinite-scroll,prop,disabled,boolean,false,false,false
 ion-infinite-scroll,prop,position,"bottom" | "top",'bottom',false,false
 ion-infinite-scroll,prop,threshold,string,'15%',false,false
-ion-infinite-scroll,method,complete,complete() => Promise<void>
+ion-infinite-scroll,method,complete,complete() => void
 ion-infinite-scroll,event,ionInfinite,void,true
 
-ion-infinite-scroll-content,none
-ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
-ion-infinite-scroll-content,prop,loadingText,string | undefined,undefined,false,false
-
 ion-input,scoped
 ion-input,prop,accept,string | undefined,undefined,false,false
 ion-input,prop,autocapitalize,string,'off',false,false
@@ -449,7 +423,7 @@ ion-input,prop,step,string | undefined,undefined,false,false
 ion-input,prop,type,"date" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url",'text',false,false
 ion-input,prop,value,null | string | undefined,'',false,false
 ion-input,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
-ion-input,method,setFocus,setFocus() => Promise<void>
+ion-input,method,setFocus,setFocus() => void
 ion-input,event,ionBlur,void,true
 ion-input,event,ionChange,InputChangeEventDetail,true
 ion-input,event,ionFocus,void,true
@@ -465,33 +439,59 @@ ion-input,css-prop,--placeholder-font-style
 ion-input,css-prop,--placeholder-font-weight
 ion-input,css-prop,--placeholder-opacity
 
+ion-item-divider,shadow
+ion-item-divider,prop,color,string | undefined,undefined,false,false
+ion-item-divider,prop,mode,"ios" | "md",undefined,false,false
+ion-item-divider,prop,sticky,boolean,false,false,false
+ion-item-divider,css-prop,--background
+ion-item-divider,css-prop,--color
+ion-item-divider,css-prop,--padding-bottom
+ion-item-divider,css-prop,--padding-end
+ion-item-divider,css-prop,--padding-start
+ion-item-divider,css-prop,--padding-top
+
+ion-item-group,none
+
+ion-item-option,shadow
+ion-item-option,prop,color,string | undefined,undefined,false,false
+ion-item-option,prop,disabled,boolean,false,false,false
+ion-item-option,prop,expandable,boolean,false,false,false
+ion-item-option,prop,href,string | undefined,undefined,false,false
+ion-item-option,prop,mode,"ios" | "md",undefined,false,false
+ion-item-option,css-prop,--background
+ion-item-option,css-prop,--color
+
+ion-item-options,none
+ion-item-options,prop,side,"end" | "start",'end',false,false
+ion-item-options,event,ionSwipe,any,true
+
+ion-item-sliding,none
+ion-item-sliding,prop,disabled,boolean,false,false,false
+ion-item-sliding,method,close,close() => Promise<void>
+ion-item-sliding,method,closeOpened,closeOpened() => Promise<boolean>
+ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise<number>
+ion-item-sliding,method,getSlidingRatio,getSlidingRatio() => Promise<number>
+ion-item-sliding,event,ionDrag,void,true
+
 ion-item,shadow
 ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,string | undefined,undefined,false,false
 ion-item,prop,detail,boolean | undefined,undefined,false,false
 ion-item,prop,detailIcon,string,'ios-arrow-forward',false,false
 ion-item,prop,disabled,boolean,false,false,false
-ion-item,prop,download,string | undefined,undefined,false,false
 ion-item,prop,href,string | undefined,undefined,false,false
 ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-item,prop,mode,"ios" | "md",undefined,false,false
-ion-item,prop,rel,string | undefined,undefined,false,false
 ion-item,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-item,prop,target,string | undefined,undefined,false,false
 ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item,css-prop,--background
 ion-item,css-prop,--background-activated
-ion-item,css-prop,--background-focused
-ion-item,css-prop,--background-hover
 ion-item,css-prop,--border-color
 ion-item,css-prop,--border-radius
 ion-item,css-prop,--border-style
 ion-item,css-prop,--border-width
 ion-item,css-prop,--box-shadow
 ion-item,css-prop,--color
-ion-item,css-prop,--color-activated
-ion-item,css-prop,--color-focused
-ion-item,css-prop,--color-hover
 ion-item,css-prop,--detail-icon-color
 ion-item,css-prop,--detail-icon-font-size
 ion-item,css-prop,--detail-icon-opacity
@@ -513,66 +513,28 @@ ion-item,css-prop,--padding-top
 ion-item,css-prop,--ripple-color
 ion-item,css-prop,--transition
 
-ion-item-divider,shadow
-ion-item-divider,prop,color,string | undefined,undefined,false,false
-ion-item-divider,prop,mode,"ios" | "md",undefined,false,false
-ion-item-divider,prop,sticky,boolean,false,false,false
-ion-item-divider,css-prop,--background
-ion-item-divider,css-prop,--color
-ion-item-divider,css-prop,--inner-padding-bottom
-ion-item-divider,css-prop,--inner-padding-end
-ion-item-divider,css-prop,--inner-padding-start
-ion-item-divider,css-prop,--inner-padding-top
-ion-item-divider,css-prop,--padding-bottom
-ion-item-divider,css-prop,--padding-end
-ion-item-divider,css-prop,--padding-start
-ion-item-divider,css-prop,--padding-top
-
-ion-item-group,none
-
-ion-item-option,shadow
-ion-item-option,prop,color,string | undefined,undefined,false,false
-ion-item-option,prop,disabled,boolean,false,false,false
-ion-item-option,prop,download,string | undefined,undefined,false,false
-ion-item-option,prop,expandable,boolean,false,false,false
-ion-item-option,prop,href,string | undefined,undefined,false,false
-ion-item-option,prop,mode,"ios" | "md",undefined,false,false
-ion-item-option,prop,rel,string | undefined,undefined,false,false
-ion-item-option,prop,target,string | undefined,undefined,false,false
-ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-item-option,css-prop,--background
-ion-item-option,css-prop,--color
-
-ion-item-options,none
-ion-item-options,prop,side,"end" | "start",'end',false,false
-ion-item-options,event,ionSwipe,any,true
-
-ion-item-sliding,none
-ion-item-sliding,prop,disabled,boolean,false,false,false
-ion-item-sliding,method,close,close() => Promise<void>
-ion-item-sliding,method,closeOpened,closeOpened() => Promise<boolean>
-ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise<number>
-ion-item-sliding,method,getSlidingRatio,getSlidingRatio() => Promise<number>
-ion-item-sliding,method,open,open(side: "start" | "end" | undefined) => Promise<void>
-ion-item-sliding,event,ionDrag,any,true
-
 ion-label,scoped
 ion-label,prop,color,string | undefined,undefined,false,false
 ion-label,prop,mode,"ios" | "md",undefined,false,false
 ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,false,false
 ion-label,css-prop,--color
 
+ion-list-header,shadow
+ion-list-header,prop,color,string | undefined,undefined,false,false
+ion-list-header,prop,mode,"ios" | "md",undefined,false,false
+ion-list-header,css-prop,--background
+ion-list-header,css-prop,--color
+
 ion-list,none
 ion-list,prop,inset,boolean,false,false,false
 ion-list,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list,prop,mode,"ios" | "md",undefined,false,false
 ion-list,method,closeSlidingItems,closeSlidingItems() => Promise<boolean>
 
-ion-list-header,shadow
-ion-list-header,prop,color,string | undefined,undefined,false,false
-ion-list-header,prop,mode,"ios" | "md",undefined,false,false
-ion-list-header,css-prop,--background
-ion-list-header,css-prop,--color
+ion-loading-controller,none
+ion-loading-controller,method,create,create(opts?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>
+ion-loading-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
+ion-loading-controller,method,getTop,getTop() => Promise<HTMLIonLoadingElement | undefined>
 
 ion-loading,scoped
 ion-loading,prop,animated,boolean,true,false,false
@@ -591,9 +553,9 @@ ion-loading,method,dismiss,dismiss(data?: any, role?: string | undefined) => Pro
 ion-loading,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-loading,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-loading,method,present,present() => Promise<void>
-ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail<any>,true
+ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail,true
 ion-loading,event,ionLoadingDidPresent,void,true
-ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail<any>,true
+ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail,true
 ion-loading,event,ionLoadingWillPresent,void,true
 ion-loading,css-prop,--background
 ion-loading,css-prop,--height
@@ -604,10 +566,30 @@ ion-loading,css-prop,--min-width
 ion-loading,css-prop,--spinner-color
 ion-loading,css-prop,--width
 
-ion-loading-controller,none
-ion-loading-controller,method,create,create(options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>
-ion-loading-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-loading-controller,method,getTop,getTop() => Promise<HTMLIonLoadingElement | undefined>
+ion-menu-button,shadow
+ion-menu-button,prop,autoHide,boolean,true,false,false
+ion-menu-button,prop,color,string | undefined,undefined,false,false
+ion-menu-button,prop,menu,string | undefined,undefined,false,false
+ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
+ion-menu-button,css-prop,--color
+
+ion-menu-controller,none
+ion-menu-controller,method,close,close(menuId?: string | null | undefined) => Promise<boolean>
+ion-menu-controller,method,enable,enable(shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
+ion-menu-controller,method,get,get(menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
+ion-menu-controller,method,getMenus,getMenus() => Promise<HTMLIonMenuElement[]>
+ion-menu-controller,method,getOpen,getOpen() => Promise<HTMLIonMenuElement | undefined>
+ion-menu-controller,method,isAnimating,isAnimating() => Promise<boolean>
+ion-menu-controller,method,isEnabled,isEnabled(menuId?: string | null | undefined) => Promise<boolean>
+ion-menu-controller,method,isOpen,isOpen(menuId?: string | null | undefined) => Promise<boolean>
+ion-menu-controller,method,open,open(menuId?: string | null | undefined) => Promise<boolean>
+ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => void
+ion-menu-controller,method,swipeGesture,swipeGesture(shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
+ion-menu-controller,method,toggle,toggle(menuId?: string | null | undefined) => Promise<boolean>
+
+ion-menu-toggle,shadow
+ion-menu-toggle,prop,autoHide,boolean,true,false,false
+ion-menu-toggle,prop,menu,string | undefined,undefined,false,false
 
 ion-menu,shadow
 ion-menu,prop,contentId,string | undefined,undefined,false,false
@@ -635,41 +617,10 @@ ion-menu,css-prop,--min-height
 ion-menu,css-prop,--min-width
 ion-menu,css-prop,--width
 
-ion-menu-button,shadow
-ion-menu-button,prop,autoHide,boolean,true,false,false
-ion-menu-button,prop,color,string | undefined,undefined,false,false
-ion-menu-button,prop,disabled,boolean,false,false,false
-ion-menu-button,prop,menu,string | undefined,undefined,false,false
-ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-menu-button,css-prop,--background
-ion-menu-button,css-prop,--background-focused
-ion-menu-button,css-prop,--background-hover
-ion-menu-button,css-prop,--border-radius
-ion-menu-button,css-prop,--color
-ion-menu-button,css-prop,--color-focused
-ion-menu-button,css-prop,--color-hover
-ion-menu-button,css-prop,--padding-bottom
-ion-menu-button,css-prop,--padding-end
-ion-menu-button,css-prop,--padding-start
-ion-menu-button,css-prop,--padding-top
-
-ion-menu-controller,none
-ion-menu-controller,method,close,close(menu?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,enable,enable(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,get,get(menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,getMenus,getMenus() => Promise<HTMLIonMenuElement[]>
-ion-menu-controller,method,getOpen,getOpen() => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,isAnimating,isAnimating() => Promise<boolean>
-ion-menu-controller,method,isEnabled,isEnabled(menu?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,isOpen,isOpen(menu?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,open,open(menu?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => Promise<void>
-ion-menu-controller,method,swipeGesture,swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,toggle,toggle(menu?: string | null | undefined) => Promise<boolean>
-
-ion-menu-toggle,shadow
-ion-menu-toggle,prop,autoHide,boolean,true,false,false
-ion-menu-toggle,prop,menu,string | undefined,undefined,false,false
+ion-modal-controller,none
+ion-modal-controller,method,create,create<T extends ComponentRef>(opts: ModalOptions<T>) => Promise<HTMLIonModalElement>
+ion-modal-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
+ion-modal-controller,method,getTop,getTop() => Promise<HTMLIonModalElement | undefined>
 
 ion-modal,scoped
 ion-modal,prop,animated,boolean,true,false,false
@@ -686,9 +637,9 @@ ion-modal,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promi
 ion-modal,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-modal,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-modal,method,present,present() => Promise<void>
-ion-modal,event,ionModalDidDismiss,OverlayEventDetail<any>,true
+ion-modal,event,ionModalDidDismiss,OverlayEventDetail,true
 ion-modal,event,ionModalDidPresent,void,true
-ion-modal,event,ionModalWillDismiss,OverlayEventDetail<any>,true
+ion-modal,event,ionModalWillDismiss,OverlayEventDetail,true
 ion-modal,event,ionModalWillPresent,void,true
 ion-modal,css-prop,--background
 ion-modal,css-prop,--border-color
@@ -702,10 +653,15 @@ ion-modal,css-prop,--min-height
 ion-modal,css-prop,--min-width
 ion-modal,css-prop,--width
 
-ion-modal-controller,none
-ion-modal-controller,method,create,create<T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>
-ion-modal-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-modal-controller,method,getTop,getTop() => Promise<HTMLIonModalElement | undefined>
+ion-nav-pop,none
+
+ion-nav-push,none
+ion-nav-push,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
+ion-nav-push,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+
+ion-nav-set-root,none
+ion-nav-set-root,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
+ion-nav-set-root,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 
 ion-nav,shadow
 ion-nav,prop,animated,boolean,true,false,false
@@ -729,21 +685,16 @@ ion-nav,method,setRoot,setRoot<T extends NavComponent>(component: T, componentPr
 ion-nav,event,ionNavDidChange,void,false
 ion-nav,event,ionNavWillChange,void,false
 
-ion-nav-pop,none
-
-ion-nav-push,none
-ion-nav-push,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
-ion-nav-push,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
-
-ion-nav-set-root,none
-ion-nav-set-root,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
-ion-nav-set-root,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
-
 ion-note,shadow
 ion-note,prop,color,string | undefined,undefined,false,false
 ion-note,prop,mode,"ios" | "md",undefined,false,false
 ion-note,css-prop,--color
 
+ion-picker-controller,none
+ion-picker-controller,method,create,create(opts: PickerOptions) => Promise<HTMLIonPickerElement>
+ion-picker-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
+ion-picker-controller,method,getTop,getTop() => Promise<HTMLIonPickerElement | undefined>
+
 ion-picker,scoped
 ion-picker,prop,animated,boolean,true,false,false
 ion-picker,prop,backdropDismiss,boolean,true,false,false
@@ -761,9 +712,9 @@ ion-picker,method,getColumn,getColumn(name: string) => Promise<PickerColumn | un
 ion-picker,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-picker,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-picker,method,present,present() => Promise<void>
-ion-picker,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
+ion-picker,event,ionPickerDidDismiss,OverlayEventDetail,true
 ion-picker,event,ionPickerDidPresent,void,true
-ion-picker,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
+ion-picker,event,ionPickerWillDismiss,OverlayEventDetail,true
 ion-picker,event,ionPickerWillPresent,void,true
 ion-picker,css-prop,--background
 ion-picker,css-prop,--background-rgb
@@ -778,10 +729,10 @@ ion-picker,css-prop,--min-height
 ion-picker,css-prop,--min-width
 ion-picker,css-prop,--width
 
-ion-picker-controller,none
-ion-picker-controller,method,create,create(options: PickerOptions) => Promise<HTMLIonPickerElement>
-ion-picker-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-picker-controller,method,getTop,getTop() => Promise<HTMLIonPickerElement | undefined>
+ion-popover-controller,none
+ion-popover-controller,method,create,create<T extends ComponentRef>(opts: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>
+ion-popover-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
+ion-popover-controller,method,getTop,getTop() => Promise<HTMLIonPopoverElement | undefined>
 
 ion-popover,scoped
 ion-popover,prop,animated,boolean,true,false,false
@@ -800,9 +751,9 @@ ion-popover,method,dismiss,dismiss(data?: any, role?: string | undefined) => Pro
 ion-popover,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-popover,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-popover,method,present,present() => Promise<void>
-ion-popover,event,ionPopoverDidDismiss,OverlayEventDetail<any>,true
+ion-popover,event,ionPopoverDidDismiss,OverlayEventDetail,true
 ion-popover,event,ionPopoverDidPresent,void,true
-ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail<any>,true
+ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail,true
 ion-popover,event,ionPopoverWillPresent,void,true
 ion-popover,css-prop,--background
 ion-popover,css-prop,--box-shadow
@@ -813,11 +764,6 @@ ion-popover,css-prop,--min-height
 ion-popover,css-prop,--min-width
 ion-popover,css-prop,--width
 
-ion-popover-controller,none
-ion-popover-controller,method,create,create<T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>
-ion-popover-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-popover-controller,method,getTop,getTop() => Promise<HTMLIonPopoverElement | undefined>
-
 ion-progress-bar,shadow
 ion-progress-bar,prop,buffer,number,1,false,false
 ion-progress-bar,prop,color,string | undefined,undefined,false,false
@@ -829,6 +775,12 @@ ion-progress-bar,css-prop,--background
 ion-progress-bar,css-prop,--buffer-background
 ion-progress-bar,css-prop,--progress-background
 
+ion-radio-group,none
+ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
+ion-radio-group,prop,name,string,this.inputId,false,false
+ion-radio-group,prop,value,any,undefined,false,false
+ion-radio-group,event,ionChange,RadioGroupChangeEventDetail,true
+
 ion-radio,shadow
 ion-radio,prop,checked,boolean,false,false,false
 ion-radio,prop,color,string | undefined,undefined,false,false
@@ -842,12 +794,6 @@ ion-radio,event,ionSelect,RadioChangeEventDetail,true
 ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
 
-ion-radio-group,none
-ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
-ion-radio-group,prop,name,string,this.inputId,false,false
-ion-radio-group,prop,value,any,undefined,false,false
-ion-radio-group,event,ionChange,RadioGroupChangeEventDetail,true
-
 ion-range,shadow
 ion-range,prop,color,string | undefined,undefined,false,false
 ion-range,prop,debounce,number,0,false,false
@@ -875,36 +821,40 @@ ion-range,css-prop,--knob-border-radius
 ion-range,css-prop,--knob-box-shadow
 ion-range,css-prop,--knob-size
 
-ion-refresher,none
-ion-refresher,prop,closeDuration,string,'280ms',false,false
-ion-refresher,prop,disabled,boolean,false,false,false
-ion-refresher,prop,pullFactor,number,1,false,false
-ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
-ion-refresher,prop,pullMin,number,60,false,false
-ion-refresher,prop,snapbackDuration,string,'280ms',false,false
-ion-refresher,method,cancel,cancel() => Promise<void>
-ion-refresher,method,complete,complete() => Promise<void>
-ion-refresher,method,getProgress,getProgress() => Promise<number>
-ion-refresher,event,ionPull,void,true
-ion-refresher,event,ionRefresh,RefresherEventDetail,true
-ion-refresher,event,ionStart,void,true
-
 ion-refresher-content,none
 ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false,false
 ion-refresher-content,prop,pullingText,string | undefined,undefined,false,false
 ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
 ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,false
 
-ion-reorder,shadow
+ion-refresher,none
+ion-refresher,prop,closeDuration,string,'280ms',false,false
+ion-refresher,prop,disabled,boolean,false,false,false
+ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
+ion-refresher,prop,pullMin,number,60,false,false
+ion-refresher,prop,snapbackDuration,string,'280ms',false,false
+ion-refresher,method,cancel,cancel() => void
+ion-refresher,method,complete,complete() => void
+ion-refresher,method,getProgress,getProgress() => Promise<number>
+ion-refresher,event,ionPull,void,true
+ion-refresher,event,ionRefresh,RefresherEventDetail,true
+ion-refresher,event,ionStart,void,true
 
 ion-reorder-group,none
 ion-reorder-group,prop,disabled,boolean,true,false,false
 ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[] | undefined) => Promise<any>
 ion-reorder-group,event,ionItemReorder,ItemReorderEventDetail,true
 
+ion-reorder,shadow
+
 ion-ripple-effect,shadow
 ion-ripple-effect,prop,type,"bounded" | "unbounded",'bounded',false,false
-ion-ripple-effect,method,addRipple,addRipple(x: number, y: number) => Promise<() => void>
+ion-ripple-effect,method,addRipple,addRipple(pageX: number, pageY: number) => Promise<() => void>
+
+ion-route-redirect,none
+ion-route-redirect,prop,from,string,undefined,true,false
+ion-route-redirect,prop,to,null | string | undefined,undefined,true,false
+ion-route-redirect,event,ionRouteRedirectChanged,void,true
 
 ion-route,none
 ion-route,prop,component,string,undefined,true,false
@@ -912,10 +862,9 @@ ion-route,prop,componentProps,undefined | { [key: string]: any; },undefined,fals
 ion-route,prop,url,string,'',false,false
 ion-route,event,ionRouteDataChanged,any,true
 
-ion-route-redirect,none
-ion-route-redirect,prop,from,string,undefined,true,false
-ion-route-redirect,prop,to,null | string | undefined,undefined,true,false
-ion-route-redirect,event,ionRouteRedirectChanged,any,true
+ion-router-outlet,shadow
+ion-router-outlet,prop,animated,boolean,true,false,false
+ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 
 ion-router,none
 ion-router,prop,root,string,'/',false,false
@@ -925,20 +874,6 @@ ion-router,method,push,push(url: string, direction?: RouterDirection) => Promise
 ion-router,event,ionRouteDidChange,RouterEventDetail,true
 ion-router,event,ionRouteWillChange,RouterEventDetail,true
 
-ion-router-link,shadow
-ion-router-link,prop,color,string | undefined,undefined,false,false
-ion-router-link,prop,href,string | undefined,undefined,false,false
-ion-router-link,prop,rel,string | undefined,undefined,false,false
-ion-router-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-router-link,prop,target,string | undefined,undefined,false,false
-ion-router-link,css-prop,--background
-ion-router-link,css-prop,--color
-
-ion-router-outlet,shadow
-ion-router-outlet,prop,animated,boolean,true,false,false
-ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
-ion-router-outlet,prop,mode,"ios" | "md",getIonMode(this),false,false
-
 ion-row,shadow
 
 ion-searchbar,scoped
@@ -950,16 +885,15 @@ ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
 ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,color,string | undefined,undefined,false,false
 ion-searchbar,prop,debounce,number,250,false,false
-ion-searchbar,prop,disabled,boolean,false,false,false
 ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
 ion-searchbar,prop,placeholder,string,'Search',false,false
 ion-searchbar,prop,searchIcon,string,'search',false,false
-ion-searchbar,prop,showCancelButton,boolean | string,'never',false,false
+ion-searchbar,prop,showCancelButton,boolean,false,false,false
 ion-searchbar,prop,spellcheck,boolean,false,false,false
 ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
 ion-searchbar,prop,value,null | string | undefined,'',false,false
 ion-searchbar,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
-ion-searchbar,method,setFocus,setFocus() => Promise<void>
+ion-searchbar,method,setFocus,setFocus() => void
 ion-searchbar,event,ionBlur,void,true
 ion-searchbar,event,ionCancel,void,true
 ion-searchbar,event,ionChange,SearchbarChangeEventDetail,true
@@ -976,21 +910,11 @@ ion-searchbar,css-prop,--placeholder-font-style
 ion-searchbar,css-prop,--placeholder-font-weight
 ion-searchbar,css-prop,--placeholder-opacity
 
-ion-segment,scoped
-ion-segment,prop,color,string | undefined,undefined,false,false
-ion-segment,prop,disabled,boolean,false,false,false
-ion-segment,prop,mode,"ios" | "md",undefined,false,false
-ion-segment,prop,scrollable,boolean,false,false,false
-ion-segment,prop,value,null | string | undefined,undefined,false,false
-ion-segment,event,ionChange,SegmentChangeEventDetail,true
-ion-segment,event,ionStyle,StyleEventDetail,true
-
 ion-segment-button,shadow
 ion-segment-button,prop,checked,boolean,false,false,false
 ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
-ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
 ion-segment-button,event,ionSelect,void,true
 ion-segment-button,css-prop,--background
@@ -1018,6 +942,20 @@ ion-segment-button,css-prop,--padding-start
 ion-segment-button,css-prop,--padding-top
 ion-segment-button,css-prop,--transition
 
+ion-segment,scoped
+ion-segment,prop,color,string | undefined,undefined,false,false
+ion-segment,prop,disabled,boolean,false,false,false
+ion-segment,prop,mode,"ios" | "md",undefined,false,false
+ion-segment,prop,scrollable,boolean,false,false,false
+ion-segment,prop,value,null | string | undefined,undefined,false,false
+ion-segment,event,ionChange,SegmentChangeEventDetail,true
+ion-segment,event,ionStyle,StyleEventDetail,true
+
+ion-select-option,shadow
+ion-select-option,prop,disabled,boolean,false,false,false
+ion-select-option,prop,selected,boolean,false,false,false
+ion-select-option,prop,value,any,undefined,false,false
+
 ion-select,shadow
 ion-select,prop,cancelText,string,'Cancel',false,false
 ion-select,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
@@ -1031,7 +969,7 @@ ion-select,prop,okText,string,'OK',false,false
 ion-select,prop,placeholder,null | string | undefined,undefined,false,false
 ion-select,prop,selectedText,null | string | undefined,undefined,false,false
 ion-select,prop,value,any,undefined,false,false
-ion-select,method,open,open(event?: UIEvent | undefined) => Promise<any>
+ion-select,method,open,open(ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | undefined>
 ion-select,event,ionBlur,void,true
 ion-select,event,ionCancel,void,true
 ion-select,event,ionChange,SelectChangeEventDetail,true
@@ -1041,11 +979,6 @@ ion-select,css-prop,--padding-end
 ion-select,css-prop,--padding-start
 ion-select,css-prop,--padding-top
 
-ion-select-option,shadow
-ion-select-option,prop,disabled,boolean,false,false,false
-ion-select-option,prop,selected,boolean,false,false,false
-ion-select-option,prop,value,any,undefined,false,false
-
 ion-skeleton-text,shadow
 ion-skeleton-text,prop,animated,boolean,false,false,false
 ion-skeleton-text,prop,width,string | undefined,undefined,false,false
@@ -1065,9 +998,9 @@ ion-slides,method,getPreviousIndex,getPreviousIndex() => Promise<number>
 ion-slides,method,isBeginning,isBeginning() => Promise<boolean>
 ion-slides,method,isEnd,isEnd() => Promise<boolean>
 ion-slides,method,length,length() => Promise<number>
-ion-slides,method,lockSwipeToNext,lockSwipeToNext(lock: boolean) => Promise<void>
-ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(lock: boolean) => Promise<void>
-ion-slides,method,lockSwipes,lockSwipes(lock: boolean) => Promise<void>
+ion-slides,method,lockSwipeToNext,lockSwipeToNext(shouldLockSwipeToNext: boolean) => Promise<void>
+ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(shouldLockSwipeToPrev: boolean) => Promise<void>
+ion-slides,method,lockSwipes,lockSwipes(shouldLockSwipes: boolean) => Promise<void>
 ion-slides,method,slideNext,slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>
 ion-slides,method,slidePrev,slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>
 ion-slides,method,slideTo,slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>
@@ -1105,14 +1038,9 @@ ion-split-pane,none
 ion-split-pane,prop,contentId,string | undefined,undefined,false,false
 ion-split-pane,prop,disabled,boolean,false,false,false
 ion-split-pane,prop,when,boolean | string,QUERY['lg'],false,false
-ion-split-pane,event,ionSplitPaneVisible,{ visible: boolean; },true
+ion-split-pane,event,ionSplitPaneVisible,{visible: boolean},true
 ion-split-pane,css-prop,--border
 
-ion-tab,shadow
-ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
-ion-tab,prop,tab,string,undefined,true,false
-ion-tab,method,setActive,setActive() => Promise<void>
-
 ion-tab-bar,shadow
 ion-tab-bar,prop,color,string | undefined,undefined,false,false
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
@@ -1124,14 +1052,11 @@ ion-tab-bar,css-prop,--color
 
 ion-tab-button,shadow
 ion-tab-button,prop,disabled,boolean,false,false,false
-ion-tab-button,prop,download,string | undefined,undefined,false,false
 ion-tab-button,prop,href,string | undefined,undefined,false,false
 ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,undefined,false,false
 ion-tab-button,prop,mode,"ios" | "md",undefined,false,false
-ion-tab-button,prop,rel,string | undefined,undefined,false,false
 ion-tab-button,prop,selected,boolean,false,false,false
 ion-tab-button,prop,tab,string | undefined,undefined,false,false
-ion-tab-button,prop,target,string | undefined,undefined,false,false
 ion-tab-button,css-prop,--background
 ion-tab-button,css-prop,--background-focused
 ion-tab-button,css-prop,--color
@@ -1142,19 +1067,23 @@ ion-tab-button,css-prop,--padding-start
 ion-tab-button,css-prop,--padding-top
 ion-tab-button,css-prop,--ripple-color
 
+ion-tab,shadow
+ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
+ion-tab,prop,tab,string,undefined,true,false
+ion-tab,method,setActive,setActive() => Promise<void>
+
 ion-tabs,shadow
 ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
 ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
 ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>
-ion-tabs,event,ionTabsDidChange,{ tab: string; },false
-ion-tabs,event,ionTabsWillChange,{ tab: string; },false
+ion-tabs,event,ionTabsDidChange,{tab: string},false
+ion-tabs,event,ionTabsWillChange,{tab: string},false
 
 ion-text,shadow
 ion-text,prop,color,string | undefined,undefined,false,false
 ion-text,prop,mode,"ios" | "md",undefined,false,false
 
 ion-textarea,scoped
-ion-textarea,prop,autoGrow,boolean,false,false,false
 ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
@@ -1174,7 +1103,7 @@ ion-textarea,prop,spellcheck,boolean,false,false,false
 ion-textarea,prop,value,null | string | undefined,'',false,false
 ion-textarea,prop,wrap,"hard" | "off" | "soft" | undefined,undefined,false,false
 ion-textarea,method,getInputElement,getInputElement() => Promise<HTMLTextAreaElement>
-ion-textarea,method,setFocus,setFocus() => Promise<void>
+ion-textarea,method,setFocus,setFocus() => void
 ion-textarea,event,ionBlur,void,true
 ion-textarea,event,ionChange,TextareaChangeEventDetail,true
 ion-textarea,event,ionFocus,void,true
@@ -1199,15 +1128,18 @@ ion-title,shadow
 ion-title,prop,color,string | undefined,undefined,false,false
 ion-title,css-prop,--color
 
+ion-toast-controller,none
+ion-toast-controller,method,create,create(opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement>
+ion-toast-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
+ion-toast-controller,method,getTop,getTop() => Promise<HTMLIonToastElement | undefined>
+
 ion-toast,shadow
 ion-toast,prop,animated,boolean,true,false,false
-ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false
 ion-toast,prop,closeButtonText,string | undefined,undefined,false,false
 ion-toast,prop,color,string | undefined,undefined,false,false
 ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-toast,prop,duration,number,0,false,false
 ion-toast,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
-ion-toast,prop,header,string | undefined,undefined,false,false
 ion-toast,prop,keyboardClose,boolean,false,false,false
 ion-toast,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-toast,prop,message,string | undefined,undefined,false,false
@@ -1219,9 +1151,9 @@ ion-toast,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promi
 ion-toast,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-toast,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-toast,method,present,present() => Promise<void>
-ion-toast,event,ionToastDidDismiss,OverlayEventDetail<any>,true
+ion-toast,event,ionToastDidDismiss,OverlayEventDetail,true
 ion-toast,event,ionToastDidPresent,void,true
-ion-toast,event,ionToastWillDismiss,OverlayEventDetail<any>,true
+ion-toast,event,ionToastWillDismiss,OverlayEventDetail,true
 ion-toast,event,ionToastWillPresent,void,true
 ion-toast,css-prop,--background
 ion-toast,css-prop,--border-color
@@ -1231,20 +1163,13 @@ ion-toast,css-prop,--border-width
 ion-toast,css-prop,--box-shadow
 ion-toast,css-prop,--button-color
 ion-toast,css-prop,--color
-ion-toast,css-prop,--end
 ion-toast,css-prop,--height
 ion-toast,css-prop,--max-height
 ion-toast,css-prop,--max-width
 ion-toast,css-prop,--min-height
 ion-toast,css-prop,--min-width
-ion-toast,css-prop,--start
 ion-toast,css-prop,--width
 
-ion-toast-controller,none
-ion-toast-controller,method,create,create(options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>
-ion-toast-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-toast-controller,method,getTop,getTop() => Promise<HTMLIonToastElement | undefined>
-
 ion-toggle,shadow
 ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,string | undefined,undefined,false,false
@@ -1287,6 +1212,6 @@ ion-virtual-scroll,prop,nodeRender,((el: HTMLElement | null, cell: Cell, domInde
 ion-virtual-scroll,prop,renderFooter,((item: any, index: number) => any) | undefined,undefined,false,false
 ion-virtual-scroll,prop,renderHeader,((item: any, index: number) => any) | undefined,undefined,false,false
 ion-virtual-scroll,prop,renderItem,((item: any, index: number) => any) | undefined,undefined,false,false
-ion-virtual-scroll,method,checkEnd,checkEnd() => Promise<void>
-ion-virtual-scroll,method,checkRange,checkRange(offset: number, len?: number) => Promise<void>
+ion-virtual-scroll,method,checkEnd,checkEnd() => void
+ion-virtual-scroll,method,checkRange,checkRange(offset: number, len?: number) => void
 ion-virtual-scroll,method,positionForItem,positionForItem(index: number) => Promise<number>

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "4.6.2",
+  "version": "4.2.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -16,45 +16,45 @@
     "pwa"
   ],
   "main": "dist/index.js",
-  "unpkg": "dist/ionic/ionic.js",
-  "module": "dist/index.mjs",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "jsnext:main": "dist/esm/index.mjs",
-  "collection:main": "dist/collection/index.js",
-  "collection": "dist/collection/collection-manifest.json",
+  "unpkg": "dist/ionic.js",
+  "module": "dist/esm/index.js",
+  "es2015": "dist/esm/es2017/index.js",
+  "es2017": "dist/esm/es2017/index.js",
+  "jsnext:main": "dist/esm/es2017/index.js",
   "types": "dist/types/interface.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "webComponents": "dist/web-components.json",
   "files": [
     "dist/",
     "css/",
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "4.6.1",
-    "tslib": "^1.10.0"
+    "ionicons": "4.5.5"
   },
   "devDependencies": {
-    "@stencil/core": "1.1.5",
-    "@stencil/sass": "1.0.0",
-    "@types/jest": "24.0.13",
+    "@stencil/core": "0.17.3-0",
+    "@stencil/sass": "0.1.1",
+    "@stencil/utils": "latest",
+    "@types/jest": "^23.3.13",
     "@types/node": "10.12.18",
-    "@types/puppeteer": "1.12.4",
+    "@types/puppeteer": "1.11.2",
     "@types/swiper": "4.4.1",
+    "agadoo": "^1.0.0",
+    "autoprefixer": "9.4.6",
     "aws-sdk": "^2.320.0",
     "chromedriver": "^2.38.3",
     "clean-css-cli": "^4.1.11",
-    "fs-extra": "^8.0.1",
-    "jest": "24.8.0",
-    "jest-cli": "24.8.0",
+    "fs-extra": "^7.0.0",
+    "jest": "23.6.0",
+    "jest-cli": "23.6.0",
     "np": "^3.0.4",
     "pixelmatch": "4.0.2",
-    "puppeteer": "1.17.0",
-    "rollup": "1.16.2",
-    "rollup-plugin-node-resolve": "5.1.0",
-    "rollup-plugin-virtual": "^1.0.1",
-    "sass": "^1.22.0",
-    "stylelint": "10.1.0",
-    "stylelint-order": "3.0.0",
+    "puppeteer": "1.11.0",
+    "rollup": "1.1.2",
+    "rollup-plugin-node-resolve": "4.0.0",
+    "stylelint": "9.10.1",
+    "stylelint-order": "2.0.0",
     "swiper": "4.4.6",
     "tslint": "^5.10.0",
     "tslint-ionic-rules": "0.0.21",
@@ -69,7 +69,7 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
-    "css.sass": "sass src/css:./css",
+    "css.sass": "node-sass --output ./css src/css --output-style compressed",
     "lint": "npm run lint.ts && npm run lint.sass",
     "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix",
     "lint.sass": "stylelint 'src/**/*.scss'",
@@ -77,16 +77,14 @@
     "lint.ts": "tslint --project .",
     "lint.ts.fix": "tslint --project . --fix",
     "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
-    "prerender.e2e": "node scripts/testing/prerender-e2e.js",
     "start": "npm run build.css && stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.spec": "stencil test --spec",
-    "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
     "test.e2e": "stencil test --e2e",
     "test.screenshot": "stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/dev.js",
     "test.screenshot.ci": "stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci",
     "test.watch": "jest --watch --no-cache",
-    "test.treeshake": "node scripts/treeshaking.js dist/index.mjs",
+    "test.treeshake": "agadoo dist/collection/index.js",
     "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"
   },
   "author": "Ionic Team",
@@ -98,8 +96,5 @@
   "bugs": {
     "url": "https://github.com/ionic-team/ionic/issues"
   },
-  "homepage": "https://github.com/ionic-team/ionic#readme",
-  "jest": {
-    "preset": "@stencil/core/testing"
-  }
+  "homepage": "https://github.com/ionic-team/ionic#readme"
 }

core/scripts/api-spec-generator.js

@@ -1,21 +1,17 @@
 
-
 const fs = require('fs');
 
 function apiSpecGenerator(opts) {
-  return {
-    type: 'docs-custom',
-    generator: (docsData) => {
-      const content = [];
-      docsData.components.forEach(cmp => generateComponent(cmp, content));
+  return (docsData) => {
+    const content = [];
+    docsData.components.forEach(cmp => generateComponent(cmp, content));
 
-      const contentStr = content.join('\n');
-      return new Promise(resolve => {
-        fs.writeFile(opts.file, contentStr, () => {
-          resolve();
-        });
+    const contentStr = content.join('\n');
+    return new Promise(resolve => {
+      fs.writeFile(opts.file, contentStr, () => {
+        resolve();
       });
-    }
+    });
   };
 }
 

core/scripts/clean.js

@@ -4,7 +4,8 @@ const path = require('path');
 
 const cleanDirs = [
   'dist',
-  'css'
+  'css',
+  '.stencil'
 ];
 
 cleanDirs.forEach(dir => {

core/scripts/treeshaking.js

@@ -1,89 +0,0 @@
-
-const path = require('path');
-const { rollup } = require('rollup');
-const virtual = require('rollup-plugin-virtual');
-const fs = require('fs');
-
-function main() {
-  const input = process.argv[2] || get_input();
-  check(input).then(result => {
-    const relative = path.relative(process.cwd(), input);
-
-    if (result.shaken) {
-      console.error(`Success! ${relative} is fully tree-shakeable`);
-    } else {
-      error(`Failed to tree-shake ${relative}`);
-    }
-  });
-}
-
-
-function error(msg) {
-	console.error(msg);
-	process.exit(1);
-}
-
-function get_input() {
-	if (!fs.existsSync('package.json')) {
-		error(`Could not find package.json`);
-	}
-
-	const pkg = JSON.parse(fs.readFileSync('package.json'), 'utf-8');
-
-	const unresolved = pkg.module || pkg.main || 'index';
-	const resolved = resolve(unresolved);
-
-	if (!resolved) {
-		error(`Could not resolve entry point`);
-	}
-
-	return resolved;
-}
-
-function resolve(file) {
-	if (is_directory(file)) {
-		return if_exists(`${file}/index.mjs`) || if_exists(`${file}/index.js`);
-	}
-
-	return if_exists(file) || if_exists(`${file}.mjs`) || if_exists(`${file}.js`);
-}
-
-function is_directory(file) {
-	try {
-		const stats = fs.statSync(file);
-		return stats.isDirectory();
-	} catch (err) {
-		return false;
-	}
-}
-
-function if_exists(file) {
-	return fs.existsSync(file) ? file : null;
-}
-
-const check = input => {
-	const resolved = path.resolve(input);
-
-	return rollup({
-		input: '__agadoo__',
-		plugins: [
-			virtual({
-				__agadoo__: `import ${JSON.stringify(resolved)}`,
-				'tslib': '',
-			})
-		],
-		onwarn: (warning, handle) => {
-			if (warning.code !== 'EMPTY_BUNDLE') handle(warning);
-		}
-	}).then(bundle => bundle.generate({
-		format: 'es'
-	})).then(o => {
-		const output = o.output;
-		console.log(output);
-		return {
-			shaken: output.length === 1 && output[0].code.trim() === ''
-		};
-	});
-};
-
-main();

core/src/components/action-sheet-controller/action-sheet-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Method } from '@stencil/core';
+import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
 
 import { ActionSheetOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -8,29 +8,22 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 })
 export class ActionSheetController implements ComponentInterface, OverlayController {
 
+  @Prop({ context: 'document' }) doc!: Document;
+
   /**
    * Create an action sheet overlay with action sheet options.
-   *
-   * @param options The options to use to create the action sheet.
    */
   @Method()
-  create(options: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
-    return createOverlay('ion-action-sheet', options);
+  create(opts: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
+    return createOverlay(this.doc.createElement('ion-action-sheet'), opts);
   }
 
   /**
    * Dismiss the open action sheet overlay.
-   *
-   * @param data Any data to emit in the dismiss events.
-   * @param role The role of the element that is dismissing the action sheet.
-   * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the action sheet.
-   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   * @param id The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet.
    */
   @Method()
   dismiss(data?: any, role?: string, id?: string) {
-    return dismissOverlay(document, data, role, 'ion-action-sheet', id);
+    return dismissOverlay(this.doc, data, role, 'ion-action-sheet', id);
   }
 
   /**
@@ -38,6 +31,6 @@ export class ActionSheetController implements ComponentInterface, OverlayControl
    */
   @Method()
   async getTop(): Promise<HTMLIonActionSheetElement | undefined> {
-    return getOverlay(document, 'ion-action-sheet') as HTMLIonActionSheetElement;
+    return getOverlay(this.doc, 'ion-action-sheet') as HTMLIonActionSheetElement;
   }
 }

core/src/components/action-sheet-controller/readme.md

@@ -7,10 +7,16 @@ Action Sheet controllers programmatically control the action sheet component. Ac
 
 ## Methods
 
-### `create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`
+### `create(opts: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`
 
 Create an action sheet overlay with action sheet options.
 
+#### Parameters
+
+| Name   | Type                 | Description |
+| ------ | -------------------- | ----------- |
+| `opts` | `ActionSheetOptions` |             |
+
 #### Returns
 
 Type: `Promise<HTMLIonActionSheetElement>`
@@ -21,6 +27,14 @@ Type: `Promise<HTMLIonActionSheetElement>`
 
 Dismiss the open action sheet overlay.
 
+#### Parameters
+
+| Name   | Type                  | Description |
+| ------ | --------------------- | ----------- |
+| `data` | `any`                 |             |
+| `role` | `string \| undefined` |             |
+| `id`   | `string \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<boolean>`

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

@@ -6,7 +6,7 @@
 
 :host {
   --background: #{$action-sheet-ios-background-color};
-  --background-selected: #{$action-sheet-ios-button-background-selected};
+  --background-selected: #{$action-sheet-ios-button-background-selected)};
   --background-activated: #{$action-sheet-ios-button-background-activated};
 
   text-align: $action-sheet-ios-text-align;

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

@@ -6,9 +6,8 @@
 :host {
   /**
    * @prop --background: Background of the action sheet group
-   * @prop --background-activated: Background of the action sheet button when pressed
+   * @prop --background-activated: Background of the activated action sheet button
    * @prop --background-selected: Background of the selected action sheet button
-   *
    * @prop --color: Color of the action sheet text
    *
    * @prop --min-width: Minimum width of the action sheet
@@ -103,7 +102,7 @@
 .action-sheet-group {
   flex-shrink: 2;
   overscroll-behavior-y: contain;
-  overflow-y: auto;
+  overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   pointer-events: all;
 

core/src/components/action-sheet/action-sheet.tsx

@@ -1,8 +1,7 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 
-import { getIonMode } from '../../global/ionic-global';
-import { ActionSheetButton, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
-import { BACKDROP, dismiss, eventMethod, isCancel, present, safeCall } from '../../utils/overlays';
+import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -10,9 +9,6 @@ import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-action-sheet',
   styleUrls: {
@@ -25,13 +21,18 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   presented = false;
   animation?: Animation;
-  mode = getIonMode(this);
 
   @Element() el!: HTMLElement;
 
+  @Prop({ context: 'config' }) config!: Config;
   /** @internal */
   @Prop() overlayIndex!: number;
 
+  /**
+   * The mode determines which platform styles to use.
+   */
+  @Prop() mode!: Mode;
+
   /**
    * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
    */
@@ -50,7 +51,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   /**
    * An array of buttons for the action sheet.
    */
-  @Prop() buttons: (ActionSheetButton | string)[] = [];
+  @Prop() buttons!: (ActionSheetButton | string)[];
 
   /**
    * Additional classes to apply for custom CSS. If multiple classes are
@@ -127,12 +128,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   /**
    * Dismiss the action sheet overlay after it has been presented.
-   *
-   * @param data Any data to emit in the dismiss events.
-   * @param role The role of the element that is dismissing the action sheet.
-   * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the action sheet.
-   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   @Method()
   dismiss(data?: any, role?: string): Promise<boolean> {
@@ -140,7 +135,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   /**
-   * Returns a promise that resolves when the action sheet did dismiss.
+   * Returns a promise that resolves when the action-sheet did dismiss.
    */
   @Method()
   onDidDismiss(): Promise<OverlayEventDetail> {
@@ -148,7 +143,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   /**
-   * Returns a promise that resolves when the action sheet will dismiss.
+   * Returns a promise that resolves when the action-sheet will dismiss.
    *
    */
   @Method()
@@ -169,13 +164,17 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   private async callButtonHandler(button: ActionSheetButton | undefined) {
-    if (button) {
+    if (button && button.handler) {
       // a handler has been provided, execute it
       // pass the handler the values from the inputs
-      const rtn = await safeCall(button.handler);
-      if (rtn === false) {
-        // if the return value of the handler is false then do not dismiss
-        return false;
+      try {
+        const rtn = await button.handler();
+        if (rtn === false) {
+          // if the return value of the handler is false then do not dismiss
+          return false;
+        }
+      } catch (e) {
+        console.error(e);
       }
     }
     return true;
@@ -190,8 +189,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   hostData() {
-    const mode = getIonMode(this);
-
     return {
       'role': 'dialog',
       'aria-modal': 'true',
@@ -199,8 +196,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         zIndex: 20000 + this.overlayIndex,
       },
       class: {
-        [mode]: true,
-
         ...getClassMap(this.cssClass),
         'action-sheet-translucent': this.translucent
       }
@@ -208,7 +203,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   render() {
-    const mode = getIonMode(this);
     const allButtons = this.getButtons();
     const cancelButton = allButtons.find(b => b.role === 'cancel');
     const buttons = allButtons.filter(b => b.role !== 'cancel');
@@ -230,7 +224,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   {b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
                   {b.text}
                 </span>
-                {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+                {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
               </button>
             )}
           </div>
@@ -260,11 +254,11 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 }
 
-const buttonClass = (button: ActionSheetButton): CssClassMap => {
+function buttonClass(button: ActionSheetButton): CssClassMap {
   return {
     'action-sheet-button': true,
     'ion-activatable': true,
     [`action-sheet-${button.role}`]: button.role !== undefined,
     ...getClassMap(button.cssClass),
   };
-};
+}

core/src/components/action-sheet/animations/ios.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Action Sheet Enter Animation
  */
-export const iosEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
+export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new AnimationC();
 
   const backdropAnimation = new AnimationC();
@@ -24,4 +24,4 @@ export const iosEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): P
     .add(wrapperAnimation);
 
   return Promise.resolve(ani);
-};
+}

core/src/components/action-sheet/animations/ios.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Action Sheet Leave Animation
  */
-export const iosLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
+export function iosLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new AnimationC();
 
   const backdropAnimation = new AnimationC();
@@ -24,4 +24,4 @@ export const iosLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): P
     .add(wrapperAnimation);
 
   return Promise.resolve(ani);
-};
+}

core/src/components/action-sheet/animations/md.enter.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * MD Action Sheet Enter Animation
  */
-export const mdEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
+export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new AnimationC();
 
   const backdropAnimation = new AnimationC();
@@ -24,4 +24,4 @@ export const mdEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Pr
     .add(wrapperAnimation);
 
   return Promise.resolve(ani);
-};
+}

core/src/components/action-sheet/animations/md.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * MD Action Sheet Leave Animation
  */
-export const mdLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
+export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> {
 
   const baseAnimation = new AnimationC();
 
@@ -24,4 +24,4 @@ export const mdLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Pr
     .add(wrapperAnimation);
 
   return Promise.resolve(ani);
-};
+}

core/src/components/action-sheet/readme.md

@@ -126,19 +126,28 @@ async function presentActionSheet() {
 ### React
 
 ```typescript
-import React, { useState } from 'react'
-import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
+import React, { Component } from 'react'
+import { IonActionSheet } from '@ionic/react';
 
-export const ActionSheetExample: React.FunctionComponent = () => {
+type Props = {}
+type State = {
+  showActionSheet: boolean
+}
 
-  const [showActionSheet, setShowActionSheet] = useState(false);
+export default class ActionSheetExample extends Component<Props, State> {
 
-  return (
-    <IonContent>
-      <IonButton onClick={() => setShowActionSheet(true)} expand="block">Show Action Sheet</IonButton>
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showActionSheet: false
+    };
+  }
+
+  render() {
+    return (
       <IonActionSheet
-        isOpen={showActionSheet}
-        onDidDismiss={() => setShowActionSheet(false)}
+        isOpen={this.state.showActionSheet}
+        onDidDismiss={() => this.setState(() => ({ showActionSheet: false }))}
         buttons={[{
           text: 'Delete',
           role: 'destructive',
@@ -174,10 +183,8 @@ export const ActionSheetExample: React.FunctionComponent = () => {
         }]}
       >
       </IonActionSheet>
-    </IonContent>
-
-  );
-
+    );
+  }
 }
 
 ```
@@ -250,29 +257,29 @@ export default {
 
 ## Properties
 
-| Property          | Attribute          | Description                                                                                                                     | Type                                                                                   | Default     |
-| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
-| `animated`        | `animated`         | If `true`, the action sheet will animate.                                                                                       | `boolean`                                                                              | `true`      |
-| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked.                                                     | `boolean`                                                                              | `true`      |
-| `buttons`         | --                 | An array of buttons for the action sheet.                                                                                       | `(string \| ActionSheetButton)[]`                                                      | `[]`        |
-| `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                | `string \| string[] \| undefined`                                                      | `undefined` |
-| `enterAnimation`  | --                 | Animation to use when the action sheet is presented.                                                                            | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
-| `header`          | `header`           | Title for the action sheet.                                                                                                     | `string \| undefined`                                                                  | `undefined` |
-| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                          | `boolean`                                                                              | `true`      |
-| `leaveAnimation`  | --                 | Animation to use when the action sheet is dismissed.                                                                            | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
-| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                               | `"ios" \| "md"`                                                                        | `undefined` |
-| `subHeader`       | `sub-header`       | Subtitle for the action sheet.                                                                                                  | `string \| undefined`                                                                  | `undefined` |
-| `translucent`     | `translucent`      | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. | `boolean`                                                                              | `false`     |
+| Property               | Attribute          | Description                                                                                                                     | Type                                                                                   | Default     |
+| ---------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
+| `animated`             | `animated`         | If `true`, the action sheet will animate.                                                                                       | `boolean`                                                                              | `true`      |
+| `backdropDismiss`      | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked.                                                     | `boolean`                                                                              | `true`      |
+| `buttons` _(required)_ | --                 | An array of buttons for the action sheet.                                                                                       | `(string \| ActionSheetButton)[]`                                                      | `undefined` |
+| `cssClass`             | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                | `string \| string[] \| undefined`                                                      | `undefined` |
+| `enterAnimation`       | --                 | Animation to use when the action sheet is presented.                                                                            | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
+| `header`               | `header`           | Title for the action sheet.                                                                                                     | `string \| undefined`                                                                  | `undefined` |
+| `keyboardClose`        | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                          | `boolean`                                                                              | `true`      |
+| `leaveAnimation`       | --                 | Animation to use when the action sheet is dismissed.                                                                            | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
+| `mode`                 | `mode`             | The mode determines which platform styles to use.                                                                               | `"ios" \| "md"`                                                                        | `undefined` |
+| `subHeader`            | `sub-header`       | Subtitle for the action sheet.                                                                                                  | `string \| undefined`                                                                  | `undefined` |
+| `translucent`          | `translucent`      | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. | `boolean`                                                                              | `false`     |
 
 
 ## Events
 
-| Event                       | Description                             | Type                                   |
-| --------------------------- | --------------------------------------- | -------------------------------------- |
-| `ionActionSheetDidDismiss`  | Emitted after the alert has dismissed.  | `CustomEvent<OverlayEventDetail<any>>` |
-| `ionActionSheetDidPresent`  | Emitted after the alert has presented.  | `CustomEvent<void>`                    |
-| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail<any>>` |
-| `ionActionSheetWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>`                    |
+| Event                       | Description                             | Type                              |
+| --------------------------- | --------------------------------------- | --------------------------------- |
+| `ionActionSheetDidDismiss`  | Emitted after the alert has dismissed.  | `CustomEvent<OverlayEventDetail>` |
+| `ionActionSheetDidPresent`  | Emitted after the alert has presented.  | `CustomEvent<void>`               |
+| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail>` |
+| `ionActionSheetWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>`               |
 
 
 ## Methods
@@ -281,6 +288,13 @@ export default {
 
 Dismiss the action sheet overlay after it has been presented.
 
+#### Parameters
+
+| Name   | Type                  | Description |
+| ------ | --------------------- | ----------- |
+| `data` | `any`                 |             |
+| `role` | `string \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<boolean>`
@@ -289,7 +303,7 @@ Type: `Promise<boolean>`
 
 ### `onDidDismiss() => Promise<OverlayEventDetail<any>>`
 
-Returns a promise that resolves when the action sheet did dismiss.
+Returns a promise that resolves when the action-sheet did dismiss.
 
 #### Returns
 
@@ -299,7 +313,7 @@ Type: `Promise<OverlayEventDetail<any>>`
 
 ### `onWillDismiss() => Promise<OverlayEventDetail<any>>`
 
-Returns a promise that resolves when the action sheet will dismiss.
+Returns a promise that resolves when the action-sheet will dismiss.
 
 #### Returns
 
@@ -320,37 +334,20 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name                     | Description                                        |
-| ------------------------ | -------------------------------------------------- |
-| `--background`           | Background of the action sheet group               |
-| `--background-activated` | Background of the action sheet button when pressed |
-| `--background-selected`  | Background of the selected action sheet button     |
-| `--color`                | Color of the action sheet text                     |
-| `--height`               | height of the action sheet                         |
-| `--max-height`           | Maximum height of the action sheet                 |
-| `--max-width`            | Maximum width of the action sheet                  |
-| `--min-height`           | Minimum height of the action sheet                 |
-| `--min-width`            | Minimum width of the action sheet                  |
-| `--width`                | Width of the action sheet                          |
+| Name                     | Description                                     |
+| ------------------------ | ----------------------------------------------- |
+| `--background`           | Background of the action sheet group            |
+| `--background-activated` | Background of the activated action sheet button |
+| `--background-selected`  | Background of the selected action sheet button  |
+| `--color`                | Color of the action sheet text                  |
+| `--height`               | height of the action sheet                      |
+| `--max-height`           | Maximum height of the action sheet              |
+| `--max-width`            | Maximum width of the action sheet               |
+| `--min-height`           | Minimum height of the action sheet              |
+| `--min-width`            | Minimum width of the action sheet               |
+| `--width`                | Width of the action sheet                       |
 
 
-## Dependencies
-
-### Depends on
-
-- [ion-backdrop](../backdrop)
-- ion-icon
-- [ion-ripple-effect](../ripple-effect)
-
-### Graph
-```mermaid
-graph TD;
-  ion-action-sheet --> ion-backdrop
-  ion-action-sheet --> ion-icon
-  ion-action-sheet --> ion-ripple-effect
-  style ion-action-sheet fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/action-sheet/test/basic/e2e.ts

@@ -38,34 +38,34 @@ test('action-sheet: basic, scroll without cancel', async () => {
  * RTL Tests
  */
 
-test('action-sheet:rtl: basic', async () => {
+test('action-sheet: basic', async () => {
   await testActionSheet(DIRECTORY, '#basic', true);
 });
 
-test('action-sheet:rtl: basic, alert from action sheet', async () => {
+test('action-sheet: basic, alert from action sheet', async () => {
   await testActionSheet(DIRECTORY, '#alertFromActionSheet', true, testActionSheetAlert);
 });
 
-test('action-sheet:rtl: basic, cancel only', async () => {
+test('action-sheet: basic, cancel only', async () => {
   await testActionSheet(DIRECTORY, '#cancelOnly', true);
 });
 
-test('action-sheet:rtl: basic, custom', async () => {
+test('action-sheet: basic, custom', async () => {
   await testActionSheet(DIRECTORY, '#custom', true);
 });
 
-test('action-sheet:rtl: basic, icons', async () => {
+test('action-sheet: basic, icons', async () => {
   await testActionSheet(DIRECTORY, '#icons', true);
 });
 
-test('action-sheet:rtl: basic, no backdrop dismiss', async () => {
+test('action-sheet: basic, no backdrop dismiss', async () => {
   await testActionSheet(DIRECTORY, '#noBackdropDismiss', true, testActionSheetBackdrop);
 });
 
-test('action-sheet:rtl: basic, scrollable options', async () => {
+test('action-sheet: basic, scrollable options', async () => {
   await testActionSheet(DIRECTORY, '#scrollableOptions', true);
 });
 
-test('action-sheet:rtl: basic, scroll without cancel', async () => {
+test('action-sheet: basic, scroll without cancel', async () => {
   await testActionSheet(DIRECTORY, '#scrollWithoutCancel', true);
 });

core/src/components/action-sheet/test/basic/index.html

@@ -8,8 +8,8 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
 
 <body>
   <ion-app>
@@ -22,7 +22,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content class="ion-padding">
+    <ion-content padding>
       <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
       <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
       <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>

core/src/components/action-sheet/test/preview/index.html

@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Action Sheet</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header translucent>
+      <ion-toolbar>
+        <ion-title>Action Sheet</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content padding fullscreen>
+      <ion-action-sheet-controller></ion-action-sheet-controller>
+
+      <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
+      <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
+      <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
+      <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
+      <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
+      <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
+      <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
+      <ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
+
+    </ion-content>
+  </ion-app>
+
+  <script>
+    window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
+
+    async function presentBasic() {
+      const mode = Ionic.mode;
+
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        header: "Albums",
+        buttons: [{
+          text: 'Delete',
+          role: 'destructive',
+          icon: 'trash',
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          icon: 'share',
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          icon: 'arrow-dropright-circle',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          icon: mode === 'md' ? 'heart' : null,
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          icon: mode === 'md' ? 'close' : null,
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentIcons() {
+      const mode = Ionic.mode;
+
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        header: "Albums",
+        buttons: [{
+          text: 'Delete',
+          role: 'destructive',
+          icon: 'trash',
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          icon: 'share',
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          icon: 'arrow-dropright-circle',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          icon: 'heart',
+          role: 'selected',
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          icon: 'close',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      })
+      await actionSheetElement.present();
+    }
+
+    async function presentNoBackdropDismiss() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        backdropDismiss: false,
+        buttons: [{
+          text: 'Archive',
+          handler: () => {
+            console.log('Archive clicked');
+          }
+        }, {
+          text: 'Destructive',
+          role: 'destructive',
+          handler: () => {
+            console.log('Destructive clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentAlert() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [{
+          text: 'Open Alert',
+          handler: () => {
+            console.log('Open Alert clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentScroll() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [
+          {
+            text: 'Add Reaction',
+            handler: () => {
+              console.log('Add Reaction clicked');
+            }
+          }, {
+            text: 'Copy Text',
+            handler: () => {
+              console.log('Copy Text clicked');
+            }
+          }, {
+            text: 'Share Text',
+            handler: () => {
+              console.log('Share Text clicked');
+            }
+          }, {
+            text: 'Copy Link to Message',
+            handler: () => {
+              console.log('Copy Link to Message clicked');
+            }
+          }, {
+            text: 'Remind Me',
+            handler: () => {
+              console.log('Remind Me clicked');
+            }
+          }, {
+            text: 'Pin File',
+            handler: () => {
+              console.log('Pin File clicked');
+            }
+          }, {
+            text: 'Star File',
+            handler: () => {
+              console.log('Star File clicked');
+            }
+          }, {
+            text: 'Mark Unread',
+            handler: () => {
+              console.log('Mark Unread clicked');
+            }
+          }, {
+            text: 'Edit Title',
+            handler: () => {
+              console.log('Edit Title clicked');
+            }
+          }, {
+            text: 'Save Image',
+            handler: () => {
+              console.log('Save Image clicked');
+            }
+          }, {
+            text: 'Copy Image',
+            handler: () => {
+              console.log('Copy Image clicked');
+            }
+          }, {
+            text: 'Delete File',
+            role: 'destructive',
+            handler: () => {
+              console.log('Delete File clicked');
+            }
+          }, {
+            text: 'Cancel',
+            role: 'cancel', // will always sort to be on the bottom
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentScrollNoCancel() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [
+          {
+            text: 'Add Reaction',
+            handler: () => {
+              console.log('Add Reaction clicked');
+            }
+          }, {
+            text: 'Copy Text',
+            handler: () => {
+              console.log('Copy Text clicked');
+            }
+          }, {
+            text: 'Share Text',
+            handler: () => {
+              console.log('Share Text clicked');
+            }
+          }, {
+            text: 'Copy Link to Message',
+            handler: () => {
+              console.log('Copy Link to Message clicked');
+            }
+          }, {
+            text: 'Remind Me',
+            handler: () => {
+              console.log('Remind Me clicked');
+            }
+          }, {
+            text: 'Pin File',
+            handler: () => {
+              console.log('Pin File clicked');
+            }
+          }, {
+            text: 'Star File',
+            handler: () => {
+              console.log('Star File clicked');
+            }
+          }, {
+            text: 'Mark Unread',
+            handler: () => {
+              console.log('Mark Unread clicked');
+            }
+          }, {
+            text: 'Edit Title',
+            handler: () => {
+              console.log('Edit Title clicked');
+            }
+          }, {
+            text: 'Save Image',
+            handler: () => {
+              console.log('Save Image clicked');
+            }
+          }, {
+            text: 'Copy Image',
+            handler: () => {
+              console.log('Copy Image clicked');
+            }
+          }, {
+            text: 'Delete File',
+            role: 'destructive',
+            handler: () => {
+              console.log('Delete File clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentCancelOnly() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel', // will always sort to be on the bottom
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentWithCssClass() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        header: "Custom Css Class",
+        cssClass: "my-class my-custom-class",
+        buttons: [
+          {
+            text: 'Test',
+            role: 'test',
+            cssClass: 'my-cancel-button my-custom-button customClass',
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+  </script>
+</body>
+
+</html>

core/src/components/action-sheet/test/spec/index.html

@@ -8,8 +8,8 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
 
 <body>
   <ion-app>
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content class="ion-padding">
+    <ion-content padding>
       <ion-action-sheet-controller></ion-action-sheet-controller>
 
       <ion-button expand="block" id="spec" onclick="presentSpec()">Spec</ion-button>

core/src/components/action-sheet/test/standalone/index.html

@@ -8,8 +8,8 @@
   <link href="../../../../../css/core.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
 
 <body>
   <button id="basic" onclick="presentBasic()">Basic</button>

core/src/components/action-sheet/test/test.utils.ts

@@ -1,15 +1,19 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-import { generateE2EUrl } from '../../../utils/test/utils';
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
 
-export const testActionSheet = async (
+export async function testActionSheet(
   type: string,
   selector: string,
   rtl = false,
-  afterScreenshotHook = async (..._args: any[]): Promise<void> => {/**/ }
-) => {
+  afterScreenshotHook = async (..._args: any[]): Promise<void> => {/**/},
+  screenshotName: string = cleanScreenshotName(selector)
+) {
   try {
     const pageUrl = generateE2EUrl('action-sheet', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
 
     const page = await newE2EPage({
       url: pageUrl
@@ -23,14 +27,14 @@ export const testActionSheet = async (
     let actionSheet = await page.find('ion-action-sheet');
     await actionSheet.waitForVisible();
 
-    screenshotCompares.push(await page.compareScreenshot());
+    screenshotCompares.push(await page.compareScreenshot(screenshotName));
 
-    await afterScreenshotHook(page, screenshotCompares, actionSheet);
+    await afterScreenshotHook(page, screenshotName, screenshotCompares, actionSheet);
 
     await actionSheet.callMethod('dismiss');
     await actionSheet.waitForNotVisible();
 
-    screenshotCompares.push(await page.compareScreenshot('dismiss'));
+    screenshotCompares.push(await page.compareScreenshot(`dismissed ${screenshotName}`));
 
     actionSheet = await page.find('ion-action-sheet');
     expect(actionSheet).toBe(null);
@@ -42,30 +46,33 @@ export const testActionSheet = async (
   } catch (err) {
     throw err;
   }
-};
+}
 
-export const testActionSheetBackdrop = async (
+export async function testActionSheetBackdrop(
   page: any,
+  screenshotName: string,
   screenshotCompares: any,
   actionSheet: any
-) => {
+) {
   try {
+    console.log('backdrop hook');
     const backdrop = await page.find('ion-backdrop');
     await backdrop.click();
 
-    screenshotCompares.push(await page.compareScreenshot(`dismiss backdrop`));
+    screenshotCompares.push(await page.compareScreenshot(`dismissed backdrop ${screenshotName}`));
 
     const isVisible = await actionSheet.isVisible();
     expect(isVisible).toBe(true);
-  } catch (err) {
+} catch (err) {
     throw err;
   }
-};
+}
 
-export const testActionSheetAlert = async (
+export async function testActionSheetAlert(
   page: any,
+  screenshotName: string,
   screenshotCompares: any
-) => {
+) {
   try {
     const openAlertBtn = await page.find({ text: 'Open Alert' });
     await openAlertBtn.click();
@@ -74,11 +81,11 @@ export const testActionSheetAlert = async (
     await alert.waitForVisible();
     await page.waitFor(250);
 
-    screenshotCompares.push(await page.compareScreenshot(`alert open`));
+    screenshotCompares.push(await page.compareScreenshot(`alert open ${screenshotName}`));
 
     const alertOkayBtn = await page.find({ contains: 'Okay' });
     await alertOkayBtn.click();
   } catch (err) {
     throw err;
   }
-};
+}

core/src/components/action-sheet/test/translucent/index.html

@@ -8,8 +8,8 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
 
 <body>
   <ion-app>
@@ -20,7 +20,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding">
+      <ion-content padding>
         <ion-action-sheet-controller></ion-action-sheet-controller>
 
         <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>

core/src/components/action-sheet/usage/react.md

@@ -1,17 +1,26 @@
 ```typescript
-import React, { useState } from 'react'
-import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
+import React, { Component } from 'react'
+import { IonActionSheet } from '@ionic/react';
 
-export const ActionSheetExample: React.FunctionComponent = () => {
+type Props = {}
+type State = {
+  showActionSheet: boolean
+}
 
-  const [showActionSheet, setShowActionSheet] = useState(false);
+export default class ActionSheetExample extends Component<Props, State> {
 
-  return (
-    <IonContent>
-      <IonButton onClick={() => setShowActionSheet(true)} expand="block">Show Action Sheet</IonButton>
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showActionSheet: false
+    };
+  }
+
+  render() {
+    return (
       <IonActionSheet
-        isOpen={showActionSheet}
-        onDidDismiss={() => setShowActionSheet(false)}
+        isOpen={this.state.showActionSheet}
+        onDidDismiss={() => this.setState(() => ({ showActionSheet: false }))}
         buttons={[{
           text: 'Delete',
           role: 'destructive',
@@ -47,10 +56,8 @@ export const ActionSheetExample: React.FunctionComponent = () => {
         }]}
       >
       </IonActionSheet>
-    </IonContent>
-
-  );
-
+    );
+  }
 }
 
 ```

core/src/components/alert-controller/alert-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Method } from '@stencil/core';
+import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
 
 import { AlertOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -8,29 +8,22 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 })
 export class AlertController implements ComponentInterface, OverlayController {
 
+  @Prop({ context: 'document' }) doc!: Document;
+
   /**
-   * Create an alert overlay with alert options.
-   *
-   * @param options The options to use to create the alert.
+   * Create an alert overlay with alert options
    */
   @Method()
-  create(options: AlertOptions): Promise<HTMLIonAlertElement> {
-    return createOverlay('ion-alert', options);
+  create(opts: AlertOptions): Promise<HTMLIonAlertElement> {
+    return createOverlay(this.doc.createElement('ion-alert'), opts);
   }
 
   /**
    * Dismiss the open alert overlay.
-   *
-   * @param data Any data to emit in the dismiss events.
-   * @param role The role of the element that is dismissing the alert.
-   * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the alert.
-   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   * @param id The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert.
    */
   @Method()
   dismiss(data?: any, role?: string, id?: string) {
-    return dismissOverlay(document, data, role, 'ion-alert', id);
+    return dismissOverlay(this.doc, data, role, 'ion-alert', id);
   }
 
   /**
@@ -38,6 +31,6 @@ export class AlertController implements ComponentInterface, OverlayController {
    */
   @Method()
   async getTop(): Promise<HTMLIonAlertElement | undefined> {
-    return getOverlay(document, 'ion-alert') as HTMLIonAlertElement;
+    return getOverlay(this.doc, 'ion-alert') as HTMLIonAlertElement;
   }
 }

core/src/components/alert-controller/readme.md

@@ -1,6 +1,22 @@
 # ion-alert-controller
 
-Alert controllers programmatically control the alert component. Alerts can be created and dismissed by the alert controller. View the [Alert](../alert) documentation for the list of options to pass upon creation and usage information.
+Alert controllers programmatically control the alert component. Alerts can be created and dismissed from the alert controller. View the [Alert](../alert) documentation for a full list of options to pass upon creation.
+
+
+```javascript
+async function presentAlert() {
+  const alertController = document.querySelector('ion-alert-controller');
+  await alertController.componentOnReady();
+
+  const alert = await alertController.create({
+    header: 'Alert',
+    subHeader: 'Subtitle',
+    message: 'This is an alert message.',
+    buttons: ['OK']
+  });
+  return await alert.present();
+}
+```
 
 
 <!-- Auto Generated Below -->
@@ -8,9 +24,15 @@ Alert controllers programmatically control the alert component. Alerts can be cr
 
 ## Methods
 
-### `create(options: AlertOptions) => Promise<HTMLIonAlertElement>`
+### `create(opts: AlertOptions) => Promise<HTMLIonAlertElement>`
 
-Create an alert overlay with alert options.
+Create an alert overlay with alert options
+
+#### Parameters
+
+| Name   | Type           | Description |
+| ------ | -------------- | ----------- |
+| `opts` | `AlertOptions` |             |
 
 #### Returns
 
@@ -22,6 +44,14 @@ Type: `Promise<HTMLIonAlertElement>`
 
 Dismiss the open alert overlay.
 
+#### Parameters
+
+| Name   | Type                  | Description |
+| ------ | --------------------- | ----------- |
+| `data` | `any`                 |             |
+| `role` | `string \| undefined` |             |
+| `id`   | `string \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<boolean>`

core/src/components/alert/alert.ios.scss

@@ -112,7 +112,7 @@
   max-height: $alert-ios-content-max-height;
 
   border-top: $alert-ios-list-border-top;
-  overflow-y: auto;
+  overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
 

core/src/components/alert/alert.scss

@@ -83,7 +83,7 @@
 .alert-message {
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
-  overflow-y: auto;
+  overflow-y: scroll;
   overscroll-behavior-y: contain;
 }
 

core/src/components/alert/alert.tsx

@@ -1,8 +1,7 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, Watch, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
 
-import { getIonMode } from '../../global/ionic-global';
-import { AlertButton, AlertInput, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
-import { BACKDROP, dismiss, eventMethod, isCancel, present, safeCall } from '../../utils/overlays';
+import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
 
@@ -11,9 +10,6 @@ import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
 @Component({
   tag: 'ion-alert',
   styleUrls: {
@@ -31,13 +27,19 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   presented = false;
   animation?: Animation;
-  mode = getIonMode(this);
 
-  @Element() el!: HTMLIonAlertElement;
+  @Element() el!: HTMLStencilElement;
+
+  @Prop({ context: 'config' }) config!: Config;
 
   /** @internal */
   @Prop() overlayIndex!: number;
 
+  /**
+   * The mode determines which platform styles to use.
+   */
+  @Prop() mode!: Mode;
+
   /**
    * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
    */
@@ -190,12 +192,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   /**
    * Dismiss the alert overlay after it has been presented.
-   *
-   * @param data Any data to emit in the dismiss events.
-   * @param role The role of the element that is dismissing the alert.
-   * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the alert.
-   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   @Method()
   dismiss(data?: any, role?: string): Promise<boolean> {
@@ -204,6 +200,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   /**
    * Returns a promise that resolves when the alert did dismiss.
+   *
    */
   @Method()
   onDidDismiss(): Promise<OverlayEventDetail> {
@@ -212,6 +209,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   /**
    * Returns a promise that resolves when the alert will dismiss.
+   *
    */
   @Method()
   onWillDismiss(): Promise<OverlayEventDetail> {
@@ -223,13 +221,17 @@ export class Alert implements ComponentInterface, OverlayInterface {
       input.checked = input === selectedInput;
     }
     this.activeId = selectedInput.id;
-    safeCall(selectedInput.handler, selectedInput);
+    if (selectedInput.handler) {
+      selectedInput.handler(selectedInput);
+    }
     this.el.forceUpdate();
   }
 
   private cbClick(selectedInput: AlertInput) {
     selectedInput.checked = !selectedInput.checked;
-    safeCall(selectedInput.handler, selectedInput);
+    if (selectedInput.handler) {
+      selectedInput.handler(selectedInput);
+    }
     this.el.forceUpdate();
   }
 
@@ -250,7 +252,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     if (button && button.handler) {
       // a handler has been provided, execute it
       // pass the handler the values from the inputs
-      const returnData = safeCall(button.handler, data);
+      const returnData = button.handler(data);
       if (returnData === false) {
         // if the return value of the handler is false then do not dismiss
         return false;
@@ -300,7 +302,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   private renderCheckbox(labelledby: string | undefined) {
     const inputs = this.processedInputs;
-    const mode = getIonMode(this);
     if (inputs.length === 0) {
       return null;
     }
@@ -325,7 +326,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
                 {i.label}
               </div>
             </div>
-            {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
           </button>
         ))}
       </div>
@@ -390,8 +391,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
   }
 
   hostData() {
-    const mode = getIonMode(this);
-
     return {
       'role': 'dialog',
       'aria-modal': 'true',
@@ -400,7 +399,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
       },
       class: {
         ...getClassMap(this.cssClass),
-        [mode]: true,
         'alert-translucent': this.translucent
       }
     };
@@ -408,7 +406,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   private renderAlertButtons() {
     const buttons = this.processedButtons;
-    const mode = getIonMode(this);
     const alertButtonGroupClass = {
       'alert-button-group': true,
       'alert-button-group-vertical': buttons.length > 2
@@ -420,7 +417,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
             <span class="alert-button-inner">
               {button.text}
             </span>
-            {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
           </button>
         )}
       </div>
@@ -459,11 +456,11 @@ export class Alert implements ComponentInterface, OverlayInterface {
   }
 }
 
-const buttonClass = (button: AlertButton): CssClassMap => {
+function buttonClass(button: AlertButton): CssClassMap {
   return {
     'alert-button': true,
     'ion-focusable': true,
     'ion-activatable': true,
     ...getClassMap(button.cssClass)
   };
-};
+}

core/src/components/alert/animations/ios.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Alert Enter Animation
  */
-export const iosEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
+export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new AnimationC();
 
   const backdropAnimation = new AnimationC();
@@ -24,4 +24,4 @@ export const iosEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): P
     .add(wrapperAnimation);
 
   return Promise.resolve(ani);
-};
+}