ngx-stack 22.0.0

package/fesm2022/ngx-stack.mjs

@@ -0,0 +1,2391 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, DOCUMENT, Injectable, makeEnvironmentProviders, provideEnvironmentInitializer, DestroyRef, signal, computed, output, ViewContainerRef, EnvironmentInjector, ChangeDetectorRef, ElementRef, Directive, input, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, Component, Injector } from '@angular/core';
+import { Router, NavigationStart, NavigationEnd, RouteReuseStrategy, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, NavigationCancel, NavigationError } from '@angular/router';
+import { Location } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+const NGX_STACK_DEFAULTS = {
+    platform: 'auto',
+    direction: 'auto',
+    duration: 420,
+    deepLinks: false,
+    maxDepth: 0,
+    manageFocus: true,
+    guardPolicy: 'block',
+    swipeBack: 'auto',
+    swipeEdgeWidth: 50,
+    swipeThreshold: 0.5,
+    swipeVelocityThreshold: 0.35,
+    systemGesture: 'inset',
+    systemEdgeInset: 16,
+    swipeWithMouse: false,
+    animateRoot: false,
+    respectReducedMotion: true,
+};
+const NGX_STACK_CONFIG = new InjectionToken('ngx-stack.config', {
+    providedIn: 'root',
+    factory: () => NGX_STACK_DEFAULTS,
+});
+
+function detectPlatform(win) {
+    const nav = win.navigator;
+    const ua = nav?.userAgent ?? '';
+    // iPadOS 13+ reports itself as a Mac, so a Mac with a touchscreen is really an iPad.
+    const isIos = /iPad|iPhone|iPod/.test(ua) || (/Macintosh/.test(ua) && (nav?.maxTouchPoints ?? 0) > 1);
+    const isAndroid = /Android/.test(ua);
+    const shell = win;
+    const isCapacitor = !!shell.Capacitor?.isNativePlatform?.();
+    const isCordova = !isCapacitor && shell.cordova !== undefined;
+    const isNative = isCapacitor || isCordova;
+    const isStandalonePwa = nav?.standalone === true ||
+        win.matchMedia?.('(display-mode: standalone)').matches === true;
+    return {
+        kind: isIos ? 'ios' : isAndroid ? 'android' : 'web',
+        isIos,
+        isAndroid,
+        isCapacitor,
+        isCordova,
+        isNative,
+        isStandalonePwa,
+        // Note this keys off `isNative`, not `isCapacitor`. Getting that wrong would make an iOS
+        // Cordova app needlessly concede the first 16px of the screen edge to a gesture its webview
+        // does not have.
+        hasSystemBackGesture: isIos && !isNative,
+    };
+}
+const NGX_STACK_PLATFORM = new InjectionToken('ngx-stack.platform', {
+    providedIn: 'root',
+    factory: () => {
+        const doc = inject(DOCUMENT);
+        const win = doc.defaultView;
+        if (!win) {
+            // SSR / no DOM: nothing animates anyway, so report the dullest possible platform.
+            return {
+                kind: 'web',
+                isIos: false,
+                isAndroid: false,
+                isCapacitor: false,
+                isCordova: false,
+                isNative: false,
+                isStandalonePwa: false,
+                hasSystemBackGesture: false,
+            };
+        }
+        return detectPlatform(win);
+    },
+});
+
+/** Split a URL into path segments, dropping the query and fragment. */
+function segmentsOf(url) {
+    return url.split(/[?#]/, 1)[0].split('/').filter(Boolean);
+}
+/**
+ * Find the route a set of URL segments would land on.
+ *
+ * A deliberately small re-implementation of route matching, because Angular's recogniser is not
+ * public and we need an answer *before* any navigation has happened. It understands static
+ * segments, `:params`, and children — which is what a URL hierarchy is made of.
+ *
+ * What it does not understand is `loadChildren`: the child routes are behind a dynamic import and
+ * simply don't exist yet. Rather than guess, it declines to match into a lazy subtree, so pages in
+ * one won't have a parent derived for them. Say so explicitly with `data: { parent }`.
+ */
+function findRoute(routes, segments) {
+    if (!routes)
+        return null;
+    for (const route of routes) {
+        // A redirect isn't a page, and `**` matches everything — it would happily claim to be the
+        // parent of anything, which is worse than having no parent at all.
+        if (route.redirectTo !== undefined || route.path === '**')
+            continue;
+        const path = (route.path ?? '').split('/').filter(Boolean);
+        if (segments.length < path.length)
+            continue;
+        const consumed = path.every((part, i) => part.startsWith(':') || part === segments[i]);
+        if (!consumed)
+            continue;
+        const rest = segments.slice(path.length);
+        if (rest.length === 0) {
+            if (route.component || route.loadComponent)
+                return route;
+            // A componentless wrapper: the page is its empty-path child.
+            const child = findRoute(route.children, []);
+            if (child)
+                return child;
+            continue;
+        }
+        const child = findRoute(route.children, rest);
+        if (child)
+            return child;
+    }
+    return null;
+}
+/**
+ * Where a page sits, when it's the first thing the app opened.
+ *
+ * Two sources, in order:
+ *
+ * 1. **`data: { parent: '/inbox' }`** on the route. The same declaration the back button uses, so
+ *    you write it once and it drives both. Necessary whenever the URL doesn't tell the truth about
+ *    the hierarchy — flat routes like `/item/42`, or a detail page reachable from two places.
+ *
+ * 2. **The URL's own nesting.** `/inbox/item/12/notes` → `/inbox/item/12` → `/inbox`: drop
+ *    segments until what's left is a real page. Costs nothing to set up and is right most of the
+ *    time, because most apps already nest their URLs the way their screens nest.
+ */
+function deriveParentUrl(routes, url) {
+    const segments = segmentsOf(url);
+    if (segments.length === 0)
+        return null;
+    const declared = findRoute(routes, segments)?.data?.['parent'];
+    if (typeof declared === 'string')
+        return declared;
+    for (let length = segments.length - 1; length > 0; length--) {
+        const candidate = segments.slice(0, length);
+        const route = findRoute(routes, candidate);
+        if (route?.component || route?.loadComponent) {
+            return `/${candidate.join('/')}`;
+        }
+    }
+    return null;
+}
+
+/**
+ * Turns off Angular's own route store/detach machinery, because the stack does that job
+ * instead — and better, for this purpose: Angular's version stores a detached view and
+ * gives it back on request, while the stack keeps every page mounted and on screen, which
+ * is what lets a swipe reveal the page underneath before any navigation has happened.
+ *
+ * The one thing we do care about is `shouldReuseRoute`. Angular's default reuses a route
+ * whose config matches, so `/item/1 → /item/2` would recycle the same component instance.
+ * On a stack those are two different pages, and going back from one to the other has to
+ * work, so a change of params means a new page.
+ */
+class NgxStackRouteReuseStrategy {
+    shouldDetach() {
+        return false;
+    }
+    shouldAttach() {
+        return false;
+    }
+    store() {
+        // no-op
+    }
+    retrieve() {
+        return null;
+    }
+    shouldReuseRoute(future, curr) {
+        if (future.routeConfig !== curr.routeConfig)
+            return false;
+        const futureParams = future.params;
+        const currParams = curr.params;
+        const futureKeys = Object.keys(futureParams);
+        if (futureKeys.length !== Object.keys(currParams).length)
+            return false;
+        return futureKeys.every((key) => futureParams[key] === currParams[key]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackRouteReuseStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackRouteReuseStrategy });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackRouteReuseStrategy, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * A shadow copy of where we are in the browser's history.
+ *
+ * The browser will not tell you what `history.back()` would land on, and with tabs we have to
+ * know. History is one linear thread; tabs are several independent stacks. Drill into Inbox,
+ * switch to Search, drill in there — now the entry behind you is an *Inbox* page, and going
+ * "back" in Search must not take you to it. So we keep our own list and cursor, and whoever is
+ * popping can ask whether plain `history.back()` happens to do the right thing.
+ */
+class NgxStackHistory {
+    router = inject(Router);
+    entries = [];
+    cursor = -1;
+    trigger = 'imperative';
+    replacing = false;
+    constructor() {
+        this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+            if (event instanceof NavigationStart) {
+                this.trigger = event.navigationTrigger ?? 'imperative';
+                this.replacing = this.router.getCurrentNavigation()?.extras.replaceUrl === true;
+                return;
+            }
+            if (event instanceof NavigationEnd) {
+                this.record(event.urlAfterRedirects);
+            }
+        });
+    }
+    /** Where `history.back()` would actually land, or `null` if there's nothing behind us. */
+    previousUrl() {
+        return this.cursor > 0 ? this.entries[this.cursor - 1] : null;
+    }
+    record(url) {
+        if (this.trigger === 'popstate') {
+            // The browser moved the cursor. Work out which way by looking either side of it.
+            if (this.cursor > 0 && this.entries[this.cursor - 1] === url) {
+                this.cursor--;
+                return;
+            }
+            if (this.cursor + 1 < this.entries.length && this.entries[this.cursor + 1] === url) {
+                this.cursor++;
+                return;
+            }
+            // A jump of more than one step, or into history from before the app loaded. We can't map
+            // it, so drop what we think we know rather than answer confidently and wrongly.
+            this.entries = [url];
+            this.cursor = 0;
+            return;
+        }
+        if (this.replacing && this.cursor >= 0) {
+            this.entries[this.cursor] = url;
+            return;
+        }
+        // A fresh navigation discards anything ahead of the cursor, exactly as the browser does.
+        this.entries = this.entries.slice(0, this.cursor + 1);
+        this.entries.push(url);
+        this.cursor = this.entries.length - 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackHistory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackHistory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackHistory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/** Key we tuck the intent under in `NavigationExtras.state`. */
+const NGX_STACK_DIRECTION = '__ngxStackDirection';
+/** Lets a caller force a transition to be instant, e.g. while rebuilding a stack at startup. */
+const NGX_STACK_ANIMATED = '__ngxStackAnimated';
+/**
+ * Navigation with an explicit stack intent.
+ *
+ * You don't have to use this for pushing — plain `router.navigate()` works, and the outlet infers
+ * the direction by checking whether the target URL is already on the stack. It's for the cases
+ * where that inference is wrong, and for going back, which is subtler than it looks.
+ */
+class NgxStackNav {
+    router = inject(Router);
+    location = inject(Location);
+    history = inject(NgxStackHistory);
+    target = null;
+    /** @internal Called by `NgxStackOutlet`. */
+    registerStack(target) {
+        this.target = target;
+    }
+    /** @internal */
+    unregisterStack(target) {
+        if (this.target === target)
+            this.target = null;
+    }
+    /**
+     * Is there anywhere to go back to *within the app*?
+     *
+     * Ask this, not the shell. Capacitor and Cordova both report whether the *webview* can go back,
+     * which is a statement about history — and history is a single linear thread while tabs are
+     * several stacks, so it says yes when the only thing behind you is a different tab.
+     */
+    canGoBack() {
+        return (this.target?.backTarget() ?? null) !== null;
+    }
+    /** Push a page on top, even if its URL is already somewhere on the stack. */
+    forward(commands, extras) {
+        return this.navigate(commands, extras, 'forward');
+    }
+    /**
+     * Go back one page. This is what the swipe gesture commits to, and what a back button should
+     * call. There are three quite different situations behind that one word, and this picks between
+     * them:
+     *
+     * 1. **There's a page below, and it's also the previous history entry.** The easy case. Use a
+     *    real `history.back()`, so the URL, the browser's back button and the stack all keep telling
+     *    the same story.
+     *
+     * 2. **There's a page below, but history disagrees.** This is what tabs do to you: history is a
+     *    single linear thread, tabs are several stacks, and switching tabs leaves an unrelated page
+     *    sitting behind you. `history.back()` would jump sideways out of the stack you're in, so
+     *    navigate to the page we actually mean instead, replacing the current entry so that popping
+     *    doesn't inflate history.
+     *
+     * 3. **There's nothing below at all.** A cold deep link — a push notification, a shared URL, a
+     *    refresh three screens in. `history.back()` here walks out of the app entirely, which is
+     *    almost never what the user meant by tapping a back arrow inside it. If the route declares
+     *    where it sits (`data: { parent: '/inbox' }`) we build that page and animate to it as a back,
+     *    exactly as though it had been there all along.
+     */
+    back(commands, extras) {
+        if (commands !== undefined) {
+            return this.navigate(commands, extras, 'back');
+        }
+        const target = this.target?.backTarget() ?? null;
+        if (!target) {
+            // Genuinely nowhere to go: no page below, no declared parent. Defer to the browser, which
+            // may well leave the app — the honest outcome of there being nothing to go back to.
+            this.location.back();
+            return Promise.resolve(true);
+        }
+        if (target.mounted && this.history.previousUrl() === target.url) {
+            this.location.back();
+            return Promise.resolve(true);
+        }
+        return this.navigate(target.url, { ...extras, replaceUrl: true }, 'back');
+    }
+    /** Throw every stack away and start again from this page. */
+    root(commands, extras) {
+        return this.navigate(commands, { ...extras, replaceUrl: true }, 'root');
+    }
+    navigate(commands, extras, hint) {
+        const merged = {
+            ...extras,
+            state: { ...(extras?.state ?? {}), [NGX_STACK_DIRECTION]: hint },
+        };
+        return Array.isArray(commands)
+            ? this.router.navigate(commands, merged)
+            : this.router.navigateByUrl(commands, merged);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackNav, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackNav, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackNav, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Read the intent off the navigation currently in flight.
+ *
+ * Only honoured for imperative navigations. A `popstate` carries the history entry's *stored*
+ * state, which still holds whatever hint was set when that entry was first pushed — so trusting
+ * it would make pressing Back re-read an old `'forward'` and push a duplicate page. For history
+ * traversal the outlet works the direction out from the stack instead, which is unambiguous.
+ */
+function readDirectionHint(router) {
+    const navigation = router.getCurrentNavigation();
+    if (!navigation || navigation.trigger !== 'imperative')
+        return null;
+    const state = navigation.extras.state;
+    const hint = state?.[NGX_STACK_DIRECTION];
+    return hint === 'forward' || hint === 'back' || hint === 'root' ? hint : null;
+}
+/** `false` when the caller wants this navigation to land with no transition at all. */
+function readAnimatedHint(router) {
+    const navigation = router.getCurrentNavigation();
+    if (!navigation || navigation.trigger !== 'imperative')
+        return null;
+    const state = navigation.extras.state;
+    const animated = state?.[NGX_STACK_ANIMATED];
+    return typeof animated === 'boolean' ? animated : null;
+}
+
+/**
+ * Wire up the stack. One call, everything in it.
+ *
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [
+ *     provideRouter(routes),
+ *     provideNgxStack({
+ *       transitions: { ios: iosTransition, android: androidTransition, web: noneTransition },
+ *       tabs: ['inbox', 'search'],
+ *       deepLinks: true,     // needs withDisabledInitialNavigation() — see below
+ *     }),
+ *   ],
+ * });
+ * ```
+ *
+ * Installs {@link NgxStackRouteReuseStrategy}, which is required — Angular's default strategy
+ * recycles a component when only the route params change, which would quietly merge `/item/1` and
+ * `/item/2` into one page instead of two.
+ */
+function provideNgxStack(config = {}) {
+    const resolved = { ...NGX_STACK_DEFAULTS, ...config };
+    return makeEnvironmentProviders([
+        { provide: NGX_STACK_CONFIG, useValue: resolved },
+        { provide: RouteReuseStrategy, useClass: NgxStackRouteReuseStrategy },
+        ...(resolved.deepLinks ? [rebuildDeepLinks(resolved.deepLinks)] : []),
+    ]);
+}
+/** Guards against a `parentOf` that never terminates. Ten screens is already an absurd stack. */
+const MAX_ANCESTORS = 10;
+/**
+ * Build the pages that *should* have been underneath, when the app opens partway in.
+ *
+ * A push notification, a shared link, a refresh three screens deep: the router lands you on the
+ * detail page and the stack has exactly one entry. Nothing is beneath it, so there is nothing for a
+ * swipe to drag into view.
+ *
+ * The gesture needs the page below to be mounted and painted *before* the finger touches the
+ * screen, and the only honest way to get it there is to have navigated to it. So that's what this
+ * does: it rebuilds the ancestor chain at startup, silently, before the app is shown.
+ */
+function rebuildDeepLinks(deepLinks) {
+    return provideEnvironmentInitializer(() => {
+        const router = inject(Router);
+        const destroyRef = inject(DestroyRef);
+        const findParent = deepLinks === true ? (url) => deriveParentUrl(router.config, url) : deepLinks;
+        let handled = false;
+        // We intercept the very first navigation rather than letting it land and then correcting
+        // ourselves, and the timing is the whole point: NavigationStart fires before anything is
+        // recognised or activated, so nothing has been built yet. Asking the router for a different URL
+        // here supersedes the one in flight — it is cancelled where it stands and never activates. The
+        // deep page therefore gets constructed exactly once, at the end, on top of its ancestors.
+        //
+        // (Doing this after NavigationEnd would work too, and would build the deep page, throw it away,
+        // and build it again — running its resolvers twice for the privilege.)
+        const subscription = router.events.subscribe((event) => {
+            if (handled || !(event instanceof NavigationStart))
+                return;
+            handled = true;
+            subscription.unsubscribe();
+            const target = event.url;
+            // Walk up from the target, collecting ancestors outermost-first.
+            const chain = [];
+            const seen = new Set([target]);
+            let current = target;
+            while (chain.length < MAX_ANCESTORS) {
+                const parent = findParent(current);
+                if (!parent || seen.has(parent))
+                    break;
+                seen.add(parent);
+                chain.unshift(parent);
+                current = parent;
+            }
+            // Nothing above it — it *is* a root page. Let the navigation Angular already started proceed.
+            if (chain.length === 0)
+                return;
+            void (async () => {
+                // Root the stack at the outermost ancestor, replacing the history entry the browser already
+                // has for the deep URL…
+                await router.navigateByUrl(chain[0], {
+                    replaceUrl: true,
+                    state: { [NGX_STACK_DIRECTION]: 'root', [NGX_STACK_ANIMATED]: false },
+                });
+                // …then walk back down, pushing each page. The stack and the history end up exactly as they
+                // would have been if the user had tapped their way here — which is the whole point.
+                for (const url of [...chain.slice(1), target]) {
+                    await router.navigateByUrl(url, {
+                        state: { [NGX_STACK_DIRECTION]: 'forward', [NGX_STACK_ANIMATED]: false },
+                    });
+                }
+            })();
+        });
+        destroyRef.onDestroy(() => subscription.unsubscribe());
+    });
+}
+/**
+ * Route the Android hardware back button (and the Android system back gesture, which Capacitor
+ * reports through the same event) into the stack.
+ *
+ * Pass the plugin in rather than having the library import it, so `@capacitor/app` stays out of the
+ * dependency graph of anyone shipping only to the web:
+ *
+ * ```ts
+ * import { App } from '@capacitor/app';
+ * provideCapacitorBack(App)
+ * ```
+ *
+ * At the root of the stack this calls `exitApp()`, which is what Android users expect — back on the
+ * first screen closes the app rather than doing nothing.
+ *
+ * The event's own `canGoBack` is deliberately ignored. It describes the *webview's* history, and
+ * history is a single linear thread while tabs are several stacks — so it says yes when the only
+ * thing behind you is a different tab. We ask the stack instead.
+ */
+function provideCapacitorBack(app) {
+    return makeEnvironmentProviders([
+        provideEnvironmentInitializer(() => {
+            const platform = inject(NGX_STACK_PLATFORM);
+            if (!platform.isCapacitor)
+                return;
+            const nav = inject(NgxStackNav);
+            void app.addListener('backButton', () => {
+                if (nav.canGoBack()) {
+                    void nav.back();
+                }
+                else {
+                    void app.exitApp();
+                }
+            });
+        }),
+    ]);
+}
+/**
+ * The same, for Cordova / PhoneGap.
+ *
+ * Cordova is a WKWebView (iOS) or WebView (Android) with plugins bolted on, so everything else in
+ * this library already works there unchanged — the swipe, the transitions, the stacks, the tabs.
+ * The one thing that isn't web is the Android hardware back button, which Cordova delivers as a
+ * `backbutton` event on `document` once `deviceready` has fired.
+ *
+ * ```ts
+ * provideCordovaBack()
+ * ```
+ *
+ * Nothing to pass in: unlike Capacitor, Cordova's API is a global. At the root of the stack this
+ * calls `navigator.app.exitApp()`.
+ */
+function provideCordovaBack() {
+    return makeEnvironmentProviders([
+        provideEnvironmentInitializer(() => {
+            const platform = inject(NGX_STACK_PLATFORM);
+            if (!platform.isCordova)
+                return;
+            const nav = inject(NgxStackNav);
+            const doc = inject(DOCUMENT);
+            const destroyRef = inject(DestroyRef);
+            const onBackButton = (event) => {
+                event.preventDefault();
+                if (nav.canGoBack()) {
+                    void nav.back();
+                    return;
+                }
+                const exitApp = doc.defaultView?.navigator?.app?.exitApp;
+                exitApp?.();
+            };
+            // Cordova only starts firing `backbutton` after `deviceready`, so subscribing this early is
+            // safe — the event simply cannot arrive before then.
+            doc.addEventListener('backbutton', onBackButton);
+            // An app is normally torn down by the OS, not by us — but a test harness, or a micro-frontend
+            // that destroys and recreates the Angular app, would otherwise leave this listener holding a
+            // reference to a dead injector and stealing the back button from whatever replaced it.
+            destroyRef.onDestroy(() => doc.removeEventListener('backbutton', onBackButton));
+        }),
+    ]);
+}
+
+/** How far back to look. Older samples describe a gesture the finger has already left. */
+const WINDOW_MS = 100;
+/** Horizontal speed of a drag, in px/ms. Positive means moving right. */
+class VelocityTracker {
+    samples = [];
+    reset(x, t) {
+        this.samples = [{ x, t }];
+    }
+    add(x, t) {
+        this.samples.push({ x, t });
+        const cutoff = t - WINDOW_MS;
+        while (this.samples.length > 2 && this.samples[0].t < cutoff) {
+            this.samples.shift();
+        }
+    }
+    velocity() {
+        if (this.samples.length < 2)
+            return 0;
+        const first = this.samples[0];
+        const last = this.samples[this.samples.length - 1];
+        const dt = last.t - first.t;
+        if (dt <= 0)
+            return 0;
+        return (last.x - first.x) / dt;
+    }
+}
+
+/** Travel along the axis, in px, before we commit to a swipe rather than a scroll or a tap. */
+const DIRECTION_LOCK_PX = 10;
+const MIN_SETTLE_MS = 90;
+const MAX_SETTLE_MS = 380;
+/** Below this speed the flick is treated as a release, not a throw. */
+const IDLE_SPEED = 0.05;
+/**
+ * Edge-drag-to-go-back.
+ *
+ * Uses touch events rather than pointer events on purpose. On iOS a `touchmove` can be
+ * `preventDefault()`-ed to stop the page scrolling out from under the drag, and a `touchstart`
+ * can be prevented to stop WebKit starting its own back-navigation gesture. Pointer events give
+ * us neither — once WebKit decides the touch is a scroll or a system gesture, we just get a
+ * `pointercancel` and the drag dies.
+ *
+ * Everything horizontal is expressed against a `sign`: +1 in LTR, -1 in RTL. The gesture starts
+ * at the *inline start* edge and pulls towards the *inline end*, which in Arabic and Hebrew means
+ * starting at the right and dragging left.
+ */
+class SwipeBackGesture {
+    host;
+    config;
+    platform;
+    state = 'idle';
+    startX = 0;
+    startY = 0;
+    width = 1;
+    sign = 1;
+    touchId = null;
+    back = null;
+    velocity = new VelocityTracker();
+    teardown = [];
+    constructor(host, config, platform) {
+        this.host = host;
+        this.config = config;
+        this.platform = platform;
+        const el = host.hostEl;
+        // Non-passive: both handlers need to be able to preventDefault.
+        this.listen(el, 'touchstart', this.onTouchStart, { passive: false });
+        this.listen(el, 'touchmove', this.onTouchMove, { passive: false });
+        this.listen(el, 'touchend', this.onTouchEnd);
+        this.listen(el, 'touchcancel', this.onTouchEnd);
+        if (config.swipeWithMouse) {
+            this.listen(el, 'mousedown', this.onMouseDown);
+            this.listen(el.ownerDocument, 'mousemove', this.onMouseMove);
+            this.listen(el.ownerDocument, 'mouseup', this.onMouseUp);
+        }
+    }
+    listen(target, type, handler, options) {
+        target.addEventListener(type, handler, options);
+        this.teardown.push(() => target.removeEventListener(type, handler, options));
+    }
+    // ---------------------------------------------------------------------------
+    // Touch
+    // ---------------------------------------------------------------------------
+    onTouchStart = (event) => {
+        if (this.state !== 'idle' || event.touches.length !== 1)
+            return;
+        const touch = event.touches[0];
+        if (!this.arm(touch.clientX, touch.clientY))
+            return;
+        this.touchId = touch.identifier;
+        // Stacks nest: an <ngx-stack> inside a page of an <ngx-stack-outlet> sits inside the outer
+        // stack's host element, so this touch is on its way there too. Claim it, or both stacks
+        // would go back at once. Listeners fire innermost-first, and arming already required
+        // something to go back to — so the innermost stack that *can* go back wins, and one sitting
+        // at its own root declines and lets the swipe fall through to its parent.
+        event.stopPropagation();
+        if (this.suppressesSystemGesture() && event.cancelable) {
+            // Stops WebKit from starting its own interactive back navigation on this touch. The cost
+            // is that this touch will not produce a synthetic `click`, which is why the default policy
+            // is `inset` rather than `suppress`.
+            event.preventDefault();
+        }
+    };
+    onTouchMove = (event) => {
+        if (this.state === 'idle')
+            return;
+        const touch = this.trackedTouch(event);
+        if (!touch)
+            return;
+        this.drag(touch.clientX, touch.clientY, event);
+    };
+    onTouchEnd = () => {
+        this.release();
+    };
+    /** A second finger landing must not hijack a drag the first one started. */
+    trackedTouch(event) {
+        return Array.from(event.touches).find((touch) => touch.identifier === this.touchId) ?? null;
+    }
+    // ---------------------------------------------------------------------------
+    // Mouse (development convenience only — `swipeWithMouse`)
+    // ---------------------------------------------------------------------------
+    onMouseDown = (event) => {
+        if (this.state !== 'idle' || event.button !== 0)
+            return;
+        // See onTouchStart: the innermost stack that can go back claims the drag.
+        if (this.arm(event.clientX, event.clientY))
+            event.stopPropagation();
+    };
+    onMouseMove = (event) => {
+        if (this.state === 'idle')
+            return;
+        this.drag(event.clientX, event.clientY, event);
+    };
+    onMouseUp = () => {
+        this.release();
+    };
+    // ---------------------------------------------------------------------------
+    arm(x, y) {
+        this.sign = this.host.isRtl() ? -1 : 1;
+        if (!this.inEdgeZone(x))
+            return false;
+        if (!this.host.canSwipeBack())
+            return false;
+        this.state = 'pending';
+        this.startX = x;
+        this.startY = y;
+        this.width = Math.max(this.host.hostEl.clientWidth, 1);
+        this.velocity.reset(x, performance.now());
+        return true;
+    }
+    drag(x, y, event) {
+        // Travel *away from* the starting edge, so this is positive whichever way the app reads.
+        const travel = (x - this.startX) * this.sign;
+        if (this.state === 'pending') {
+            const dy = y - this.startY;
+            // A vertical drag is a scroll, and scrolling wins outright — bail rather than fight it.
+            if (Math.abs(dy) > DIRECTION_LOCK_PX && Math.abs(dy) >= Math.abs(travel)) {
+                this.reset();
+                return;
+            }
+            if (travel < DIRECTION_LOCK_PX)
+                return;
+            const back = this.host.beginSwipeBack();
+            if (!back) {
+                this.reset();
+                return;
+            }
+            this.back = back;
+            this.state = 'dragging';
+        }
+        if (!this.back)
+            return;
+        // Keep the page underneath from scrolling while the finger is dragging it sideways.
+        if (event.cancelable)
+            event.preventDefault();
+        this.velocity.add(x, performance.now());
+        this.back.player.seek(travel / this.width);
+    }
+    release() {
+        const back = this.back;
+        const wasDragging = this.state === 'dragging';
+        const sign = this.sign;
+        this.reset();
+        if (!wasDragging || !back)
+            return;
+        const progress = back.player.progress;
+        // Positive means "still moving away from the starting edge", i.e. towards completing.
+        const velocity = this.velocity.velocity() * sign;
+        const threshold = this.config.swipeVelocityThreshold;
+        // A fast flick decides on its own: outwards completes even from barely anywhere, back
+        // towards the edge cancels even from past the halfway mark. Otherwise distance decides.
+        const complete = velocity > threshold || (velocity > -threshold && progress > this.config.swipeThreshold);
+        const remaining = complete ? 1 - progress : progress;
+        const ms = this.settleDuration(remaining, Math.abs(velocity));
+        if (complete) {
+            this.host.commitSwipeBack(back, ms);
+        }
+        else {
+            this.host.abortSwipeBack(back, ms);
+        }
+    }
+    /** Carry the finger's speed into the settle, so the page doesn't change pace on release. */
+    settleDuration(remainingProgress, speed) {
+        const distance = remainingProgress * this.width;
+        const ms = speed > IDLE_SPEED ? distance / speed : this.config.duration * remainingProgress;
+        return Math.min(Math.max(ms, MIN_SETTLE_MS), MAX_SETTLE_MS);
+    }
+    reset() {
+        this.state = 'idle';
+        this.back = null;
+        this.touchId = null;
+    }
+    /** The zone hugs the *inline start* edge: the left in LTR, the right in RTL. */
+    inEdgeZone(x) {
+        const rect = this.host.hostEl.getBoundingClientRect();
+        const fromEdge = this.sign === 1 ? x - rect.left : rect.right - x;
+        const start = this.systemInset();
+        return fromEdge >= start && fromEdge <= start + this.config.swipeEdgeWidth;
+    }
+    /** Pixels at the very edge we concede to the browser's own gesture. */
+    systemInset() {
+        return this.platform.hasSystemBackGesture && this.config.systemGesture === 'inset'
+            ? this.config.systemEdgeInset
+            : 0;
+    }
+    suppressesSystemGesture() {
+        return this.platform.hasSystemBackGesture && this.config.systemGesture === 'suppress';
+    }
+    destroy() {
+        if (this.back) {
+            this.host.abortSwipeBack(this.back, 0);
+        }
+        this.reset();
+        for (const off of this.teardown)
+            off();
+        this.teardown.length = 0;
+    }
+}
+
+/**
+ * The master switch for swipe-to-go-back.
+ *
+ * `provideNgxStack({ swipeBack })` only sets the *starting* value — this is what you reach
+ * for when the answer changes while the app is running. A modal is open, a map is eating the
+ * drag, a form has unsaved edits, a payment is in flight: turn it off, turn it back on after.
+ *
+ * ```ts
+ * const swipe = inject(NgxStackSwipe);
+ * swipe.disable();
+ * // …later
+ * swipe.reset();   // back to whatever the config said
+ * ```
+ *
+ * This is the global layer. Two narrower ones sit on top of it, and either can veto:
+ * `<ngx-stack-outlet [swipeBack]="…">` for one stack, and `ngxCanSwipeBack()` or
+ * `data: { swipeBack: false }` for one page. See {@link NgxStackPage}.
+ */
+class NgxStackSwipe {
+    config = inject(NGX_STACK_CONFIG);
+    platform = inject(NGX_STACK_PLATFORM);
+    _enabled = signal(this.fromConfig(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_enabled" }] : /* istanbul ignore next */ []));
+    /** Read it in a template or a computed; it's a signal. */
+    enabled = this._enabled.asReadonly();
+    enable() {
+        this._enabled.set(true);
+    }
+    disable() {
+        this._enabled.set(false);
+    }
+    set(enabled) {
+        this._enabled.set(enabled);
+    }
+    /** Go back to what the config asked for, whatever that resolved to on this device. */
+    reset() {
+        this._enabled.set(this.fromConfig());
+    }
+    fromConfig() {
+        const setting = this.config.swipeBack;
+        if (setting !== 'auto')
+            return setting;
+        // 'auto' means iOS only. Honour a forced `platform`, so an iOS build under test on a
+        // laptop still arms the gesture.
+        const kind = this.config.platform === 'auto' ? this.platform.kind : this.config.platform;
+        return kind === 'ios';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackSwipe, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackSwipe, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackSwipe, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * The Material shape: the incoming page rises a short distance and fades in over the outgoing one,
+ * which stays exactly where it is and is simply covered.
+ *
+ * The counterpart to {@link slideTransition}. `androidTransition` and `webTransition` are both
+ * instances of this, with the same numbers — but they remain two separate transitions you can point
+ * at different things, because "what Android does" and "what a browser does" are two decisions that
+ * merely happen to agree today.
+ *
+ * Note there is no horizontal component, and that has a consequence: an edge swipe would drag
+ * sideways while the page moved vertically. That is why `swipeBack: 'auto'` only arms the gesture on
+ * iOS. For a swipe on Android or the web, give that platform a {@link slideTransition} instead.
+ */
+function riseTransition(options) {
+    return (ctx) => {
+        const forward = ctx.direction === 'forward';
+        // The page riding on top. Going back, that's the one leaving.
+        const overEl = forward ? ctx.enteringEl : ctx.leavingEl;
+        const animations = [];
+        if (overEl) {
+            const away = { transform: `translateY(${options.travel}px)`, opacity: '0' };
+            const home = { transform: 'translateY(0)', opacity: '1' };
+            animations.push({ el: overEl, keyframes: forward ? [away, home] : [home, away] });
+        }
+        return {
+            duration: Math.round(ctx.duration * options.durationScale),
+            easing: options.easing,
+            animations,
+        };
+    };
+}
+
+/**
+ * The Material push: the incoming page rises and fades in over the outgoing one, which stays where
+ * it is. Shorter and flatter than iOS — Material moves things a short distance quickly rather than a
+ * long distance smoothly.
+ *
+ * Deliberately has no horizontal component, which is why `swipeBack: 'auto'` doesn't arm the gesture
+ * here: a finger dragging sideways would scrub a page moving vertically. On Android the back gesture
+ * belongs to the OS anyway. If you do want an edge swipe, give this platform a `slideTransition()`.
+ */
+const androidTransition = riseTransition({
+    travel: 12,
+    easing: 'cubic-bezier(0.05, 0.7, 0.1, 1)',
+    durationScale: 0.65,
+});
+
+/** The dim overlay that sits on top of a page while it is covered by another. */
+function scrimOf(pageEl) {
+    return pageEl.querySelector(':scope > .ngx-stack-scrim');
+}
+
+/**
+ * The shape both horizontal transitions share: one page rides in over another, which drifts the
+ * other way more slowly and dims underneath it.
+ *
+ * iOS and web are the same animation with different numbers — a full-width slide with a heavy
+ * parallax, versus a short drift carried mostly by opacity. Writing that twice invites them to
+ * quietly diverge, and the interesting parts here are subtle enough already:
+ *
+ * - `forward` and `back` are the same keyframes with the roles swapped. That symmetry is what makes
+ *   a swipe scrubbable at all — the gesture just seeks the `back` spec.
+ * - everything horizontal is signed by `rtl`, so a page pushed "forward" in Arabic arrives from the
+ *   left, which is the direction the language reads towards.
+ */
+function slideTransition(options) {
+    return (ctx) => {
+        const forward = ctx.direction === 'forward';
+        const sign = ctx.rtl ? -1 : 1;
+        const offMain = `translateX(${options.travel * sign}%)`;
+        const offUnder = `translateX(${-options.parallax * sign}%)`;
+        const center = 'translateX(0)';
+        // The page riding on top, sliding in from (or out to) the edge.
+        const overEl = forward ? ctx.enteringEl : ctx.leavingEl;
+        // The page underneath, parallaxing and dimming.
+        const underEl = forward ? ctx.leavingEl : ctx.enteringEl;
+        const animations = [];
+        if (overEl) {
+            const away = { transform: offMain, ...(options.fade ? { opacity: '0' } : {}) };
+            const home = { transform: center, ...(options.fade ? { opacity: '1' } : {}) };
+            animations.push({ el: overEl, keyframes: forward ? [away, home] : [home, away] });
+        }
+        if (underEl) {
+            animations.push({
+                el: underEl,
+                keyframes: forward
+                    ? [{ transform: center }, { transform: offUnder }]
+                    : [{ transform: offUnder }, { transform: center }],
+            });
+            const scrim = options.scrim > 0 ? scrimOf(underEl) : null;
+            if (scrim) {
+                const clear = { opacity: '0' };
+                const dim = { opacity: `${options.scrim}` };
+                animations.push({ el: scrim, keyframes: forward ? [clear, dim] : [dim, clear] });
+            }
+        }
+        return {
+            duration: Math.round(ctx.duration * options.durationScale),
+            easing: options.easing,
+            animations,
+        };
+    };
+}
+
+/**
+ * The iOS navigation-controller push/pop.
+ *
+ * The incoming page slides the full width of the screen over the outgoing one, which drifts the
+ * other way at a third of the speed and dims underneath it — the parallax that makes a UIKit stack
+ * feel like sheets of paper rather than slides.
+ *
+ * The easing is UIKit's own: almost no acceleration, and a very long tail.
+ */
+const iosTransition = slideTransition({
+    travel: 100,
+    parallax: 33,
+    scrim: 0.16,
+    fade: false,
+    easing: 'cubic-bezier(0.32, 0.72, 0, 1)',
+    durationScale: 1,
+});
+
+/**
+ * The browser default — the same rise-and-fade as Android, and identical to `androidTransition` down
+ * to the numbers.
+ *
+ * They are still two transitions rather than one, and that is the point: "what a phone does" and
+ * "what a browser does" are two separate decisions that merely happen to agree today. Retuning the
+ * web here changes nothing on Android, and vice versa. If they were the same object, the first person
+ * to want a different feel on the desktop would have to change both.
+ *
+ * Why Material rather than the iOS slide: a full-width slide says *"this screen came from over
+ * there"*, which is true of something you swiped into view and not of something you clicked — and on
+ * a wide monitor it is a great many pixels moving for no reason.
+ */
+const webTransition = riseTransition({
+    travel: 12,
+    easing: 'cubic-bezier(0.05, 0.7, 0.1, 1)',
+    durationScale: 0.65,
+});
+
+const clamp01 = (n) => (n < 0 ? 0 : n > 1 ? 1 : n);
+/** Keyframe keys that carry timing rather than style. */
+const META_KEYS = new Set(['offset', 'easing', 'composite']);
+function styleKeysOf(keyframes) {
+    const keys = new Set();
+    for (const frame of keyframes) {
+        for (const key of Object.keys(frame)) {
+            if (!META_KEYS.has(key))
+                keys.add(key);
+        }
+    }
+    return [...keys];
+}
+/** The element's current rendered value for each animated property. */
+function snapshotOf(el, keys) {
+    const frame = {};
+    // A page destroyed mid-swipe — a navigation cancelled under the finger — has no defaultView. An
+    // assertion here would throw inside a touch handler, taking the gesture down with it, when the
+    // honest answer is simply that there is nothing left to animate from.
+    const view = el.ownerDocument.defaultView;
+    if (!view)
+        return frame;
+    const computed = view.getComputedStyle(el);
+    for (const key of keys) {
+        frame[key] = computed[key];
+    }
+    return frame;
+}
+function styleOnly(frame) {
+    const out = {};
+    for (const [key, value] of Object.entries(frame)) {
+        if (!META_KEYS.has(key))
+            out[key] = value;
+    }
+    return out;
+}
+/**
+ * A page transition that can be either played or scrubbed.
+ *
+ * This is the whole reason the library exists. A CSS transition or a View Transition is
+ * fire-and-forget: it runs to completion on its own clock. A swipe-back is the opposite —
+ * the finger owns the clock, the transition has to follow it, and the user may change
+ * their mind halfway and drag right back.
+ *
+ * So a transition is built as a set of paused Web Animations with `fill: 'both'`. Paused at
+ * `currentTime = 0` they hold their first keyframe; the gesture then writes `currentTime`
+ * directly on every touch move.
+ */
+class TransitionPlayer {
+    spec;
+    animations;
+    duration;
+    disposed = false;
+    /**
+     * @param interactive Build for scrubbing. Timing easing is forced to linear so that
+     *   seeking to progress `p` puts the page at exactly `p` of the way across — otherwise
+     *   the iOS curve makes the page lead and then lag the finger, which is precisely the
+     *   tell that separates a native-feeling swipe from a web one. The real curve is applied
+     *   later, by `settle()`.
+     */
+    constructor(spec, interactive = false) {
+        this.spec = spec;
+        this.duration = Math.max(spec.duration, 1);
+        const easing = interactive ? 'linear' : spec.easing;
+        this.animations = spec.animations.map((animation) => {
+            const handle = animation.el.animate(animation.keyframes, {
+                duration: this.duration,
+                easing: interactive ? 'linear' : (animation.easing ?? easing),
+                fill: 'both',
+            });
+            handle.pause();
+            handle.currentTime = 0;
+            return handle;
+        });
+    }
+    /** Where the transition currently sits, in `[0, 1]`. */
+    get progress() {
+        const first = this.animations[0];
+        if (!first)
+            return 0;
+        return clamp01(Number(first.currentTime ?? 0) / this.duration);
+    }
+    /** Jump to a progress in `[0, 1]`. Called on every touch move during a swipe. */
+    seek(progress) {
+        if (this.disposed)
+            return;
+        const time = clamp01(progress) * this.duration;
+        for (const animation of this.animations) {
+            animation.currentTime = time;
+        }
+    }
+    /** Run to progress 1 on the transition's own clock. */
+    play() {
+        return this.run(1);
+    }
+    /**
+     * Hand the clock back to the browser after a scrub, carrying on to `target`.
+     *
+     * Deliberately *not* a continuation of the scrub timeline. Re-applying the easing curve
+     * to a timeline that is already part-way through would snap the page to `easing(t)`, a
+     * visible jump at the exact moment the user lets go. Instead we snapshot what is
+     * currently on screen and animate from there to the target with the real curve, which is
+     * continuous by construction.
+     *
+     * @param ms How long the remaining distance should take. Scale this by the distance left
+     *   so a release near the end is quick and one near the start is not.
+     */
+    settle(target, ms, easing = this.spec.easing) {
+        if (this.disposed || this.animations.length === 0)
+            return Promise.resolve();
+        const from = this.spec.animations.map((animation) => ({
+            el: animation.el,
+            frame: snapshotOf(animation.el, styleKeysOf(animation.keyframes)),
+        }));
+        const to = this.spec.animations.map((animation) => styleOnly(target === 1 ? animation.keyframes[animation.keyframes.length - 1] : animation.keyframes[0]));
+        for (const animation of this.animations) {
+            animation.cancel();
+        }
+        this.duration = Math.max(ms, 1);
+        this.animations = from.map((source, index) => source.el.animate([source.frame, to[index]], {
+            duration: this.duration,
+            easing,
+            fill: 'both',
+        }));
+        return this.settled();
+    }
+    run(direction) {
+        if (this.disposed || this.animations.length === 0)
+            return Promise.resolve();
+        // `Animation.play()` auto-rewinds: playing forward from the very end snaps back to the
+        // start. Short-circuit when there is no distance left to cover.
+        if (this.progress >= 0.999) {
+            this.seek(1);
+            return Promise.resolve();
+        }
+        for (const animation of this.animations) {
+            animation.playbackRate = direction;
+            animation.play();
+        }
+        return this.settled();
+    }
+    settled() {
+        return Promise.all(
+        // `finished` rejects when an animation is cancelled mid-flight, which is what happens
+        // whenever a newer navigation interrupts this one. Not an error for us.
+        this.animations.map((animation) => animation.finished.catch(() => undefined))).then(() => undefined);
+    }
+    /** Snap to the end state with no animation. */
+    finish() {
+        this.seek(1);
+    }
+    /** Drop the animations, reverting the elements to the styles they had before. */
+    destroy() {
+        if (this.disposed)
+            return;
+        for (const animation of this.animations) {
+            animation.cancel();
+        }
+        this.disposed = true;
+    }
+}
+
+const ANNOUNCER_ID = 'ngx-stack-announcer';
+/**
+ * Say a page's name out loud, once, to whoever is listening with a screen reader.
+ *
+ * A stack navigation is invisible to assistive tech: no document load, no focus change it can
+ * infer meaning from — the DOM just quietly rearranges. A polite live region is the standard way
+ * to give that back, and it's the same thing Angular's own `RouterOutlet` does not do for you.
+ */
+function announce(doc, message) {
+    let region = doc.getElementById(ANNOUNCER_ID);
+    if (!region) {
+        region = doc.createElement('div');
+        region.id = ANNOUNCER_ID;
+        region.setAttribute('aria-live', 'polite');
+        region.setAttribute('aria-atomic', 'true');
+        region.className = 'ngx-stack-announcer';
+        doc.body.appendChild(region);
+    }
+    // Re-announcing the same string is a no-op for most screen readers, because the region's
+    // content didn't change. Clearing first forces it to speak.
+    region.textContent = '';
+    region.textContent = message;
+}
+
+function callLifecycle(entry, hook) {
+    const instance = entry?.ref.instance;
+    instance?.[hook]?.();
+}
+/**
+ * Does the page on top object to being swiped away? Two ways to say so, both vetoes:
+ * `data: { swipeBack: false }` on the route for a page that never allows it, and
+ * `ngxCanSwipeBack()` on the component for one that decides in the moment.
+ *
+ * @param guardPolicy When `'block'`, a route carrying a `canDeactivate` guard refuses the
+ *   gesture unless its component implements `ngxCanSwipeBack()`. The guard would otherwise run
+ *   only *after* the page had already animated away, and refusing at that point can do nothing
+ *   but bounce it back.
+ */
+function pageAllowsSwipeBack(entry, guardPolicy = 'allow') {
+    if (!entry)
+        return false;
+    const snapshot = entry.route?.snapshot;
+    if (snapshot?.data['swipeBack'] === false)
+        return false;
+    const page = entry.ref.instance;
+    const answer = page?.ngxCanSwipeBack?.();
+    if (answer !== undefined)
+        return answer;
+    if (guardPolicy === 'block' && (snapshot?.routeConfig?.canDeactivate?.length ?? 0) > 0) {
+        return false;
+    }
+    return true;
+}
+
+const BUILT_IN = {
+    ios: iosTransition,
+    android: androidTransition,
+    // Its own transition, which today happens to be identical to Android's — see web-transition.ts for
+    // why they stay two things.
+    web: webTransition,
+};
+/**
+ * Owns the pages of a stack — their DOM, their order, and the transitions between them.
+ *
+ * Deliberately free of framework plumbing: it knows nothing about the Router or about
+ * imperative pushes. Both `NgxStackOutlet` and `NgxStack` drive this same class, which is why
+ * a swipe-back behaves identically whether the stack is fed by URLs or by `push()`.
+ *
+ * With `tabs` configured it holds one stack *per tab* and shows the active one. Tabs are not a
+ * feature bolted on top — they're the reason the pages live in a map keyed by tab rather than a
+ * flat array. Switching tabs mounts nothing and destroys nothing; it just changes which stack's
+ * top page is on screen, so the tab you left is still exactly where you left it.
+ */
+class StackController {
+    hostEl;
+    config;
+    platform;
+    stacks = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stacks" }] : /* istanbul ignore next */ []));
+    active = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** URLs evicted by `maxDepth`, per tab. Remembered so we still know they're *behind* us. */
+    pruned = new Map();
+    /** The active tab's pages, bottom first. */
+    pages = computed(() => this.stacks()[this.active()] ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    depth = computed(() => this.pages().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+    canGoBack = computed(() => this.pages().length > 1 || this.hasPrunedPages(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoBack" }] : /* istanbul ignore next */ []));
+    activeTab = this.active.asReadonly();
+    _animating = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_animating" }] : /* istanbul ignore next */ []));
+    animating = this._animating.asReadonly();
+    /** Set by the host so it can re-emit these as component outputs. */
+    onTransitionStart;
+    onTransitionEnd;
+    nextId = 0;
+    running = null;
+    doc;
+    constructor(hostEl, config, platform) {
+        this.hostEl = hostEl;
+        this.config = config;
+        this.platform = platform;
+        this.doc = hostEl.ownerDocument;
+    }
+    // ---------------------------------------------------------------------------
+    // Reading the stack
+    // ---------------------------------------------------------------------------
+    stackOf(tab) {
+        return this.stacks()[tab] ?? [];
+    }
+    top(tab = this.active()) {
+        const stack = this.stackOf(tab);
+        return stack.length ? stack[stack.length - 1] : null;
+    }
+    at(index, tab = this.active()) {
+        return this.stackOf(tab)[index] ?? null;
+    }
+    findByUrl(url, tab = this.active()) {
+        return this.stackOf(tab).findIndex((entry) => entry.url === url);
+    }
+    /** Was this URL evicted by `maxDepth`? If so it's behind us, not ahead of us. */
+    wasPruned(url, tab = this.active()) {
+        return this.pruned.get(tab)?.has(url) ?? false;
+    }
+    hasPrunedPages() {
+        return (this.pruned.get(this.active())?.size ?? 0) > 0;
+    }
+    // ---------------------------------------------------------------------------
+    // Building pages
+    // ---------------------------------------------------------------------------
+    /** Wrap a freshly created component in a page element and put it in the host. */
+    adopt(ref, url, route, tab = '') {
+        const element = this.doc.createElement('div');
+        // Starts invisible so it can't paint at its resting position for a frame before the
+        // transition's first keyframe applies.
+        element.className = 'ngx-stack-page ngx-stack-page--invisible';
+        const scrim = this.doc.createElement('div');
+        scrim.className = 'ngx-stack-scrim';
+        // `createComponent` already put the host element in the DOM at the view container's anchor.
+        // Relocating the node is fine — Angular tracks the view, not its position.
+        element.appendChild(ref.location.nativeElement);
+        element.appendChild(scrim);
+        this.hostEl.appendChild(element);
+        return { id: this.nextId++, url, tab, element, scrim, ref, route };
+    }
+    // ---------------------------------------------------------------------------
+    // Transitions
+    // ---------------------------------------------------------------------------
+    /**
+     * Apply a stack operation. The stacks are updated *synchronously* so a navigation arriving
+     * mid-animation still sees the correct top; only the visuals and the destruction of popped
+     * pages wait for the transition.
+     */
+    run(op) {
+        // A new transition while one is still running: snap the old one to its end state rather
+        // than letting two animations fight over the same transforms.
+        if (this.running)
+            this.settle(this.running);
+        // The page currently on screen — which, on a tab switch, belongs to the tab we're leaving.
+        const leaving = this.top(this.active());
+        const stacks = { ...this.stacks() };
+        const before = stacks[op.tab] ?? [];
+        let entering;
+        let removed = [];
+        let direction;
+        switch (op.kind) {
+            case 'push':
+                entering = op.entering;
+                direction = 'forward';
+                stacks[op.tab] = this.prune(op.tab, [...before, entering], (dropped) => removed.push(...dropped));
+                break;
+            case 'replace':
+                entering = op.entering;
+                direction = 'forward';
+                // Only the top goes; everything below it stays, so back still works the same way.
+                removed = before.length ? [before[before.length - 1]] : [];
+                stacks[op.tab] = [...before.slice(0, -1), entering];
+                break;
+            case 'pop': {
+                const target = before[op.toIndex];
+                if (!target)
+                    return Promise.resolve();
+                entering = target;
+                direction = 'back';
+                removed = before.slice(op.toIndex + 1);
+                stacks[op.tab] = before.slice(0, op.toIndex + 1);
+                break;
+            }
+            case 'restore':
+                entering = op.entering;
+                direction = 'back';
+                // Everything in this stack sat above the page we're restoring, so all of it goes.
+                removed = [...before];
+                stacks[op.tab] = [entering];
+                this.pruned.get(op.tab)?.delete(entering.url);
+                break;
+            case 'root':
+                entering = op.entering;
+                direction = 'forward';
+                // Root wipes every tab, not just this one — it's "start the app again".
+                removed = Object.values(stacks).flat();
+                for (const key of Object.keys(stacks))
+                    delete stacks[key];
+                stacks[op.tab] = [entering];
+                this.pruned.clear();
+                break;
+        }
+        this.stacks.set(stacks);
+        this.active.set(op.tab);
+        if (entering === leaving) {
+            this.applyStates();
+            return Promise.resolve();
+        }
+        return this.transition(entering, leaving, direction, removed, op, this.playerOf(op));
+    }
+    /** Enforce `maxDepth` by dropping pages off the bottom, remembering that they existed. */
+    prune(tab, stack, onDropped) {
+        const max = this.config.maxDepth;
+        if (max <= 0 || stack.length <= max)
+            return stack;
+        const dropped = stack.slice(0, stack.length - max);
+        let urls = this.pruned.get(tab);
+        if (!urls) {
+            urls = new Set();
+            this.pruned.set(tab, urls);
+        }
+        for (const entry of dropped) {
+            if (entry.url)
+                urls.add(entry.url);
+        }
+        onDropped(dropped);
+        return stack.slice(dropped.length);
+    }
+    playerOf(op) {
+        return op.kind === 'pop' ? op.player : undefined;
+    }
+    async transition(entering, leaving, direction, removed, op, existingPlayer) {
+        const isRoot = leaving === null;
+        const shouldAnimate = op.animated && (!isRoot || this.config.animateRoot) && !this.prefersReducedMotion();
+        this.reveal(entering);
+        if (leaving)
+            this.reveal(leaving);
+        callLifecycle(leaving, 'ngxViewWillLeave');
+        callLifecycle(entering, 'ngxViewWillEnter');
+        // A gesture hands us a player it has already scrubbed to the end; otherwise build one.
+        const player = existingPlayer ?? (shouldAnimate ? this.buildPlayer(entering, leaving, direction) : null);
+        // Safe now: with `fill: 'both'` the player is already holding its first keyframe, so
+        // un-hiding cannot show the page at the wrong position.
+        entering.element.classList.remove('ngx-stack-page--invisible');
+        const event = {
+            direction,
+            entering,
+            leaving,
+            tab: op.tab,
+            animated: player !== null,
+            interactive: existingPlayer !== undefined,
+        };
+        const run = { player, entering, leaving, removed, event };
+        this.running = run;
+        this._animating.set(true);
+        this.onTransitionStart?.(event);
+        if (player) {
+            entering.element.classList.add('ngx-stack-page--animating');
+            leaving?.element.classList.add('ngx-stack-page--animating');
+            await player.play();
+        }
+        // A newer navigation may have settled this transition while we were awaiting.
+        if (this.running !== run)
+            return;
+        this.finish(run);
+    }
+    /** Tear down a transition: drop popped pages, fix up classes, fire the `did` hooks. */
+    finish(run) {
+        this.applyStates();
+        // Cancelling reverts elements to their CSS-defined transforms. Do it *after* `applyStates`
+        // has hidden everything below the top, so nothing flashes back to centre.
+        run.player?.destroy();
+        for (const entry of run.removed) {
+            this.destroyEntry(entry);
+        }
+        callLifecycle(run.leaving, 'ngxViewDidLeave');
+        callLifecycle(run.entering, 'ngxViewDidEnter');
+        this.running = null;
+        this._animating.set(false);
+        if (this.config.manageFocus)
+            this.moveFocus(run.entering);
+        this.onTransitionEnd?.(run.event);
+    }
+    /** Jump an in-flight transition straight to its end state. */
+    settle(run) {
+        run.player?.finish();
+        this.finish(run);
+    }
+    // ---------------------------------------------------------------------------
+    // Swipe-back
+    // ---------------------------------------------------------------------------
+    /**
+     * Set up a back transition and hand it to the gesture, paused at progress 0.
+     *
+     * Deliberately fires no lifecycle hooks: a swipe is a *peek* until the user releases, and
+     * pages should not be told they entered somewhere the user may drag right back out of. The
+     * hooks fire when the pop actually commits, through `run()`.
+     */
+    beginInteractiveBack() {
+        if (this.running)
+            return null;
+        const stack = this.pages();
+        if (stack.length < 2)
+            return null;
+        const leaving = stack[stack.length - 1];
+        const entering = stack[stack.length - 2];
+        this.reveal(entering);
+        const player = this.buildPlayer(entering, leaving, 'back', true);
+        entering.element.classList.remove('ngx-stack-page--invisible');
+        entering.element.classList.add('ngx-stack-page--animating');
+        leaving.element.classList.add('ngx-stack-page--animating');
+        return { player, entering, leaving };
+    }
+    /** The user let go without going far enough: run the transition back to where it started. */
+    async abortInteractiveBack(back, ms) {
+        await back.player.settle(0, ms);
+        this.applyStates();
+        back.player.destroy();
+    }
+    buildPlayer(entering, leaving, direction, interactive = false) {
+        const spec = this.transitionFn()({
+            enteringEl: entering.element,
+            leavingEl: leaving?.element ?? null,
+            hostEl: this.hostEl,
+            direction,
+            rtl: this.isRtl(),
+            width: this.hostEl.clientWidth || 1,
+            duration: this.config.duration,
+        });
+        return new TransitionPlayer(spec, interactive);
+    }
+    // ---------------------------------------------------------------------------
+    // Resolution
+    // ---------------------------------------------------------------------------
+    /** Which platform's look we're using, honouring a `platform` override in the config. */
+    platformKind() {
+        return this.config.platform === 'auto' ? this.platform.kind : this.config.platform;
+    }
+    /** One function for every platform, a per-platform override, or the built-in. */
+    transitionFn() {
+        const configured = this.config.transitions;
+        if (typeof configured === 'function')
+            return configured;
+        const kind = this.platformKind();
+        return configured?.[kind] ?? BUILT_IN[kind];
+    }
+    /**
+     * Read from the DOM rather than cached, so an app that flips `dir` at runtime — which is what
+     * a language switcher does — mirrors on the very next transition without a reload.
+     */
+    isRtl() {
+        if (this.config.direction !== 'auto')
+            return this.config.direction === 'rtl';
+        const view = this.doc.defaultView;
+        return view ? view.getComputedStyle(this.hostEl).direction === 'rtl' : false;
+    }
+    /**
+     * Only gates the *automatic* transitions. A swipe-back still animates: the user is dragging it
+     * themselves, and direct manipulation is exempt — a gesture that doesn't visibly follow the
+     * finger isn't reduced motion, it's a broken gesture.
+     */
+    prefersReducedMotion() {
+        if (!this.config.respectReducedMotion)
+            return false;
+        return this.doc.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches ?? false;
+    }
+    // ---------------------------------------------------------------------------
+    // DOM state
+    // ---------------------------------------------------------------------------
+    reveal(entry) {
+        entry.element.classList.remove('ngx-stack-page--hidden');
+    }
+    /**
+     * The definitive resting state. Exactly one page is visible: the top of the active tab's
+     * stack. Everything else — buried pages, and every page of every inactive tab — is hidden and
+     * inert but still mounted.
+     */
+    applyStates() {
+        const stacks = this.stacks();
+        const activeTab = this.active();
+        for (const [tab, stack] of Object.entries(stacks)) {
+            const lastIndex = stack.length - 1;
+            stack.forEach((entry, index) => {
+                const isTop = tab === activeTab && index === lastIndex;
+                entry.element.classList.toggle('ngx-stack-page--hidden', !isTop);
+                entry.element.classList.remove('ngx-stack-page--invisible', 'ngx-stack-page--animating');
+                entry.element.inert = !isTop;
+                if (isTop) {
+                    entry.element.style.transform = '';
+                    entry.scrim.style.opacity = '';
+                }
+            });
+        }
+    }
+    /**
+     * Put focus in the page that just arrived, and say its name out loud.
+     *
+     * Without this a screen-reader user gets no signal that anything happened, and keyboard focus
+     * stays on whatever control they activated — which has now slid off the screen and been marked
+     * `inert`, leaving focus nowhere at all.
+     */
+    moveFocus(entry) {
+        const explicit = entry.element.querySelector('[ngxStackAutofocus]');
+        const target = explicit ?? entry.element;
+        if (!explicit) {
+            // A page container isn't focusable by default; -1 makes it programmatically focusable
+            // without adding it to the tab order.
+            target.setAttribute('tabindex', '-1');
+        }
+        target.focus({ preventScroll: true });
+        const title = entry.route?.snapshot.title ?? this.doc.title;
+        if (title)
+            announce(this.doc, title);
+    }
+    destroyEntry(entry) {
+        entry.ref.destroy();
+        entry.element.remove();
+    }
+    destroy() {
+        if (this.running) {
+            this.running.player?.destroy();
+            this.running = null;
+        }
+        for (const stack of Object.values(this.stacks())) {
+            for (const entry of stack)
+                this.destroyEntry(entry);
+        }
+        this.stacks.set({});
+        this.pruned.clear();
+    }
+}
+
+const STYLE_ID = 'ngx-stack-styles';
+/**
+ * Page wrappers are created imperatively, outside any component template, so Angular's
+ * style encapsulation can't reach them. These rules go in the document once instead.
+ * Everything is driven by CSS custom properties so apps can restyle without `!important`.
+ */
+const CSS = `
+.ngx-stack-host {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  /* Notches, home indicators, and the Android navigation bar. Declared here so pages can just
+     use var(--ngx-stack-safe-top) without every one of them repeating the env() dance — and so
+     they still resolve to 0px on a browser that has never heard of a notch. */
+  --ngx-stack-safe-top: env(safe-area-inset-top, 0px);
+  --ngx-stack-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --ngx-stack-safe-left: env(safe-area-inset-left, 0px);
+  --ngx-stack-safe-right: env(safe-area-inset-right, 0px);
+}
+
+/* Where page titles are announced to screen readers. Visually gone, but not display:none —
+   which would take it out of the accessibility tree along with everything we're trying to say. */
+.ngx-stack-announcer {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.ngx-stack-page {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transform: translateX(0);
+  background: var(--ngx-stack-page-background, #fff);
+  /* Only ever visible while the page is translated, i.e. mid-transition. */
+  box-shadow: var(--ngx-stack-page-shadow, -6px 0 20px rgb(0 0 0 / 12%));
+}
+
+/* The routed component fills the wrapper and scrolls; the scrim sits on top of it.
+   Wrapped in :where() so this weighs nothing: a page component only has to say
+   ":host { display: flex }" to take the layout over, with no !important and no fight. */
+:where(.ngx-stack-page > :not(.ngx-stack-scrim)) {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: block;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Set while a page is being created, so it can't flash at its final position for a frame
+   before the transition's first keyframe lands. */
+.ngx-stack-page--invisible {
+  opacity: 0;
+}
+
+.ngx-stack-page--animating {
+  will-change: transform;
+}
+
+/* Buried pages — and, with tabs, every page of every inactive tab. content-visibility:hidden
+   skips their rendering while preserving internal state (crucially, scroll offsets), so coming
+   back to a page finds it exactly where you left it with no scroll-restoration bookkeeping on
+   our side. They stay in the DOM: that is what makes a tab switch instant and a swipe possible. */
+.ngx-stack-page--hidden {
+  visibility: hidden;
+  pointer-events: none;
+  content-visibility: hidden;
+}
+
+/* Focused programmatically after a transition; never show a ring for it. */
+.ngx-stack-page:focus {
+  outline: none;
+}
+
+.ngx-stack-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  opacity: 0;
+  pointer-events: none;
+  background: var(--ngx-stack-scrim-color, #000);
+}
+`;
+/** Idempotent: safe to call from every outlet on every init. */
+function ensureStackStyles(doc) {
+    if (doc.getElementById(STYLE_ID))
+        return;
+    const style = doc.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = CSS;
+    doc.head.appendChild(style);
+}
+
+/**
+ * Everything the two kinds of stack have in common — which is almost everything.
+ *
+ * `NgxStackOutlet` is fed by the Router and `NgxStack` by `push()`, and that difference is real but
+ * shallow: it only decides *where the next page comes from*. Once a page exists, holding it,
+ * transitioning to it, dragging it around with a finger and tearing it down are identical jobs, and
+ * a swipe-back must behave the same in both. Keeping that in one place is the only way it stays that
+ * way.
+ *
+ * So a subclass supplies three things — how strict to be about guards, whether it overrides the
+ * app-wide swipe switch, and what a committed swipe should actually *do* — and inherits the rest.
+ */
+class StackHostBase {
+    /** Fires as a transition begins — including one a finger is about to scrub. */
+    transitionStart = output();
+    /** Fires once the pages have settled and any popped page has been destroyed. */
+    transitionEnd = output();
+    config = inject(NGX_STACK_CONFIG);
+    platform = inject(NGX_STACK_PLATFORM);
+    swipe = inject(NgxStackSwipe);
+    viewContainer = inject(ViewContainerRef);
+    environmentInjector = inject(EnvironmentInjector);
+    changeDetector = inject(ChangeDetectorRef);
+    hostEl = inject((ElementRef)).nativeElement;
+    controller = new StackController(this.hostEl, this.config, this.platform);
+    gesture = null;
+    /** The active stack's pages, bottom first. */
+    pages = this.controller.pages;
+    depth = this.controller.depth;
+    animating = this.controller.animating;
+    constructor() {
+        ensureStackStyles(inject(DOCUMENT));
+        this.controller.onTransitionStart = (event) => this.transitionStart.emit(event);
+        this.controller.onTransitionEnd = (event) => this.transitionEnd.emit(event);
+    }
+    /** Arm the gesture. Subclasses call this once they are ready to be swiped. */
+    startGesture() {
+        this.gesture = new SwipeBackGesture(this, this.config, this.platform);
+    }
+    // ---------------------------------------------------------------------------
+    // Creating pages
+    // ---------------------------------------------------------------------------
+    /**
+     * Instantiate a page component and hand it to the controller to be wrapped and mounted.
+     *
+     * The `markForCheck` matters and is easy to lose: both hosts are OnPush with an empty template of
+     * their own, so nothing would ever dirty the view and the freshly inserted page would sit there
+     * un-checked until something unrelated happened to trigger a pass.
+     */
+    createPage(component, options) {
+        const ref = this.viewContainer.createComponent(component, {
+            index: this.viewContainer.length,
+            injector: options.injector,
+            environmentInjector: options.environmentInjector ?? this.environmentInjector,
+        });
+        this.changeDetector.markForCheck();
+        return ref;
+    }
+    // ---------------------------------------------------------------------------
+    // SwipeBackHost
+    // ---------------------------------------------------------------------------
+    /**
+     * Three layers, narrowest last, each able to veto: the app-wide switch, this stack, and the page
+     * currently on top. Re-evaluated on every touch, so all three can change at runtime.
+     */
+    canSwipeBack() {
+        // An explicit value on the stack overrides the app-wide one, in both directions.
+        if (!(this.swipeBackOverride() ?? this.swipe.enabled()))
+            return false;
+        // Deliberately `depth()`, not `canGoBack()`: the latter counts pages evicted by `maxDepth` and
+        // parents that were never built, which no longer exist and so cannot be dragged into view. A
+        // button can still take you there; a finger can't drag what isn't on screen.
+        if (this.controller.depth() < 2 || this.controller.animating())
+            return false;
+        return pageAllowsSwipeBack(this.controller.top(), this.guardPolicy());
+    }
+    isRtl() {
+        return this.controller.isRtl();
+    }
+    beginSwipeBack() {
+        return this.controller.beginInteractiveBack();
+    }
+    abortSwipeBack(back, ms) {
+        void this.controller.abortInteractiveBack(back, ms);
+    }
+    // ---------------------------------------------------------------------------
+    ngOnDestroy() {
+        this.gesture?.destroy();
+        this.controller.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StackHostBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: StackHostBase, isStandalone: true, outputs: { transitionStart: "transitionStart", transitionEnd: "transitionEnd" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StackHostBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { transitionStart: [{ type: i0.Output, args: ["transitionStart"] }], transitionEnd: [{ type: i0.Output, args: ["transitionEnd"] }] } });
+
+class SystemTransitionWatcher {
+    uaAnimated = false;
+    detach;
+    constructor(win) {
+        const navigation = win.navigation;
+        if (!navigation?.addEventListener) {
+            this.detach = () => undefined;
+            return;
+        }
+        const onNavigate = (event) => {
+            this.uaAnimated = event.hasUAVisualTransition === true;
+        };
+        navigation.addEventListener('navigate', onNavigate);
+        this.detach = () => navigation.removeEventListener('navigate', onNavigate);
+    }
+    /** Did the browser animate the navigation we are about to handle? Reads and clears. */
+    consume() {
+        const value = this.uaAnimated;
+        this.uaAnimated = false;
+        return value;
+    }
+    destroy() {
+        this.detach();
+    }
+}
+
+/**
+ * Which tab a URL belongs to, or `''` when the app has no tabs — or when the URL belongs to none of
+ * them, which is what a login screen or a full-screen modal route looks like. Those get their own
+ * stack, outside the tab bar, which is almost always what you want.
+ */
+function tabOfUrl(url, tabs) {
+    if (!tabs?.length)
+        return '';
+    // Strip the leading slash, query and fragment, then take the first segment.
+    const path = url.replace(/^\/+/, '').split(/[?#]/, 1)[0];
+    const first = path.split('/', 1)[0];
+    return tabs.includes(first) ? first : '';
+}
+/**
+ * `data: { tab: 'search' }` — for a page that belongs to a tab its URL doesn't name.
+ *
+ * Most apps nest their URLs by tab and never need this. But a flat route, or a tab whose pages live
+ * under a different prefix, has no way to say where it belongs otherwise, and would silently land in
+ * the no-tab stack: mounted, outside the tab bar, and stranded the moment you switch tabs.
+ */
+function tabOfRouteData(data, tabs) {
+    const tab = data?.['tab'];
+    if (typeof tab !== 'string')
+        return null;
+    if (tabs?.length && !tabs.includes(tab)) {
+        throw new Error(`[ngx-stack] A route declares data: { tab: '${tab}' }, but '${tab}' is not one of the ` +
+            `configured tabs [${tabs.join(', ')}]. Its pages would go to a stack no tab can reach.`);
+    }
+    return tab;
+}
+/**
+ * The tab a route belongs to, asking it and then every route it is nested inside.
+ *
+ * The point of walking the ancestors: with nested routes you declare the tab **once**, on the tab's
+ * root, and every page under it inherits — rather than repeating `data: { tab }` on each one.
+ *
+ * Deliberately reads `routeConfig.data` rather than the snapshot's own `data`. The snapshot's
+ * version already merges in inherited data, but only from ancestors Angular considers inheritable
+ * (componentless ones, unless you change `paramsInheritanceStrategy`). Walking the configs ourselves
+ * means a tab root works whether or not it happens to have a component.
+ */
+function tabOfRouteTree(pathFromRoot, tabs) {
+    // Innermost first, so a page can override the tab it is nested in.
+    for (let i = pathFromRoot.length - 1; i >= 0; i--) {
+        const tab = tabOfRouteData(pathFromRoot[i].routeConfig?.data, tabs);
+        if (tab)
+            return tab;
+    }
+    return null;
+}
+/**
+ * Which stack a page belongs on: what the route tree says, and failing that, what its URL implies.
+ *
+ * The single place that answers this, so the outlet (which files the page) and `NgxStackTabs` (which
+ * lights up the tab bar) can never disagree about where a page went.
+ */
+function tabOfRoute(snapshot, url, tabs) {
+    return tabOfRouteTree(snapshot.pathFromRoot, tabs) ?? tabOfUrl(url, tabs);
+}
+
+/** What Angular's own `OutletInjector` does: hand routed components their route and contexts. */
+class StackOutletInjector {
+    route;
+    childContexts;
+    parent;
+    constructor(route, childContexts, parent) {
+        this.route = route;
+        this.childContexts = childContexts;
+        this.parent = parent;
+    }
+    get(token, notFoundValue, options) {
+        if (token === ActivatedRoute)
+            return this.route;
+        if (token === ChildrenOutletContexts)
+            return this.childContexts;
+        return this.parent.get(token, notFoundValue, options);
+    }
+}
+/**
+ * A `<router-outlet>` that keeps a stack instead of a single page.
+ *
+ * The stock outlet destroys the outgoing component the moment you navigate. That is the right
+ * default and completely incompatible with a swipe-back: the page you are swiping back to has to
+ * already be on screen, mounted and painted, *before* the navigation that reveals it happens —
+ * otherwise there is nothing to drag into view.
+ *
+ * So pages here are mounted once and stay. Which one you are looking at is decided by where you are
+ * in the history, and the direction of each transition is inferred by asking whether the incoming
+ * URL is already on the stack (going back) or not (going forward).
+ *
+ * With `tabs` configured, one outlet holds one stack per tab and shows the active one.
+ */
+class NgxStackOutlet extends StackHostBase {
+    /** Matches `<router-outlet name>`, for named outlets. */
+    name = input(PRIMARY_OUTLET, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Swipe-back for this stack specifically. `null` (the default) defers to `NgxStackSwipe`, the
+     * app-wide switch; `true` or `false` overrides it here.
+     */
+    swipeBack = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swipeBack" }] : /* istanbul ignore next */ []));
+    parentContexts = inject(ChildrenOutletContexts);
+    router = inject(Router);
+    nav = inject(NgxStackNav);
+    document = inject(DOCUMENT);
+    systemTransition = null;
+    activatedRouteRef = null;
+    current = null;
+    initialized = false;
+    /** A committed swipe, animated to the end, waiting for the router to catch up. */
+    pendingSwipe = null;
+    // Required by RouterOutletContract, which predates `output()` and types these as EventEmitters.
+    activateEvents = new EventEmitter();
+    deactivateEvents = new EventEmitter();
+    attachEvents = new EventEmitter();
+    detachEvents = new EventEmitter();
+    activeTab = this.controller.activeTab;
+    /**
+     * Is there anywhere to go back to? Show your back button on this.
+     *
+     * True even with a single page on the stack, if that page has a parent it could go up to — which
+     * is exactly the cold-deep-link case, where nothing is beneath but obviously something should be.
+     */
+    canGoBack = computed(() => this.controller.canGoBack() || this.parentOfTop() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoBack" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // If a navigation dies after a swipe has already animated the page away, put it back.
+        this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+            if (event instanceof NavigationCancel || event instanceof NavigationError) {
+                this.rollBackPendingSwipe();
+            }
+        });
+    }
+    ngOnInit() {
+        if (this.initialized)
+            return;
+        this.initialized = true;
+        this.parentContexts.onChildOutletCreated(this.name(), this);
+        // The route can be activated before the outlet exists — e.g. it sits inside an `@if` that only
+        // just became true. Pick up whatever is already waiting for us.
+        const context = this.parentContexts.getContext(this.name());
+        if (context?.route) {
+            this.activateWith(context.route, context.injector);
+        }
+        this.startGesture();
+        this.nav.registerStack(this);
+        const win = this.document.defaultView;
+        if (win)
+            this.systemTransition = new SystemTransitionWatcher(win);
+    }
+    // ---------------------------------------------------------------------------
+    // RouterOutletContract
+    // ---------------------------------------------------------------------------
+    get isActivated() {
+        return this.current !== null;
+    }
+    get component() {
+        return this.current?.ref.instance ?? null;
+    }
+    get activatedRoute() {
+        return this.activatedRouteRef;
+    }
+    get activatedRouteData() {
+        return this.activatedRouteRef?.snapshot.data ?? {};
+    }
+    activateWith(route, environmentInjector) {
+        const url = this.urlOf(route);
+        const tab = tabOfRoute(route.snapshot, url, this.config.tabs);
+        const hint = readDirectionHint(this.router);
+        // If the browser already drew its own back animation, drawing ours would double it up.
+        let animated = !(this.systemTransition?.consume() ?? false);
+        // A caller rebuilding a stack at startup wants the pages to just *be* there, not to watch them
+        // fly in one after another.
+        if (readAnimatedHint(this.router) === false)
+            animated = false;
+        // Changing tabs is not a push and not a pop — it's a cut. Nothing is created, nothing destroyed,
+        // the other tab's stack simply comes back on screen exactly as it was. Sliding it in would imply
+        // a relationship between the two tabs that doesn't exist.
+        if (tab !== this.controller.activeTab() && hint !== 'root')
+            animated = false;
+        const existingIndex = this.controller.findByUrl(url, tab);
+        const swipe = this.pendingSwipe;
+        this.pendingSwipe = null;
+        if (swipe) {
+            // The swipe already ran the whole animation. Hand its player to the controller so it finalises
+            // instead of transitioning a second time — but only if history actually took us where the
+            // swipe aimed. If something else intervened, throw the gesture's work away.
+            const aimedAt = existingIndex >= 0 && this.controller.at(existingIndex, tab) === swipe.entering;
+            if (aimedAt) {
+                this.adopt(swipe.entering, route);
+                void this.controller.run({
+                    kind: 'pop',
+                    tab,
+                    toIndex: existingIndex,
+                    animated: true,
+                    player: swipe.player,
+                });
+                return;
+            }
+            swipe.player.destroy();
+        }
+        const goingBack = hint !== 'forward' && hint !== 'root';
+        // Already on the stack: unwind to it.
+        if (goingBack && existingIndex >= 0) {
+            this.adopt(this.controller.at(existingIndex, tab), route);
+            void this.controller.run({ kind: 'pop', tab, toIndex: existingIndex, animated });
+            return;
+        }
+        // Going back to a page that isn't mounted. Two ways that happens, wanting the same handling:
+        // `maxDepth` evicted it, or we deep-linked into the middle of the app and are walking up to a
+        // parent that was never built. Either way, rebuild it and animate as a *back*, because that is
+        // what actually happened — whatever the DOM currently remembers about it.
+        if (hint === 'back' || (goingBack && this.controller.wasPruned(url, tab))) {
+            const entry = this.createEntry(route, environmentInjector, url, tab);
+            this.adopt(entry, route);
+            void this.controller.run({ kind: 'restore', tab, entering: entry, animated });
+            this.activateEvents.emit(entry.ref.instance);
+            return;
+        }
+        const entry = this.createEntry(route, environmentInjector, url, tab);
+        this.adopt(entry, route);
+        // `replaceUrl: true` says the history entry was overwritten rather than added. The stack has to
+        // agree: swap the top page rather than stack a second one on it, or the stack grows while
+        // history doesn't and a back button starts skipping pages.
+        const replacing = this.router.getCurrentNavigation()?.extras.replaceUrl === true && this.controller.depth() > 0;
+        void this.controller.run(hint === 'root'
+            ? { kind: 'root', tab, entering: entry, animated }
+            : replacing
+                ? { kind: 'replace', tab, entering: entry, animated }
+                : { kind: 'push', tab, entering: entry, animated });
+        this.activateEvents.emit(entry.ref.instance);
+    }
+    deactivate() {
+        const entry = this.current;
+        if (entry) {
+            const context = this.parentContexts.getContext(this.name());
+            if (context) {
+                // Hold on to this page's nested outlets, so coming back to it doesn't find them empty.
+                entry.savedContexts = context.children.onOutletDeactivated();
+            }
+            this.deactivateEvents.emit(entry.ref.instance);
+        }
+        // Note what we do *not* do here: destroy the component. It stays on the stack. If it is being
+        // popped, the controller destroys it once the transition has played out.
+        this.current = null;
+        this.activatedRouteRef = null;
+    }
+    detach() {
+        throw new Error('[ngx-stack] detach() is not supported. <ngx-stack-outlet> manages page lifetime itself; a ' +
+            'RouteReuseStrategy that returns shouldDetach: true will fight it. provideNgxStack() ' +
+            'installs NgxStackRouteReuseStrategy for exactly this reason.');
+    }
+    attach() {
+        throw new Error('[ngx-stack] attach() is not supported. See detach().');
+    }
+    // ---------------------------------------------------------------------------
+    // StackHostBase / BackTarget
+    // ---------------------------------------------------------------------------
+    swipeBackOverride() {
+        return this.swipeBack();
+    }
+    guardPolicy() {
+        return this.config.guardPolicy;
+    }
+    commitSwipeBack(back, ms) {
+        void back.player.settle(1, ms).then(() => {
+            this.pendingSwipe = back;
+            // Go back for real, so the URL and the browser's back button stay honest. The animation is
+            // already finished; `activateWith` will adopt the player and just tidy up.
+            void this.nav.back();
+        });
+    }
+    /**
+     * Where a "back" should actually go.
+     *
+     * Usually the page beneath the top of the *active* stack — which, with tabs, is emphatically not
+     * whatever the browser happens to have behind us in history. When nothing is beneath, we fall back
+     * to the page this one sits under. That page isn't mounted, so it has to be built; `mounted` is
+     * how {@link NgxStackNav.back} tells the two apart, because only one of them can be served by a
+     * plain `history.back()`.
+     */
+    backTarget() {
+        const stack = this.controller.pages();
+        if (stack.length >= 2) {
+            return { url: stack[stack.length - 2].url, mounted: true };
+        }
+        const parent = this.parentOfTop();
+        return parent ? { url: parent, mounted: false } : null;
+    }
+    rollBackPendingSwipe() {
+        const swipe = this.pendingSwipe;
+        if (!swipe)
+            return;
+        this.pendingSwipe = null;
+        void this.controller.abortInteractiveBack(swipe, this.config.duration);
+    }
+    // ---------------------------------------------------------------------------
+    /**
+     * Where the top page sits, when nothing is mounted underneath it.
+     *
+     * Nobody normally has to say: `/inbox/item/12` obviously sits under `/inbox`, and the route config
+     * already knows it. `data: { parent }` is only for URLs that don't tell the truth.
+     */
+    parentOfTop() {
+        const url = this.controller.top()?.url;
+        return url ? deriveParentUrl(this.router.config, url) : null;
+    }
+    createEntry(route, environmentInjector, url, tab) {
+        const component = route.snapshot.routeConfig?.component;
+        if (!component) {
+            throw new Error(`[ngx-stack] Route "${url}" has no component. <ngx-stack-outlet> can only host component ` +
+                'routes — loadComponent is fine, but redirects and componentless routes are not.');
+        }
+        const childContexts = this.parentContexts.getOrCreateContext(this.name()).children;
+        const injector = new StackOutletInjector(route, childContexts, this.viewContainer.injector);
+        const ref = this.createPage(component, { injector, environmentInjector });
+        return this.controller.adopt(ref, url, route, tab);
+    }
+    /** Make `entry` the outlet's current page and give it back its nested outlets. */
+    adopt(entry, route) {
+        entry.route = route;
+        this.current = entry;
+        this.activatedRouteRef = route;
+        const context = this.parentContexts.getContext(this.name());
+        if (context && entry.savedContexts) {
+            context.children.onOutletReAttached(entry.savedContexts);
+            entry.savedContexts = undefined;
+        }
+    }
+    urlOf(route) {
+        return this.router.serializeUrl(this.router.createUrlTree(['.'], { relativeTo: route }));
+    }
+    ngOnDestroy() {
+        this.systemTransition?.destroy();
+        this.nav.unregisterStack(this);
+        this.parentContexts.onChildOutletDestroyed(this.name());
+        super.ngOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackOutlet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: NgxStackOutlet, isStandalone: true, selector: "ngx-stack-outlet", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, swipeBack: { classPropertyName: "swipeBack", publicName: "swipeBack", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngx-stack-host" }, exportAs: ["ngxStackOutlet"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackOutlet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-stack-outlet',
+                    template: '',
+                    host: { class: 'ngx-stack-host' },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'ngxStackOutlet',
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], swipeBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeBack", required: false }] }] } });
+
+/** Imperative stacks have no URLs, so all their pages live in the one unnamed stack. */
+const NO_TAB = '';
+/**
+ * A self-contained page stack with no URLs — the escape hatch for navigation that has no business
+ * being in the address bar.
+ *
+ * A multi-step filter sheet, a wizard inside a modal, a drill-down in one tab of a tab bar: these
+ * are all stacks, they all want the same push/pop transition and the same swipe-back, and none of
+ * them should push history entries that the browser's back button then has to unwind one at a time.
+ *
+ * ```html
+ * <ngx-stack [root]="FilterStep1" #filters />
+ * ```
+ * ```ts
+ * filters.push(FilterStep2, { category: 'shoes' });
+ * ```
+ *
+ * Pages reach the stack they are standing on with `inject(NgxStack)`. For anything the user should
+ * be able to link to, bookmark or reload, use `<ngx-stack-outlet>` instead.
+ */
+class NgxStack extends StackHostBase {
+    /** The bottom page. Mounted on init; use `setRoot()` to change it afterwards. */
+    root = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
+    /** Inputs for the root page, applied with `setInput`. */
+    rootInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rootInputs" }] : /* istanbul ignore next */ []));
+    /**
+     * Swipe-back for this stack specifically. `null` (the default) defers to `NgxStackSwipe`, the
+     * app-wide switch; `true` or `false` overrides it here.
+     */
+    swipeBack = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swipeBack" }] : /* istanbul ignore next */ []));
+    /** The stack's own node injector, so pages can `inject(NgxStack)` and push further. */
+    pageInjector = inject(Injector);
+    canGoBack = this.controller.canGoBack;
+    ngOnInit() {
+        const root = this.root();
+        if (root) {
+            const entry = this.mount(root, this.rootInputs());
+            void this.controller.run({ kind: 'push', tab: NO_TAB, entering: entry, animated: false });
+        }
+        this.startGesture();
+    }
+    /** Push a page on top. Resolves when the transition has finished. */
+    push(component, inputs) {
+        const entry = this.mount(component, inputs);
+        return this.controller.run({ kind: 'push', tab: NO_TAB, entering: entry, animated: true });
+    }
+    /** Pop the top page. A no-op at the root, so it is safe to call blindly. */
+    pop() {
+        return this.popTo(this.controller.depth() - 2);
+    }
+    /** Unwind to the page at `index` (0 is the root), destroying everything above it. */
+    popTo(index) {
+        if (index < 0 || index >= this.controller.depth() - 1)
+            return Promise.resolve();
+        return this.controller.run({ kind: 'pop', tab: NO_TAB, toIndex: index, animated: true });
+    }
+    popToRoot() {
+        return this.popTo(0);
+    }
+    /** Throw the stack away and start again from `component`. */
+    setRoot(component, inputs) {
+        const entry = this.mount(component, inputs);
+        return this.controller.run({ kind: 'root', tab: NO_TAB, entering: entry, animated: true });
+    }
+    // ---------------------------------------------------------------------------
+    // StackHostBase
+    // ---------------------------------------------------------------------------
+    swipeBackOverride() {
+        return this.swipeBack();
+    }
+    /** No routes here, so no `canDeactivate` guards to be careful about. */
+    guardPolicy() {
+        return 'allow';
+    }
+    commitSwipeBack(back, ms) {
+        void back.player.settle(1, ms).then(() => {
+            const index = this.controller.pages().indexOf(back.entering);
+            if (index < 0)
+                return;
+            // Hand the finished player over so the pop finalises rather than animating a second time.
+            void this.controller.run({
+                kind: 'pop',
+                tab: NO_TAB,
+                toIndex: index,
+                animated: true,
+                player: back.player,
+            });
+        });
+    }
+    // ---------------------------------------------------------------------------
+    mount(component, inputs) {
+        const ref = this.createPage(component, { injector: this.pageInjector });
+        for (const [name, value] of Object.entries(inputs ?? {})) {
+            ref.setInput(name, value);
+        }
+        return this.controller.adopt(ref, '', null, NO_TAB);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStack, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: NgxStack, isStandalone: true, selector: "ngx-stack", inputs: { root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null }, rootInputs: { classPropertyName: "rootInputs", publicName: "rootInputs", isSignal: true, isRequired: false, transformFunction: null }, swipeBack: { classPropertyName: "swipeBack", publicName: "swipeBack", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngx-stack-host" }, exportAs: ["ngxStack"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStack, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-stack',
+                    template: '',
+                    host: { class: 'ngx-stack-host' },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'ngxStack',
+                }]
+        }], propDecorators: { root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: false }] }], rootInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootInputs", required: false }] }], swipeBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeBack", required: false }] }] } });
+
+/**
+ * Remembers where you were in each tab.
+ *
+ * The stacks themselves are `NgxStackOutlet`'s job — configure `tabs` and it keeps one per tab,
+ * mounted and untouched while you're elsewhere. This is the other half: tapping "Search" should
+ * take you back to the search result you were reading three screens deep, not dump you at the
+ * search tab's front page. So we watch navigations, note the current URL of each tab, and
+ * `select()` returns you to it.
+ *
+ * The tab *bar* is yours to draw — the library ships no visual design. All you need from us:
+ *
+ * ```ts
+ * const tabs = inject(NgxStackTabs);
+ * ```
+ * ```html
+ * @for (tab of ['home', 'search', 'profile']; track tab) {
+ *   <button [class.active]="tabs.active() === tab" (click)="tabs.select(tab)">{{ tab }}</button>
+ * }
+ * ```
+ */
+class NgxStackTabs {
+    router = inject(Router);
+    config = inject(NGX_STACK_CONFIG);
+    urls = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "urls" }] : /* istanbul ignore next */ []));
+    _active = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+    /** The tab currently on screen, or `''` before the first navigation into one. */
+    active = this._active.asReadonly();
+    /** The tabs you configured, in order. */
+    tabs = computed(() => this.config.tabs ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+            if (!(event instanceof NavigationEnd))
+                return;
+            const url = event.urlAfterRedirects;
+            // Exactly the rule the outlet uses to file the page, so the bar and the stacks can't disagree.
+            const tab = tabOfRoute(this.leaf(), url, this.config.tabs);
+            if (!tab)
+                return;
+            this._active.set(tab);
+            this.urls.update((urls) => ({ ...urls, [tab]: url }));
+        });
+    }
+    /** The page that actually landed. */
+    leaf() {
+        let route = this.router.routerState.snapshot.root;
+        while (route.firstChild)
+            route = route.firstChild;
+        return route;
+    }
+    /** Where `tab` was last seen, or its front page if it hasn't been visited yet. */
+    urlOf(tab) {
+        return this.urls()[tab] ?? `/${tab}`;
+    }
+    /**
+     * Switch to `tab`, landing back on whatever page you last had open there.
+     *
+     * Tapping the tab you're already on takes you to its root, which is what every native tab bar
+     * does — it's the standard way back out of a deep drill-down.
+     */
+    select(tab) {
+        if (tab === this._active()) {
+            return this.router.navigateByUrl(`/${tab}`);
+        }
+        return this.router.navigateByUrl(this.urlOf(tab));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackTabs, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackTabs, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxStackTabs, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Pages swap instantly.
+ *
+ * Give it to a platform you'd rather not animate — `transitions: { web: noneTransition }` is a
+ * common choice, since a page slide on a desktop monitor mostly just moves a lot of pixels.
+ *
+ * Note this also disarms the swipe on that platform in practice: there are no keyframes for a finger
+ * to scrub, so a drag has nothing to follow.
+ */
+const noneTransition = () => ({
+    duration: 0,
+    easing: 'linear',
+    animations: [],
+});
+
+/*
+ * ngx-stack — native-feeling page stacks for Angular.
+ */
+// Setup
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGX_STACK_PLATFORM, NgxStack, NgxStackNav, NgxStackOutlet, NgxStackRouteReuseStrategy, NgxStackSwipe, NgxStackTabs, androidTransition, deriveParentUrl, iosTransition, noneTransition, provideCapacitorBack, provideCordovaBack, provideNgxStack, riseTransition, scrimOf, slideTransition, webTransition };
+//# sourceMappingURL=ngx-stack.mjs.map