feat(anguar): add standalone and lazy popover

packages/angular/common/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+}

packages/angular/common/src/index.ts

@@ -0,0 +1,2 @@
+export { IonPopover } from './overlays/popover';
+export * from './utils';

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

@@ -0,0 +1,80 @@
+/* eslint-disable */
+/* tslint:disable */
+import {
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  NgZone,
+  TemplateRef,
+} from '@angular/core';
+import { proxyOutputs } from '../utils';
+import { Components } from '@ionic/core';
+export declare interface IonPopover extends Components.IonPopover {
+  /**
+   * Emitted after the popover has presented.
+   */
+  ionPopoverDidPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the popover has presented.
+   */
+  ionPopoverWillPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the popover has dismissed.
+   */
+  ionPopoverWillDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the popover has dismissed.
+   */
+  ionPopoverDidDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
+   */
+  didPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.
+   */
+  willPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
+   */
+  willDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.
+   */
+  didDismiss: EventEmitter<CustomEvent>;
+}
+
+@Component({ template: '' })
+export class IonPopover {
+  // TODO(FW-2827): type
+  @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
+
+  isCmpOpen: boolean = 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, [
+      'ionPopoverDidPresent',
+      'ionPopoverWillPresent',
+      'ionPopoverWillDismiss',
+      'ionPopoverDidDismiss',
+      'didPresent',
+      'willPresent',
+      'willDismiss',
+      'didDismiss',
+    ]);
+  }
+}

packages/angular/common/src/utils/index.ts

@@ -0,0 +1,57 @@
+/* eslint-disable */
+/* tslint:disable */
+import { fromEvent } from 'rxjs';
+
+export const proxyInputs = (Cmp: any, inputs: string[]) => {
+  const Prototype = Cmp.prototype;
+  inputs.forEach((item) => {
+    Object.defineProperty(Prototype, item, {
+      get() {
+        return this.el[item];
+      },
+      set(val: any) {
+        this.z.runOutsideAngular(() => (this.el[item] = val));
+      },
+    });
+  });
+};
+
+export const proxyMethods = (Cmp: any, methods: string[]) => {
+  const Prototype = Cmp.prototype;
+  methods.forEach((methodName) => {
+    Prototype[methodName] = function () {
+      const args = arguments;
+      return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
+    };
+  });
+};
+
+export const proxyOutputs = (instance: any, el: any, events: string[]) => {
+  events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
+
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+    customElements.define(tagName, customElement);
+  }
+};
+
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { defineCustomElementFn, inputs, methods } = opts;
+
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
+    }
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
+    }
+    if (methods) {
+      proxyMethods(cls, methods);
+    }
+    return cls;
+  };
+  return decorator;
+}

packages/angular/src/directives/overlays/popover.ts

@@ -1,51 +1,8 @@
 /* eslint-disable */
 /* tslint:disable */
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  ElementRef,
-  EventEmitter,
-  NgZone,
-  TemplateRef,
-} from '@angular/core';
-import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
-import { Components } from '@ionic/core';
-export declare interface IonPopover extends Components.IonPopover {
-  /**
-   * Emitted after the popover has presented.
-   */
-  ionPopoverDidPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted before the popover has presented.
-   */
-  ionPopoverWillPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the popover has dismissed.
-   */
-  ionPopoverWillDismiss: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the popover has dismissed.
-   */
-  ionPopoverDidDismiss: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
-   */
-  didPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.
-   */
-  willPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
-   */
-  willDismiss: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.
-   */
-  didDismiss: EventEmitter<CustomEvent>;
-}
+import { IonPopover as IonPopoverBase, ProxyCmp } from '@ionic/angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
 @ProxyCmp({
   inputs: [
     'alignment',
@@ -98,34 +55,4 @@ export declare interface IonPopover extends Components.IonPopover {
     'side',
   ],
 })
-export class IonPopover {
-  // TODO(FW-2827): type
-  @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
-
-  isCmpOpen: boolean = 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, [
-      'ionPopoverDidPresent',
-      'ionPopoverWillPresent',
-      'ionPopoverWillDismiss',
-      'ionPopoverDidDismiss',
-      'didPresent',
-      'willPresent',
-      'willDismiss',
-      'didDismiss',
-    ]);
-  }
-}
+export class IonPopover extends IonPopoverBase {}

packages/angular/standalone/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+}

packages/angular/standalone/src/index.ts

@@ -0,0 +1 @@
+export { IonPopover } from './overlays/popover';

packages/angular/standalone/src/overlays/popover.ts

@@ -0,0 +1,61 @@
+/* eslint-disable */
+/* tslint:disable */
+import { IonPopover as IonPopoverBase, ProxyCmp } from '@ionic/angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@ProxyCmp({
+  inputs: [
+    'alignment',
+    'animated',
+    'arrow',
+    'keepContentsMounted',
+    'backdropDismiss',
+    'cssClass',
+    'dismissOnSelect',
+    'enterAnimation',
+    'event',
+    'isOpen',
+    'keyboardClose',
+    'leaveAnimation',
+    'mode',
+    'showBackdrop',
+    'translucent',
+    'trigger',
+    'triggerAction',
+    'reference',
+    'size',
+    'side',
+  ],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'],
+})
+@Component({
+  selector: 'ion-popover',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen || keepContentsMounted"></ng-container>`,
+  inputs: [
+    'alignment',
+    'animated',
+    'arrow',
+    'keepContentsMounted',
+    'backdropDismiss',
+    'cssClass',
+    'dismissOnSelect',
+    'enterAnimation',
+    'event',
+    'isOpen',
+    'keyboardClose',
+    'leaveAnimation',
+    'mode',
+    'showBackdrop',
+    'translucent',
+    'trigger',
+    'triggerAction',
+    'reference',
+    'size',
+    'side',
+  ],
+  standalone: true,
+  imports: [CommonModule]
+})
+export class IonPopover extends IonPopoverBase {}