v6.2.4

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

.github/workflows/actions/build-core/action.yml

@@ -30,7 +30,7 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/css core/hydrate core/loader
+        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
     - uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-core-src

.github/workflows/actions/test-angular-e2e/action.yml

@@ -1,5 +1,8 @@
 name: 'Test Angular E2E'
 description: 'Test Angular E2E'
+inputs:
+  app:
+    description: 'The specific test application'
 runs:
   using: 'composite'
   steps:
@@ -29,15 +32,19 @@ runs:
         name: ionic-angular-server
         path: ./packages/angular-server
         filename: AngularServerBuild.zip
+    - name: Create Test App
+      run: ./build.sh ${{ inputs.app }}
+      shell: bash
+      working-directory: ./angular/test
     - name: Install Dependencies
       run: npm install
       shell: bash
-      working-directory: ./angular/test/test-app
+      working-directory: ./angular/test/build/${{ inputs.app }}
     - name: Sync Built Changes
       run: npm run sync
       shell: bash
-      working-directory: ./angular/test/test-app
+      working-directory: ./angular/test/build/${{ inputs.app }}
     - name: Run Tests
       run: npm run test
       shell: bash
-      working-directory: ./angular/test/test-app
+      working-directory: ./angular/test/build/${{ inputs.app }}

.github/workflows/actions/test-vue-e2e/action.yml

@@ -1,5 +1,8 @@
 name: 'Test Vue E2E'
 description: 'Test Vue E2E'
+inputs:
+  app:
+    description: 'The specific test application'
 runs:
   using: 'composite'
   steps:
@@ -29,19 +32,23 @@ runs:
         name: ionic-vue-router
         path: ./packages/vue-router
         filename: VueRouterBuild.zip
+    - name: Create Test App
+      run: ./build.sh ${{ inputs.app }}
+      shell: bash
+      working-directory: ./packages/vue/test
     - name: Install Dependencies
       run: npm install
       shell: bash
-      working-directory: ./packages/vue/test-app
+      working-directory: ./packages/vue/test/build/${{ inputs.app }}
     - name: Sync
       run: npm run sync
       shell: bash
-      working-directory: ./packages/vue/test-app
+      working-directory: ./packages/vue/test/build/${{ inputs.app }}
     - name: Run Spec Tests
       run: npm run test:unit
       shell: bash
-      working-directory: ./packages/vue/test-app
+      working-directory: ./packages/vue/test/build/${{ inputs.app }}
     - name: Run E2E Tests
       run: npm run test:e2e
       shell: bash
-      working-directory: ./packages/vue/test-app
+      working-directory: ./packages/vue/test/build/${{ inputs.app }}

.github/workflows/build.yml

@@ -106,11 +106,26 @@ jobs:
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [vue3]
     needs: [build-vue, build-vue-router]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
     - uses: ./.github/workflows/actions/test-vue-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-vue-e2e:
+    if: ${{ always() }}
+    needs: test-vue-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-vue-e2e.result != 'success' }}
+        run: exit 1
 
   build-angular:
     needs: [build-core]
@@ -127,11 +142,26 @@ jobs:
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [ng12, ng13, ng14]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
     - uses: ./.github/workflows/actions/test-angular-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-angular-e2e:
+    if: ${{ always() }}
+    needs: test-angular-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-angular-e2e.result != 'success' }}
+        run: exit 1
 
   build-react:
     needs: [build-core]

.github/workflows/release.yml

@@ -61,4 +61,21 @@ jobs:
           git add .
           git commit -m "chore(): update package lock files"
           git push
+      # Purge the JSDeliver CDN cache so
+      # component playgrounds always load
+      # the latest version of Ionic.
+      - name: Purge JSDelivr Cache
+        run: |
+          curl -X POST \
+            https://purge.jsdelivr.net/ \
+            -H 'cache-control: no-cache' \
+            -H 'content-type: application/json' \
+            -d '{
+          "path": [
+            "/npm/@ionic/core@6/dist/ionic/ionic.esm.js",
+            "/npm/@ionic/core@latest/dist/ionic/ionic.esm.js",
+            "/npm/@ionic/core@6/css/ionic.bundle.css",
+            "/npm/@ionic/core@latest/css/ionic.bundle.css"
+          ]}'
+
 

.gitignore

@@ -22,7 +22,6 @@ temp/
 core/theme-builder/
 core/test-components/
 core/css/
-angular/css/
 $RECYCLE.BIN/
 
 .DS_Store
@@ -56,7 +55,6 @@ prerender-hydrated.html
 prerender-static.html
 
 # stencil
-angular/css/
 packages/react/css/
 packages/vue/css/
 core/components/
@@ -65,11 +63,18 @@ core/hydrate/
 core/loader/
 core/www/
 .stencil/
-angular/build/
 
 # playwright
 core/test-results/
 core/playwright-report/
 core/**/*-snapshots
 
+# angular
+angular/css/
+angular/test/build/
+.angular/
+
+# vue
+packages/vue/test/build/
+
 .npmrc

CHANGELOG.md

@@ -3,6 +3,144 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.4](https://github.com/ionic-team/ionic-framework/compare/v6.2.3...v6.2.4) (2022-08-24)
+
+
+### Bug Fixes
+
+* **alert:** add default aria-label ([#25800](https://github.com/ionic-team/ionic-framework/issues/25800)) ([d395a73](https://github.com/ionic-team/ionic-framework/commit/d395a73cb6c419e6c0072746b8e4768cd5f78ef3))
+* **alert:** use aria-labelledby and aria-describedby instead of aria-label ([#25805](https://github.com/ionic-team/ionic-framework/issues/25805)) ([27318d7](https://github.com/ionic-team/ionic-framework/commit/27318d75df60dfce1a90f23ba31ea2b6636ba42f))
+* **breadcrumb:** separator is not announced by narrators ([#25796](https://github.com/ionic-team/ionic-framework/issues/25796)) ([71fad38](https://github.com/ionic-team/ionic-framework/commit/71fad3884bc55b266067efb346500c848b856946))
+* **datetime:** close month/year picker when hidden ([#25789](https://github.com/ionic-team/ionic-framework/issues/25789)) ([3b211b6](https://github.com/ionic-team/ionic-framework/commit/3b211b60fd9a88be6e232f839ecc4be090181530)), closes [#25787](https://github.com/ionic-team/ionic-framework/issues/25787)
+* **modal:** role attribute can be customized ([#25804](https://github.com/ionic-team/ionic-framework/issues/25804)) ([037d579](https://github.com/ionic-team/ionic-framework/commit/037d579b2a3a660358f1e9c9b020c9510bb9c6b0))
+* **react:** duplicate page transitions do not happen on react 18 ([#25798](https://github.com/ionic-team/ionic-framework/issues/25798)) ([a39d776](https://github.com/ionic-team/ionic-framework/commit/a39d776f087514b7fa744f44ce8ce2a04ed8aa43)), closes [#25797](https://github.com/ionic-team/ionic-framework/issues/25797)
+* **refresher:** use componentOnReady utility for CE build ([#25783](https://github.com/ionic-team/ionic-framework/issues/25783)) ([bd715a5](https://github.com/ionic-team/ionic-framework/commit/bd715a52562f1f175d4bb6ea2dbfdd67a3e91db1)), closes [#25782](https://github.com/ionic-team/ionic-framework/issues/25782)
+* **select:** compareWith passes params in correct order ([#25764](https://github.com/ionic-team/ionic-framework/issues/25764)) ([d631195](https://github.com/ionic-team/ionic-framework/commit/d6311951243fd9b867ae5d4a7a08c8d341f8eb7a)), closes [#25759](https://github.com/ionic-team/ionic-framework/issues/25759)
+* **vue:** lifecycles now fire on tabs pages ([#25786](https://github.com/ionic-team/ionic-framework/issues/25786)) ([3020005](https://github.com/ionic-team/ionic-framework/commit/30200051bbab6ce57fd363668dafc49287c87c56)), closes [#25784](https://github.com/ionic-team/ionic-framework/issues/25784)
+
+
+
+
+
+## [6.2.3](https://github.com/ionic-team/ionic-framework/compare/v6.2.2...v6.2.3) (2022-08-17)
+
+
+### Bug Fixes
+
+* **css:** preserve whitespace in selectors when minifying css ([#25767](https://github.com/ionic-team/ionic-framework/issues/25767)) ([bafa759](https://github.com/ionic-team/ionic-framework/commit/bafa759655a0f3ca206255ba429f21d319c37aed)), closes [#25766](https://github.com/ionic-team/ionic-framework/issues/25766)
+* **datetime:** highlights now show above content in modal ([#25756](https://github.com/ionic-team/ionic-framework/issues/25756)) ([d711658](https://github.com/ionic-team/ionic-framework/commit/d7116581c8e92716f49877abc78d93dc39c34e1d)), closes [#25755](https://github.com/ionic-team/ionic-framework/issues/25755)
+* **footer:** remove toolbar bottom padding if near bottom slot tabs or keyboard is open ([#25746](https://github.com/ionic-team/ionic-framework/issues/25746)) ([bb37446](https://github.com/ionic-team/ionic-framework/commit/bb374460320b0ba2ee03a5a0ecebb3e7a9f0728e))
+* **header:** hide from screen readers when collapsed ([#25744](https://github.com/ionic-team/ionic-framework/issues/25744)) ([d0ba963](https://github.com/ionic-team/ionic-framework/commit/d0ba9635998f2157970156438c1bb74d6b9682f2))
+* **input:** exclude date inputs from scroll assist ([#25749](https://github.com/ionic-team/ionic-framework/issues/25749)) ([abb56d2](https://github.com/ionic-team/ionic-framework/commit/abb56d22b4a81d1bc34c689de4ef7218e7503b20)), closes [#25745](https://github.com/ionic-team/ionic-framework/issues/25745)
+* **item:** form validation caret color renders correctly ([#25725](https://github.com/ionic-team/ionic-framework/issues/25725)) ([de20541](https://github.com/ionic-team/ionic-framework/commit/de20541486bcf6e1d15f0ae5b0c5f177cce5eb38)), closes [#25719](https://github.com/ionic-team/ionic-framework/issues/25719)
+* **refresher:** refresher is visible with multiple custom scroll targets ([#25750](https://github.com/ionic-team/ionic-framework/issues/25750)) ([e750e33](https://github.com/ionic-team/ionic-framework/commit/e750e336167397ed996d9833763286f4881e79b5)), closes [#25495](https://github.com/ionic-team/ionic-framework/issues/25495)
+
+
+
+
+
+## [6.2.2](https://github.com/ionic-team/ionic-framework/compare/v6.2.1...v6.2.2) (2022-08-10)
+
+
+### Bug Fixes
+
+* **angular:** DatetimeButton is declared on IonicModule ([#25727](https://github.com/ionic-team/ionic-framework/issues/25727)) ([76ad1d1](https://github.com/ionic-team/ionic-framework/commit/76ad1d18c81272435db1994977aa9dd5d880504a))
+* **datetime:** add correct null check when value changes ([#25716](https://github.com/ionic-team/ionic-framework/issues/25716)) ([36bea1c](https://github.com/ionic-team/ionic-framework/commit/36bea1ca2520c9eb9ee7705abb046607a52d198d)), closes [#25714](https://github.com/ionic-team/ionic-framework/issues/25714)
+* **datetime:** preferWheel respects column ordering by locale ([#25726](https://github.com/ionic-team/ionic-framework/issues/25726)) ([dee0f51](https://github.com/ionic-team/ionic-framework/commit/dee0f513ee443c0c69ea8e38a292c900e9c70221)), closes [#25722](https://github.com/ionic-team/ionic-framework/issues/25722)
+* **react:** outlet will not clear in react 18 with hot reload ([#25703](https://github.com/ionic-team/ionic-framework/issues/25703)) ([3878bf7](https://github.com/ionic-team/ionic-framework/commit/3878bf76523f2e1c26c147473fd7c07ee4d0e820)), closes [#25507](https://github.com/ionic-team/ionic-framework/issues/25507)
+* **vue:** go back to correct view with memory history ([#25732](https://github.com/ionic-team/ionic-framework/issues/25732)) ([8327889](https://github.com/ionic-team/ionic-framework/commit/832788971a7098e52812f66563cbc0a63d3e5df7)), closes [#25705](https://github.com/ionic-team/ionic-framework/issues/25705)
+
+
+
+
+
+## [6.2.1](https://github.com/ionic-team/ionic-framework/compare/v6.2.0...v6.2.1) (2022-08-03)
+
+
+### Bug Fixes
+
+* **datetime:** display time in user's timezone after selection ([#25694](https://github.com/ionic-team/ionic-framework/issues/25694)) ([11c69c8](https://github.com/ionic-team/ionic-framework/commit/11c69c8df50b75440c9e876b4d99d469d16e144f)), closes [#25693](https://github.com/ionic-team/ionic-framework/issues/25693)
+* **datetime:** selecting today with multiple date select now works ([#25699](https://github.com/ionic-team/ionic-framework/issues/25699)) ([86b7000](https://github.com/ionic-team/ionic-framework/commit/86b7000bcd1b4519e8c20907050e15ba7c99bab0))
+* **nav:** exclude nav from custom dialog ([#25689](https://github.com/ionic-team/ionic-framework/issues/25689)) ([d1e517b](https://github.com/ionic-team/ionic-framework/commit/d1e517bfef03b822dfa7651681013277762eda08)), closes [#25677](https://github.com/ionic-team/ionic-framework/issues/25677) [#25688](https://github.com/ionic-team/ionic-framework/issues/25688)
+* **react:** IonNav apply properties to page components  ([#25603](https://github.com/ionic-team/ionic-framework/issues/25603)) ([61e4ffe](https://github.com/ionic-team/ionic-framework/commit/61e4ffe47f73034808b65ee37342f540ee5a6a97)), closes [#25602](https://github.com/ionic-team/ionic-framework/issues/25602)
+
+
+
+
+
+# [6.2.0](https://github.com/ionic-team/ionic-framework/compare/v6.1.15...v6.2.0) (2022-07-27)
+
+
+### Bug Fixes
+
+* **datetime:** account for previous years with preferWheel ([#25656](https://github.com/ionic-team/ionic-framework/issues/25656)) ([3a7f5f1](https://github.com/ionic-team/ionic-framework/commit/3a7f5f166ee8d8d7e1861313e2bc6f4856e4fbe9))
+* **datetime:** switching months in wheel picker now selected nearest neighbor ([#25559](https://github.com/ionic-team/ionic-framework/issues/25559)) ([dd256e1](https://github.com/ionic-team/ionic-framework/commit/dd256e1313fa1c307f30b0dbb7fd0d1da8c555f7))
+* **datetime:** switching presentation closes month/year picker ([#25667](https://github.com/ionic-team/ionic-framework/issues/25667)) ([57a21ad](https://github.com/ionic-team/ionic-framework/commit/57a21adb38331ee5d74dacd1b0a2568f41a2d21e))
+* **nav:** pop() will unmount views within a modal ([#25638](https://github.com/ionic-team/ionic-framework/issues/25638)) ([db28794](https://github.com/ionic-team/ionic-framework/commit/db28794f0b75f2824ae26c101a8c52af70f43ffd)), closes [#25637](https://github.com/ionic-team/ionic-framework/issues/25637) [#21831](https://github.com/ionic-team/ionic-framework/issues/21831)
+* **picker-column-internal:** tabbing between columns works ([#25464](https://github.com/ionic-team/ionic-framework/issues/25464)) ([db02772](https://github.com/ionic-team/ionic-framework/commit/db027721ac299e7d23c42b52b0274be06b909f89))
+* **textarea:** textarea with autogrow will size to its contents ([#24205](https://github.com/ionic-team/ionic-framework/issues/24205)) ([a9cf2ab](https://github.com/ionic-team/ionic-framework/commit/a9cf2ab87012cdb6360d10536a29213adda3f585)), closes [#24793](https://github.com/ionic-team/ionic-framework/issues/24793) [#21242](https://github.com/ionic-team/ionic-framework/issues/21242)
+* **vue:** input v-model accepts numbers ([#25666](https://github.com/ionic-team/ionic-framework/issues/25666)) ([ab65e9a](https://github.com/ionic-team/ionic-framework/commit/ab65e9a7b51c3a3f8c59962d3e1faff1564ab801)), closes [#25575](https://github.com/ionic-team/ionic-framework/issues/25575)
+
+
+### Features
+
+* **angular, react, vue:** add support for autoMountComponent ([#25552](https://github.com/ionic-team/ionic-framework/issues/25552)) ([805dfa0](https://github.com/ionic-team/ionic-framework/commit/805dfa05663098ef9c02b0745a383b5e7555908b))
+* **datetime-button:** add button for displaying datetime in overlays ([#25655](https://github.com/ionic-team/ionic-framework/issues/25655)) ([4997331](https://github.com/ionic-team/ionic-framework/commit/499733105e4be23405e8afeeb26fee5cd2afc25b)), closes [#24316](https://github.com/ionic-team/ionic-framework/issues/24316)
+* **datetime:** add multiple date selection ([#25514](https://github.com/ionic-team/ionic-framework/issues/25514)) ([9d31608](https://github.com/ionic-team/ionic-framework/commit/9d31608f2d471f531eb253832c8558d1effaf68a))
+* **datetime:** add wheel style picker for dates and times ([#25468](https://github.com/ionic-team/ionic-framework/issues/25468)) ([3d19771](https://github.com/ionic-team/ionic-framework/commit/3d19771185301870a2eb60f1ef4afd6f1c182494))
+* **datetime:** localize am/pm labels in time picker ([#25389](https://github.com/ionic-team/ionic-framework/issues/25389)) ([6bc0acc](https://github.com/ionic-team/ionic-framework/commit/6bc0acc4279a18c3309b11eeec76676c5015419a)), closes [#16279](https://github.com/ionic-team/ionic-framework/issues/16279)
+* **modal:** clicking handle advances to the next breakpoint ([#25540](https://github.com/ionic-team/ionic-framework/issues/25540)) ([7cdc388](https://github.com/ionic-team/ionic-framework/commit/7cdc388b7805cbf23c9e1e928aa977cd77ebc8c4)), closes [#24069](https://github.com/ionic-team/ionic-framework/issues/24069)
+* **picker-column-internal:** add ability to disable items ([#25412](https://github.com/ionic-team/ionic-framework/issues/25412)) ([8b7c079](https://github.com/ionic-team/ionic-framework/commit/8b7c07968e1a60389a22e5af0e0cac62d31d397a))
+* **range:** add reference point for start position of range slider ([#25598](https://github.com/ionic-team/ionic-framework/issues/25598)) ([c2781cc](https://github.com/ionic-team/ionic-framework/commit/c2781cc1c3b7e56a0e6f6c03cfa04fc2c82d6e8a)), closes [#24348](https://github.com/ionic-team/ionic-framework/issues/24348)
+* **toggle:** on/off icons for toggle ([#25459](https://github.com/ionic-team/ionic-framework/issues/25459)) ([bc0bdc4](https://github.com/ionic-team/ionic-framework/commit/bc0bdc438ba72c695f9d961ddf837ec45e7816dd)), closes [#20524](https://github.com/ionic-team/ionic-framework/issues/20524)
+
+
+
+
+
+## [6.1.15](https://github.com/ionic-team/ionic-framework/compare/v6.1.14...v6.1.15) (2022-07-20)
+
+
+### Bug Fixes
+
+* **datetime:** use scroll listener to detect month changes ([#25586](https://github.com/ionic-team/ionic-framework/issues/25586)) ([b7afcb0](https://github.com/ionic-team/ionic-framework/commit/b7afcb0f0c36d84f3b4d65844df28e6293bc1ea5)), closes [#25257](https://github.com/ionic-team/ionic-framework/issues/25257) [#25608](https://github.com/ionic-team/ionic-framework/issues/25608) [#24980](https://github.com/ionic-team/ionic-framework/issues/24980)
+* **fab-button:** aria attributes are inherited ([#25635](https://github.com/ionic-team/ionic-framework/issues/25635)) ([64ae3d2](https://github.com/ionic-team/ionic-framework/commit/64ae3d2b9729c5c6be8644b1df6c8b3d40584d3b)), closes [#25633](https://github.com/ionic-team/ionic-framework/issues/25633)
+* **modal:** allow for custom dialog implementations ([#25630](https://github.com/ionic-team/ionic-framework/issues/25630)) ([a6f3ae6](https://github.com/ionic-team/ionic-framework/commit/a6f3ae67ab91ab95408ad425156167edc3570978)), closes [#24080](https://github.com/ionic-team/ionic-framework/issues/24080)
+* **react:** swipe to go back gesture works on ios ([#25563](https://github.com/ionic-team/ionic-framework/issues/25563)) ([7ec3683](https://github.com/ionic-team/ionic-framework/commit/7ec3683e94e5397022560ce8489532ff40d3f40c)), closes [#22342](https://github.com/ionic-team/ionic-framework/issues/22342)
+
+
+### Performance Improvements
+
+* **input:** passive event listener for touch start events ([#25610](https://github.com/ionic-team/ionic-framework/issues/25610)) ([2d1efdb](https://github.com/ionic-team/ionic-framework/commit/2d1efdbe6dd9436badab4684f2a484476489c166)), closes [#25599](https://github.com/ionic-team/ionic-framework/issues/25599)
+
+
+
+
+
+## [6.1.14](https://github.com/ionic-team/ionic-framework/compare/v6.1.13...v6.1.14) (2022-07-13)
+
+
+### Bug Fixes
+
+* **datetime:** datetime works within stencil apps ([#25592](https://github.com/ionic-team/ionic-framework/issues/25592)) ([7b10fa6](https://github.com/ionic-team/ionic-framework/commit/7b10fa6476c2c2896c6810c57b3160f8c8896faa)), closes [#25591](https://github.com/ionic-team/ionic-framework/issues/25591)
+* **react:** IonNav works with react ([#25565](https://github.com/ionic-team/ionic-framework/issues/25565)) ([420f9bb](https://github.com/ionic-team/ionic-framework/commit/420f9bbebd41f3eab6def795bcdd1933d5c5a47a)), closes [#24002](https://github.com/ionic-team/ionic-framework/issues/24002)
+
+
+
+
+
+## [6.1.13](https://github.com/ionic-team/ionic-framework/compare/v6.1.12...v6.1.13) (2022-07-06)
+
+
+### Bug Fixes
+
+* **all:** long press now preserves activated state ([#25551](https://github.com/ionic-team/ionic-framework/issues/25551)) ([a8286f6](https://github.com/ionic-team/ionic-framework/commit/a8286f6e42f734a027416ac6cd659e3dce4edccb)), closes [#25544](https://github.com/ionic-team/ionic-framework/issues/25544)
+* **datetime:** typing in time now updates value ([#25561](https://github.com/ionic-team/ionic-framework/issues/25561)) ([1b1b1a3](https://github.com/ionic-team/ionic-framework/commit/1b1b1a3800c4d044b4a3e7418f534e9271770ec6)), closes [#25560](https://github.com/ionic-team/ionic-framework/issues/25560)
+
+
+
+
+
 ## [6.1.12](https://github.com/ionic-team/ionic-framework/compare/v6.1.11...v6.1.12) (2022-06-29)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,81 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.4](https://github.com/ionic-team/ionic/compare/v6.2.3...v6.2.4) (2022-08-24)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.2.3](https://github.com/ionic-team/ionic/compare/v6.2.2...v6.2.3) (2022-08-17)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.2.2](https://github.com/ionic-team/ionic/compare/v6.2.1...v6.2.2) (2022-08-10)
+
+
+### Bug Fixes
+
+* **angular:** DatetimeButton is declared on IonicModule ([#25727](https://github.com/ionic-team/ionic/issues/25727)) ([76ad1d1](https://github.com/ionic-team/ionic/commit/76ad1d18c81272435db1994977aa9dd5d880504a))
+
+
+
+
+
+## [6.2.1](https://github.com/ionic-team/ionic/compare/v6.2.0...v6.2.1) (2022-08-03)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+# [6.2.0](https://github.com/ionic-team/ionic/compare/v6.1.15...v6.2.0) (2022-07-27)
+
+
+### Features
+
+* **angular, react, vue:** add support for autoMountComponent ([#25552](https://github.com/ionic-team/ionic/issues/25552)) ([805dfa0](https://github.com/ionic-team/ionic/commit/805dfa05663098ef9c02b0745a383b5e7555908b))
+* **datetime-button:** add button for displaying datetime in overlays ([#25655](https://github.com/ionic-team/ionic/issues/25655)) ([4997331](https://github.com/ionic-team/ionic/commit/499733105e4be23405e8afeeb26fee5cd2afc25b)), closes [#24316](https://github.com/ionic-team/ionic/issues/24316)
+* **datetime:** add multiple date selection ([#25514](https://github.com/ionic-team/ionic/issues/25514)) ([9d31608](https://github.com/ionic-team/ionic/commit/9d31608f2d471f531eb253832c8558d1effaf68a))
+* **datetime:** add wheel style picker for dates and times ([#25468](https://github.com/ionic-team/ionic/issues/25468)) ([3d19771](https://github.com/ionic-team/ionic/commit/3d19771185301870a2eb60f1ef4afd6f1c182494))
+* **modal:** clicking handle advances to the next breakpoint ([#25540](https://github.com/ionic-team/ionic/issues/25540)) ([7cdc388](https://github.com/ionic-team/ionic/commit/7cdc388b7805cbf23c9e1e928aa977cd77ebc8c4)), closes [#24069](https://github.com/ionic-team/ionic/issues/24069)
+* **range:** add reference point for start position of range slider ([#25598](https://github.com/ionic-team/ionic/issues/25598)) ([c2781cc](https://github.com/ionic-team/ionic/commit/c2781cc1c3b7e56a0e6f6c03cfa04fc2c82d6e8a)), closes [#24348](https://github.com/ionic-team/ionic/issues/24348)
+
+
+
+
+
+## [6.1.15](https://github.com/ionic-team/ionic/compare/v6.1.14...v6.1.15) (2022-07-20)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.1.14](https://github.com/ionic-team/ionic/compare/v6.1.13...v6.1.14) (2022-07-13)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.1.13](https://github.com/ionic-team/ionic/compare/v6.1.12...v6.1.13) (2022-07-06)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.1.12](https://github.com/ionic-team/ionic/compare/v6.1.11...v6.1.12) (2022-06-29)
 
 

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.12",
+  "version": "6.2.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.1.11",
+      "version": "6.2.4",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.11",
+        "@ionic/core": "^6.2.3",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.11.tgz",
-      "integrity": "sha512-hMYZ+Iqvv2a8Qj3HCbtnI4DDIplMvr7x1Jk3aljNsvYQeyVLXxXvyNfpBzVuJxF7lJeGMlq9cY5XWUXh2gQnIA==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.3.tgz",
+      "integrity": "sha512-TqSVN5nfDC8Ovcfgv6PH6FsNY8P9Awl2zSXVMBpgr5CSFNOb6xB4U8utdhMtJbuo/OYgqAbjSVq+pD4RiBt1rw==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -7939,9 +7939,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.11.tgz",
-      "integrity": "sha512-hMYZ+Iqvv2a8Qj3HCbtnI4DDIplMvr7x1Jk3aljNsvYQeyVLXxXvyNfpBzVuJxF7lJeGMlq9cY5XWUXh2gQnIA==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.3.tgz",
+      "integrity": "sha512-TqSVN5nfDC8Ovcfgv6PH6FsNY8P9Awl2zSXVMBpgr5CSFNOb6xB4U8utdhMtJbuo/OYgqAbjSVq+pD4RiBt1rw==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.12",
+  "version": "6.2.4",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.1.12",
+    "@ionic/core": "^6.2.4",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

angular/src/directives/overlays/modal.ts

@@ -54,6 +54,7 @@ export declare interface IonModal extends Components.IonModal {
 @ProxyCmp({
   inputs: [
     'animated',
+    'keepContentsMounted',
     'backdropBreakpoint',
     'backdropDismiss',
     'breakpoints',
@@ -62,6 +63,7 @@ export declare interface IonModal extends Components.IonModal {
     'enterAnimation',
     'event',
     'handle',
+    'handleBehavior',
     'initialBreakpoint',
     'isOpen',
     'keyboardClose',
@@ -78,9 +80,12 @@ export declare interface IonModal extends Components.IonModal {
 @Component({
   selector: 'ion-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="ion-page" *ngIf="isCmpOpen"><ng-container [ngTemplateOutlet]="template"></ng-container></div>`,
+  template: `<div class="ion-page" *ngIf="isCmpOpen || keepContentsMounted">
+    <ng-container [ngTemplateOutlet]="template"></ng-container>
+  </div>`,
   inputs: [
     'animated',
+    'keepContentsMounted',
     'backdropBreakpoint',
     'backdropDismiss',
     'breakpoints',
@@ -89,6 +94,7 @@ export declare interface IonModal extends Components.IonModal {
     'enterAnimation',
     'event',
     'handle',
+    'handleBehavior',
     'initialBreakpoint',
     'isOpen',
     'keyboardClose',

angular/src/directives/overlays/popover.ts

@@ -51,6 +51,7 @@ export declare interface IonPopover extends Components.IonPopover {
     'alignment',
     'animated',
     'arrow',
+    'keepContentsMounted',
     'backdropDismiss',
     'cssClass',
     'dismissOnSelect',
@@ -73,11 +74,12 @@ export declare interface IonPopover extends Components.IonPopover {
 @Component({
   selector: 'ion-popover',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen"></ng-container>`,
+  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen || keepContentsMounted"></ng-container>`,
   inputs: [
     'alignment',
     'animated',
     'arrow',
+    'keepContentsMounted',
     'backdropDismiss',
     'cssClass',
     'dismissOnSelect',

angular/src/directives/proxies-list.ts

@@ -1,4 +1,3 @@
-
 import * as d from './proxies';
 
 export const DIRECTIVES = [
@@ -23,6 +22,7 @@ export const DIRECTIVES = [
   d.IonCol,
   d.IonContent,
   d.IonDatetime,
+  d.IonDatetimeButton,
   d.IonFab,
   d.IonFabButton,
   d.IonFabList,
@@ -76,5 +76,5 @@ export const DIRECTIVES = [
   d.IonThumbnail,
   d.IonTitle,
   d.IonToggle,
-  d.IonToolbar
+  d.IonToolbar,
 ];

angular/src/directives/proxies.ts

@@ -524,14 +524,14 @@ export declare interface IonDatetime extends Components.IonDatetime {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'],
   methods: ['confirm', 'reset', 'cancel']
 })
 @Component({
   selector: 'ion-datetime',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues']
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues']
 })
 export class IonDatetime {
   protected el: HTMLElement;
@@ -543,6 +543,27 @@ export class IonDatetime {
 }
 
 
+export declare interface IonDatetimeButton extends Components.IonDatetimeButton {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['color', 'datetime', 'disabled', 'mode']
+})
+@Component({
+  selector: 'ion-datetime-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['color', 'datetime', 'disabled', 'mode']
+})
+export class IonDatetimeButton {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface IonFab extends Components.IonFab {}
 
 @ProxyCmp({
@@ -1304,13 +1325,13 @@ mouse drag, touch gesture, or keyboard interaction.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 @Component({
   selector: 'ion-range',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 export class IonRange {
   protected el: HTMLElement;
@@ -1979,13 +2000,13 @@ export declare interface IonToggle extends Components.IonToggle {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']
+  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']
+  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'mode', 'name', 'value']
 })
 export class IonToggle {
   protected el: HTMLElement;

angular/src/index.ts

@@ -1,6 +1,6 @@
 // DIRECTIVES
 export { BooleanValueAccessorDirective as BooleanValueAccessor } from './directives/control-value-accessors/boolean-value-accessor';
-export { NumericValueAccessorDirective as NumericValueAccessor } from './directives/control-value-accessors/numeric-value-accesssor';
+export { NumericValueAccessorDirective as NumericValueAccessor } from './directives/control-value-accessors/numeric-value-accessor';
 export { RadioValueAccessorDirective as RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
 export { SelectValueAccessorDirective as SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
 export { TextValueAccessorDirective as TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';

angular/src/ionic-module.ts

@@ -4,7 +4,7 @@ import { IonicConfig } from '@ionic/core';
 
 import { appInitialize } from './app-initialize';
 import { BooleanValueAccessorDirective } from './directives/control-value-accessors/boolean-value-accessor';
-import { NumericValueAccessorDirective } from './directives/control-value-accessors/numeric-value-accesssor';
+import { NumericValueAccessorDirective } from './directives/control-value-accessors/numeric-value-accessor';
 import { RadioValueAccessorDirective } from './directives/control-value-accessors/radio-value-accessor';
 import { SelectValueAccessorDirective } from './directives/control-value-accessors/select-value-accessor';
 import { TextValueAccessorDirective } from './directives/control-value-accessors/text-value-accessor';
@@ -18,83 +18,7 @@ import {
 } from './directives/navigation/router-link-delegate';
 import { IonModal } from './directives/overlays/modal';
 import { IonPopover } from './directives/overlays/popover';
-import {
-  IonAccordion,
-  IonAccordionGroup,
-  IonApp,
-  IonAvatar,
-  IonBackButton,
-  IonBackdrop,
-  IonBadge,
-  IonBreadcrumb,
-  IonBreadcrumbs,
-  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 { DIRECTIVES } from './directives/proxies-list';
 import { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
 import { VirtualHeader } from './directives/virtual-scroll/virtual-header';
 import { VirtualItem } from './directives/virtual-scroll/virtual-item';
@@ -105,86 +29,12 @@ import { ModalController } from './providers/modal-controller';
 import { PopoverController } from './providers/popover-controller';
 
 const DECLARATIONS = [
-  // proxies
-  IonAccordion,
-  IonAccordionGroup,
-  IonApp,
-  IonAvatar,
-  IonBackButton,
-  IonBackdrop,
-  IonBadge,
-  IonBreadcrumb,
-  IonBreadcrumbs,
-  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,
-  IonModal,
-  IonNav,
-  IonNavLink,
-  IonNote,
-  IonPopover,
-  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,
-  IonToggle,
-  IonToolbar,
-  IonTitle,
+  // generated proxies
+  ...DIRECTIVES,
 
-  IonTabs,
+  // manual proxies
+  IonModal,
+  IonPopover,
 
   // ngModel accessors
   BooleanValueAccessorDirective,
@@ -194,6 +44,7 @@ const DECLARATIONS = [
   TextValueAccessorDirective,
 
   // navigation
+  IonTabs,
   IonRouterOutlet,
   IonBackButtonDelegateDirective,
   NavDelegate,

angular/test/README.md

@@ -0,0 +1,69 @@
+# Angular E2E Test Apps
+
+Ionic Framework supports multiple versions of Angular. As a result, we need to verify that Ionic works correctly with each of these Angular versions.
+
+## Test App Build Structure
+
+Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.
+
+**apps** - This directory contains partial applications for each version of Angular we want to test. Typically these directories contain new `package.json` files, `angular.json` files, and more. If you have code that is specific to a particular version of Angular, put it in this directory.
+
+**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory.
+
+**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git.
+
+**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory.
+
+Usage:
+
+```shell
+# Build a test app using apps/ng14 as a reference
+./build.sh ng14
+```
+
+## How to modify test apps
+
+To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version.
+
+If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.spec.ts` in `apps/ng14`, make sure you place the file in `apps/ng14/e2e/src/test.spec.ts`.
+
+### Version-specific tests
+
+If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y.
+
+## Adding New Test Apps
+
+As we add support for new versions of Angular, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:
+
+1. Navigate to the built app for the most recent version of Angular that Ionic tests.
+2. Update the application by following the steps on https://update.angular.io/.
+3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, `angular.json`, etc).
+4. Copy the changed files to a new directory in `apps`.
+5. Add a new entry to the matrix for `test-core-angular` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs.
+6. Commit these changes and push.
+
+Example:
+
+In this example, we are going to add the Angular 14 test app.
+
+1. Build the Angular 13 test app using `./build.sh ng13`.
+2. Navigate to `build/ng13`.
+3. Perform the upgrade steps on https://update.angular.io/. The "From" field should say "13.0" and the "To" field should say "14.0".
+
+Note: You may encounter some other peer dependency issues not covered by the Angular Upgrade Guide. These peer dependency issues can be resolved manually by updating the installed version of each dependency.
+
+4. Observe that the output of the Angular upgrade indicates that the following files were modified:
+
+`angular.json`
+`package-lock.json`
+`package.json`
+`tsconfig.json`
+`src/app/form/form.component.ts`
+`src/app/modal-example/modal-example.component.ts`
+
+5. Create a directory in `apps` named `ng14`.
+6. Copy the modified files to the `apps/ng14` directory.
+7. Open `./github/workflows/build.yml` and find the `test-angular-e2e` job.
+8. Find the `apps` field under `matrix`.
+9. Add "ng14" to the `apps` field.
+10. Committ these changes and push.

angular/test/apps/ng12/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "ionic-angular-test-app",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "sync:build": "sh scripts/build-ionic.sh",
+    "sync": "sh scripts/sync.sh",
+    "build": "ng build --configuration production --no-progress",
+    "lint": "ng lint",
+    "postinstall": "ngcc",
+    "serve:ssr": "node dist/test-app/server/main.js",
+    "build:ssr": "ng build --prod && ng run test-app:server:production",
+    "dev:ssr": "ng run test-app:serve-ssr",
+    "prerender": "ng run test-app:prerender",
+    "cy.open": "cypress open",
+    "cy.run": "cypress run",
+    "test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
+    "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
+  },
+  "dependencies": {
+    "@angular/animations": "^12.2.16",
+    "@angular/common": "^12.2.16",
+    "@angular/compiler": "^12.2.16",
+    "@angular/core": "^12.2.16",
+    "@angular/forms": "^12.2.16",
+    "@angular/platform-browser": "^12.2.16",
+    "@angular/platform-browser-dynamic": "^12.2.16",
+    "@angular/platform-server": "^12.2.16",
+    "@angular/router": "^12.2.16",
+    "@ionic/angular": "^6.1.15",
+    "@ionic/angular-server": "^6.1.15",
+    "@nguniversal/express-engine": "^12.1.3",
+    "angular-in-memory-web-api": "^0.11.0",
+    "core-js": "^2.6.11",
+    "express": "^4.15.2",
+    "rxjs": "^6.5.5",
+    "tslib": "^2.0.0",
+    "typescript-eslint-language-service": "^4.1.5",
+    "zone.js": "^0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^12.2.18",
+    "@angular-eslint/builder": "^12.7.0",
+    "@angular-eslint/eslint-plugin": "^12.7.0",
+    "@angular-eslint/eslint-plugin-template": "^12.7.0",
+    "@angular-eslint/schematics": "^12.7.0",
+    "@angular-eslint/template-parser": "^12.7.0",
+    "@angular/cli": "^12.2.16",
+    "@angular/compiler-cli": "^12.2.16",
+    "@angular/language-service": "^12.2.16",
+    "@nguniversal/builders": "^12.1.3",
+    "@types/express": "^4.17.7",
+    "@types/node": "^12.12.54",
+    "@typescript-eslint/eslint-plugin": "4.28.2",
+    "@typescript-eslint/parser": "4.28.2",
+    "concurrently": "^6.0.0",
+    "cypress": "^10.2.0",
+    "eslint": "^7.26.0",
+    "ts-loader": "^6.2.2",
+    "ts-node": "^8.3.0",
+    "typescript": "~4.3.5",
+    "wait-on": "^5.2.1",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.2"
+  }
+}

angular/test/apps/ng13/package-lock.json

@@ -18,8 +18,8 @@
         "@angular/platform-browser-dynamic": "^13.1.3",
         "@angular/platform-server": "^13.1.3",
         "@angular/router": "^13.1.3",
-        "@ionic/angular": "^6.0.12",
-        "@ionic/angular-server": "^6.0.12",
+        "@ionic/angular": "^6.1.15",
+        "@ionic/angular-server": "^6.1.15",
         "@nguniversal/express-engine": "^13.1.1",
         "angular-in-memory-web-api": "^0.11.0",
         "core-js": "^2.6.11",
@@ -2690,11 +2690,11 @@
       "dev": true
     },
     "node_modules/@ionic/angular": {
-      "version": "6.1.9",
-      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-6.1.9.tgz",
-      "integrity": "sha512-TeuMZnDMTpmueOJNACQ52ERUlb0pgwl5EgdRzl1R5bl8d8qjkUCnXgn042xPVfsEjD2ZxPGDFfOuYGqeYIfYkQ==",
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-6.1.15.tgz",
+      "integrity": "sha512-1CY/MwlOMlUbyDwlTOYzsxGzugFrgY0QftyMQE99KeMC1z/a8ZazNYvSHGNUAetneO+hU9LIXtM/q14a9bC/Hw==",
       "dependencies": {
-        "@ionic/core": "^6.1.9",
+        "@ionic/core": "^6.1.15",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -2707,9 +2707,9 @@
       }
     },
     "node_modules/@ionic/angular-server": {
-      "version": "6.1.9",
-      "resolved": "https://registry.npmjs.org/@ionic/angular-server/-/angular-server-6.1.9.tgz",
-      "integrity": "sha512-9psF+OSDXnPH1fLJA+kcRlGea4U5v6MCKBbcHeCa1Hwf7B7/AyZtYcB7rC5HI3EkmlvV0GtIjzeJ508RHvMamw==",
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@ionic/angular-server/-/angular-server-6.1.15.tgz",
+      "integrity": "sha512-2ygmB54PTW2SnSqfpjnqVVtCTj1WE8qloUOcma1oK7tfJnJYrzgO5YKDqmlUJMaaquxZa6YvJaenHRj6b0G54w==",
       "dependencies": {
         "tslib": "^2.2.0"
       },
@@ -2722,9 +2722,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
-      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.15.tgz",
+      "integrity": "sha512-NvBlHR7O4kfp9KYz6oLsghFzGZImA7hM4qS4tFRUI62R+Q5iCJEY4OmXE5bif5K+SQkMhQY+x1l2Nq20waLzLg==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -3423,9 +3423,9 @@
       "dev": true
     },
     "node_modules/@stencil/core": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
-      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
+      "version": "2.17.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.1.tgz",
+      "integrity": "sha512-ErjQsNALgZQ9SYeBHhqwL1UO+Zbptwl3kwrRJC2tGlc3G/T6UvPuaKr+PGsqI+CZGia+0+R5EELQvFu74mYeIg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -9851,6 +9851,18 @@
         "@stencil/core": "~2.16.0"
       }
     },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/ip": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
@@ -18207,27 +18219,27 @@
       "dev": true
     },
     "@ionic/angular": {
-      "version": "6.1.9",
-      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-6.1.9.tgz",
-      "integrity": "sha512-TeuMZnDMTpmueOJNACQ52ERUlb0pgwl5EgdRzl1R5bl8d8qjkUCnXgn042xPVfsEjD2ZxPGDFfOuYGqeYIfYkQ==",
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-6.1.15.tgz",
+      "integrity": "sha512-1CY/MwlOMlUbyDwlTOYzsxGzugFrgY0QftyMQE99KeMC1z/a8ZazNYvSHGNUAetneO+hU9LIXtM/q14a9bC/Hw==",
       "requires": {
-        "@ionic/core": "^6.1.9",
+        "@ionic/core": "^6.1.15",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       }
     },
     "@ionic/angular-server": {
-      "version": "6.1.9",
-      "resolved": "https://registry.npmjs.org/@ionic/angular-server/-/angular-server-6.1.9.tgz",
-      "integrity": "sha512-9psF+OSDXnPH1fLJA+kcRlGea4U5v6MCKBbcHeCa1Hwf7B7/AyZtYcB7rC5HI3EkmlvV0GtIjzeJ508RHvMamw==",
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@ionic/angular-server/-/angular-server-6.1.15.tgz",
+      "integrity": "sha512-2ygmB54PTW2SnSqfpjnqVVtCTj1WE8qloUOcma1oK7tfJnJYrzgO5YKDqmlUJMaaquxZa6YvJaenHRj6b0G54w==",
       "requires": {
         "tslib": "^2.2.0"
       }
     },
     "@ionic/core": {
-      "version": "6.1.9",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
-      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.15.tgz",
+      "integrity": "sha512-NvBlHR7O4kfp9KYz6oLsghFzGZImA7hM4qS4tFRUI62R+Q5iCJEY4OmXE5bif5K+SQkMhQY+x1l2Nq20waLzLg==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -18760,9 +18772,9 @@
       "dev": true
     },
     "@stencil/core": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
-      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
+      "version": "2.17.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.1.tgz",
+      "integrity": "sha512-ErjQsNALgZQ9SYeBHhqwL1UO+Zbptwl3kwrRJC2tGlc3G/T6UvPuaKr+PGsqI+CZGia+0+R5EELQvFu74mYeIg=="
     },
     "@tootallnate/once": {
       "version": "2.0.0",
@@ -23492,6 +23504,13 @@
       "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "requires": {
         "@stencil/core": "~2.16.0"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "2.16.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+          "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
+        }
       }
     },
     "ip": {

angular/test/apps/ng13/package.json

@@ -29,8 +29,8 @@
     "@angular/platform-browser-dynamic": "^13.1.3",
     "@angular/platform-server": "^13.1.3",
     "@angular/router": "^13.1.3",
-    "@ionic/angular": "^6.0.12",
-    "@ionic/angular-server": "^6.0.12",
+    "@ionic/angular": "^6.1.15",
+    "@ionic/angular-server": "^6.1.15",
     "@nguniversal/express-engine": "^13.1.1",
     "angular-in-memory-web-api": "^0.11.0",
     "core-js": "^2.6.11",

angular/test/apps/ng13/src/app/form/form.component.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-form',
+  templateUrl: './form.component.html',
+})
+export class FormComponent {
+
+  submitted = 'false';
+  profileForm: FormGroup;
+  outsideToggle = new FormControl(true);
+
+  constructor(fb: FormBuilder) {
+    this.profileForm = fb.group({
+      datetime: ['2010-08-20', Validators.required],
+      select: [undefined, Validators.required],
+      toggle: [false],
+      input: ['', Validators.required],
+      input2: ['Default Value'],
+      checkbox: [false],
+      range: [5, Validators.min(10)],
+    }, {
+      updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
+    });
+  }
+
+  setTouched() {
+    const formControl = this.profileForm.get('input');
+    formControl.markAsTouched();
+  }
+
+  onSubmit(_ev) {
+    this.submitted = 'true';
+  }
+
+  setValues() {
+    this.profileForm.patchValue({
+      datetime: '2010-08-20',
+      select: 'nes',
+      toggle: true,
+      input: 'Some value',
+      input2: 'Another values',
+      checkbox: true,
+      range: 50
+    });
+  }
+
+  markAllAsTouched() {
+    this.profileForm.markAllAsTouched();
+  }
+
+}

angular/test/apps/ng13/src/app/modal-example/modal-example.component.ts

@@ -0,0 +1,70 @@
+import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
+
+@Component({
+  selector: 'app-modal-example',
+  templateUrl: './modal-example.component.html',
+})
+export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
+
+  @Input() value: string;
+
+  form = new FormGroup({
+    select: new FormControl([])
+  });
+
+  valueFromParams: string;
+  onInit = 0;
+  willEnter = 0;
+  didEnter = 0;
+  willLeave = 0;
+  didLeave = 0;
+
+  modal: HTMLElement;
+
+  constructor(
+    private modalCtrl: ModalController,
+    @Optional() public nav: IonNav,
+    navParams: NavParams
+  ) {
+    this.valueFromParams = navParams.get('prop');
+  }
+
+  ngOnInit() {
+    NgZone.assertInAngularZone();
+    this.onInit++;
+  }
+
+  ionViewWillEnter() {
+    if (this.onInit !== 1) {
+      throw new Error('ngOnInit was not called');
+    }
+    NgZone.assertInAngularZone();
+    this.willEnter++;
+  }
+  ionViewDidEnter() {
+    NgZone.assertInAngularZone();
+    this.didEnter++;
+  }
+  ionViewWillLeave() {
+    NgZone.assertInAngularZone();
+    this.willLeave++;
+  }
+  ionViewDidLeave() {
+    NgZone.assertInAngularZone();
+    this.didLeave++;
+  }
+  closeModal() {
+    this.modalCtrl.dismiss();
+  }
+
+  push() {
+    this.nav.push(ModalExampleComponent, {
+      'value': 'pushed!'
+    });
+  }
+  pop() {
+    this.nav.pop();
+  }
+}

angular/test/apps/ng13/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "importHelpers": true,
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "module": "es2020",
+    "target": "es2015",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ],
+    "plugins": [
+      {
+        "name": "typescript-eslint-language-service"
+      }
+    ]
+  }
+}

angular/test/apps/ng14/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "ionic-angular-test-app",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "sync:build": "sh scripts/build-ionic.sh",
+    "sync": "sh scripts/sync.sh",
+    "build": "ng build --configuration production --no-progress",
+    "lint": "ng lint",
+    "postinstall": "ngcc",
+    "serve:ssr": "node dist/test-app/server/main.js",
+    "build:ssr": "ng build --prod && ng run test-app:server:production",
+    "dev:ssr": "ng run test-app:serve-ssr",
+    "prerender": "ng run test-app:prerender",
+    "cy.open": "cypress open",
+    "cy.run": "cypress run",
+    "test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
+    "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
+  },
+  "dependencies": {
+    "@angular/animations": "^14.1.0",
+    "@angular/common": "^14.1.0",
+    "@angular/compiler": "^14.1.0",
+    "@angular/core": "^14.1.0",
+    "@angular/forms": "^14.1.0",
+    "@angular/platform-browser": "^14.1.0",
+    "@angular/platform-browser-dynamic": "^14.1.0",
+    "@angular/platform-server": "^14.1.0",
+    "@angular/router": "^14.1.0",
+    "@ionic/angular": "^6.1.15",
+    "@ionic/angular-server": "^6.1.15",
+    "@nguniversal/express-engine": "^14.0.3",
+    "angular-in-memory-web-api": "^0.11.0",
+    "core-js": "^2.6.11",
+    "express": "^4.15.2",
+    "rxjs": "^6.5.5",
+    "tslib": "^2.0.0",
+    "typescript-eslint-language-service": "^4.1.5",
+    "zone.js": "^0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.1.0",
+    "@angular-eslint/builder": "^14.0.2",
+    "@angular-eslint/eslint-plugin": "^14.0.2",
+    "@angular-eslint/eslint-plugin-template": "^14.0.2",
+    "@angular-eslint/schematics": "^14.0.2",
+    "@angular-eslint/template-parser": "^14.0.2",
+    "@angular/cli": "^14.1.0",
+    "@angular/compiler-cli": "^14.1.0",
+    "@angular/language-service": "^14.1.0",
+    "@nguniversal/builders": "^14.0.3",
+    "@types/express": "^4.17.7",
+    "@types/node": "^12.12.54",
+    "@typescript-eslint/eslint-plugin": "4.28.2",
+    "@typescript-eslint/parser": "4.28.2",
+    "concurrently": "^6.0.0",
+    "cypress": "^10.2.0",
+    "eslint": "^7.26.0",
+    "ts-loader": "^6.2.2",
+    "ts-node": "^8.3.0",
+    "typescript": "~4.6.0",
+    "wait-on": "^5.2.1",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.2"
+  }
+}

angular/test/apps/ng14/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "importHelpers": true,
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "module": "es2020",
+    "target": "es2020",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ],
+    "plugins": [
+      {
+        "name": "typescript-eslint-language-service"
+      }
+    ]
+  }
+}

angular/test/base/angular.json

@@ -140,8 +140,9 @@
       }
     }
   },
-  "defaultProject": "test-app",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

angular/test/base/cypress/support/commands.js

@@ -25,7 +25,7 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-router-outlet') => {
-  const increment = (complete) ? 60 : 25;
+  const increment = complete ? 60 : 25;
   cy.get(selector)
     .first()
     .trigger('mousedown', 0, 275, { which: 1, force: true })
@@ -37,18 +37,16 @@ Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-rout
     .wait(50)
     .trigger('mousemove', increment * 4, 275, { which: 1, force: true })
     .wait(50)
-    .trigger('mouseup', increment * 4, 275, { which: 1, force: true })
+    .trigger('mouseup', increment * 4, 275, { which: 1, force: true });
   cy.wait(150);
-})
+});
 
 Cypress.Commands.add('testStack', (selector, expected) => {
   cy.document().then((doc) => {
-    const children = Array.from(
-      doc.querySelector(selector).children
-    ).map(el => el.tagName.toLowerCase());
+    const children = Array.from(doc.querySelector(selector).children).map((el) => el.tagName.toLowerCase());
     expect(children).to.deep.equal(expected);
-  })
-})
+  });
+});
 
 Cypress.Commands.add('testLifeCycle', (selector, expected) => {
   cy.get(`${selector} #ngOnInit`).invoke('text').should('equal', '1');
@@ -56,24 +54,26 @@ Cypress.Commands.add('testLifeCycle', (selector, expected) => {
   cy.get(`${selector} #ionViewDidEnter`).invoke('text').should('equal', expected.ionViewDidEnter.toString());
   cy.get(`${selector} #ionViewWillLeave`).invoke('text').should('equal', expected.ionViewWillLeave.toString());
   cy.get(`${selector} #ionViewDidLeave`).invoke('text').should('equal', expected.ionViewDidLeave.toString());
-})
+});
 
 Cypress.Commands.add('ionPageVisible', (selector) => {
   cy.get(selector)
     .should('have.class', 'ion-page')
     .should('not.have.class', 'ion-page-hidden')
     .should('not.have.class', 'ion-page-invisible')
-    .should('have.length', 1)
-})
+    .should('have.length', 1);
+});
 
 Cypress.Commands.add('ionPageHidden', (selector) => {
-  cy.get(selector)
-    .should('have.class', 'ion-page')
-    .should('have.class', 'ion-page-hidden')
-    .should('have.length', 1)
-})
+  cy.get(selector).should('have.class', 'ion-page').should('have.class', 'ion-page-hidden').should('have.length', 1);
+});
 
 Cypress.Commands.add('ionPageDoesNotExist', (selector) => {
-  cy.get(selector)
-    .should('not.exist')
+  cy.get(selector).should('not.exist');
+});
+
+Cypress.Commands.add('ionTabClick', (tabText) => {
+  // TODO: Figure out how to get rid of wait. It's a workaround for flakiness in CI.
+  cy.wait(250);
+  cy.contains('ion-tab-button', tabText).click({ force: true });
 });

angular/test/base/cypress/support/index.d.ts

@@ -63,6 +63,11 @@ declare namespace Cypress {
      * ```
      */
     ionPageDoesNotExist(selector: string): Chainable<any>
+
+    /**
+     * Clicks on a tab button with the given text.
+     */
+    ionTabClick(tabText: string): Chainable<any>;
   }
 }
 

angular/test/base/e2e/src/keep-contents-mounted.spec.ts

@@ -0,0 +1,60 @@
+describe('overlays - keepContentsMounted', () => {
+  describe('modal', () => {
+    it('should not mount component if false', () => {
+      cy.visit('/modal-inline');
+
+      cy.get('ion-modal ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.visit('/keep-contents-mounted');
+
+      cy.get('ion-modal ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.visit('/keep-contents-mounted');
+
+      cy.get('#open-modal').click();
+
+      cy.get('ion-modal ion-content').should('exist');
+
+      cy.get('ion-modal ion-button').click();
+
+      cy.get('ion-modal')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-modal ion-content').should('exist');
+    });
+  })
+  describe('popover', () => {
+    it('should not mount component if false', () => {
+      cy.visit('/popover-inline');
+
+      cy.get('ion-popover ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.visit('/keep-contents-mounted');
+
+      cy.get('ion-popover ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.visit('/keep-contents-mounted');
+
+      cy.get('#open-popover').click();
+
+      cy.get('ion-popover ion-content').should('exist');
+
+      cy.get('ion-popover ion-button').click();
+
+      cy.get('ion-popover')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-popover ion-content').should('exist');
+    });
+  });
+});

angular/test/base/e2e/src/popover.spec.ts

@@ -4,10 +4,17 @@ describe('Popovers: Inline', () => {
   });
 
   it('should initially have no items', () => {
+    cy.get('ion-button').click();
+
+    cy.get('ion-popover').should('be.visible');
     cy.get('ion-list ion-item').should('not.exist');
   });
 
   it('should have items after 1500ms', () => {
+    cy.get('ion-button').click();
+
+    cy.get('ion-popover').should('be.visible');
+
     cy.wait(1500);
 
     cy.get('ion-list ion-item:nth-child(1)').should('have.text', 'A');

angular/test/base/e2e/src/tabs.spec.ts

@@ -230,13 +230,13 @@ describe('Tabs', () => {
       tab.find('#goto-next').click();
       testTabTitle('Tab 1 - Page 2 (2)');
 
-      cy.get('#tab-button-contact').click();
+      cy.ionTabClick('Tab Two');
       testTabTitle('Tab 2 - Page 1');
 
-      cy.get('#tab-button-account').click();
+      cy.ionTabClick('Tab One');
       testTabTitle('Tab 1 - Page 2 (2)');
 
-      cy.get('#tab-button-account').click();
+      cy.ionTabClick('Tab One');
       testTabTitle('Tab 1 - Page 1');
 
       testUrlContains(rootUrl);

angular/test/base/scripts/sync.sh

@@ -0,0 +1,20 @@
+# Copy angular dist
+rm -rf node_modules/@ionic/angular
+cp -a ../../../dist node_modules/@ionic/angular
+
+# Copy angular server
+rm -rf node_modules/@ionic/angular-server
+cp -a ../../../../packages/angular-server/dist node_modules/@ionic/angular-server
+
+# # Copy core dist
+rm -rf node_modules/@ionic/core
+mkdir node_modules/@ionic/core
+cp -a ../../../../core/css node_modules/@ionic/core/css
+cp -a ../../../../core/dist node_modules/@ionic/core/dist
+cp -a ../../../../core/hydrate node_modules/@ionic/core/hydrate
+cp -a ../../../../core/loader node_modules/@ionic/core/loader
+cp -a ../../../../core/package.json node_modules/@ionic/core/package.json
+
+# # Copy ionicons
+rm -rf node_modules/ionicons
+cp -a ../../../../core/node_modules/ionicons node_modules/ionicons

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

@@ -24,6 +24,7 @@ import { AccordionComponent } from './accordion/accordion.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
+  { path: 'version-test', loadChildren: () => import('./version-test').then(m => m.VersionTestModule) },
   { path: 'accordions', component: AccordionComponent },
   { path: 'alerts', component: AlertComponent },
   { path: 'inputs', component: InputsComponent },
@@ -31,6 +32,7 @@ const routes: Routes = [
   { path: 'modals', component: ModalComponent },
   { path: 'modal-inline', loadChildren: () => import('./modal-inline').then(m => m.ModalInlineModule) },
   { path: 'view-child', component: ViewChildComponent },
+  { path: 'keep-contents-mounted', loadChildren: () => import('./keep-contents-mounted').then(m => m.OverlayAutoMountModule) },
   { path: 'popover-inline', loadChildren: () => import('./popover-inline').then(m => m.PopoverInlineModule) },
   { path: 'providers', component: ProvidersComponent },
   { path: 'router-link', component: RouterLinkComponent },

angular/test/base/src/app/form/form.component.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-form',
+  templateUrl: './form.component.html',
+})
+export class FormComponent {
+
+  submitted = 'false';
+  profileForm: UntypedFormGroup;
+  outsideToggle = new UntypedFormControl(true);
+
+  constructor(fb: UntypedFormBuilder) {
+    this.profileForm = fb.group({
+      datetime: ['2010-08-20', Validators.required],
+      select: [undefined, Validators.required],
+      toggle: [false],
+      input: ['', Validators.required],
+      input2: ['Default Value'],
+      checkbox: [false],
+      range: [5, Validators.min(10)],
+    }, {
+      updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
+    });
+  }
+
+  setTouched() {
+    const formControl = this.profileForm.get('input');
+    formControl.markAsTouched();
+  }
+
+  onSubmit(_ev) {
+    this.submitted = 'true';
+  }
+
+  setValues() {
+    this.profileForm.patchValue({
+      datetime: '2010-08-20',
+      select: 'nes',
+      toggle: true,
+      input: 'Some value',
+      input2: 'Another values',
+      checkbox: true,
+      range: 50
+    });
+  }
+
+  markAllAsTouched() {
+    this.profileForm.markAllAsTouched();
+  }
+
+}

angular/test/base/src/app/keep-contents-mounted/index.ts

@@ -0,0 +1,2 @@
+export * from './keep-contents-mounted.component';
+export * from './keep-contents-mounted.module';

angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { OverlayKeepContentsMounted } from ".";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: OverlayKeepContentsMounted
+      }
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class OverlayKeepContentsMountedRoutingModule { }

angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.component.html

@@ -0,0 +1,22 @@
+<ion-content>
+  <ion-button id="open-modal" (click)="modal.present()">Open Modal</ion-button>
+  <ion-button id="open-popover" (click)="popover.present()">Open Popover</ion-button>
+
+  <ion-modal [keepContentsMounted]="true" #modal>
+    <ng-template>
+      <ion-content>
+        <ion-button (click)="modal.dismiss()">Dismiss</ion-button>
+        Modal Content
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+
+  <ion-popover [keepContentsMounted]="true" #popover>
+    <ng-template>
+      <ion-content>
+        <ion-button (click)="popover.dismiss()">Dismiss</ion-button>
+        Popover Content
+      </ion-content>
+    </ng-template>
+  </ion-popover>
+</ion-content>

angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.component.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+/**
+ * Validates that inline modals correctly mount
+ * inner components when keepContentsMounted is
+ * enabled.
+ */
+@Component({
+  selector: 'app-keep-contents-mounted',
+  templateUrl: 'keep-contents-mounted.component.html'
+})
+export class OverlayKeepContentsMounted {
+}

angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { IonicModule } from "@ionic/angular";
+import { OverlayKeepContentsMountedRoutingModule } from "./keep-contents-mounted-routing.module";
+import { OverlayKeepContentsMounted } from "./keep-contents-mounted.component";
+
+@NgModule({
+  imports: [CommonModule, IonicModule, OverlayKeepContentsMountedRoutingModule],
+  declarations: [OverlayKeepContentsMounted],
+  exports: [OverlayKeepContentsMounted]
+})
+export class OverlayAutoMountModule { }

angular/test/base/src/app/modal-example/modal-example.component.ts

@@ -0,0 +1,70 @@
+import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
+
+@Component({
+  selector: 'app-modal-example',
+  templateUrl: './modal-example.component.html',
+})
+export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
+
+  @Input() value: string;
+
+  form = new UntypedFormGroup({
+    select: new UntypedFormControl([])
+  });
+
+  valueFromParams: string;
+  onInit = 0;
+  willEnter = 0;
+  didEnter = 0;
+  willLeave = 0;
+  didLeave = 0;
+
+  modal: HTMLElement;
+
+  constructor(
+    private modalCtrl: ModalController,
+    @Optional() public nav: IonNav,
+    navParams: NavParams
+  ) {
+    this.valueFromParams = navParams.get('prop');
+  }
+
+  ngOnInit() {
+    NgZone.assertInAngularZone();
+    this.onInit++;
+  }
+
+  ionViewWillEnter() {
+    if (this.onInit !== 1) {
+      throw new Error('ngOnInit was not called');
+    }
+    NgZone.assertInAngularZone();
+    this.willEnter++;
+  }
+  ionViewDidEnter() {
+    NgZone.assertInAngularZone();
+    this.didEnter++;
+  }
+  ionViewWillLeave() {
+    NgZone.assertInAngularZone();
+    this.willLeave++;
+  }
+  ionViewDidLeave() {
+    NgZone.assertInAngularZone();
+    this.didLeave++;
+  }
+  closeModal() {
+    this.modalCtrl.dismiss();
+  }
+
+  push() {
+    this.nav.push(ModalExampleComponent, {
+      'value': 'pushed!'
+    });
+  }
+  pop() {
+    this.nav.pop();
+  }
+}