@capgo/capacitor-transitions 8.0.3 → 8.1.0

package/dist/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';
 /** Runtime platform reported by Capacitor when available */
@@ -22,6 +24,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 */
@@ -234,6 +238,7 @@ declare class TransitionController {
      * Main navigation method
      */
     navigate(enteringEl: HTMLElement, config?: TransitionConfig): Promise<TransitionResult>;
+    private resolveNavigationAction;
     /**
      * Navigate between two known page states
      */
@@ -387,6 +392,10 @@ declare class CapRouterOutlet extends HTMLElement {
      * Enable, disable, or auto-detect edge swipe-back gesture.
      */
     setSwipeGesture(value: SwipeGestureOption): void;
+    /**
+     * Set the navigation stack action and animation direction for the next router-driven navigation.
+     */
+    setNavigation(action: NavigationAction, direction?: TransitionDirection): void;
     /**
      * Get the transition controller for advanced usage
      */
@@ -747,4 +756,4 @@ declare global {
     }
 }
 
-export { ANDROID_DURATION, ANDROID_EASING, type AnimationBuilder, CapContent, CapFooter, CapHeader, CapPage, CapRouterOutlet, IOS_DURATION, IOS_EASING, type NativePlatform, type NativePlatformInfo, type NavigationEvent, type PageOptions, type PageState, type ResolvedPlatform, type RouterOutletOptions, type SwipeGestureOption, type TransitionAnimationOptions, type TransitionConfig, TransitionController, type TransitionDirection, type TransitionEasing, type TransitionGlobalConfig, type TransitionLifecycle, type TransitionPlatform, type TransitionResult, type TransitionTarget, VIEW_TRANSITIONS_CSS, cancelAnimations, clearViewTransitionName, createAndroidTransition, createFooterTransition, createHeaderTransition, createIOSTransition, createNoneTransition, createTransition, createTransitionController, detectNativePlatform, detectPlatform, getDefaultDuration, getDefaultEasing, getTransitionController, initCapTransitions, injectViewTransitionsCSS, isNativeSwipeGesturePlatform, resolveEasing, runViewTransition, setViewTransitionName, supportsViewTransitions, waitForAnimations };
+export { ANDROID_DURATION, ANDROID_EASING, type AnimationBuilder, CapContent, CapFooter, CapHeader, CapPage, CapRouterOutlet, IOS_DURATION, IOS_EASING, type NativePlatform, type NativePlatformInfo, type NavigationAction, type NavigationEvent, type PageOptions, type PageState, type ResolvedPlatform, type RouterOutletOptions, type SwipeGestureOption, type TransitionAnimationOptions, type TransitionConfig, TransitionController, type TransitionDirection, type TransitionEasing, type TransitionGlobalConfig, type TransitionLifecycle, type TransitionPlatform, type TransitionResult, type TransitionTarget, VIEW_TRANSITIONS_CSS, cancelAnimations, clearViewTransitionName, createAndroidTransition, createFooterTransition, createHeaderTransition, createIOSTransition, createNoneTransition, createTransition, createTransitionController, detectNativePlatform, detectPlatform, getDefaultDuration, getDefaultEasing, getTransitionController, initCapTransitions, injectViewTransitionsCSS, isNativeSwipeGesturePlatform, resolveEasing, runViewTransition, setViewTransitionName, supportsViewTransitions, waitForAnimations };

package/dist/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';
 /** Runtime platform reported by Capacitor when available */
@@ -22,6 +24,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 */
@@ -234,6 +238,7 @@ declare class TransitionController {
      * Main navigation method
      */
     navigate(enteringEl: HTMLElement, config?: TransitionConfig): Promise<TransitionResult>;
+    private resolveNavigationAction;
     /**
      * Navigate between two known page states
      */
@@ -387,6 +392,10 @@ declare class CapRouterOutlet extends HTMLElement {
      * Enable, disable, or auto-detect edge swipe-back gesture.
      */
     setSwipeGesture(value: SwipeGestureOption): void;
+    /**
+     * Set the navigation stack action and animation direction for the next router-driven navigation.
+     */
+    setNavigation(action: NavigationAction, direction?: TransitionDirection): void;
     /**
      * Get the transition controller for advanced usage
      */
@@ -747,4 +756,4 @@ declare global {
     }
 }
 
-export { ANDROID_DURATION, ANDROID_EASING, type AnimationBuilder, CapContent, CapFooter, CapHeader, CapPage, CapRouterOutlet, IOS_DURATION, IOS_EASING, type NativePlatform, type NativePlatformInfo, type NavigationEvent, type PageOptions, type PageState, type ResolvedPlatform, type RouterOutletOptions, type SwipeGestureOption, type TransitionAnimationOptions, type TransitionConfig, TransitionController, type TransitionDirection, type TransitionEasing, type TransitionGlobalConfig, type TransitionLifecycle, type TransitionPlatform, type TransitionResult, type TransitionTarget, VIEW_TRANSITIONS_CSS, cancelAnimations, clearViewTransitionName, createAndroidTransition, createFooterTransition, createHeaderTransition, createIOSTransition, createNoneTransition, createTransition, createTransitionController, detectNativePlatform, detectPlatform, getDefaultDuration, getDefaultEasing, getTransitionController, initCapTransitions, injectViewTransitionsCSS, isNativeSwipeGesturePlatform, resolveEasing, runViewTransition, setViewTransitionName, supportsViewTransitions, waitForAnimations };
+export { ANDROID_DURATION, ANDROID_EASING, type AnimationBuilder, CapContent, CapFooter, CapHeader, CapPage, CapRouterOutlet, IOS_DURATION, IOS_EASING, type NativePlatform, type NativePlatformInfo, type NavigationAction, type NavigationEvent, type PageOptions, type PageState, type ResolvedPlatform, type RouterOutletOptions, type SwipeGestureOption, type TransitionAnimationOptions, type TransitionConfig, TransitionController, type TransitionDirection, type TransitionEasing, type TransitionGlobalConfig, type TransitionLifecycle, type TransitionPlatform, type TransitionResult, type TransitionTarget, VIEW_TRANSITIONS_CSS, cancelAnimations, clearViewTransitionName, createAndroidTransition, createFooterTransition, createHeaderTransition, createIOSTransition, createNoneTransition, createTransition, createTransitionController, detectNativePlatform, detectPlatform, getDefaultDuration, getDefaultEasing, getTransitionController, initCapTransitions, injectViewTransitionsCSS, isNativeSwipeGesturePlatform, resolveEasing, runViewTransition, setViewTransitionName, supportsViewTransitions, waitForAnimations };

package/dist/index.js

@@ -1019,19 +1019,24 @@ var init_transition_controller = __esm({
        * 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) {
@@ -1039,11 +1044,27 @@ var init_transition_controller = __esm({
               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
        */
@@ -1328,12 +1349,33 @@ var init_transition_controller = __esm({
   }
 });
 
+// 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;
+}
+var init_navigation = __esm({
+  "src/core/navigation.ts"() {
+    "use strict";
+  }
+});
+
 // src/components/cap-router-outlet.ts
 var CapRouterOutlet;
 var init_cap_router_outlet = __esm({
   "src/components/cap-router-outlet.ts"() {
     "use strict";
     init_native_platform();
+    init_navigation();
     init_transition_controller();
     CapRouterOutlet = class extends HTMLElement {
       controller;
@@ -1501,20 +1543,29 @@ var init_cap_router_outlet = __esm({
        */
       async handleNewPage(page) {
         const outletDirection = this.dataset.direction;
+        const outletNavigationAction = this.dataset.navigationAction;
         const explicitDirection = page.dataset.direction || outletDirection;
+        const explicitNavigationAction = page.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(page);
         this.pendingPage = page;
         try {
-          const result = await this.controller.navigate(page, { direction, duration: skipTransition ? 0 : void 0 });
+          const result = await this.controller.navigate(page, {
+            direction,
+            navigationAction: explicitNavigationAction,
+            duration: skipTransition ? 0 : void 0
+          });
           if (result.success) {
-            this.recordCompletedNavigation(direction, { hadPageBefore });
+            this.recordCompletedNavigation(explicitNavigationAction ?? direction, { hadPageBefore });
           }
         } finally {
           this.pendingPage = null;
@@ -1643,6 +1694,12 @@ var init_cap_router_outlet = __esm({
           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
        */
@@ -2041,7 +2098,7 @@ var init_cap_router_outlet = __esm({
         }
         if (shouldUseHistory) {
           this.skipNextHistoryBackTransition = true;
-          this.dataset.direction = "back";
+          setOutletDirectionIntent(this, "back");
           window.history.back();
           return;
         }