@pod-os/elements 0.7.1-92705ee.0 → 0.7.1-a71f01c.0

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

@@ -1,10 +1,13 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-e4deec27.js';
-import { g as getIonMode, c as config } from './ionic-global-2e28f7c7.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-108b8579.js';
-import { n as assert } from './helpers-44e3bd9f.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-8a463a85.js';
-import { a as attachComponent } from './framework-delegate-9cd8048f.js';
+import { r as registerInstance, d as createEvent, h, c as getElement } from './index-cb938ffb.js';
+import { g as getIonMode, c as config } from './ionic-global-6cd57191.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-538b6253.js';
+import { n as assert, s as shallowEqualStringMap } from './helpers-aeff219b.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-6048aed6.js';
+import { a as attachComponent } from './framework-delegate-7e2b767b.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const VIEW_STATE_NEW = 1;
 const VIEW_STATE_ATTACHED = 2;
 const VIEW_STATE_DESTROYED = 3;
@@ -46,28 +49,7 @@ const matches = (view, id, params) => {
   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;
+  return shallowEqualStringMap(view.params, params);
 };
 const convertToView = (page, params) => {
   if (!page) {
@@ -79,22 +61,17 @@ const convertToView = (page, params) => {
   return new ViewController(page, params);
 };
 const convertToViews = (pages) => {
-  return pages.map(page => {
+  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.component, page.componentProps === null ? undefined : page.componentProps);
     }
     return convertToView(page, undefined);
-  }).filter(v => v !== null);
+  })
+    .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}";
@@ -129,9 +106,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');
@@ -140,20 +115,24 @@ const Nav = class {
   }
   async componentDidLoad() {
     this.rootChanged();
-    this.gesture = (await import('./swipe-back-d84cfc8a.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-7ef22876.js')).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();
     }
+    // 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;
   }
   /**
@@ -167,11 +146,7 @@ const Nav = class {
    * @param done The transition complete function.
    */
   push(component, componentProps, opts, done) {
-    return this.queueTrns({
-      insertStart: -1,
-      insertViews: [{ component, componentProps }],
-      opts
-    }, done);
+    return this.insert(-1, component, componentProps, opts, done);
   }
   /**
    * Inserts a component into the navigation stack at the specified index.
@@ -184,11 +159,7 @@ const Nav = class {
    * @param done The transition complete function.
    */
   insert(insertIndex, component, componentProps, opts, done) {
-    return this.queueTrns({
-      insertStart: insertIndex,
-      insertViews: [{ 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.
@@ -204,7 +175,7 @@ const Nav = class {
     return this.queueTrns({
       insertStart: insertIndex,
       insertViews: insertComponents,
-      opts
+      opts,
     }, done);
   }
   /**
@@ -215,11 +186,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.
@@ -229,19 +196,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.
@@ -250,11 +217,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.
@@ -268,7 +231,7 @@ const Nav = class {
     return this.queueTrns({
       removeStart: startIndex,
       removeCount,
-      opts
+      opts,
     }, done);
   }
   /**
@@ -293,9 +256,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;
@@ -305,42 +266,53 @@ const Nav = class {
       insertViews: views,
       removeStart: 0,
       removeCount: -1,
-      opts
+      opts,
     }, done);
   }
-  /** @internal */
+  /**
+   * 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', animationBuilder: animation }));
       }
@@ -353,46 +325,51 @@ const Nav = class {
     }
     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;
@@ -411,19 +388,15 @@ 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.
+  /**
+   * Adds a navigation stack change to the queue and schedules it to run.
+   *
+   * @returns Whether the transition succeeds.
+   */
   async queueTrns(ti, done) {
-    if (this.isTransitioning && ti.opts != null && ti.opts.skipIfBusy) {
-      return Promise.resolve(false);
+    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;
@@ -441,16 +414,16 @@ const Nav = class {
       if (router) {
         const canTransition = await router.canTransition();
         if (canTransition === false) {
-          return Promise.resolve(false);
+          return false;
         }
-        else if (typeof canTransition === 'string') {
+        if (typeof canTransition === 'string') {
           router.push(canTransition, ti.opts.direction || 'back');
-          return Promise.resolve(false);
+          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
@@ -496,14 +469,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;
@@ -511,6 +488,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
@@ -527,8 +505,7 @@ const Nav = class {
       }
       this.postViewInit(enteringView, leavingView, ti);
       // Needs transition?
-      const requiresTransition = (ti.enteringRequiresTransition || ti.leavingRequiresTransition) &&
-        enteringView !== leavingView;
+      const requiresTransition = (ti.enteringRequiresTransition || ti.leavingRequiresTransition) && enteringView !== leavingView;
       if (requiresTransition && ti.opts && leavingView) {
         const isBackDirection = ti.opts.direction === 'back';
         /**
@@ -536,20 +513,24 @@ const Nav = class {
          * unless otherwise specified by the developer.
          */
         if (isBackDirection) {
-          ti.opts.animationBuilder = ti.opts.animationBuilder || (enteringView && enteringView.animationBuilder);
+          ti.opts.animationBuilder = ti.opts.animationBuilder || (enteringView === null || enteringView === void 0 ? void 0 : enteringView.animationBuilder);
         }
         leavingView.animationBuilder = ti.opts.animationBuilder;
       }
-      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
+      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();
     }
@@ -560,11 +541,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');
@@ -581,8 +562,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
@@ -614,13 +594,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;
@@ -634,39 +622,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];
-        if (view && view !== enteringView && view !== leavingView) {
+      for (let i = removeStart; i < removeStart + removeCount; i++) {
+        const view = this.views[i];
+        if (view !== undefined && 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;
@@ -676,7 +670,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
@@ -700,9 +694,7 @@ 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;
@@ -712,36 +704,53 @@ const Nav = class {
     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;
@@ -756,9 +765,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
@@ -801,14 +814,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) {
@@ -822,7 +828,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
@@ -842,7 +848,7 @@ const Nav = class {
     }
   }
   render() {
-    return (h("slot", null));
+    return h("slot", null);
   }
   get el() { return getElement(this); }
   static get watchers() { return {