remove old lines

fixes #19848

.circleci/config.yml

@@ -108,6 +108,58 @@ jobs:
           paths:
             - "*"
 
+  build-react:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: npm run build
+          working_directory: /tmp/workspace/packages/react
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
+  build-react-router:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/packages/react-router
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/react-router
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: sudo npm link @ionic/react
+          working_directory: /tmp/workspace/packages/react-router
+      - run:
+          command: npm run build
+          working_directory: /tmp/workspace/packages/react-router
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
   test-core-clean-build:
     <<: *defaults
     steps:
@@ -129,6 +181,16 @@ jobs:
           command: npm run lint
           working_directory: /tmp/workspace/core
 
+  test-core-e2e:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm run test.e2e --ci
+          working_directory: /tmp/workspace/core
+
   test-core-spec:
     <<: *defaults
     steps:
@@ -181,6 +243,64 @@ jobs:
           command: npm run lint
           working_directory: /tmp/workspace/angular
 
+  test-react-lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm run lint
+          working_directory: /tmp/workspace/packages/react
+
+  test-react-router-lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm run lint
+          working_directory: /tmp/workspace/packages/react-router
+
+  test-react-spec:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: npm run test.spec
+          working_directory: /tmp/workspace/packages/react
+
+  test-react-router-spec:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: sudo npm link @ionic/react
+          working_directory: /tmp/workspace/packages/react-router
+      - run:
+          command: npm run test.spec
+          working_directory: /tmp/workspace/packages/react-router
+
   test-angular-e2e:
     <<: *defaults
     steps:
@@ -208,6 +328,8 @@ workflows:
           requires: [build-core]
       - test-core-lint:
           requires: [build-core]
+      - test-core-e2e:
+          requires: [build-core]
       - test-core-spec:
           requires: [build-core]
       - test-core-treeshake:
@@ -227,6 +349,18 @@ workflows:
           requires: [build-core]
       - build-angular-server:
           requires: [build-angular]
+      - build-react:
+          requires: [build-core]
+      - build-react-router:
+          requires: [build-core, build-react]
+      - test-react-lint:
+          requires: [build-react]
+      - test-react-router-lint:
+          requires: [build-react-router]
+      - test-react-spec:
+          requires: [build-react]
+      - test-react-router-spec:
+          requires: [build-react-router]
       - test-angular-lint:
           requires: [build-angular]
       - test-angular-e2e:

.github/CONTRIBUTING.md

@@ -2,6 +2,30 @@
 
 Thanks for your interest in contributing to the Ionic Framework! :tada:
 
+- [Contributing Etiquette](#contributing-etiquette)
+- [Creating an Issue](#creating-an-issue)
+- [Creating a Pull Request](#creating-a-pull-request)
+  * [Setup](#setup)
+  * [Core](#core)
+    + [Modifying Components](#modifying-components)
+    + [Preview Changes](#preview-changes)
+    + [Lint Changes](#lint-changes)
+    + [Modifying Documentation](#modifying-documentation)
+    + [Modifying Tests](#modifying-tests)
+      - [Screenshot Tests](#screenshot-tests)
+    + [Building Changes](#building-changes)
+  * [Submit Pull Request](#submit-pull-request)
+- [Commit Message Guidelines](#commit-message-guidelines)
+  * [Commit Message Format](#commit-message-format)
+  * [Revert](#revert)
+  * [Type](#type)
+  * [Scope](#scope)
+  * [Subject](#subject)
+  * [Body](#body)
+  * [Footer](#footer)
+  * [Examples](#examples)
+- [License](#license)
+
 
 ## Contributing Etiquette
 
@@ -116,13 +140,32 @@ Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic
 3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related.
 
 
-## Commit Message Format
+## Commit Message Guidelines
 
-We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).
+We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).
 
-`type(scope): subject`
+### Commit Message Format
+
+We follow the [Conventional Commits specification](https://www.conventionalcommits.org/). A commit message consists of a **header**, **body** and **footer**.  The header has a **type**, **scope** and **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+### Revert
+
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+
+### Type
+
+If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
 
-#### Type
 Must be one of the following:
 
 * **feat**: A new feature
@@ -134,10 +177,12 @@ Must be one of the following:
 * **test**: Adding missing tests
 * **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation
 
-#### Scope
-The scope can be anything specifying place of the commit change. For example `action-sheet`, `button`, `menu`, `nav`, etc. If you make multiple commits for the same component, please keep the naming of this component consistent. For example, if you make a change to navigation and the first commit is `fix(nav)`, you should continue to use `nav` for any more commits related to navigation.
+### Scope
+
+The scope can be anything specifying place of the commit change. Usually it will refer to a component but it can also refer to a utility. For example `action-sheet`, `button`, `css`, `menu`, `nav`, etc. If you make multiple commits for the same component, please keep the naming of this component consistent. For example, if you make a change to navigation and the first commit is `fix(nav)`, you should continue to use `nav` for any more commits related to navigation. As a general rule, if you're modifying a component use the name of the folder.
+
+### Subject
 
-#### Subject
 The subject contains succinct description of the change:
 
 * use the imperative, present tense: "change" not "changed" nor "changes"
@@ -147,6 +192,66 @@ The subject contains succinct description of the change:
 * describe what the commit does, not what issue it relates to or fixes
 * **be brief, yet descriptive** - we should have a good understanding of what the commit does by reading the subject
 
+### Body
+
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
+
+### Footer
+
+The footer should contain any information about **Breaking Changes** and is also the place to
+reference GitHub issues that this commit **Closes**.
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
+
+### Examples
+
+Does not appear in the generated changelog:
+
+```
+docs(changelog): update steps to update
+```
+
+Appears under "Features" header, toast subheader:
+
+```
+feat(toast): add 'buttons' property
+```
+
+Appears under "Bug Fixes" header, skeleton-text subheader, with a link to issue #28:
+
+```
+fix(skeleton-text): use proper color when animated
+
+closes #28
+```
+
+Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
+
+```
+perf(css): remove all css utility attributes
+
+BREAKING CHANGE: The CSS utility attributes have been removed. Use CSS classes instead.
+```
+
+Appears under "Breaking Changes" with the breaking change explanation:
+
+```
+refactor(animations): update to new animation system
+
+BREAKING CHANGE:
+
+Removes the old animation system to use the new Ionic animations.
+```
+
+The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
+
+```
+revert: feat(skeleton-text): add animated property
+
+This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
+```
+
 
 ## License
 

.github/PROCESS.md

@@ -240,6 +240,8 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
     - 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"`
 
+1. *(Optional)* Run `npm run release -- --dry-run` to run the release without publishing and verify the version.
+
 1. Run `npm run release`
 
 1. Click **Merge pull request**. Use the dropdown to select this option if necessary.

.github/weekly-digest.yml

@@ -0,0 +1,7 @@
+# Configuration for weekly-digest - https://github.com/apps/weekly-digest
+publishDay: wed
+canPublishIssues: true
+canPublishPullRequests: true
+canPublishContributors: true
+canPublishStargazers: true
+canPublishCommits: true

.gitignore

@@ -57,6 +57,7 @@ prerender-static.html
 
 # stencil
 angular/css/
+packages/react/css/
 core/css/
 core/hydrate/
 core/loader/

.scripts/common.js

@@ -1,6 +1,7 @@
 const fs = require('fs-extra');
 const path = require('path');
 const execa = require('execa');
+const inquirer = require('inquirer');
 const Listr = require('listr');
 const semver = require('semver');
 const tc = require('turbocolor');
@@ -11,6 +12,8 @@ const packages = [
   'core',
   'docs',
   'angular',
+  'packages/react',
+  'packages/react-router'
 ];
 
 function readPkg(project) {
@@ -32,37 +35,79 @@ function projectPath(project) {
   return path.join(rootDir, project);
 }
 
+async function askTag() {
+  const prompts = [
+    {
+      type: 'list',
+      name: 'tag',
+      message: 'Select npm tag or specify a new tag',
+      choices: ['latest', 'next']
+        .concat([
+          new inquirer.Separator(),
+          {
+            name: 'Other (specify)',
+            value: null
+          }
+        ])
+    },
+    {
+      type: 'confirm',
+      name: 'confirm',
+      message: answers => {
+        return `Will publish to ${tc.cyan(answers.tag)}. Continue?`;
+      }
+    }
+  ];
+
+  const { tag, confirm } = await inquirer.prompt(prompts);
+  return { tag, confirm };
+}
+
 function checkGit(tasks) {
   tasks.push(
     {
       title: 'Check current branch',
-      task: () => execa.stdout('git', ['symbolic-ref', '--short', 'HEAD']).then(branch => {
-        if (branch.indexOf('release') === -1 && branch.indexOf('hotfix') === -1) {
-          throw new Error(`Must be on a "release" or "hotfix" branch.`);
-        }
-      })
+      task: () =>
+        execa.stdout('git', ['symbolic-ref', '--short', 'HEAD']).then(branch => {
+          if (branch.indexOf('release') === -1 && branch.indexOf('hotfix') === -1) {
+            throw new Error(`Must be on a "release" or "hotfix" branch.`);
+          }
+        })
     },
     {
       title: 'Check local working tree',
-      task: () => execa.stdout('git', ['status', '--porcelain']).then(status => {
-        if (status !== '') {
-          throw new Error(`Unclean working tree. Commit or stash changes first.`);
-        }
-      })
+      task: () =>
+        execa.stdout('git', ['status', '--porcelain']).then(status => {
+          if (status !== '') {
+            throw new Error(`Unclean working tree. Commit or stash changes first.`);
+          }
+        })
     },
     {
       title: 'Check remote history',
-      task: () => execa.stdout('git', ['rev-list', '--count', '--left-only', '@{u}...HEAD']).then(result => {
-        if (result !== '0') {
-          throw new Error(`Remote history differs. Please pull changes.`);
-        }
-      })
+      task: () =>
+        execa.stdout('git', ['rev-list', '--count', '--left-only', '@{u}...HEAD']).then(result => {
+          if (result !== '0') {
+            throw new Error(`Remote history differs. Please pull changes.`);
+          }
+        })
     }
   );
 }
 
-const isValidVersion = input => Boolean(semver.valid(input));
+function checkTestDist(tasks) {
+  tasks.push({
+    title: 'Check dist folders for required files',
+    task: () =>
+      execa.stdout('node', ['.scripts/test-dist.js']).then(status => {
+        if (status.indexOf('✅ test.dist') === -1) {
+          throw new Error(`Test Dist did not find some required files`);
+        }
+      })
+  });
+}
 
+const isValidVersion = input => Boolean(semver.valid(input));
 
 function preparePackage(tasks, package, version, install) {
   const projectRoot = projectPath(package);
@@ -74,7 +119,9 @@ function preparePackage(tasks, package, version, install) {
       title: `${pkg.name}: validate new version`,
       task: () => {
         if (!isVersionGreater(pkg.version, version)) {
-          throw new Error(`New version \`${version}\` should be higher than current version \`${pkg.version}\``);
+          throw new Error(
+            `New version \`${version}\` should be higher than current version \`${pkg.version}\``
+          );
         }
       }
     });
@@ -82,7 +129,7 @@ function preparePackage(tasks, package, version, install) {
       projectTasks.push({
         title: `${pkg.name}: install npm dependencies`,
         task: async () => {
-          await fs.remove(path.join(projectRoot, 'node_modules'))
+          await fs.remove(path.join(projectRoot, 'node_modules'));
           await execa('npm', ['i'], { cwd: projectRoot });
         }
       });
@@ -95,6 +142,13 @@ function preparePackage(tasks, package, version, install) {
         title: `${pkg.name}: npm link @ionic/core`,
         task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot })
       });
+
+      if (package === 'packages/react-router') {
+        projectTasks.push({
+          title: `${pkg.name}: npm link @ionic/react`,
+          task: () => execa('npm', ['link', '@ionic/react'], { cwd: projectRoot })
+        });
+      }
     }
 
     if (version) {
@@ -102,16 +156,9 @@ function preparePackage(tasks, package, version, install) {
         title: `${pkg.name}: lint`,
         task: () => execa('npm', ['run', 'lint'], { cwd: projectRoot })
       });
-      projectTasks.push({
-        title: `${pkg.name}: update ionic/core dep to ${version}`,
-        task: () => {
-          updateDependency(pkg, "@ionic/core", version);
-          writePkg(package, pkg);
-        }
-      });
       projectTasks.push({
         title: `${pkg.name}: test`,
-        task: () => execa('npm', ['test'], { cwd: projectRoot })
+        task: async () => await execa('npm', ['test'], { cwd: projectRoot })
       });
     }
 
@@ -119,12 +166,22 @@ function preparePackage(tasks, package, version, install) {
       title: `${pkg.name}: build`,
       task: () => execa('npm', ['run', 'build'], { cwd: projectRoot })
     });
-    if (package === 'core') {
+    if (package === 'core' || package === 'packages/react') {
       projectTasks.push({
         title: `${pkg.name}: npm link`,
         task: () => execa('npm', ['link'], { cwd: projectRoot })
       });
     }
+
+    if (version) {
+      projectTasks.push({
+        title: `${pkg.name}: update ionic/core dep to ${version}`,
+        task: () => {
+          updateDependency(pkg, '@ionic/core', version);
+          writePkg(package, pkg);
+        }
+      });
+    }
   }
 
   // Add project tasks
@@ -134,7 +191,6 @@ function preparePackage(tasks, package, version, install) {
   });
 }
 
-
 function prepareDevPackage(tasks, package, version) {
   const projectRoot = projectPath(package);
   const pkg = readPkg(package);
@@ -152,7 +208,7 @@ function prepareDevPackage(tasks, package, version) {
     projectTasks.push({
       title: `${pkg.name}: update ionic/core dep to ${version}`,
       task: () => {
-        updateDependency(pkg, "@ionic/core", version);
+        updateDependency(pkg, '@ionic/core', version);
         writePkg(package, pkg);
       }
     });
@@ -162,7 +218,7 @@ function prepareDevPackage(tasks, package, version) {
       task: () => execa('npm', ['run', 'build'], { cwd: projectRoot })
     });
 
-    if (package === 'core') {
+    if (package === 'core' || package === 'packages/react') {
       projectTasks.push({
         title: `${pkg.name}: npm link`,
         task: () => execa('npm', ['link'], { cwd: projectRoot })
@@ -181,33 +237,38 @@ function updatePackageVersions(tasks, packages, version) {
   packages.forEach(package => {
     updatePackageVersion(tasks, package, version);
 
-    tasks.push(
-      {
-        title: `${package} update @ionic/core dependency, if present ${tc.dim(`(${version})`)}`,
-        task: async () => {
-          if (package !== 'core') {
-            const pkg = readPkg(package);
-            updateDependency(pkg, '@ionic/core', version);
-            writePkg(package, pkg);
-          }
-        },
+    tasks.push({
+      title: `${package} update @ionic/core dependency, if present ${tc.dim(`(${version})`)}`,
+      task: async () => {
+        if (package !== 'core') {
+          const pkg = readPkg(package);
+          updateDependency(pkg, '@ionic/core', version);
+          writePkg(package, pkg);
+        }
       }
-    )
+    });
+    if (package === 'packages/react-router') {
+      tasks.push({
+        title: `${package} update @ionic/react dependency, if present ${tc.dim(`(${version})`)}`,
+        task: async () => {
+          const pkg = readPkg(package);
+          updateDependency(pkg, '@ionic/react', version);
+          writePkg(package, pkg);
+        }
+      });
+    }
   });
 }
 
-
 function updatePackageVersion(tasks, package, version) {
   const projectRoot = projectPath(package);
 
-  tasks.push(
-    {
-      title: `${package}: update package.json ${tc.dim(`(${version})`)}`,
-      task: async () => {
-        await execa('npm', ['version', version], { cwd: projectRoot });
-      }
+  tasks.push({
+    title: `${package}: update package.json ${tc.dim(`(${version})`)}`,
+    task: async () => {
+      await execa('npm', ['version', version], { cwd: projectRoot });
     }
-  );
+  });
 }
 
 function publishPackages(tasks, packages, version, tag = 'latest') {
@@ -237,7 +298,7 @@ function publishPackages(tasks, packages, version, tag = 'latest') {
       title: `${package}: publish to ${tag} tag`,
       task: async () => {
         await execa('npm', ['publish', '--tag', tag], { cwd: projectRoot });
-      },
+      }
     });
   });
 }
@@ -249,6 +310,9 @@ function updateDependency(pkg, dependency, version) {
   if (pkg.devDependencies && pkg.devDependencies[dependency]) {
     pkg.devDependencies[dependency] = version;
   }
+  if (pkg.peerDependencies && pkg.peerDependencies[dependency]) {
+    pkg.peerDependencies[dependency] = version;
+  }
 }
 
 function isVersionGreater(oldVersion, newVersion) {
@@ -261,12 +325,14 @@ function isVersionGreater(oldVersion, newVersion) {
 function copyCDNLoader(tasks, version) {
   tasks.push({
     title: `Copy CDN loader`,
-    task: () => execa('node', ['copy-cdn-loader.js', version], { cwd: path.join(rootDir, 'core', 'scripts') }),
+    task: () => execa('node', ['copy-cdn-loader.js', version], { cwd: path.join(rootDir, 'core', 'scripts') })
   });
 }
 
 module.exports = {
+  checkTestDist,
   checkGit,
+  askTag,
   isValidVersion,
   isVersionGreater,
   copyCDNLoader,
@@ -281,5 +347,5 @@ module.exports = {
   updateDependency,
   updatePackageVersion,
   updatePackageVersions,
-  writePkg,
+  writePkg
 };

.scripts/prepare.js

@@ -17,9 +17,13 @@ async function main() {
       throw new Error('env.GH_TOKEN is undefined');
     }
 
-    const version = await askVersion();
+    const { version, confirm } = await askVersion();
     const install = process.argv.indexOf('--no-install') < 0;
 
+    if (!confirm) {
+      return;
+    }
+
     // compile and verify packages
     await preparePackages(common.packages, version, install);
 
@@ -85,8 +89,8 @@ async function askVersion() {
     }
   ];
 
-  const {version} = await inquirer.prompt(prompts);
-  return version;
+  const { version, confirm } = await inquirer.prompt(prompts);
+  return { version, confirm };
 }
 
 
@@ -107,13 +111,14 @@ async function preparePackages(packages, version, install) {
   });
 
   // add update package.json of each project
-  packages.forEach(package => {
-    common.updatePackageVersion(tasks, package, version);
-  });
+  common.updatePackageVersions(tasks, packages, version);
 
   // generate changelog
   generateChangeLog(tasks);
 
+  // check dist folders
+  common.checkTestDist(tasks);
+
   // update core readme with version number
   updateCoreReadme(tasks, version);
   common.copyCDNLoader(tasks, version);

.scripts/release.js

@@ -5,6 +5,7 @@
 const tc = require('turbocolor');
 const execa = require('execa');
 const Listr = require('listr');
+const path = require('path');
 const octokit = require('@octokit/rest')()
 const common = require('./common');
 const fs = require('fs-extra');
@@ -12,10 +13,14 @@ const fs = require('fs-extra');
 
 async function main() {
   try {
+    const dryRun = process.argv.indexOf('--dry-run') > -1;
+
     if (!process.env.GH_TOKEN) {
       throw new Error('env.GH_TOKEN is undefined');
     }
 
+    checkProductionRelease();
+
     const tasks = [];
     const { version } = common.readPkg('core');
     const changelog = findChangelog();
@@ -23,15 +28,31 @@ async function main() {
     // repo must be clean
     common.checkGit(tasks);
 
-    // publish each package in NPM
-    common.publishPackages(tasks, common.packages, version);
+    const { tag, confirm } = await common.askTag();
 
-    // push tag to git remote
-    publishGit(tasks, version, changelog);
+    if (!confirm) {
+      return;
+    }
+
+    if(!dryRun) {
+      // publish each package in NPM
+      common.publishPackages(tasks, common.packages, version, tag);
+
+      // push tag to git remote
+      publishGit(tasks, version, changelog);
+    }
 
     const listr = new Listr(tasks);
     await listr.run();
-    console.log(`\nionic ${version} published!! 🎉\n`);
+
+    // Dry run doesn't publish to npm or git
+    if (dryRun) {
+      console.log(`
+        \n${tc.yellow('Did not publish. Remove the "--dry-run" flag to publish:')}\n${tc.green(version)} to ${tc.cyan(tag)}\n
+      `);
+    } else {
+      console.log(`\nionic ${version} published to ${tag}!! 🎉\n`);
+    }
 
   } catch (err) {
     console.log('\n', tc.red(err), '\n');
@@ -39,6 +60,15 @@ async function main() {
   }
 }
 
+function checkProductionRelease() {
+  const corePath = common.projectPath('core');
+  const hasEsm = fs.existsSync(path.join(corePath, 'dist', 'esm'));
+  const hasEsmEs5 = fs.existsSync(path.join(corePath, 'dist', 'esm-es5'));
+  const hasCjs = fs.existsSync(path.join(corePath, 'dist', 'cjs'));
+  if (!hasEsm || !hasEsmEs5 || !hasCjs) {
+    throw new Error('core build is not a production build');
+  }
+}
 
 function publishGit(tasks, version, changelog) {
   const tag = `v${version}`;
@@ -92,10 +122,16 @@ async function publishGithub(version, tag, changelog) {
     token: process.env.GH_TOKEN
   });
 
+  let branch = await execa.stdout('git', ['symbolic-ref', '--short', 'HEAD']);
+
+  if (!branch) {
+    branch = 'master';
+  }
+
   await octokit.repos.createRelease({
     owner: 'ionic-team',
     repo: 'ionic',
-    target_commitish: 'master',
+    target_commitish: branch,
     tag_name: tag,
     name: version,
     body: changelog,

.scripts/test-dist.js

@@ -0,0 +1,82 @@
+const path = require('path');
+const fs = require('fs');
+
+// Test dist build:
+// Double-triple check all the packages
+// and files are good to go before publishing
+[
+  // core
+  {
+    files: ['../core/dist/index.js', '../core/dist/ionic/index.esm.js']
+  },
+  // angular
+  {
+    files: ['../angular/dist/fesm5.cjs.js']
+  },
+  // react
+  {
+    files: ['../packages/react/dist/index.js']
+  },
+  // react-router
+  {
+    files: ['../packages/react-router/dist/index.js']
+  }
+].forEach(testPackage);
+
+function testPackage(testPkg) {
+  if (testPkg.packageJson) {
+    const pkgDir = path.dirname(testPkg.packageJson);
+    const pkgJson = require(testPkg.packageJson);
+
+    if (!pkgJson.name) {
+      throw new Error('missing package.json name: ' + testPkg.packageJson);
+    }
+
+    if (!pkgJson.main) {
+      throw new Error('missing package.json main: ' + testPkg.packageJson);
+    }
+
+    const pkgPath = path.join(pkgDir, pkgJson.main);
+    const pkgImport = require(pkgPath);
+
+    if (testPkg.files) {
+      if (!Array.isArray(pkgJson.files)) {
+        throw new Error(testPkg.packageJson + ' missing "files" property');
+      }
+      testPkg.files.forEach(testPkgFile => {
+        if (!pkgJson.files.includes(testPkgFile)) {
+          throw new Error(testPkg.packageJson + ' missing file ' + testPkgFile);
+        }
+
+        const filePath = path.join(__dirname, pkgDir, testPkgFile);
+        fs.accessSync(filePath);
+      });
+    }
+
+    if (pkgJson.module) {
+      const moduleIndex = path.join(__dirname, pkgDir, pkgJson.module);
+      fs.accessSync(moduleIndex);
+    }
+
+    if (pkgJson.types) {
+      const pkgTypes = path.join(__dirname, pkgDir, pkgJson.types);
+      fs.accessSync(pkgTypes);
+    }
+
+    if (testPkg.exports) {
+      testPkg.exports.forEach(exportName => {
+        const m = pkgImport[exportName];
+        if (!m) {
+          throw new Error('export "' + exportName + '" not found in: ' + testPkg.packageJson);
+        }
+      });
+    }
+  } else if (testPkg.files) {
+    testPkg.files.forEach(file => {
+      const filePath = path.join(__dirname, file);
+      fs.statSync(filePath);
+    });
+  }
+}
+
+console.log(`✅ test.dist`);

CHANGELOG.md

@@ -1,3 +1,307 @@
+## [4.11.4](https://github.com/ionic-team/ionic/compare/v4.11.1...v4.11.4) (2019-11-07)
+
+
+### Bug Fixes
+
+* **react:** check for component unmount, fixes [#19859](https://github.com/ionic-team/ionic/issues/19859) ([7356c40](https://github.com/ionic-team/ionic/commit/7356c401742ce2b3241d6ab05fce0fa65d2f1f8a))
+* **react:** adding multiple subscriptions to lifecycle events, fixes [#19792](https://github.com/ionic-team/ionic/issues/19792) ([#19858](https://github.com/ionic-team/ionic/issues/19858)) ([0a3014d](https://github.com/ionic-team/ionic/commit/0a3014d35e2102570fd3d8c5ada29eb01aab18e9))
+* **react:** add check to warn if no ionpage is found, fixes [#19832](https://github.com/ionic-team/ionic/issues/19832) ([#19857](https://github.com/ionic-team/ionic/issues/19857)) ([628e766](https://github.com/ionic-team/ionic/commit/628e76668ea72baebdb02b9dcfe24c0da837fb08))
+* **react:** expand the location stack to better support back button, fixes [#19748](https://github.com/ionic-team/ionic/issues/19748) ([#19856](https://github.com/ionic-team/ionic/issues/19856)) ([d89508b](https://github.com/ionic-team/ionic/commit/d89508b1b58481d518b89362a8792d05f3f451c9))
+* **react:** adding hardware back button support, fixes(19819) ([#19851](https://github.com/ionic-team/ionic/issues/19851)) ([fd9745d](https://github.com/ionic-team/ionic/commit/fd9745ddcddded76d64220838aef0f599bf4352f))
+* **react:** adding swipe back functionality and routerOutlet ready improvements, fixes [#19818](https://github.com/ionic-team/ionic/issues/19818) ([#19849](https://github.com/ionic-team/ionic/issues/19849)) ([bcc40c8](https://github.com/ionic-team/ionic/commit/bcc40c8d59b723bbdb1dfd318bfb2219eb8df3cf))
+* **react:** create a new overlay each time component is presented, fixes [#19841](https://github.com/ionic-team/ionic/issues/19841), [#19823](https://github.com/ionic-team/ionic/issues/19823) ([#19842](https://github.com/ionic-team/ionic/issues/19842)) ([9fad416](https://github.com/ionic-team/ionic/commit/9fad4161be4859969e14d4d33169ef022052d6bf))
+
+
+## [4.11.3](https://github.com/ionic-team/ionic/compare/v4.11.1...v4.11.3) (2019-10-30)
+
+
+### Bug Fixes
+
+* **react:** adding change events to iontabs, fixes [#19665](https://github.com/ionic-team/ionic/issues/19665) ([#19711](https://github.com/ionic-team/ionic/issues/19711)) ([b7baf24](https://github.com/ionic-team/ionic/commit/b7baf24e5053a379156e6c3d82c2b5d3afa999f1))
+* **react:** adding HashRouter to available ion routers, fixes [#19621](https://github.com/ionic-team/ionic/issues/19621) ([#19683](https://github.com/ionic-team/ionic/issues/19683)) ([fcdbb3c](https://github.com/ionic-team/ionic/commit/fcdbb3ce98747d3b37107904ca110daad95e48bc))
+* **react:** checking if node is actually an element before treating it like one, fixes [#19769](https://github.com/ionic-team/ionic/issues/19769) ([#19783](https://github.com/ionic-team/ionic/issues/19783)) ([9d0caf6](https://github.com/ionic-team/ionic/commit/9d0caf6de070145c4af618847b27e24c49027b8e))
+* **react:** checking isOpen again after async call before opening overlay, fixes [#19755](https://github.com/ionic-team/ionic/issues/19755) ([f70e71a](https://github.com/ionic-team/ionic/commit/f70e71a3d461cdab65626a5a7e1b6f4d03b852b1))
+* **react:** don't remove current view, provide a better method to determine showGoBack fixes [#19731](https://github.com/ionic-team/ionic/issues/19731) and [#19732](https://github.com/ionic-team/ionic/issues/19732) ([31c754d](https://github.com/ionic-team/ionic/commit/31c754dab7ada494ff5f0026d5cf3f7f65198eff))
+* **react:** removing pages from DOM on nav, fixes [#19701](https://github.com/ionic-team/ionic/issues/19701) ([#19712](https://github.com/ionic-team/ionic/issues/19712)) ([ee21d3a](https://github.com/ionic-team/ionic/commit/ee21d3ae43d8c6b076387a58bca655a56c920bcd))
+* **react:** unmount leaving view when using browser back button, fixes [#19749](https://github.com/ionic-team/ionic/issues/19749) ([#19781](https://github.com/ionic-team/ionic/issues/19781)) ([2dc5540](https://github.com/ionic-team/ionic/commit/2dc554091056612f1bcd2751d6eeb41cae488751))
+
+
+
+## [4.11.2](https://github.com/ionic-team/ionic/compare/v4.11.0...v4.11.2) (2019-10-21)
+
+
+### Bug Fixes
+
+* **animations:** ensure all elements are cleaned up when calling .destroy() ([#19654](https://github.com/ionic-team/ionic/issues/19654)) ([d97e167](https://github.com/ionic-team/ionic/commit/d97e167))
+* **header:** collapsible header works in tabs ([#19658](https://github.com/ionic-team/ionic/issues/19658)) ([4853909](https://github.com/ionic-team/ionic/commit/4853909)), closes [#19640](https://github.com/ionic-team/ionic/issues/19640)
+* **ios:** hide leaving view after nav transition to avoid flicker ([#19691](https://github.com/ionic-team/ionic/issues/19691)) ([70e0562](https://github.com/ionic-team/ionic/commit/70e0562)), closes [#19674](https://github.com/ionic-team/ionic/issues/19674)
+* **menu:** clamp out of bounds swipe value ([#19684](https://github.com/ionic-team/ionic/issues/19684)) ([1535e95](https://github.com/ionic-team/ionic/commit/1535e95)), closes [#18927](https://github.com/ionic-team/ionic/issues/18927)
+* **react:** add IonPicker as controller component, fixes [#19620](https://github.com/ionic-team/ionic/issues/19620) ([#19643](https://github.com/ionic-team/ionic/issues/19643)) ([ed98d9e](https://github.com/ionic-team/ionic/commit/ed98d9e))
+* **react:** adding change events to IonTabs, fixes [#19665](https://github.com/ionic-team/ionic/issues/19665) ([#19711](https://github.com/ionic-team/ionic/issues/19711)) ([b7baf24](https://github.com/ionic-team/ionic/commit/b7baf24))
+* **react:** adding HashRouter to available ion routers, fixes [#19621](https://github.com/ionic-team/ionic/issues/19621) ([#19683](https://github.com/ionic-team/ionic/issues/19683)) ([fcdbb3c](https://github.com/ionic-team/ionic/commit/fcdbb3c))
+* **react:** pages no longer hidden when navigating between tabs, fixes [#19646](https://github.com/ionic-team/ionic/issues/19646) ([#19647](https://github.com/ionic-team/ionic/issues/19647)) ([8776556](https://github.com/ionic-team/ionic/commit/8776556))
+* **react:** ensure views are removed from DOM after navigating back, fixes [#19701](https://github.com/ionic-team/ionic/issues/19701) ([#19712](https://github.com/ionic-team/ionic/issues/19712)) ([ee21d3a](https://github.com/ionic-team/ionic/commit/ee21d3a))
+
+
+
+# [5.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v4.11.1...v5.0.0-beta.0) (2019-10-15)
+
+
+### Bug Fixes
+
+* **animations:** ensure all elements are cleaned up when calling .destroy() ([#19654](https://github.com/ionic-team/ionic/issues/19654)) ([2f88237](https://github.com/ionic-team/ionic/commit/2f882373bf08ce6ff7ec2ffb36b73e94c20881ca))
+* **content:** set overscroll only on iOS ([#19470](https://github.com/ionic-team/ionic/issues/19470)) ([63c2008](https://github.com/ionic-team/ionic/commit/63c2008a86de19847677fda7b9fedce73ed7669f)), closes [#19465](https://github.com/ionic-team/ionic/issues/19465)
+* **css:** update responsive display media queries ([#18601](https://github.com/ionic-team/ionic/issues/18601)) ([5d6e077](https://github.com/ionic-team/ionic/commit/5d6e077067c269d1589e7432e5074af6fc64b2fb)), closes [#18600](https://github.com/ionic-team/ionic/issues/18600)
+* **grid:** remove padding on children columns when grid has ion-no-padding ([#19592](https://github.com/ionic-team/ionic/issues/19592)) ([17119f5](https://github.com/ionic-team/ionic/commit/17119f59cf525b90b966e99117137512dbd397b4)), closes [#17459](https://github.com/ionic-team/ionic/issues/17459)
+* **searchbar:** update alignment of chips and other elements in toolbar ([#19596](https://github.com/ionic-team/ionic/issues/19596)) ([637f26b](https://github.com/ionic-team/ionic/commit/637f26b3642a266b6ef3b9d3d71b7327a5d3cc37)), closes [#19495](https://github.com/ionic-team/ionic/issues/19495) [#19502](https://github.com/ionic-team/ionic/issues/19502)
+* **toast:** inherit height in container to center align content ([#19409](https://github.com/ionic-team/ionic/issues/19409)) ([250718a](https://github.com/ionic-team/ionic/commit/250718a40f159fbd99f96d54c11e9a6aea080f04))
+
+
+### Features
+
+* **components:** cascade mode from parent to child components ([#19369](https://github.com/ionic-team/ionic/issues/19369)) ([3dd5f05](https://github.com/ionic-team/ionic/commit/3dd5f057604dcae7b017accdd37f4f3518a1f113)), closes [#18285](https://github.com/ionic-team/ionic/issues/18285)
+* **menu:** default to overlay for ios menu ([#19063](https://github.com/ionic-team/ionic/issues/19063)) ([dbf6a44](https://github.com/ionic-team/ionic/commit/dbf6a448ff3539fda2f182e00fa21435fcd60493)), closes [#18662](https://github.com/ionic-team/ionic/issues/18662)
+* **overlays:** add global backdrop opacity variable for animations ([#19533](https://github.com/ionic-team/ionic/issues/19533)) ([bd22926](https://github.com/ionic-team/ionic/commit/bd22926c4995b2d953a08aac7125241929f78f9e)), closes [#16446](https://github.com/ionic-team/ionic/issues/16446)
+
+
+### Performance Improvements
+
+* **animations:** do not create setTimeout if infinite iterations ([#19632](https://github.com/ionic-team/ionic/issues/19632)) ([0d699fb](https://github.com/ionic-team/ionic/commit/0d699fb2e40b1481d8a63457dce3c58fa45976a3)), closes [#19627](https://github.com/ionic-team/ionic/issues/19627)
+* **animations:** wrap loops in requestAnimationFrame call ([#19630](https://github.com/ionic-team/ionic/issues/19630)) ([589e67e](https://github.com/ionic-team/ionic/commit/589e67e4af3c2c5e42984f82cbd83d0246029535)), closes [#19629](https://github.com/ionic-team/ionic/issues/19629)
+
+
+### Breaking Changes
+
+> We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the console.
+
+* **all:** mode is now cascaded from parent to child component. If this is not desired set a different mode on the child component. ([#19369](https://github.com/ionic-team/ionic/issues/19369)) ([55462d7](https://github.com/ionic-team/ionic/commit/55462d7a0935f57b6855f9bd1bf788bfcf532bc3))
+* **anchor:** remove `ion-anchor`, use `ion-router-link` instead. ([#18935](https://github.com/ionic-team/ionic/issues/18935)) ([e7cd197](https://github.com/ionic-team/ionic/commit/e7cd197af79cdf87f04bc769e0367c7e93c0aa0b))
+* **card:** convert card to shadow. ([#19395](https://github.com/ionic-team/ionic/issues/19395)) ([08bb60d](https://github.com/ionic-team/ionic/commit/08bb60dcbba3140bb2da64bb74217af8a36a266d))
+* **css:** responsive display media queries in the display CSS file have been updated. Instead of using the maximum value of that breakpoint (for `.ion-hide-{breakpoint}-down` classes) the maximum of the media query will be the minimum of that breakpoint. ([#18601](https://github.com/ionic-team/ionic/issues/18601)) ([40a8bff](https://github.com/ionic-team/ionic/commit/40a8bffcd54882300906243781abc12776c61ca6))
+* **css:** remove all CSS utility attributes. Use CSS classes instead. See the documentation for the correct class names: https://ionicframework.com/docs/layout/css-utilities ([#18956](https://github.com/ionic-team/ionic/issues/18956)) ([04862df](https://github.com/ionic-team/ionic/commit/04862df7e1029a4e6c188536cb573ddfd57e9c85))
+
+  BEFORE:
+
+  ```html
+  <ion-header text-center></ion-header>
+  <ion-content padding></ion-content>
+  <ion-label text-wrap></ion-label>
+  <ion-item wrap></ion-item>
+  ```
+
+  AFTER:
+
+  ```html
+  <ion-header class="ion-text-center"></ion-header>
+  <ion-content class="ion-padding"></ion-content>
+  <ion-label class="ion-text-wrap"></ion-label>
+  <ion-item class="ion-wrap"></ion-item>
+  ```
+* **events:** remove the Events service. ([#19600](https://github.com/ionic-team/ionic/issues/19600)) ([8d4a721](https://github.com/ionic-team/ionic/commit/8d4a721c6675c13d1f84c455bb222af60be34312))
+  - Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
+  - Use "Redux" for advanced state management: https://ngrx.io
+* **header/footer:** remove `no-border` attribute from header/footer, use `ion-no-border` class instead. ([#18954](https://github.com/ionic-team/ionic/issues/18954)) ([d9f6119](https://github.com/ionic-team/ionic/commit/d9f61197ffc62af10243a6719cc08200fd57ff8b))
+* **menu:** iOS menu now defaults to overlay, set `type` to `"reveal"` to get the old behavior. ([#19063](https://github.com/ionic-team/ionic/issues/19063)) ([ccb54a1](https://github.com/ionic-team/ionic/commit/ccb54a1255ca2a303c27e5a0cf68f4e3fb86a2fb))
+* **menu-controller:** remove `swipeEnable()`, use `swipeGesture()` instead. ([#19526](https://github.com/ionic-team/ionic/issues/19526)) ([30bd8fd](https://github.com/ionic-team/ionic/commit/30bd8fd739974926f0eaadddc33c50b546be4887))
+* **nav:** remove `ion-nav-pop`, `ion-nav-push` and `ion-nav-set-root`. Use `ion-nav-link` with `routerDirection` instead. ([#19240](https://github.com/ionic-team/ionic/issues/19240)) ([e334d73](https://github.com/ionic-team/ionic/commit/e334d73e544efddf7335c4ce9a5382f8a34d013e))
+* **searchbar:** remove boolean values from `showCancelButton`, use string values: `"always"`, `"focus"`, `"never"`. ([#18953](https://github.com/ionic-team/ionic/issues/18953)) ([508e186](https://github.com/ionic-team/ionic/commit/508e1868ad672ded49ddababd7a506ff1721534d))
+
+  BEFORE:
+
+  ```html
+  <ion-searchbar show-cancel-button>
+  <ion-searchbar show-cancel-button="true">
+  <ion-searchbar show-cancel-button="false">
+  ```
+
+  AFTER:
+
+  ```html
+  <ion-searchbar show-cancel-button="focus">
+  <ion-searchbar show-cancel-button="focus">
+  <ion-searchbar show-cancel-button="never">
+  ```
+* **scss:** remove `scss` files from `dist/`, use CSS variables to theme instead. ([#19292](https://github.com/ionic-team/ionic/issues/19292)) ([6450aff](https://github.com/ionic-team/ionic/commit/6450aff080c561c60c140000b89ff340edeeaeca))
+* **skeleton-text:** remove `width` property. Use CSS instead. ([#18936](https://github.com/ionic-team/ionic/issues/18936)) ([7c3db79](https://github.com/ionic-team/ionic/commit/7c3db79c23dac599aa8131753b33b1ed3487d776))
+* **split-pane:** remove `main` attribute. Use `contentId` instead. ([#19511](https://github.com/ionic-team/ionic/issues/19511)) ([02d7841](https://github.com/ionic-team/ionic/commit/02d784140ce0fc75718781454e8dd8a2f621ee0d))
+
+  BEFORE:
+
+  ```html
+  <ion-split-pane>
+    ...
+    <div main>...</div>
+  </ion-split-pane>
+  ```
+
+  AFTER:
+
+  ```html
+  <ion-split-pane content-id="main-content">
+    ...
+    <div id="main-content">...</div>
+  </ion-split-pane>
+  ```
+* **theming:** ionic default colors have been updated. ([#19279](https://github.com/ionic-team/ionic/issues/19279)) ([7f4cf08](https://github.com/ionic-team/ionic/commit/7f4cf08d996f90ae90064a351f8e373ce7a16799))
+* **toast:** remove `showCloseButton` and `closeButtonText`, add a button using the `buttons` property with `role: 'cancel'` instead. ([#18957](https://github.com/ionic-team/ionic/issues/18957)) ([ad7f112](https://github.com/ionic-team/ionic/commit/ad7f112e1eb04e41e697936454e63977d1bde34b))
+
+
+
+## [4.11.1](https://github.com/ionic-team/ionic/compare/v4.11.0...v4.11.1) (2019-10-14)
+
+
+### Bug Fixes
+
+* **build:** properly update peer dependencies ([#19639](https://github.com/ionic-team/ionic/issues/19639)) ([b552daa](https://github.com/ionic-team/ionic/commit/b552daa))
+* **react:** add IonPicker as controller component, fixes [#19620](https://github.com/ionic-team/ionic/issues/19620) ([#19643](https://github.com/ionic-team/ionic/issues/19643)) ([ed98d9e](https://github.com/ionic-team/ionic/commit/ed98d9e))
+* **react:** handle tab back nav better, fixes [#19646](https://github.com/ionic-team/ionic/issues/19646) ([#19647](https://github.com/ionic-team/ionic/issues/19647)) ([8776556](https://github.com/ionic-team/ionic/commit/8776556))
+* **react:** moving tslint and friends to devDependencies ([#19624](https://github.com/ionic-team/ionic/issues/19624)) ([7f4b77d](https://github.com/ionic-team/ionic/commit/7f4b77d))
+
+
+
+# [4.11.0 Sodium](https://github.com/ionic-team/ionic/compare/v4.10.3...v4.11.0) (2019-10-09)
+
+Ionic React! Enjoy! 🧂 🌊 🐼
+
+## [4.10.3](https://github.com/ionic-team/ionic/compare/v4.10.2...v4.10.3) (2019-10-09)
+
+
+### Bug Fixes
+
+* **content:** set overscroll only on iOS ([#19470](https://github.com/ionic-team/ionic/issues/19470)) ([63c2008](https://github.com/ionic-team/ionic/commit/63c2008a86de19847677fda7b9fedce73ed7669f)), closes [#19465](https://github.com/ionic-team/ionic/issues/19465)
+* **searchbar:** update alignment of chips and other elements in toolbar ([#19596](https://github.com/ionic-team/ionic/issues/19596)) ([637f26b](https://github.com/ionic-team/ionic/commit/637f26b3642a266b6ef3b9d3d71b7327a5d3cc37)), closes [#19495](https://github.com/ionic-team/ionic/issues/19495) [#19502](https://github.com/ionic-team/ionic/issues/19502)
+
+
+
+## [4.10.2](https://github.com/ionic-team/ionic/compare/v4.10.1...v4.10.2) (2019-10-08)
+
+
+### Bug Fixes
+
+* **overlay:** ensure lifecycle events fire properly ([#19579](https://github.com/ionic-team/ionic/issues/19579)) ([a7b9642](https://github.com/ionic-team/ionic/commit/a7b9642)), closes [#19576](https://github.com/ionic-team/ionic/issues/19576)
+
+
+
+## [4.10.1](https://github.com/ionic-team/ionic/compare/v4.10.0...v4.10.1) (2019-10-07)
+
+
+### Bug Fixes
+
+* **animation:** animation timer fallback now accounts for iterations ([#19527](https://github.com/ionic-team/ionic/issues/19527)) ([9f5ed23](https://github.com/ionic-team/ionic/commit/9f5ed23))
+* **css:** update deprecations to remove wrap ([#19535](https://github.com/ionic-team/ionic/issues/19535)) ([bfb704e](https://github.com/ionic-team/ionic/commit/bfb704e)), closes [#19499](https://github.com/ionic-team/ionic/issues/19499)
+* **header:** fix collapsing iOS header when using with split pane ([#19480](https://github.com/ionic-team/ionic/issues/19480)) ([dea1c26](https://github.com/ionic-team/ionic/commit/dea1c26)), closes [#19541](https://github.com/ionic-team/ionic/issues/19541)
+* **list:** add bottom border for first item in inset list ([#19525](https://github.com/ionic-team/ionic/issues/19525)) ([71b8853](https://github.com/ionic-team/ionic/commit/71b8853)), closes [#19507](https://github.com/ionic-team/ionic/issues/19507)
+* **md:** fix flicker when navigating back in MD mode on certain Android devices ([#19553](https://github.com/ionic-team/ionic/issues/19553)) ([19ee21a](https://github.com/ionic-team/ionic/commit/19ee21a)), closes [#19491](https://github.com/ionic-team/ionic/issues/19491)
+* **searchbar:** update padding and button alignment ([#19532](https://github.com/ionic-team/ionic/issues/19532)) ([77658e6](https://github.com/ionic-team/ionic/commit/77658e6)), closes [#19502](https://github.com/ionic-team/ionic/issues/19502)
+
+
+
+# [4.10.0 Neon](https://github.com/ionic-team/ionic/compare/v4.9.1...v4.10.0) (2019-09-27)
+
+
+### Bug Fixes
+
+* **angular:** add warning if initialized more than once ([#19393](https://github.com/ionic-team/ionic/issues/19393)) ([e98769e](https://github.com/ionic-team/ionic/commit/e98769e))
+* **animation:** set property defaults to avoid inconsistencies ([#19321](https://github.com/ionic-team/ionic/issues/19321)) ([1cbb52c](https://github.com/ionic-team/ionic/commit/1cbb52c))
+* **animation:** fallback to CSS Animations on older versions of Chrome ([#19288](https://github.com/ionic-team/ionic/issues/19288)) ([2d39c07](https://github.com/ionic-team/ionic/commit/2d39c07)), closes [#19272](https://github.com/ionic-team/ionic/issues/19272)
+* **animation:** animations of duration 0 now run in Safari ([#19287](https://github.com/ionic-team/ionic/issues/19287)) ([4e544f1](https://github.com/ionic-team/ionic/commit/4e544f1)), closes [#19285](https://github.com/ionic-team/ionic/issues/19285)
+* **components:** fix crash in IE11 when using classList add() or remove() ([#19460](https://github.com/ionic-team/ionic/issues/19460)) ([b4d92c6](https://github.com/ionic-team/ionic/commit/b4d92c6))
+* **components:** improve CSS Variable support in IE11 ([#19473](https://github.com/ionic-team/ionic/issues/19473)) ([44ad074](https://github.com/ionic-team/ionic/commit/44ad074))
+* **content:** remove pointer-events from iOS transition shadow ([#19471](https://github.com/ionic-team/ionic/issues/19471)) ([8a52c7d](https://github.com/ionic-team/ionic/commit/8a52c7d)), closes [#19466](https://github.com/ionic-team/ionic/issues/19466)
+* **menu:** menus show proper drop shadows ([#19454](https://github.com/ionic-team/ionic/issues/19454)) ([eab0865](https://github.com/ionic-team/ionic/commit/eab0865)), closes [#19387](https://github.com/ionic-team/ionic/issues/19387)
+* **radio-group:** get radios before caching value to avoid infinite loop ([#19448](https://github.com/ionic-team/ionic/issues/19448)) ([cf223e4](https://github.com/ionic-team/ionic/commit/cf223e4)), closes [#19277](https://github.com/ionic-team/ionic/issues/19277)
+* **react:** update events to use proper types ([c79e74b](https://github.com/ionic-team/ionic/commit/c79e74b))
+* **router-outlet:** hide leaving view after transition finishes ([#19335](https://github.com/ionic-team/ionic/issues/19335)) ([bfa17d1](https://github.com/ionic-team/ionic/commit/bfa17d1))
+
+
+### Features
+
+* **config:** expose getMode() and deprecate Config.set() ([#19104](https://github.com/ionic-team/ionic/issues/19104)) ([0f05ea4](https://github.com/ionic-team/ionic/commit/0f05ea4))
+* **docs:** add VSCode docs support ([#19309](https://github.com/ionic-team/ionic/issues/19309)) ([a3f345c](https://github.com/ionic-team/ionic/commit/a3f345c))
+* **title:** add support for small title ([#19215](https://github.com/ionic-team/ionic/issues/19215)) ([e27962d](https://github.com/ionic-team/ionic/commit/e27962d)), closes [#18898](https://github.com/ionic-team/ionic/issues/18898)
+* **title:** add support for large title (experimental) ([#19268](https://github.com/ionic-team/ionic/issues/19268)) ([923312e](https://github.com/ionic-team/ionic/commit/923312e)), closes [#16885](https://github.com/ionic-team/ionic/issues/16885)
+
+
+### Performance Improvements
+
+* **animation:** avoid ngzone with requestAnimationFrame ([#19457](https://github.com/ionic-team/ionic/issues/19457)) ([8ca97ce](https://github.com/ionic-team/ionic/commit/8ca97ce))
+
+
+
+## [4.9.1](https://github.com/ionic-team/ionic/compare/v4.9.0...v4.9.1) (2019-09-16)
+
+
+### Bug Fixes
+
+* **platform:** properly detect iPads running iPadOS ([#19258](https://github.com/ionic-team/ionic/issues/19258)) ([4a90096](https://github.com/ionic-team/ionic/commit/4a90096))
+
+
+
+# [4.9.0 Fluorine](https://github.com/ionic-team/ionic/compare/v4.8.1...v4.9.0) (2019-09-04)
+
+
+### Bug Fixes
+
+* **all:** allow elements to be reused once removed from the DOM ([#18963](https://github.com/ionic-team/ionic/pull/18963)) ([48a2763](https://github.com/ionic-team/ionic/commit/48a2763)), closes [#18843](https://github.com/ionic-team/ionic/issues/18843) [#17344](https://github.com/ionic-team/ionic/issues/17344) [#16453](https://github.com/ionic-team/ionic/issues/16453) [#15879](https://github.com/ionic-team/ionic/issues/15879) [#15788](https://github.com/ionic-team/ionic/issues/15788) [#15484](https://github.com/ionic-team/ionic/issues/15484) [#17890](https://github.com/ionic-team/ionic/issues/17890) [#16364](https://github.com/ionic-team/ionic/issues/16364)
+* **animation:** add correct `onFinish` interface parameters ([#19199](https://github.com/ionic-team/ionic/issues/19199)) ([a81653b](https://github.com/ionic-team/ionic/commit/a81653b))
+* **animation:** improve Web Animation feature detection accuracy ([#19212](https://github.com/ionic-team/ionic/issues/19212)) ([6eca5b0](https://github.com/ionic-team/ionic/commit/6eca5b0)), closes [#19205](https://github.com/ionic-team/ionic/issues/19205)
+* **animation:** properly clean up elements when using `destroy` ([#19210](https://github.com/ionic-team/ionic/issues/19210)) ([93f2064](https://github.com/ionic-team/ionic/commit/93f2064))
+* **segment:** do not emit ionChange until didLoad ([#19218](https://github.com/ionic-team/ionic/issues/19218)) ([9751f14](https://github.com/ionic-team/ionic/commit/9751f14)), closes [#19204](https://github.com/ionic-team/ionic/issues/19204)
+
+### Features
+
+* **nav-link:** add `nav-link` and deprecate `nav-push`, `nav-pop`, and `nav-set-root` ([#18909](https://github.com/ionic-team/ionic/issues/18909)) ([c3044f5](https://github.com/ionic-team/ionic/commit/c3044f5))
+* **slides:** expose full Swiper API ([#19137](https://github.com/ionic-team/ionic/issues/19137)) ([e1fa461](https://github.com/ionic-team/ionic/commit/e1fa461))
+
+
+
+## [4.8.1](https://github.com/ionic-team/ionic/compare/v4.8.0...v4.8.1) (2019-08-27)
+
+
+### Bug Fixes
+
+* **animation:** enable backwards compatibility for overlay animations ([#19160](https://github.com/ionic-team/ionic/issues/19160)) ([fb70980](https://github.com/ionic-team/ionic/commit/fb70980))
+* **gesture:** account for negative step values with Web Animations ([#19196](https://github.com/ionic-team/ionic/issues/19196)) ([b3c7436](https://github.com/ionic-team/ionic/commit/b3c7436))
+* **ios:** clear opacity on toolbar background after iOS transition ([#19169](https://github.com/ionic-team/ionic/issues/19169)) ([fa958a5](https://github.com/ionic-team/ionic/commit/fa958a5))
+* **md:** set fill mode on MD transition to `both` ([#19161](https://github.com/ionic-team/ionic/issues/19161)) ([0e8ab49](https://github.com/ionic-team/ionic/commit/0e8ab49))
+
+
+
+# [4.8.0 Oxygen](https://github.com/ionic-team/ionic/compare/v4.7.4...v4.8.0) (2019-08-21)
+
+
+### Bug Fixes
+
+* **alert:** apply styling to disabled items ([#18545](https://github.com/ionic-team/ionic/issues/18545)) ([67ed89d](https://github.com/ionic-team/ionic/commit/67ed89d))
+* **platform:** properly detect Electron platform ([#19044](https://github.com/ionic-team/ionic/issues/19044)) ([e8cdda0](https://github.com/ionic-team/ionic/commit/e8cdda0)), closes [#19043](https://github.com/ionic-team/ionic/issues/19043)
+* **toggle:** change background to use CSS variable ([#19012](https://github.com/ionic-team/ionic/issues/19012)) ([94e525c](https://github.com/ionic-team/ionic/commit/94e525c)), closes [#18940](https://github.com/ionic-team/ionic/issues/18940)
+* **transition:** enable iOS transition shadow by default ([#19051](https://github.com/ionic-team/ionic/issues/19051)) ([a5d3c6b](https://github.com/ionic-team/ionic/commit/a5d3c6b))
+
+
+### Features
+
+* **animation:** add animation utility (experimental) ([#18918](https://github.com/ionic-team/ionic/issues/18918)) ([30ca46a](https://github.com/ionic-team/ionic/commit/30ca46a))
+* **gesture:** add gesture utility (experimental) ([#18918](https://github.com/ionic-team/ionic/issues/18918)) ([30ca46a](https://github.com/ionic-team/ionic/commit/30ca46a))
+* **searchbar:** add `inputmode` property ([#18980](https://github.com/ionic-team/ionic/issues/18980)) ([1187dc2](https://github.com/ionic-team/ionic/commit/1187dc2))
+* **spinner:** add circular spinner for MD default ([#19052](https://github.com/ionic-team/ionic/issues/19052)) ([e33cf85](https://github.com/ionic-team/ionic/commit/e33cf85))
+
+
+
+## [4.7.4](https://github.com/ionic-team/ionic/compare/v4.7.3...v4.7.4) (2019-08-07)
+
+
+### Bug Fixes
+
+* **core:** remove extra semicolons being rendered ([#19033](https://github.com/ionic-team/ionic/issues/19033)) ([39f0768](https://github.com/ionic-team/ionic/commit/39f0768))
+
+
+
+## [4.7.3](https://github.com/ionic-team/ionic/compare/v4.7.2...v4.7.3) (2019-08-07)
+
+* **core:** fix an issue with production builds of `@ionic/core`
+
+
+
 ## [4.7.2](https://github.com/ionic-team/ionic/compare/v4.7.1...v4.7.2) (2019-08-07)
 
 
@@ -36,13 +340,13 @@ With this version comes support for Angular 8! Follow the below steps to update.
     $ npm install @ionic/angular-toolkit@2.0.0 -D
     ```
 
-1. Update `@angular/core` and `@angular/cli`:
+2. Update `@angular/core` and `@angular/cli`:
 
     ```shell
     $ npx ng update @angular/core @angular/cli
     ```
 
-1. Update `@angular-devkit` dependencies:
+3. Update `@angular-devkit` dependencies:
 
     ```shell
     $ npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest

README.md

@@ -13,7 +13,7 @@ Ionic is based on [Web Components](https://www.webcomponents.org/introduction) a
 | **Core** | [`@ionic/core`](https://www.npmjs.com/package/@ionic/core) | [![version](https://img.shields.io/npm/v/@ionic/core/latest.svg)](https://www.npmjs.com/package/@ionic/core) | [`README.md`](core/README.md)
 | **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [![version](https://img.shields.io/npm/v/@ionic/angular/latest.svg)](https://www.npmjs.com/package/@ionic/angular) | [`README.md`](angular/README.md)
 | **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [![version](https://img.shields.io/npm/v/@ionic/vue/latest.svg)](https://www.npmjs.com/package/@ionic/vue) | [`README.md`](vue/README.md)
-| **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [![version](https://img.shields.io/npm/v/@ionic/react/latest.svg)](https://www.npmjs.com/package/@ionic/react) | [`README.md`](react/README.md)
+| **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [![version](https://img.shields.io/npm/v/@ionic/react/latest.svg)](https://www.npmjs.com/package/@ionic/react) | [`README.md`](packages/react/README.md)
 
 Looking for the `ionic-angular` package? Ionic 3 has been moved to the [`ionic-v3`](https://github.com/ionic-team/ionic-v3) repo. See [Earlier Versions](#earlier-versions).
 

angular/BREAKING.md

@@ -62,7 +62,7 @@ A list of the breaking changes introduced to each component in Ionic Angular v4.
 
 ## Action Sheet
 
-The `title`, `subTitle` and `enableBackdropDismiss` properties has been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
+The `title`, `subTitle` and `enableBackdropDismiss` properties have been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
 
 **Old Usage Example:**
 
@@ -89,7 +89,7 @@ await actionSheet.present();
 
 ## Alert
 
-The `title`, `subTitle` and `enableBackdropDismiss` properties has been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
+The `title`, `subTitle` and `enableBackdropDismiss` properties have been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
 
 **Old Usage Example:**
 
@@ -498,7 +498,7 @@ The `<ion-fab>` container was previously placed inside of the fixed content by d
 
 ### Markup Changed
 
-The Grid has been refactored in order to support css variables and a dynamic number of columns. The following column attributes have been changed.
+The Grid has been refactored in order to support CSS variables and a dynamic number of columns. The following column attributes have been changed.
 
 _In the following examples, `{breakpoint}` refers to the optional screen breakpoint (xs, sm, md, lg, xl) and `{value}` refers to the number of columns (`auto` or a number between `1` and `12`)._
 
@@ -507,7 +507,7 @@ _In the following examples, `{breakpoint}` refers to the optional screen breakpo
 - `push-{breakpoint}-{value}` attributes have been renamed to `push-{breakpoint}=“{value}”`
 - `pull-{breakpoint}-{value}` attributes have been renamed to `pull-{breakpoint}=“{value}”`
 
-Customizing the padding and width of a grid should now be done with css variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/content/layout/grid.md).
+Customizing the padding and width of a grid should now be done with CSS variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/content/layout/grid.md).
 
 ## Icon
 
@@ -1092,7 +1092,7 @@ openLoading() {
 ```javascript
 async openLoading() {
   let loading = this.loadingCtrl.create({
-    content: 'Loading...'
+    message: 'Loading...'
   });
 
   await loading.present();
@@ -1798,7 +1798,7 @@ To include the stylesheet for testing such as in a Plunker, Codepen, or anywhere
 
 #### Production
 
-To use the css in production, we recommend importing it into a global file, such as `app/global.scss`:
+To use the CSS in production, we recommend importing it into a global file, such as `app/global.scss`:
 
 ```css
 /** Basic CSS for Ionic Apps */

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "4.7.2",
+  "version": "5.0.0-beta.0",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -49,7 +49,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "4.7.2",
+    "@ionic/core": "5.0.0-beta.0",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

angular/src/app-initialize.ts

@@ -5,10 +5,16 @@ import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
 import { raf } from './util/util';
 
+let didInitialize = false;
+
 export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
   return (): any => {
     const win: IonicWindow | undefined = doc.defaultView as any;
     if (win) {
+      if (didInitialize) {
+        console.warn('Ionic Angular was already initialized. Make sure IonicModule.forRoot() is just called once.');
+      }
+      didInitialize = true;
       const Ionic = win.Ionic = win.Ionic || {};
 
       Ionic.config = {

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

@@ -74,16 +74,16 @@ const getClasses = (element: HTMLElement) => {
 
 const setClasses = (element: HTMLElement, classes: string[]) => {
   const classList = element.classList;
-
-  classList.remove(
+  [
     'ion-valid',
     'ion-invalid',
     'ion-touched',
     'ion-untouched',
     'ion-dirty',
     'ion-pristine'
-  );
-  classList.add(...classes);
+  ].forEach(c => classList.remove(c));
+
+  classes.forEach(c => classList.add(c));
 };
 
 const startsWith = (input: string, search: string): boolean => {

angular/src/directives/navigation/nav-params.ts

@@ -38,7 +38,7 @@ export class NavParams {
    *
    * @param param Which param you want to look up
    */
-  get(param: string): any {
+  get<T = any>(param: string): T {
     return this.data[param];
   }
 }

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

@@ -230,7 +230,8 @@ export class StackController {
     const leavingEl = leavingView ? leavingView.element : undefined;
     const containerEl = this.containerEl;
     if (enteringEl && enteringEl !== leavingEl) {
-      enteringEl.classList.add('ion-page', 'ion-page-invisible');
+      enteringEl.classList.add('ion-page');
+      enteringEl.classList.add('ion-page-invisible');
       if (enteringEl.parentElement !== containerEl) {
         containerEl.appendChild(enteringEl);
       }

angular/src/directives/proxies-list.txt

@@ -43,9 +43,7 @@ d.IonApp,
   d.IonMenuButton,
   d.IonMenuToggle,
   d.IonNav,
-  d.IonNavPop,
-  d.IonNavPush,
-  d.IonNavSetRoot,
+  d.IonNavLink,
   d.IonNote,
   d.IonProgressBar,
   d.IonRadio,

angular/src/directives/proxies-utils.ts

@@ -1,7 +1,7 @@
 /* tslint:disable */
 import { fromEvent } from 'rxjs';
 
-export function proxyInputs(Cmp: any, inputs: string[]) {
+export const proxyInputs = (Cmp: any, inputs: string[]) => {
   const Prototype = Cmp.prototype;
   inputs.forEach(item => {
     Object.defineProperty(Prototype, item, {
@@ -11,9 +11,9 @@ export function proxyInputs(Cmp: any, inputs: string[]) {
       },
     });
   });
-}
+};
 
-export function proxyMethods(Cmp: any, methods: string[]) {
+export const proxyMethods = (Cmp: any, methods: string[]) => {
   const Prototype = Cmp.prototype;
   methods.forEach(methodName => {
     Prototype[methodName] = function() {
@@ -21,8 +21,8 @@ export function proxyMethods(Cmp: any, methods: string[]) {
       return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
     };
   });
-}
+};
 
-export function proxyOutputs(instance: any, el: any, events: string[]) {
+export const proxyOutputs = (instance: any, el: any, events: string[]) => {
   events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
-}
+};

angular/src/directives/proxies.ts

@@ -75,7 +75,7 @@ export class IonButton {
 proxyInputs(IonButton, ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'href', 'mode', 'rel', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']);
 
 export declare interface IonButtons extends Components.IonButtons {}
-@Component({ selector: 'ion-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
+@Component({ selector: 'ion-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['collapse'] })
 export class IonButtons {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -83,6 +83,7 @@ export class IonButtons {
     this.el = r.nativeElement;
   }
 }
+proxyInputs(IonButtons, ['collapse']);
 
 export declare interface IonCard extends Components.IonCard {}
 @Component({ selector: 'ion-card', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerDirection', 'target', 'type'] })
@@ -269,7 +270,7 @@ export class IonGrid {
 proxyInputs(IonGrid, ['fixed']);
 
 export declare interface IonHeader extends Components.IonHeader {}
-@Component({ selector: 'ion-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['mode', 'translucent'] })
+@Component({ selector: 'ion-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['collapse', 'mode', 'translucent'] })
 export class IonHeader {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -277,7 +278,7 @@ export class IonHeader {
     this.el = r.nativeElement;
   }
 }
-proxyInputs(IonHeader, ['mode', 'translucent']);
+proxyInputs(IonHeader, ['collapse', 'mode', 'translucent']);
 
 export declare interface IonIcon extends Components.IonIcon {}
 @Component({ selector: 'ion-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
@@ -505,37 +506,16 @@ export class IonNav {
 proxyMethods(IonNav, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']);
 proxyInputs(IonNav, ['animated', 'animation', 'root', 'rootParams', 'swipeGesture']);
 
-export declare interface IonNavPop extends Components.IonNavPop {}
-@Component({ selector: 'ion-nav-pop', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
-export class IonNavPop {
+export declare interface IonNavLink extends Components.IonNavLink {}
+@Component({ selector: 'ion-nav-link', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps', 'routerDirection'] })
+export class IonNavLink {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
   }
 }
-
-export declare interface IonNavPush extends Components.IonNavPush {}
-@Component({ selector: 'ion-nav-push', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps'] })
-export class IonNavPush {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-proxyInputs(IonNavPush, ['component', 'componentProps']);
-
-export declare interface IonNavSetRoot extends Components.IonNavSetRoot {}
-@Component({ selector: 'ion-nav-set-root', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps'] })
-export class IonNavSetRoot {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-proxyInputs(IonNavSetRoot, ['component', 'componentProps']);
+proxyInputs(IonNavLink, ['component', 'componentProps', 'routerDirection']);
 
 export declare interface IonNote extends Components.IonNote {}
 @Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
@@ -676,7 +656,7 @@ export class IonRow {
 }
 
 export declare interface IonSearchbar extends Components.IonSearchbar {}
-@Component({ selector: 'ion-searchbar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
+@Component({ selector: 'ion-searchbar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
 export class IonSearchbar {
   ionInput!: EventEmitter<CustomEvent>;
   ionChange!: EventEmitter<CustomEvent>;
@@ -692,18 +672,17 @@ export class IonSearchbar {
   }
 }
 proxyMethods(IonSearchbar, ['setFocus', 'getInputElement']);
-proxyInputs(IonSearchbar, ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
+proxyInputs(IonSearchbar, ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
 
 export declare interface IonSegment extends Components.IonSegment {}
 @Component({ selector: 'ion-segment', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'mode', 'scrollable', 'value'] })
 export class IonSegment {
   ionChange!: EventEmitter<CustomEvent>;
-  ionStyle!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionChange', 'ionStyle']);
+    proxyOutputs(this, this.el, ['ionChange']);
   }
 }
 proxyInputs(IonSegment, ['color', 'disabled', 'mode', 'scrollable', 'value']);
@@ -750,7 +729,7 @@ export class IonSelectOption {
 proxyInputs(IonSelectOption, ['disabled', 'selected', 'value']);
 
 export declare interface IonSkeletonText extends Components.IonSkeletonText {}
-@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated', 'width'] })
+@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated'] })
 export class IonSkeletonText {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -758,7 +737,7 @@ export class IonSkeletonText {
     this.el = r.nativeElement;
   }
 }
-proxyInputs(IonSkeletonText, ['animated', 'width']);
+proxyInputs(IonSkeletonText, ['animated']);
 
 export declare interface IonSlide extends Components.IonSlide {}
 @Component({ selector: 'ion-slide', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
@@ -796,7 +775,7 @@ export class IonSlides {
     proxyOutputs(this, this.el, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']);
   }
 }
-proxyMethods(IonSlides, ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes']);
+proxyMethods(IonSlides, ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes', 'getSwiper']);
 proxyInputs(IonSlides, ['mode', 'options', 'pager', 'scrollbar']);
 
 export declare interface IonSpinner extends Components.IonSpinner {}
@@ -884,7 +863,7 @@ export class IonThumbnail {
 }
 
 export declare interface IonTitle extends Components.IonTitle {}
-@Component({ selector: 'ion-title', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color'] })
+@Component({ selector: 'ion-title', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'size'] })
 export class IonTitle {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -892,7 +871,7 @@ export class IonTitle {
     this.el = r.nativeElement;
   }
 }
-proxyInputs(IonTitle, ['color']);
+proxyInputs(IonTitle, ['color', 'size']);
 
 export declare interface IonToggle extends Components.IonToggle {}
 @Component({ selector: 'ion-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value'] })

angular/src/index.ts

@@ -20,7 +20,6 @@ export * from './directives/proxies';
 export { AngularDelegate } from './providers/angular-delegate';
 export { ActionSheetController } from './providers/action-sheet-controller';
 export { AlertController } from './providers/alert-controller';
-export { Events } from './providers/events';
 export { LoadingController } from './providers/loading-controller';
 export { MenuController } from './providers/menu-controller';
 export { PickerController } from './providers/picker-controller';
@@ -31,6 +30,8 @@ export { ToastController } from './providers/toast-controller';
 export { NavController } from './providers/nav-controller';
 export { DomController } from './providers/dom-controller';
 export { Config } from './providers/config';
+export { AnimationController } from './providers/animation-controller';
+export { GestureController } from './providers/gesture-controller';
 
 // ROUTER STRATEGY
 export { IonicRouteStrategy } from './util/ionic-router-reuse-strategy';

angular/src/ionic-module.ts

@@ -13,7 +13,7 @@ import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
 import { IonTabs } from './directives/navigation/ion-tabs';
 import { NavDelegate } from './directives/navigation/nav-delegate';
 import { RouterLinkDelegate } from './directives/navigation/router-link-delegate';
-import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
+import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
 import { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
 import { VirtualHeader } from './directives/virtual-scroll/virtual-header';
 import { VirtualItem } from './directives/virtual-scroll/virtual-item';
@@ -66,9 +66,7 @@ const DECLARATIONS = [
   IonMenuButton,
   IonMenuToggle,
   IonNav,
-  IonNavPop,
-  IonNavPush,
-  IonNavSetRoot,
+  IonNavLink,
   IonNote,
   IonProgressBar,
   IonRadio,

angular/src/providers/animation-controller.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Animation, createAnimation, getTimeGivenProgression } from '@ionic/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AnimationController {
+  /**
+   * Create a new animation
+   */
+  create(animationId?: string): Animation {
+    return createAnimation(animationId);
+  }
+
+  /**
+   * EXPERIMENTAL
+   *
+   * Given a progression and a cubic bezier function,
+   * this utility returns the time value(s) at which the
+   * cubic bezier reaches the given time progression.
+   *
+   * If the cubic bezier never reaches the progression
+   * the result will be an empty array.
+   *
+   * This is most useful for switching between easing curves
+   * when doing a gesture animation (i.e. going from linear easing
+   * during a drag, to another easing when `progressEnd` is called)
+   */
+  easingTime(p0: number[], p1: number[], p2: number[], p3: number[], progression: number): number[] {
+    return getTimeGivenProgression(p0, p1, p2, p3, progression);
+  }
+}

angular/src/providers/config.ts

@@ -33,6 +33,7 @@ export class Config {
   }
 
   set(key: keyof IonicConfig, value?: any) {
+    console.warn(`[DEPRECATION][Config]: The Config.set() method is deprecated and will be removed in the next major release.`);
     const c = getConfig();
     if (c) {
       c.set(key, value);
@@ -44,7 +45,7 @@ export const ConfigToken = new InjectionToken<any>('USERCONFIG');
 
 const getConfig = (): CoreConfig | null => {
   if (typeof (window as any) !== 'undefined') {
-    const Ionic = (window as IonicWindow).Ionic;
+    const Ionic = (window as any as IonicWindow).Ionic;
     if (Ionic && Ionic.config) {
       return Ionic.config;
     }

angular/src/providers/events.ts

@@ -1,76 +0,0 @@
-import { Injectable } from '@angular/core';
-
-export type EventHandler = (...args: any[]) => any;
-@Injectable({
-  providedIn: 'root',
-})
-export class Events {
-  private c = new Map<string, EventHandler[]>();
-
-  /**
-   * Subscribe to an event topic. Events that get posted to that topic will trigger the provided handler.
-   *
-   * @param topic the topic to subscribe to
-   * @param handler the event handler
-   */
-  subscribe(topic: string, ...handlers: EventHandler[]) {
-    let topics = this.c.get(topic);
-    if (!topics) {
-      this.c.set(topic, topics = []);
-    }
-    topics.push(...handlers);
-  }
-
-  /**
-   * Unsubscribe from the given topic. Your handler will no longer receive events published to this topic.
-   *
-   * @param topic the topic to unsubscribe from
-   * @param handler the event handler
-   *
-   * @return true if a handler was removed
-   */
-  unsubscribe(topic: string, handler?: EventHandler): boolean {
-    if (!handler) {
-      return this.c.delete(topic);
-    }
-
-    const topics = this.c.get(topic);
-    if (!topics) {
-      return false;
-    }
-
-    // We need to find and remove a specific handler
-    const index = topics.indexOf(handler);
-
-    if (index < 0) {
-      // Wasn't found, wasn't removed
-      return false;
-    }
-    topics.splice(index, 1);
-    if (topics.length === 0) {
-      this.c.delete(topic);
-    }
-    return true;
-  }
-
-  /**
-   * Publish an event to the given topic.
-   *
-   * @param topic the topic to publish to
-   * @param eventData the data to send as the event
-   */
-  publish(topic: string, ...args: any[]): any[] | null {
-    const topics = this.c.get(topic);
-    if (!topics) {
-      return null;
-    }
-    return topics.map(handler => {
-      try {
-        return handler(...args);
-      } catch (e) {
-        console.error(e);
-        return null;
-      }
-    });
-  }
-}

angular/src/providers/gesture-controller.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { Gesture, GestureConfig, PressRecognizerOptions, createGesture, createPressRecognizer } from '@ionic/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GestureController {
+  /**
+   * Create a new gesture
+   */
+  create(opts: GestureConfig): Gesture {
+    return createGesture(opts);
+  }
+
+  /**
+   * Create a new Press recognizer gesture
+   */
+  pressRecognizer(opts: PressRecognizerOptions): Gesture {
+    return createPressRecognizer(opts);
+  }
+}

angular/src/providers/menu-controller.ts

@@ -1,24 +1,18 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
+import { menuController } from '@ionic/core';
 
-import { proxyMethod } from '../util/util';
-
-const CTRL = 'ion-menu-controller';
 @Injectable({
   providedIn: 'root',
 })
 export class MenuController {
 
-  constructor(@Inject(DOCUMENT) private doc: any) {
-  }
-
   /**
    * Programmatically open the Menu.
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu is fully opened
    */
-  open(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'open', menuId);
+  open(menuId?: string) {
+    return menuController.open(menuId);
   }
 
   /**
@@ -28,8 +22,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu is fully closed
    */
-  close(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'close', menuId);
+  close(menuId?: string) {
+    return menuController.close(menuId);
   }
 
   /**
@@ -38,8 +32,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu has been toggled
    */
-  toggle(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'toggle', menuId);
+  toggle(menuId?: string) {
+    return menuController.toggle(menuId);
   }
 
   /**
@@ -50,20 +44,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu, which is useful for chaining.
    */
-  enable(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'enable', shouldEnable, menuId);
-  }
-
-  /**
-   * Used to enable or disable the ability to swipe open the menu.
-   * @param shouldEnable  True if it should be swipe-able, false if not.
-   * @param [menuId]  Optionally get the menu by its id, or side.
-   * @return Returns the instance of the menu, which is useful for chaining.
-   * @deprecated Use swipeGesture() instead
-   */
-  swipeEnable(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
-    console.warn('MenuController.swipeEnable is deprecated. Use MenuController.swipeGesture() instead');
-    return this.swipeGesture(shouldEnable, menuId);
+  enable(shouldEnable: boolean, menuId?: string) {
+    return menuController.enable(shouldEnable, menuId);
   }
 
   /**
@@ -72,8 +54,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu, which is useful for chaining.
    */
-  swipeGesture(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'swipeGesture', shouldEnable, menuId);
+  swipeGesture(shouldEnable: boolean, menuId?: string) {
+    return menuController.swipeGesture(shouldEnable, menuId);
   }
 
   /**
@@ -81,16 +63,16 @@ export class MenuController {
    * @return Returns true if the specified menu is currently open, otherwise false.
    * If the menuId is not specified, it returns true if ANY menu is currenly open.
    */
-  isOpen(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'isOpen', menuId);
+  isOpen(menuId?: string) {
+    return menuController.isOpen(menuId);
   }
 
   /**
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns true if the menu is currently enabled, otherwise false.
    */
-  isEnabled(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'isEnabled', menuId);
+  isEnabled(menuId?: string) {
+    return menuController.isEnabled(menuId);
   }
 
   /**
@@ -102,21 +84,21 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu if found, otherwise `null`.
    */
-  get(menuId?: string): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'get', menuId);
+  get(menuId?: string) {
+    return menuController.get(menuId);
   }
 
   /**
    * @return Returns the instance of the menu already opened, otherwise `null`.
    */
-  getOpen(): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'getOpen');
+  getOpen() {
+    return menuController.getOpen();
   }
 
   /**
    * @return Returns an array of all menu instances.
    */
-  getMenus(): Promise<HTMLIonMenuElement[]> {
-    return proxyMethod(CTRL, this.doc, 'getMenus');
+  getMenus() {
+    return menuController.getMenus();
   }
 }

angular/src/util/util.ts

@@ -1,4 +1,3 @@
-import { HTMLStencilElement } from '../types/interfaces';
 
 declare const __zone_symbol__requestAnimationFrame: any;
 declare const requestAnimationFrame: any;
@@ -12,18 +11,3 @@ export const raf = (h: any) => {
   }
   return setTimeout(h);
 };
-
-export const proxyMethod = (ctrlName: string, doc: Document, methodName: string, ...args: any[]) => {
-  const controller = ensureElementInBody(ctrlName, doc);
-  return controller.componentOnReady()
-    .then(() => (controller as any)[methodName].apply(controller, args));
-};
-
-export const ensureElementInBody = (elementName: string, doc: Document) => {
-  let element = doc.querySelector(elementName);
-  if (!element) {
-    element = doc.createElement(elementName);
-    doc.body.appendChild(element);
-  }
-  return element as HTMLStencilElement;
-};

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

@@ -1,4 +1,4 @@
-// @ts-check
+  // @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
@@ -23,7 +23,7 @@ exports.config = {
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
-    defaultTimeoutInterval: 30000,
+    defaultTimeoutInterval: 70000,
     print: function() {}
   },
   onPrepare() {

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

@@ -17,6 +17,15 @@ describe('tabs', () => {
       await testState(1, 'account');
     });
 
+    it('should navigate between tabs and ionChange events should be dispatched ', async () => {
+      let tab = await testTabTitle('Tab 1 - Page 1');
+      expect(await tab.$('.segment-changed').getText()).toEqual('false');
+
+      await element(by.css('#tab-button-contact')).click();
+      tab = await testTabTitle('Tab 2 - Page 1');
+      expect(await tab.$('.segment-changed').getText()).toEqual('false');
+    });
+
     it('should simulate stack + double tab click', async () => {
       let tab = await getSelectedTab() as ElementFinder;
       await tab.$('#goto-tab1-page2').click();

angular/test/test-app/karma.conf.js

@@ -8,8 +8,6 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {

angular/test/test-app/package.json

@@ -15,49 +15,46 @@
     "compile:server": "webpack --config webpack.server.config.js --progress --colors",
     "serve:ssr": "node dist/server",
     "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
-    "build:client-and-server-bundles": "npm run build && ng run test-app:server:production"
+    "build:client-and-server-bundles": "npm run build && ng run test-app:server:production --bundleDependencies all"
   },
   "dependencies": {
-    "@angular/animations": "~8.2.0",
-    "@angular/common": "~8.2.0",
-    "@angular/compiler": "~8.2.0",
-    "@angular/core": "~8.2.0",
-    "@angular/forms": "~8.2.0",
-    "@angular/platform-browser": "~8.2.0",
-    "@angular/platform-browser-dynamic": "~8.2.0",
-    "@angular/platform-server": "~8.2.0",
-    "@angular/router": "~8.2.0",
+    "@angular/animations": "^8.2.8",
+    "@angular/common": "^8.2.8",
+    "@angular/compiler": "^8.2.8",
+    "@angular/core": "^8.2.8",
+    "@angular/forms": "^8.2.8",
+    "@angular/platform-browser": "^8.2.8",
+    "@angular/platform-browser-dynamic": "^8.2.8",
+    "@angular/platform-server": "^8.2.8",
+    "@angular/router": "^8.2.8",
     "@ionic/angular": "^4.7.0",
     "@ionic/angular-server": "^0.0.2",
     "@nguniversal/express-engine": "~8.1.1",
     "@nguniversal/module-map-ngfactory-loader": "~8.1.1",
     "core-js": "^2.6.2",
     "express": "^4.15.2",
-    "rxjs": "~6.5.2",
+    "rxjs": "^6.5.3",
     "tslib": "^1.9.0",
-    "zone.js": "~0.10.0"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.802.0",
-    "@angular/cli": "~8.2.0",
-    "@angular/compiler-cli": "~8.2.0",
-    "@angular/language-service": "~8.2.0",
-    "@types/jasmine": "~3.3.16",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~12.6.8",
-    "codelyzer": "^5.0.1",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.2.0",
-    "karma-chrome-launcher": "~3.0.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.2",
-    "ts-loader": "^5.2.0",
-    "ts-node": "~8.3.0",
+    "@angular-devkit/build-angular": "^0.803.6",
+    "@angular/cli": "^8.3.6",
+    "@angular/compiler-cli": "^8.2.8",
+    "@angular/language-service": "^8.2.8",
+    "@types/jasmine": "3.4.1",
+    "@types/node": "12.7.8",
+    "codelyzer": "^5.1.2",
+    "jasmine-core": "3.5.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "4.3.0",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-jasmine": "2.0.1",
+    "protractor": "5.4.2",
+    "ts-loader": "^6.1.2",
+    "ts-node": "8.4.1",
     "tslint": "~5.18.0",
     "typescript": "~3.5.3",
-    "webpack-cli": "^3.1.0"
+    "webpack-cli": "^3.3.9"
   }
 }

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

@@ -5,6 +5,6 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content padding>
+<ion-content>
   <p>Change Detections: <span id="counter">{{counter()}}</span></p>
 </ion-content>

angular/test/test-app/src/app/modal-example/modal-example.component.html

@@ -8,7 +8,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Value</h1>
   <h2>{{value}}</h2>
   <h3>{{valueFromParams}}</h3>

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

@@ -5,7 +5,7 @@
       </ion-title>
     </ion-toolbar>
   </ion-header>
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-button (click)="openModal()" id="action-button">Open Modal</ion-button>
   <ion-button (click)="openNav()" id="action-button-2">Open Nav in Modal</ion-button>
   <p>

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

@@ -5,7 +5,7 @@
       </ion-title>
     </ion-toolbar>
   </ion-header>
-  <ion-content padding>
+  <ion-content class="ion-padding">
     <p>
       isLoaded: <span id="is-loaded">{{isLoaded}}</span>
     </p>

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

@@ -1,7 +1,7 @@
 import { Component, NgZone } from '@angular/core';
 import {
   Platform, ModalController, AlertController, ActionSheetController,
-  PopoverController, ToastController, Events, PickerController, MenuController,
+  PopoverController, ToastController, PickerController, MenuController,
   LoadingController, NavController, DomController, Config
 } from '@ionic/angular';
 
@@ -13,7 +13,6 @@ export class ProvidersComponent {
 
   isLoaded = false;
   isReady = false;
-  isEvent = false;
   isResumed = false;
   isPaused = false;
   isResized = false;
@@ -25,7 +24,6 @@ export class ProvidersComponent {
   constructor(
     actionSheetCtrl: ActionSheetController,
     alertCtrl: AlertController,
-    events: Events,
     loadingCtrl: LoadingController,
     menuCtrl: MenuController,
     pickerCtrl: PickerController,
@@ -40,7 +38,7 @@ export class ProvidersComponent {
   ) {
     // test all providers load
     if (
-      actionSheetCtrl && alertCtrl && events && loadingCtrl && menuCtrl && pickerCtrl &&
+      actionSheetCtrl && alertCtrl && loadingCtrl && menuCtrl && pickerCtrl &&
       modalCtrl && platform && popoverCtrl && toastCtrl && navCtrl && domCtrl && config
       ) {
         this.isLoaded = true;
@@ -69,13 +67,6 @@ export class ProvidersComponent {
     this.isDesktop = platform.is('desktop');
     this.isMobile = platform.is('mobile');
 
-    // test events
-    events.subscribe('topic', () => {
-      this.isEvent = true;
-      NgZone.assertInAngularZone();
-    });
-    events.publish('topic');
-
     // test config
     this.isTesting = config.getBoolean('_testing');
     config.set('keyboardHeight', 12345);

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

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
   <p>canGoBack: <span id="canGoBack">{{canGoBack}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>

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

@@ -7,6 +7,6 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-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-page3/router-link-page3.component.html

@@ -7,6 +7,6 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   Page 3
 </ion-content>

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

@@ -5,7 +5,7 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content padding>
+<ion-content class="ion-padding">
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
   <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>

angular/test/test-app/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>

angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html

@@ -4,7 +4,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>LAZY LOADED TAB</h1>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>

angular/test/test-app/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Welcome to NESTED PAGE {{id}}</h1>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>

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

@@ -4,8 +4,15 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Welcome to Tab1</h1>
+  <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
+    <ion-segment-button value="one">One</ion-segment-button>
+    <ion-segment-button value="two">Two</ion-segment-button>
+  </ion-segment>
+  <p>
+    Segment changed: <span class="segment-changed">{{changed}}</span>
+  </p>
   <p>
     <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Page 2</ion-button>
     <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.ts

@@ -6,6 +6,8 @@ import { Component, NgZone } from '@angular/core';
 })
 export class TabsTab1Component {
   title = 'ERROR';
+  segment = 'one';
+  changed = 'false';
 
   ionViewWillEnter() {
     NgZone.assertInAngularZone();
@@ -14,4 +16,9 @@ export class TabsTab1Component {
       this.title = 'Tab 1 - Page 1';
     });
   }
+
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
+    this.changed = 'true';
+  }
 }

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

@@ -4,8 +4,15 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Welcome to Tab 2</h1>
+  <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
+    <ion-segment-button value="one">One</ion-segment-button>
+    <ion-segment-button value="two">Two</ion-segment-button>
+  </ion-segment>
+  <p>
+    Segment changed: <span class="segment-changed">{{changed}}</span>
+  </p>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>

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

@@ -6,6 +6,8 @@ import { Component, NgZone } from '@angular/core';
 })
 export class TabsTab2Component {
   title = 'ERROR';
+  segment = 'two';
+  changed = 'false';
 
   ngOnInit() {
     NgZone.assertInAngularZone();
@@ -14,4 +16,9 @@ export class TabsTab2Component {
       this.title = 'Tab 2 - Page 1';
     });
   }
+
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
+    this.changed = 'true';
+  }
 }

angular/test/test-app/src/app/view-child/view-child.component.html

@@ -5,7 +5,7 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-slides>
     <ion-slide #slide>
         <ion-button id="color-button">Hello! it's a button</ion-button>

angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.html

@@ -7,7 +7,7 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content padding>
+  <ion-content class="ion-padding">
     <h1>Item {{itemNu}}</h1>
     <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
     <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>

angular/test/test-app/tsconfig.json

@@ -6,6 +6,8 @@
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
+    "module": "esnext",
+    "target": "es2015",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "typeRoots": [

core/api.txt

@@ -4,10 +4,10 @@ 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,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,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-action-sheet,prop,header,string | undefined,undefined,false,false
 ion-action-sheet,prop,keyboardClose,boolean,true,false,false
-ion-action-sheet,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
 ion-action-sheet,prop,subHeader,string | undefined,undefined,false,false
 ion-action-sheet,prop,translucent,boolean,false,false,false
@@ -19,6 +19,7 @@ ion-action-sheet,event,ionActionSheetDidDismiss,OverlayEventDetail<any>,true
 ion-action-sheet,event,ionActionSheetDidPresent,void,true
 ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail<any>,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
+ion-action-sheet,css-prop,--backdrop-opacity
 ion-action-sheet,css-prop,--background
 ion-action-sheet,css-prop,--background-activated
 ion-action-sheet,css-prop,--background-selected
@@ -40,11 +41,11 @@ ion-alert,prop,animated,boolean,true,false,false
 ion-alert,prop,backdropDismiss,boolean,true,false,false
 ion-alert,prop,buttons,(string | AlertButton)[],[],false,false
 ion-alert,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-alert,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-alert,prop,header,string | undefined,undefined,false,false
 ion-alert,prop,inputs,AlertInput[],[],false,false
 ion-alert,prop,keyboardClose,boolean,true,false,false
-ion-alert,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-alert,prop,message,string | undefined,undefined,false,false
 ion-alert,prop,mode,"ios" | "md",undefined,false,false
 ion-alert,prop,subHeader,string | undefined,undefined,false,false
@@ -57,6 +58,7 @@ ion-alert,event,ionAlertDidDismiss,OverlayEventDetail<any>,true
 ion-alert,event,ionAlertDidPresent,void,true
 ion-alert,event,ionAlertWillDismiss,OverlayEventDetail<any>,true
 ion-alert,event,ionAlertWillPresent,void,true
+ion-alert,css-prop,--backdrop-opacity
 ion-alert,css-prop,--background
 ion-alert,css-prop,--height
 ion-alert,css-prop,--max-height
@@ -70,14 +72,6 @@ ion-alert-controller,method,create,create(options: AlertOptions) => Promise<HTML
 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
-
 ion-app,none
 
 ion-avatar,shadow
@@ -178,8 +172,9 @@ ion-button,css-prop,--ripple-color
 ion-button,css-prop,--transition
 
 ion-buttons,scoped
+ion-buttons,prop,collapse,boolean,false,false,false
 
-ion-card,scoped
+ion-card,shadow
 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
@@ -399,6 +394,7 @@ ion-grid,css-prop,--ion-grid-width-xl
 ion-grid,css-prop,--ion-grid-width-xs
 
 ion-header,none
+ion-header,prop,collapse,"condense" | undefined,undefined,false,false
 ion-header,prop,mode,"ios" | "md",undefined,false,false
 ion-header,prop,translucent,boolean,false,false,false
 
@@ -417,7 +413,7 @@ ion-infinite-scroll,method,complete,complete() => Promise<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,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
 ion-infinite-scroll-content,prop,loadingText,string | undefined,undefined,false,false
 
 ion-input,scoped
@@ -431,7 +427,7 @@ ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
 ion-input,prop,color,string | undefined,undefined,false,false
 ion-input,prop,debounce,number,0,false,false
 ion-input,prop,disabled,boolean,false,false,false
-ion-input,prop,inputmode,string | undefined,undefined,false,false
+ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input,prop,max,string | undefined,undefined,false,false
 ion-input,prop,maxlength,number | undefined,undefined,false,false
 ion-input,prop,min,string | undefined,undefined,false,false
@@ -579,13 +575,13 @@ ion-loading,prop,animated,boolean,true,false,false
 ion-loading,prop,backdropDismiss,boolean,false,false,false
 ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-loading,prop,duration,number,0,false,false
-ion-loading,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-loading,prop,keyboardClose,boolean,true,false,false
-ion-loading,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-loading,prop,message,string | undefined,undefined,false,false
 ion-loading,prop,mode,"ios" | "md",undefined,false,false
 ion-loading,prop,showBackdrop,boolean,true,false,false
-ion-loading,prop,spinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
+ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
 ion-loading,prop,translucent,boolean,false,false,false
 ion-loading,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
 ion-loading,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
@@ -595,6 +591,7 @@ ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail<any>,true
 ion-loading,event,ionLoadingDidPresent,void,true
 ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail<any>,true
 ion-loading,event,ionLoadingWillPresent,void,true
+ion-loading,css-prop,--backdrop-opacity
 ion-loading,css-prop,--background
 ion-loading,css-prop,--height
 ion-loading,css-prop,--max-height
@@ -677,9 +674,9 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,component,Function | HTMLElement | null | string,undefined,true,false
 ion-modal,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 ion-modal,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-modal,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,keyboardClose,boolean,true,false,false
-ion-modal,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
 ion-modal,prop,showBackdrop,boolean,true,false,false
 ion-modal,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
@@ -690,6 +687,7 @@ ion-modal,event,ionModalDidDismiss,OverlayEventDetail<any>,true
 ion-modal,event,ionModalDidPresent,void,true
 ion-modal,event,ionModalWillDismiss,OverlayEventDetail<any>,true
 ion-modal,event,ionModalWillPresent,void,true
+ion-modal,css-prop,--backdrop-opacity
 ion-modal,css-prop,--background
 ion-modal,css-prop,--border-color
 ion-modal,css-prop,--border-radius
@@ -709,7 +707,7 @@ ion-modal-controller,method,getTop,getTop() => Promise<HTMLIonModalElement | und
 
 ion-nav,shadow
 ion-nav,prop,animated,boolean,true,false,false
-ion-nav,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-nav,prop,root,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
 ion-nav,prop,rootParams,undefined | { [key: string]: any; },undefined,false,false
 ion-nav,prop,swipeGesture,boolean | undefined,undefined,false,false
@@ -729,15 +727,10 @@ 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-nav-link,none
+ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
+ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 
 ion-note,shadow
 ion-note,prop,color,string | undefined,undefined,false,false
@@ -751,9 +744,9 @@ ion-picker,prop,buttons,PickerButton[],[],false,false
 ion-picker,prop,columns,PickerColumn[],[],false,false
 ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-picker,prop,duration,number,0,false,false
-ion-picker,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-picker,prop,keyboardClose,boolean,true,false,false
-ion-picker,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
 ion-picker,prop,showBackdrop,boolean,true,false,false
 ion-picker,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
@@ -765,6 +758,7 @@ ion-picker,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
 ion-picker,event,ionPickerDidPresent,void,true
 ion-picker,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
 ion-picker,event,ionPickerWillPresent,void,true
+ion-picker,css-prop,--backdrop-opacity
 ion-picker,css-prop,--background
 ion-picker,css-prop,--background-rgb
 ion-picker,css-prop,--border-color
@@ -789,10 +783,10 @@ ion-popover,prop,backdropDismiss,boolean,true,false,false
 ion-popover,prop,component,Function | HTMLElement | null | string,undefined,true,false
 ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 ion-popover,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-popover,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,event,any,undefined,false,false
 ion-popover,prop,keyboardClose,boolean,true,false,false
-ion-popover,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,mode,"ios" | "md",undefined,false,false
 ion-popover,prop,showBackdrop,boolean,true,false,false
 ion-popover,prop,translucent,boolean,false,false,false
@@ -804,6 +798,7 @@ ion-popover,event,ionPopoverDidDismiss,OverlayEventDetail<any>,true
 ion-popover,event,ionPopoverDidPresent,void,true
 ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail<any>,true
 ion-popover,event,ionPopoverWillPresent,void,true
+ion-popover,css-prop,--backdrop-opacity
 ion-popover,css-prop,--background
 ion-popover,css-prop,--box-shadow
 ion-popover,css-prop,--height
@@ -874,6 +869,8 @@ ion-range,css-prop,--knob-background
 ion-range,css-prop,--knob-border-radius
 ion-range,css-prop,--knob-box-shadow
 ion-range,css-prop,--knob-size
+ion-range,css-prop,--pin-background
+ion-range,css-prop,--pin-color
 
 ion-refresher,none
 ion-refresher,prop,closeDuration,string,'280ms',false,false
@@ -892,7 +889,7 @@ 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,refreshingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
 ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,false
 
 ion-reorder,shadow
@@ -936,7 +933,7 @@ 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,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-router-outlet,prop,mode,"ios" | "md",getIonMode(this),false,false
 
 ion-row,shadow
@@ -945,16 +942,17 @@ ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
 ion-searchbar,prop,autocomplete,"off" | "on",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
-ion-searchbar,prop,cancelButtonIcon,string,'md-arrow-back',false,false
+ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'md-arrow-back') as string,false,false
 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,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url",'search',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,"always" | "focus" | "never",'never',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
@@ -967,6 +965,7 @@ ion-searchbar,event,ionClear,void,true
 ion-searchbar,event,ionFocus,void,true
 ion-searchbar,event,ionInput,KeyboardEvent,true
 ion-searchbar,css-prop,--background
+ion-searchbar,css-prop,--box-shadow
 ion-searchbar,css-prop,--cancel-button-color
 ion-searchbar,css-prop,--clear-button-color
 ion-searchbar,css-prop,--color
@@ -983,7 +982,6 @@ 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
@@ -1040,6 +1038,8 @@ ion-select,css-prop,--padding-bottom
 ion-select,css-prop,--padding-end
 ion-select,css-prop,--padding-start
 ion-select,css-prop,--padding-top
+ion-select,css-prop,--placeholder-color
+ion-select,css-prop,--placeholder-opacity
 
 ion-select-option,shadow
 ion-select-option,prop,disabled,boolean,false,false,false
@@ -1048,7 +1048,6 @@ 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
 ion-skeleton-text,css-prop,--background
 ion-skeleton-text,css-prop,--background-rgb
 ion-skeleton-text,css-prop,--border-radius
@@ -1062,6 +1061,7 @@ ion-slides,prop,pager,boolean,false,false,false
 ion-slides,prop,scrollbar,boolean,false,false,false
 ion-slides,method,getActiveIndex,getActiveIndex() => Promise<number>
 ion-slides,method,getPreviousIndex,getPreviousIndex() => Promise<number>
+ion-slides,method,getSwiper,getSwiper() => Promise<any>
 ion-slides,method,isBeginning,isBeginning() => Promise<boolean>
 ion-slides,method,isEnd,isEnd() => Promise<boolean>
 ion-slides,method,length,length() => Promise<number>
@@ -1093,20 +1093,27 @@ ion-slides,event,ionSlideTransitionStart,void,true
 ion-slides,event,ionSlideWillChange,void,true
 ion-slides,css-prop,--bullet-background
 ion-slides,css-prop,--bullet-background-active
+ion-slides,css-prop,--progress-bar-background
+ion-slides,css-prop,--progress-bar-background-active
+ion-slides,css-prop,--scroll-bar-background
+ion-slides,css-prop,--scroll-bar-background-active
 
 ion-spinner,shadow
 ion-spinner,prop,color,string | undefined,undefined,false,false
 ion-spinner,prop,duration,number | undefined,undefined,false,false
-ion-spinner,prop,name,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | undefined,undefined,false,false
+ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,css-prop,--color
 
-ion-split-pane,none
+ion-split-pane,shadow
 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,css-prop,--border
+ion-split-pane,css-prop,--side-max-width
+ion-split-pane,css-prop,--side-min-width
+ion-split-pane,css-prop,--side-width
 
 ion-tab,shadow
 ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
@@ -1197,23 +1204,22 @@ ion-thumbnail,css-prop,--size
 
 ion-title,shadow
 ion-title,prop,color,string | undefined,undefined,false,false
+ion-title,prop,size,"large" | "small" | undefined,undefined,false,false
 ion-title,css-prop,--color
 
 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,enterAnimation,((baseEl: any, opts?: any) => 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,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-toast,prop,message,string | undefined,undefined,false,false
 ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
-ion-toast,prop,showCloseButton,boolean,false,false,false
 ion-toast,prop,translucent,boolean,false,false,false
 ion-toast,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
 ion-toast,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "4.7.2",
+  "version": "5.0.0-beta.0",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -30,33 +30,32 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "^4.6.2",
+    "ionicons": "^4.6.3",
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@stencil/core": "1.2.3",
-    "@stencil/sass": "1.0.0",
-    "@types/jest": "24.0.13",
-    "@types/node": "10.12.18",
-    "@types/puppeteer": "1.12.4",
-    "@types/swiper": "4.4.1",
-    "aws-sdk": "^2.320.0",
-    "chromedriver": "^2.38.3",
+    "@stencil/core": "1.7.5",
+    "@stencil/sass": "1.0.1",
+    "@types/jest": "24.0.21",
+    "@types/node": "12.12.3",
+    "@types/puppeteer": "1.19.1",
+    "@types/swiper": "4.4.4",
+    "aws-sdk": "^2.497.0",
     "clean-css-cli": "^4.1.11",
     "domino": "^2.1.3",
     "fs-extra": "^8.0.1",
-    "jest": "24.8.0",
-    "jest-cli": "24.8.0",
-    "np": "^3.0.4",
+    "jest": "24.9.0",
+    "jest-cli": "24.9.0",
+    "np": "^5.0.3",
     "pixelmatch": "4.0.2",
-    "puppeteer": "1.17.0",
-    "rollup": "1.16.2",
-    "rollup-plugin-node-resolve": "5.1.0",
+    "puppeteer": "1.20.0",
+    "rollup": "1.19.4",
+    "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-virtual": "^1.0.1",
-    "sass": "^1.22.0",
+    "sass": "^1.22.9",
     "stylelint": "10.1.0",
-    "stylelint-order": "3.0.0",
-    "swiper": "4.4.6",
+    "stylelint-order": "3.0.1",
+    "swiper": "4.5.1",
     "tslint": "^5.10.0",
     "tslint-ionic-rules": "0.0.21",
     "tslint-react": "^3.6.0"
@@ -67,7 +66,6 @@
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "clean": "node scripts/clean.js",
     "cdnloader": "node scripts/copy-cdn-loader.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
@@ -81,10 +79,10 @@
     "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
     "prerender.e2e": "node scripts/testing/prerender.js",
     "start": "npm run build.css && stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.spec": "stencil test --spec",
+    "test": "stencil test --spec --e2e --max-workers=2",
+    "test.spec": "stencil test --spec --max-workers=2",
     "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
-    "test.e2e": "stencil test --e2e",
+    "test.e2e": "stencil test --e2e --max-workers=2",
     "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",

core/scripts/testing/scripts.js

@@ -5,8 +5,16 @@
     document.documentElement.setAttribute('dir', 'rtl');
   }
 
+  if (window.location.search.indexOf('ionic:_testing=true') > -1) {
+    const style = document.createElement('style');
+    style.innerHTML = `
+* {
+  caret-color: transparent !important;
+}`;
+    document.head.appendChild(style);
+  }
+
   window.Ionic = window.Ionic || {};
   window.Ionic.config = window.Ionic.config || {};
-  window.Ionic.config.experimentalTransitionShadow = true;
 
 })();

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

@@ -1,13 +1,24 @@
-import { Component, ComponentInterface, Method } from '@stencil/core';
+import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 
 import { ActionSheetOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `actionSheetController` exported from core.
+ */
 @Component({
   tag: 'ion-action-sheet-controller'
 })
 export class ActionSheetController implements ComponentInterface, OverlayController {
 
+  constructor() {
+    if (Build.isDev) {
+      console.warn(`[DEPRECATED][ion-action-sheet-controller] Use the actionSheetController export from @ionic/core:
+  import { actionSheetController } from '@ionic/core';
+  const actionSheet = await actionSheetController.create({...});`);
+    }
+  }
+
   /**
    * Create an action sheet overlay with action sheet options.
    *

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

@@ -5,6 +5,8 @@ Action Sheet controllers programmatically control the action sheet component. Ac
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `actionSheetController` exported from core.
+
 ## Methods
 
 ### `create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`

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

@@ -8,6 +8,7 @@
   --background: #{$action-sheet-ios-background-color};
   --background-selected: #{$action-sheet-ios-button-background-selected};
   --background-activated: #{$action-sheet-ios-button-background-activated};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
 
   text-align: $action-sheet-ios-text-align;
 }

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

@@ -8,6 +8,7 @@
   --background: #{$action-sheet-md-background-color};
   --background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
   --background-activated: var(--background);
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 }
 
 .action-sheet-title {

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

@@ -18,6 +18,8 @@
    * @prop --min-height: Minimum height of the action sheet
    * @prop --height: height of the action sheet
    * @prop --max-height: Maximum height of the action sheet
+   *
+   * @prop --backdrop-opacity: Opacity of the backdrop
    */
   --color: initial;
   --min-width: auto;
@@ -65,6 +67,8 @@
 }
 
 .action-sheet-button {
+  display: block;
+
   width: 100%;
 
   border: 0;

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

@@ -1,8 +1,8 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } 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, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -24,10 +24,10 @@ import { mdLeaveAnimation } from './animations/md.leave';
 export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   presented = false;
-  animation?: Animation;
+  animation?: any;
   mode = getIonMode(this);
 
-  @Element() el!: HTMLElement;
+  @Element() el!: HTMLIonActionSheetElement;
 
   /** @internal */
   @Prop() overlayIndex!: number;
@@ -113,6 +113,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
   }
 
+  constructor() {
+    prepareOverlay(this.el);
+  }
+
   /**
    * Dismiss the action sheet overlay after it has been presented.
    *

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

@@ -1,27 +1,25 @@
 import { Animation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Action Sheet Enter Animation
  */
-export const iosEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
+    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
-  backdropAnimation.fromTo('opacity', 0.01, 0.4);
-
-  wrapperAnimation.fromTo('translateY', '100%', '0%');
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

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

@@ -1,27 +1,25 @@
 import { Animation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Action Sheet Leave Animation
  */
-export const iosLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
+    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
-  backdropAnimation.fromTo('opacity', 0.4, 0);
-
-  wrapperAnimation.fromTo('translateY', '0%', '100%');
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(450)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

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

@@ -1,27 +1,25 @@
-
 import { Animation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * MD Action Sheet Enter Animation
  */
-export const mdEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
+    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
-  backdropAnimation.fromTo('opacity', 0.01, 0.32);
-  wrapperAnimation.fromTo('translateY', '100%', '0%');
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

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

@@ -1,27 +1,25 @@
 import { Animation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * MD Action Sheet Leave Animation
  */
-export const mdLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
+export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const baseAnimation = new AnimationC();
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
+    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
-
-  backdropAnimation.fromTo('opacity', 0.32, 0);
-  wrapperAnimation.fromTo('translateY', '0%', '100%');
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(450)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

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

@@ -4,7 +4,7 @@ An Action Sheet is a dialog that displays a set of options. It appears on top of
 
 ### Creating
 
-An action sheet can be created by the [Action Sheet Controller](../action-sheet-controller) from an array of `buttons`, with each button including properties for its `text`, and optionally a `handler` and `role`. If a handler returns `false` then the action sheet will not be dismissed. An action sheet can also optionally have a `title`, `subTitle` and an `icon`.
+An action sheet can be created by the [Action Sheet Controller](../action-sheet-controller) from an array of `buttons`, with each button including properties for its `text`, and optionally a `handler` and `role`. If a handler returns `false` then the action sheet will not be dismissed. An action sheet can also optionally have a `header` and a `subHeader`.
 
 ### Buttons
 
@@ -79,45 +79,45 @@ export class ActionSheetExample {
 
 ```javascript
 async function presentActionSheet() {
-  const actionSheetController = document.querySelector('ion-action-sheet-controller');
 
-  const actionSheet = 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',
-      handler: () => {
-        console.log('Favorite clicked');
-      }
-    }, {
-      text: 'Cancel',
-      icon: 'close',
-      role: 'cancel',
-      handler: () => {
-        console.log('Cancel clicked');
-      }
-    }]
-  });
-  await actionSheet.present();
+  const actionSheet = document.createElement('ion-action-sheet');
+
+  actionSheet.header = "Albums";
+  actionSheet.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',
+    handler: () => {
+      console.log('Favorite clicked');
+    }
+  }, {
+    text: 'Cancel',
+    icon: 'close',
+    role: 'cancel',
+    handler: () => {
+      console.log('Cancel clicked');
+    }
+  }];
+  document.body.appendChild(actionSheet);
+  return actionSheet.present();
 }
 ```
 
@@ -128,7 +128,7 @@ async function presentActionSheet() {
 import React, { useState } from 'react'
 import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
 
-export const ActionSheetExample: React.FunctionComponent = () => {
+export const ActionSheetExample: React.FC = () => {
 
   const [showActionSheet, setShowActionSheet] = useState(false);
 
@@ -249,19 +249,19 @@ 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `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`         | --                 | 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.                                                                                                                                                                        | `((baseEl: any, opts?: any) => 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.                                                                                                                                                                        | `((baseEl: any, opts?: any) => 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean`                                               | `false`     |
 
 
 ## Events
@@ -321,6 +321,7 @@ Type: `Promise<void>`
 
 | Name                     | Description                                        |
 | ------------------------ | -------------------------------------------------- |
+| `--backdrop-opacity`     | Opacity of the backdrop                            |
 | `--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     |

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

@@ -34,6 +34,10 @@ test('action-sheet: basic, scroll without cancel', async () => {
   await testActionSheet(DIRECTORY, '#scrollWithoutCancel');
 });
 
+test('action-sheet: basic, custom backdrop', async () => {
+  await testActionSheet(DIRECTORY, '#customBackdrop');
+});
+
 /**
  * RTL Tests
  */
@@ -69,3 +73,7 @@ test('action-sheet:rtl: basic, scrollable options', async () => {
 test('action-sheet:rtl: basic, scroll without cancel', async () => {
   await testActionSheet(DIRECTORY, '#scrollWithoutCancel', true);
 });
+
+test('action-sheet:rtl: basic, custom backdrop', async () => {
+  await testActionSheet(DIRECTORY, '#customBackdrop', true);
+});

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

@@ -13,9 +13,6 @@
 
 <body>
   <ion-app>
-    <ion-action-sheet-controller></ion-action-sheet-controller>
-    <ion-alert-controller></ion-alert-controller>
-
     <ion-header>
       <ion-toolbar>
         <ion-title>Action Sheet - Basic</ion-title>
@@ -31,6 +28,7 @@
       <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</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="customBackdrop" onclick="presentWithCssClass('custom-backdrop')">Custom Backdrop Opacity</ion-button>
     </ion-content>
 
   </ion-app>
@@ -52,6 +50,10 @@
       --height: 325px;
     }
 
+    .custom-backdrop {
+      --ion-backdrop-opacity: 1;
+    }
+
   </style>
   <script>
     window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
@@ -59,8 +61,7 @@
     async function presentBasic() {
       const mode = Ionic.mode;
 
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -97,17 +98,16 @@
           }
         }]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentAlert() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [{
           text: 'Open Alert',
           handler: async () => {
-            const alertController = document.querySelector('ion-alert-controller');
-            const alert = await alertController.create({
+            const alert = Object.assign(document.createElement('ion-alert'), {
               header: 'Alert from Action Sheet',
               subHeader: 'Subtitle',
               message: 'This is an alert message.',
@@ -119,6 +119,7 @@
                 }
               }]
             });
+            document.body.appendChild(alert);
             await alert.present();
             return false;
           }
@@ -130,12 +131,12 @@
           }
         }]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentCancelOnly() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Cancel',
@@ -146,14 +147,16 @@
           }
         ]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
-    async function presentWithCssClass() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    async function presentWithCssClass(classList) {
+      const addClass = classList ? classList : "my-color-class my-custom-class";
+
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Custom Css Class",
-        cssClass: "my-color-class my-custom-class",
+        cssClass: addClass,
         buttons: [
           {
             text: 'Add to Favorites',
@@ -194,14 +197,14 @@
           }
         ]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentIcons() {
       const mode = Ionic.mode;
 
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -237,13 +240,13 @@
             console.log('Cancel clicked');
           }
         }]
-      })
+      });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentNoBackdropDismiss() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         backdropDismiss: false,
         buttons: [{
           text: 'Archive',
@@ -264,12 +267,12 @@
           }
         }]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentScroll() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Add Reaction',
@@ -357,12 +360,12 @@
           }
         ]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentScrollNoCancel() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Add Reaction',
@@ -428,6 +431,7 @@
           }
         ]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
   </script>

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

@@ -21,8 +21,6 @@
     </ion-header>
 
     <ion-content class="ion-padding">
-      <ion-action-sheet-controller></ion-action-sheet-controller>
-
       <ion-button expand="block" id="spec" onclick="presentSpec()">Spec</ion-button>
     </ion-content>
 
@@ -34,8 +32,7 @@
     async function presentSpec() {
       const mode = Ionic.mode;
 
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Open in",
         buttons: [{
           text: 'Item 1',
@@ -69,6 +66,7 @@
           }
         }]
       });
+      document.body.appendChild(actionSheetElement);
       await actionSheetElement.present();
     }
   </script>

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

@@ -21,8 +21,6 @@
   <button id="icons" onclick="presentIcons()">Icons</button>
   <button id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
 
-  <ion-action-sheet-controller></ion-action-sheet-controller>
-
   <style>
     body > button {
       display: block;
@@ -39,9 +37,8 @@
 
   <script>
     window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
-    async function presentBasic() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentBasic() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -76,15 +73,15 @@
             console.log('Cancel clicked');
           }
         }]
-      })
-      await actionSheetElement.present();
+      });
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentIcons() {
+    function presentIcons() {
       const mode = Ionic.mode;
 
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -119,13 +116,13 @@
             console.log('Cancel clicked');
           }
         }]
-      })
-      await actionSheetElement.present();
+      });
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentNoBackdropDismiss() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentNoBackdropDismiss() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [{
           text: 'Archive',
           handler: () => {
@@ -145,12 +142,12 @@
           }
         }]
       });
-      await actionSheetElement.present();
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentAlert() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentAlert() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [{
           text: 'Open Alert',
           handler: () => {
@@ -164,12 +161,12 @@
           }
         }]
       });
-      await actionSheetElement.present();
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentScroll() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentScroll() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Add Reaction',
@@ -241,12 +238,12 @@
           }
         ]
       });
-      await actionSheetElement.present();
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentScrollNoCancel() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentScrollNoCancel() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Add Reaction',
@@ -312,12 +309,12 @@
           }
         ]
       });
-      await actionSheetElement.present();
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentCancelOnly() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentCancelOnly() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Cancel',
@@ -328,12 +325,12 @@
           }
         ]
       });
-      await actionSheetElement.present();
+      document.body.append(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentWithCssClass() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentWithCssClass() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Custom Css Class",
         cssClass: "my-class my-custom-class",
         buttons: [
@@ -347,7 +344,8 @@
           }
         ]
       });
-      await actionSheetElement.present();
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
   </script>

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

@@ -66,19 +66,15 @@ export const testActionSheetAlert = async (
   page: any,
   screenshotCompares: any
 ) => {
-  try {
-    const openAlertBtn = await page.find({ text: 'Open Alert' });
-    await openAlertBtn.click();
+  const openAlertBtn = await page.find({ text: 'Open Alert' });
+  await openAlertBtn.click();
 
-    const alert = await page.find('ion-alert');
-    await alert.waitForVisible();
-    await page.waitFor(250);
+  const alert = await page.find('ion-alert');
+  await alert.waitForVisible();
+  await page.waitFor(250);
 
-    screenshotCompares.push(await page.compareScreenshot(`alert open`));
+  screenshotCompares.push(await page.compareScreenshot(`alert open`));
 
-    const alertOkayBtn = await page.find({ contains: 'Okay' });
-    await alertOkayBtn.click();
-  } catch (err) {
-    throw err;
-  }
+  const alertOkayBtn = await page.find({ contains: 'Okay' });
+  await alertOkayBtn.click();
 };

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

@@ -14,37 +14,35 @@
 <body>
   <ion-app>
 
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Action Sheet - Translucent</ion-title>
-        </ion-toolbar>
-      </ion-header>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Action Sheet - Translucent</ion-title>
+      </ion-toolbar>
+    </ion-header>
 
-      <ion-content class="ion-padding">
-        <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-grid>
-          <ion-row>
-            <ion-col size="4"><f class="red"></f></ion-col>
-            <ion-col size="4"><f class="green"></f></ion-col>
-            <ion-col size="4"><f class="blue"></f></ion-col>
-            <ion-col size="4"><f class="yellow"></f></ion-col>
-            <ion-col size="4"><f class="pink"></f></ion-col>
-            <ion-col size="4"><f class="purple"></f></ion-col>
-            <ion-col size="4"><f class="black"></f></ion-col>
-            <ion-col size="4"><f class="fuchsia"></f></ion-col>
-            <ion-col size="4"><f class="orange"></f></ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-content>
+    <ion-content class="ion-padding">
+      <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-grid>
+        <ion-row>
+          <ion-col size="4"><f class="red"></f></ion-col>
+          <ion-col size="4"><f class="green"></f></ion-col>
+          <ion-col size="4"><f class="blue"></f></ion-col>
+          <ion-col size="4"><f class="yellow"></f></ion-col>
+          <ion-col size="4"><f class="pink"></f></ion-col>
+          <ion-col size="4"><f class="purple"></f></ion-col>
+          <ion-col size="4"><f class="black"></f></ion-col>
+          <ion-col size="4"><f class="fuchsia"></f></ion-col>
+          <ion-col size="4"><f class="orange"></f></ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-content>
+    <ion-action-sheet-controller></ion-action-sheet-controller>
   </ion-app>
 
   <script>

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

@@ -1,43 +1,43 @@
 ```javascript
 async function presentActionSheet() {
-  const actionSheetController = document.querySelector('ion-action-sheet-controller');
 
-  const actionSheet = 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',
-      handler: () => {
-        console.log('Favorite clicked');
-      }
-    }, {
-      text: 'Cancel',
-      icon: 'close',
-      role: 'cancel',
-      handler: () => {
-        console.log('Cancel clicked');
-      }
-    }]
-  });
-  await actionSheet.present();
+  const actionSheet = document.createElement('ion-action-sheet');
+
+  actionSheet.header = "Albums";
+  actionSheet.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',
+    handler: () => {
+      console.log('Favorite clicked');
+    }
+  }, {
+    text: 'Cancel',
+    icon: 'close',
+    role: 'cancel',
+    handler: () => {
+      console.log('Cancel clicked');
+    }
+  }];
+  document.body.appendChild(actionSheet);
+  return actionSheet.present();
 }
 ```

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

@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
 
-export const ActionSheetExample: React.FunctionComponent = () => {
+export const ActionSheetExample: React.FC = () => {
 
   const [showActionSheet, setShowActionSheet] = useState(false);
 

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

@@ -1,13 +1,24 @@
-import { Component, ComponentInterface, Method } from '@stencil/core';
+import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 
 import { AlertOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `alertController` exported from core.
+ */
 @Component({
   tag: 'ion-alert-controller'
 })
 export class AlertController implements ComponentInterface, OverlayController {
 
+  constructor() {
+    if (Build.isDev) {
+      console.warn(`[DEPRECATED][ion-alert-controller] Use the alertController export from @ionic/core:
+  import { alertController } from '@ionic/core';
+  const alert = await alertController.create({...});`);
+    }
+  }
+
   /**
    * Create an alert overlay with alert options.
    *

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

@@ -6,6 +6,8 @@ Alert controllers programmatically control the alert component. Alerts can be cr
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `alertController` exported from core.
+
 ## Methods
 
 ### `create(options: AlertOptions) => Promise<HTMLIonAlertElement>`

core/src/components/alert/alert-interface.ts

@@ -20,7 +20,7 @@ export interface AlertOptions {
 }
 
 export interface AlertInput {
-  type?: TextFieldTypes | 'checkbox' | 'radio';
+  type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
   name?: string;
   placeholder?: string;
   value?: any;

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

@@ -7,6 +7,7 @@
 :host {
   --background: #{$alert-ios-background-color};
   --max-width: #{$alert-ios-max-width};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
 
   font-size: $alert-ios-font-size;
 }

core/src/components/alert/alert.md.scss

@@ -7,6 +7,7 @@
 :host {
   --background: #{$alert-md-background-color};
   --max-width: #{$alert-md-max-width};
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 
   font-size: $alert-md-font-size;
 }

core/src/components/alert/alert.scss

@@ -14,6 +14,8 @@
    * @prop --min-height: Minimum height of the alert
    * @prop --height: Height of the alert
    * @prop --max-height: Maximum height of the alert
+   *
+   * @prop --backdrop-opacity: Opacity of the backdrop
    */
   --min-width: #{$alert-min-width};
   --width: auto;
@@ -150,6 +152,17 @@
   height: 100%;
 }
 
+
+// Alert Button: Disabled
+// --------------------------------------------------
+.alert-input-disabled,
+.alert-checkbox-button-disabled .alert-button-inner,
+.alert-radio-button-disabled .alert-button-inner {
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
+}
+
 .alert-tappable {
   @include margin(0);
   @include padding(0);
@@ -184,3 +197,8 @@
 .alert-checkbox-inner {
   box-sizing: border-box;
 }
+
+textarea.alert-input {
+  min-height: $alert-input-min-height;
+  resize: none;
+}

core/src/components/alert/alert.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 
 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 { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
 
@@ -163,6 +163,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
     }) as AlertInput);
   }
 
+  constructor() {
+    prepareOverlay(this.el);
+  }
+
   componentWillLoad() {
     this.inputsChanged();
     this.buttonsChanged();
@@ -303,7 +307,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
             disabled={i.disabled}
             tabIndex={0}
             role="checkbox"
-            class="alert-tappable alert-checkbox alert-checkbox-button ion-focusable"
+            class={{
+              'alert-tappable': true,
+              'alert-checkbox': true,
+              'alert-checkbox-button': true,
+              'ion-focusable': true,
+              'alert-checkbox-button-disabled': i.disabled || false
+            }}
           >
             <div class="alert-button-inner">
               <div class="alert-checkbox-icon">
@@ -335,7 +345,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
             disabled={i.disabled}
             id={i.id}
             tabIndex={0}
-            class="alert-radio-button alert-tappable alert-radio ion-focusable"
+            class={{
+              'alert-radio-button': true,
+              'alert-tappable': true,
+              'alert-radio': true,
+              'ion-focusable': true,
+              'alert-radio-button-disabled': i.disabled || false
+            }}
             role="radio"
           >
             <div class="alert-button-inner">
@@ -357,22 +373,46 @@ export class Alert implements ComponentInterface, OverlayInterface {
     }
     return (
       <div class="alert-input-group" aria-labelledby={labelledby}>
-        { inputs.map(i => (
-          <div class="alert-input-wrapper">
-            <input
-              placeholder={i.placeholder}
-              value={i.value}
-              type={i.type}
-              min={i.min}
-              max={i.max}
-              onInput={e => i.value = (e.target as any).value}
-              id={i.id}
-              disabled={i.disabled}
-              tabIndex={0}
-              class="alert-input"
-            />
-          </div>
-        ))}
+        { inputs.map(i => {
+          if (i.type === 'textarea') {
+            return (
+              <div class="alert-input-wrapper">
+                <textarea
+                  placeholder={i.placeholder}
+                  value={i.value}
+                  onInput={e => i.value = (e.target as any).value}
+                  id={i.id}
+                  disabled={i.disabled}
+                  tabIndex={0}
+                  class={{
+                    'alert-input': true,
+                    'alert-input-disabled': i.disabled || false
+                  }}
+                />
+              </div>
+            );
+          } else {
+            return (
+              <div class="alert-input-wrapper">
+                <input
+                  placeholder={i.placeholder}
+                  value={i.value}
+                  type={i.type}
+                  min={i.min}
+                  max={i.max}
+                  onInput={e => i.value = (e.target as any).value}
+                  id={i.id}
+                  disabled={i.disabled}
+                  tabIndex={0}
+                  class={{
+                    'alert-input': true,
+                    'alert-input-disabled': i.disabled || false
+                  }}
+                />
+              </div>
+            );
+          }
+        })}
       </div>
     );
   }

core/src/components/alert/alert.vars.scss

@@ -14,3 +14,6 @@ $alert-button-line-height:        20px !default;
 
 /// @prop - Font size of the alert button
 $alert-button-font-size:          14px !default;
+
+/// @prop - Minimum height of a textarea in the alert
+$alert-input-min-height:          37px !default;

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

@@ -1,27 +1,28 @@
 import { Animation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Alert Enter Animation
  */
-export const iosEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
+    .keyframes([
+      { offset: 0, opacity: '0.01', transform: 'scale(1.1)' },
+      { offset: 1, opacity: '1', transform: 'scale(1)' }
+    ]);
 
-  backdropAnimation.fromTo('opacity', 0.01, 0.3);
-
-  wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

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

@@ -1,27 +1,28 @@
 import { Animation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Alert Leave Animation
  */
-export const iosLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
+    .keyframes([
+      { offset: 0, opacity: 0.99, transform: 'scale(1)' },
+      { offset: 1, opacity: 0, transform: 'scale(0.9)' }
+    ]);
 
-  backdropAnimation.fromTo('opacity', 0.3, 0);
-
-  wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

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

@@ -1,25 +1,28 @@
 import { Animation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Alert Enter Animation
  */
-export const mdEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
+    .keyframes([
+      { offset: 0, opacity: '0.01', transform: 'scale(0.9)' },
+      { offset: 1, opacity: '1', transform: 'scale(1)' }
+    ]);
 
-  backdropAnimation.fromTo('opacity', 0.01, 0.32);
-
-  wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 0.9, 1);
-
-  return Promise.resolve(baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
     .duration(150)
-    .add(backdropAnimation)
-    .add(wrapperAnimation));
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

core/src/components/alert/animations/md.leave.ts

@@ -1,25 +1,25 @@
 import { Animation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Alert Leave Animation
  */
-export const mdLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
+    .fromTo('opacity', 0.99, 0);
 
-  backdropAnimation.fromTo('opacity', 0.32, 0);
-
-  wrapperAnimation.fromTo('opacity', 0.99, 0);
-
-  return Promise.resolve(baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
     .duration(150)
-    .add(backdropAnimation)
-    .add(wrapperAnimation));
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

core/src/components/alert/readme.md

@@ -17,7 +17,7 @@ Optionally, a `role` property can be added to a button, such as `cancel`. If a `
 
 ### Inputs
 
-Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
+Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
 
 
 <!-- Auto Generated Below -->
@@ -102,6 +102,13 @@ export class AlertExample {
           value: 'hello',
           placeholder: 'Placeholder 2'
         },
+        // multiline input.
+        {
+          name: 'paragraph',
+          id: 'paragraph',
+          type: 'textarea',
+          placeholder: 'Placeholder 3'
+        },
         {
           name: 'name3',
           value: 'http://ionicframework.com',
@@ -287,235 +294,235 @@ export class AlertExample {
 ### Javascript
 
 ```javascript
-async function presentAlert() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlert() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Alert';
+  alert.subHeader = 'Subtitle';
+  alert.message = 'This is an alert message.';
+  alert.buttons = ['OK'];
 
-  const alert = await alertController.create({
-    header: 'Alert',
-    subHeader: 'Subtitle',
-    message: 'This is an alert message.',
-    buttons: ['OK']
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertMultipleButtons() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertMultipleButtons() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Alert';
+  alert.subHeader = 'Subtitle';
+  alert.message = 'This is an alert message.';
+  alert.buttons = ['Cancel', 'Open Modal', 'Delete'];
 
-  const alert = await alertController.create({
-    header: 'Alert',
-    subHeader: 'Subtitle',
-    message: 'This is an alert message.',
-    buttons: ['Cancel', 'Open Modal', 'Delete']
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertConfirm() {
-  const alertController = document.querySelector('ion-alert-controller');
-
-  const alert = await alertController.create({
-    header: 'Confirm!',
-    message: 'Message <strong>text</strong>!!!',
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: (blah) => {
-          console.log('Confirm Cancel: blah');
-        }
-      }, {
-        text: 'Okay',
-        handler: () => {
-          console.log('Confirm Okay')
-        }
+function presentAlertConfirm() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Confirm!';
+  alert.message = 'Message <strong>text</strong>!!!';
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: (blah) => {
+        console.log('Confirm Cancel: blah');
       }
-    ]
-  });
-  return await alert.present();
+    }, {
+      text: 'Okay',
+      handler: () => {
+        console.log('Confirm Okay')
+      }
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertPrompt() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertPrompt() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Prompt!';
+  alert.inputs = [
+    {
+      placeholder: 'Placeholder 1'
+    },
+    {
+      name: 'name2',
+      id: 'name2-id',
+      value: 'hello',
+      placeholder: 'Placeholder 2'
+    },
+    // multiline input.
+    {
+      name: 'paragraph',
+      id: 'paragraph',
+      type: 'textarea',
+      placeholder: 'Placeholder 3'
+    },
+    {
+      name: 'name3',
+      value: 'http://ionicframework.com',
+      type: 'url',
+      placeholder: 'Favorite site ever'
+    },
+    // input date with min & max
+    {
+      name: 'name4',
+      type: 'date',
+      min: '2017-03-01',
+      max: '2018-01-12'
+    },
+    // input date without min nor max
+    {
+      name: 'name5',
+      type: 'date'
+    },
+    {
+      name: 'name6',
+      type: 'number',
+      min: -5,
+      max: 10
+    },
+    {
+      name: 'name7',
+      type: 'number'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
+      }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
+      }
+    }
+  ];
 
-  const alert = await alertController.create({
-    header: 'Prompt!',
-    inputs: [
-      {
-        placeholder: 'Placeholder 1'
-      },
-      {
-        name: 'name2',
-        id: 'name2-id',
-        value: 'hello',
-        placeholder: 'Placeholder 2'
-      },
-      {
-        name: 'name3',
-        value: 'http://ionicframework.com',
-        type: 'url',
-        placeholder: 'Favorite site ever'
-      },
-      // input date with min & max
-      {
-        name: 'name4',
-        type: 'date',
-        min: '2017-03-01',
-        max: '2018-01-12'
-      },
-      // input date without min nor max
-      {
-        name: 'name5',
-        type: 'date'
-      },
-      {
-        name: 'name6',
-        type: 'number',
-        min: -5,
-        max: 10
-      },
-      {
-        name: 'name7',
-        type: 'number'
-      }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
-      }
-    ]
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertRadio() {
-  const alertController = document.querySelector('ion-alert-controller');
-
-  const alert = await alertController.create({
-    header: 'Radio',
-    inputs: [
-      {
-        type: 'radio',
-        label: 'Radio 1',
-        value: 'value1',
-        checked: true
-      },
-      {
-        type: 'radio',
-        label: 'Radio 2',
-        value: 'value2'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 3',
-        value: 'value3'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 4',
-        value: 'value4'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 5',
-        value: 'value5'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-        value: 'value6'
+function presentAlertRadio() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Radio';
+  alert.inputs = [
+    {
+      type: 'radio',
+      label: 'Radio 1',
+      value: 'value1',
+      checked: true
+    },
+    {
+      type: 'radio',
+      label: 'Radio 2',
+      value: 'value2'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 3',
+      value: 'value3'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 4',
+      value: 'value4'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 5',
+      value: 'value5'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+      value: 'value6'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
       }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
       }
-    ]
-  });
-  return await alert.present();
+    }
+  ];
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertCheckbox() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertCheckbox() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Checkbox';
+  alert.inputs = [
+    {
+      type: 'checkbox',
+      label: 'Checkbox 1',
+      value: 'value1',
+      checked: true
+    },
 
-  const alert = await alertController.create({
-    header: 'Checkbox',
-    inputs: [
-      {
-        type: 'checkbox',
-        label: 'Checkbox 1',
-        value: 'value1',
-        checked: true
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 2',
+      value: 'value2'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 2',
-        value: 'value2'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 3',
+      value: 'value3'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 3',
-        value: 'value3'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 4',
+      value: 'value4'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 4',
-        value: 'value4'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 5',
+      value: 'value5'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 5',
-        value: 'value5'
-      },
-
-      {
-        type: 'checkbox',
-        label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-        value: 'value6'
+    {
+      type: 'checkbox',
+      label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+      value: 'value6'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
       }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
       }
-    ]
-  });
-  return await alert.present();
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
 }
 ```
 
@@ -526,7 +533,7 @@ async function presentAlertCheckbox() {
 import React, { useState } from 'react';
 import { IonAlert, IonButton, IonContent } from '@ionic/react';
 
-export const AlertExample: React.FunctionComponent = () => {
+export const AlertExample: React.FC = () => {
 
   const [showAlert1, setShowAlert1] = useState(false);
   const [showAlert2, setShowAlert2] = useState(false);
@@ -1032,21 +1039,21 @@ export default {
 
 ## Properties
 
-| Property          | Attribute          | Description                                                                                                                                                                                                                                                                                                                        | Type                                                                                   | Default     |
-| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
-| `animated`        | `animated`         | If `true`, the alert will animate.                                                                                                                                                                                                                                                                                                 | `boolean`                                                                              | `true`      |
-| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked.                                                                                                                                                                                                                                                               | `boolean`                                                                              | `true`      |
-| `buttons`         | --                 | Array of buttons to be added to the alert.                                                                                                                                                                                                                                                                                         | `(string \| AlertButton)[]`                                                            | `[]`        |
-| `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 alert is presented.                                                                                                                                                                                                                                                                                      | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
-| `header`          | `header`           | The main title in the heading of the alert.                                                                                                                                                                                                                                                                                        | `string \| undefined`                                                                  | `undefined` |
-| `inputs`          | --                 | Array of input to show in the alert.                                                                                                                                                                                                                                                                                               | `AlertInput[]`                                                                         | `[]`        |
-| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                                                                                                                                                                                             | `boolean`                                                                              | `true`      |
-| `leaveAnimation`  | --                 | Animation to use when the alert is dismissed.                                                                                                                                                                                                                                                                                      | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
-| `message`         | `message`          | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined`                                                                  | `undefined` |
-| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                                                                  | `"ios" \| "md"`                                                                        | `undefined` |
-| `subHeader`       | `sub-header`       | The subtitle in the heading of the alert. Displayed under the title.                                                                                                                                                                                                                                                               | `string \| undefined`                                                                  | `undefined` |
-| `translucent`     | `translucent`      | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).                                                                                                               | `boolean`                                                                              | `false`     |
+| Property          | Attribute          | Description                                                                                                                                                                                                                                                                                                                        | Type                                                    | Default     |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
+| `animated`        | `animated`         | If `true`, the alert will animate.                                                                                                                                                                                                                                                                                                 | `boolean`                                               | `true`      |
+| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked.                                                                                                                                                                                                                                                               | `boolean`                                               | `true`      |
+| `buttons`         | --                 | Array of buttons to be added to the alert.                                                                                                                                                                                                                                                                                         | `(string \| AlertButton)[]`                             | `[]`        |
+| `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 alert is presented.                                                                                                                                                                                                                                                                                      | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `header`          | `header`           | The main title in the heading of the alert.                                                                                                                                                                                                                                                                                        | `string \| undefined`                                   | `undefined` |
+| `inputs`          | --                 | Array of input to show in the alert.                                                                                                                                                                                                                                                                                               | `AlertInput[]`                                          | `[]`        |
+| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                                                                                                                                                                                             | `boolean`                                               | `true`      |
+| `leaveAnimation`  | --                 | Animation to use when the alert is dismissed.                                                                                                                                                                                                                                                                                      | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `message`         | `message`          | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined`                                   | `undefined` |
+| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                                                                  | `"ios" \| "md"`                                         | `undefined` |
+| `subHeader`       | `sub-header`       | The subtitle in the heading of the alert. Displayed under the title.                                                                                                                                                                                                                                                               | `string \| undefined`                                   | `undefined` |
+| `translucent`     | `translucent`      | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).                                                                                                               | `boolean`                                               | `false`     |
 
 
 ## Events
@@ -1104,15 +1111,16 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name           | Description                 |
-| -------------- | --------------------------- |
-| `--background` | Background of the alert     |
-| `--height`     | Height of the alert         |
-| `--max-height` | Maximum height of the alert |
-| `--max-width`  | Maximum width of the alert  |
-| `--min-height` | Minimum height of the alert |
-| `--min-width`  | Minimum width of the alert  |
-| `--width`      | Width of the alert          |
+| Name                 | Description                 |
+| -------------------- | --------------------------- |
+| `--backdrop-opacity` | Opacity of the backdrop     |
+| `--background`       | Background of the alert     |
+| `--height`           | Height of the alert         |
+| `--max-height`       | Maximum height of the alert |
+| `--max-width`        | Maximum width of the alert  |
+| `--min-height`       | Minimum height of the alert |
+| `--min-width`        | Minimum width of the alert  |
+| `--width`            | Width of the alert          |
 
 
 ## Dependencies

core/src/components/alert/test/basic/index.html

@@ -21,8 +21,6 @@
     </ion-header>
 
     <ion-content class="ion-padding">
-      <ion-alert-controller></ion-alert-controller>
-
       <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
       <ion-button id="longMessage" expand="block" onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
       <ion-button id="multipleButtons" expand="block" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</ion-button>
@@ -48,50 +46,49 @@
     window.addEventListener('ionAlertDidDismiss', function (e) { console.log('didDismiss', e) })
     window.addEventListener('ionAlertWillDismiss', function (e) { console.log('willDismiss', e) })
 
-    async function presentAlert() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlert() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK']
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertLongMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertLongMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK']
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertMultipleButtons() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertMultipleButtons() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete']
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertNoMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertNoMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         buttons: ['OK']
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertConfirm() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertConfirm() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
@@ -110,12 +107,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertPrompt() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertPrompt() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Prompt!',
         inputs: [
           {
@@ -129,6 +126,16 @@
             value: 'hello',
             placeholder: 'Placeholder 2'
           },
+          {
+            type: 'text',
+            placeholder: 'Placeholder 3',
+            disabled: true
+          },
+          {
+              type: 'textarea',
+              placeholder: 'Placeholder 4',
+              value: 'Textarea hello'
+          },
           {
             name: 'name3',
             type: 'text',
@@ -175,12 +182,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertRadio() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertRadio() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Radio',
         inputs: [
           {
@@ -207,7 +214,8 @@
           {
             type: 'radio',
             label: 'Radio 5',
-            value: 'value5'
+            value: 'value5',
+            disabled: true
           },
           {
             type: 'radio',
@@ -231,12 +239,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertCheckbox() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertCheckbox() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Checkbox',
         inputs: [
           {
@@ -267,7 +275,8 @@
           {
             type: 'checkbox',
             label: 'Checkbox 5',
-            value: 'value5'
+            value: 'value5',
+            disabled: true
           },
 
           {
@@ -292,12 +301,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentWithCssClass() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentWithCssClass() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         cssClass: 'my-class my-custom-class   ',
@@ -310,7 +319,8 @@
           }
         }]
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
   </script>

core/src/components/alert/test/standalone/index.html

@@ -34,23 +34,22 @@
   <div class="f"></div>
 
   <dialog id="favDialog">
-      <form method="dialog">
-        <section>
-          <p><label for="favAnimal">Favorite animal:</label>
-          <select id="favAnimal">
-            <option></option>
-            <option>Brine shrimp</option>
-            <option>Red panda</option>
-            <option>Spider monkey</option>
-          </select></p>
-        </section>
-        <menu>
-          <button id="cancel" type="reset">Cancel</button>
-          <button type="submit">Confirm</button>
-        </menu>
-      </form>
-    </dialog>
-  <ion-alert-controller></ion-alert-controller>
+    <form method="dialog">
+      <section>
+        <p><label for="favAnimal">Favorite animal:</label>
+        <select id="favAnimal">
+          <option></option>
+          <option>Brine shrimp</option>
+          <option>Red panda</option>
+          <option>Spider monkey</option>
+        </select></p>
+      </section>
+      <menu>
+        <button id="cancel" type="reset">Cancel</button>
+        <button type="submit">Confirm</button>
+      </menu>
+    </form>
+  </dialog>
 
   <style>
     .f {
@@ -77,50 +76,49 @@
     window.addEventListener('ionAlertDidDismiss', function(e){console.log('didDismiss', e)})
     window.addEventListener('ionAlertWillDismiss', function(e){console.log('willDismiss', e)})
 
-    async function presentAlert() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlert() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK']
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertLongMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertLongMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK']
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertMultipleButtons() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertMultipleButtons() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete']
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertNoMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertNoMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         buttons: ['OK']
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertConfirm() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertConfirm() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
@@ -139,12 +137,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertPrompt() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertPrompt() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Prompt!',
         inputs: [
           {
@@ -201,12 +199,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertRadio() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertRadio() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Radio',
         inputs: [
           {
@@ -257,12 +255,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertCheckbox() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertCheckbox() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Checkbox',
         inputs: [
           {
@@ -318,12 +316,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentWithCssClass() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentWithCssClass() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         cssClass: 'my-class my-customClass   ',
@@ -336,7 +334,8 @@
             }
           }]
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
 </script>

core/src/components/alert/test/translucent/index.html

@@ -21,7 +21,6 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-alert-controller></ion-alert-controller>
 
         <ion-button expand="block" onclick="presentAlert()">Alert</ion-button>
         <ion-button expand="block" color="secondary" onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
@@ -51,56 +50,53 @@
   </ion-app>
 
   <script>
-
-
-    async function presentAlert() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlert() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK'],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertLongMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertLongMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK'],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertMultipleButtons() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertMultipleButtons() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete'],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertNoMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertNoMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         buttons: ['OK'],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertConfirm() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertConfirm() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
@@ -120,12 +116,12 @@
         ],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertPrompt() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertPrompt() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Prompt!',
         inputs: [
           {
@@ -183,12 +179,12 @@
         ],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertRadio() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertRadio() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Radio',
         inputs: [
           {
@@ -240,13 +236,12 @@
         ],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertCheckbox() {
-
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertCheckbox() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Checkbox',
         inputs: [
           {
@@ -303,7 +298,8 @@
         ],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
   </script>

core/src/components/alert/usage/angular.md

@@ -73,6 +73,13 @@ export class AlertExample {
           value: 'hello',
           placeholder: 'Placeholder 2'
         },
+        // multiline input.
+        {
+          name: 'paragraph',
+          id: 'paragraph',
+          type: 'textarea',
+          placeholder: 'Placeholder 3'
+        },
         {
           name: 'name3',
           value: 'http://ionicframework.com',

core/src/components/alert/usage/javascript.md

@@ -1,232 +1,232 @@
 ```javascript
-async function presentAlert() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlert() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Alert';
+  alert.subHeader = 'Subtitle';
+  alert.message = 'This is an alert message.';
+  alert.buttons = ['OK'];
 
-  const alert = await alertController.create({
-    header: 'Alert',
-    subHeader: 'Subtitle',
-    message: 'This is an alert message.',
-    buttons: ['OK']
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertMultipleButtons() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertMultipleButtons() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Alert';
+  alert.subHeader = 'Subtitle';
+  alert.message = 'This is an alert message.';
+  alert.buttons = ['Cancel', 'Open Modal', 'Delete'];
 
-  const alert = await alertController.create({
-    header: 'Alert',
-    subHeader: 'Subtitle',
-    message: 'This is an alert message.',
-    buttons: ['Cancel', 'Open Modal', 'Delete']
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertConfirm() {
-  const alertController = document.querySelector('ion-alert-controller');
-
-  const alert = await alertController.create({
-    header: 'Confirm!',
-    message: 'Message <strong>text</strong>!!!',
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: (blah) => {
-          console.log('Confirm Cancel: blah');
-        }
-      }, {
-        text: 'Okay',
-        handler: () => {
-          console.log('Confirm Okay')
-        }
+function presentAlertConfirm() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Confirm!';
+  alert.message = 'Message <strong>text</strong>!!!';
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: (blah) => {
+        console.log('Confirm Cancel: blah');
       }
-    ]
-  });
-  return await alert.present();
+    }, {
+      text: 'Okay',
+      handler: () => {
+        console.log('Confirm Okay')
+      }
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertPrompt() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertPrompt() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Prompt!';
+  alert.inputs = [
+    {
+      placeholder: 'Placeholder 1'
+    },
+    {
+      name: 'name2',
+      id: 'name2-id',
+      value: 'hello',
+      placeholder: 'Placeholder 2'
+    },
+    // multiline input.
+    {
+      name: 'paragraph',
+      id: 'paragraph',
+      type: 'textarea',
+      placeholder: 'Placeholder 3'
+    },
+    {
+      name: 'name3',
+      value: 'http://ionicframework.com',
+      type: 'url',
+      placeholder: 'Favorite site ever'
+    },
+    // input date with min & max
+    {
+      name: 'name4',
+      type: 'date',
+      min: '2017-03-01',
+      max: '2018-01-12'
+    },
+    // input date without min nor max
+    {
+      name: 'name5',
+      type: 'date'
+    },
+    {
+      name: 'name6',
+      type: 'number',
+      min: -5,
+      max: 10
+    },
+    {
+      name: 'name7',
+      type: 'number'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
+      }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
+      }
+    }
+  ];
 
-  const alert = await alertController.create({
-    header: 'Prompt!',
-    inputs: [
-      {
-        placeholder: 'Placeholder 1'
-      },
-      {
-        name: 'name2',
-        id: 'name2-id',
-        value: 'hello',
-        placeholder: 'Placeholder 2'
-      },
-      {
-        name: 'name3',
-        value: 'http://ionicframework.com',
-        type: 'url',
-        placeholder: 'Favorite site ever'
-      },
-      // input date with min & max
-      {
-        name: 'name4',
-        type: 'date',
-        min: '2017-03-01',
-        max: '2018-01-12'
-      },
-      // input date without min nor max
-      {
-        name: 'name5',
-        type: 'date'
-      },
-      {
-        name: 'name6',
-        type: 'number',
-        min: -5,
-        max: 10
-      },
-      {
-        name: 'name7',
-        type: 'number'
-      }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
-      }
-    ]
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertRadio() {
-  const alertController = document.querySelector('ion-alert-controller');
-
-  const alert = await alertController.create({
-    header: 'Radio',
-    inputs: [
-      {
-        type: 'radio',
-        label: 'Radio 1',
-        value: 'value1',
-        checked: true
-      },
-      {
-        type: 'radio',
-        label: 'Radio 2',
-        value: 'value2'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 3',
-        value: 'value3'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 4',
-        value: 'value4'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 5',
-        value: 'value5'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-        value: 'value6'
+function presentAlertRadio() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Radio';
+  alert.inputs = [
+    {
+      type: 'radio',
+      label: 'Radio 1',
+      value: 'value1',
+      checked: true
+    },
+    {
+      type: 'radio',
+      label: 'Radio 2',
+      value: 'value2'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 3',
+      value: 'value3'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 4',
+      value: 'value4'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 5',
+      value: 'value5'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+      value: 'value6'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
       }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
       }
-    ]
-  });
-  return await alert.present();
+    }
+  ];
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertCheckbox() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertCheckbox() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Checkbox';
+  alert.inputs = [
+    {
+      type: 'checkbox',
+      label: 'Checkbox 1',
+      value: 'value1',
+      checked: true
+    },
 
-  const alert = await alertController.create({
-    header: 'Checkbox',
-    inputs: [
-      {
-        type: 'checkbox',
-        label: 'Checkbox 1',
-        value: 'value1',
-        checked: true
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 2',
+      value: 'value2'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 2',
-        value: 'value2'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 3',
+      value: 'value3'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 3',
-        value: 'value3'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 4',
+      value: 'value4'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 4',
-        value: 'value4'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 5',
+      value: 'value5'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 5',
-        value: 'value5'
-      },
-
-      {
-        type: 'checkbox',
-        label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-        value: 'value6'
+    {
+      type: 'checkbox',
+      label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+      value: 'value6'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
       }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
       }
-    ]
-  });
-  return await alert.present();
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
 }
 ```

core/src/components/alert/usage/react.md

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { IonAlert, IonButton, IonContent } from '@ionic/react';
 
-export const AlertExample: React.FunctionComponent = () => {
+export const AlertExample: React.FC = () => {
 
   const [showAlert1, setShowAlert1] = useState(false);
   const [showAlert2, setShowAlert2] = useState(false);

core/src/components/anchor/anchor.scss

@@ -1,24 +0,0 @@
-@import "../../themes/ionic.globals";
-
-// Anchor
-// --------------------------------------------------
-
-:host {
-  /**
-   * @prop --background: Background of the anchor
-   * @prop --color: Text color of the anchor
-   */
-  --background: transparent;
-  --color: #{ion-color(primary, base)};
-
-  background: var(--background);
-  color: var(--color);
-}
-
-:host(.ion-color) {
-  color: current-color(base);
-}
-
-a {
-  @include text-inherit();
-}

core/src/components/anchor/anchor.tsx

@@ -1,71 +0,0 @@
-import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
-
-import { getIonMode } from '../../global/ionic-global';
-import { Color, RouterDirection } from '../../interface';
-import { createColorClasses, openURL } from '../../utils/theme';
-
-/**
- * @deprecated Use `ion-router-link` instead.
- */
-@Component({
-  tag: 'ion-anchor',
-  styleUrl: 'anchor.scss',
-  shadow: true
-})
-export class Anchor implements ComponentInterface {
-
-  /**
-   * The color to use from your application's color palette.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information on colors, see [theming](/docs/theming/basics).
-   */
-  @Prop() color?: Color;
-
-  /**
-   * Contains a URL or a URL fragment that the hyperlink points to.
-   * If this property is set, an anchor tag will be rendered.
-   */
-  @Prop() href: string | undefined;
-
-  /**
-   * Specifies the relationship of the target object to the link object.
-   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-   */
-  @Prop() rel: string | undefined;
-
-  /**
-   * When using a router, it specifies the transition direction when navigating to
-   * another page using `href`.
-   */
-  @Prop() routerDirection: RouterDirection = 'forward';
-
-  componentDidLoad() {
-    console.warn('The <ion-anchor> component has been deprecated. Please use an <ion-router-link> if you are using a vanilla JS or Stencil project or an <a> with the Angular router.');
-  }
-
-  private onClick = (ev: Event) => {
-    openURL(this.href, ev, this.routerDirection);
-  }
-
-  render() {
-    const mode = getIonMode(this);
-    const attrs = {
-      href: this.href,
-      rel: this.rel
-    };
-    return (
-      <Host
-        onClick={this.onClick}
-        class={{
-          ...createColorClasses(this.color),
-          [mode]: true,
-          'ion-activatable': true
-        }}
-      >
-        <a {...attrs}>
-          <slot></slot>
-        </a>
-      </Host>
-    );
-  }
-}

core/src/components/anchor/readme.md

@@ -1,28 +0,0 @@
-# ion-anchor
-
-<!-- Auto Generated Below -->
-
-
-> **[DEPRECATED]** Use `ion-router-link` instead.
-
-## Properties
-
-| Property          | Attribute          | Description                                                                                                                                                                                                                                                            | Type                            | Default     |
-| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
-| `color`           | `color`            | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`           | `undefined` |
-| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                | `string \| undefined`           | `undefined` |
-| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                 | `string \| undefined`           | `undefined` |
-| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                               | `"back" \| "forward" \| "root"` | `'forward'` |
-
-
-## CSS Custom Properties
-
-| Name           | Description              |
-| -------------- | ------------------------ |
-| `--background` | Background of the anchor |
-| `--color`      | Text color of the anchor |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*

core/src/components/anchor/test/basic/index.html

@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Anchor - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <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>
-
-<body>
-  <ion-app>
-
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Anchor - Basic</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content class="ion-padding">
-      <p>
-        <a href="#">A</a>
-      </p>
-
-      <p>
-        <ion-anchor href="#">Anchor</ion-anchor>
-      </p>
-
-      <p>
-        <ion-anchor href="https://ionicframework.com" rel="external" style="text-decoration: underline">Underline Anchor</ion-anchor>
-      </p>
-
-      <p>
-        <ion-anchor href="#" download="yes" class="custom">Custom Anchor</ion-anchor>
-      </p>
-
-      <p>
-        <ion-anchor color="dark" href="#">Dark Anchor</ion-anchor>
-      </p>
-
-      <p>
-        <ion-anchor color="danger" href="#">Danger Anchor</ion-anchor>
-      </p>
-
-      <p>
-        <ion-anchor id="toggleColor" color="tertiary" href="#">Dynamic Color</ion-anchor>
-      </p>
-
-      <ion-button onclick="toggleColor()">Toggle Color</ion-button>
-    </ion-content>
-
-
-  </ion-app>
-
-  <script>
-    const el = document.querySelector('#toggleColor');
-
-    function toggleColor() {
-      const prev = el.getAttribute('color');
-      el.setAttribute('color', prev === 'secondary' ? 'tertiary' : 'secondary');
-      el.innerHTML = prev === 'secondary' ? 'Tertiary Anchor' : 'Secondary Anchor';
-    }
-  </script>
-
-  <style>
-    .custom {
-      font-family: cursive;
-      font-size: 24px;
-      font-weight: bold;
-      letter-spacing: 5px;
-      text-decoration: dotted underline;
-      text-transform: uppercase;
-      color: magenta;
-    }
-  </style>
-</body>
-
-</html>

core/src/components/anchor/test/standalone/index.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Anchor - Standalone</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <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>
-
-<body class="ion-padding">
-  <h1>Default</h1>
-  <ion-anchor href="#">Anchor</ion-anchor>
-
-  <h1>Colors</h1>
-  <ion-anchor href="#" color="primary">Primary Anchor</ion-anchor>
-  <ion-anchor href="#" color="secondary">Secondary Anchor</ion-anchor>
-  <ion-anchor href="#" color="tertiary">Tertiary Anchor</ion-anchor>
-  <ion-anchor href="#" color="success">Success Anchor</ion-anchor>
-  <ion-anchor href="#" color="warning">Warning Anchor</ion-anchor>
-  <ion-anchor href="#" color="danger">Danger Anchor</ion-anchor>
-  <ion-anchor href="#" color="light">Light Anchor</ion-anchor>
-  <ion-anchor href="#" color="medium">Medium Anchor</ion-anchor>
-  <ion-anchor href="#" color="dark">Dark Anchor</ion-anchor>
-
-  <h1>Custom</h1>
-  <ion-anchor href="#" style="text-decoration: underline">Underline Anchor</ion-anchor>
-  <ion-anchor href="#" class="cursive">Cursive Anchor</ion-anchor>
-  <ion-anchor href="#" class="custom">Custom Anchor</ion-anchor>
-  <ion-anchor href="#" color="secondary" class="custom">Custom Secondary Anchor</ion-anchor>
-
-  <style>
-    ion-anchor {
-      display: block;
-      --color: blue;
-    }
-
-    .cursive {
-      font-family: cursive;
-      font-size: 24px;
-      font-weight: bold;
-      letter-spacing: 5px;
-      text-decoration: dotted underline;
-      text-transform: uppercase;
-      color: magenta;
-    }
-
-    .custom {
-      --background: blue;
-      --color: white;
-    }
-  </style>
-</body>
-
-</html>

core/src/components/app/app.tsx

@@ -1,8 +1,7 @@
-import { Component, ComponentInterface, Element, Host, h } from '@stencil/core';
+import { Build, Component, ComponentInterface, Element, Host, h } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { rIC } from '../../utils/helpers';
 import { isPlatform } from '../../utils/platform';
 
 @Component({
@@ -14,23 +13,24 @@ export class App implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   componentDidLoad() {
-    rIC(() => {
-      const isHybrid = isPlatform(window, 'hybrid');
-      if (!config.getBoolean('_testing')) {
-        import('../../utils/tap-click').then(module => module.startTapClick(config));
-      }
-      if (config.getBoolean('statusTap', isHybrid)) {
-        import('../../utils/status-tap').then(module => module.startStatusTap());
-      }
-      if (config.getBoolean('inputShims', needInputShims())) {
-        import('../../utils/input-shims/input-shims').then(module => module.startInputShims(config));
-      }
-      if (config.getBoolean('hardwareBackButton', isHybrid)) {
-        import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton());
-      }
-      import('../../utils/focus-visible').then(module => module.startFocusVisible());
-
-    });
+    if (Build.isBrowser) {
+      rIC(() => {
+        const isHybrid = isPlatform(window, 'hybrid');
+        if (!config.getBoolean('_testing')) {
+          import('../../utils/tap-click').then(module => module.startTapClick(config));
+        }
+        if (config.getBoolean('statusTap', isHybrid)) {
+          import('../../utils/status-tap').then(module => module.startStatusTap());
+        }
+        if (config.getBoolean('inputShims', needInputShims())) {
+          import('../../utils/input-shims/input-shims').then(module => module.startInputShims(config));
+        }
+        if (config.getBoolean('hardwareBackButton', isHybrid)) {
+          import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton());
+        }
+        import('../../utils/focus-visible').then(module => module.startFocusVisible());
+      });
+    }
   }
 
   render() {
@@ -51,3 +51,11 @@ export class App implements ComponentInterface {
 const needInputShims = () => {
   return isPlatform(window, 'ios') && isPlatform(window, 'mobile');
 };
+
+const rIC = (callback: () => void) => {
+  if ('requestIdleCallback' in window) {
+    (window as any).requestIdleCallback(callback);
+  } else {
+    setTimeout(callback, 32);
+  }
+};