@ionic/core 7.3.5-dev.11694621267.1e5f63c2 → 7.4.0

package/components/index2.js

@@ -1,457 +1,231 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
-export { G as GESTURE_CONTROLLER } from './gesture-controller.js';
+import { writeTask, Build } from '@stencil/core/internal/client';
+import { r as raf } from './helpers.js';
 
-const addEventListener = (el, // TODO(FW-2832): type
-eventName, callback, opts) => {
-  // use event listener options when supported
-  // otherwise it's just a boolean for the "capture" arg
-  const listenerOpts = supportsPassive(el)
-    ? {
-      capture: !!opts.capture,
-      passive: !!opts.passive,
-    }
-    : !!opts.capture;
-  let add;
-  let remove;
-  if (el['__zone_symbol__addEventListener']) {
-    add = '__zone_symbol__addEventListener';
-    remove = '__zone_symbol__removeEventListener';
+const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
+const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
+const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
+const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
+const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
+
+const iosTransitionAnimation = () => import('./ios.transition.js');
+const mdTransitionAnimation = () => import('./md.transition.js');
+// TODO(FW-2832): types
+const transition = (opts) => {
+  return new Promise((resolve, reject) => {
+    writeTask(() => {
+      beforeTransition(opts);
+      runTransition(opts).then((result) => {
+        if (result.animation) {
+          result.animation.destroy();
+        }
+        afterTransition(opts);
+        resolve(result);
+      }, (error) => {
+        afterTransition(opts);
+        reject(error);
+      });
+    });
+  });
+};
+const beforeTransition = (opts) => {
+  const enteringEl = opts.enteringEl;
+  const leavingEl = opts.leavingEl;
+  setZIndex(enteringEl, leavingEl, opts.direction);
+  if (opts.showGoBack) {
+    enteringEl.classList.add('can-go-back');
   }
   else {
-    add = 'addEventListener';
-    remove = 'removeEventListener';
+    enteringEl.classList.remove('can-go-back');
+  }
+  setPageHidden(enteringEl, false);
+  /**
+   * When transitioning, the page should not
+   * respond to click events. This resolves small
+   * issues like users double tapping the ion-back-button.
+   * These pointer events are removed in `afterTransition`.
+   */
+  enteringEl.style.setProperty('pointer-events', 'none');
+  if (leavingEl) {
+    setPageHidden(leavingEl, false);
+    leavingEl.style.setProperty('pointer-events', 'none');
   }
-  el[add](eventName, callback, listenerOpts);
-  return () => {
-    el[remove](eventName, callback, listenerOpts);
-  };
 };
-const supportsPassive = (node) => {
-  if (_sPassive === undefined) {
-    try {
-      const opts = Object.defineProperty({}, 'passive', {
-        get: () => {
-          _sPassive = true;
-        },
-      });
-      node.addEventListener('optsTest', () => {
-        return;
-      }, opts);
-    }
-    catch (e) {
-      _sPassive = false;
-    }
+const runTransition = async (opts) => {
+  const animationBuilder = await getAnimationBuilder(opts);
+  const ani = animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation
+  return ani;
+};
+const afterTransition = (opts) => {
+  const enteringEl = opts.enteringEl;
+  const leavingEl = opts.leavingEl;
+  enteringEl.classList.remove('ion-page-invisible');
+  enteringEl.style.removeProperty('pointer-events');
+  if (leavingEl !== undefined) {
+    leavingEl.classList.remove('ion-page-invisible');
+    leavingEl.style.removeProperty('pointer-events');
   }
-  return !!_sPassive;
 };
-let _sPassive;
-
-const MOUSE_WAIT = 2000;
-// TODO(FW-2832): types
-const createPointerEvents = (el, pointerDown, pointerMove, pointerUp, options) => {
-  let rmTouchStart;
-  let rmTouchMove;
-  let rmTouchEnd;
-  let rmTouchCancel;
-  let rmMouseStart;
-  let rmMouseMove;
-  let rmMouseUp;
-  let lastTouchEvent = 0;
-  const handleTouchStart = (ev) => {
-    lastTouchEvent = Date.now() + MOUSE_WAIT;
-    if (!pointerDown(ev)) {
-      return;
-    }
-    if (!rmTouchMove && pointerMove) {
-      rmTouchMove = addEventListener(el, 'touchmove', pointerMove, options);
-    }
-    /**
-     * Events are dispatched on the element that is tapped and bubble up to
-     * the reference element in the gesture. In the event that the element this
-     * event was first dispatched on is removed from the DOM, the event will no
-     * longer bubble up to our reference element. This leaves the gesture in an
-     * unusable state. To account for this, the touchend and touchcancel listeners
-     * should be added to the event target so that they still fire even if the target
-     * is removed from the DOM.
-     */
-    if (!rmTouchEnd) {
-      rmTouchEnd = addEventListener(ev.target, 'touchend', handleTouchEnd, options);
-    }
-    if (!rmTouchCancel) {
-      rmTouchCancel = addEventListener(ev.target, 'touchcancel', handleTouchEnd, options);
-    }
-  };
-  const handleMouseDown = (ev) => {
-    if (lastTouchEvent > Date.now()) {
-      return;
-    }
-    if (!pointerDown(ev)) {
-      return;
-    }
-    if (!rmMouseMove && pointerMove) {
-      rmMouseMove = addEventListener(getDocument(el), 'mousemove', pointerMove, options);
-    }
-    if (!rmMouseUp) {
-      rmMouseUp = addEventListener(getDocument(el), 'mouseup', handleMouseUp, options);
-    }
-  };
-  const handleTouchEnd = (ev) => {
-    stopTouch();
-    if (pointerUp) {
-      pointerUp(ev);
-    }
-  };
-  const handleMouseUp = (ev) => {
-    stopMouse();
-    if (pointerUp) {
-      pointerUp(ev);
-    }
-  };
-  const stopTouch = () => {
-    if (rmTouchMove) {
-      rmTouchMove();
-    }
-    if (rmTouchEnd) {
-      rmTouchEnd();
-    }
-    if (rmTouchCancel) {
-      rmTouchCancel();
-    }
-    rmTouchMove = rmTouchEnd = rmTouchCancel = undefined;
-  };
-  const stopMouse = () => {
-    if (rmMouseMove) {
-      rmMouseMove();
-    }
-    if (rmMouseUp) {
-      rmMouseUp();
-    }
-    rmMouseMove = rmMouseUp = undefined;
-  };
-  const stop = () => {
-    stopTouch();
-    stopMouse();
-  };
-  const enable = (isEnabled = true) => {
-    if (!isEnabled) {
-      if (rmTouchStart) {
-        rmTouchStart();
-      }
-      if (rmMouseStart) {
-        rmMouseStart();
-      }
-      rmTouchStart = rmMouseStart = undefined;
-      stop();
-    }
-    else {
-      if (!rmTouchStart) {
-        rmTouchStart = addEventListener(el, 'touchstart', handleTouchStart, options);
-      }
-      if (!rmMouseStart) {
-        rmMouseStart = addEventListener(el, 'mousedown', handleMouseDown, options);
-      }
-    }
-  };
-  const destroy = () => {
-    enable(false);
-    pointerUp = pointerMove = pointerDown = undefined;
-  };
+const getAnimationBuilder = async (opts) => {
+  if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
+    return undefined;
+  }
+  if (opts.animationBuilder) {
+    return opts.animationBuilder;
+  }
+  const getAnimation = opts.mode === 'ios'
+    ? (await iosTransitionAnimation()).iosTransitionAnimation
+    : (await mdTransitionAnimation()).mdTransitionAnimation;
+  return getAnimation;
+};
+const animation = async (animationBuilder, opts) => {
+  await waitForReady(opts, true);
+  const trans = animationBuilder(opts.baseEl, opts);
+  fireWillEvents(opts.enteringEl, opts.leavingEl);
+  const didComplete = await playTransition(trans, opts);
+  if (opts.progressCallback) {
+    opts.progressCallback(undefined);
+  }
+  if (didComplete) {
+    fireDidEvents(opts.enteringEl, opts.leavingEl);
+  }
   return {
-    enable,
-    stop,
-    destroy,
+    hasCompleted: didComplete,
+    animation: trans,
   };
 };
-const getDocument = (node) => {
-  return node instanceof Document ? node : node.ownerDocument;
-};
-
-const createPanRecognizer = (direction, thresh, maxAngle) => {
-  const radians = maxAngle * (Math.PI / 180);
-  const isDirX = direction === 'x';
-  const maxCosine = Math.cos(radians);
-  const threshold = thresh * thresh;
-  let startX = 0;
-  let startY = 0;
-  let dirty = false;
-  let isPan = 0;
+const noAnimation = async (opts) => {
+  const enteringEl = opts.enteringEl;
+  const leavingEl = opts.leavingEl;
+  await waitForReady(opts, false);
+  fireWillEvents(enteringEl, leavingEl);
+  fireDidEvents(enteringEl, leavingEl);
   return {
-    start(x, y) {
-      startX = x;
-      startY = y;
-      isPan = 0;
-      dirty = true;
-    },
-    detect(x, y) {
-      if (!dirty) {
-        return false;
-      }
-      const deltaX = x - startX;
-      const deltaY = y - startY;
-      const distance = deltaX * deltaX + deltaY * deltaY;
-      if (distance < threshold) {
-        return false;
-      }
-      const hypotenuse = Math.sqrt(distance);
-      const cosine = (isDirX ? deltaX : deltaY) / hypotenuse;
-      if (cosine > maxCosine) {
-        isPan = 1;
-      }
-      else if (cosine < -maxCosine) {
-        isPan = -1;
-      }
-      else {
-        isPan = 0;
-      }
-      dirty = false;
-      return true;
-    },
-    isGesture() {
-      return isPan !== 0;
-    },
-    getDirection() {
-      return isPan;
-    },
+    hasCompleted: true,
   };
 };
-
-// TODO(FW-2832): types
-const createGesture = (config) => {
-  let hasCapturedPan = false;
-  let hasStartedPan = false;
-  let hasFiredStart = true;
-  let isMoveQueued = false;
-  const finalConfig = Object.assign({ disableScroll: false, direction: 'x', gesturePriority: 0, passive: true, maxAngle: 40, threshold: 10 }, config);
-  const canStart = finalConfig.canStart;
-  const onWillStart = finalConfig.onWillStart;
-  const onStart = finalConfig.onStart;
-  const onEnd = finalConfig.onEnd;
-  const notCaptured = finalConfig.notCaptured;
-  const onMove = finalConfig.onMove;
-  const threshold = finalConfig.threshold;
-  const passive = finalConfig.passive;
-  const blurOnStart = finalConfig.blurOnStart;
-  const detail = {
-    type: 'pan',
-    startX: 0,
-    startY: 0,
-    startTime: 0,
-    currentX: 0,
-    currentY: 0,
-    velocityX: 0,
-    velocityY: 0,
-    deltaX: 0,
-    deltaY: 0,
-    currentTime: 0,
-    event: undefined,
-    data: undefined,
-  };
-  const pan = createPanRecognizer(finalConfig.direction, finalConfig.threshold, finalConfig.maxAngle);
-  const gesture = GESTURE_CONTROLLER.createGesture({
-    name: config.gestureName,
-    priority: config.gesturePriority,
-    disableScroll: config.disableScroll,
+const waitForReady = async (opts, defaultDeep) => {
+  const deep = opts.deepWait !== undefined ? opts.deepWait : defaultDeep;
+  if (deep) {
+    await Promise.all([deepReady(opts.enteringEl), deepReady(opts.leavingEl)]);
+  }
+  await notifyViewReady(opts.viewIsReady, opts.enteringEl);
+};
+const notifyViewReady = async (viewIsReady, enteringEl) => {
+  if (viewIsReady) {
+    await viewIsReady(enteringEl);
+  }
+};
+const playTransition = (trans, opts) => {
+  const progressCallback = opts.progressCallback;
+  const promise = new Promise((resolve) => {
+    trans.onFinish((currentStep) => resolve(currentStep === 1));
   });
-  const pointerDown = (ev) => {
-    const timeStamp = now(ev);
-    if (hasStartedPan || !hasFiredStart) {
-      return false;
-    }
-    updateDetail(ev, detail);
-    detail.startX = detail.currentX;
-    detail.startY = detail.currentY;
-    detail.startTime = detail.currentTime = timeStamp;
-    detail.velocityX = detail.velocityY = detail.deltaX = detail.deltaY = 0;
-    detail.event = ev;
-    // Check if gesture can start
-    if (canStart && canStart(detail) === false) {
-      return false;
-    }
-    // Release fallback
-    gesture.release();
-    // Start gesture
-    if (!gesture.start()) {
-      return false;
-    }
-    hasStartedPan = true;
-    if (threshold === 0) {
-      return tryToCapturePan();
-    }
-    pan.start(detail.startX, detail.startY);
-    return true;
-  };
-  const pointerMove = (ev) => {
-    // fast path, if gesture is currently captured
-    // do minimum job to get user-land even dispatched
-    if (hasCapturedPan) {
-      if (!isMoveQueued && hasFiredStart) {
-        isMoveQueued = true;
-        calcGestureData(detail, ev);
-        requestAnimationFrame(fireOnMove);
-      }
-      return;
-    }
-    // gesture is currently being detected
-    calcGestureData(detail, ev);
-    if (pan.detect(detail.currentX, detail.currentY)) {
-      if (!pan.isGesture() || !tryToCapturePan()) {
-        abortGesture();
-      }
-    }
-  };
-  const fireOnMove = () => {
-    // Since fireOnMove is called inside a RAF, onEnd() might be called,
-    // we must double check hasCapturedPan
-    if (!hasCapturedPan) {
-      return;
-    }
-    isMoveQueued = false;
-    if (onMove) {
-      onMove(detail);
-    }
-  };
-  const tryToCapturePan = () => {
-    if (!gesture.capture()) {
-      return false;
-    }
-    hasCapturedPan = true;
-    hasFiredStart = false;
-    // reset start position since the real user-land event starts here
-    // If the pan detector threshold is big, not resetting the start position
-    // will cause a jump in the animation equal to the detector threshold.
-    // the array of positions used to calculate the gesture velocity does not
-    // need to be cleaned, more points in the positions array always results in a
-    // more accurate value of the velocity.
-    detail.startX = detail.currentX;
-    detail.startY = detail.currentY;
-    detail.startTime = detail.currentTime;
-    if (onWillStart) {
-      onWillStart(detail).then(fireOnStart);
-    }
-    else {
-      fireOnStart();
-    }
-    return true;
-  };
-  const blurActiveElement = () => {
-    if (typeof document !== 'undefined') {
-      const activeElement = document.activeElement;
-      if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) {
-        activeElement.blur();
-      }
-    }
-  };
-  const fireOnStart = () => {
-    if (blurOnStart) {
-      blurActiveElement();
-    }
-    if (onStart) {
-      onStart(detail);
-    }
-    hasFiredStart = true;
-  };
-  const reset = () => {
-    hasCapturedPan = false;
-    hasStartedPan = false;
-    isMoveQueued = false;
-    hasFiredStart = true;
-    gesture.release();
-  };
-  // END *************************
-  const pointerUp = (ev) => {
-    const tmpHasCaptured = hasCapturedPan;
-    const tmpHasFiredStart = hasFiredStart;
-    reset();
-    if (!tmpHasFiredStart) {
-      return;
-    }
-    calcGestureData(detail, ev);
-    // Try to capture press
-    if (tmpHasCaptured) {
-      if (onEnd) {
-        onEnd(detail);
+  // cool, let's do this, start the transition
+  if (progressCallback) {
+    // this is a swipe to go back, just get the transition progress ready
+    // kick off the swipe animation start
+    trans.progressStart(true);
+    progressCallback(trans);
+  }
+  else {
+    // only the top level transition should actually start "play"
+    // kick it off and let it play through
+    // ******** DOM WRITE ****************
+    trans.play();
+  }
+  // create a callback for when the animation is done
+  return promise;
+};
+const fireWillEvents = (enteringEl, leavingEl) => {
+  lifecycle(leavingEl, LIFECYCLE_WILL_LEAVE);
+  lifecycle(enteringEl, LIFECYCLE_WILL_ENTER);
+};
+const fireDidEvents = (enteringEl, leavingEl) => {
+  lifecycle(enteringEl, LIFECYCLE_DID_ENTER);
+  lifecycle(leavingEl, LIFECYCLE_DID_LEAVE);
+};
+const lifecycle = (el, eventName) => {
+  if (el) {
+    const ev = new CustomEvent(eventName, {
+      bubbles: false,
+      cancelable: false,
+    });
+    el.dispatchEvent(ev);
+  }
+};
+/**
+ * Wait two request animation frame loops.
+ * This allows the framework implementations enough time to mount
+ * the user-defined contents. This is often needed when using inline
+ * modals and popovers that accept user components. For popover,
+ * the contents must be mounted for the popover to be sized correctly.
+ * For modals, the contents must be mounted for iOS to run the
+ * transition correctly.
+ *
+ * On Angular and React, a single raf is enough time, but for Vue
+ * we need to wait two rafs. As a result we are using two rafs for
+ * all frameworks to ensure contents are mounted.
+ */
+const waitForMount = () => {
+  return new Promise((resolve) => raf(() => raf(() => resolve())));
+};
+const deepReady = async (el) => {
+  const element = el;
+  if (element) {
+    if (element.componentOnReady != null) {
+      // eslint-disable-next-line custom-rules/no-component-on-ready-method
+      const stencilEl = await element.componentOnReady();
+      if (stencilEl != null) {
+        return;
       }
+      /**
+       * Custom elements in Stencil will have __registerHost.
+       */
+    }
+    else if (element.__registerHost != null) {
+      /**
+       * Non-lazy loaded custom elements need to wait
+       * one frame for component to be loaded.
+       */
+      const waitForCustomElement = new Promise((resolve) => raf(resolve));
+      await waitForCustomElement;
       return;
     }
-    // Not captured any event
-    if (notCaptured) {
-      notCaptured(detail);
-    }
-  };
-  const pointerEvents = createPointerEvents(finalConfig.el, pointerDown, pointerMove, pointerUp, {
-    capture: false,
-    passive,
-  });
-  const abortGesture = () => {
-    reset();
-    pointerEvents.stop();
-    if (notCaptured) {
-      notCaptured(detail);
-    }
-  };
-  return {
-    enable(enable = true) {
-      if (!enable) {
-        if (hasCapturedPan) {
-          pointerUp(undefined);
-        }
-        reset();
-      }
-      pointerEvents.enable(enable);
-    },
-    destroy() {
-      gesture.destroy();
-      pointerEvents.destroy();
-    },
-  };
+    await Promise.all(Array.from(element.children).map(deepReady));
+  }
 };
-const calcGestureData = (detail, ev) => {
-  if (!ev) {
-    return;
+const setPageHidden = (el, hidden) => {
+  if (hidden) {
+    el.setAttribute('aria-hidden', 'true');
+    el.classList.add('ion-page-hidden');
   }
-  const prevX = detail.currentX;
-  const prevY = detail.currentY;
-  const prevT = detail.currentTime;
-  updateDetail(ev, detail);
-  const currentX = detail.currentX;
-  const currentY = detail.currentY;
-  const timestamp = (detail.currentTime = now(ev));
-  const timeDelta = timestamp - prevT;
-  if (timeDelta > 0 && timeDelta < 100) {
-    const velocityX = (currentX - prevX) / timeDelta;
-    const velocityY = (currentY - prevY) / timeDelta;
-    detail.velocityX = velocityX * 0.7 + detail.velocityX * 0.3;
-    detail.velocityY = velocityY * 0.7 + detail.velocityY * 0.3;
+  else {
+    el.hidden = false;
+    el.removeAttribute('aria-hidden');
+    el.classList.remove('ion-page-hidden');
   }
-  detail.deltaX = currentX - detail.startX;
-  detail.deltaY = currentY - detail.startY;
-  detail.event = ev;
 };
-const updateDetail = (ev, detail) => {
-  // get X coordinates for either a mouse click
-  // or a touch depending on the given event
-  let x = 0;
-  let y = 0;
-  if (ev) {
-    const changedTouches = ev.changedTouches;
-    if (changedTouches && changedTouches.length > 0) {
-      const touch = changedTouches[0];
-      x = touch.clientX;
-      y = touch.clientY;
-    }
-    else if (ev.pageX !== undefined) {
-      x = ev.pageX;
-      y = ev.pageY;
-    }
+const setZIndex = (enteringEl, leavingEl, direction) => {
+  if (enteringEl !== undefined) {
+    enteringEl.style.zIndex = direction === 'back' ? '99' : '101';
+  }
+  if (leavingEl !== undefined) {
+    leavingEl.style.zIndex = '100';
   }
-  detail.currentX = x;
-  detail.currentY = y;
 };
-const now = (ev) => {
-  return ev.timeStamp || Date.now();
+const getIonPageElement = (element) => {
+  if (element.classList.contains('ion-page')) {
+    return element;
+  }
+  const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
+  if (ionPage) {
+    return ionPage;
+  }
+  // idk, return the original element so at least something animates and we don't have a null pointer
+  return element;
 };
 
-export { createGesture };
+export { LIFECYCLE_WILL_ENTER as L, LIFECYCLE_DID_ENTER as a, LIFECYCLE_WILL_LEAVE as b, LIFECYCLE_DID_LEAVE as c, LIFECYCLE_WILL_UNLOAD as d, deepReady as e, getIonPageElement as g, lifecycle as l, setPageHidden as s, transition as t, waitForMount as w };