@capgo/capacitor-transitions 8.0.3 → 8.1.0

package/dist/svelte/index.d.mts

@@ -4,6 +4,8 @@
  */
 /** Direction of the navigation transition */
 type TransitionDirection = 'forward' | 'back' | 'root' | 'none';
+/** Navigation stack action to record independently from the animation direction */
+type NavigationAction = 'forward' | 'back' | 'root' | 'none';
 /** Platform-specific animation styles */
 type TransitionPlatform = 'ios' | 'android' | 'auto';
 /** Whether the edge swipe-back gesture is enabled, disabled, or native-detected */
@@ -20,6 +22,8 @@ interface TransitionConfig {
     easing?: TransitionEasing;
     /** Direction of transition */
     direction?: TransitionDirection;
+    /** Navigation stack action (default: follows direction, except 'none' keeps push behavior for compatibility) */
+    navigationAction?: NavigationAction;
     /** Which elements to animate (default: 'all') */
     targets?: TransitionTarget[];
     /** Custom animation keyframes for entering element */
@@ -186,6 +190,7 @@ declare class TransitionController {
      * Main navigation method
      */
     navigate(enteringEl: HTMLElement, config?: TransitionConfig): Promise<TransitionResult>;
+    private resolveNavigationAction;
     /**
      * Navigate between two known page states
      */
@@ -261,6 +266,10 @@ declare function getController(): TransitionController;
  */
 declare function getDirection(): TransitionDirection;
 declare function setDirection(direction: TransitionDirection): void;
+/**
+ * Set the navigation action and animation direction for the next router navigation.
+ */
+declare function setNavigation(action: NavigationAction, direction?: TransitionDirection): void;
 /**
  * Helper for Svelte actions - use on cap-router-outlet
  */
@@ -295,4 +304,4 @@ declare function navigateWithTransition(navigate: (to: string) => void, to: stri
  */
 declare function createTransitionNavigate(navigate: (to: string) => void): (to: string, direction?: TransitionDirection) => void;
 
-export { type NavigationEvent, type SwipeGestureOption, TransitionController, type TransitionDirection, type TransitionGlobalConfig, createTransitionNavigate, getController, getDirection, initTransitions, navigateWithTransition, page, routerOutlet, setDirection };
+export { type NavigationAction, type NavigationEvent, type SwipeGestureOption, TransitionController, type TransitionDirection, type TransitionGlobalConfig, createTransitionNavigate, getController, getDirection, initTransitions, navigateWithTransition, page, routerOutlet, setDirection, setNavigation };

package/dist/svelte/index.d.ts

@@ -4,6 +4,8 @@
  */
 /** Direction of the navigation transition */
 type TransitionDirection = 'forward' | 'back' | 'root' | 'none';
+/** Navigation stack action to record independently from the animation direction */
+type NavigationAction = 'forward' | 'back' | 'root' | 'none';
 /** Platform-specific animation styles */
 type TransitionPlatform = 'ios' | 'android' | 'auto';
 /** Whether the edge swipe-back gesture is enabled, disabled, or native-detected */
@@ -20,6 +22,8 @@ interface TransitionConfig {
     easing?: TransitionEasing;
     /** Direction of transition */
     direction?: TransitionDirection;
+    /** Navigation stack action (default: follows direction, except 'none' keeps push behavior for compatibility) */
+    navigationAction?: NavigationAction;
     /** Which elements to animate (default: 'all') */
     targets?: TransitionTarget[];
     /** Custom animation keyframes for entering element */
@@ -186,6 +190,7 @@ declare class TransitionController {
      * Main navigation method
      */
     navigate(enteringEl: HTMLElement, config?: TransitionConfig): Promise<TransitionResult>;
+    private resolveNavigationAction;
     /**
      * Navigate between two known page states
      */
@@ -261,6 +266,10 @@ declare function getController(): TransitionController;
  */
 declare function getDirection(): TransitionDirection;
 declare function setDirection(direction: TransitionDirection): void;
+/**
+ * Set the navigation action and animation direction for the next router navigation.
+ */
+declare function setNavigation(action: NavigationAction, direction?: TransitionDirection): void;
 /**
  * Helper for Svelte actions - use on cap-router-outlet
  */
@@ -295,4 +304,4 @@ declare function navigateWithTransition(navigate: (to: string) => void, to: stri
  */
 declare function createTransitionNavigate(navigate: (to: string) => void): (to: string, direction?: TransitionDirection) => void;
 
-export { type NavigationEvent, type SwipeGestureOption, TransitionController, type TransitionDirection, type TransitionGlobalConfig, createTransitionNavigate, getController, getDirection, initTransitions, navigateWithTransition, page, routerOutlet, setDirection };
+export { type NavigationAction, type NavigationEvent, type SwipeGestureOption, TransitionController, type TransitionDirection, type TransitionGlobalConfig, createTransitionNavigate, getController, getDirection, initTransitions, navigateWithTransition, page, routerOutlet, setDirection, setNavigation };

package/dist/svelte/index.js

@@ -28,10 +28,26 @@ __export(index_exports, {
   navigateWithTransition: () => navigateWithTransition,
   page: () => page,
   routerOutlet: () => routerOutlet,
-  setDirection: () => setDirection
+  setDirection: () => setDirection,
+  setNavigation: () => setNavigation
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/core/navigation.ts
+function getDefaultNavigationDirection(action) {
+  return action;
+}
+function setOutletDirectionIntent(outlet, direction) {
+  const element = outlet;
+  element.dataset.direction = direction;
+  delete element.dataset.navigationAction;
+}
+function setOutletNavigationIntent(outlet, action, direction = getDefaultNavigationDirection(action)) {
+  const element = outlet;
+  element.dataset.navigationAction = action;
+  element.dataset.direction = direction;
+}
+
 // src/core/animations.ts
 var IOS_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
 var ANDROID_EASING = "cubic-bezier(0.36, 0.66, 0.04, 1)";
@@ -906,19 +922,24 @@ var TransitionController = class {
    * Replace all pages with a new root
    */
   async setRoot(enteringEl, config = {}) {
-    return this.navigate(enteringEl, { ...config, direction: "root" });
+    return this.navigate(enteringEl, {
+      ...config,
+      direction: config.direction ?? "root",
+      navigationAction: "root"
+    });
   }
   /**
    * Main navigation method
    */
   async navigate(enteringEl, config = {}) {
     const direction = config.direction || "forward";
+    const navigationAction = this.resolveNavigationAction(direction, config.navigationAction);
     const enteringState = this.createPageState(enteringEl);
     const leavingState = this.currentPage;
     return this.navigateWithStates(enteringState, leavingState, config, () => {
-      if (direction === "root") {
+      if (navigationAction === "root") {
         this.pageStack = [enteringState];
-      } else if (direction === "back" && this.pageStack.length > 0) {
+      } else if (navigationAction === "back" && this.pageStack.length > 0) {
         this.pageStack.pop();
         const staleEnteringState = this.pageStack.pop();
         if (staleEnteringState && staleEnteringState.element !== enteringState.element) {
@@ -926,11 +947,27 @@ var TransitionController = class {
           this.lifecycleCallbacks.delete(staleEnteringState.id);
         }
         this.pageStack.push(enteringState);
+      } else if (navigationAction === "none" && this.pageStack.length > 0) {
+        const staleState = this.pageStack.pop();
+        if (staleState && staleState.element !== enteringState.element) {
+          staleState.element.remove();
+          this.lifecycleCallbacks.delete(staleState.id);
+        }
+        this.pageStack.push(enteringState);
       } else {
         this.pageStack.push(enteringState);
       }
     });
   }
+  resolveNavigationAction(direction, navigationAction) {
+    if (navigationAction) {
+      return navigationAction;
+    }
+    if (direction === "root" || direction === "back") {
+      return direction;
+    }
+    return "forward";
+  }
   /**
    * Navigate between two known page states
    */
@@ -1406,20 +1443,29 @@ var CapRouterOutlet = class extends HTMLElement {
    */
   async handleNewPage(page2) {
     const outletDirection = this.dataset.direction;
+    const outletNavigationAction = this.dataset.navigationAction;
     const explicitDirection = page2.dataset.direction || outletDirection;
+    const explicitNavigationAction = page2.dataset.navigationAction || outletNavigationAction;
     const direction = this.resolveNavigationDirection(explicitDirection);
     if (outletDirection) {
       delete this.dataset.direction;
     }
+    if (outletNavigationAction) {
+      delete this.dataset.navigationAction;
+    }
     const skipTransition = this.skipNextHistoryBackTransition && direction === "back";
     this.skipNextHistoryBackTransition = false;
     const hadPageBefore = this.controller.stack.length > 0;
     this.stylePageForTransition(page2);
     this.pendingPage = page2;
     try {
-      const result = await this.controller.navigate(page2, { direction, duration: skipTransition ? 0 : void 0 });
+      const result = await this.controller.navigate(page2, {
+        direction,
+        navigationAction: explicitNavigationAction,
+        duration: skipTransition ? 0 : void 0
+      });
       if (result.success) {
-        this.recordCompletedNavigation(direction, { hadPageBefore });
+        this.recordCompletedNavigation(explicitNavigationAction ?? direction, { hadPageBefore });
       }
     } finally {
       this.pendingPage = null;
@@ -1548,6 +1594,12 @@ var CapRouterOutlet = class extends HTMLElement {
       this.updateSwipeGestureListeners();
     }
   }
+  /**
+   * Set the navigation stack action and animation direction for the next router-driven navigation.
+   */
+  setNavigation(action, direction = getDefaultNavigationDirection(action)) {
+    setOutletNavigationIntent(this, action, direction);
+  }
   /**
    * Get the transition controller for advanced usage
    */
@@ -1946,7 +1998,7 @@ var CapRouterOutlet = class extends HTMLElement {
     }
     if (shouldUseHistory) {
       this.skipNextHistoryBackTransition = true;
-      this.dataset.direction = "back";
+      setOutletDirectionIntent(this, "back");
       window.history.back();
       return;
     }
@@ -2382,7 +2434,15 @@ function setDirection(direction) {
   globalDirection = direction;
   if (typeof document !== "undefined") {
     for (const outlet of document.querySelectorAll("cap-router-outlet")) {
-      outlet.dataset.direction = direction;
+      setOutletDirectionIntent(outlet, direction);
+    }
+  }
+}
+function setNavigation(action, direction = getDefaultNavigationDirection(action)) {
+  globalDirection = direction;
+  if (typeof document !== "undefined") {
+    for (const outlet of document.querySelectorAll("cap-router-outlet")) {
+      setOutletNavigationIntent(outlet, action, direction);
     }
   }
 }
@@ -2462,6 +2522,7 @@ function createTransitionNavigate(navigate) {
   navigateWithTransition,
   page,
   routerOutlet,
-  setDirection
+  setDirection,
+  setNavigation
 });
 //# sourceMappingURL=index.js.map