@ionic/core 7.3.4-dev.11699991837.1bc64f72 → 7.3.4-dev.11700516018.128deb56

package/components/index2.js

@@ -1,231 +1,457 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { writeTask, Build } from '@stencil/core/internal/client';
-import { r as raf } from './helpers.js';
+import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
+export { G as GESTURE_CONTROLLER } from './gesture-controller.js';
 
-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');
+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';
   }
   else {
-    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');
-  }
-};
-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');
+    add = 'addEventListener';
+    remove = 'removeEventListener';
   }
+  el[add](eventName, callback, listenerOpts);
+  return () => {
+    el[remove](eventName, callback, listenerOpts);
+  };
 };
-const getAnimationBuilder = async (opts) => {
-  if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
-    return undefined;
-  }
-  if (opts.animationBuilder) {
-    return opts.animationBuilder;
+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 getAnimation = opts.mode === 'ios'
-    ? (await iosTransitionAnimation()).iosTransitionAnimation
-    : (await mdTransitionAnimation()).mdTransitionAnimation;
-  return getAnimation;
+  return !!_sPassive;
 };
-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 {
-    hasCompleted: didComplete,
-    animation: trans,
+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 noAnimation = async (opts) => {
-  const enteringEl = opts.enteringEl;
-  const leavingEl = opts.leavingEl;
-  await waitForReady(opts, false);
-  fireWillEvents(enteringEl, leavingEl);
-  fireDidEvents(enteringEl, leavingEl);
   return {
-    hasCompleted: true,
+    enable,
+    stop,
+    destroy,
   };
 };
-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 getDocument = (node) => {
+  return node instanceof Document ? node : node.ownerDocument;
 };
-const notifyViewReady = async (viewIsReady, enteringEl) => {
-  if (viewIsReady) {
-    await viewIsReady(enteringEl);
-  }
+
+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;
+  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;
+    },
+  };
 };
-const playTransition = (trans, opts) => {
-  const progressCallback = opts.progressCallback;
-  const promise = new Promise((resolve) => {
-    trans.onFinish((currentStep) => resolve(currentStep === 1));
+
+// 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,
   });
-  // 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;
+  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);
       }
-      /**
-       * 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;
     }
-    await Promise.all(Array.from(element.children).map(deepReady));
-  }
+    // 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);
+      }
+      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();
+    },
+  };
 };
-const setPageHidden = (el, hidden) => {
-  if (hidden) {
-    el.setAttribute('aria-hidden', 'true');
-    el.classList.add('ion-page-hidden');
+const calcGestureData = (detail, ev) => {
+  if (!ev) {
+    return;
   }
-  else {
-    el.hidden = false;
-    el.removeAttribute('aria-hidden');
-    el.classList.remove('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;
   }
+  detail.deltaX = currentX - detail.startX;
+  detail.deltaY = currentY - detail.startY;
+  detail.event = ev;
 };
-const setZIndex = (enteringEl, leavingEl, direction) => {
-  if (enteringEl !== undefined) {
-    enteringEl.style.zIndex = direction === 'back' ? '99' : '101';
-  }
-  if (leavingEl !== undefined) {
-    leavingEl.style.zIndex = '100';
+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;
+    }
   }
+  detail.currentX = x;
+  detail.currentY = y;
 };
-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;
+const now = (ev) => {
+  return ev.timeStamp || Date.now();
 };
 
-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 };
+export { createGesture };