feat(angular): add standalone modal (#27885)

packages/angular/common/src/index.ts

@@ -20,6 +20,9 @@ export { bindLifecycleEvents, AngularDelegate } from './providers/angular-delega
 export type { IonicWindow } from './types/interfaces';
 
 export { NavParams } from './directives/navigation/nav-params';
+
+export { IonModal } from './overlays/modal';
+
 export { IonRouterOutlet, INPUT_BINDER, RoutedComponentInputBinder } from './directives/navigation/router-outlet';
 export type { StackEvent } from './directives/navigation/stack-utils';
 

packages/angular/common/src/overlays/modal.ts

@@ -0,0 +1,133 @@
+import {
+  ChangeDetectorRef,
+  ContentChild,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  NgZone,
+  TemplateRef,
+} from '@angular/core';
+import { Components, ModalBreakpointChangeEventDetail } from '@ionic/core';
+
+import { ProxyCmp, proxyOutputs } from '../utils/proxy';
+
+export declare interface IonModal extends Components.IonModal {
+  /**
+   * Emitted after the modal has presented.
+   **/
+  ionModalDidPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the modal has presented.
+   */
+  ionModalWillPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the modal has dismissed.
+   */
+  ionModalWillDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the modal has dismissed.
+   */
+  ionModalDidDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the modal breakpoint has changed.
+   */
+  ionBreakpointDidChange: EventEmitter<CustomEvent<ModalBreakpointChangeEventDetail>>;
+  /**
+   * Emitted after the modal has presented. Shorthand for ionModalDidPresent.
+   */
+  didPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the modal has presented. Shorthand for ionModalWillPresent.
+   */
+  willPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
+   */
+  willDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.
+   */
+  didDismiss: EventEmitter<CustomEvent>;
+}
+
+const MODAL_INPUTS = [
+  'animated',
+  'keepContentsMounted',
+  'backdropBreakpoint',
+  'backdropDismiss',
+  'breakpoints',
+  'canDismiss',
+  'cssClass',
+  'enterAnimation',
+  'event',
+  'handle',
+  'handleBehavior',
+  'initialBreakpoint',
+  'isOpen',
+  'keyboardClose',
+  'leaveAnimation',
+  'mode',
+  'presentingElement',
+  'showBackdrop',
+  'translucent',
+  'trigger',
+];
+
+const MODAL_METHODS = [
+  'present',
+  'dismiss',
+  'onDidDismiss',
+  'onWillDismiss',
+  'setCurrentBreakpoint',
+  'getCurrentBreakpoint',
+];
+
+@ProxyCmp({
+  inputs: MODAL_INPUTS,
+  methods: MODAL_METHODS,
+})
+/**
+ * @Component extends from @Directive
+ * so by defining the inputs here we
+ * do not need to re-define them for the
+ * lazy loaded popover.
+ */
+@Directive({
+  selector: 'ion-modal',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: MODAL_INPUTS,
+})
+
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export class IonModal {
+  // TODO(FW-2827): type
+  @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
+
+  isCmpOpen = false;
+
+  protected el: HTMLElement;
+
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    this.el = r.nativeElement;
+
+    this.el.addEventListener('ionMount', () => {
+      this.isCmpOpen = true;
+      c.detectChanges();
+    });
+    this.el.addEventListener('didDismiss', () => {
+      this.isCmpOpen = false;
+      c.detectChanges();
+    });
+    proxyOutputs(this, this.el, [
+      'ionModalDidPresent',
+      'ionModalWillPresent',
+      'ionModalWillDismiss',
+      'ionModalDidDismiss',
+      'ionBreakpointDidChange',
+      'didPresent',
+      'willPresent',
+      'willDismiss',
+      'didDismiss',
+    ]);
+  }
+}