chore(): sync with main

angular/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.4](https://github.com/ionic-team/ionic/compare/v6.3.3...v6.3.4) (2022-11-02)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.3.3](https://github.com/ionic-team/ionic/compare/v6.3.2...v6.3.3) (2022-10-26)
 
 

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.3.3",
+      "version": "6.3.4",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.3.3",
+        "@ionic/core": "^6.3.4",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -7951,9 +7951,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",

angular/package.json

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

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

@@ -29,7 +29,7 @@ export class FormComponent {
     formControl.markAsTouched();
   }
 
-  onSubmit(_ev) {
+  onSubmit() {
     this.submitted = 'true';
   }
 

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

@@ -29,7 +29,7 @@ export class FormComponent {
     formControl.markAsTouched();
   }
 
-  onSubmit(_ev) {
+  onSubmit() {
     this.submitted = 'true';
   }
 

angular/test/apps/ng15/e2e/src/standalone-routing.spec.ts

@@ -0,0 +1,9 @@
+describe('Routing with Standalone Components', () => {
+  beforeEach(() => {
+    cy.visit('/version-test/standalone');
+  });
+
+  it('should render the component', () => {
+    cy.get('ion-content').contains('This is a standalone component rendered from a route.');
+  });
+});

angular/test/apps/ng15/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": "^15.0.0-rc.1",
+    "@angular/common": "^15.0.0-rc.1",
+    "@angular/compiler": "^15.0.0-rc.1",
+    "@angular/core": "^15.0.0-rc.1",
+    "@angular/forms": "^15.0.0-rc.1",
+    "@angular/platform-browser": "^15.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^15.0.0-rc.1",
+    "@angular/platform-server": "^15.0.0-rc.1",
+    "@angular/router": "^15.0.0-rc.1",
+    "@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": "~7.5.0",
+    "tslib": "^2.3.0",
+    "typescript-eslint-language-service": "^4.1.5",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^15.0.0-rc.1",
+    "@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": "^15.0.0-rc.1",
+    "@angular/compiler-cli": "^15.0.0-rc.1",
+    "@angular/language-service": "^15.0.0-rc.1",
+    "@nguniversal/builders": "^15.0.0-next.0",
+    "@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.8.4",
+    "wait-on": "^5.2.1",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.2"
+  }
+}

angular/test/apps/ng15/src/app/app.component.html

@@ -0,0 +1,3 @@
+<ion-app>
+  <ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
+</ion-app>

angular/test/apps/ng15/src/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component, EnvironmentInjector } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+
+  constructor(public environmentInjector: EnvironmentInjector) { }
+}

angular/test/apps/ng15/src/app/version-test/standalone/standalone.component.html

@@ -0,0 +1,4 @@
+<ion-content>
+  <p>This is a standalone component rendered from a route.</p>
+  <ion-button routerLink="/">Return home</ion-button>
+</ion-content>

angular/test/apps/ng15/src/app/version-test/standalone/standalone.component.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-standalone',
+  templateUrl: './standalone.component.html',
+  standalone: true,
+  imports: [IonicModule, RouterModule]
+})
+export class StandaloneComponent { }

angular/test/apps/ng15/src/app/version-test/version-test-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'standalone',
+        loadComponent: () => import('./standalone/standalone.component').then(m => m.StandaloneComponent)
+      }
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class VersionTestRoutingModule { }

angular/test/apps/ng15/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "es2020",
+    "emitDecoratorMetadata": true,
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2020", "dom"],
+    "plugins": [
+      {
+        "name": "typescript-eslint-language-service"
+      }
+    ],
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

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

@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
   templateUrl: './accordion-modal.component.html',
 })
 export class AccordionModalComponent {
-  modal: HTMLIonModalElement;
+  modal!: HTMLIonModalElement;
 
   constructor() {}
 }

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

@@ -7,7 +7,7 @@
 </ion-header>
 
 <ion-content>
-  <form [formGroup]="profileForm" (ngSubmit)="onSubmit($event)">
+  <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
     <ion-list>
 
       <ion-item>

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

@@ -26,10 +26,12 @@ export class FormComponent {
 
   setTouched() {
     const formControl = this.profileForm.get('input');
-    formControl.markAsTouched();
+    if (formControl) {
+      formControl.markAsTouched();
+    }
   }
 
-  onSubmit(_ev) {
+  onSubmit() {
     this.submitted = 'true';
   }
 

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

@@ -30,7 +30,7 @@ export class InputsComponent {
     this.toggle = false;
     this.select = undefined;
   }
-  
+
   counter() {
     this.changes++;
     return Math.floor(this.changes / 2);

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

@@ -8,7 +8,7 @@ import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDi
 })
 export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
 
-  @Input() value: string;
+  @Input() value?: string;
 
   form = new UntypedFormGroup({
     select: new UntypedFormControl([])
@@ -21,7 +21,7 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte
   willLeave = 0;
   didLeave = 0;
 
-  modal: HTMLElement;
+  modal!: HTMLElement;
 
   constructor(
     private modalCtrl: ModalController,

angular/test/base/src/app/popover-inline/popover-inline.component.ts

@@ -1,5 +1,7 @@
 import { Component } from "@angular/core";
 
+import { IonPopover } from "@ionic/angular";
+
 /**
  * Validates that inline popovers will correctly display
  * dynamic contents that are updated after the modal is
@@ -13,7 +15,7 @@ export class PopoverInlineComponent {
 
   items: string[] = [];
 
-  openPopover(popover: HTMLIonPopoverElement) {
+  openPopover(popover: IonPopover) {
     popover.present();
 
     setTimeout(() => {

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

@@ -16,9 +16,9 @@ export class ProvidersComponent {
   isResumed = false;
   isPaused = false;
   isResized = false;
-  isTesting: boolean = undefined;
-  isDesktop: boolean = undefined;
-  isMobile: boolean = undefined;
+  isTesting?: boolean = undefined;
+  isDesktop?: boolean = undefined;
+  isMobile?: boolean = undefined;
   keyboardHeight = 0;
   queryParams = '';
 

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

@@ -12,7 +12,7 @@ export class RouterLinkPageComponent implements OnInit, ViewWillLeave, ViewDidEn
   didEnter = 0;
   willLeave = 0;
   didLeave = 0;
-  canGoBack: boolean = null;
+  canGoBack: boolean | null | undefined = null;
 
   constructor(
     private ionRouterOutlet: IonRouterOutlet

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

@@ -0,0 +1,40 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
+
+@Component({
+  selector: 'app-slides',
+  templateUrl: './slides.component.html',
+})
+export class SlidesComponent implements AfterViewInit {
+  @ViewChild(IonSlides, { static: true }) slides!: IonSlides;
+
+  slideIndex = 0;
+  slideIndex2 = 0;
+  slidesData: string[] = [];
+
+  constructor() { }
+
+  ngAfterViewInit() {
+    this.slides.ionSlideDidChange.subscribe(async () => {
+      this.slideIndex2 = await this.slides.getActiveIndex();
+    });
+  }
+
+  addSlides() {
+    const start = this.slidesData.length + 1;
+    this.slidesData.push(`Slide ${start}`, `Slide ${start + 1}`, `Slide ${start + 2}`);
+  }
+
+  prevSlide() {
+    this.slides.slidePrev();
+  }
+
+  nextSlide() {
+    this.slides.slideNext();
+  }
+
+  async checkIndex() {
+    this.slideIndex = await this.slides.getActiveIndex();
+  }
+
+}

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

@@ -7,7 +7,7 @@ import { NavController } from '@ionic/angular';
   templateUrl: './tabs-tab1-nested.component.html',
 })
 export class TabsTab1NestedComponent implements OnInit {
-  id = '';
+  id: string | null = '';
   constructor(
     private route: ActivatedRoute,
     public navCtrl: NavController
@@ -18,6 +18,9 @@ export class TabsTab1NestedComponent implements OnInit {
   }
 
   next() {
+    if (this.id === null) {
+      return '1';
+    }
     return parseInt(this.id, 10) + 1;
   }
 

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

@@ -9,13 +9,13 @@ import { IonTabBar } from '@ionic/angular';
 export class TabsComponent {
   tabsDidChangeCounter = 0;
   tabsDidChangeEvent = '';
-  tabsDidChangeSelectedTab = '';
+  tabsDidChangeSelectedTab? = '';
 
   tabsWillChangeCounter = 0;
   tabsWillChangeEvent = '';
-  tabsWillChangeSelectedTab = '';
+  tabsWillChangeSelectedTab? = '';
 
-  @ViewChild(IonTabBar) tabBar: IonTabBar;
+  @ViewChild(IonTabBar) tabBar!: IonTabBar;
 
   tabChanged(ev: { tab: string }) {
     console.log('ionTabsDidChange', this.tabBar.selectedTab);

angular/test/base/src/app/view-child/view-child.component.ts

@@ -6,10 +6,9 @@ import { IonTabs, IonButton } from '@ionic/angular';
   templateUrl: './view-child.component.html'
 })
 export class ViewChildComponent implements AfterViewInit {
-
-  @ViewChild(IonButton, { static: true }) button: IonButton;
-  @ViewChild(IonTabs, { static: true }) tabs: IonTabs;
-  @ViewChild('div', { static: true }) div: ElementRef;
+  @ViewChild(IonButton, { static: true }) button!: IonButton;
+  @ViewChild(IonTabs, { static: true }) tabs!: IonTabs;
+  @ViewChild('div', { static: true }) div!: ElementRef;
 
   ngAfterViewInit() {
     const loaded = !!(this.button && this.tabs && this.div);

angular/test/base/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts

@@ -0,0 +1,46 @@
+import { Component, NgZone, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave } from '@ionic/angular';
+
+@Component({
+  selector: 'app-virtual-scroll-detail',
+  templateUrl: './virtual-scroll-detail.component.html',
+})
+export class VirtualScrollDetailComponent implements OnInit, ViewWillEnter, ViewDidEnter, ViewWillLeave, ViewDidLeave {
+
+  onInit = 0;
+  willEnter = 0;
+  didEnter = 0;
+  willLeave = 0;
+  didLeave = 0;
+
+  itemNu: string | null = 'none';
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.itemNu = this.route.snapshot.paramMap.get('itemId');
+    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++;
+  }
+}

angular/test/base/src/app/virtual-scroll-inner/virtual-scroll-inner.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, NgZone, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-virtual-scroll-inner',
+  templateUrl: './virtual-scroll-inner.component.html',
+})
+export class VirtualScrollInnerComponent implements OnInit {
+
+  @Input() value?: string;
+  onInit = 0;
+
+  ngOnInit() {
+    NgZone.assertInAngularZone();
+    this.onInit++;
+    console.log('created');
+  }
+}

angular/test/base/src/app/virtual-scroll/virtual-scroll.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { HeaderFn } from '@ionic/core';
+import { IonVirtualScroll } from '@ionic/angular';
+
+@Component({
+  selector: 'app-virtual-scroll',
+  templateUrl: './virtual-scroll.component.html',
+})
+export class VirtualScrollComponent {
+
+  @ViewChild(IonVirtualScroll, { static: true }) virtualScroll!: IonVirtualScroll;
+
+  items = Array.from({length: 100}, (_, i) => ({ name: `${i}`, checked: true}));
+
+  itemHeight = () => 44;
+
+  myHeaderFn: HeaderFn = (_, index) => {
+    if ((index % 10) === 0) {
+      return `Header ${index}`;
+    }
+    return '';
+  }
+
+  myFooterFn: HeaderFn = (_, index) => {
+    if ((index % 5) === 0) {
+      return `Footer ${index}`;
+    }
+    return '';
+  }
+
+  addItems() {
+    console.log('adding items');
+    this.items.push(
+      { name: `New Item`, checked: true}
+    );
+    this.virtualScroll.checkEnd();
+  }
+}