fix(angular): forward generic type parameter on ModalOptions and PopoverOptions (#31022)

Issue number: resolves #31012

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
`ModalOptions` and `PopoverOptions` in `@ionic/angular` are non-generic
type aliases. Using `ModalOptions<typeof MyComponent>` causes a
typescript error, even though the core `@ionic/core` types accept a
generic parameter.

## What is the new behavior?
`ModalOptions` and `PopoverOptions` now forward the generic type
parameter from their core counterparts, allowing usage like`
ModalOptions<typeof MyComponent>`. The default parameter preserves
backward compatibility and existing code using ModalOptions without a
generic should continue to work.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Other information

This was the initial and intended behavior, but got broken in
#30899
unintentionally. This PR fixes the issue and creates a test to ensure it
doesn't happen again.

Current dev build:
```
8.8.2-dev.11773931429.15b2a51c
```

Author: ShaneK

packages/angular/common/src/types/overlay-options.ts

@@ -1,18 +1,22 @@
 import type { Injector } from '@angular/core';
-import type { ModalOptions as CoreModalOptions, PopoverOptions as CorePopoverOptions } from '@ionic/core/components';
+import type {
+  ComponentRef,
+  ModalOptions as CoreModalOptions,
+  PopoverOptions as CorePopoverOptions,
+} from '@ionic/core/components';
 
 /**
  * Modal options with Angular-specific injector support.
  * Extends @ionic/core ModalOptions with an optional injector property.
  */
-export type ModalOptions = CoreModalOptions & {
+export type ModalOptions<T extends ComponentRef = ComponentRef> = CoreModalOptions<T> & {
   injector?: Injector;
 };
 
 /**
  * Popover options with Angular-specific injector support.
  * Extends @ionic/core PopoverOptions with an optional injector property.
  */
-export type PopoverOptions = CorePopoverOptions & {
+export type PopoverOptions<T extends ComponentRef = ComponentRef> = CorePopoverOptions<T> & {
   injector?: Injector;
 };

packages/angular/test/base/e2e/src/standalone/modal-options-generic.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Modal Options: Generic Type Parameter', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/modal-options-generic');
+  });
+
+  test('should open modal created with ModalOptions<typeof Component>', async ({ page }, testInfo) => {
+    testInfo.annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/31012',
+    });
+
+    await page.locator('ion-button#open-modal').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+
+    const greeting = page.locator('#greeting');
+    await expect(greeting).toHaveText('hello world');
+
+    await page.locator('#close-modal').click();
+    await expect(page.locator('ion-modal')).not.toBeVisible();
+  });
+});

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -24,6 +24,7 @@ export const routes: Routes = [
       },
       { path: 'programmatic-modal', loadComponent: () => import('../programmatic-modal/programmatic-modal.component').then(c => c.ProgrammaticModalComponent) },
       { path: 'modal-custom-injector', loadComponent: () => import('../modal-custom-injector/modal-custom-injector.component').then(c => c.ModalCustomInjectorComponent) },
+      { path: 'modal-options-generic', loadComponent: () => import('../modal-options-generic/modal-options-generic.component').then(c => c.ModalOptionsGenericComponent) },
       { path: 'popover-custom-injector', loadComponent: () => import('../popover-custom-injector/popover-custom-injector.component').then(c => c.PopoverCustomInjectorComponent) },
       { path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(c => c.RouterOutletComponent) },
       { path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(c => c.BackButtonComponent) },

packages/angular/test/base/src/app/standalone/home-page/home-page.component.html

@@ -125,6 +125,11 @@
         Modal Custom Injector Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/modal-options-generic">
+      <ion-label>
+        Modal Options Generic Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/overlay-controllers">
       <ion-label>
         Overlay Controllers Test

packages/angular/test/base/src/app/standalone/modal-options-generic/modal-options-generic.component.ts

@@ -0,0 +1,38 @@
+import { Component, inject } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, ModalController } from '@ionic/angular/standalone';
+import type { ModalOptions } from '@ionic/angular/standalone';
+import { GenericModalComponent } from './modal/modal.component';
+
+@Component({
+  selector: 'app-modal-options-generic',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Options Generic Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal" (click)="openModal()">
+        Open Modal
+      </ion-button>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, IonButton],
+})
+export class ModalOptionsGenericComponent {
+  private modalController = inject(ModalController);
+
+  async openModal() {
+    // Regression: ModalOptions<T> must accept a generic type parameter (#31012)
+    const opts: ModalOptions<typeof GenericModalComponent> = {
+      component: GenericModalComponent,
+      componentProps: {
+        greeting: 'hello world',
+      },
+    };
+
+    const modal = await this.modalController.create(opts);
+    await modal.present();
+  }
+}

packages/angular/test/base/src/app/standalone/modal-options-generic/modal/modal.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonButtons } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-generic-modal',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Generic Modal</ion-title>
+        <ion-buttons slot="end">
+          <ion-button id="close-modal" (click)="dismiss()">Close</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <p id="greeting">{{ greeting }}</p>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonButtons],
+})
+export class GenericModalComponent {
+  @Input() greeting = '';
+  modal: HTMLIonModalElement | undefined;
+
+  dismiss() {
+    this.modal?.dismiss();
+  }
+}