ember-nav-stack 4.3.1 → 5.0.0

package/.prettierignore

@@ -0,0 +1,21 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.eslintcache
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

package/.prettierrc.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  singleQuote: true,
+};

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## v5.0.0 (2023-09-19)
+
+#### :rocket: Enhancement
+* [#70](https://github.com/yapplabs/ember-nav-stack/pull/70) Update to ember 3.24 ([@lukemelia](https://github.com/lukemelia))
+
+#### Committers: 1
+- Luke Melia ([@lukemelia](https://github.com/lukemelia))
+
+## v4.3.3 (2021-02-08)
+
+## v4.3.2 (2021-02-05)
+
 ## v4.3.1 (2020-10-21)
 
 ## v4.3.0 (2020-06-16)

package/README.md

@@ -4,7 +4,33 @@ This addon is used by Yapp to blend mobile-style stack navigation with Ember rou
 
 This addon's current status is "opensource, but unpolished". It lacks tests, docs, and other niceties of a well-maintained Ember addon.
 
-See the [Contributing](CONTRIBUTING.md) guide for details on contributing.
+Compatibility
+------------------------------------------------------------------------------
+
+* Ember.js v3.16 or above
+* Ember CLI v2.13 or above
+* Node.js v10 or above
+
+
+Installation
+------------------------------------------------------------------------------
+
+```
+ember install ember-nav-stack
+```
+
+
+Usage
+------------------------------------------------------------------------------
+
+[Longer description of how to use the addon in apps.]
+
+
+Contributing
+------------------------------------------------------------------------------
+
+See the [Contributing](CONTRIBUTING.md) guide for details.
+
 
 License
 ------------------------------------------------------------------------------

package/addon/components/nav-stack/component.js

@@ -14,7 +14,7 @@ import { setTransform } from 'ember-nav-stack/utils/animation';
 import { inject as service } from '@ember/service';
 import { bool, mapBy, reads } from 'macro-decorators';
 import { guidFor } from '@ember/object/internals';
-import { extractComponentKey } from 'ember-nav-stack/utils/component'
+import { extractComponentKey } from 'ember-nav-stack/utils/component';
 
 function currentTransitionPercentage(fromValue, toValue, currentValue) {
   if (fromValue === undefined || fromValue === toValue) {
@@ -27,7 +27,12 @@ function currentTransitionPercentage(fromValue, toValue, currentValue) {
   return percentage;
 }
 
-function styleHeaderElements(transitionRatio, isForward, currentHeaderElement, otherHeaderElement) {
+function styleHeaderElements(
+  transitionRatio,
+  isForward,
+  currentHeaderElement,
+  otherHeaderElement,
+) {
   let startingOffset = 60;
   if (!isForward) {
     transitionRatio = 1 - transitionRatio;
@@ -36,7 +41,10 @@ function styleHeaderElements(transitionRatio, isForward, currentHeaderElement, o
   let xOffset = transitionRatio * -1 * startingOffset;
   if (currentHeaderElement) {
     currentHeaderElement.style.opacity = transitionRatio;
-    setTransform(currentHeaderElement, `translateX(${startingOffset + xOffset}px)`);
+    setTransform(
+      currentHeaderElement,
+      `translateX(${startingOffset + xOffset}px)`,
+    );
   }
   if (otherHeaderElement) {
     otherHeaderElement.style.opacity = 1 - transitionRatio;
@@ -59,6 +67,8 @@ export default class NavStack extends Component {
     return this.args.birdsEyeDebugging || false;
   }
 
+  element;
+
   get elementId() {
     return guidFor(this);
   }
@@ -98,7 +108,7 @@ export default class NavStack extends Component {
     return this.stackItems[this.stackItems.length - 2].headerComponent;
   }
 
-  get stackItems(){
+  get stackItems() {
     return get(this.navStacksService, `stacks.layer${this.args.layer}`) || [];
   }
 
@@ -111,7 +121,10 @@ export default class NavStack extends Component {
   get suppressAnimation() {
     if (this._suppressAnimation === undefined) {
       const config = getOwner(this).resolveRegistration('config:environment');
-      this._suppressAnimation = config['ember-nav-stack'] && config['ember-nav-stack'].suppressAnimation;
+      // eslint-disable-next-line ember/no-side-effects
+      this._suppressAnimation =
+        config['ember-nav-stack'] &&
+        config['ember-nav-stack'].suppressAnimation;
     }
     return this._suppressAnimation;
   }
@@ -119,20 +132,23 @@ export default class NavStack extends Component {
   clones = {
     stackItems: [],
     headers: [],
-    elements: []
-  }
+    elements: [],
+  };
 
   @action
   setupHammer(el) {
     this.element = el;
     this.hammer = new Hammer.Manager(this.element, {
       inputClass: Hammer.TouchMouseInput,
-      recognizers: [
-        [BackSwipeRecognizer]
-      ]
+      recognizers: [[BackSwipeRecognizer]],
     });
     let isInitialRender = this.navStacksService.isInitialRender;
-    scheduleOnce('afterRender', this, this.handleStackDepthChange, isInitialRender);
+    scheduleOnce(
+      'afterRender',
+      this,
+      this.handleStackDepthChange,
+      isInitialRender,
+    );
     this._setupPanHandlerContext();
 
     let { hammer, gesture } = this;
@@ -141,7 +157,7 @@ export default class NavStack extends Component {
   }
 
   @action
-  tearDownHammer(){
+  tearDownHammer() {
     let { hammer, gesture } = this;
     gesture.unregister(this, hammer.get('pan'));
     hammer.off('pan');
@@ -156,30 +172,28 @@ export default class NavStack extends Component {
     let stackItems = this.stackItems || [];
     let stackDepth = stackItems.length;
     let rootComponentRef = stackItems[0] && stackItems[0].component;
-    let rootComponentKey = this.args.extractComponentKey ? this.args.extractComponentKey(rootComponentRef) : extractComponentKey(rootComponentRef);
+    let rootComponentKey = this.args.extractComponentKey
+      ? this.args.extractComponentKey(rootComponentRef)
+      : extractComponentKey(rootComponentRef);
 
     let layer = this.args.layer;
     if (isInitialRender) {
       this.schedule(this.cut);
-    }
-
-    else if (layer > 0 && stackDepth > 0 && this._stackDepth === 0 || this._stackDepth === undefined) {
+    } else if (
+      (layer > 0 && stackDepth > 0 && this._stackDepth === 0) ||
+      this._stackDepth === undefined
+    ) {
       this.schedule(this.slideUp);
-    }
-
-    else if (layer > 0 && stackDepth === 0 && this._stackDepth > 0) {
+    } else if (layer > 0 && stackDepth === 0 && this._stackDepth > 0) {
       this.cloneElement();
       this.element.style.display = 'none';
       this.schedule(this.slideDown);
-
     } else if (rootComponentKey !== this._rootComponentKey) {
       this.schedule(this.cut);
-
     } else if (stackDepth < this._stackDepth) {
       this.cloneLastStackItem();
       this.cloneHeader();
       this.schedule(this.slideBack);
-
     } else if (stackDepth > this._stackDepth) {
       this.cloneHeader();
       this.schedule(this.slideForward);
@@ -198,7 +212,9 @@ export default class NavStack extends Component {
     if (stackDepth === 0) {
       return 0;
     }
-    let currentStackItemElement = this.element.querySelector('.NavStack-item:last-child');
+    let currentStackItemElement = this.element.querySelector(
+      '.NavStack-item:last-child',
+    );
     if (!currentStackItemElement) {
       return 0;
     }
@@ -210,7 +226,9 @@ export default class NavStack extends Component {
 
   @action
   repositionX() {
-    let itemContainerElement = this.element.querySelector('.NavStack-itemContainer');
+    let itemContainerElement = this.element.querySelector(
+      '.NavStack-itemContainer',
+    );
     let newX = this.computeXPosition();
     setTransform(itemContainerElement, `translateX(${newX}px)`);
   }
@@ -218,14 +236,14 @@ export default class NavStack extends Component {
   cut() {
     this.horizontalTransition({
       toValue: this.computeXPosition(),
-      animate: false
+      animate: false,
     });
 
-    if (this.args.layer > 0 & this.stackDepth > 0) {
+    if ((this.args.layer > 0) & (this.stackDepth > 0)) {
       this.verticalTransition({
         element: this.element,
         toValue: 0,
-        animate: false
+        animate: false,
       });
     }
   }
@@ -235,7 +253,7 @@ export default class NavStack extends Component {
       toValue: this.computeXPosition(),
       finishCallback: () => {
         this.removeClonedHeader();
-      }
+      },
     });
   }
 
@@ -245,7 +263,7 @@ export default class NavStack extends Component {
       finishCallback: () => {
         this.removeClonedStackItem();
         this.removeClonedHeader();
-      }
+      },
     });
   }
 
@@ -254,7 +272,7 @@ export default class NavStack extends Component {
     this.verticalTransition({
       element: this.element,
       toValue: 0,
-      fromValue: debug ? 480 : this.element.getBoundingClientRect().height
+      fromValue: debug ? 480 : this.element.getBoundingClientRect().height,
     });
   }
 
@@ -268,15 +286,26 @@ export default class NavStack extends Component {
         toValue: y,
         finishCallback: () => {
           this.removeClonedElement();
-        }
+        },
       });
     });
   }
 
-  horizontalTransition({ toValue, fromValue, animate=!this.suppressAnimation, finishCallback }) {
-    let itemContainerElement = this.element.querySelector('.NavStack-itemContainer');
-    let currentHeaderElement = this.element.querySelector('.NavStack-currentHeaderContainer');
-    let clonedHeaderElement = this.element.querySelector('.NavStack-clonedHeaderContainer');
+  horizontalTransition({
+    toValue,
+    fromValue,
+    animate = !this.suppressAnimation,
+    finishCallback,
+  }) {
+    let itemContainerElement = this.element.querySelector(
+      '.NavStack-itemContainer',
+    );
+    let currentHeaderElement = this.element.querySelector(
+      '.NavStack-currentHeaderContainer',
+    );
+    let clonedHeaderElement = this.element.querySelector(
+      '.NavStack-clonedHeaderContainer',
+    );
 
     this.transitionDidBegin();
     this.notifyTransitionStart();
@@ -286,7 +315,7 @@ export default class NavStack extends Component {
         currentTransitionPercentage(fromValue, toValue, toValue),
         fromValue === undefined || fromValue > toValue,
         currentHeaderElement,
-        clonedHeaderElement
+        clonedHeaderElement,
       );
       this.notifyTransitionEnd();
       this.transitionDidEnd();
@@ -301,23 +330,32 @@ export default class NavStack extends Component {
         return;
       }
       let spring = this._createSpring({ fromValue, toValue });
-      spring.onUpdate((s) => {
-        setTransform(itemContainerElement, `translateX(${s.currentValue}px)`);
-        styleHeaderElements(
-          currentTransitionPercentage(fromValue, toValue, s.currentValue),
-          fromValue > toValue,
-          currentHeaderElement,
-          clonedHeaderElement
-        );
-      }).onStop(() => {
-        run(finish);
-      }).start();
+      spring
+        .onUpdate((s) => {
+          setTransform(itemContainerElement, `translateX(${s.currentValue}px)`);
+          styleHeaderElements(
+            currentTransitionPercentage(fromValue, toValue, s.currentValue),
+            fromValue > toValue,
+            currentHeaderElement,
+            clonedHeaderElement,
+          );
+        })
+        .onStop(() => {
+          run(finish);
+        })
+        .start();
       return;
     }
     run(finish);
   }
 
-  verticalTransition({ element, toValue, fromValue, animate=!this.suppressAnimation, finishCallback }) {
+  verticalTransition({
+    element,
+    toValue,
+    fromValue,
+    animate = !this.suppressAnimation,
+    finishCallback,
+  }) {
     this.transitionDidBegin();
     this.notifyTransitionStart();
     let finish = () => {
@@ -335,24 +373,27 @@ export default class NavStack extends Component {
         return;
       }
       let spring = this._createSpring({ fromValue, toValue });
-      spring.onUpdate((s) => {
-        setTransform(element, `translateY(${s.currentValue}px)`);
-      }).onStop(() => {
-        run(finish);
-      }).start();
+      spring
+        .onUpdate((s) => {
+          setTransform(element, `translateY(${s.currentValue}px)`);
+        })
+        .onStop(() => {
+          run(finish);
+        })
+        .start();
       return;
     }
     run(finish);
   }
 
-  _createSpring({ initialVelocity=0, fromValue, toValue }) {
+  _createSpring({ initialVelocity = 0, fromValue, toValue }) {
     return new Spring({
       initialVelocity,
       fromValue,
       toValue,
       stiffness: 1000,
       damping: 500,
-      mass: 3
+      mass: 3,
     });
   }
 
@@ -360,12 +401,12 @@ export default class NavStack extends Component {
     this.hammer.get('pan').set({ enable: false });
   }
 
-  transitionDidBegin(){
+  transitionDidBegin() {
     this.disablePanRecognizer();
   }
 
-  transitionDidEnd(){
-    if (this._currentStackItemElement)  {
+  transitionDidEnd() {
+    if (this._currentStackItemElement) {
       this.disablePanRecognizer();
     }
     if (!this.element || this.stackDepth <= 1) {
@@ -383,11 +424,18 @@ export default class NavStack extends Component {
   }
 
   _setupPanHandlerContext() {
-    this.containerElement = this.element.querySelector('.NavStack-itemContainer');
-    this.currentHeaderElement = this.element.querySelector('.NavStack-currentHeaderContainer');
-    this.parentHeaderElement = this.element.querySelector('.NavStack-parentItemHeaderContainer');
+    this.containerElement = this.element.querySelector(
+      '.NavStack-itemContainer',
+    );
+    this.currentHeaderElement = this.element.querySelector(
+      '.NavStack-currentHeaderContainer',
+    );
+    this.parentHeaderElement = this.element.querySelector(
+      '.NavStack-parentItemHeaderContainer',
+    );
     this.startingX = this.getX(this.containerElement);
-    let currentStackItemElement = this._currentStackItemElement = this.element.querySelector('.NavStack-item:last-child');
+    let currentStackItemElement = (this._currentStackItemElement =
+      this.element.querySelector('.NavStack-item:last-child'));
     if (!currentStackItemElement) {
       return;
     }
@@ -403,15 +451,26 @@ export default class NavStack extends Component {
     if (this._activeSpring) {
       return;
     }
-    setTransform(this.containerElement, `translateX(${this.startingX + ev.deltaX}px)`);
+    setTransform(
+      this.containerElement,
+      `translateX(${this.startingX + ev.deltaX}px)`,
+    );
     styleHeaderElements(
-      currentTransitionPercentage(this.startingX, this.backX, this.startingX + ev.deltaX),
+      currentTransitionPercentage(
+        this.startingX,
+        this.backX,
+        this.startingX + ev.deltaX,
+      ),
       true,
       this.currentHeaderElement,
-      this.parentHeaderElement
+      this.parentHeaderElement,
     );
 
-    let transitionRatio = currentTransitionPercentage(this.startingX, this.backX, this.startingX + ev.deltaX);
+    let transitionRatio = currentTransitionPercentage(
+      this.startingX,
+      this.backX,
+      this.startingX + ev.deltaX,
+    );
     if (this.currentHeaderElement) {
       this.currentHeaderElement.style.opacity = transitionRatio;
     }
@@ -424,7 +483,8 @@ export default class NavStack extends Component {
   }
 
   handlePanEnd(ev) {
-    let shouldNavigateBack = this.adjustX(ev.center.x) >= this.thresholdX && this.canNavigateBack;
+    let shouldNavigateBack =
+      this.adjustX(ev.center.x) >= this.thresholdX && this.canNavigateBack;
     let initialVelocity = ev.velocityX;
     let fromValue = this.startingX + ev.deltaX;
     let toValue = shouldNavigateBack ? this.backX : this.startingX;
@@ -435,16 +495,20 @@ export default class NavStack extends Component {
           currentTransitionPercentage(this.startingX, this.backX, this.backX),
           false,
           this.parentHeaderElement,
-          this.currentHeaderElement
+          this.currentHeaderElement,
         );
         run(this.args, this.args.back);
       } else {
         setTransform(this.containerElement, `translateX(${this.startingX}px)`);
         styleHeaderElements(
-          currentTransitionPercentage(this.startingX, this.backX, this.startingX),
+          currentTransitionPercentage(
+            this.startingX,
+            this.backX,
+            this.startingX,
+          ),
           false,
           this.parentHeaderElement,
-          this.currentHeaderElement
+          this.currentHeaderElement,
         );
       }
       if (this.currentHeaderElement) {
@@ -464,27 +528,39 @@ export default class NavStack extends Component {
     }
     let spring = this._createSpring({ initialVelocity, fromValue, toValue });
     this._activeSpring = spring;
-    spring.onUpdate((s) => {
-      setTransform(this.containerElement, `translateX(${s.currentValue}px)`);
-      styleHeaderElements(
-        currentTransitionPercentage(this.startingX, this.backX, s.currentValue),
-        false,
-        this.parentHeaderElement,
-        this.currentHeaderElement
-      );
-      if (!shouldNavigateBack && s.currentValue >= this.startingX + this.thresholdX) {
-        shouldNavigateBack = true;
-        spring.updateConfig({
-          toValue: this.backX
-        });
-      }
-    }).onStop(() => {
-      finalize();
-    }).start();
+    spring
+      .onUpdate((s) => {
+        setTransform(this.containerElement, `translateX(${s.currentValue}px)`);
+        styleHeaderElements(
+          currentTransitionPercentage(
+            this.startingX,
+            this.backX,
+            s.currentValue,
+          ),
+          false,
+          this.parentHeaderElement,
+          this.currentHeaderElement,
+        );
+        if (
+          !shouldNavigateBack &&
+          s.currentValue >= this.startingX + this.thresholdX
+        ) {
+          shouldNavigateBack = true;
+          spring.updateConfig({
+            toValue: this.backX,
+          });
+        }
+      })
+      .onStop(() => {
+        finalize();
+      })
+      .start();
   }
 
   cloneLastStackItem() {
-    let clone = this.element.querySelector('.NavStack-item:last-child').cloneNode(true);
+    let clone = this.element
+      .querySelector('.NavStack-item:last-child')
+      .cloneNode(true);
     this.clones.stackItems.push(clone);
     clone.setAttribute('id', `${this.elementId}_clonedStackItem`);
     this.attachClonedStackItem(clone);
@@ -492,7 +568,9 @@ export default class NavStack extends Component {
 
   cloneHeader() {
     this.removeClonedHeader();
-    let liveHeader = this.element.querySelector('.NavStack-currentHeaderContainer');
+    let liveHeader = this.element.querySelector(
+      '.NavStack-currentHeaderContainer',
+    );
     if (!liveHeader) {
       return;
     }
@@ -527,21 +605,24 @@ export default class NavStack extends Component {
 
   removeClonedHeader() {
     var clonedHeader;
-    while (clonedHeader = this.clones.headers.pop()) { //eslint-disable-line no-cond-assign
+    while ((clonedHeader = this.clones.headers.pop())) {
+      //eslint-disable-line no-cond-assign
       clonedHeader.parentNode.removeChild(clonedHeader);
     }
   }
 
   removeClonedStackItem() {
     var clonedStackItem;
-    while (clonedStackItem = this.clones.stackItems.pop()) { //eslint-disable-line no-cond-assign
+    while ((clonedStackItem = this.clones.stackItems.pop())) {
+      //eslint-disable-line no-cond-assign
       clonedStackItem.parentNode.removeChild(clonedStackItem);
     }
   }
 
   removeClonedElement() {
     var clonedElement;
-    while (clonedElement = this.clones.elements.pop()) { //eslint-disable-line no-cond-assign
+    while ((clonedElement = this.clones.elements.pop())) {
+      //eslint-disable-line no-cond-assign
       clonedElement.parentNode.removeChild(clonedElement);
     }
   }

package/addon/components/to-nav-stack.js

@@ -21,11 +21,12 @@ export default class ToNavStack extends Component {
       guidFor(this),
       this.args.layer,
       this.args.item,
-      this.args.header
+      this.args.header,
     );
   }
 
   willDestroy() {
+    super.willDestroy(...arguments);
     this.service.removeItem(guidFor(this));
   }
 }

package/addon/helpers/nav-layer-indices.js

@@ -1,10 +1,10 @@
+/* eslint-disable ember/no-computed-properties-in-native-classes */
 /* eslint-disable ember/no-observers */
 import Helper from '@ember/component/helper';
 import { computed } from '@ember/object';
 import { observes } from '@ember-decorators/object';
 import { inject as service } from '@ember/service';
 export default class NavLayerIndices extends Helper {
-
   @service
   navStacks;
 
@@ -18,7 +18,7 @@ export default class NavLayerIndices extends Helper {
   }
 
   @computed('navStacks.stacks')
-  get layerCount(){
+  get layerCount() {
     return Object.keys(this.navStacks.stacks).length;
   }
 

package/addon/mixins/stackable-route.js

@@ -3,13 +3,14 @@ import Mixin from '@ember/object/mixin';
 import { computed } from '@ember/object';
 
 export function getParentRoute(router, route) {
+  // eslint-disable-next-line ember/no-private-routing-service
   let routerMicroLib = router._routerMicrolib;
   let { routeInfos, handlerInfos } = routerMicroLib.state;
   routeInfos = routeInfos || handlerInfos; // routeInfos is in newer Ember versions
   if (!routeInfos) {
     return;
   }
-  let routes = routeInfos.map(hi => hi._handler || hi._route);
+  let routes = routeInfos.map((hi) => hi._handler || hi._route);
   let routeIndex = routes.indexOf(route);
   if (routeIndex > 0) {
     return routes[routes.indexOf(route) - 1];
@@ -19,16 +20,18 @@ export function getParentRoute(router, route) {
 export default Mixin.create({
   templateName: 'stackable',
   getRouteComponent(/* model */) {
-    return `routable-components/${(this.routableTemplateName || this.routeName).replace(/\./g,'/')}`;
+    return `routable-components/${(
+      this.routableTemplateName || this.routeName
+    ).replace(/\./g, '/')}`;
   },
   getHeaderComponent(model) {
     return `${this.getRouteComponent(model)}/header`;
   },
-  layerIndex: computed(function() {
+  layerIndex: computed('_router', 'newLayer', function () {
     let parentRoute = getParentRoute(this._router, this);
     let parentRouteLayerIndex = parentRoute.get('layerIndex');
     let currentLayerIndex = parentRouteLayerIndex || 0;
-    if (this.get('newLayer') === true) {
+    if (this.newLayer === true) {
       return currentLayerIndex + 1;
     }
     return currentLayerIndex;
@@ -39,7 +42,7 @@ export default Mixin.create({
       layerIndex: this.layerIndex,
       routeComponent: this.getRouteComponent(model),
       headerComponent: this.getHeaderComponent(model),
-      routeName: this.routeName
+      routeName: this.routeName,
     });
   },
   getParentRouteName() {
@@ -48,6 +51,6 @@ export default Mixin.create({
   actions: {
     back() {
       this.transitionTo(this.getParentRouteName());
-    }
-  }
+    },
+  },
 });

package/addon/services/gesture.js

@@ -20,7 +20,9 @@ export default class extends Service {
 
   unregister(component, recognizer) {
     let registry = this.#registry;
-    let registerable = registry.find(r => r.component === component && r.recognizer === recognizer);
+    let registerable = registry.find(
+      (r) => r.component === component && r.recognizer === recognizer,
+    );
     if (registerable) {
       registry.splice(registry.indexOf(registerable), 1);
     }

package/addon/services/nav-stacks.js

@@ -3,23 +3,21 @@ import Service from '@ember/service';
 import { run, next } from '@ember/runloop';
 import EmberObject from '@ember/object';
 import { Promise as EmberPromise } from 'rsvp';
-import { registerWaiter } from '@ember/test';
-import { DEBUG } from '@glimmer/env';
+import { buildWaiter } from '@ember/test-waiters';
+import { set } from '@ember/object';
+let waiter = buildWaiter('ember-nav-stack:transition-waiter');
 
 export default class NavStacks extends Service {
+  waiterToken;
+
   constructor() {
     super(...arguments);
-    this.set('stacks', EmberObject.create());
+    set(this, 'stacks', EmberObject.create());
     this._listeners = A([]);
     this._itemsById = {};
     this._counter = 1;
     this._runningTransitions = 0;
     this.isInitialRender = true;
-    if (DEBUG) {
-      registerWaiter(this, function() {
-        return this._runningTransitions === 0;
-      });
-    }
   }
 
   pushItem(sourceId, layer, component, headerComponent) {
@@ -27,7 +25,7 @@ export default class NavStacks extends Service {
       layer,
       component,
       headerComponent,
-      order: this._counter++
+      order: this._counter++,
     };
     this._schedule();
   }
@@ -47,10 +45,17 @@ export default class NavStacks extends Service {
 
   notifyTransitionStart() {
     this._runningTransitions++;
+    if (this._runningTransitions === 1) {
+      this.waiterToken = waiter.beginAsync();
+    }
   }
 
   notifyTransitionEnd() {
     this._runningTransitions--;
+    if (this._runningTransitions === 0) {
+      waiter.endAsync(this.waiterToken);
+      this.waiterToken = undefined;
+    }
     next(() => {
       this._maybeResolveIdle();
     });
@@ -64,12 +69,12 @@ export default class NavStacks extends Service {
     if (this._waitingPromise) {
       return this._waitingPromise;
     }
-    return this._waitingPromise = new EmberPromise((resolve) => {
+    return (this._waitingPromise = new EmberPromise((resolve) => {
       this._resolveWaiting = resolve;
       next(() => {
         this._maybeResolveIdle();
       });
-    });
+    }));
   }
 
   didUpdate() {} // hook
@@ -102,7 +107,7 @@ export default class NavStacks extends Service {
     for (var layerName in newStacks) {
       newStacks[layerName] = newStacks[layerName].sortBy('order');
     }
-    this.set('stacks', EmberObject.create(newStacks));
+    set(this, 'stacks', EmberObject.create(newStacks));
     if (this.isInitialRender === true) {
       run.next(this, this._clearIsInitialRender);
     }
@@ -114,6 +119,6 @@ export default class NavStacks extends Service {
     if (this.isDestroyed || this.isDestroying) {
       return;
     }
-    this.set('isInitialRender', false);
+    set(this, 'isInitialRender', false);
   }
 }

package/addon/utils/animation.js

@@ -20,7 +20,7 @@ const TICK = 17;
  */
 function rAF(cb) {
   if (Ember.testing || !window.requestAnimationFrame) {
-    return run.later(cb, TICK);  
+    return run.later(cb, TICK);
   } else {
     return window.requestAnimationFrame(cb);
   }
@@ -52,7 +52,7 @@ export function computeTimeout(element) {
     transitionDelay,
     animationDuration,
     animationDelay,
-    animationIterationCount
+    animationIterationCount,
   } = window.getComputedStyle(element);
 
   // `getComputedStyle` returns durations and delays in the Xs format.
@@ -60,21 +60,26 @@ export function computeTimeout(element) {
   // numeral (0-9), a decimal point, or an exponent, it returns the value up to that point
   // and ignores that character and all succeeding characters.
 
-  let maxDelay = Math.max(parseFloat(animationDelay), parseFloat(transitionDelay));
-  let maxDuration = Math.max(parseFloat(animationDuration) *
-    parseFloat(animationIterationCount), parseFloat(transitionDuration));
+  let maxDelay = Math.max(
+    parseFloat(animationDelay),
+    parseFloat(transitionDelay),
+  );
+  let maxDuration = Math.max(
+    parseFloat(animationDuration) * parseFloat(animationIterationCount),
+    parseFloat(transitionDuration),
+  );
 
   return (maxDelay + maxDuration) * 1000;
 }
 
 let setTransformImpl = function setTransformFunc(element, value) {
   element.style.transform = value;
-}
+};
 // Android <= 4.x does not support element.style.transform
 if (document.body.style.transform === undefined) {
   setTransformImpl = function setTransformFunc(element, value) {
     element.style.webkitTransform = value;
-  }
+  };
 }
 
 export let setTransform = setTransformImpl;

package/addon/utils/back-swipe-recognizer.js

@@ -12,8 +12,12 @@ export default class BackSwipeRecognizer extends Hammer.Pan {
     this.options = Object.assign({}, this.defaults, options || {});
     this.captureClick = (ev) => {
       ev.stopPropagation(); // Stop the click from being propagated.
-      this.manager.element.removeEventListener('click', this.captureClick, true);
-    }
+      this.manager.element.removeEventListener(
+        'click',
+        this.captureClick,
+        true,
+      );
+    };
   }
 
   defaults = {
@@ -22,14 +26,16 @@ export default class BackSwipeRecognizer extends Hammer.Pan {
     threshold: 10,
     pointers: 1,
     direction: DIRECTION_RIGHT,
-    validLeftAreaPercent: 33
+    validLeftAreaPercent: 33,
   };
 
   recognize(inputData) {
     if (inputData.isFirst) {
-      this.isInitialTouchInValidArea = this.checkInitialTouchInValidArea(inputData);
+      this.isInitialTouchInValidArea =
+        this.checkInitialTouchInValidArea(inputData);
     }
-    let isOverElementThatPreventsScrollingInteraction = this.shouldPreventScrollingInteraction(inputData);
+    let isOverElementThatPreventsScrollingInteraction =
+      this.shouldPreventScrollingInteraction(inputData);
     if (isOverElementThatPreventsScrollingInteraction) {
       this.manager.stop();
       return;
@@ -45,17 +51,25 @@ export default class BackSwipeRecognizer extends Hammer.Pan {
 
   shouldPreventScrollingInteraction(inputData) {
     let { target } = inputData;
-    return inputData.isFirst
-      && (target && target.tagName.match(FIELD_REGEXP)
-          || target && target.hasAttribute('data-prevent-scrolling')
-         );
+    return (
+      inputData.isFirst &&
+      ((target && target.tagName.match(FIELD_REGEXP)) ||
+        (target && target.hasAttribute('data-prevent-scrolling')))
+    );
   }
 
   captureGhostClickIfNeeded(inputData) {
-    if (inputData.srcEvent.type === 'mouseup' && (this.state & (Hammer.STATE_BEGAN))) {
+    if (
+      inputData.srcEvent.type === 'mouseup' &&
+      this.state & Hammer.STATE_BEGAN
+    ) {
       this.manager.element.addEventListener('click', this.captureClick, true);
       setTimeout(() => {
-        this.manager.element.removeEventListener('click', this.captureClick, true);
+        this.manager.element.removeEventListener(
+          'click',
+          this.captureClick,
+          true,
+        );
       }, 0);
     }
   }
@@ -73,11 +87,16 @@ export default class BackSwipeRecognizer extends Hammer.Pan {
       let testingEl = document.querySelector('#ember-testing');
       if (testingEl) {
         let minValidX = testingEl.getBoundingClientRect().left;
-        let maxValidX = minValidX + (testingEl.clientWidth * (this.options.validLeftAreaPercent/100));
-        return inputData.center.x >= minValidX && inputData.center.x <= maxValidX;
+        let maxValidX =
+          minValidX +
+          testingEl.clientWidth * (this.options.validLeftAreaPercent / 100);
+        return (
+          inputData.center.x >= minValidX && inputData.center.x <= maxValidX
+        );
       }
     }
-    let maxValidX = window.innerWidth * (this.options.validLeftAreaPercent/100);
+    let maxValidX =
+      window.innerWidth * (this.options.validLeftAreaPercent / 100);
     return inputData.center.x <= maxValidX;
   }
 }

package/addon/utils/component.js

@@ -1,23 +1,40 @@
-import { get } from '@ember/object';
-
 export function extractComponentKey(componentRef) {
   if (!componentRef) {
     return 'none';
   }
-  let result = componentRef.name || componentRef.inner.name;
-  if (componentRef.args.named.model) {
-    let model = componentRef.args.named.model.value();
-    if (model) {
-      result += `:${get(model, 'id')}`;
-    }
-  } else if (componentRef.args.named.has && componentRef.args.named.has('model')) {
-    let model = componentRef.args.named.get('model').value();
+  let result = getComponentRefName(componentRef);
+  let modelId = getComponentRefModelId(componentRef);
+  if (modelId) {
+    result += `:${modelId}`;
+  }
+  return result;
+}
+
+function getComponentRefName(componentRef) {
+  let componentRefInner =
+    componentRef.inner?.name ||
+    componentRef[
+      Object.getOwnPropertySymbols(componentRef).find(
+        (s) => s.description === 'INNER',
+      )
+    ];
+  let result = componentRef.name || componentRefInner?.name;
+  return result;
+}
+
+function getComponentRefModelId(componentRef) {
+  let componentRefArgs =
+    componentRef.args ||
+    componentRef[
+      Object.getOwnPropertySymbols(componentRef).find(
+        (s) => s.description === 'ARGS',
+      )
+    ];
+  if (componentRefArgs.named.has && componentRefArgs.named.has('model')) {
+    let model = componentRefArgs.named.get('model').value();
     if (model) {
-      let modelId = get(model, 'id');
-      if (modelId) {
-        result += `:${modelId}`;
-      }
+      return model.id;
     }
   }
-  return result;
+  return;
 }

package/addon-test-support/in-viewport.js

@@ -16,14 +16,17 @@ export function getElementInViewportRatio(selectorOrElement) {
   let elementRect = element.getBoundingClientRect();
   let viewportRect = viewportEl.getBoundingClientRect();
   let topOutOfViewport = Math.max(0, viewportRect.top - elementRect.top);
-  let bottomOutOfViewport = Math.max(0, elementRect.bottom - viewportRect.bottom);
+  let bottomOutOfViewport = Math.max(
+    0,
+    elementRect.bottom - viewportRect.bottom,
+  );
   let leftOutOfViewport = Math.max(0, viewportRect.left - elementRect.left);
   let rightOutOfViewport = Math.max(0, elementRect.right - viewportRect.right);
-  let totalArea = (elementRect.width * elementRect.height);
+  let totalArea = elementRect.width * elementRect.height;
   let outOfViewportXAmount = leftOutOfViewport + rightOutOfViewport;
   let outOfViewportYAmount = topOutOfViewport + bottomOutOfViewport;
   let areaOutside =
-      (outOfViewportXAmount * elementRect.height) +
-      (outOfViewportYAmount * (elementRect.width - outOfViewportXAmount));
+    outOfViewportXAmount * elementRect.height +
+    outOfViewportYAmount * (elementRect.width - outOfViewportXAmount);
   return (totalArea - areaOutside) / totalArea;
 }

package/app/styles/nav-stack.scss

@@ -1,5 +1,7 @@
-$nav-stack-header-height: 44px;
-$nav-stack-footer-height: 50px;
+:root {
+  --nav-stack-header-height: 44px;
+  --nav-stack-footer-height: 50px;
+}
 
 $easing: cubic-bezier(.23, 1, .32, 1);
 
@@ -26,14 +28,14 @@ $easing: cubic-bezier(.23, 1, .32, 1);
   }
   &-itemContainer {
     position: absolute;
-    top: $nav-stack-header-height;
+    top: var(--nav-stack-header-height);
     bottom: 0;
     left: 0;
     width: 500%;
   }
 
   &--withFooter &-itemContainer {
-    bottom: $nav-stack-footer-height;
+    bottom: var(--nav-stack-footer-height);
   }
 
   &-item {
@@ -63,7 +65,8 @@ $easing: cubic-bezier(.23, 1, .32, 1);
 
   &-header {
     position: absolute;
-    height: $nav-stack-header-height;
+    height: var(--nav-stack-header-height);
+    box-sizing: content-box;
     top: 0;
     left: 0;
     right: 0;
@@ -93,7 +96,8 @@ $easing: cubic-bezier(.23, 1, .32, 1);
   &-footer {
     position: absolute;
     bottom: 0;
-    height: $nav-stack-footer-height;
+    height: var(--nav-stack-footer-height);
+    box-sizing: content-box;
     left: 0;
     right: 0;
     background: rgba(0,0,0,.2);

package/config/deploy.js

@@ -1,9 +1,9 @@
 /* eslint-env node */
 'use strict';
 
-module.exports = function(deployTarget) {
+module.exports = function (deployTarget) {
   let ENV = {
-    build: {}
+    build: {},
     // include other plugin configuration that applies to all deploy targets here
   };
 

package/config/environment.js

@@ -1,5 +1,5 @@
 'use strict';
 
-module.exports = function(/* environment, appConfig */) {
-  return { };
+module.exports = function (/* environment, appConfig */) {
+  return {};
 };

package/index.js

@@ -3,13 +3,13 @@
 module.exports = {
   name: require('./package').name,
   options: {
-    autoImport:{
-      exclude: ['wobble']
-    }
+    autoImport: {
+      exclude: ['wobble'],
+    },
   },
   included(app) {
     this._super.included.apply(this, arguments);
     app.import('vendor/wobble-shim.js');
     app.import('node_modules/wobble/dist/wobble.browser.js');
-  }
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-nav-stack",
-  "version": "4.3.1",
+  "version": "5.0.0",
   "description": "The default blueprint for ember-cli addons.",
   "keywords": [
     "ember-addon"
@@ -17,62 +17,78 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint:js": "eslint .",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:!(fix)'",
+    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
     "release": "release-it",
+    "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "ember test",
-    "test:all": "ember try:each"
+    "test": "npm-run-all lint test:*",
+    "test:ember": "ember test",
+    "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
-    "@ember/render-modifiers": "^1.0.2",
-    "ember-auto-import": "^1.5.3",
-    "ember-cli-babel": "^7.17.2",
-    "ember-cli-htmlbars": "^4.2.2",
+    "@babel/core": "^7.0.0",
+    "@ember/render-modifiers": "^2.1.0",
+    "ember-auto-import": "^2.6.3",
+    "ember-cli-babel": "^7.26.11",
+    "ember-cli-htmlbars": "^6.3.0",
     "ember-decorators": "6.1.1",
-    "ember-math-helpers": "^2.13.0",
-    "ember-truth-helpers": "^3.0.0",
+    "ember-math-helpers": "^3.0.0",
+    "ember-truth-helpers": "^3.1.1",
     "hammerjs": "^2.0.8",
     "macro-decorators": "^0.1.2",
+    "webpack": "5",
     "wobble": "^1.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@ember/optional-features": "^1.3.0",
-    "@glimmer/component": "^1.0.0",
-    "@glimmer/tracking": "^1.0.0",
-    "babel-eslint": "^10.0.3",
+    "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.4.0",
+    "@ember/test-waiters": "^3.0.2",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
+    "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.16.0",
-    "ember-cli-dependency-checker": "^3.2.0",
-    "ember-cli-deploy": "^1.0.2",
-    "ember-cli-deploy-build": "^1.1.1",
-    "ember-cli-deploy-git": "^1.3.3",
-    "ember-cli-eslint": "^5.1.0",
-    "ember-cli-inject-live-reload": "^2.0.2",
-    "ember-cli-sass": "^7.1.7",
+    "ember-cli": "~3.24.0",
+    "ember-cli-dependency-checker": "^3.3.2",
+    "ember-cli-deploy": "^2.0.0",
+    "ember-cli-deploy-build": "^3.0.0",
+    "ember-cli-deploy-git": "^1.3.4",
+    "ember-cli-deprecation-workflow": "^2.1.0",
+    "ember-cli-inject-live-reload": "^2.1.0",
+    "ember-cli-sass": "^11.0.1",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-uglify": "^3.0.0",
+    "ember-cli-terser": "^4.0.2",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
-    "ember-load-initializers": "^2.1.1",
-    "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-qunit": "^4.6.0",
-    "ember-resolver": "^7.0.0",
+    "ember-load-initializers": "^2.1.2",
+    "ember-maybe-import-regenerator": "^1.0.0",
+    "ember-page-title": "^8.0.0",
+    "ember-qunit": "^5.1.5",
+    "ember-resolver": "^11.0.1",
     "ember-route-action-helper": "^2.0.8",
-    "ember-simulant-test-helpers": "^0.3.1",
-    "ember-source": "~3.16.0",
-    "ember-source-channel-url": "^2.0.1",
-    "ember-try": "^1.4.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-ember": "^7.7.2",
-    "eslint-plugin-node": "^11.0.0",
+    "ember-simulant-test-helpers": "^0.3.2",
+    "ember-source": "~3.24.0",
+    "ember-source-channel-url": "^3.0.0",
+    "ember-template-lint": "^5.11.2",
+    "ember-try": "^3.0.0",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-ember": "^10.4.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "loader.js": "^4.7.0",
-    "qunit-dom": "^1.0.0",
-    "release-it": "^13.6.0",
-    "release-it-lerna-changelog": "^2.3.0"
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.0.2",
+    "qunit": "^2.19.4",
+    "qunit-dom": "^2.0.0",
+    "release-it": "^13.7.2",
+    "release-it-lerna-changelog": "^2.4.0",
+    "sass": "^1.66.1"
   },
   "engines": {
-    "node": "10.* || >= 12"
+    "node": ">= 14"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -98,5 +114,9 @@
       "release": true,
       "tokenRef": "GITHUB_AUTH"
     }
+  },
+  "volta": {
+    "node": "16.20.2",
+    "yarn": "1.22.10"
   }
 }