fix(angular): inline overlays are exported (#26333)

angular/src/directives/proxies-list.ts

@@ -4,6 +4,8 @@ import * as d from './proxies';
 export const DIRECTIVES = [
   d.IonAccordion,
   d.IonAccordionGroup,
+  d.IonActionSheet,
+  d.IonAlert,
   d.IonApp,
   d.IonAvatar,
   d.IonBackButton,
@@ -44,6 +46,7 @@ export const DIRECTIVES = [
   d.IonLabel,
   d.IonList,
   d.IonListHeader,
+  d.IonLoading,
   d.IonMenu,
   d.IonMenuButton,
   d.IonMenuToggle,
@@ -74,6 +77,7 @@ export const DIRECTIVES = [
   d.IonTextarea,
   d.IonThumbnail,
   d.IonTitle,
+  d.IonToast,
   d.IonToggle,
   d.IonToolbar
 ];

angular/src/directives/proxies.ts

@@ -59,6 +59,128 @@ export class IonAccordionGroup {
   }
 }
 
+import type { OverlayEventDetail as IActionSheetOverlayEventDetail } from '@ionic/core';
+export declare interface IonActionSheet extends Components.IonActionSheet {
+  /**
+   * Emitted after the action sheet has presented. 
+   */
+  ionActionSheetDidPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the action sheet has presented. 
+   */
+  ionActionSheetWillPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the action sheet has dismissed. 
+   */
+  ionActionSheetWillDismiss: EventEmitter<CustomEvent<IActionSheetOverlayEventDetail>>;
+  /**
+   * Emitted after the action sheet has dismissed. 
+   */
+  ionActionSheetDidDismiss: EventEmitter<CustomEvent<IActionSheetOverlayEventDetail>>;
+  /**
+   * Emitted after the action sheet has presented.
+Shorthand for ionActionSheetWillDismiss. 
+   */
+  didPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the action sheet has presented.
+Shorthand for ionActionSheetWillPresent. 
+   */
+  willPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the action sheet has dismissed.
+Shorthand for ionActionSheetWillDismiss. 
+   */
+  willDismiss: EventEmitter<CustomEvent<IActionSheetOverlayEventDetail>>;
+  /**
+   * Emitted after the action sheet has dismissed.
+Shorthand for ionActionSheetDidDismiss. 
+   */
+  didDismiss: EventEmitter<CustomEvent<IActionSheetOverlayEventDetail>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger'],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
+})
+@Component({
+  selector: 'ion-action-sheet',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']
+})
+export class IonActionSheet {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ionActionSheetDidPresent', 'ionActionSheetWillPresent', 'ionActionSheetWillDismiss', 'ionActionSheetDidDismiss', 'didPresent', 'willPresent', 'willDismiss', 'didDismiss']);
+  }
+}
+
+import type { OverlayEventDetail as IAlertOverlayEventDetail } from '@ionic/core';
+export declare interface IonAlert extends Components.IonAlert {
+  /**
+   * Emitted after the alert has presented. 
+   */
+  ionAlertDidPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the alert has presented. 
+   */
+  ionAlertWillPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the alert has dismissed. 
+   */
+  ionAlertWillDismiss: EventEmitter<CustomEvent<IAlertOverlayEventDetail>>;
+  /**
+   * Emitted after the alert has dismissed. 
+   */
+  ionAlertDidDismiss: EventEmitter<CustomEvent<IAlertOverlayEventDetail>>;
+  /**
+   * Emitted after the alert has presented.
+Shorthand for ionAlertWillDismiss. 
+   */
+  didPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the alert has presented.
+Shorthand for ionAlertWillPresent. 
+   */
+  willPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the alert has dismissed.
+Shorthand for ionAlertWillDismiss. 
+   */
+  willDismiss: EventEmitter<CustomEvent<IAlertOverlayEventDetail>>;
+  /**
+   * Emitted after the alert has dismissed.
+Shorthand for ionAlertDidDismiss. 
+   */
+  didDismiss: EventEmitter<CustomEvent<IAlertOverlayEventDetail>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger'],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
+})
+@Component({
+  selector: 'ion-alert',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']
+})
+export class IonAlert {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ionAlertDidPresent', 'ionAlertWillPresent', 'ionAlertWillDismiss', 'ionAlertDidDismiss', 'didPresent', 'willPresent', 'willDismiss', 'didDismiss']);
+  }
+}
+
 
 export declare interface IonApp extends Components.IonApp {}
 
@@ -1077,6 +1199,67 @@ export class IonListHeader {
   }
 }
 
+import type { OverlayEventDetail as ILoadingOverlayEventDetail } from '@ionic/core';
+export declare interface IonLoading extends Components.IonLoading {
+  /**
+   * Emitted after the loading has presented. 
+   */
+  ionLoadingDidPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the loading has presented. 
+   */
+  ionLoadingWillPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the loading has dismissed. 
+   */
+  ionLoadingWillDismiss: EventEmitter<CustomEvent<ILoadingOverlayEventDetail>>;
+  /**
+   * Emitted after the loading has dismissed. 
+   */
+  ionLoadingDidDismiss: EventEmitter<CustomEvent<ILoadingOverlayEventDetail>>;
+  /**
+   * Emitted after the loading indicator has presented.
+Shorthand for ionLoadingWillDismiss. 
+   */
+  didPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the loading indicator has presented.
+Shorthand for ionLoadingWillPresent. 
+   */
+  willPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the loading indicator has dismissed.
+Shorthand for ionLoadingWillDismiss. 
+   */
+  willDismiss: EventEmitter<CustomEvent<ILoadingOverlayEventDetail>>;
+  /**
+   * Emitted after the loading indicator has dismissed.
+Shorthand for ionLoadingDidDismiss. 
+   */
+  didDismiss: EventEmitter<CustomEvent<ILoadingOverlayEventDetail>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
+})
+@Component({
+  selector: 'ion-loading',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']
+})
+export class IonLoading {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ionLoadingDidPresent', 'ionLoadingWillPresent', 'ionLoadingWillDismiss', 'ionLoadingDidDismiss', 'didPresent', 'willPresent', 'willDismiss', 'didDismiss']);
+  }
+}
+
 
 export declare interface IonMenu extends Components.IonMenu {
   /**
@@ -1922,6 +2105,67 @@ export class IonTitle {
   }
 }
 
+import type { OverlayEventDetail as IToastOverlayEventDetail } from '@ionic/core';
+export declare interface IonToast extends Components.IonToast {
+  /**
+   * Emitted after the toast has presented. 
+   */
+  ionToastDidPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the toast has presented. 
+   */
+  ionToastWillPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the toast has dismissed. 
+   */
+  ionToastWillDismiss: EventEmitter<CustomEvent<IToastOverlayEventDetail>>;
+  /**
+   * Emitted after the toast has dismissed. 
+   */
+  ionToastDidDismiss: EventEmitter<CustomEvent<IToastOverlayEventDetail>>;
+  /**
+   * Emitted after the toast has presented.
+Shorthand for ionToastWillDismiss. 
+   */
+  didPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the toast has presented.
+Shorthand for ionToastWillPresent. 
+   */
+  willPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the toast has dismissed.
+Shorthand for ionToastWillDismiss. 
+   */
+  willDismiss: EventEmitter<CustomEvent<IToastOverlayEventDetail>>;
+  /**
+   * Emitted after the toast has dismissed.
+Shorthand for ionToastDidDismiss. 
+   */
+  didDismiss: EventEmitter<CustomEvent<IToastOverlayEventDetail>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
+})
+@Component({
+  selector: 'ion-toast',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger']
+})
+export class IonToast {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ionToastDidPresent', 'ionToastWillPresent', 'ionToastWillDismiss', 'ionToastDidDismiss', 'didPresent', 'willPresent', 'willDismiss', 'didDismiss']);
+  }
+}
+
 import type { ToggleChangeEventDetail as IToggleToggleChangeEventDetail } from '@ionic/core';
 export declare interface IonToggle extends Components.IonToggle {
   /**

angular/test/base/e2e/src/inline-overlays.spec.ts

@@ -0,0 +1,53 @@
+describe('Overlays: Inline', () => {
+  beforeEach(() => {
+    cy.visit('/overlays-inline');
+  });
+
+  describe('Alert', () => {
+    it('should be visible when presenting', () => {
+      cy.get('ion-alert').should('not.be.visible');
+
+      cy.get('#open-alert').click();
+      cy.get('ion-alert').should('be.visible');
+
+      cy.get('ion-alert ion-backdrop').click({ force: true });
+      cy.get('ion-alert').should('not.be.visible');
+    });
+  });
+
+  describe('Action Sheet', () => {
+    it('should be visible when presenting', () => {
+      cy.get('ion-action-sheet').should('not.be.visible');
+
+      cy.get('#open-action-sheet').click();
+      cy.get('ion-action-sheet').should('be.visible');
+
+      cy.get('ion-action-sheet ion-backdrop').click({ force: true });
+      cy.get('ion-action-sheet').should('not.be.visible');
+    });
+  });
+
+  describe('Loading', () => {
+    it('should be visible when presenting', () => {
+      cy.get('ion-loading').should('not.be.visible');
+
+      cy.get('#open-loading').click();
+      cy.get('ion-loading').should('be.visible');
+
+      cy.get('ion-loading ion-backdrop').click({ force: true });
+      cy.get('ion-loading').should('not.be.visible');
+    });
+  });
+
+  describe('Toast', () => {
+    it('should be visible when presenting', () => {
+      cy.get('ion-toast').should('not.be.visible');
+
+      cy.get('#open-toast').click();
+      cy.get('ion-toast').shadow().find('.toast-wrapper').should('be.visible');
+
+      cy.get('ion-toast').shadow().find('.toast-button').click();
+      cy.get('ion-toast').should('not.be.visible');
+    });
+  });
+});

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

@@ -32,6 +32,7 @@ const routes: Routes = [
   { 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: 'overlays-inline', loadChildren: () => import('./overlays-inline').then(m => m.OverlaysInlineModule) },
   { 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/overlays-inline/index.ts

@@ -0,0 +1 @@
+export * from './overlays-inline.module';

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

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

angular/test/base/src/app/overlays-inline/overlays-inline.component.html

@@ -0,0 +1,33 @@
+<ion-content>
+  <ion-button id="open-alert">Open Alert</ion-button>
+  <ion-button id="open-action-sheet">Open Action Sheet</ion-button>
+  <ion-button id="open-loading">Open Loading</ion-button>
+  <ion-button id="open-toast">Open Toast</ion-button>
+
+  <ion-alert
+    trigger="open-alert"
+    header="Alert"
+    message="This is an alert."
+    [buttons]="['Ok', 'Cancel']"
+  >
+  </ion-alert>
+
+  <ion-action-sheet
+    trigger="open-action-sheet"
+    header="Action Sheet"
+    [buttons]="['Button A', 'Button B']"
+  >
+  </ion-action-sheet>
+
+  <ion-loading
+    trigger="open-loading"
+    message="This is a loading message"
+    [backdropDismiss]="true"
+  ></ion-loading>
+
+  <ion-toast
+    trigger="open-toast"
+    message="This is a toast message"
+    [buttons]="['Button']"
+  ></ion-toast>
+</ion-content>

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

@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+
+/**
+ * Validates that inline overlays will will display correctly.
+ */
+@Component({
+  selector: 'app-overlays-inline',
+  templateUrl: 'overlays-inline.component.html'
+})
+export class OverlaysInlineComponent {}

angular/test/base/src/app/overlays-inline/overlays-inline.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { IonicModule } from "@ionic/angular";
+import { OverlaysInlineRoutingModule } from "./overlays-inline-routing.module";
+import { OverlaysInlineComponent } from "./overlays-inline.component";
+
+@NgModule({
+  imports: [CommonModule, IonicModule, OverlaysInlineRoutingModule],
+  declarations: [OverlaysInlineComponent],
+})
+export class OverlaysInlineModule { }

core/stencil.config.ts

@@ -183,14 +183,9 @@ export const config: Config = {
       directivesArrayFile: '../angular/src/directives/proxies-list.ts',
       excludeComponents: [
         // overlays
-        'ion-action-sheet',
-        'ion-alert',
-        'ion-loading',
         'ion-modal',
         'ion-picker',
         'ion-popover',
-        'ion-toast',
-        'ion-toast',
 
         // navigation
         'ion-router',