refactor(popover): rename ev to event?

fixes #15014

core/src/components.d.ts

@@ -1662,7 +1662,7 @@ declare global {
       /**
        * The event to pass to the popover animation.
        */
-      'ev': any;
+      'event': any;
       'keyboardClose': boolean;
       /**
        * Animation to use when the popover is dismissed.
@@ -5169,7 +5169,7 @@ declare global {
       /**
        * The event to pass to the popover animation.
        */
-      'ev'?: any;
+      'event'?: any;
       'keyboardClose'?: boolean;
       /**
        * Animation to use when the popover is dismissed.

core/src/components/action-sheet-controller/action-sheet-controller.tsx

@@ -1,7 +1,7 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
 
-import { ActionSheetOptions } from '../../interface';
-import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
+import { ActionSheetOptions, OverlayController } from '../../interface';
+import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 @Component({
   tag: 'ion-action-sheet-controller'

core/src/components/alert-controller/alert-controller.tsx

@@ -1,7 +1,7 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
 
-import { AlertOptions } from '../../interface';
-import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
+import { AlertOptions, OverlayController } from '../../interface';
+import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 @Component({
   tag: 'ion-alert-controller'

core/src/components/loading-controller/loading-controller.tsx

@@ -1,7 +1,7 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
 
-import { LoadingOptions } from '../../interface';
-import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
+import { LoadingOptions, OverlayController } from '../../interface';
+import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 @Component({
   tag: 'ion-loading-controller'

core/src/components/modal-controller/modal-controller.tsx

@@ -1,7 +1,7 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
 
-import { ModalOptions } from '../../interface';
-import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
+import { ModalOptions, OverlayController } from '../../interface';
+import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 @Component({
   tag: 'ion-modal-controller'

core/src/components/picker-controller/picker-controller.tsx

@@ -1,7 +1,7 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
 
-import { PickerOptions } from '../../interface';
-import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
+import { OverlayController, PickerOptions } from '../../interface';
+import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 /** @hidden */
 @Component({

core/src/components/popover-controller/popover-controller.tsx

@@ -1,7 +1,7 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
 
-import { PopoverOptions } from '../../interface';
-import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
+import { PopoverOptions, OverlayController } from '../../interface';
+import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 @Component({
   tag: 'ion-popover-controller'

core/src/components/popover-controller/usage/javascript.md

@@ -5,7 +5,7 @@ async function presentPopover() {
 
   const popoverElement = await popoverController.create({
     component: 'profile-page',
-    ev: event
+    event: event
   });
   return await popoverElement.present();
 }

core/src/components/popover/popover-interface.ts

@@ -9,6 +9,6 @@ export interface PopoverOptions {
   enterAnimation?: AnimationBuilder;
   leaveAnimation?: AnimationBuilder;
   cssClass?: string | string[];
-  ev: Event;
+  event?: Event;
   delegate?: FrameworkDelegate;
 }

core/src/components/popover/popover.tsx

@@ -79,7 +79,7 @@ export class Popover implements OverlayInterface {
   /**
    * The event to pass to the popover animation.
    */
-  @Prop() ev: any;
+  @Prop() event: any;
 
   /**
    * If true, a backdrop will be displayed behind the popover. Defaults to `true`.
@@ -181,7 +181,7 @@ export class Popover implements OverlayInterface {
       popover: this.el
     };
     this.usersElement = await attachComponent(this.delegate, container, this.component, ['popover-viewport'], data);
-    return present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, this.ev);
+    return present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, this.event);
   }
 
   /**
@@ -189,7 +189,7 @@ export class Popover implements OverlayInterface {
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<void> {
-    await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.ev);
+    await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
     await detachComponent(this.delegate, this.usersElement);
   }
 

core/src/components/popover/test/basic/index.html

@@ -15,7 +15,7 @@
     <ion-header>
       <ion-toolbar color="primary">
         <ion-buttons slot="secondary">
-          <ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
+          <ion-button onclick="presentPopover({component: 'profile-page', event: event })">
             <ion-icon slot="icon-only" name="person"></ion-icon>
           </ion-button>
         </ion-buttons>
@@ -24,9 +24,9 @@
     </ion-header>
 
     <ion-content id="content" padding>
-      <ion-button class="e2eShowPopover" expand="block" onclick="presentPopover({ component: 'profile-page', ev: event })">Show Popover</ion-button>
-      <ion-button expand="block" onclick="presentPopover({ component: 'translucent-page', ev: event, translucent: true })">Show Translucent Popover</ion-button>
-      <ion-button expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', ev: event })">Show Long List Popover</ion-button>
+      <ion-button class="e2eShowPopover" expand="block" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</ion-button>
+      <ion-button expand="block" onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</ion-button>
+      <ion-button expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
       <ion-button expand="block" color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</ion-button>
 
       <ion-popover-controller></ion-popover-controller>
@@ -35,7 +35,7 @@
     <ion-footer>
       <ion-toolbar color="primary">
         <ion-buttons slot="primary">
-          <ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
+          <ion-button onclick="presentPopover({component: 'profile-page', event: event })">
             <ion-icon slot="icon-only" name="person"></ion-icon>
           </ion-button>
         </ion-buttons>

core/src/components/popover/test/preview/index.html

@@ -15,7 +15,7 @@
     <ion-header>
       <ion-toolbar color="primary">
         <ion-buttons slot="secondary">
-          <ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
+          <ion-button onclick="presentPopover({component: 'profile-page', event: event })">
             <ion-icon slot="icon-only" name="person"></ion-icon>
           </ion-button>
         </ion-buttons>
@@ -24,9 +24,9 @@
     </ion-header>
 
     <ion-content id="content" padding>
-      <ion-button class="e2eShowPopover" expand="block" onclick="presentPopover({ component: 'profile-page', ev: event })">Show Popover</ion-button>
-      <ion-button expand="block" onclick="presentPopover({ component: 'translucent-page', ev: event, translucent: true })">Show Translucent Popover</ion-button>
-      <ion-button expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', ev: event })">Show Long List Popover</ion-button>
+      <ion-button class="e2eShowPopover" expand="block" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</ion-button>
+      <ion-button expand="block" onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</ion-button>
+      <ion-button expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
       <ion-button expand="block" color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</ion-button>
 
       <ion-popover-controller></ion-popover-controller>
@@ -35,7 +35,7 @@
     <ion-footer>
       <ion-toolbar color="primary">
         <ion-buttons slot="primary">
-          <ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
+          <ion-button onclick="presentPopover({component: 'profile-page', event: event })">
             <ion-icon slot="icon-only" name="person"></ion-icon>
           </ion-button>
         </ion-buttons>

core/src/components/popover/test/standalone/index.html

@@ -10,9 +10,9 @@
 </head>
 
 <body>
-  <button id="basic" onclick="presentPopover({ component: 'profile-page', ev: event })">Show Popover</button>
-  <button onclick="presentPopover({ component: 'translucent-page', ev: event, translucent: true })">Show Translucent Popover</button>
-  <button color="secondary" onclick="presentPopover({ component: 'list-page', ev: event })">Show Long List Popover</button>
+  <button id="basic" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</button>
+  <button onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</button>
+  <button color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</button>
   <button color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</button>
 
   <ion-popover-controller></ion-popover-controller>

core/src/components/popover/usage/angular.md

@@ -14,7 +14,7 @@ export class PopoverExample {
   async presentPopover(ev: any) {
     const popover = await this.popoverController.create({
       component: PopoverComponent,
-      ev: event,
+      event: event,
       translucent: true
     });
     return await popover.present();

core/src/components/popover/usage/javascript.md

@@ -5,8 +5,8 @@ async function presentPopover(ev) {
 
   const popover = await popoverController.create({
     component: 'popover-example-page',
-    ev: event,
     translucent: true
+    event,
   });
   return await popover.present();
 }

core/src/components/toast-controller/toast-controller.tsx

@@ -1,7 +1,7 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
 
-import { ToastOptions } from '../../interface';
-import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
+import { OverlayController, ToastOptions } from '../../interface';
+import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 @Component({
   tag: 'ion-toast-controller'

core/src/interface.d.ts

@@ -26,7 +26,7 @@ export { Gesture, GestureDetail } from './utils/gesture/gesture';
 
 export * from './utils/input-interface';
 export * from './global/config';
-export { OverlayEventDetail, OverlayInterface } from './utils/overlays';
+export * from './utils/overlays-interface';
 
 
 // Global types

core/src/utils/overlays-interface.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '@stencil/core';
+
+import { Animation, AnimationBuilder, Config, Mode } from '../interface';
+
+export interface OverlayEventDetail<T = any> {
+  data?: T;
+  role?: string;
+}
+
+export interface OverlayInterface {
+  mode: Mode;
+  el: HTMLElement;
+  willAnimate: boolean;
+  keyboardClose: boolean;
+  config: Config;
+  overlayId: number;
+  presented: boolean;
+  animation?: Animation;
+  animationCtrl: HTMLIonAnimationControllerElement;
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+
+  didPresent: EventEmitter<void>;
+  willPresent: EventEmitter<void>;
+  willDismiss: EventEmitter<OverlayEventDetail>;
+  didDismiss: EventEmitter<OverlayEventDetail>;
+
+  present(): Promise<void>;
+  dismiss(data?: any, role?: string): Promise<void>;
+}
+
+export interface OverlayController {
+  create(opts?: any): Promise<HTMLElement>;
+  dismiss(data?: any, role?: string, alertId?: number): Promise<void>;
+  getTop(): HTMLElement;
+}
+
+export interface HTMLIonOverlayElement extends HTMLStencilElement {
+  overlayId: number;
+  dismiss(data?: any, role?: string): Promise<void>;
+}
+
+export type OverlayMap = Map<number, HTMLIonOverlayElement>;

core/src/utils/overlays.ts

@@ -1,10 +1,8 @@
-import { EventEmitter } from '@stencil/core';
-
-import { Animation, AnimationBuilder, Config, Mode } from '../interface';
+import { AnimationBuilder, HTMLIonOverlayElement, OverlayInterface, OverlayMap } from '../interface';
 
 let lastId = 1;
 
-export function createOverlay<T extends HTMLIonOverlayElement, B>(element: T, opts: B): Promise<T> {
+export function createOverlay<T extends HTMLIonOverlayElement & Required<B>, B>(element: T, opts: B): Promise<T> {
   // convert the passed in overlay options into props
   // that get passed down into the new overlay
   Object.assign(element, opts);
@@ -160,45 +158,4 @@ export function isCancel(role: string | undefined): boolean {
   return role === 'cancel' || role === BACKDROP;
 }
 
-export interface OverlayEventDetail<T = any> {
-  data?: T;
-  role?: string;
-}
-
-export interface OverlayInterface {
-  mode: Mode;
-  el: HTMLElement;
-  willAnimate: boolean;
-  keyboardClose: boolean;
-  config: Config;
-  overlayId: number;
-  presented: boolean;
-  animation?: Animation;
-  animationCtrl: HTMLIonAnimationControllerElement;
-
-  enterAnimation?: AnimationBuilder;
-  leaveAnimation?: AnimationBuilder;
-
-  didPresent: EventEmitter<void>;
-  willPresent: EventEmitter<void>;
-  willDismiss: EventEmitter<OverlayEventDetail>;
-  didDismiss: EventEmitter<OverlayEventDetail>;
-
-  present(): Promise<void>;
-  dismiss(data?: any, role?: string): Promise<void>;
-}
-
-export interface OverlayController {
-  create(opts?: any): Promise<HTMLElement>;
-  dismiss(data?: any, role?: string, alertId?: number): Promise<void>;
-  getTop(): HTMLElement;
-}
-
-export interface HTMLIonOverlayElement extends HTMLStencilElement {
-  overlayId: number;
-  dismiss(data?: any, role?: string): Promise<void>;
-}
-
-export type OverlayMap = Map<number, HTMLIonOverlayElement>;
-
 export const BACKDROP = 'backdrop';