docs(playgrounds): rename ev to event for consistency (#3982)

docs/developing/hardware-back-button.md

@@ -67,8 +67,8 @@ The `ionBackButton` event will not be emitted when running an app in a browser o
 <TabItem value="javascript">
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(10, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(10, () => {
     console.log('Handler was called!');
   });
 });
@@ -108,8 +108,8 @@ constructor(private platform: Platform) {
 <TabItem value="react">
 
 ```tsx
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(10, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(10, () => {
     console.log('Handler was called!');
   });
 });
@@ -157,12 +157,12 @@ Each hardware back button callback has a `processNextHandler` parameter. Calling
 <TabItem value="javascript">
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(5, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(5, () => {
     console.log('Another handler was called!');
   });
 
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler was called!');
 
     processNextHandler();
@@ -216,12 +216,12 @@ constructor(private platform: Platform) {
 <TabItem value="react">
 
 ```tsx
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(5, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(5, () => {
     console.log('Another handler was called!');
   });
 
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler was called!');
 
     processNextHandler();
@@ -261,16 +261,16 @@ This example shows how to indicate to Ionic Framework that you want the next han
 Internally, Ionic Framework uses something similar to a priority queue to manage hardware back button handlers. The handler with the largest priority value will be called first. In the event that there are multiple handlers with the same priority value, the _last_ handler of the same priority added to this queue will be the first handler to be called.
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
+document.addEventListener('ionBackButton', (event) => {
   // Handler A
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler A was called!');
 
     processNextHandler();
   });
 
   // Handler B
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler B was called!');
 
     processNextHandler();
@@ -305,8 +305,8 @@ import { App } from '@capacitor/app';
 ...
 
 const routerEl = document.querySelector('ion-router');
-document.addEventListener('ionBackButton', (ev: BackButtonEvent) => {
-  ev.detail.register(-1, () => {
+document.addEventListener('ionBackButton', (event: BackButtonEvent) => {
+  event.detail.register(-1, () => {
     const path = window.location.pathname;
     if (path === routerEl.root) {
       App.exitApp();
@@ -368,8 +368,8 @@ import { App } from '@capacitor/app';
 ...
 
 const ionRouter = useIonRouter();
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(-1, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(-1, () => {
     if (!ionRouter.canGoBack()) {
       App.exitApp();
     }

docs/developing/keyboard.md

@@ -90,8 +90,8 @@ Detecting the presence of an on-screen keyboard is useful for adjusting the posi
 <TabItem value="javascript">
 
 ```javascript
-window.addEventListener('ionKeyboardDidShow', ev => {
-  const { keyboardHeight } = ev;
+window.addEventListener('ionKeyboardDidShow', event => {
+  const { keyboardHeight } = event;
   // Do something with the keyboard height such as translating an input above the keyboard.
 });
 
@@ -108,8 +108,8 @@ import { Platform } from '@ionic/angular';
 ...
 
 constructor(private platform: Platform) {
-  this.platform.keyboardDidShow.subscribe(ev => {
-    const { keyboardHeight } = ev;
+  this.platform.keyboardDidShow.subscribe(event => {
+    const { keyboardHeight } = event;
     // Do something with the keyboard height such as translating an input above the keyboard.
   });
 
@@ -127,8 +127,8 @@ import { Platform } from '@ionic/angular/standalone';
 ...
 
 constructor(private platform: Platform) {
-  this.platform.keyboardDidShow.subscribe(ev => {
-    const { keyboardHeight } = ev;
+  this.platform.keyboardDidShow.subscribe(event => {
+    const { keyboardHeight } = event;
     // Do something with the keyboard height such as translating an input above the keyboard.
   });
 

docs/utilities/gestures.md

@@ -47,7 +47,7 @@ const gesture = createGesture({
   el: elementRef,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 
 ```
@@ -65,7 +65,7 @@ const gesture: Gesture = createGesture({
   el: elementRef,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 ```
 </TabItem>
@@ -86,7 +86,7 @@ constructor(private gestureCtrl: GestureController) {
     el: this.element.nativeElement,
     threshold: 15,
     gestureName: 'my-gesture',
-    onMove: ev => this.onMoveHandler(ev)
+    onMove: event => this.onMoveHandler(event)
   }, true);
   // The `true` above ensures that callbacks run inside NgZone.
 }
@@ -110,7 +110,7 @@ constructor(private gestureCtrl: GestureController) {
     el: this.element.nativeElement,
     threshold: 15,
     gestureName: 'my-gesture',
-    onMove: ev => this.onMoveHandler(ev)
+    onMove: event => this.onMoveHandler(event)
   }, true);
   // The `true` above ensures that callbacks run inside NgZone.
 }
@@ -130,7 +130,7 @@ const gesture: Gesture = createGesture({
   el: elementRef,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 ```
 </TabItem>
@@ -152,7 +152,7 @@ const gesture = createGesture({
   el: elementRef.value,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 
 ```

src/components/global/Playground/index.tsx

@@ -388,15 +388,15 @@ export default function Playground({
   useEffect(() => {
     if (showConsole) {
       if (frameiOS.current) {
-        frameiOS.current.contentWindow.addEventListener('console', (ev: CustomEvent) => {
-          setiOSConsoleItems((oldConsoleItems) => [...oldConsoleItems, ev.detail]);
+        frameiOS.current.contentWindow.addEventListener('console', (event: CustomEvent) => {
+          setiOSConsoleItems((oldConsoleItems) => [...oldConsoleItems, event.detail]);
           consoleBodyRef.current.scrollTo(0, consoleBodyRef.current.scrollHeight);
         });
       }
 
       if (frameMD.current) {
-        frameMD.current.contentWindow.addEventListener('console', (ev: CustomEvent) => {
-          setMDConsoleItems((oldConsoleItems) => [...oldConsoleItems, ev.detail]);
+        frameMD.current.contentWindow.addEventListener('console', (event: CustomEvent) => {
+          setMDConsoleItems((oldConsoleItems) => [...oldConsoleItems, event.detail]);
           consoleBodyRef.current.scrollTo(0, consoleBodyRef.current.scrollHeight);
         });
       }
@@ -425,9 +425,9 @@ export default function Playground({
   useEffect(() => {
     const io = new IntersectionObserver(
       (entries: IntersectionObserverEntry[]) => {
-        const ev = entries[0];
-        setIsInView(ev.isIntersecting);
-        if (!ev.isIntersecting) return;
+        const event = entries[0];
+        setIsInView(event.isIntersecting);
+        if (!event.isIntersecting) return;
 
         /**
          * Load the stored mode and/or usage target, if present

src/components/page/theming/ColorGenerator/index.tsx

@@ -60,7 +60,7 @@ const ColorGenerator = (props) => {
                 </div>
                 <div className={styles.titleRowEnd}>
                   <ColorInput
-                    onClick={(ev) => ev.stopPropagation()}
+                    onClick={(event) => event.stopPropagation()}
                     color={formattedValue}
                     setColor={(color) =>
                       setColors((colors) => {

src/components/page/theming/LayeredColorsSelect/index.tsx

@@ -72,7 +72,7 @@ export default function LayeredColorsSelect({ ...props }) {
       <div className={styles.selectRow}>
         <ColorDot color={`var(--ion-color-${color})`} />
         <InputWrapper>
-          <select value={color} onChange={(ev) => setColor((ev.target as HTMLSelectElement).value)}>
+          <select value={color} onChange={(event) => setColor((event.target as HTMLSelectElement).value)}>
             <option value="primary">Primary</option>
             <option value="secondary">Secondary</option>
             <option value="tertiary">Tertiary</option>

static/demos/api/popover/index.html

@@ -45,10 +45,10 @@
         buttons[i].addEventListener('click', handleButtonClick);
       }
 
-      async function handleButtonClick(ev) {
+      async function handleButtonClick(event) {
         popover = await popoverController.create({
           component: 'popover-example-page',
-          event: ev,
+          event: event,
           translucent: true,
         });
         currentPopover = popover;

static/usage/v7/accordion/listen-changes/angular/example_component_ts.md

@@ -11,12 +11,12 @@ import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angul
 export class ExampleComponent {
   private values: string[] = ['first', 'second', 'third'];
 
-  accordionGroupChange = (ev: CustomEvent) => {
-    const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
-    const selectedValue = ev.detail.value;
+  accordionGroupChange = (event: CustomEvent) => {
+    const collapsedItems = this.values.filter((value) => value !== event.detail.value);
+    const selectedValue = event.detail.value;
 
     console.log(
-      `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+      `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
     );
   };
 }

static/usage/v7/accordion/listen-changes/demo.html

@@ -42,12 +42,12 @@
       const accordionGroup = document.querySelector('ion-accordion-group');
       const values = ['first', 'second', 'third'];
 
-      accordionGroup.addEventListener('ionChange', (ev) => {
-        const collapsedItems = values.filter((value) => value !== ev.detail.value);
-        const selectedValue = ev.detail.value;
+      accordionGroup.addEventListener('ionChange', (event) => {
+        const collapsedItems = values.filter((value) => value !== event.detail.value);
+        const selectedValue = event.detail.value;
 
         console.log(
-          `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
+          `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(
             ', '
           )}`
         );

static/usage/v7/accordion/listen-changes/javascript.md

@@ -24,12 +24,12 @@
   const accordionGroup = document.querySelector('ion-accordion-group');
   const values = ['first', 'second', 'third'];
 
-  accordionGroup.addEventListener('ionChange', (ev) => {
-    const collapsedItems = values.filter((value) => value !== ev.detail.value);
-    const selectedValue = ev.detail.value;
+  accordionGroup.addEventListener('ionChange', (event) => {
+    const collapsedItems = values.filter((value) => value !== event.detail.value);
+    const selectedValue = event.detail.value;
 
     console.log(
-      `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+      `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
     );
   });
 </script>

static/usage/v7/accordion/listen-changes/react.md

@@ -3,12 +3,12 @@ import React from 'react';
 import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react';
 function Example() {
   const values = ['first', 'second', 'third'];
-  const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
-    const collapsedItems = values.filter((value) => value !== ev.detail.value);
-    const selectedValue = ev.detail.value;
+  const accordionGroupChange = (event: AccordionGroupCustomEvent) => {
+    const collapsedItems = values.filter((value) => value !== event.detail.value);
+    const selectedValue = event.detail.value;
 
     console.log(
-      `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+      `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
     );
   };
 

static/usage/v7/accordion/listen-changes/vue.md

@@ -35,12 +35,12 @@
     },
     setup() {
       const values = ['first', 'second', 'third'];
-      const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
-        const collapsedItems = values.filter((value) => value !== ev.detail.value);
-        const selectedValue = ev.detail.value;
+      const accordionGroupChange = (event: AccordionGroupCustomEvent) => {
+        const collapsedItems = values.filter((value) => value !== event.detail.value);
+        const selectedValue = event.detail.value;
 
         console.log(
-          `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
+          `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(
             ', '
           )}`
         );

static/usage/v7/action-sheet/inline/isOpen/demo.html

@@ -45,7 +45,7 @@
         },
       ];
 
-      actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+      actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
         actionSheet.isOpen = false;
       });
     </script>

static/usage/v7/action-sheet/inline/isOpen/javascript.md

@@ -28,7 +28,7 @@
     },
   ];
 
-  actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+  actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
     actionSheet.isOpen = false;
   });
 </script>

static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md

@@ -35,7 +35,7 @@ export class ExampleComponent {
 
   constructor() {}
 
-  logResult(event: CustomEvent<OverlayEventDetail<string>>) {
+  logResult(event: CustomEvent<OverlayEventDetail>) {
     console.log(JSON.stringify(event.detail, null, 2));
   }
 }

static/usage/v7/action-sheet/role-info-on-dismiss/demo.html

@@ -55,8 +55,8 @@
         },
       ];
 
-      actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
-        console.log(JSON.stringify(ev.detail, null, 2));
+      actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
+        console.log(JSON.stringify(event.detail, null, 2));
       });
     </script>
   </body>

static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md

@@ -44,8 +44,8 @@
     },
   ];
 
-  actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
-    console.log(JSON.stringify(ev.detail, null, 2));
+  actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
+    console.log(JSON.stringify(event.detail, null, 2));
   });
 </script>
 ```

static/usage/v7/action-sheet/role-info-on-dismiss/vue.md

@@ -51,8 +51,8 @@
         },
       ];
 
-      const logResult = (ev: CustomEvent) => {
-        console.log(JSON.stringify(ev.detail, null, 2));
+      const logResult = (event: CustomEvent) => {
+        console.log(JSON.stringify(event.detail, null, 2));
       };
 
       return {