@venite/components 0.16.33 → 0.16.36

package/dist/esm/ion-nav.entry.js

@@ -1,93 +1,84 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-f0f6a379.js';
-import { g as getIonMode, c as config } from './ionic-global-ef89a0a5.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-89113939.js';
-import { a as assert } from './helpers-8c93393b.js';
-import { l as lifecycle, t as transition, s as setPageHidden, L as LIFECYCLE_WILL_UNLOAD, a as LIFECYCLE_WILL_LEAVE, b as LIFECYCLE_DID_LEAVE } from './index-9579282b.js';
-import { a as attachComponent } from './framework-delegate-7af2c551.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './index-034add74.js';
+import { g as getIonMode, c as config } from './ionic-global-24253941.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-4c0db14f.js';
+import { l as assert, s as shallowEqualStringMap } from './helpers-af86adf0.js';
+import { l as lifecycle, t as transition, s as setPageHidden, L as LIFECYCLE_WILL_UNLOAD, a as LIFECYCLE_WILL_LEAVE, b as LIFECYCLE_DID_LEAVE } from './index-faad3da4.js';
+import { a as attachComponent } from './framework-delegate-d512b396.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const VIEW_STATE_NEW = 1;
 const VIEW_STATE_ATTACHED = 2;
 const VIEW_STATE_DESTROYED = 3;
 class ViewController {
-    constructor(component, params) {
-        this.component = component;
-        this.params = params;
-        this.state = VIEW_STATE_NEW;
-    }
-    async init(container) {
-        this.state = VIEW_STATE_ATTACHED;
-        if (!this.element) {
-            const component = this.component;
-            this.element = await attachComponent(this.delegate, container, component, ['ion-page', 'ion-page-invisible'], this.params);
-        }
+  constructor(component, params) {
+    this.component = component;
+    this.params = params;
+    this.state = VIEW_STATE_NEW;
+  }
+  async init(container) {
+    this.state = VIEW_STATE_ATTACHED;
+    if (!this.element) {
+      const component = this.component;
+      this.element = await attachComponent(this.delegate, container, component, ['ion-page', 'ion-page-invisible'], this.params);
     }
-    /**
-     * DOM WRITE
-     */
-    _destroy() {
-        assert(this.state !== VIEW_STATE_DESTROYED, 'view state must be ATTACHED');
-        const element = this.element;
-        if (element) {
-            if (this.delegate) {
-                this.delegate.removeViewFromDom(element.parentElement, element);
-            }
-            else {
-                element.remove();
-            }
-        }
-        this.nav = undefined;
-        this.state = VIEW_STATE_DESTROYED;
+  }
+  /**
+   * DOM WRITE
+   */
+  _destroy() {
+    assert(this.state !== VIEW_STATE_DESTROYED, 'view state must be ATTACHED');
+    const element = this.element;
+    if (element) {
+      if (this.delegate) {
+        this.delegate.removeViewFromDom(element.parentElement, element);
+      }
+      else {
+        element.remove();
+      }
     }
+    this.nav = undefined;
+    this.state = VIEW_STATE_DESTROYED;
+  }
 }
 const matches = (view, id, params) => {
-    if (!view) {
-        return false;
-    }
-    if (view.component !== id) {
-        return false;
-    }
-    const currentParams = view.params;
-    if (currentParams === params) {
-        return true;
-    }
-    if (!currentParams && !params) {
-        return true;
-    }
-    if (!currentParams || !params) {
-        return false;
-    }
-    const keysA = Object.keys(currentParams);
-    const keysB = Object.keys(params);
-    if (keysA.length !== keysB.length) {
-        return false;
-    }
-    // Test for A's keys different from B.
-    for (const key of keysA) {
-        if (currentParams[key] !== params[key]) {
-            return false;
-        }
-    }
-    return true;
+  if (!view) {
+    return false;
+  }
+  if (view.component !== id) {
+    return false;
+  }
+  return shallowEqualStringMap(view.params, params);
 };
 const convertToView = (page, params) => {
-    if (!page) {
-        return null;
-    }
-    if (page instanceof ViewController) {
-        return page;
-    }
-    return new ViewController(page, params);
+  if (!page) {
+    return null;
+  }
+  if (page instanceof ViewController) {
+    return page;
+  }
+  return new ViewController(page, params);
 };
 const convertToViews = (pages) => {
-    return pages.map(page => {
-        if (page instanceof ViewController) {
-            return page;
-        }
-        if ('page' in page) {
-            return convertToView(page.page, page.params);
-        }
-        return convertToView(page, undefined);
-    }).filter(v => v !== null);
+  return pages
+    .map((page) => {
+    if (page instanceof ViewController) {
+      return page;
+    }
+    if ('component' in page) {
+      /**
+       * TODO Ionic 6:
+       * Consider switching to just using `undefined` here
+       * as well as on the public interfaces and on
+       * `NavComponentWithProps`. Previously `pages` was
+       * of type `any[]` so TypeScript did not catch this.
+       */
+      return convertToView(page.component, page.componentProps === null ? undefined : page.componentProps);
+    }
+    return convertToView(page, undefined);
+  })
+    .filter((v) => v !== null);
 };
 
 const navCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
@@ -122,9 +113,7 @@ const Nav = class {
     }
   }
   componentWillLoad() {
-    this.useRouter =
-      !!document.querySelector('ion-router') &&
-        !this.el.closest('[no-router]');
+    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');
@@ -133,20 +122,24 @@ const Nav = class {
   }
   async componentDidLoad() {
     this.rootChanged();
-    this.gesture = (await import('./swipe-back-762284df.js')).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+    this.gesture = (await import('./swipe-back-cac0fc31.js')).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
     this.swipeGestureChanged();
   }
-  componentDidUnload() {
+  connectedCallback() {
+    this.destroyed = false;
+  }
+  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;
     }
-    // release swipe back gesture and transition
-    this.transInstr.length = this.views.length = 0;
+    this.transInstr.length = 0;
+    this.views.length = 0;
     this.destroyed = true;
   }
   /**
@@ -160,11 +153,7 @@ const Nav = class {
    * @param done The transition complete function.
    */
   push(component, componentProps, opts, done) {
-    return this.queueTrns({
-      insertStart: -1,
-      insertViews: [{ page: component, params: componentProps }],
-      opts
-    }, done);
+    return this.insert(-1, component, componentProps, opts, done);
   }
   /**
    * Inserts a component into the navigation stack at the specified index.
@@ -177,11 +166,7 @@ const Nav = class {
    * @param done The transition complete function.
    */
   insert(insertIndex, component, componentProps, opts, done) {
-    return this.queueTrns({
-      insertStart: insertIndex,
-      insertViews: [{ page: component, params: componentProps }],
-      opts
-    }, done);
+    return this.insertPages(insertIndex, [{ component, componentProps }], opts, done);
   }
   /**
    * Inserts an array of components into the navigation stack at the specified index.
@@ -197,7 +182,7 @@ const Nav = class {
     return this.queueTrns({
       insertStart: insertIndex,
       insertViews: insertComponents,
-      opts
+      opts,
     }, done);
   }
   /**
@@ -208,11 +193,7 @@ const Nav = class {
    * @param done The transition complete function.
    */
   pop(opts, done) {
-    return this.queueTrns({
-      removeStart: -1,
-      removeCount: 1,
-      opts
-    }, done);
+    return this.removeIndex(-1, 1, opts, done);
   }
   /**
    * Pop to a specific index in the navigation stack.
@@ -222,19 +203,19 @@ const Nav = class {
    * @param done The transition complete function.
    */
   popTo(indexOrViewCtrl, opts, done) {
-    const tiConfig = {
+    const ti = {
       removeStart: -1,
       removeCount: -1,
-      opts
+      opts,
     };
     if (typeof indexOrViewCtrl === 'object' && indexOrViewCtrl.component) {
-      tiConfig.removeView = indexOrViewCtrl;
-      tiConfig.removeStart = 1;
+      ti.removeView = indexOrViewCtrl;
+      ti.removeStart = 1;
     }
     else if (typeof indexOrViewCtrl === 'number') {
-      tiConfig.removeStart = indexOrViewCtrl + 1;
+      ti.removeStart = indexOrViewCtrl + 1;
     }
-    return this.queueTrns(tiConfig, done);
+    return this.queueTrns(ti, done);
   }
   /**
    * Navigate back to the root of the stack, no matter how far back that is.
@@ -243,11 +224,7 @@ const Nav = class {
    * @param done The transition complete function.
    */
   popToRoot(opts, done) {
-    return this.queueTrns({
-      removeStart: 1,
-      removeCount: -1,
-      opts
-    }, done);
+    return this.removeIndex(1, -1, opts, done);
   }
   /**
    * Removes a component from the navigation stack at the specified index.
@@ -261,7 +238,7 @@ const Nav = class {
     return this.queueTrns({
       removeStart: startIndex,
       removeCount,
-      opts
+      opts,
     }, done);
   }
   /**
@@ -273,7 +250,7 @@ const Nav = class {
    * @param done The transition complete function.
    */
   setRoot(component, componentProps, opts, done) {
-    return this.setPages([{ page: component, params: componentProps }], opts, done);
+    return this.setPages([{ component, componentProps }], opts, done);
   }
   /**
    * Set the views of the current navigation stack and navigate to the last view.
@@ -286,9 +263,7 @@ const Nav = class {
    * @param done The transition complete function.
    */
   setPages(views, opts, done) {
-    if (opts == null) {
-      opts = {};
-    }
+    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;
@@ -298,94 +273,110 @@ const Nav = class {
       insertViews: views,
       removeStart: 0,
       removeCount: -1,
-      opts
+      opts,
     }, done);
   }
-  /** @internal */
-  setRouteId(id, params, direction) {
+  /**
+   * 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
+        element: active.element,
       });
     }
     let resolve;
-    const promise = new Promise(r => (resolve = r));
+    const promise = new Promise((r) => (resolve = r));
     let finish;
     const commonOpts = {
       updateURL: false,
-      viewIsReady: enteringEl => {
+      viewIsReady: (enteringEl) => {
         let mark;
-        const p = new Promise(r => (mark = r));
+        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);
     }
     else {
-      const viewController = this.views.find(v => matches(v, id, params));
+      // 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' }));
+        finish = this.popTo(viewController, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animationBuilder: animation }));
       }
       else if (direction === 'forward') {
-        finish = this.push(id, params, commonOpts);
+        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 }));
+        finish = this.setRoot(id, params, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animated: true, animationBuilder: animation }));
       }
     }
     return promise;
   }
-  /** @internal */
+  /**
+   * Called by <ion-router> to retrieve the current component.
+   *
+   * @internal
+   */
   async getRouteId() {
     const active = this.getActiveSync();
-    return active
-      ? {
+    if (active) {
+      return {
         id: active.element.tagName,
         params: active.params,
-        element: active.element
-      }
-      : undefined;
+        element: active.element,
+      };
+    }
+    return undefined;
   }
   /**
    * Get the active view.
    */
-  getActive() {
-    return Promise.resolve(this.getActiveSync());
+  async getActive() {
+    return this.getActiveSync();
   }
   /**
    * Get the view at the specified index.
    *
    * @param index The index of the view.
    */
-  getByIndex(index) {
-    return Promise.resolve(this.views[index]);
+  async getByIndex(index) {
+    return this.views[index];
   }
   /**
    * Returns `true` if the current view can go back.
    *
    * @param view The view to check.
    */
-  canGoBack(view) {
-    return Promise.resolve(this.canGoBackSync(view));
+  async canGoBack(view) {
+    return this.canGoBackSync(view);
   }
   /**
    * Get the previous view.
    *
    * @param view The view to get.
    */
-  getPrevious(view) {
-    return Promise.resolve(this.getPreviousSync(view));
+  async getPrevious(view) {
+    return this.getPreviousSync(view);
   }
   getLength() {
     return this.views.length;
@@ -404,27 +395,42 @@ const Nav = class {
     const index = views.indexOf(view);
     return index > 0 ? views[index - 1] : undefined;
   }
-  // _queueTrns() adds a navigation stack change to the queue and schedules it to run:
-  // 1. _nextTrns(): consumes the next transition in the queue
-  // 2. _viewInit(): initializes enteringView if required
-  // 3. _viewTest(): ensures canLeave/canEnter Returns `true`, so the operation can continue
-  // 4. _postViewInit(): add/remove the views from the navigation stack
-  // 5. _transitionInit(): initializes the visual transition if required and schedules it to run
-  // 6. _viewAttachToDOM(): attaches the enteringView to the DOM
-  // 7. _transitionStart(): called once the transition actually starts, it initializes the Animation underneath.
-  // 8. _transitionFinish(): called once the transition finishes
-  // 9. _cleanup(): syncs the navigation internal state with the DOM. For example it removes the pages from the DOM or hides/show them.
-  queueTrns(ti, done) {
-    if (this.isTransitioning && ti.opts != null && ti.opts.skipIfBusy) {
-      return Promise.resolve(false);
+  /**
+   * 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 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 (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;
+        }
+      }
+    }
     // Normalize empty
-    if (ti.insertViews && ti.insertViews.length === 0) {
+    if (((_b = ti.insertViews) === null || _b === void 0 ? void 0 : _b.length) === 0) {
       ti.insertViews = undefined;
     }
     // Enqueue transition instruction
@@ -470,14 +476,18 @@ const Nav = class {
       ti.resolve(false);
     }
   }
+  /**
+   * 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;
     }
-    // there is no transition happening right now
-    // get the next instruction
+    // there is no transition happening right now, executes the next instructions.
     const ti = this.transInstr.shift();
     if (!ti) {
       return false;
@@ -485,6 +495,7 @@ const Nav = class {
     this.runTransition(ti);
     return true;
   }
+  /** Executes all the transition instruction from the queue. */
   async runTransition(ti) {
     try {
       // set that this nav is actively transitioning
@@ -501,18 +512,32 @@ const Nav = class {
       }
       this.postViewInit(enteringView, leavingView, ti);
       // Needs transition?
-      const requiresTransition = (ti.enteringRequiresTransition || ti.leavingRequiresTransition) &&
-        enteringView !== leavingView;
-      const result = requiresTransition
-        ? await this.transition(enteringView, leavingView, ti)
-        : {
-          // 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
+      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
+          requiresTransition: false,
         };
+      }
       this.success(result, ti);
       this.ionNavDidChange.emit();
     }
@@ -523,11 +548,11 @@ const Nav = class {
     this.nextTrns();
   }
   prepareTI(ti) {
+    var _a, _b;
+    var _c;
     const viewsLength = this.views.length;
-    ti.opts = ti.opts || {};
-    if (ti.opts.delegate === undefined) {
-      ti.opts.delegate = this.delegate;
-    }
+    (_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');
@@ -544,8 +569,7 @@ const Nav = class {
       if (ti.removeCount < 0) {
         ti.removeCount = viewsLength - ti.removeStart;
       }
-      ti.leavingRequiresTransition =
-        ti.removeCount > 0 && ti.removeStart + ti.removeCount === viewsLength;
+      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
@@ -577,13 +601,21 @@ const Nav = class {
     }
     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) {
-      // grab the very last view of the views to be inserted
-      // and initialize it as the new entering view
       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;
@@ -597,39 +629,45 @@ const Nav = class {
     }
     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 = ti.insertViews;
-    const removeStart = ti.removeStart;
-    const removeCount = ti.removeCount;
+    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 = 0; i < removeCount; i++) {
-        const view = this.views[i + removeStart];
+      for (let i = removeStart; i < removeStart + removeCount; i++) {
+        const view = this.views[i];
         if (view && view !== enteringView && view !== leavingView) {
           destroyQueue.push(view);
         }
       }
       // default the direction to "back"
-      opts.direction = opts.direction || 'back';
+      (_a = opts.direction) !== null && _a !== void 0 ? _a : (opts.direction = 'back');
     }
-    const finalBalance = this.views.length +
-      (insertViews !== undefined ? insertViews.length : 0) -
-      (removeCount !== undefined ? removeCount : 0);
-    assert(finalBalance >= 0, 'final balance can not be negative');
-    if (finalBalance === 0) {
+    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
-    // there are views to insert
+    // Insert the new views in the stack.
     if (insertViews) {
       // add the views to the
       let insertIndex = ti.insertStart;
@@ -639,7 +677,7 @@ const Nav = class {
       }
       if (ti.enteringRequiresTransition) {
         // default to forward if not already set
-        opts.direction = opts.direction || 'forward';
+        (_c = opts.direction) !== null && _c !== void 0 ? _c : (opts.direction = 'forward');
       }
     }
     // if the views to be removed are in the beginning or middle
@@ -663,48 +701,63 @@ const Nav = class {
     // 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) => this.sbAni = ani
-      : undefined;
+    const progressCallback = opts.progressAnimation ? (ani) => (this.sbAni = ani) : undefined;
     const mode = getIonMode(this);
     const enteringEl = enteringView.element;
     const leavingEl = leavingView && leavingView.element;
-    const animationOpts = Object.assign({ mode, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, animationBuilder: this.animation || opts.animationBuilder || config.get('navAnimation'), progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
-      leavingEl }, opts);
+    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) {
-    const cleanupView = hasCompleted ? enteringView : leavingView;
-    if (cleanupView) {
-      this.cleanup(cleanupView);
+    /**
+     * 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);
     }
     return {
       hasCompleted,
       requiresTransition: true,
       enteringView,
       leavingView,
-      direction: opts.direction
+      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) {
-      // this view is already in the stack!!
-      // move it to its new location
       assert(view.nav === this, 'view is not part of the nav');
-      views.splice(index, 0, views.splice(existingIndex, 1)[0]);
+      // 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;
-      // insert the entering view into the correct index in the stack
       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;
@@ -719,9 +772,13 @@ const Nav = class {
     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.
    */
-  cleanup(activeView) {
+  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
@@ -732,17 +789,27 @@ const Nav = class {
     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 (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);
+      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);
+        }
       }
     }
   }
@@ -754,14 +821,7 @@ const Nav = class {
       this.canGoBackSync());
   }
   onStart() {
-    this.queueTrns({
-      removeStart: -1,
-      removeCount: 1,
-      opts: {
-        direction: 'back',
-        progressAnimation: true
-      }
-    }, undefined);
+    this.pop({ direction: 'back', progressAnimation: true });
   }
   onMove(stepValue) {
     if (this.sbAni) {
@@ -775,7 +835,7 @@ const Nav = class {
         this.animationEnabled = true;
       }, { oneTimeCallback: true });
       // Account for rounding errors in JS
-      let newStepValue = (shouldComplete) ? -0.001 : 0.001;
+      let newStepValue = shouldComplete ? -0.001 : 0.001;
       /**
        * Animation will be reversed here, so need to
        * reverse the easing curve as well
@@ -795,7 +855,7 @@ const Nav = class {
     }
   }
   render() {
-    return (h("slot", null));
+    return h("slot", null);
   }
   get el() { return getElement(this); }
   static get watchers() { return {