chore(api): internal updates required for stencil 2 upgrade (#21889)

Stencil 2 is removing deprecated APIs, and these are the remaining ones Ionic has been using.

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

@@ -198,7 +198,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     if (this.gesture) {
       this.gesture.destroy();
       this.gesture = undefined;

core/src/components/alert/alert.tsx

@@ -177,7 +177,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     this.buttonsChanged();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     if (this.gesture) {
       this.gesture.destroy();
       this.gesture = undefined;

core/src/components/back-button/back-button.tsx

@@ -40,7 +40,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   /**
    * If `true`, the user cannot interact with the button.
    */
-  @Prop({ reflectToAttr: true }) disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * The icon name to use for the back button.

core/src/components/button/button.tsx

@@ -46,20 +46,20 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   /**
    * If `true`, the user cannot interact with the button.
    */
-  @Prop({ reflectToAttr: true }) disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * Set to `"block"` for a full-width button or to `"full"` for a full-width button
    * without left and right borders.
    */
-  @Prop({ reflectToAttr: true }) expand?: 'full' | 'block';
+  @Prop({ reflect: true }) expand?: 'full' | 'block';
 
   /**
    * Set to `"clear"` for a transparent button, to `"outline"` for a transparent
    * button with a border, or to `"solid"`. The default style is `"solid"` except inside of
    * a toolbar, where the default is `"clear"`.
    */
-  @Prop({ reflectToAttr: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
+  @Prop({ reflect: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
 
   /**
    * When using a router, it specifies the transition direction when navigating to
@@ -96,12 +96,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   /**
    * The button shape.
    */
-  @Prop({ reflectToAttr: true }) shape?: 'round';
+  @Prop({ reflect: true }) shape?: 'round';
 
   /**
    * The button size.
    */
-  @Prop({ reflectToAttr: true }) size?: 'small' | 'default' | 'large';
+  @Prop({ reflect: true }) size?: 'small' | 'default' | 'large';
 
   /**
    * If `true`, activates a button with a heavier font weight.

core/src/components/header/header.tsx

@@ -49,7 +49,7 @@ export class Header implements ComponentInterface {
     await this.checkCollapsibleHeader();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.destroyCollapsibleHeader();
   }
 

core/src/components/menu/menu.tsx

@@ -48,12 +48,12 @@ export class Menu implements ComponentInterface, MenuI {
   /**
    * The content's id the menu should use.
    */
-  @Prop({ reflectToAttr: true }) contentId?: string;
+  @Prop({ reflect: true }) contentId?: string;
 
   /**
    * An id for the menu.
    */
-  @Prop({ reflectToAttr: true }) menuId?: string;
+  @Prop({ reflect: true }) menuId?: string;
 
   /**
    * The display type of the menu.
@@ -96,7 +96,7 @@ export class Menu implements ComponentInterface, MenuI {
   /**
    * Which side of the view the menu should be placed.
    */
-  @Prop({ reflectToAttr: true }) side: Side = 'start';
+  @Prop({ reflect: true }) side: Side = 'start';
 
   @Watch('side')
   protected sideChanged() {

core/src/components/nav/nav.tsx

@@ -120,7 +120,7 @@ export class Nav implements NavOutlet {
     this.swipeGestureChanged();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     for (const view of this.views) {
       lifecycle(view.element!, LIFECYCLE_WILL_UNLOAD);
       view._destroy();

core/src/components/slides/slides.tsx

@@ -13,7 +13,7 @@ import { SwiperInterface, SwiperOptions } from './swiper/swiper-interface';
     ios: 'slides.ios.scss',
     md: 'slides.md.scss'
   },
-  assetsDir: 'swiper',
+  assetsDirs: ['swiper'],
 })
 export class Slides implements ComponentInterface {
 

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

@@ -31,7 +31,7 @@ export class SplitPane implements ComponentInterface {
   /**
    * The content `id` of the split-pane's main content.
    */
-  @Prop({ reflectToAttr: true }) contentId?: string;
+  @Prop({ reflect: true }) contentId?: string;
 
   /**
    * If `true`, the split pane will be hidden.

core/src/components/tab-button/tab-button.tsx

@@ -77,9 +77,14 @@ export class TabButton implements ComponentInterface, AnchorInterface {
    */
   @Event() ionTabButtonClick!: EventEmitter<TabButtonClickEventDetail>;
 
-  @Listen('ionTabBarChanged', { target: 'parent' })
+  @Listen('ionTabBarChanged', { target: 'window' })
   onTabBarChanged(ev: CustomEvent<TabBarChangedEventDetail>) {
-    this.selected = this.tab === ev.detail.tab;
+    const dispatchedFrom = ev.target as HTMLElement;
+    const parent = this.el.parentElement as EventTarget;
+
+    if ((ev.composedPath && ev.composedPath().includes(parent)) || dispatchedFrom && dispatchedFrom.contains(this.el)) {
+      this.selected = this.tab === ev.detail.tab;
+    }
   }
 
   componentWillLoad() {