From 9453132aa8952b4adfa1326e61138b329e254f76 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 20 Nov 2023 17:45:51 -0500
Subject: [PATCH] fix(angular): overlays are defined when using standalone
 controllers (#28560)

Issue number: resolves #28385

---------

<!-- 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?
<!-- Please describe the current behavior that you are modifying. -->

Overlay controllers do not register their respective overlays
components. This results in the overlay not appearing.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Each standalone overlay controller manually calls
`defineCustomElement` for their respective overlay component to ensure
the component is loaded/registered.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


Dev build: `7.5.6-dev.11700492285.1581ed02`
---
 .../angular/standalone/src/providers/action-sheet-controller.ts | 2 ++
 packages/angular/standalone/src/providers/alert-controller.ts   | 2 ++
 packages/angular/standalone/src/providers/loading-controller.ts | 2 --
 packages/angular/standalone/src/providers/modal-controller.ts   | 2 ++
 packages/angular/standalone/src/providers/picker-controller.ts  | 2 --
 packages/angular/standalone/src/providers/popover-controller.ts | 2 ++
 packages/angular/standalone/src/providers/toast-controller.ts   | 2 ++
 7 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/angular/standalone/src/providers/action-sheet-controller.ts b/packages/angular/standalone/src/providers/action-sheet-controller.ts
index 826d47e5aa..24c2ce7ca6 100644
--- a/packages/angular/standalone/src/providers/action-sheet-controller.ts
+++ b/packages/angular/standalone/src/providers/action-sheet-controller.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { OverlayBaseController } from '@ionic/angular/common';
 import type { ActionSheetOptions } from '@ionic/core/components';
 import { actionSheetController } from '@ionic/core/components';
+import { defineCustomElement } from '@ionic/core/components/ion-action-sheet.js';
 
 @Injectable({
   providedIn: 'root',
@@ -9,5 +10,6 @@ import { actionSheetController } from '@ionic/core/components';
 export class ActionSheetController extends OverlayBaseController<ActionSheetOptions, HTMLIonActionSheetElement> {
   constructor() {
     super(actionSheetController);
+    defineCustomElement();
   }
 }
diff --git a/packages/angular/standalone/src/providers/alert-controller.ts b/packages/angular/standalone/src/providers/alert-controller.ts
index 525d70ed27..c085a0f304 100644
--- a/packages/angular/standalone/src/providers/alert-controller.ts
+++ b/packages/angular/standalone/src/providers/alert-controller.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { OverlayBaseController } from '@ionic/angular/common';
 import type { AlertOptions } from '@ionic/core/components';
 import { alertController } from '@ionic/core/components';
+import { defineCustomElement } from '@ionic/core/components/ion-alert.js';
 
 @Injectable({
   providedIn: 'root',
@@ -9,5 +10,6 @@ import { alertController } from '@ionic/core/components';
 export class AlertController extends OverlayBaseController<AlertOptions, HTMLIonAlertElement> {
   constructor() {
     super(alertController);
+    defineCustomElement();
   }
 }
diff --git a/packages/angular/standalone/src/providers/loading-controller.ts b/packages/angular/standalone/src/providers/loading-controller.ts
index 03785983bf..0e766076c8 100644
--- a/packages/angular/standalone/src/providers/loading-controller.ts
+++ b/packages/angular/standalone/src/providers/loading-controller.ts
@@ -10,8 +10,6 @@ import { defineCustomElement } from '@ionic/core/components/ion-loading.js';
 export class LoadingController extends OverlayBaseController<LoadingOptions, HTMLIonLoadingElement> {
   constructor() {
     super(loadingController);
-
-    // TODO: FW-5415 may remove the need for this
     defineCustomElement();
   }
 }
diff --git a/packages/angular/standalone/src/providers/modal-controller.ts b/packages/angular/standalone/src/providers/modal-controller.ts
index c2ca604412..07e406ec5d 100644
--- a/packages/angular/standalone/src/providers/modal-controller.ts
+++ b/packages/angular/standalone/src/providers/modal-controller.ts
@@ -2,6 +2,7 @@ import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
 import type { ModalOptions } from '@ionic/core/components';
 import { modalController } from '@ionic/core/components';
+import { defineCustomElement } from '@ionic/core/components/ion-modal.js';
 
 @Injectable()
 export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
@@ -11,6 +12,7 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
 
   constructor() {
     super(modalController);
+    defineCustomElement();
   }
 
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {
diff --git a/packages/angular/standalone/src/providers/picker-controller.ts b/packages/angular/standalone/src/providers/picker-controller.ts
index f3638ad6d4..188491c5bf 100644
--- a/packages/angular/standalone/src/providers/picker-controller.ts
+++ b/packages/angular/standalone/src/providers/picker-controller.ts
@@ -10,8 +10,6 @@ import { defineCustomElement } from '@ionic/core/components/ion-picker.js';
 export class PickerController extends OverlayBaseController<PickerOptions, HTMLIonPickerElement> {
   constructor() {
     super(pickerController);
-
-    // TODO: FW-5415 may remove the need for this
     defineCustomElement();
   }
 }
diff --git a/packages/angular/standalone/src/providers/popover-controller.ts b/packages/angular/standalone/src/providers/popover-controller.ts
index 837c7f647a..395b4dbdb7 100644
--- a/packages/angular/standalone/src/providers/popover-controller.ts
+++ b/packages/angular/standalone/src/providers/popover-controller.ts
@@ -2,6 +2,7 @@ import { Injector, inject, EnvironmentInjector } from '@angular/core';
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
 import type { PopoverOptions } from '@ionic/core/components';
 import { popoverController } from '@ionic/core/components';
+import { defineCustomElement } from '@ionic/core/components/ion-popover.js';
 
 export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
   private angularDelegate = inject(AngularDelegate);
@@ -10,6 +11,7 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
 
   constructor() {
     super(popoverController);
+    defineCustomElement();
   }
 
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
diff --git a/packages/angular/standalone/src/providers/toast-controller.ts b/packages/angular/standalone/src/providers/toast-controller.ts
index 4e4be9637d..e662a01f89 100644
--- a/packages/angular/standalone/src/providers/toast-controller.ts
+++ b/packages/angular/standalone/src/providers/toast-controller.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { OverlayBaseController } from '@ionic/angular/common';
 import type { ToastOptions } from '@ionic/core/components';
 import { toastController } from '@ionic/core/components';
+import { defineCustomElement } from '@ionic/core/components/ion-toast.js';
 
 @Injectable({
   providedIn: 'root',
@@ -9,5 +10,6 @@ import { toastController } from '@ionic/core/components';
 export class ToastController extends OverlayBaseController<ToastOptions, HTMLIonToastElement> {
   constructor() {
     super(toastController);
+    defineCustomElement();
   }
 }