@stacknav/angular 0.1.1

package/fesm2022/stacknav-angular.mjs

@@ -0,0 +1,724 @@
+import { Location, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, input, EventEmitter, ViewContainerRef, ChangeDetectorRef, ElementRef, Injector, reflectComponentType, Output, Input, Directive } from '@angular/core';
+import { Router, ROUTER_CONFIGURATION, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, NavigationSkipped, PRIMARY_OUTLET, ChildrenOutletContexts, ActivatedRoute, ROUTER_OUTLET_DATA, BaseRouteReuseStrategy } from '@angular/router';
+import { createDirectionResolver, defaultStrategies, createIOSStack, injectStyles, segmentsOf } from '@stacknav/core';
+import { BehaviorSubject, switchMap, Subscription, combineLatest, of, from } from 'rxjs';
+
+/**
+ * The `ActivatedRoute` a page component injects. When a page kept alive beneath
+ * the stack is reached again, the router hands it a new route object. This
+ * proxy keeps the component's subscriptions valid by switching them to whichever
+ * route is current.
+ */
+class StackNavActivatedRoute {
+    current$;
+    url;
+    params;
+    queryParams;
+    fragment;
+    data;
+    title;
+    paramMap;
+    queryParamMap;
+    constructor(route) {
+        this.current$ = new BehaviorSubject(route);
+        const of = (pick) => this.current$.pipe(switchMap(pick));
+        this.url = of((r) => r.url);
+        this.params = of((r) => r.params);
+        this.queryParams = of((r) => r.queryParams);
+        this.fragment = of((r) => r.fragment);
+        this.data = of((r) => r.data);
+        this.title = of((r) => r.title);
+        this.paramMap = of((r) => r.paramMap);
+        this.queryParamMap = of((r) => r.queryParamMap);
+    }
+    /** The router's route object behind the proxy right now. */
+    get actual() {
+        return this.current$.value;
+    }
+    /** @internal */
+    swap(route) {
+        if (route !== this.current$.value)
+            this.current$.next(route);
+    }
+    get snapshot() {
+        return this.actual.snapshot;
+    }
+    get outlet() {
+        return this.actual.outlet;
+    }
+    get component() {
+        return this.actual.component;
+    }
+    get routeConfig() {
+        return this.actual.routeConfig;
+    }
+    get root() {
+        return this.actual.root;
+    }
+    get parent() {
+        return this.actual.parent;
+    }
+    get firstChild() {
+        return this.actual.firstChild;
+    }
+    get children() {
+        return this.actual.children;
+    }
+    get pathFromRoot() {
+        return this.actual.pathFromRoot;
+    }
+    toString() {
+        return this.actual.toString();
+    }
+}
+
+const STACKNAV_CONFIG = /*#__PURE__*/ new InjectionToken('STACKNAV_CONFIG', {
+    providedIn: 'root',
+    factory: () => resolveConfig({}),
+});
+function defaultLevelOf(snapshot) {
+    const v = snapshot.data?.['stackLevel'];
+    return typeof v === 'number' ? v : undefined;
+}
+/** The route's URL path from the root down to and including this route, e.g. `items/42;view=full`. */
+function defaultKeyOf(snapshot) {
+    return snapshot.pathFromRoot
+        .flatMap((s) => s.url.map((u) => u.toString()))
+        .join('/');
+}
+function resolveConfig(c) {
+    const resolve = typeof c.direction === 'function'
+        ? c.direction
+        : createDirectionResolver(c.direction ?? defaultStrategies(), c.fallbackDirection ?? 'push');
+    return {
+        resolve,
+        levelOf: c.levelOf ?? defaultLevelOf,
+        keyOf: c.keyOf ?? defaultKeyOf,
+        infoKey: c.infoKey ?? 'stacknav',
+        transition: c.transition ?? {},
+        gesture: c.gesture ?? {},
+        detachInactiveViews: c.detachInactiveViews ?? false,
+        injectStyles: c.injectStyles ?? true,
+        animated: c.animated ?? true,
+    };
+}
+/**
+ * Configures the outlets. Add it next to `provideRouter()`. It changes no
+ * router configuration.
+ *
+ * ```ts
+ * bootstrapApplication(App, { providers: [provideRouter(routes), provideStackNav()] });
+ * ```
+ */
+function provideStackNav(config = {}) {
+    return makeEnvironmentProviders([{ provide: STACKNAV_CONFIG, useValue: resolveConfig(config) }]);
+}
+
+/**
+ * A model of the browser's history as the router walks it: which entry is
+ * current, and which came before. It answers two questions for the outlet: is
+ * this navigation going back or forward, and is the previous history entry the
+ * page beneath the top? Everything comes from public router events, so it needs
+ * no router configuration. Internal to the outlet.
+ */
+class StackNavHistory {
+    router = inject(Router);
+    config = inject(STACKNAV_CONFIG);
+    cancelResolution = inject(ROUTER_CONFIGURATION, { optional: true })?.canceledNavigationResolution ?? 'replace';
+    entries = [];
+    cursor = -1;
+    pending = null;
+    constructor() {
+        this.router.events.subscribe((e) => {
+            if (e instanceof NavigationStart)
+                this.onStart(e);
+            else if (e instanceof NavigationEnd)
+                this.onEnd(e);
+            else if (e instanceof NavigationCancel || e instanceof NavigationError)
+                this.onAbort();
+            else if (e instanceof NavigationSkipped)
+                this.pending = null;
+        });
+    }
+    /** The navigation in flight, if any. Valid while the router activates routes. */
+    get current() {
+        return this.pending;
+    }
+    /** URL of the history entry before the current one, or null. */
+    get previousUrl() {
+        return this.cursor > 0 ? this.entries[this.cursor - 1].url : null;
+    }
+    get currentUrl() {
+        return this.cursor >= 0 ? this.entries[this.cursor].url : null;
+    }
+    get canGoBack() {
+        return this.cursor > 0;
+    }
+    onStart(e) {
+        const nav = this.router.getCurrentNavigation();
+        const isHistory = e.navigationTrigger === 'popstate' || e.navigationTrigger === 'hashchange';
+        const restoredId = e.restoredState?.navigationId ?? null;
+        let historyDelta;
+        if (isHistory) {
+            const idx = this.indexOf(restoredId);
+            if (idx >= 0 && this.cursor >= 0)
+                historyDelta = idx - this.cursor;
+            else if (restoredId != null && this.cursor >= 0)
+                historyDelta = restoredId < this.entries[this.cursor].id ? -1 : 1;
+        }
+        const hint = isHistory ? undefined : readHint(nav?.extras.info, this.config.infoKey);
+        this.pending = {
+            id: e.id,
+            trigger: isHistory ? 'history' : 'imperative',
+            historyDelta,
+            hint: hint?.direction,
+            animated: hint?.animated,
+            replaceUrl: !!nav?.extras.replaceUrl,
+            skipLocationChange: !!nav?.extras.skipLocationChange,
+            restoredId,
+        };
+    }
+    onEnd(e) {
+        const p = this.pending;
+        this.pending = null;
+        const entry = { id: e.id, url: e.urlAfterRedirects };
+        if (!p || this.cursor < 0) {
+            this.entries = [entry];
+            this.cursor = 0;
+            return;
+        }
+        if (p.trigger === 'history') {
+            const idx = this.indexOf(p.restoredId);
+            if (idx >= 0) {
+                this.cursor = idx;
+                this.entries[idx] = entry; // the router rewrites the entry's navigationId on popstate
+            }
+            else {
+                this.entries = [entry];
+                this.cursor = 0;
+            }
+            return;
+        }
+        if (p.skipLocationChange)
+            return;
+        if (p.replaceUrl) {
+            this.entries[this.cursor] = entry;
+            return;
+        }
+        this.entries.splice(this.cursor + 1);
+        this.entries.push(entry);
+        this.cursor++;
+    }
+    /**
+     * Handles a history navigation the router refused. With
+     * `canceledNavigationResolution: 'computed'` the router walks the browser back
+     * to where it was, so nothing changes here. With the default `'replace'` it
+     * overwrites the entry the browser landed on with the current URL and the last
+     * successful id.
+     */
+    onAbort() {
+        const p = this.pending;
+        this.pending = null;
+        if (!p || p.trigger !== 'history' || this.cursor < 0 || this.cancelResolution === 'computed')
+            return;
+        const idx = this.indexOf(p.restoredId);
+        if (idx < 0)
+            return;
+        this.entries[idx] = { ...this.entries[this.cursor] };
+        this.cursor = idx;
+    }
+    /** The entry carrying `id`, preferring the nearest one that is not the current entry. */
+    indexOf(id) {
+        if (id == null)
+            return -1;
+        let best = -1;
+        for (let i = 0; i < this.entries.length; i++) {
+            if (this.entries[i].id !== id)
+                continue;
+            if (best < 0 || best === this.cursor || (i !== this.cursor && Math.abs(i - this.cursor) < Math.abs(best - this.cursor)))
+                best = i;
+        }
+        return best;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StackNavHistory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StackNavHistory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StackNavHistory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+function readHint(info, key) {
+    if (info == null || typeof info !== 'object')
+        return undefined;
+    const v = info[key];
+    if (v == null)
+        return undefined;
+    return typeof v === 'string' ? { direction: v } : v;
+}
+
+/**
+ * A router outlet (`RouterOutletContract`) that keeps a stack of pages and moves
+ * between them with the iOS push/pop transition. Use it where you would use
+ * `<router-outlet>`. The router drives it the same way:
+ *
+ * ```html
+ * <sn-outlet />
+ * ```
+ *
+ * Pages beneath the top stay alive, keeping scroll position, form state and
+ * subscriptions. A swipe from the leading edge pops interactively, and the
+ * direction of every navigation is decided by the strategies configured in
+ * `provideStackNav()`. The element needs a height; it is the pages' scroll
+ * container.
+ */
+class StackNavOutlet {
+    /** Outlet name, as on `router-outlet`. Static. */
+    name = PRIMARY_OUTLET;
+    /** Per-outlet transition options, merged over `provideStackNav({ transition })`. */
+    transition;
+    /** Per-outlet gesture options, merged over `provideStackNav({ gesture })`. `false` disables the swipe. */
+    gesture;
+    /** Same as on `router-outlet`: available to pages through `ROUTER_OUTLET_DATA`. */
+    routerOutletData = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerOutletData" }] : /* istanbul ignore next */ []));
+    /** A page component was created. */
+    activateEvents = new EventEmitter();
+    /** A page component was destroyed. */
+    deactivateEvents = new EventEmitter();
+    /** A kept page was shown again, or a detached one re-attached. */
+    attachEvents = new EventEmitter();
+    detachEvents = new EventEmitter();
+    /** Every activation, with the direction that was resolved for it. */
+    navigatedEvents = new EventEmitter();
+    parentContexts = inject(ChildrenOutletContexts);
+    location = inject(ViewContainerRef);
+    changeDetector = inject(ChangeDetectorRef);
+    host = inject(ElementRef).nativeElement;
+    config = inject(STACKNAV_CONFIG);
+    history = inject(StackNavHistory);
+    router = inject(Router);
+    browserLocation = inject(Location);
+    document = inject(DOCUMENT);
+    /** The underlying core stack. Subscribe to `progress` to drive your own chrome. */
+    stack;
+    /** The direction of the last activation. */
+    lastDirection = null;
+    /** Inputs are bound when the router was configured with `withComponentInputBinding()`. */
+    supportsBindingToComponentInputs;
+    views = [];
+    byEl = new Map();
+    detached = new Map();
+    activeView = null;
+    leaving = null;
+    activated = null;
+    _activatedRoute = null;
+    subs = new Subscription();
+    constructor() {
+        if (this.router.componentInputBindingEnabled)
+            this.supportsBindingToComponentInputs = true;
+    }
+    // ------------------------------------------------------------- lifecycle
+    ngOnInit() {
+        const gesture = this.gesture === false || this.config.gesture === false ? false : { ...(this.config.gesture || {}), ...(this.gesture || {}) };
+        this.stack = createIOSStack({
+            container: this.host,
+            transition: { ...this.config.transition, ...(this.transition || {}) },
+            gesture: gesture || {},
+        });
+        if (gesture === false)
+            this.stack.gesture.detach();
+        if (this.config.injectStyles)
+            injectStyles(this.document);
+        this.stack.on('pop', (e) => this.onStackRemoved(e.removed, e.source));
+        this.stack.on('replace', (e) => this.onStackRemoved(e.removed, e.source));
+        this.stack.on('reset', (e) => this.onStackRemoved(e.removed, e.source));
+        if (this.config.detachInactiveViews) {
+            this.stack.on('transitionstart', ({ lower, upper }) => {
+                for (const entry of [lower, upper]) {
+                    const view = entry && this.byEl.get(entry.el);
+                    if (view)
+                        view.ref.changeDetectorRef.reattach();
+                }
+            });
+            for (const event of ['push', 'pop', 'replace', 'reset'])
+                this.stack.on(event, () => this.syncChangeDetection());
+        }
+        this.subs.add(this.router.events.subscribe((e) => {
+            if (e instanceof NavigationCancel || e instanceof NavigationError || e instanceof NavigationSkipped)
+                this.restorePending();
+            else if (e instanceof NavigationEnd && this.activeView)
+                this.activeView.url = e.urlAfterRedirects;
+        }));
+        this.parentContexts.onChildOutletCreated(this.name, this);
+        const context = this.parentContexts.getContext(this.name);
+        if (context?.route) {
+            if (context.attachRef)
+                this.attach(context.attachRef, context.route);
+            else
+                this.activateWith(context.route, context.injector);
+        }
+    }
+    ngOnDestroy() {
+        if (this.parentContexts.getContext(this.name)?.outlet === this)
+            this.parentContexts.onChildOutletDestroyed(this.name);
+        this.subs.unsubscribe();
+        for (const view of this.byEl.values())
+            view.inputs?.unsubscribe();
+        this.stack?.destroy();
+    }
+    // -------------------------------------------------------- outlet contract
+    get isActivated() {
+        return !!this.activated;
+    }
+    get component() {
+        if (!this.activated)
+            throw new Error('Outlet is not activated');
+        return this.activated.instance;
+    }
+    get activatedComponentRef() {
+        return this.activated;
+    }
+    get activatedRoute() {
+        if (!this.activated)
+            throw new Error('Outlet is not activated');
+        return this._activatedRoute;
+    }
+    get activatedRouteData() {
+        return this._activatedRoute ? this._activatedRoute.snapshot.data : {};
+    }
+    /** Pages currently kept, bottom to top. The last one is on screen. */
+    get pages() {
+        return this.views;
+    }
+    /** Whether a swipe has a kept page to reveal. */
+    get canPop() {
+        return this.views.length > 1;
+    }
+    activateWith(activatedRoute, environmentInjector) {
+        if (this.activated)
+            throw new Error('Cannot activate an already activated outlet');
+        const snapshot = activatedRoute.snapshot;
+        const key = this.config.keyOf(snapshot);
+        const leaving = this.takeLeaving();
+        let existing = this.views.find((v) => v.key === key) ?? null;
+        if (existing === leaving)
+            existing = null;
+        const view = existing ?? this.createView(snapshot.component, activatedRoute, environmentInjector, key);
+        this.show(view, activatedRoute, leaving, !!existing);
+    }
+    deactivate() {
+        if (!this.activated)
+            return;
+        const view = this.activeView;
+        this.unbindInputs(view);
+        const context = this.parentContexts.getContext(this.name);
+        if (context)
+            view.savedContexts = context.children.contexts;
+        this.activated = null;
+        this._activatedRoute = null;
+        this.activeView = null;
+        if (view.pendingRemoval) {
+            this.destroyView(view);
+            return;
+        }
+        // The router deactivates before it activates, synchronously. If no
+        // activation follows, the outlet is really empty.
+        this.leaving = view;
+        queueMicrotask(() => {
+            if (this.leaving !== view)
+                return;
+            this.leaving = null;
+            this.views = [];
+            void this.stack.reset([]);
+        });
+    }
+    detach() {
+        if (!this.activated)
+            throw new Error('Outlet is not activated');
+        const view = this.activeView;
+        const ref = view.ref;
+        this.unbindInputs(view);
+        this.activated = null;
+        this._activatedRoute = null;
+        this.activeView = null;
+        this.byEl.delete(view.el);
+        this.views = this.views.filter((v) => v !== view);
+        this.detached.set(ref, view);
+        void this.stack.remove(view.el);
+        const i = this.location.indexOf(ref.hostView);
+        if (i >= 0)
+            this.location.detach(i);
+        this.detachEvents.emit(ref.instance);
+        return ref;
+    }
+    attach(ref, activatedRoute) {
+        const key = this.config.keyOf(activatedRoute.snapshot);
+        let view = this.detached.get(ref) ?? null;
+        this.detached.delete(ref);
+        if (!view)
+            view = this.wrap(ref, activatedRoute, key, null);
+        this.location.insert(ref.hostView);
+        this.park(view.el);
+        this.byEl.set(view.el, view);
+        const leaving = this.takeLeaving();
+        this.show(view, activatedRoute, leaving, true);
+    }
+    // -------------------------------------------------------------- internals
+    takeLeaving() {
+        const leaving = this.leaving;
+        this.leaving = null;
+        return leaving;
+    }
+    /** Decides the direction, places the page in the stack, and makes it active. */
+    show(view, activatedRoute, leaving, reused) {
+        const nav = this.history.current;
+        const from = leaving ?? this.views[this.views.length - 1] ?? null;
+        // Resolvers may have rerun, and a custom keyOf may group several snapshots, so the old snapshot cannot be trusted.
+        view.routeRef = this.routeRefOf(activatedRoute.snapshot, view.key);
+        const alreadyOnScreen = reused && !this.stack.busy && this.stack.top?.el === view.el;
+        let direction = this.config.resolve({
+            from: from?.routeRef ?? null,
+            to: view.routeRef,
+            trigger: nav?.trigger ?? 'imperative',
+            historyDelta: nav?.historyDelta,
+            hint: nav?.hint,
+            stack: this.views.map((v) => v.key),
+        });
+        // After a swipe the page beneath is already showing and the one that left
+        // is gone. A pop onto anything else has nothing to pop, so just show the page.
+        if (!leaving && this.stack.top && direction === 'pop' && !reused)
+            direction = 'replace';
+        const animated = this.config.animated && (nav?.animated ?? true) && (this.views.length > 0 || !!leaving);
+        view.route = activatedRoute;
+        view.proxy?.swap(activatedRoute);
+        const current = this.router.getCurrentNavigation();
+        view.url = current ? this.router.serializeUrl(current.finalUrl ?? current.extractedUrl) : this.router.url;
+        if (view.savedContexts) {
+            this.parentContexts.getOrCreateContext(this.name).children.onOutletReAttached(view.savedContexts);
+            view.savedContexts = null;
+        }
+        this.activated = view.ref;
+        this._activatedRoute = activatedRoute;
+        this.activeView = view;
+        this.lastDirection = direction;
+        this.place(view, direction, leaving);
+        if (!alreadyOnScreen) {
+            void this.stack.present(view.el, direction, { key: view.key, animated, source: sourceOf(nav?.trigger) });
+        }
+        this.changeDetector.markForCheck();
+        this.bindInputs(view);
+        // An animated page renders off screen during its first frames. A page that
+        // appears immediately (no animation, or a replace, which the stack never
+        // animates) would otherwise be blank until the next scheduled tick.
+        if ((!animated || direction === 'replace') && !alreadyOnScreen)
+            view.ref.changeDetectorRef.detectChanges();
+        (reused ? this.attachEvents : this.activateEvents).emit(view.ref.instance);
+        this.navigatedEvents.emit({ view, direction, animated, reused });
+    }
+    /** Mirrors what the stack will do, synchronously, so `pages` and the next direction stay correct. */
+    place(view, direction, leaving) {
+        const views = this.views;
+        const drop = (v) => {
+            const i = v ? views.indexOf(v) : -1;
+            if (i >= 0)
+                views.splice(i, 1);
+        };
+        if (direction === 'pop' && views.includes(view)) {
+            views.splice(views.indexOf(view) + 1);
+            return;
+        }
+        if (direction !== 'push')
+            drop(leaving);
+        drop(view);
+        views.push(view);
+    }
+    createView(component, route, environmentInjector, key) {
+        const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
+        const proxy = new StackNavActivatedRoute(route);
+        const injector = Injector.create({
+            providers: [
+                { provide: ActivatedRoute, useValue: proxy },
+                { provide: ChildrenOutletContexts, useValue: childContexts },
+                { provide: ROUTER_OUTLET_DATA, useValue: this.routerOutletData },
+            ],
+            parent: this.location.injector,
+        });
+        const ref = this.location.createComponent(component, { index: this.location.length, injector, environmentInjector });
+        const view = this.wrap(ref, route, key, proxy);
+        this.park(view.el);
+        this.byEl.set(view.el, view);
+        return view;
+    }
+    wrap(ref, route, key, proxy) {
+        const el = ref.location.nativeElement;
+        return { ref, el, key, routeRef: this.routeRefOf(route.snapshot, key), url: '', route, proxy, savedContexts: null, pendingRemoval: false, inputs: null };
+    }
+    /** Hidden inside the container until the stack shows it, never a visible sibling of the outlet. */
+    park(el) {
+        el.classList.add(this.stack.pageClass);
+        if (el.parentElement !== this.host)
+            this.host.append(el);
+    }
+    routeRefOf(snapshot, key) {
+        return { key, segments: segmentsOf(key), level: this.config.levelOf(snapshot), data: snapshot.data, snapshot };
+    }
+    onStackRemoved(removed, source) {
+        for (const entry of removed) {
+            const view = this.byEl.get(entry.el);
+            if (!view)
+                continue;
+            if (source === 'gesture') {
+                view.pendingRemoval = true;
+                this.views = this.views.filter((v) => v !== view);
+                this.navigateBackAfterGesture();
+            }
+            else {
+                this.destroyView(view);
+            }
+        }
+    }
+    /** The swipe already revealed the page beneath. Bring the router in line with it. */
+    navigateBackAfterGesture() {
+        const lower = this.views[this.views.length - 1];
+        if (!lower)
+            return;
+        const previous = this.history.previousUrl;
+        if (previous != null && this.sameUrl(previous, lower.url)) {
+            this.browserLocation.back();
+        }
+        else {
+            void this.router.navigateByUrl(lower.url, { info: { [this.config.infoKey]: { direction: 'pop', animated: false } } });
+        }
+    }
+    sameUrl(a, b) {
+        const norm = (u) => this.router.serializeUrl(this.router.parseUrl(u));
+        return norm(a) === norm(b);
+    }
+    /** The router refused the navigation the swipe asked for, so put the page back. */
+    restorePending() {
+        for (const view of this.byEl.values()) {
+            if (!view.pendingRemoval)
+                continue;
+            view.pendingRemoval = false;
+            this.views.push(view);
+            void this.stack.push(view.el, { animated: false, key: view.key, source: 'restore' });
+        }
+    }
+    destroyView(view) {
+        this.byEl.delete(view.el);
+        this.views = this.views.filter((v) => v !== view);
+        this.unbindInputs(view);
+        if (this.activeView === view) {
+            this.activeView = null;
+            this.activated = null;
+            this._activatedRoute = null;
+        }
+        const instance = view.ref.instance;
+        view.ref.destroy();
+        this.deactivateEvents.emit(instance);
+    }
+    bindInputs(view) {
+        if (!this.router.componentInputBindingEnabled)
+            return;
+        const mirror = reflectComponentType(view.ref.componentType);
+        if (!mirror)
+            return;
+        const route = view.route;
+        view.inputs = combineLatest([route.queryParams, route.params, route.data])
+            .pipe(switchMap(([queryParams, params, data], i) => (i === 0 ? of({ ...queryParams, ...params, ...data }) : from(Promise.resolve({ ...queryParams, ...params, ...data })))))
+            .subscribe((data) => {
+            if (this.activeView !== view)
+                return;
+            for (const { templateName } of mirror.inputs)
+                view.ref.setInput(templateName, data[templateName]);
+        });
+    }
+    unbindInputs(view) {
+        view.inputs?.unsubscribe();
+        view.inputs = null;
+    }
+    syncChangeDetection() {
+        const top = this.stack.top?.el;
+        for (const view of this.byEl.values()) {
+            if (view.el === top || view.pendingRemoval)
+                view.ref.changeDetectorRef.reattach();
+            else
+                view.ref.changeDetectorRef.detach();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StackNavOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StackNavOutlet, isStandalone: true, selector: "sn-outlet", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: false, isRequired: false, transformFunction: null }, gesture: { classPropertyName: "gesture", publicName: "gesture", isSignal: false, isRequired: false, transformFunction: null }, routerOutletData: { classPropertyName: "routerOutletData", publicName: "routerOutletData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activateEvents: "activate", deactivateEvents: "deactivate", attachEvents: "attach", detachEvents: "detach", navigatedEvents: "navigated" }, host: { styleAttribute: "display: block" }, exportAs: ["snOutlet"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StackNavOutlet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'sn-outlet',
+                    exportAs: 'snOutlet',
+                    host: { style: 'display: block' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{
+                type: Input
+            }], transition: [{
+                type: Input
+            }], gesture: [{
+                type: Input
+            }], routerOutletData: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerOutletData", required: false }] }], activateEvents: [{
+                type: Output,
+                args: ['activate']
+            }], deactivateEvents: [{
+                type: Output,
+                args: ['deactivate']
+            }], attachEvents: [{
+                type: Output,
+                args: ['attach']
+            }], detachEvents: [{
+                type: Output,
+                args: ['detach']
+            }], navigatedEvents: [{
+                type: Output,
+                args: ['navigated']
+            }] } });
+function sourceOf(trigger) {
+    return trigger === 'history' ? 'history' : 'api';
+}
+
+/**
+ * The router's default strategy reuses a component when only the params change
+ * (`/items/1` → `/items/2`), so no outlet activation happens and no transition
+ * can run. This strategy asks for a fresh page whenever the URL of the matched
+ * route differs, which is what a navigation stack expects. Routes opt out with
+ * `data: { reuseRoute: true }`.
+ *
+ * It is not installed automatically. Provide it like any other strategy to get
+ * this behaviour:
+ *
+ * ```ts
+ * { provide: RouteReuseStrategy, useClass: StackNavRouteReuseStrategy }
+ * ```
+ */
+class StackNavRouteReuseStrategy extends BaseRouteReuseStrategy {
+    shouldReuseRoute(future, curr) {
+        if (future.routeConfig !== curr.routeConfig)
+            return false;
+        if (future.data?.['reuseRoute'] === true)
+            return true;
+        return urlOf(future) === urlOf(curr);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StackNavRouteReuseStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StackNavRouteReuseStrategy });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StackNavRouteReuseStrategy, decorators: [{
+            type: Injectable
+        }] });
+function urlOf(s) {
+    return s.url.map((u) => u.toString()).join('/');
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { STACKNAV_CONFIG, StackNavActivatedRoute, StackNavOutlet, StackNavRouteReuseStrategy, defaultKeyOf, defaultLevelOf, provideStackNav, resolveConfig };
+//# sourceMappingURL=stacknav-angular.mjs.map