refactor(): minor updates for next stencil version (#20787)

core/src/utils/menu-controller/animations/overlay.ts

@@ -1,3 +1,4 @@
+import { getIonMode } from '../../../global/ionic-global';
 import { Animation, MenuI } from '../../../interface';
 import { createAnimation } from '../../animation/animation';
 
@@ -30,7 +31,8 @@ export const menuOverlayAnimation = (menu: MenuI): Animation => {
     .addElement(menu.menuInnerEl!)
     .fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
 
-  const isIos = menu.mode === 'ios';
+  const mode = getIonMode(menu);
+  const isIos = mode === 'ios';
   const opacity = isIos ? 0.2 : 0.25;
 
   backdropAnimation

core/src/utils/menu-controller/animations/push.ts

@@ -1,3 +1,4 @@
+import { getIonMode } from '../../../global/ionic-global';
 import { Animation, MenuI } from '../../../interface';
 import { createAnimation } from '../../animation/animation';
 
@@ -12,6 +13,7 @@ export const menuPushAnimation = (menu: MenuI): Animation => {
   let contentOpenedX: string;
   let menuClosedX: string;
 
+  const mode = getIonMode(menu);
   const width = menu.width;
 
   if (menu.isEndSide) {
@@ -35,5 +37,5 @@ export const menuPushAnimation = (menu: MenuI): Animation => {
     .addElement(menu.backdropEl!)
     .fromTo('opacity', 0.01, 0.32);
 
-  return baseAnimation(menu.mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+  return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };

core/src/utils/menu-controller/animations/reveal.ts

@@ -1,3 +1,4 @@
+import { getIonMode } from '../../../global/ionic-global';
 import { Animation, MenuI } from '../../../interface';
 import { createAnimation } from '../../animation/animation';
 
@@ -9,11 +10,11 @@ import { baseAnimation } from './base';
  * The menu itself, which is under the content, does not move.
  */
 export const menuRevealAnimation = (menu: MenuI): Animation => {
+  const mode = getIonMode(menu);
   const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
-
   const contentOpen = createAnimation()
     .addElement(menu.contentEl!) // REVIEW
     .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
 
-  return baseAnimation(menu.mode === 'ios').addAnimation(contentOpen);
+  return baseAnimation(mode === 'ios').addAnimation(contentOpen);
 };

core/src/utils/overlays-interface.ts

@@ -1,7 +1,6 @@
 import { EventEmitter } from '@stencil/core';
-import { HTMLStencilElement } from '@stencil/core/internal';
 
-import { AnimationBuilder, Mode } from '../interface';
+import { AnimationBuilder, HTMLStencilElement } from '../interface';
 
 export interface OverlayEventDetail<T = any> {
   data?: T;
@@ -9,7 +8,6 @@ export interface OverlayEventDetail<T = any> {
 }
 
 export interface OverlayInterface {
-  mode: Mode;
   el: HTMLElement;
   animated: boolean;
   keyboardClose: boolean;

core/src/utils/overlays.ts

@@ -1,4 +1,5 @@
 import { config } from '../global/config';
+import { getIonMode } from '../global/ionic-global';
 import { ActionSheetOptions, AlertOptions, Animation, AnimationBuilder, BackButtonEvent, HTMLIonOverlayElement, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PickerOptions, PopoverOptions, ToastOptions } from '../interface';
 
 import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button';
@@ -128,10 +129,11 @@ export const present = async (
   overlay.presented = true;
   overlay.willPresent.emit();
 
+  const mode = getIonMode(overlay);
   // get the user's animation fn if one was provided
   const animationBuilder = (overlay.enterAnimation)
     ? overlay.enterAnimation
-    : config.get(name, overlay.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
+    : config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
 
   const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
   if (completed) {
@@ -155,10 +157,10 @@ export const dismiss = async (
 
   try {
     overlay.willDismiss.emit({ data, role });
-
+    const mode = getIonMode(overlay);
     const animationBuilder = (overlay.leaveAnimation)
       ? overlay.leaveAnimation
-      : config.get(name, overlay.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
+      : config.get(name, mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
 
     // If dismissed via gesture, no need to play leaving animation again
     if (role !== 'gesture') {

core/src/utils/transition/index.ts

@@ -1,4 +1,4 @@
-import { writeTask } from '@stencil/core';
+import { Build, writeTask } from '@stencil/core';
 
 import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '../../components/nav/constants';
 import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../../interface';
@@ -44,7 +44,7 @@ const beforeTransition = (opts: TransitionOptions) => {
 const runTransition = async (opts: TransitionOptions): Promise<TransitionResult> => {
   const animationBuilder = await getAnimationBuilder(opts);
 
-  const ani = (animationBuilder)
+  const ani = (animationBuilder && Build.isBrowser)
     ? animation(animationBuilder, opts)
     : noAnimation(opts); // fast path for no animation