voyager-ionic-core 7.5.1 → 7.6.0

package/dist/collection/components/nav/nav.js

@@ -11,1845 +11,1845 @@ import { getIonMode } from "../../global/ionic-global";
 import { LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from "./constants";
 import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews, matches } from "./view-controller";
 export class Nav {
-  constructor() {
-    this.transInstr = [];
-    this.gestureOrAnimationInProgress = false;
-    this.useRouter = false;
-    this.isTransitioning = false;
-    this.destroyed = false;
-    this.views = [];
-    this.didLoad = false;
-    this.delegate = undefined;
-    this.swipeGesture = undefined;
-    this.animated = true;
-    this.animation = undefined;
-    this.rootParams = undefined;
-    this.root = undefined;
-  }
-  swipeGestureChanged() {
-    if (this.gesture) {
-      this.gesture.enable(this.swipeGesture === true);
-    }
-  }
-  rootChanged() {
-    const isDev = Build.isDev;
-    if (this.root === undefined) {
-      return;
+    constructor() {
+        this.transInstr = [];
+        this.gestureOrAnimationInProgress = false;
+        this.useRouter = false;
+        this.isTransitioning = false;
+        this.destroyed = false;
+        this.views = [];
+        this.didLoad = false;
+        this.delegate = undefined;
+        this.swipeGesture = undefined;
+        this.animated = true;
+        this.animation = undefined;
+        this.rootParams = undefined;
+        this.root = undefined;
     }
-    if (this.didLoad === false) {
-      /**
-       * If the component has not loaded yet, we can skip setting up the root component.
-       * It will be called when `componentDidLoad` fires.
-       */
-      return;
+    swipeGestureChanged() {
+        if (this.gesture) {
+            this.gesture.enable(this.swipeGesture === true);
+        }
     }
-    if (!this.useRouter) {
-      if (this.root !== undefined) {
-        this.setRoot(this.root, this.rootParams);
-      }
+    rootChanged() {
+        const isDev = Build.isDev;
+        if (this.root === undefined) {
+            return;
+        }
+        if (this.didLoad === false) {
+            /**
+             * If the component has not loaded yet, we can skip setting up the root component.
+             * It will be called when `componentDidLoad` fires.
+             */
+            return;
+        }
+        if (!this.useRouter) {
+            if (this.root !== undefined) {
+                this.setRoot(this.root, this.rootParams);
+            }
+        }
+        else if (isDev) {
+            printIonWarning('<ion-nav> does not support a root attribute when using ion-router.', this.el);
+        }
     }
-    else if (isDev) {
-      printIonWarning('<ion-nav> does not support a root attribute when using ion-router.', this.el);
+    componentWillLoad() {
+        this.useRouter = document.querySelector('ion-router') !== null && this.el.closest('[no-router]') === null;
+        if (this.swipeGesture === undefined) {
+            const mode = getIonMode(this);
+            this.swipeGesture = config.getBoolean('swipeBackEnabled', mode === 'ios');
+        }
+        this.ionNavWillLoad.emit();
     }
-  }
-  componentWillLoad() {
-    this.useRouter = document.querySelector('ion-router') !== null && this.el.closest('[no-router]') === null;
-    if (this.swipeGesture === undefined) {
-      const mode = getIonMode(this);
-      this.swipeGesture = config.getBoolean('swipeBackEnabled', mode === 'ios');
+    async componentDidLoad() {
+        // We want to set this flag before any watch callbacks are manually called
+        this.didLoad = true;
+        this.rootChanged();
+        this.gesture = (await import('../../utils/gesture/swipe-back')).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+        this.swipeGestureChanged();
     }
-    this.ionNavWillLoad.emit();
-  }
-  async componentDidLoad() {
-    // We want to set this flag before any watch callbacks are manually called
-    this.didLoad = true;
-    this.rootChanged();
-    this.gesture = (await import('../../utils/gesture/swipe-back')).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
-    this.swipeGestureChanged();
-  }
-  connectedCallback() {
-    this.destroyed = false;
-  }
-  disconnectedCallback() {
-    for (const view of this.views) {
-      lifecycle(view.element, LIFECYCLE_WILL_UNLOAD);
-      view._destroy();
+    connectedCallback() {
+        this.destroyed = false;
     }
-    // Release swipe back gesture and transition.
-    if (this.gesture) {
-      this.gesture.destroy();
-      this.gesture = undefined;
+    disconnectedCallback() {
+        for (const view of this.views) {
+            lifecycle(view.element, LIFECYCLE_WILL_UNLOAD);
+            view._destroy();
+        }
+        // Release swipe back gesture and transition.
+        if (this.gesture) {
+            this.gesture.destroy();
+            this.gesture = undefined;
+        }
+        this.transInstr.length = 0;
+        this.views.length = 0;
+        this.destroyed = true;
     }
-    this.transInstr.length = 0;
-    this.views.length = 0;
-    this.destroyed = true;
-  }
-  /**
-   * Push a new component onto the current navigation stack. Pass any additional
-   * information along as an object. This additional information is accessible
-   * through NavParams.
-   *
-   * @param component The component to push onto the navigation stack.
-   * @param componentProps Any properties of the component.
-   * @param opts The navigation options.
-   * @param done The transition complete function.
-   */
-  push(component, componentProps, opts, done) {
-    return this.insert(-1, component, componentProps, opts, done);
-  }
-  /**
-   * Inserts a component into the navigation stack at the specified index.
-   * This is useful to add a component at any point in the navigation stack.
-   *
-   * @param insertIndex The index to insert the component at in the stack.
-   * @param component The component to insert into the navigation stack.
-   * @param componentProps Any properties of the component.
-   * @param opts The navigation options.
-   * @param done The transition complete function.
-   */
-  insert(insertIndex, component, componentProps, opts, done) {
-    return this.insertPages(insertIndex, [{ component, componentProps }], opts, done);
-  }
-  /**
-   * Inserts an array of components into the navigation stack at the specified index.
-   * The last component in the array will become instantiated as a view, and animate
-   * in to become the active view.
-   *
-   * @param insertIndex The index to insert the components at in the stack.
-   * @param insertComponents The components to insert into the navigation stack.
-   * @param opts The navigation options.
-   * @param done The transition complete function.
-   */
-  insertPages(insertIndex, insertComponents, opts, done) {
-    return this.queueTrns({
-      insertStart: insertIndex,
-      insertViews: insertComponents,
-      opts,
-    }, done);
-  }
-  /**
-   * Pop a component off of the navigation stack. Navigates back from the current
-   * component.
-   *
-   * @param opts The navigation options.
-   * @param done The transition complete function.
-   */
-  pop(opts, done) {
-    return this.removeIndex(-1, 1, opts, done);
-  }
-  /**
-   * Pop to a specific index in the navigation stack.
-   *
-   * @param indexOrViewCtrl The index or view controller to pop to.
-   * @param opts The navigation options.
-   * @param done The transition complete function.
-   */
-  popTo(indexOrViewCtrl, opts, done) {
-    const ti = {
-      removeStart: -1,
-      removeCount: -1,
-      opts,
-    };
-    if (typeof indexOrViewCtrl === 'object' && indexOrViewCtrl.component) {
-      ti.removeView = indexOrViewCtrl;
-      ti.removeStart = 1;
+    /**
+     * Push a new component onto the current navigation stack. Pass any additional
+     * information along as an object. This additional information is accessible
+     * through NavParams.
+     *
+     * @param component The component to push onto the navigation stack.
+     * @param componentProps Any properties of the component.
+     * @param opts The navigation options.
+     * @param done The transition complete function.
+     */
+    push(component, componentProps, opts, done) {
+        return this.insert(-1, component, componentProps, opts, done);
     }
-    else if (typeof indexOrViewCtrl === 'number') {
-      ti.removeStart = indexOrViewCtrl + 1;
+    /**
+     * Inserts a component into the navigation stack at the specified index.
+     * This is useful to add a component at any point in the navigation stack.
+     *
+     * @param insertIndex The index to insert the component at in the stack.
+     * @param component The component to insert into the navigation stack.
+     * @param componentProps Any properties of the component.
+     * @param opts The navigation options.
+     * @param done The transition complete function.
+     */
+    insert(insertIndex, component, componentProps, opts, done) {
+        return this.insertPages(insertIndex, [{ component, componentProps }], opts, done);
     }
-    return this.queueTrns(ti, done);
-  }
-  /**
-   * Navigate back to the root of the stack, no matter how far back that is.
-   *
-   * @param opts The navigation options.
-   * @param done The transition complete function.
-   */
-  popToRoot(opts, done) {
-    return this.removeIndex(1, -1, opts, done);
-  }
-  /**
-   * Removes a component from the navigation stack at the specified index.
-   *
-   * @param startIndex The number to begin removal at.
-   * @param removeCount The number of components to remove.
-   * @param opts The navigation options.
-   * @param done The transition complete function.
-   */
-  removeIndex(startIndex, removeCount = 1, opts, done) {
-    return this.queueTrns({
-      removeStart: startIndex,
-      removeCount,
-      opts,
-    }, done);
-  }
-  /**
-   * Set the root for the current navigation stack to a component.
-   *
-   * @param component The component to set as the root of the navigation stack.
-   * @param componentProps Any properties of the component.
-   * @param opts The navigation options.
-   * @param done The transition complete function.
-   */
-  setRoot(component, componentProps, opts, done) {
-    return this.setPages([{ component, componentProps }], opts, done);
-  }
-  /**
-   * Set the views of the current navigation stack and navigate to the last view.
-   * By default animations are disabled, but they can be enabled by passing options
-   * to the navigation controller. Navigation parameters can also be passed to the
-   * individual pages in the array.
-   *
-   * @param views The list of views to set as the navigation stack.
-   * @param opts The navigation options.
-   * @param done The transition complete function.
-   */
-  setPages(views, opts, done) {
-    opts !== null && opts !== void 0 ? opts : (opts = {});
-    // if animation wasn't set to true then default it to NOT animate
-    if (opts.animated !== true) {
-      opts.animated = false;
+    /**
+     * Inserts an array of components into the navigation stack at the specified index.
+     * The last component in the array will become instantiated as a view, and animate
+     * in to become the active view.
+     *
+     * @param insertIndex The index to insert the components at in the stack.
+     * @param insertComponents The components to insert into the navigation stack.
+     * @param opts The navigation options.
+     * @param done The transition complete function.
+     */
+    insertPages(insertIndex, insertComponents, opts, done) {
+        return this.queueTrns({
+            insertStart: insertIndex,
+            insertViews: insertComponents,
+            opts,
+        }, done);
     }
-    return this.queueTrns({
-      insertStart: 0,
-      insertViews: views,
-      removeStart: 0,
-      removeCount: -1,
-      opts,
-    }, done);
-  }
-  /**
-   * Called by the router to update the view.
-   *
-   * @param id The component tag.
-   * @param params The component params.
-   * @param direction A direction hint.
-   * @param animation an AnimationBuilder.
-   *
-   * @return the status.
-   * @internal
-   */
-  setRouteId(id, params, direction, animation) {
-    const active = this.getActiveSync();
-    if (matches(active, id, params)) {
-      return Promise.resolve({
-        changed: false,
-        element: active.element,
-      });
+    /**
+     * Pop a component off of the navigation stack. Navigates back from the current
+     * component.
+     *
+     * @param opts The navigation options.
+     * @param done The transition complete function.
+     */
+    pop(opts, done) {
+        return this.removeIndex(-1, 1, opts, done);
     }
-    let resolve;
-    const promise = new Promise((r) => (resolve = r));
-    let finish;
-    const commonOpts = {
-      updateURL: false,
-      viewIsReady: (enteringEl) => {
-        let mark;
-        const p = new Promise((r) => (mark = r));
-        resolve({
-          changed: true,
-          element: enteringEl,
-          markVisible: async () => {
-            mark();
-            await finish;
-          },
-        });
-        return p;
-      },
-    };
-    if (direction === 'root') {
-      finish = this.setRoot(id, params, commonOpts);
+    /**
+     * Pop to a specific index in the navigation stack.
+     *
+     * @param indexOrViewCtrl The index or view controller to pop to.
+     * @param opts The navigation options.
+     * @param done The transition complete function.
+     */
+    popTo(indexOrViewCtrl, opts, done) {
+        const ti = {
+            removeStart: -1,
+            removeCount: -1,
+            opts,
+        };
+        if (typeof indexOrViewCtrl === 'object' && indexOrViewCtrl.component) {
+            ti.removeView = indexOrViewCtrl;
+            ti.removeStart = 1;
+        }
+        else if (typeof indexOrViewCtrl === 'number') {
+            ti.removeStart = indexOrViewCtrl + 1;
+        }
+        return this.queueTrns(ti, done);
     }
-    else {
-      // Look for a view matching the target in the view stack.
-      const viewController = this.views.find((v) => matches(v, id, params));
-      if (viewController) {
-        finish = this.popTo(viewController, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animationBuilder: animation }));
-      }
-      else if (direction === 'forward') {
-        finish = this.push(id, params, Object.assign(Object.assign({}, commonOpts), { animationBuilder: animation }));
-      }
-      else if (direction === 'back') {
-        finish = this.setRoot(id, params, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animated: true, animationBuilder: animation }));
-      }
+    /**
+     * Navigate back to the root of the stack, no matter how far back that is.
+     *
+     * @param opts The navigation options.
+     * @param done The transition complete function.
+     */
+    popToRoot(opts, done) {
+        return this.removeIndex(1, -1, opts, done);
     }
-    return promise;
-  }
-  /**
-   * Called by <ion-router> to retrieve the current component.
-   *
-   * @internal
-   */
-  async getRouteId() {
-    const active = this.getActiveSync();
-    if (active) {
-      return {
-        id: active.element.tagName,
-        params: active.params,
-        element: active.element,
-      };
+    /**
+     * Removes a component from the navigation stack at the specified index.
+     *
+     * @param startIndex The number to begin removal at.
+     * @param removeCount The number of components to remove.
+     * @param opts The navigation options.
+     * @param done The transition complete function.
+     */
+    removeIndex(startIndex, removeCount = 1, opts, done) {
+        return this.queueTrns({
+            removeStart: startIndex,
+            removeCount,
+            opts,
+        }, done);
     }
-    return undefined;
-  }
-  /**
-   * Get the active view.
-   */
-  async getActive() {
-    return this.getActiveSync();
-  }
-  /**
-   * Get the view at the specified index.
-   *
-   * @param index The index of the view.
-   */
-  async getByIndex(index) {
-    return this.views[index];
-  }
-  /**
-   * Returns `true` if the current view can go back.
-   *
-   * @param view The view to check.
-   */
-  async canGoBack(view) {
-    return this.canGoBackSync(view);
-  }
-  /**
-   * Get the previous view.
-   *
-   * @param view The view to get.
-   */
-  async getPrevious(view) {
-    return this.getPreviousSync(view);
-  }
-  getLength() {
-    return this.views.length;
-  }
-  getActiveSync() {
-    return this.views[this.views.length - 1];
-  }
-  canGoBackSync(view = this.getActiveSync()) {
-    return !!(view && this.getPreviousSync(view));
-  }
-  getPreviousSync(view = this.getActiveSync()) {
-    if (!view) {
-      return undefined;
+    /**
+     * Set the root for the current navigation stack to a component.
+     *
+     * @param component The component to set as the root of the navigation stack.
+     * @param componentProps Any properties of the component.
+     * @param opts The navigation options.
+     * @param done The transition complete function.
+     */
+    setRoot(component, componentProps, opts, done) {
+        return this.setPages([{ component, componentProps }], opts, done);
     }
-    const views = this.views;
-    const index = views.indexOf(view);
-    return index > 0 ? views[index - 1] : undefined;
-  }
-  /**
-   * Adds a navigation stack change to the queue and schedules it to run.
-   *
-   * @returns Whether the transition succeeds.
-   */
-  async queueTrns(ti, done) {
-    var _a, _b;
-    if (this.isTransitioning && ((_a = ti.opts) === null || _a === void 0 ? void 0 : _a.skipIfBusy)) {
-      return false;
+    /**
+     * Set the views of the current navigation stack and navigate to the last view.
+     * By default animations are disabled, but they can be enabled by passing options
+     * to the navigation controller. Navigation parameters can also be passed to the
+     * individual pages in the array.
+     *
+     * @param views The list of views to set as the navigation stack.
+     * @param opts The navigation options.
+     * @param done The transition complete function.
+     */
+    setPages(views, opts, done) {
+        opts !== null && opts !== void 0 ? opts : (opts = {});
+        // if animation wasn't set to true then default it to NOT animate
+        if (opts.animated !== true) {
+            opts.animated = false;
+        }
+        return this.queueTrns({
+            insertStart: 0,
+            insertViews: views,
+            removeStart: 0,
+            removeCount: -1,
+            opts,
+        }, done);
     }
-    const promise = new Promise((resolve, reject) => {
-      ti.resolve = resolve;
-      ti.reject = reject;
-    });
-    ti.done = done;
     /**
-     * If using router, check to see if navigation hooks
-     * will allow us to perform this transition. This
-     * is required in order for hooks to work with
-     * the ion-back-button or swipe to go back.
+     * Called by the router to update the view.
+     *
+     * @param id The component tag.
+     * @param params The component params.
+     * @param direction A direction hint.
+     * @param animation an AnimationBuilder.
+     *
+     * @return the status.
+     * @internal
      */
-    if (ti.opts && ti.opts.updateURL !== false && this.useRouter) {
-      const router = document.querySelector('ion-router');
-      if (router) {
-        const canTransition = await router.canTransition();
-        if (canTransition === false) {
-          return false;
+    setRouteId(id, params, direction, animation) {
+        const active = this.getActiveSync();
+        if (matches(active, id, params)) {
+            return Promise.resolve({
+                changed: false,
+                element: active.element,
+            });
         }
-        if (typeof canTransition === 'string') {
-          router.push(canTransition, ti.opts.direction || 'back');
-          return false;
+        let resolve;
+        const promise = new Promise((r) => (resolve = r));
+        let finish;
+        const commonOpts = {
+            updateURL: false,
+            viewIsReady: (enteringEl) => {
+                let mark;
+                const p = new Promise((r) => (mark = r));
+                resolve({
+                    changed: true,
+                    element: enteringEl,
+                    markVisible: async () => {
+                        mark();
+                        await finish;
+                    },
+                });
+                return p;
+            },
+        };
+        if (direction === 'root') {
+            finish = this.setRoot(id, params, commonOpts);
         }
-      }
-    }
-    // Normalize empty
-    if (((_b = ti.insertViews) === null || _b === void 0 ? void 0 : _b.length) === 0) {
-      ti.insertViews = undefined;
+        else {
+            // Look for a view matching the target in the view stack.
+            const viewController = this.views.find((v) => matches(v, id, params));
+            if (viewController) {
+                finish = this.popTo(viewController, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animationBuilder: animation }));
+            }
+            else if (direction === 'forward') {
+                finish = this.push(id, params, Object.assign(Object.assign({}, commonOpts), { animationBuilder: animation }));
+            }
+            else if (direction === 'back') {
+                finish = this.setRoot(id, params, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animated: true, animationBuilder: animation }));
+            }
+        }
+        return promise;
     }
-    // Enqueue transition instruction
-    this.transInstr.push(ti);
-    // if there isn't a transition already happening
-    // then this will kick off this transition
-    this.nextTrns();
-    return promise;
-  }
-  success(result, ti) {
-    if (this.destroyed) {
-      this.fireError('nav controller was destroyed', ti);
-      return;
+    /**
+     * Called by <ion-router> to retrieve the current component.
+     *
+     * @internal
+     */
+    async getRouteId() {
+        const active = this.getActiveSync();
+        if (active) {
+            return {
+                id: active.element.tagName,
+                params: active.params,
+                element: active.element,
+            };
+        }
+        return undefined;
     }
-    if (ti.done) {
-      ti.done(result.hasCompleted, result.requiresTransition, result.enteringView, result.leavingView, result.direction);
+    /**
+     * Get the active view.
+     */
+    async getActive() {
+        return this.getActiveSync();
     }
-    ti.resolve(result.hasCompleted);
-    if (ti.opts.updateURL !== false && this.useRouter) {
-      const router = document.querySelector('ion-router');
-      if (router) {
-        const direction = result.direction === 'back' ? 'back' : 'forward';
-        router.navChanged(direction);
-      }
+    /**
+     * Get the view at the specified index.
+     *
+     * @param index The index of the view.
+     */
+    async getByIndex(index) {
+        return this.views[index];
     }
-  }
-  failed(rejectReason, ti) {
-    if (this.destroyed) {
-      this.fireError('nav controller was destroyed', ti);
-      return;
+    /**
+     * Returns `true` if the current view can go back.
+     *
+     * @param view The view to check.
+     */
+    async canGoBack(view) {
+        return this.canGoBackSync(view);
     }
-    this.transInstr.length = 0;
-    this.fireError(rejectReason, ti);
-  }
-  fireError(rejectReason, ti) {
-    if (ti.done) {
-      ti.done(false, false, rejectReason);
+    /**
+     * Get the previous view.
+     *
+     * @param view The view to get.
+     */
+    async getPrevious(view) {
+        return this.getPreviousSync(view);
     }
-    if (ti.reject && !this.destroyed) {
-      ti.reject(rejectReason);
+    getLength() {
+        return this.views.length;
     }
-    else {
-      ti.resolve(false);
+    getActiveSync() {
+        return this.views[this.views.length - 1];
     }
-  }
-  /**
-   * Consumes the next transition in the queue.
-   *
-   * @returns whether the transition is executed.
-   */
-  nextTrns() {
-    // this is the framework's bread 'n butta function
-    // only one transition is allowed at any given time
-    if (this.isTransitioning) {
-      return false;
+    canGoBackSync(view = this.getActiveSync()) {
+        return !!(view && this.getPreviousSync(view));
     }
-    // there is no transition happening right now, executes the next instructions.
-    const ti = this.transInstr.shift();
-    if (!ti) {
-      return false;
+    getPreviousSync(view = this.getActiveSync()) {
+        if (!view) {
+            return undefined;
+        }
+        const views = this.views;
+        const index = views.indexOf(view);
+        return index > 0 ? views[index - 1] : undefined;
     }
-    this.runTransition(ti);
-    return true;
-  }
-  /** Executes all the transition instruction from the queue. */
-  async runTransition(ti) {
-    try {
-      // set that this nav is actively transitioning
-      this.ionNavWillChange.emit();
-      this.isTransitioning = true;
-      this.prepareTI(ti);
-      const leavingView = this.getActiveSync();
-      const enteringView = this.getEnteringView(ti, leavingView);
-      if (!leavingView && !enteringView) {
-        throw new Error('no views in the stack to be removed');
-      }
-      if (enteringView && enteringView.state === VIEW_STATE_NEW) {
-        await enteringView.init(this.el);
-      }
-      this.postViewInit(enteringView, leavingView, ti);
-      // Needs transition?
-      const requiresTransition = (ti.enteringRequiresTransition || ti.leavingRequiresTransition) && enteringView !== leavingView;
-      if (requiresTransition && ti.opts && leavingView) {
-        const isBackDirection = ti.opts.direction === 'back';
+    /**
+     * Adds a navigation stack change to the queue and schedules it to run.
+     *
+     * @returns Whether the transition succeeds.
+     */
+    async queueTrns(ti, done) {
+        var _a, _b;
+        if (this.isTransitioning && ((_a = ti.opts) === null || _a === void 0 ? void 0 : _a.skipIfBusy)) {
+            return false;
+        }
+        const promise = new Promise((resolve, reject) => {
+            ti.resolve = resolve;
+            ti.reject = reject;
+        });
+        ti.done = done;
         /**
-         * If heading back, use the entering page's animation
-         * unless otherwise specified by the developer.
+         * If using router, check to see if navigation hooks
+         * will allow us to perform this transition. This
+         * is required in order for hooks to work with
+         * the ion-back-button or swipe to go back.
          */
-        if (isBackDirection) {
-          ti.opts.animationBuilder = ti.opts.animationBuilder || (enteringView === null || enteringView === void 0 ? void 0 : enteringView.animationBuilder);
+        if (ti.opts && ti.opts.updateURL !== false && this.useRouter) {
+            const router = document.querySelector('ion-router');
+            if (router) {
+                const canTransition = await router.canTransition();
+                if (canTransition === false) {
+                    return false;
+                }
+                if (typeof canTransition === 'string') {
+                    router.push(canTransition, ti.opts.direction || 'back');
+                    return false;
+                }
+            }
         }
-        leavingView.animationBuilder = ti.opts.animationBuilder;
-      }
-      let result;
-      if (requiresTransition) {
-        result = await this.transition(enteringView, leavingView, ti);
-      }
-      else {
-        // transition is not required, so we are already done!
-        // they're inserting/removing the views somewhere in the middle or
-        // beginning, so visually nothing needs to animate/transition
-        // resolve immediately because there's no animation that's happening
-        result = {
-          hasCompleted: true,
-          requiresTransition: false,
-        };
-      }
-      this.success(result, ti);
-      this.ionNavDidChange.emit();
-    }
-    catch (rejectReason) {
-      this.failed(rejectReason, ti);
-    }
-    this.isTransitioning = false;
-    this.nextTrns();
-  }
-  prepareTI(ti) {
-    var _a, _b;
-    var _c;
-    const viewsLength = this.views.length;
-    (_a = ti.opts) !== null && _a !== void 0 ? _a : (ti.opts = {});
-    (_b = (_c = ti.opts).delegate) !== null && _b !== void 0 ? _b : (_c.delegate = this.delegate);
-    if (ti.removeView !== undefined) {
-      assert(ti.removeStart !== undefined, 'removeView needs removeStart');
-      assert(ti.removeCount !== undefined, 'removeView needs removeCount');
-      const index = this.views.indexOf(ti.removeView);
-      if (index < 0) {
-        throw new Error('removeView was not found');
-      }
-      ti.removeStart += index;
-    }
-    if (ti.removeStart !== undefined) {
-      if (ti.removeStart < 0) {
-        ti.removeStart = viewsLength - 1;
-      }
-      if (ti.removeCount < 0) {
-        ti.removeCount = viewsLength - ti.removeStart;
-      }
-      ti.leavingRequiresTransition = ti.removeCount > 0 && ti.removeStart + ti.removeCount === viewsLength;
-    }
-    if (ti.insertViews) {
-      // allow -1 to be passed in to auto push it on the end
-      // and clean up the index if it's larger then the size of the stack
-      if (ti.insertStart < 0 || ti.insertStart > viewsLength) {
-        ti.insertStart = viewsLength;
-      }
-      ti.enteringRequiresTransition = ti.insertStart === viewsLength;
-    }
-    const insertViews = ti.insertViews;
-    if (!insertViews) {
-      return;
-    }
-    assert(insertViews.length > 0, 'length can not be zero');
-    const viewControllers = convertToViews(insertViews);
-    if (viewControllers.length === 0) {
-      throw new Error('invalid views to insert');
-    }
-    // Check all the inserted view are correct
-    for (const view of viewControllers) {
-      view.delegate = ti.opts.delegate;
-      const nav = view.nav;
-      if (nav && nav !== this) {
-        throw new Error('inserted view was already inserted');
-      }
-      if (view.state === VIEW_STATE_DESTROYED) {
-        throw new Error('inserted view was already destroyed');
-      }
-    }
-    ti.insertViews = viewControllers;
-  }
-  /**
-   * Returns the view that will be entered considering the transition instructions.
-   *
-   * @param ti The instructions.
-   * @param leavingView The view being left or undefined if none.
-   *
-   * @returns The view that will be entered, undefined if none.
-   */
-  getEnteringView(ti, leavingView) {
-    // The last inserted view will be entered when view are inserted.
-    const insertViews = ti.insertViews;
-    if (insertViews !== undefined) {
-      return insertViews[insertViews.length - 1];
-    }
-    // When views are deleted, we will enter the last view that is not removed and not the view being left.
-    const removeStart = ti.removeStart;
-    if (removeStart !== undefined) {
-      const views = this.views;
-      const removeEnd = removeStart + ti.removeCount;
-      for (let i = views.length - 1; i >= 0; i--) {
-        const view = views[i];
-        if ((i < removeStart || i >= removeEnd) && view !== leavingView) {
-          return view;
+        // Normalize empty
+        if (((_b = ti.insertViews) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+            ti.insertViews = undefined;
         }
-      }
+        // Enqueue transition instruction
+        this.transInstr.push(ti);
+        // if there isn't a transition already happening
+        // then this will kick off this transition
+        this.nextTrns();
+        return promise;
     }
-    return undefined;
-  }
-  /**
-   * Adds and Removes the views from the navigation stack.
-   *
-   * @param enteringView The view being entered.
-   * @param leavingView The view being left.
-   * @param ti The instructions.
-   */
-  postViewInit(enteringView, leavingView, ti) {
-    var _a, _b, _c;
-    assert(leavingView || enteringView, 'Both leavingView and enteringView are null');
-    assert(ti.resolve, 'resolve must be valid');
-    assert(ti.reject, 'reject must be valid');
-    // Compute the views to remove.
-    const opts = ti.opts;
-    const { insertViews, removeStart, removeCount } = ti;
-    /** Records the view to destroy */
-    let destroyQueue;
-    // there are views to remove
-    if (removeStart !== undefined && removeCount !== undefined) {
-      assert(removeStart >= 0, 'removeStart can not be negative');
-      assert(removeCount >= 0, 'removeCount can not be negative');
-      destroyQueue = [];
-      for (let i = removeStart; i < removeStart + removeCount; i++) {
-        const view = this.views[i];
-        if (view !== undefined && view !== enteringView && view !== leavingView) {
-          destroyQueue.push(view);
+    success(result, ti) {
+        if (this.destroyed) {
+            this.fireError('nav controller was destroyed', ti);
+            return;
+        }
+        if (ti.done) {
+            ti.done(result.hasCompleted, result.requiresTransition, result.enteringView, result.leavingView, result.direction);
+        }
+        ti.resolve(result.hasCompleted);
+        if (ti.opts.updateURL !== false && this.useRouter) {
+            const router = document.querySelector('ion-router');
+            if (router) {
+                const direction = result.direction === 'back' ? 'back' : 'forward';
+                router.navChanged(direction);
+            }
         }
-      }
-      // default the direction to "back"
-      (_a = opts.direction) !== null && _a !== void 0 ? _a : (opts.direction = 'back');
-    }
-    const finalNumViews = this.views.length + ((_b = insertViews === null || insertViews === void 0 ? void 0 : insertViews.length) !== null && _b !== void 0 ? _b : 0) - (removeCount !== null && removeCount !== void 0 ? removeCount : 0);
-    assert(finalNumViews >= 0, 'final balance can not be negative');
-    if (finalNumViews === 0) {
-      console.warn(`You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times.`, this, this.el);
-      throw new Error('navigation stack needs at least one root page');
-    }
-    // At this point the transition can not be rejected, any throw should be an error
-    // Insert the new views in the stack.
-    if (insertViews) {
-      // add the views to the
-      let insertIndex = ti.insertStart;
-      for (const view of insertViews) {
-        this.insertViewAt(view, insertIndex);
-        insertIndex++;
-      }
-      if (ti.enteringRequiresTransition) {
-        // default to forward if not already set
-        (_c = opts.direction) !== null && _c !== void 0 ? _c : (opts.direction = 'forward');
-      }
     }
-    // if the views to be removed are in the beginning or middle
-    // and there is not a view that needs to visually transition out
-    // then just destroy them and don't transition anything
-    // batch all of lifecycles together
-    // let's make sure, callbacks are zoned
-    if (destroyQueue && destroyQueue.length > 0) {
-      for (const view of destroyQueue) {
-        lifecycle(view.element, LIFECYCLE_WILL_LEAVE);
-        lifecycle(view.element, LIFECYCLE_DID_LEAVE);
-        lifecycle(view.element, LIFECYCLE_WILL_UNLOAD);
-      }
-      // once all lifecycle events has been delivered, we can safely detroy the views
-      for (const view of destroyQueue) {
-        this.destroyView(view);
-      }
+    failed(rejectReason, ti) {
+        if (this.destroyed) {
+            this.fireError('nav controller was destroyed', ti);
+            return;
+        }
+        this.transInstr.length = 0;
+        this.fireError(rejectReason, ti);
     }
-  }
-  async transition(enteringView, leavingView, ti) {
-    // we should animate (duration > 0) if the pushed page is not the first one (startup)
-    // or if it is a portal (modal, actionsheet, etc.)
-    const opts = ti.opts;
-    const progressCallback = opts.progressAnimation
-      ? (ani) => {
-        /**
-         * Because this progress callback is called asynchronously
-         * it is possible for the gesture to start and end before
-         * the animation is ever set. In that scenario, we should
-         * immediately call progressEnd so that the transition promise
-         * resolves and the gesture does not get locked up.
-         */
-        if (ani !== undefined && !this.gestureOrAnimationInProgress) {
-          this.gestureOrAnimationInProgress = true;
-          ani.onFinish(() => {
-            this.gestureOrAnimationInProgress = false;
-          }, { oneTimeCallback: true });
-          /**
-           * Playing animation to beginning
-           * with a duration of 0 prevents
-           * any flickering when the animation
-           * is later cleaned up.
-           */
-          ani.progressEnd(0, 0, 0);
+    fireError(rejectReason, ti) {
+        if (ti.done) {
+            ti.done(false, false, rejectReason);
+        }
+        if (ti.reject && !this.destroyed) {
+            ti.reject(rejectReason);
         }
         else {
-          this.sbAni = ani;
+            ti.resolve(false);
         }
-      }
-      : undefined;
-    const mode = getIonMode(this);
-    const enteringEl = enteringView.element;
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-    const leavingEl = leavingView && leavingView.element;
-    const animationOpts = Object.assign(Object.assign({ mode, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
-      leavingEl }, opts), { animationBuilder: opts.animationBuilder || this.animation || config.get('navAnimation') });
-    const { hasCompleted } = await transition(animationOpts);
-    return this.transitionFinish(hasCompleted, enteringView, leavingView, opts);
-  }
-  transitionFinish(hasCompleted, enteringView, leavingView, opts) {
+    }
     /**
-     * If the transition did not complete, the leavingView will still be the active
-     * view on the stack. Otherwise unmount all the views after the enteringView.
+     * Consumes the next transition in the queue.
+     *
+     * @returns whether the transition is executed.
      */
-    const activeView = hasCompleted ? enteringView : leavingView;
-    if (activeView) {
-      this.unmountInactiveViews(activeView);
-    }
-    return {
-      hasCompleted,
-      requiresTransition: true,
-      enteringView,
-      leavingView,
-      direction: opts.direction,
-    };
-  }
-  /**
-   * Inserts a view at the specified index.
-   *
-   * When the view already is in the stack it will be moved to the new position.
-   *
-   * @param view The view to insert.
-   * @param index The index where to insert the view.
-   */
-  insertViewAt(view, index) {
-    const views = this.views;
-    const existingIndex = views.indexOf(view);
-    if (existingIndex > -1) {
-      assert(view.nav === this, 'view is not part of the nav');
-      // The view already in the stack, removes it.
-      views.splice(existingIndex, 1);
-      // and add it back at the requested index.
-      views.splice(index, 0, view);
-    }
-    else {
-      assert(!view.nav, 'nav is used');
-      // this is a new view to add to the stack
-      // create the new entering view
-      view.nav = this;
-      views.splice(index, 0, view);
-    }
-  }
-  /**
-   * Removes a view from the stack.
-   *
-   * @param view The view to remove.
-   */
-  removeView(view) {
-    assert(view.state === VIEW_STATE_ATTACHED || view.state === VIEW_STATE_DESTROYED, 'view state should be loaded or destroyed');
-    const views = this.views;
-    const index = views.indexOf(view);
-    assert(index > -1, 'view must be part of the stack');
-    if (index >= 0) {
-      views.splice(index, 1);
-    }
-  }
-  destroyView(view) {
-    view._destroy();
-    this.removeView(view);
-  }
-  /**
-   * Unmounts all inactive views after the specified active view.
-   *
-   * DOM WRITE
-   *
-   * @param activeView The view that is actively visible in the stack. Used to calculate which views to unmount.
-   */
-  unmountInactiveViews(activeView) {
-    // ok, cleanup time!! Destroy all of the views that are
-    // INACTIVE and come after the active view
-    // only do this if the views exist, though
-    if (this.destroyed) {
-      return;
-    }
-    const views = this.views;
-    const activeViewIndex = views.indexOf(activeView);
-    for (let i = views.length - 1; i >= 0; i--) {
-      const view = views[i];
-      /**
-       * When inserting multiple views via insertPages
-       * the last page will be transitioned to, but the
-       * others will not be. As a result, a DOM element
-       * will only be created for the last page inserted.
-       * As a result, it is possible to have views in the
-       * stack that do not have `view.element` yet.
-       */
-      const element = view.element;
-      if (element) {
-        if (i > activeViewIndex) {
-          // this view comes after the active view
-          // let's unload it
-          lifecycle(element, LIFECYCLE_WILL_UNLOAD);
-          this.destroyView(view);
+    nextTrns() {
+        // this is the framework's bread 'n butta function
+        // only one transition is allowed at any given time
+        if (this.isTransitioning) {
+            return false;
         }
-        else if (i < activeViewIndex) {
-          // this view comes before the active view
-          // and it is not a portal then ensure it is hidden
-          setPageHidden(element, true);
+        // there is no transition happening right now, executes the next instructions.
+        const ti = this.transInstr.shift();
+        if (!ti) {
+            return false;
         }
-      }
+        this.runTransition(ti);
+        return true;
     }
-  }
-  canStart() {
-    return (!this.gestureOrAnimationInProgress &&
-      !!this.swipeGesture &&
-      !this.isTransitioning &&
-      this.transInstr.length === 0 &&
-      this.canGoBackSync());
-  }
-  onStart() {
-    this.gestureOrAnimationInProgress = true;
-    this.pop({ direction: 'back', progressAnimation: true });
-  }
-  onMove(stepValue) {
-    if (this.sbAni) {
-      this.sbAni.progressStep(stepValue);
-    }
-  }
-  onEnd(shouldComplete, stepValue, dur) {
-    if (this.sbAni) {
-      this.sbAni.onFinish(() => {
-        this.gestureOrAnimationInProgress = false;
-      }, { oneTimeCallback: true });
-      // Account for rounding errors in JS
-      let newStepValue = shouldComplete ? -0.001 : 0.001;
-      /**
-       * Animation will be reversed here, so need to
-       * reverse the easing curve as well
-       *
-       * Additionally, we need to account for the time relative
-       * to the new easing curve, as `stepValue` is going to be given
-       * in terms of a linear curve.
-       */
-      if (!shouldComplete) {
-        this.sbAni.easing('cubic-bezier(1, 0, 0.68, 0.28)');
-        newStepValue += getTimeGivenProgression([0, 0], [1, 0], [0.68, 0.28], [1, 1], stepValue)[0];
-      }
-      else {
-        newStepValue += getTimeGivenProgression([0, 0], [0.32, 0.72], [0, 1], [1, 1], stepValue)[0];
-      }
-      this.sbAni.progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
-    }
-    else {
-      this.gestureOrAnimationInProgress = false;
-    }
-  }
-  render() {
-    return h("slot", null);
-  }
-  static get is() { return "ion-nav"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["nav.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["nav.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "delegate": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "FrameworkDelegate",
-          "resolved": "FrameworkDelegate | undefined",
-          "references": {
-            "FrameworkDelegate": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::FrameworkDelegate"
+    /** Executes all the transition instruction from the queue. */
+    async runTransition(ti) {
+        try {
+            // set that this nav is actively transitioning
+            this.ionNavWillChange.emit();
+            this.isTransitioning = true;
+            this.prepareTI(ti);
+            const leavingView = this.getActiveSync();
+            const enteringView = this.getEnteringView(ti, leavingView);
+            if (!leavingView && !enteringView) {
+                throw new Error('no views in the stack to be removed');
+            }
+            if (enteringView && enteringView.state === VIEW_STATE_NEW) {
+                await enteringView.init(this.el);
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
+            this.postViewInit(enteringView, leavingView, ti);
+            // Needs transition?
+            const requiresTransition = (ti.enteringRequiresTransition || ti.leavingRequiresTransition) && enteringView !== leavingView;
+            if (requiresTransition && ti.opts && leavingView) {
+                const isBackDirection = ti.opts.direction === 'back';
+                /**
+                 * If heading back, use the entering page's animation
+                 * unless otherwise specified by the developer.
+                 */
+                if (isBackDirection) {
+                    ti.opts.animationBuilder = ti.opts.animationBuilder || (enteringView === null || enteringView === void 0 ? void 0 : enteringView.animationBuilder);
+                }
+                leavingView.animationBuilder = ti.opts.animationBuilder;
+            }
+            let result;
+            if (requiresTransition) {
+                result = await this.transition(enteringView, leavingView, ti);
+            }
+            else {
+                // transition is not required, so we are already done!
+                // they're inserting/removing the views somewhere in the middle or
+                // beginning, so visually nothing needs to animate/transition
+                // resolve immediately because there's no animation that's happening
+                result = {
+                    hasCompleted: true,
+                    requiresTransition: false,
+                };
+            }
+            this.success(result, ti);
+            this.ionNavDidChange.emit();
+        }
+        catch (rejectReason) {
+            this.failed(rejectReason, ti);
         }
-      },
-      "swipeGesture": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If the nav component should allow for swipe-to-go-back."
-        },
-        "attribute": "swipe-gesture",
-        "reflect": false
-      },
-      "animated": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the nav should animate the transition of components."
-        },
-        "attribute": "animated",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "animation": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "AnimationBuilder",
-          "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
-          "references": {
-            "AnimationBuilder": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::AnimationBuilder"
+        this.isTransitioning = false;
+        this.nextTrns();
+    }
+    prepareTI(ti) {
+        var _a, _b;
+        var _c;
+        const viewsLength = this.views.length;
+        (_a = ti.opts) !== null && _a !== void 0 ? _a : (ti.opts = {});
+        (_b = (_c = ti.opts).delegate) !== null && _b !== void 0 ? _b : (_c.delegate = this.delegate);
+        if (ti.removeView !== undefined) {
+            assert(ti.removeStart !== undefined, 'removeView needs removeStart');
+            assert(ti.removeCount !== undefined, 'removeView needs removeCount');
+            const index = this.views.indexOf(ti.removeView);
+            if (index < 0) {
+                throw new Error('removeView was not found');
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions."
+            ti.removeStart += index;
         }
-      },
-      "rootParams": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ComponentProps",
-          "resolved": "undefined | { [key: string]: any; }",
-          "references": {
-            "ComponentProps": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::ComponentProps"
+        if (ti.removeStart !== undefined) {
+            if (ti.removeStart < 0) {
+                ti.removeStart = viewsLength - 1;
+            }
+            if (ti.removeCount < 0) {
+                ti.removeCount = viewsLength - ti.removeStart;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Any parameters for the root component"
+            ti.leavingRequiresTransition = ti.removeCount > 0 && ti.removeStart + ti.removeCount === viewsLength;
         }
-      },
-      "root": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "NavComponent",
-          "resolved": "Function | HTMLElement | ViewController | null | string | undefined",
-          "references": {
-            "NavComponent": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavComponent"
+        if (ti.insertViews) {
+            // allow -1 to be passed in to auto push it on the end
+            // and clean up the index if it's larger then the size of the stack
+            if (ti.insertStart < 0 || ti.insertStart > viewsLength) {
+                ti.insertStart = viewsLength;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Root NavComponent to load"
-        },
-        "attribute": "root",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "ionNavWillLoad",
-        "name": "ionNavWillLoad",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": "Event fired when Nav will load a component"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+            ti.enteringRequiresTransition = ti.insertStart === viewsLength;
         }
-      }, {
-        "method": "ionNavWillChange",
-        "name": "ionNavWillChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the nav will change components"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+        const insertViews = ti.insertViews;
+        if (!insertViews) {
+            return;
         }
-      }, {
-        "method": "ionNavDidChange",
-        "name": "ionNavDidChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the nav has changed components"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+        assert(insertViews.length > 0, 'length can not be zero');
+        const viewControllers = convertToViews(insertViews);
+        if (viewControllers.length === 0) {
+            throw new Error('invalid views to insert');
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "push": {
-        "complexType": {
-          "signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "component The component to push onto the navigation stack."
-                }],
-              "text": "The component to push onto the navigation stack."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "componentProps Any properties of the component."
-                }],
-              "text": "Any properties of the component."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "opts The navigation options."
-                }],
-              "text": "The navigation options."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "done The transition complete function."
-                }],
-              "text": "The transition complete function."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "NavComponent": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavComponent"
-            },
-            "T": {
-              "location": "global",
-              "id": "global::T"
-            },
-            "ComponentProps": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::ComponentProps"
-            },
-            "NavOptions": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavOptions"
-            },
-            "TransitionDoneFn": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+        // Check all the inserted view are correct
+        for (const view of viewControllers) {
+            view.delegate = ti.opts.delegate;
+            const nav = view.nav;
+            if (nav && nav !== this) {
+                throw new Error('inserted view was already inserted');
+            }
+            if (view.state === VIEW_STATE_DESTROYED) {
+                throw new Error('inserted view was already destroyed');
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.",
-          "tags": [{
-              "name": "param",
-              "text": "component The component to push onto the navigation stack."
-            }, {
-              "name": "param",
-              "text": "componentProps Any properties of the component."
-            }, {
-              "name": "param",
-              "text": "opts The navigation options."
-            }, {
-              "name": "param",
-              "text": "done The transition complete function."
-            }]
         }
-      },
-      "insert": {
-        "complexType": {
-          "signature": "<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "insertIndex The index to insert the component at in the stack."
-                }],
-              "text": "The index to insert the component at in the stack."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "component The component to insert into the navigation stack."
-                }],
-              "text": "The component to insert into the navigation stack."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "componentProps Any properties of the component."
-                }],
-              "text": "Any properties of the component."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "opts The navigation options."
-                }],
-              "text": "The navigation options."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "done The transition complete function."
-                }],
-              "text": "The transition complete function."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "NavComponent": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavComponent"
-            },
-            "T": {
-              "location": "global",
-              "id": "global::T"
-            },
-            "ComponentProps": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::ComponentProps"
-            },
-            "NavOptions": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavOptions"
-            },
-            "TransitionDoneFn": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+        ti.insertViews = viewControllers;
+    }
+    /**
+     * Returns the view that will be entered considering the transition instructions.
+     *
+     * @param ti The instructions.
+     * @param leavingView The view being left or undefined if none.
+     *
+     * @returns The view that will be entered, undefined if none.
+     */
+    getEnteringView(ti, leavingView) {
+        // The last inserted view will be entered when view are inserted.
+        const insertViews = ti.insertViews;
+        if (insertViews !== undefined) {
+            return insertViews[insertViews.length - 1];
+        }
+        // When views are deleted, we will enter the last view that is not removed and not the view being left.
+        const removeStart = ti.removeStart;
+        if (removeStart !== undefined) {
+            const views = this.views;
+            const removeEnd = removeStart + ti.removeCount;
+            for (let i = views.length - 1; i >= 0; i--) {
+                const view = views[i];
+                if ((i < removeStart || i >= removeEnd) && view !== leavingView) {
+                    return view;
+                }
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.",
-          "tags": [{
-              "name": "param",
-              "text": "insertIndex The index to insert the component at in the stack."
-            }, {
-              "name": "param",
-              "text": "component The component to insert into the navigation stack."
-            }, {
-              "name": "param",
-              "text": "componentProps Any properties of the component."
-            }, {
-              "name": "param",
-              "text": "opts The navigation options."
-            }, {
-              "name": "param",
-              "text": "done The transition complete function."
-            }]
         }
-      },
-      "insertPages": {
-        "complexType": {
-          "signature": "(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "insertIndex The index to insert the components at in the stack."
-                }],
-              "text": "The index to insert the components at in the stack."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "insertComponents The components to insert into the navigation stack."
-                }],
-              "text": "The components to insert into the navigation stack."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "opts The navigation options."
-                }],
-              "text": "The navigation options."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "done The transition complete function."
-                }],
-              "text": "The transition complete function."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "NavComponent": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavComponent"
-            },
-            "NavComponentWithProps": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
-            },
-            "NavOptions": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavOptions"
-            },
-            "TransitionDoneFn": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+        return undefined;
+    }
+    /**
+     * Adds and Removes the views from the navigation stack.
+     *
+     * @param enteringView The view being entered.
+     * @param leavingView The view being left.
+     * @param ti The instructions.
+     */
+    postViewInit(enteringView, leavingView, ti) {
+        var _a, _b, _c;
+        assert(leavingView || enteringView, 'Both leavingView and enteringView are null');
+        assert(ti.resolve, 'resolve must be valid');
+        assert(ti.reject, 'reject must be valid');
+        // Compute the views to remove.
+        const opts = ti.opts;
+        const { insertViews, removeStart, removeCount } = ti;
+        /** Records the view to destroy */
+        let destroyQueue;
+        // there are views to remove
+        if (removeStart !== undefined && removeCount !== undefined) {
+            assert(removeStart >= 0, 'removeStart can not be negative');
+            assert(removeCount >= 0, 'removeCount can not be negative');
+            destroyQueue = [];
+            for (let i = removeStart; i < removeStart + removeCount; i++) {
+                const view = this.views[i];
+                if (view !== undefined && view !== enteringView && view !== leavingView) {
+                    destroyQueue.push(view);
+                }
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.",
-          "tags": [{
-              "name": "param",
-              "text": "insertIndex The index to insert the components at in the stack."
-            }, {
-              "name": "param",
-              "text": "insertComponents The components to insert into the navigation stack."
-            }, {
-              "name": "param",
-              "text": "opts The navigation options."
-            }, {
-              "name": "param",
-              "text": "done The transition complete function."
-            }]
+            // default the direction to "back"
+            (_a = opts.direction) !== null && _a !== void 0 ? _a : (opts.direction = 'back');
         }
-      },
-      "pop": {
-        "complexType": {
-          "signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "opts The navigation options."
-                }],
-              "text": "The navigation options."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "done The transition complete function."
-                }],
-              "text": "The transition complete function."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "NavOptions": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavOptions"
-            },
-            "TransitionDoneFn": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+        const finalNumViews = this.views.length + ((_b = insertViews === null || insertViews === void 0 ? void 0 : insertViews.length) !== null && _b !== void 0 ? _b : 0) - (removeCount !== null && removeCount !== void 0 ? removeCount : 0);
+        assert(finalNumViews >= 0, 'final balance can not be negative');
+        if (finalNumViews === 0) {
+            console.warn(`You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times.`, this, this.el);
+            throw new Error('navigation stack needs at least one root page');
+        }
+        // At this point the transition can not be rejected, any throw should be an error
+        // Insert the new views in the stack.
+        if (insertViews) {
+            // add the views to the
+            let insertIndex = ti.insertStart;
+            for (const view of insertViews) {
+                this.insertViewAt(view, insertIndex);
+                insertIndex++;
+            }
+            if (ti.enteringRequiresTransition) {
+                // default to forward if not already set
+                (_c = opts.direction) !== null && _c !== void 0 ? _c : (opts.direction = 'forward');
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.",
-          "tags": [{
-              "name": "param",
-              "text": "opts The navigation options."
-            }, {
-              "name": "param",
-              "text": "done The transition complete function."
-            }]
         }
-      },
-      "popTo": {
-        "complexType": {
-          "signature": "(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "indexOrViewCtrl The index or view controller to pop to."
-                }],
-              "text": "The index or view controller to pop to."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "opts The navigation options."
-                }],
-              "text": "The navigation options."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "done The transition complete function."
-                }],
-              "text": "The transition complete function."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "ViewController": {
-              "location": "import",
-              "path": "./view-controller",
-              "id": "src/components/nav/view-controller.ts::ViewController"
-            },
-            "NavOptions": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavOptions"
-            },
-            "TransitionDoneFn": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
-            },
-            "TransitionInstruction": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::TransitionInstruction"
+        // if the views to be removed are in the beginning or middle
+        // and there is not a view that needs to visually transition out
+        // then just destroy them and don't transition anything
+        // batch all of lifecycles together
+        // let's make sure, callbacks are zoned
+        if (destroyQueue && destroyQueue.length > 0) {
+            for (const view of destroyQueue) {
+                lifecycle(view.element, LIFECYCLE_WILL_LEAVE);
+                lifecycle(view.element, LIFECYCLE_DID_LEAVE);
+                lifecycle(view.element, LIFECYCLE_WILL_UNLOAD);
+            }
+            // once all lifecycle events has been delivered, we can safely detroy the views
+            for (const view of destroyQueue) {
+                this.destroyView(view);
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Pop to a specific index in the navigation stack.",
-          "tags": [{
-              "name": "param",
-              "text": "indexOrViewCtrl The index or view controller to pop to."
-            }, {
-              "name": "param",
-              "text": "opts The navigation options."
-            }, {
-              "name": "param",
-              "text": "done The transition complete function."
-            }]
         }
-      },
-      "popToRoot": {
-        "complexType": {
-          "signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "opts The navigation options."
-                }],
-              "text": "The navigation options."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "done The transition complete function."
-                }],
-              "text": "The transition complete function."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "NavOptions": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavOptions"
-            },
-            "TransitionDoneFn": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+    }
+    async transition(enteringView, leavingView, ti) {
+        // we should animate (duration > 0) if the pushed page is not the first one (startup)
+        // or if it is a portal (modal, actionsheet, etc.)
+        const opts = ti.opts;
+        const progressCallback = opts.progressAnimation
+            ? (ani) => {
+                /**
+                 * Because this progress callback is called asynchronously
+                 * it is possible for the gesture to start and end before
+                 * the animation is ever set. In that scenario, we should
+                 * immediately call progressEnd so that the transition promise
+                 * resolves and the gesture does not get locked up.
+                 */
+                if (ani !== undefined && !this.gestureOrAnimationInProgress) {
+                    this.gestureOrAnimationInProgress = true;
+                    ani.onFinish(() => {
+                        this.gestureOrAnimationInProgress = false;
+                    }, { oneTimeCallback: true });
+                    /**
+                     * Playing animation to beginning
+                     * with a duration of 0 prevents
+                     * any flickering when the animation
+                     * is later cleaned up.
+                     */
+                    ani.progressEnd(0, 0, 0);
+                }
+                else {
+                    this.sbAni = ani;
+                }
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Navigate back to the root of the stack, no matter how far back that is.",
-          "tags": [{
-              "name": "param",
-              "text": "opts The navigation options."
-            }, {
-              "name": "param",
-              "text": "done The transition complete function."
-            }]
+            : undefined;
+        const mode = getIonMode(this);
+        const enteringEl = enteringView.element;
+        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+        const leavingEl = leavingView && leavingView.element;
+        const animationOpts = Object.assign(Object.assign({ mode, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
+            leavingEl }, opts), { animationBuilder: opts.animationBuilder || this.animation || config.get('navAnimation') });
+        const { hasCompleted } = await transition(animationOpts);
+        return this.transitionFinish(hasCompleted, enteringView, leavingView, opts);
+    }
+    transitionFinish(hasCompleted, enteringView, leavingView, opts) {
+        /**
+         * If the transition did not complete, the leavingView will still be the active
+         * view on the stack. Otherwise unmount all the views after the enteringView.
+         */
+        const activeView = hasCompleted ? enteringView : leavingView;
+        if (activeView) {
+            this.unmountInactiveViews(activeView);
         }
-      },
-      "removeIndex": {
-        "complexType": {
-          "signature": "(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "startIndex The number to begin removal at."
-                }],
-              "text": "The number to begin removal at."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "removeCount The number of components to remove."
-                }],
-              "text": "The number of components to remove."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "opts The navigation options."
-                }],
-              "text": "The navigation options."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "done The transition complete function."
-                }],
-              "text": "The transition complete function."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "NavOptions": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavOptions"
-            },
-            "TransitionDoneFn": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+        return {
+            hasCompleted,
+            requiresTransition: true,
+            enteringView,
+            leavingView,
+            direction: opts.direction,
+        };
+    }
+    /**
+     * Inserts a view at the specified index.
+     *
+     * When the view already is in the stack it will be moved to the new position.
+     *
+     * @param view The view to insert.
+     * @param index The index where to insert the view.
+     */
+    insertViewAt(view, index) {
+        const views = this.views;
+        const existingIndex = views.indexOf(view);
+        if (existingIndex > -1) {
+            assert(view.nav === this, 'view is not part of the nav');
+            // The view already in the stack, removes it.
+            views.splice(existingIndex, 1);
+            // and add it back at the requested index.
+            views.splice(index, 0, view);
+        }
+        else {
+            assert(!view.nav, 'nav is used');
+            // this is a new view to add to the stack
+            // create the new entering view
+            view.nav = this;
+            views.splice(index, 0, view);
+        }
+    }
+    /**
+     * Removes a view from the stack.
+     *
+     * @param view The view to remove.
+     */
+    removeView(view) {
+        assert(view.state === VIEW_STATE_ATTACHED || view.state === VIEW_STATE_DESTROYED, 'view state should be loaded or destroyed');
+        const views = this.views;
+        const index = views.indexOf(view);
+        assert(index > -1, 'view must be part of the stack');
+        if (index >= 0) {
+            views.splice(index, 1);
+        }
+    }
+    destroyView(view) {
+        view._destroy();
+        this.removeView(view);
+    }
+    /**
+     * Unmounts all inactive views after the specified active view.
+     *
+     * DOM WRITE
+     *
+     * @param activeView The view that is actively visible in the stack. Used to calculate which views to unmount.
+     */
+    unmountInactiveViews(activeView) {
+        // ok, cleanup time!! Destroy all of the views that are
+        // INACTIVE and come after the active view
+        // only do this if the views exist, though
+        if (this.destroyed) {
+            return;
+        }
+        const views = this.views;
+        const activeViewIndex = views.indexOf(activeView);
+        for (let i = views.length - 1; i >= 0; i--) {
+            const view = views[i];
+            /**
+             * When inserting multiple views via insertPages
+             * the last page will be transitioned to, but the
+             * others will not be. As a result, a DOM element
+             * will only be created for the last page inserted.
+             * As a result, it is possible to have views in the
+             * stack that do not have `view.element` yet.
+             */
+            const element = view.element;
+            if (element) {
+                if (i > activeViewIndex) {
+                    // this view comes after the active view
+                    // let's unload it
+                    lifecycle(element, LIFECYCLE_WILL_UNLOAD);
+                    this.destroyView(view);
+                }
+                else if (i < activeViewIndex) {
+                    // this view comes before the active view
+                    // and it is not a portal then ensure it is hidden
+                    setPageHidden(element, true);
+                }
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Removes a component from the navigation stack at the specified index.",
-          "tags": [{
-              "name": "param",
-              "text": "startIndex The number to begin removal at."
-            }, {
-              "name": "param",
-              "text": "removeCount The number of components to remove."
-            }, {
-              "name": "param",
-              "text": "opts The navigation options."
-            }, {
-              "name": "param",
-              "text": "done The transition complete function."
-            }]
         }
-      },
-      "setRoot": {
-        "complexType": {
-          "signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "component The component to set as the root of the navigation stack."
-                }],
-              "text": "The component to set as the root of the navigation stack."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "componentProps Any properties of the component."
-                }],
-              "text": "Any properties of the component."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "opts The navigation options."
-                }],
-              "text": "The navigation options."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "done The transition complete function."
-                }],
-              "text": "The transition complete function."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    canStart() {
+        return (!this.gestureOrAnimationInProgress &&
+            !!this.swipeGesture &&
+            !this.isTransitioning &&
+            this.transInstr.length === 0 &&
+            this.canGoBackSync());
+    }
+    onStart() {
+        this.gestureOrAnimationInProgress = true;
+        this.pop({ direction: 'back', progressAnimation: true });
+    }
+    onMove(stepValue) {
+        if (this.sbAni) {
+            this.sbAni.progressStep(stepValue);
+        }
+    }
+    onEnd(shouldComplete, stepValue, dur) {
+        if (this.sbAni) {
+            this.sbAni.onFinish(() => {
+                this.gestureOrAnimationInProgress = false;
+            }, { oneTimeCallback: true });
+            // Account for rounding errors in JS
+            let newStepValue = shouldComplete ? -0.001 : 0.001;
+            /**
+             * Animation will be reversed here, so need to
+             * reverse the easing curve as well
+             *
+             * Additionally, we need to account for the time relative
+             * to the new easing curve, as `stepValue` is going to be given
+             * in terms of a linear curve.
+             */
+            if (!shouldComplete) {
+                this.sbAni.easing('cubic-bezier(1, 0, 0.68, 0.28)');
+                newStepValue += getTimeGivenProgression([0, 0], [1, 0], [0.68, 0.28], [1, 1], stepValue)[0];
+            }
+            else {
+                newStepValue += getTimeGivenProgression([0, 0], [0.32, 0.72], [0, 1], [1, 1], stepValue)[0];
+            }
+            this.sbAni.progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
+        }
+        else {
+            this.gestureOrAnimationInProgress = false;
+        }
+    }
+    render() {
+        return h("slot", null);
+    }
+    static get is() { return "ion-nav"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nav.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nav.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "delegate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FrameworkDelegate",
+                    "resolved": "FrameworkDelegate | undefined",
+                    "references": {
+                        "FrameworkDelegate": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::FrameworkDelegate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                }
             },
-            "NavComponent": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavComponent"
+            "swipeGesture": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If the nav component should allow for swipe-to-go-back."
+                },
+                "attribute": "swipe-gesture",
+                "reflect": false
             },
-            "T": {
-              "location": "global",
-              "id": "global::T"
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the nav should animate the transition of components."
+                },
+                "attribute": "animated",
+                "reflect": false,
+                "defaultValue": "true"
             },
-            "ComponentProps": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::ComponentProps"
+            "animation": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AnimationBuilder",
+                    "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+                    "references": {
+                        "AnimationBuilder": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::AnimationBuilder"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions."
+                }
             },
-            "NavOptions": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavOptions"
+            "rootParams": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentProps",
+                    "resolved": "undefined | { [key: string]: any; }",
+                    "references": {
+                        "ComponentProps": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::ComponentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Any parameters for the root component"
+                }
             },
-            "TransitionDoneFn": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+            "root": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NavComponent",
+                    "resolved": "Function | HTMLElement | ViewController | null | string | undefined",
+                    "references": {
+                        "NavComponent": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavComponent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Root NavComponent to load"
+                },
+                "attribute": "root",
+                "reflect": false
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Set the root for the current navigation stack to a component.",
-          "tags": [{
-              "name": "param",
-              "text": "component The component to set as the root of the navigation stack."
-            }, {
-              "name": "param",
-              "text": "componentProps Any properties of the component."
-            }, {
-              "name": "param",
-              "text": "opts The navigation options."
-            }, {
-              "name": "param",
-              "text": "done The transition complete function."
-            }]
-        }
-      },
-      "setPages": {
-        "complexType": {
-          "signature": "(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "views The list of views to set as the navigation stack."
-                }],
-              "text": "The list of views to set as the navigation stack."
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ionNavWillLoad",
+                "name": "ionNavWillLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Event fired when Nav will load a component"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "opts The navigation options."
-                }],
-              "text": "The navigation options."
+                "method": "ionNavWillChange",
+                "name": "ionNavWillChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the nav will change components"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "done The transition complete function."
-                }],
-              "text": "The transition complete function."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+                "method": "ionNavDidChange",
+                "name": "ionNavDidChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the nav has changed components"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "push": {
+                "complexType": {
+                    "signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "component The component to push onto the navigation stack."
+                                }],
+                            "text": "The component to push onto the navigation stack."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "componentProps Any properties of the component."
+                                }],
+                            "text": "Any properties of the component."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "opts The navigation options."
+                                }],
+                            "text": "The navigation options."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "done The transition complete function."
+                                }],
+                            "text": "The transition complete function."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavComponent": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavComponent"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "ComponentProps": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::ComponentProps"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions"
+                        },
+                        "TransitionDoneFn": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Push a new component onto the current navigation stack. Pass any additional\ninformation along as an object. This additional information is accessible\nthrough NavParams.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "component The component to push onto the navigation stack."
+                        }, {
+                            "name": "param",
+                            "text": "componentProps Any properties of the component."
+                        }, {
+                            "name": "param",
+                            "text": "opts The navigation options."
+                        }, {
+                            "name": "param",
+                            "text": "done The transition complete function."
+                        }]
+                }
             },
-            "NavComponent": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavComponent"
+            "insert": {
+                "complexType": {
+                    "signature": "<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "insertIndex The index to insert the component at in the stack."
+                                }],
+                            "text": "The index to insert the component at in the stack."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "component The component to insert into the navigation stack."
+                                }],
+                            "text": "The component to insert into the navigation stack."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "componentProps Any properties of the component."
+                                }],
+                            "text": "Any properties of the component."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "opts The navigation options."
+                                }],
+                            "text": "The navigation options."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "done The transition complete function."
+                                }],
+                            "text": "The transition complete function."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavComponent": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavComponent"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "ComponentProps": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::ComponentProps"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions"
+                        },
+                        "TransitionDoneFn": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Inserts a component into the navigation stack at the specified index.\nThis is useful to add a component at any point in the navigation stack.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "insertIndex The index to insert the component at in the stack."
+                        }, {
+                            "name": "param",
+                            "text": "component The component to insert into the navigation stack."
+                        }, {
+                            "name": "param",
+                            "text": "componentProps Any properties of the component."
+                        }, {
+                            "name": "param",
+                            "text": "opts The navigation options."
+                        }, {
+                            "name": "param",
+                            "text": "done The transition complete function."
+                        }]
+                }
             },
-            "NavComponentWithProps": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
+            "insertPages": {
+                "complexType": {
+                    "signature": "(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "insertIndex The index to insert the components at in the stack."
+                                }],
+                            "text": "The index to insert the components at in the stack."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "insertComponents The components to insert into the navigation stack."
+                                }],
+                            "text": "The components to insert into the navigation stack."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "opts The navigation options."
+                                }],
+                            "text": "The navigation options."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "done The transition complete function."
+                                }],
+                            "text": "The transition complete function."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavComponent": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavComponent"
+                        },
+                        "NavComponentWithProps": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions"
+                        },
+                        "TransitionDoneFn": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Inserts an array of components into the navigation stack at the specified index.\nThe last component in the array will become instantiated as a view, and animate\nin to become the active view.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "insertIndex The index to insert the components at in the stack."
+                        }, {
+                            "name": "param",
+                            "text": "insertComponents The components to insert into the navigation stack."
+                        }, {
+                            "name": "param",
+                            "text": "opts The navigation options."
+                        }, {
+                            "name": "param",
+                            "text": "done The transition complete function."
+                        }]
+                }
             },
-            "NavOptions": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavOptions"
+            "pop": {
+                "complexType": {
+                    "signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "opts The navigation options."
+                                }],
+                            "text": "The navigation options."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "done The transition complete function."
+                                }],
+                            "text": "The transition complete function."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions"
+                        },
+                        "TransitionDoneFn": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Pop a component off of the navigation stack. Navigates back from the current\ncomponent.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "opts The navigation options."
+                        }, {
+                            "name": "param",
+                            "text": "done The transition complete function."
+                        }]
+                }
             },
-            "TransitionDoneFn": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.",
-          "tags": [{
-              "name": "param",
-              "text": "views The list of views to set as the navigation stack."
-            }, {
-              "name": "param",
-              "text": "opts The navigation options."
-            }, {
-              "name": "param",
-              "text": "done The transition complete function."
-            }]
-        }
-      },
-      "setRouteId": {
-        "complexType": {
-          "signature": "(id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "id The component tag."
-                }],
-              "text": "The component tag."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "params The component params."
-                }],
-              "text": "The component params."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "direction A direction hint."
-                }],
-              "text": "A direction hint."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "animation an AnimationBuilder."
-                }],
-              "text": "an AnimationBuilder."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "popTo": {
+                "complexType": {
+                    "signature": "(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "indexOrViewCtrl The index or view controller to pop to."
+                                }],
+                            "text": "The index or view controller to pop to."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "opts The navigation options."
+                                }],
+                            "text": "The navigation options."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "done The transition complete function."
+                                }],
+                            "text": "The transition complete function."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ViewController": {
+                            "location": "import",
+                            "path": "./view-controller",
+                            "id": "src/components/nav/view-controller.ts::ViewController"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions"
+                        },
+                        "TransitionDoneFn": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+                        },
+                        "TransitionInstruction": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::TransitionInstruction"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Pop to a specific index in the navigation stack.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "indexOrViewCtrl The index or view controller to pop to."
+                        }, {
+                            "name": "param",
+                            "text": "opts The navigation options."
+                        }, {
+                            "name": "param",
+                            "text": "done The transition complete function."
+                        }]
+                }
             },
-            "RouteWrite": {
-              "location": "import",
-              "path": "../router/utils/interface",
-              "id": "src/components/router/utils/interface.ts::RouteWrite"
+            "popToRoot": {
+                "complexType": {
+                    "signature": "(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "opts The navigation options."
+                                }],
+                            "text": "The navigation options."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "done The transition complete function."
+                                }],
+                            "text": "The transition complete function."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions"
+                        },
+                        "TransitionDoneFn": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Navigate back to the root of the stack, no matter how far back that is.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "opts The navigation options."
+                        }, {
+                            "name": "param",
+                            "text": "done The transition complete function."
+                        }]
+                }
             },
-            "ComponentProps": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::ComponentProps"
+            "removeIndex": {
+                "complexType": {
+                    "signature": "(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "startIndex The number to begin removal at."
+                                }],
+                            "text": "The number to begin removal at."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "removeCount The number of components to remove."
+                                }],
+                            "text": "The number of components to remove."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "opts The navigation options."
+                                }],
+                            "text": "The navigation options."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "done The transition complete function."
+                                }],
+                            "text": "The transition complete function."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions"
+                        },
+                        "TransitionDoneFn": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Removes a component from the navigation stack at the specified index.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "startIndex The number to begin removal at."
+                        }, {
+                            "name": "param",
+                            "text": "removeCount The number of components to remove."
+                        }, {
+                            "name": "param",
+                            "text": "opts The navigation options."
+                        }, {
+                            "name": "param",
+                            "text": "done The transition complete function."
+                        }]
+                }
             },
-            "RouterDirection": {
-              "location": "import",
-              "path": "../router/utils/interface",
-              "id": "src/components/router/utils/interface.ts::RouterDirection"
+            "setRoot": {
+                "complexType": {
+                    "signature": "<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "component The component to set as the root of the navigation stack."
+                                }],
+                            "text": "The component to set as the root of the navigation stack."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "componentProps Any properties of the component."
+                                }],
+                            "text": "Any properties of the component."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "opts The navigation options."
+                                }],
+                            "text": "The navigation options."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "done The transition complete function."
+                                }],
+                            "text": "The transition complete function."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavComponent": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavComponent"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "ComponentProps": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::ComponentProps"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions"
+                        },
+                        "TransitionDoneFn": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Set the root for the current navigation stack to a component.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "component The component to set as the root of the navigation stack."
+                        }, {
+                            "name": "param",
+                            "text": "componentProps Any properties of the component."
+                        }, {
+                            "name": "param",
+                            "text": "opts The navigation options."
+                        }, {
+                            "name": "param",
+                            "text": "done The transition complete function."
+                        }]
+                }
             },
-            "AnimationBuilder": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::AnimationBuilder"
+            "setPages": {
+                "complexType": {
+                    "signature": "(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "views The list of views to set as the navigation stack."
+                                }],
+                            "text": "The list of views to set as the navigation stack."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "opts The navigation options."
+                                }],
+                            "text": "The navigation options."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "done The transition complete function."
+                                }],
+                            "text": "The transition complete function."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavComponent": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavComponent"
+                        },
+                        "NavComponentWithProps": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavComponentWithProps"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions"
+                        },
+                        "TransitionDoneFn": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::TransitionDoneFn"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Set the views of the current navigation stack and navigate to the last view.\nBy default animations are disabled, but they can be enabled by passing options\nto the navigation controller. Navigation parameters can also be passed to the\nindividual pages in the array.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "views The list of views to set as the navigation stack."
+                        }, {
+                            "name": "param",
+                            "text": "opts The navigation options."
+                        }, {
+                            "name": "param",
+                            "text": "done The transition complete function."
+                        }]
+                }
             },
-            "NavOptions": {
-              "location": "import",
-              "path": "./nav-interface",
-              "id": "src/components/nav/nav-interface.ts::NavOptions"
-            }
-          },
-          "return": "Promise<RouteWrite>"
-        },
-        "docs": {
-          "text": "Called by the router to update the view.",
-          "tags": [{
-              "name": "param",
-              "text": "id The component tag."
-            }, {
-              "name": "param",
-              "text": "params The component params."
-            }, {
-              "name": "param",
-              "text": "direction A direction hint."
-            }, {
-              "name": "param",
-              "text": "animation an AnimationBuilder."
-            }, {
-              "name": "return",
-              "text": "the status."
-            }, {
-              "name": "internal",
-              "text": undefined
-            }]
-        }
-      },
-      "getRouteId": {
-        "complexType": {
-          "signature": "() => Promise<RouteID | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "setRouteId": {
+                "complexType": {
+                    "signature": "(id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "id The component tag."
+                                }],
+                            "text": "The component tag."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "params The component params."
+                                }],
+                            "text": "The component params."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "direction A direction hint."
+                                }],
+                            "text": "A direction hint."
+                        }, {
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "animation an AnimationBuilder."
+                                }],
+                            "text": "an AnimationBuilder."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RouteWrite": {
+                            "location": "import",
+                            "path": "../router/utils/interface",
+                            "id": "src/components/router/utils/interface.ts::RouteWrite"
+                        },
+                        "ComponentProps": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::ComponentProps"
+                        },
+                        "RouterDirection": {
+                            "location": "import",
+                            "path": "../router/utils/interface",
+                            "id": "src/components/router/utils/interface.ts::RouterDirection"
+                        },
+                        "AnimationBuilder": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::AnimationBuilder"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions"
+                        }
+                    },
+                    "return": "Promise<RouteWrite>"
+                },
+                "docs": {
+                    "text": "Called by the router to update the view.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "id The component tag."
+                        }, {
+                            "name": "param",
+                            "text": "params The component params."
+                        }, {
+                            "name": "param",
+                            "text": "direction A direction hint."
+                        }, {
+                            "name": "param",
+                            "text": "animation an AnimationBuilder."
+                        }, {
+                            "name": "return",
+                            "text": "the status."
+                        }, {
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             },
-            "RouteID": {
-              "location": "import",
-              "path": "../router/utils/interface",
-              "id": "src/components/router/utils/interface.ts::RouteID"
-            }
-          },
-          "return": "Promise<RouteID | undefined>"
-        },
-        "docs": {
-          "text": "Called by <ion-router> to retrieve the current component.",
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }]
-        }
-      },
-      "getActive": {
-        "complexType": {
-          "signature": "() => Promise<ViewController | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "getRouteId": {
+                "complexType": {
+                    "signature": "() => Promise<RouteID | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RouteID": {
+                            "location": "import",
+                            "path": "../router/utils/interface",
+                            "id": "src/components/router/utils/interface.ts::RouteID"
+                        }
+                    },
+                    "return": "Promise<RouteID | undefined>"
+                },
+                "docs": {
+                    "text": "Called by <ion-router> to retrieve the current component.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             },
-            "ViewController": {
-              "location": "import",
-              "path": "./view-controller",
-              "id": "src/components/nav/view-controller.ts::ViewController"
-            }
-          },
-          "return": "Promise<ViewController | undefined>"
-        },
-        "docs": {
-          "text": "Get the active view.",
-          "tags": []
-        }
-      },
-      "getByIndex": {
-        "complexType": {
-          "signature": "(index: number) => Promise<ViewController | undefined>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "index The index of the view."
-                }],
-              "text": "The index of the view."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "getActive": {
+                "complexType": {
+                    "signature": "() => Promise<ViewController | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ViewController": {
+                            "location": "import",
+                            "path": "./view-controller",
+                            "id": "src/components/nav/view-controller.ts::ViewController"
+                        }
+                    },
+                    "return": "Promise<ViewController | undefined>"
+                },
+                "docs": {
+                    "text": "Get the active view.",
+                    "tags": []
+                }
             },
-            "ViewController": {
-              "location": "import",
-              "path": "./view-controller",
-              "id": "src/components/nav/view-controller.ts::ViewController"
-            }
-          },
-          "return": "Promise<ViewController | undefined>"
-        },
-        "docs": {
-          "text": "Get the view at the specified index.",
-          "tags": [{
-              "name": "param",
-              "text": "index The index of the view."
-            }]
-        }
-      },
-      "canGoBack": {
-        "complexType": {
-          "signature": "(view?: ViewController) => Promise<boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "view The view to check."
-                }],
-              "text": "The view to check."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "getByIndex": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<ViewController | undefined>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "index The index of the view."
+                                }],
+                            "text": "The index of the view."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ViewController": {
+                            "location": "import",
+                            "path": "./view-controller",
+                            "id": "src/components/nav/view-controller.ts::ViewController"
+                        }
+                    },
+                    "return": "Promise<ViewController | undefined>"
+                },
+                "docs": {
+                    "text": "Get the view at the specified index.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "index The index of the view."
+                        }]
+                }
             },
-            "ViewController": {
-              "location": "import",
-              "path": "./view-controller",
-              "id": "src/components/nav/view-controller.ts::ViewController"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Returns `true` if the current view can go back.",
-          "tags": [{
-              "name": "param",
-              "text": "view The view to check."
-            }]
-        }
-      },
-      "getPrevious": {
-        "complexType": {
-          "signature": "(view?: ViewController) => Promise<ViewController | undefined>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "view The view to get."
-                }],
-              "text": "The view to get."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "canGoBack": {
+                "complexType": {
+                    "signature": "(view?: ViewController) => Promise<boolean>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "view The view to check."
+                                }],
+                            "text": "The view to check."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ViewController": {
+                            "location": "import",
+                            "path": "./view-controller",
+                            "id": "src/components/nav/view-controller.ts::ViewController"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns `true` if the current view can go back.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "view The view to check."
+                        }]
+                }
             },
-            "ViewController": {
-              "location": "import",
-              "path": "./view-controller",
-              "id": "src/components/nav/view-controller.ts::ViewController"
+            "getPrevious": {
+                "complexType": {
+                    "signature": "(view?: ViewController) => Promise<ViewController | undefined>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "view The view to get."
+                                }],
+                            "text": "The view to get."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ViewController": {
+                            "location": "import",
+                            "path": "./view-controller",
+                            "id": "src/components/nav/view-controller.ts::ViewController"
+                        }
+                    },
+                    "return": "Promise<ViewController | undefined>"
+                },
+                "docs": {
+                    "text": "Get the previous view.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "view The view to get."
+                        }]
+                }
             }
-          },
-          "return": "Promise<ViewController | undefined>"
-        },
-        "docs": {
-          "text": "Get the previous view.",
-          "tags": [{
-              "name": "param",
-              "text": "view The view to get."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "swipeGesture",
-        "methodName": "swipeGestureChanged"
-      }, {
-        "propName": "root",
-        "methodName": "rootChanged"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "swipeGesture",
+                "methodName": "swipeGestureChanged"
+            }, {
+                "propName": "root",
+                "methodName": "rootChanged"
+            }];
+    }
 }