fix(): update to Stencil One 🎉🎊

core/src/components/menu/menu.tsx

@@ -1,6 +1,7 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
 
-import { Animation, Config, Gesture, GestureDetail, MenuChangeEventDetail, MenuControllerI, MenuI, Mode, Side } from '../../interface';
+import { config, getIonMode } from '../../global/ionic-global';
+import { Animation, Gesture, GestureDetail, MenuChangeEventDetail, MenuControllerI, MenuI, Side } from '../../interface';
 import { GESTURE_CONTROLLER } from '../../utils/gesture';
 import { assert, isEndSide as isEnd } from '../../utils/helpers';
 
@@ -19,7 +20,7 @@ export class Menu implements ComponentInterface, MenuI {
   private gesture?: Gesture;
   private blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
 
-  mode!: Mode;
+  private mode = getIonMode(this);
 
   isAnimating = false;
   width!: number; // TODO
@@ -35,13 +36,7 @@ export class Menu implements ComponentInterface, MenuI {
   @State() isPaneVisible = false;
   @State() isEndSide = false;
 
-  @Prop({ context: 'config' }) config!: Config;
-  @Prop({ context: 'isServer' }) isServer!: boolean;
   @Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl!: HTMLIonMenuControllerElement;
-  @Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
-  @Prop({ context: 'window' }) win!: Window;
-  @Prop({ context: 'queue' }) queue!: QueueApi;
-  @Prop({ context: 'document' }) doc!: Document;
 
   /**
    * The content's id the menu should use.
@@ -54,9 +49,8 @@ export class Menu implements ComponentInterface, MenuI {
   @Prop() menuId?: string;
 
   /**
-   * The animation type of the menu.
+   * The display type of the menu.
    * Available options: `"overlay"`, `"reveal"`, `"push"`.
-   * Custom animations can be registered by the menu controller.
    */
   @Prop({ mutable: true }) type?: string;
 
@@ -99,7 +93,7 @@ export class Menu implements ComponentInterface, MenuI {
 
   @Watch('side')
   protected sideChanged() {
-    this.isEndSide = isEnd(this.win, this.side);
+    this.isEndSide = isEnd(window, this.side);
   }
 
   /**
@@ -144,10 +138,10 @@ export class Menu implements ComponentInterface, MenuI {
 
   async componentWillLoad() {
     if (this.type === undefined) {
-      this.type = this.config.get('menuType', this.mode === 'ios' ? 'reveal' : 'overlay');
+      this.type = config.get('menuType', this.mode === 'ios' ? 'reveal' : 'overlay');
     }
 
-    if (this.isServer) {
+    if (!Build.isBrowser) {
       this.disabled = true;
       return;
     }
@@ -156,7 +150,7 @@ export class Menu implements ComponentInterface, MenuI {
     const el = this.el;
     const parent = el.parentNode as any;
     const content = this.contentId !== undefined
-      ? this.doc.getElementById(this.contentId)
+      ? document.getElementById(this.contentId)
       : parent && parent.querySelector && parent.querySelector('[main]');
 
     if (!content || !content.tagName) {
@@ -176,8 +170,7 @@ export class Menu implements ComponentInterface, MenuI {
     menuCtrl!._register(this);
 
     this.gesture = (await import('../../utils/gesture')).createGesture({
-      el: this.doc,
-      queue: this.queue,
+      el: document,
       gestureName: 'menu-swipe',
       gesturePriority: 30,
       threshold: 10,
@@ -209,15 +202,15 @@ export class Menu implements ComponentInterface, MenuI {
     this.contentEl = this.backdropEl = this.menuInnerEl = undefined;
   }
 
-  @Listen('body:ionSplitPaneVisible')
+  @Listen('ionSplitPaneVisible', { target: 'body' })
   onSplitPaneChanged(ev: CustomEvent) {
     this.isPaneVisible = ev.detail.isPane(this.el);
     this.updateState();
   }
 
-  @Listen('click', { enabled: false, capture: true })
+  @Listen('click', { capture: true })
   onBackdropClick(ev: any) {
-    if (this.lastOnEnd < ev.timeStamp - 100) {
+    if (this._isOpen && this.lastOnEnd < ev.timeStamp - 100) {
       const shouldClose = (ev.composedPath)
         ? !ev.composedPath().includes(this.menuInnerEl)
         : false;
@@ -231,7 +224,7 @@ export class Menu implements ComponentInterface, MenuI {
   }
 
   /**
-   * Get whether or not the menu is open. Returns `true` if the menu is open.
+   * Returns `true` is the menu is open.
    */
   @Method()
   isOpen(): Promise<boolean> {
@@ -239,10 +232,10 @@ export class Menu implements ComponentInterface, MenuI {
   }
 
   /**
-   * Get whether or not the menu is active. Returns `true` if the menu is active.
+   * Returns `true` is the menu is active.
    *
    * A menu is active when it can be opened or closed, meaning it's enabled
-   * and it's not part of an `ion-split-pane`.
+   * and it's not part of a `ion-split-pane`.
    */
   @Method()
   isActive(): Promise<boolean> {
@@ -250,9 +243,8 @@ export class Menu implements ComponentInterface, MenuI {
   }
 
   /**
-   * Open the menu. Returns `false` if the menu is already open or it can't be opened.
-   *
-   * @param animated If `true`, the menu will animate on open.
+   * Opens the menu. If the menu is already open or it can't be opened,
+   * it returns `false`.
    */
   @Method()
   open(animated = true): Promise<boolean> {
@@ -260,9 +252,8 @@ export class Menu implements ComponentInterface, MenuI {
   }
 
   /**
-   * Close the menu. Returns `false` if the menu is already closed or it can't be closed.
-   *
-   * @param animated If `true`, the menu will animate on close.
+   * Closes the menu. If the menu is already closed or it can't be closed,
+   * it returns `false`.
    */
   @Method()
   close(animated = true): Promise<boolean> {
@@ -270,11 +261,8 @@ export class Menu implements ComponentInterface, MenuI {
   }
 
   /**
-   * Toggle the menu open or closed. If the menu is already open, it will try to
-   * close the menu, otherwise it will try to open it. Returns `false` if
-   * the operation can't be completed successfully.
-   *
-   * @param animated If `true`, the menu will animate on open and close.
+   * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
+   * If the operation can't be completed successfully, it returns `false`.
    */
   @Method()
   toggle(animated = true): Promise<boolean> {
@@ -282,11 +270,8 @@ export class Menu implements ComponentInterface, MenuI {
   }
 
   /**
-   * Sets the menu to open or closed.
-   * Returns `false` if the operation can't be completed successfully.
-   *
-   * @param shouldOpen If `true`, the menu should open.
-   * @param animated If `true`, the menu will animate on open and close.
+   * Opens or closes the button.
+   * If the operation can't be completed successfully, it returns `false`.
    */
   @Method()
   setOpen(shouldOpen: boolean, animated = true): Promise<boolean> {
@@ -353,7 +338,7 @@ export class Menu implements ComponentInterface, MenuI {
       return false;
     }
     return checkEdgeSide(
-      this.win,
+      window,
       detail.currentX,
       this.isEndSide,
       this.maxEdgeStart
@@ -461,9 +446,6 @@ export class Menu implements ComponentInterface, MenuI {
       this.blocker.unblock();
     }
 
-    // add/remove backdrop click listeners
-    this.enableListener(this, 'click', isOpen);
-
     if (isOpen) {
       // add css class
       if (this.contentEl) {