refactor(all): remove ionChange in non-inputs (#17101)

fixes #17071

angular/src/directives/navigation/ion-tabs.ts

@@ -61,9 +61,9 @@ export class IonTabs {
 
   @HostListener('ionTabButtonClick', ['$event.detail.tab'])
   select(tab: string) {
-    const selected = this.outlet.getActiveStackId() === tab;
+    const alreadySelected = this.outlet.getActiveStackId() === tab;
     const href = `${this.outlet.tabsPrefix}/${tab}`;
-    const url = selected
+    const url = alreadySelected
       ? href
       : this.outlet.getLastUrl(tab) || href;
 

angular/src/directives/proxies.ts

@@ -491,14 +491,13 @@ proxyInputs(IonMenuToggle, ['menu', 'autoHide']);
 export declare interface IonNav extends StencilComponents<'IonNav'> {}
 @Component({ selector: 'ion-nav', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['swipeGesture', 'animated', 'animation', 'rootParams', 'root'] })
 export class IonNav {
-  ionNavWillLoad!: EventEmitter<CustomEvent>;
   ionNavWillChange!: EventEmitter<CustomEvent>;
   ionNavDidChange!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']);
+    proxyOutputs(this, this.el, ['ionNavWillChange', 'ionNavDidChange']);
   }
 }
 proxyMethods(IonNav, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']);
@@ -812,13 +811,12 @@ proxyInputs(IonSpinner, ['color', 'duration', 'name', 'paused']);
 export declare interface IonSplitPane extends StencilComponents<'IonSplitPane'> {}
 @Component({ selector: 'ion-split-pane', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['contentId', 'disabled', 'when'] })
 export class IonSplitPane {
-  ionChange!: EventEmitter<CustomEvent>;
   ionSplitPaneVisible!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionChange', 'ionSplitPaneVisible']);
+    proxyOutputs(this, this.el, ['ionSplitPaneVisible']);
   }
 }
 proxyInputs(IonSplitPane, ['contentId', 'disabled', 'when']);

core/api.txt

@@ -677,9 +677,8 @@ ion-nav,method,push,push<T extends NavComponent>(component: T, componentProps?:
 ion-nav,method,removeIndex,removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,method,setPages,setPages(views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,method,setRoot,setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,event,ionNavDidChange,void,true
-ion-nav,event,ionNavWillChange,void,true
-ion-nav,event,ionNavWillLoad,void,true
+ion-nav,event,ionNavDidChange,void,false
+ion-nav,event,ionNavWillChange,void,false
 
 ion-note,shadow
 ion-note,prop,color,string | undefined,undefined,false,false
@@ -1027,8 +1026,7 @@ ion-split-pane,none
 ion-split-pane,prop,contentId,string | undefined,undefined,false,false
 ion-split-pane,prop,disabled,boolean,false,false,false
 ion-split-pane,prop,when,boolean | string,QUERY['lg'],false,false
-ion-split-pane,event,ionChange,{visible: boolean},false
-ion-split-pane,event,ionSplitPaneVisible,void,true
+ion-split-pane,event,ionSplitPaneVisible,{visible: boolean},true
 ion-split-pane,css-prop,--border
 
 ion-tab-bar,shadow
@@ -1066,10 +1064,8 @@ ion-tabs,shadow
 ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
 ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
 ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>
-ion-tabs,event,ionChange,{tab: HTMLIonTabElement},true
-ion-tabs,event,ionNavDidChange,void,true
-ion-tabs,event,ionNavWillChange,void,true
-ion-tabs,event,ionNavWillLoad,void,true
+ion-tabs,event,ionTabsDidChange,{tab: string},false
+ion-tabs,event,ionTabsWillChange,{tab: string},false
 
 ion-text,shadow
 ion-text,prop,color,string | undefined,undefined,false,false

core/src/components.d.ts

@@ -2768,10 +2768,6 @@ export namespace Components {
     */
     'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
     /**
-    * Event fired when Nav will load a component
-    */
-    'onIonNavWillLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Root NavComponent to load
     */
     'root'?: NavComponent;
@@ -4322,13 +4318,9 @@ export namespace Components {
     */
     'disabled'?: boolean;
     /**
-    * Emitted when the split pane is visible.
-    */
-    'onIonChange'?: (event: CustomEvent<{visible: boolean}>) => void;
-    /**
     * Expression to be called when the split-pane visibility has changed
     */
-    'onIonSplitPaneVisible'?: (event: CustomEvent) => void;
+    'onIonSplitPaneVisible'?: (event: CustomEvent<{visible: boolean}>) => void;
     /**
     * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
     */
@@ -4470,22 +4462,14 @@ export namespace Components {
     'useRouter': boolean;
   }
   interface IonTabsAttributes extends StencilHTMLAttributes {
-    /**
-    * Emitted when the tab changes.
-    */
-    'onIonChange'?: (event: CustomEvent<{tab: HTMLIonTabElement}>) => void;
     /**
     * Emitted when the navigation has finished transitioning to a new component.
     */
-    'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
+    'onIonTabsDidChange'?: (event: CustomEvent<{tab: string}>) => void;
     /**
     * Emitted when the navigation is about to transition to a new component.
     */
-    'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
-    /**
-    * Emitted when the navigation will load a component.
-    */
-    'onIonNavWillLoad'?: (event: CustomEvent<void>) => void;
+    'onIonTabsWillChange'?: (event: CustomEvent<{tab: string}>) => void;
   }
 
   interface IonText {

core/src/components/content/content.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core';
 
 import { Color, Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface';
 import { isPlatform } from '../../utils/platform';
@@ -102,11 +102,6 @@ export class Content implements ComponentInterface {
    */
   @Event() ionScrollEnd!: EventEmitter<ScrollBaseDetail>;
 
-  @Listen('body:ionNavDidChange')
-  onNavChanged() {
-    this.resize();
-  }
-
   componentWillLoad() {
     if (this.forceOverscroll === undefined) {
       this.forceOverscroll = this.mode === 'ios' && isPlatform(this.win, 'mobile');

core/src/components/nav/nav.tsx

@@ -81,16 +81,17 @@ export class Nav implements NavOutlet {
 
   /**
    * Event fired when Nav will load a component
+   * @internal
    */
   @Event() ionNavWillLoad!: EventEmitter<void>;
   /**
    * Event fired when the nav will components
    */
-  @Event() ionNavWillChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionNavWillChange!: EventEmitter<void>;
   /**
    * Event fired when the nav has changed components
    */
-  @Event() ionNavDidChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionNavDidChange!: EventEmitter<void>;
 
   componentWillLoad() {
     this.useRouter =

core/src/components/nav/readme.md

@@ -24,7 +24,6 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we
 | ------------------ | ----------------------------------------------- | ------------------- |
 | `ionNavDidChange`  | Event fired when the nav has changed components | `CustomEvent<void>` |
 | `ionNavWillChange` | Event fired when the nav will components        | `CustomEvent<void>` |
-| `ionNavWillLoad`   | Event fired when Nav will load a component      | `CustomEvent<void>` |
 
 
 ## Methods

core/src/components/router-outlet/route-outlet.tsx

@@ -53,10 +53,10 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
   @Event() ionNavWillLoad!: EventEmitter<void>;
 
   /** @internal */
-  @Event() ionNavWillChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionNavWillChange!: EventEmitter<void>;
 
   /** @internal */
-  @Event() ionNavDidChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionNavDidChange!: EventEmitter<void>;
 
   componentWillLoad() {
     this.ionNavWillLoad.emit();

core/src/components/split-pane/readme.md

@@ -96,8 +96,7 @@ SplitPane also provides some predefined media queries that can be used.
 
 | Event                 | Description                                                        | Type                              |
 | --------------------- | ------------------------------------------------------------------ | --------------------------------- |
-| `ionChange`           | Emitted when the split pane is visible.                            | `CustomEvent<{visible: boolean}>` |
-| `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed | `CustomEvent<void>`               |
+| `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed | `CustomEvent<{visible: boolean}>` |
 
 
 ## CSS Custom Properties

core/src/components/split-pane/split-pane.tsx

@@ -60,20 +60,14 @@ export class SplitPane implements ComponentInterface {
    */
   @Prop() when: string | boolean = QUERY['lg'];
 
-  /**
-   * Emitted when the split pane is visible.
-   */
-  @Event({ bubbles: false }) ionChange!: EventEmitter<{visible: boolean}>;
-
   /**
    * Expression to be called when the split-pane visibility has changed
    */
-  @Event() ionSplitPaneVisible!: EventEmitter;
+  @Event() ionSplitPaneVisible!: EventEmitter<{visible: boolean}>;
 
   @Watch('visible')
   visibleChanged(visible: boolean) {
     const detail = { visible, isPane: this.isPane.bind(this) };
-    this.ionChange.emit(detail);
     this.ionSplitPaneVisible.emit(detail);
   }
 

core/src/components/tabs/readme.md

@@ -166,12 +166,10 @@ Using tabs with Angular's router is fairly straight forward. Here you only need
 
 ## Events
 
-| Event              | Description                                                                | Type                                    |
-| ------------------ | -------------------------------------------------------------------------- | --------------------------------------- |
-| `ionChange`        | Emitted when the tab changes.                                              | `CustomEvent<{tab: HTMLIonTabElement}>` |
-| `ionNavDidChange`  | Emitted when the navigation has finished transitioning to a new component. | `CustomEvent<void>`                     |
-| `ionNavWillChange` | Emitted when the navigation is about to transition to a new component.     | `CustomEvent<void>`                     |
-| `ionNavWillLoad`   | Emitted when the navigation will load a component.                         | `CustomEvent<void>`                     |
+| Event               | Description                                                                | Type                         |
+| ------------------- | -------------------------------------------------------------------------- | ---------------------------- |
+| `ionTabsDidChange`  | Emitted when the navigation has finished transitioning to a new component. | `CustomEvent<{tab: string}>` |
+| `ionTabsWillChange` | Emitted when the navigation is about to transition to a new component.     | `CustomEvent<{tab: string}>` |
 
 
 ## Methods

core/src/components/tabs/tabs.tsx

@@ -23,25 +23,21 @@ export class Tabs implements NavOutlet {
   /** @internal */
   @Prop({ mutable: true }) useRouter = false;
 
-  /**
-   * Emitted when the tab changes.
-   */
-  @Event() ionChange!: EventEmitter<{tab: HTMLIonTabElement}>;
-
   /**
    * Emitted when the navigation will load a component.
+   * @internal
    */
   @Event() ionNavWillLoad!: EventEmitter<void>;
 
   /**
    * Emitted when the navigation is about to transition to a new component.
    */
-  @Event() ionNavWillChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionTabsWillChange!: EventEmitter<{tab: string}>;
 
   /**
    * Emitted when the navigation has finished transitioning to a new component.
    */
-  @Event() ionNavDidChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionTabsDidChange!: EventEmitter<{tab: string}>;
 
   async componentWillLoad() {
     if (!this.useRouter) {
@@ -162,7 +158,7 @@ export class Tabs implements NavOutlet {
     this.transitioning = true;
     this.leavingTab = this.selectedTab;
     this.selectedTab = selectedTab;
-    this.ionNavWillChange.emit();
+    this.ionTabsWillChange.emit({ tab: selectedTab.tab });
     return selectedTab.setActive();
   }
 
@@ -180,8 +176,7 @@ export class Tabs implements NavOutlet {
       if (leavingTab) {
         leavingTab.active = false;
       }
-      this.ionChange.emit({ tab: selectedTab });
-      this.ionNavDidChange.emit();
+      this.ionTabsDidChange.emit({ tab: selectedTab.tab });
     }
   }