ember-attacher 4.0.0-beta.2 → 4.0.0-beta.3

package/dist/_rollupPluginBabelHelpers-f1ZVPpM9.js

@@ -0,0 +1,42 @@
+
+function _applyDecoratedDescriptor(i, e, r, n, l) {
+  var a = {};
+  return Object.keys(n).forEach(function (i) {
+    a[i] = n[i];
+  }), a.enumerable = !!a.enumerable, a.configurable = !!a.configurable, ("value" in a || a.initializer) && (a.writable = true), a = r.slice().reverse().reduce(function (r, n) {
+    return n(i, e, r) || r;
+  }, a), l && void 0 !== a.initializer && (a.value = a.initializer ? a.initializer.call(l) : void 0, a.initializer = void 0), void 0 === a.initializer ? (Object.defineProperty(i, e, a), null) : a;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _initializerDefineProperty(e, i, r, l) {
+  r && Object.defineProperty(e, i, {
+    enumerable: r.enumerable,
+    configurable: r.configurable,
+    writable: r.writable,
+    value: r.initializer ? r.initializer.call(l) : void 0
+  });
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+export { _applyDecoratedDescriptor as _, _initializerDefineProperty as a, _defineProperty as b };
+//# sourceMappingURL=_rollupPluginBabelHelpers-f1ZVPpM9.js.map

package/dist/_rollupPluginBabelHelpers-f1ZVPpM9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_rollupPluginBabelHelpers-f1ZVPpM9.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/attach-popover.js

@@ -1,11 +1,16 @@
 
 import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("<BasicAttacher\n  @id={{@id}}\n  @configKey=\"popover\"\n  @ariaRole={{this.ariaRole}}\n  @additionalClass={{@additionalClass}}\n  @animation={{@animation}}\n  @arrow={{@arrow}}\n  @autoUpdate={{@autoUpdate}}\n  @class={{@class}}\n  @explicitTarget={{@explicitTarget}}\n  @flip={{@flip}}\n  @floatingElementContainer={{@floatingElementContainer}}\n  @floatingUiOptions={{@floatingUiOptions}}\n  @hideDelay={{@hideDelay}}\n  @hideDuration={{@hideDuration}}\n  @hideOn={{@hideOn}}\n  @interactive={{@interactive}}\n  @isOffset={{@isOffset}}\n  @isShown={{@isShown}}\n  @lazyRender={{@lazyRender}}\n  @middleware={{@middleware}}\n  @onChange={{@onChange}}\n  @onInitializeAttacher={{@onInitializeAttacher}}\n  @onWillDestroy={{@onWillDestroy}}\n  @overflowPadding={{@overflowPadding}}\n  @placement={{@placement}}\n  @renderInPlace={{@renderInPlace}}\n  @showDelay={{@showDelay}}\n  @showDuration={{@showDuration}}\n  @showOn={{@showOn}}\n  @style={{@style}}\n  @useCapture={{@useCapture}}\n  ...attributes\n  as |popover|\n>\n  {{yield popover}}\n</BasicAttacher>\n");
 
 class AttachPopover extends Component {
   get ariaRole() {
     return this.args.ariaRole || 'dialog';
   }
 }
+setComponentTemplate(TEMPLATE, AttachPopover);
 
 export { AttachPopover as default };
 //# sourceMappingURL=attach-popover.js.map

package/dist/components/attach-tooltip.js

@@ -1,37 +1,40 @@
 
+import { _ as _applyDecoratedDescriptor } from '../_rollupPluginBabelHelpers-f1ZVPpM9.js';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import DEFAULTS from '../defaults.js';
 import { getOwner } from '@ember/application';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
 
-class AttachTooltip extends Component {
+var TEMPLATE = precompileTemplate("<BasicAttacher\n  @id={{@id}}\n  @configKey=\"tooltip\"\n  @ariaRole={{this.ariaRole}}\n  @additionalClass={{this.additionalClass}}\n  @animation={{@animation}}\n  @arrow={{@arrow}}\n  @autoUpdate={{@autoUpdate}}\n  @class={{@class}}\n  @explicitTarget={{@explicitTarget}}\n  @flip={{@flip}}\n  @floatingElementContainer={{@floatingElementContainer}}\n  @floatingUiOptions={{@floatingUiOptions}}\n  @hideDelay={{@hideDelay}}\n  @hideDuration={{@hideDuration}}\n  @hideOn={{@hideOn}}\n  @interactive={{@interactive}}\n  @isOffset={{@isOffset}}\n  @isShown={{@isShown}}\n  @lazyRender={{@lazyRender}}\n  @middleware={{@middleware}}\n  @onChange={{@onChange}}\n  @onInitializeAttacher={{this.onInitializeAttacher}}\n  @onWillDestroy={{this.onWillDestroy}}\n  @overflowPadding={{@overflowPadding}}\n  @placement={{@placement}}\n  @renderInPlace={{@renderInPlace}}\n  @showDelay={{@showDelay}}\n  @showDuration={{@showDuration}}\n  @showOn={{@showOn}}\n  @style={{@style}}\n  @useCapture={{@useCapture}}\n  ...attributes\n  as |tooltip|\n>\n  {{yield tooltip}}\n</BasicAttacher>");
+
+var _class;
+let AttachTooltip = (_class = class AttachTooltip extends Component {
   get ariaRole() {
     return this.args.ariaRole || 'tooltip';
   }
-
   get additionalClass() {
-    const { tooltip, tooltipClass } = getOwner(this).resolveRegistration('config:environment').emberAttacher || {};
-
+    const {
+      tooltip,
+      tooltipClass
+    } = getOwner(this).resolveRegistration('config:environment').emberAttacher || {};
     return tooltip?.tooltipClass ?? tooltipClass ?? DEFAULTS.tooltipClass;
   }
-
-  @action
   onInitializeAttacher(currentTarget, id) {
     if (currentTarget?.getAttribute('aria-describedby') != id) {
       const oldTarget = document.querySelector(`[aria-describedby="${id}"]`);
-
       oldTarget?.removeAttribute('aria-describedby');
       currentTarget?.setAttribute('aria-describedby', id);
     }
   }
-
-  @action
   onWillDestroy(currentTarget) {
     if (currentTarget) {
       currentTarget.removeAttribute('aria-describedby');
     }
   }
-}
+}, _applyDecoratedDescriptor(_class.prototype, "onInitializeAttacher", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onInitializeAttacher"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onWillDestroy", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onWillDestroy"), _class.prototype), _class);
+setComponentTemplate(TEMPLATE, AttachTooltip);
 
 export { AttachTooltip as default };
 //# sourceMappingURL=attach-tooltip.js.map

package/dist/components/basic-attacher.js

@@ -1,4 +1,5 @@
 
+import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty, b as _defineProperty } from '../_rollupPluginBabelHelpers-f1ZVPpM9.js';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { later, cancel, next, debounce, run } from '@ember/runloop';
@@ -11,132 +12,99 @@ import { flip, shift, limitShift, arrow, autoUpdate, computePosition } from '@fl
 import { buildWaiter } from '@ember/test-waiters';
 import { tracked } from '@glimmer/tracking';
 import DEFAULTS from '../defaults.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
 
-const animationTestWaiter = buildWaiter('basic-attacher');
-
-class BasicAttacher extends Component {
-  @tracked parentNotFound = true;
-  @tracked parentElement = null;
-  @tracked _isStartingAnimation = false;
-  @tracked _arrowElement = null;
-  @tracked _currentTarget = null;
-  // This is set to true when the popover is shown in order to override lazyRender=false
-  @tracked _mustRender = false;
-  @tracked _transitionDuration = 0;
-  _floatingElement = null;
+var TEMPLATE = precompileTemplate("{{~#unless this.renderFloatingElement}}\n  <meta hidden {{did-insert this.onParentFinderInsert}} {{did-update this.onIsShownChange this.isShown}}/>\n{{~/unless~}}\n\n{{~#if this.renderFloatingElement~}}\n  <MaybeInElement @destinationElement={{this._floatingElementContainer}} @renderInPlace={{@renderInPlace}}>\n    <div\n      class=\"ember-attacher\"\n      id={{this.id}}\n      role={{@ariaRole}}\n      {{did-insert this.didInsertFloatingElement}}\n      {{did-update this.onIsShownChange this.isShown}}\n      {{did-update this.onTargetOrTriggerChange this.hideOn this.showOn @explicitTarget}}\n      {{did-update this.onOptionsChange this.autoUpdate this.animation this.arrow this.useCapture this.placement this._renderInPlace this._currentTarget this._middleware}}\n      {{will-destroy this.willDestroyFloatingElement}}\n      ...attributes\n    >\n      <div class={{this._class}} style={{this._style}}>\n        {{yield (hash hide=this.hide)}}\n        {{#if this.arrow}}\n          <div x-arrow {{did-insert this.didInsertArrow}}></div>\n        {{/if}}\n        {{#if this.isFillAnimation}}\n          <div x-circle style=\"{{this._circleTransitionDuration}}\"></div>\n        {{/if}}\n      </div>\n    </div>\n  </MaybeInElement>\n{{~/if~}}\n");
 
+var _class, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7;
+const animationTestWaiter = buildWaiter('basic-attacher');
+let BasicAttacher = (_class = class BasicAttacher extends Component {
   /**
    * ================== PUBLIC CONFIG OPTIONS ==================
    */
   get arrow() {
     return this.args.arrow ?? this._config.arrow ?? DEFAULTS.arrow;
   }
-
   get autoUpdate() {
     return this.args.autoUpdate ?? this._config.autoUpdate ?? DEFAULTS.autoUpdate;
   }
-
   get animation() {
     return this.args.animation || this._config.animation || DEFAULTS.animation;
   }
-
   get flip() {
     return this.args.flip ?? this._config.flip ?? DEFAULTS.flip;
   }
-
   get hideDelay() {
     return this.args.hideDelay ?? this._config.hideDelay ?? DEFAULTS.hideDelay;
   }
-
   get hideDuration() {
     return this.args.hideDuration ?? this._config.hideDuration ?? DEFAULTS.hideDuration;
   }
-
   get hideOn() {
     return this.args.hideOn || this._config.hideOn || DEFAULTS.hideOn;
   }
-
   get interactive() {
     return this.args.interactive ?? this._config.interactive ?? DEFAULTS.interactive;
   }
-
   get isOffset() {
     return this.args.isOffset ?? this._config.isOffset ?? DEFAULTS.isOffset;
   }
-
   get isShown() {
     return this.args.isShown ?? this._config.isShown ?? DEFAULTS.isShown;
   }
-
   get lazyRender() {
     return this.args.lazyRender ?? this._config.lazyRender ?? DEFAULTS.lazyRender;
   }
-
   get placement() {
     return this.args.placement ?? this._config.placement ?? DEFAULTS.placement;
   }
-
   get floatingElementContainer() {
     return this.args.floatingElementContainer || this._config.floatingElementContainer || DEFAULTS.floatingElementContainer;
   }
-
   get class() {
     return this.args.class || this._config.class;
   }
-
   get floatingUiOptions() {
     return this.args.floatingUiOptions || this._config.floatingUiOptions || DEFAULTS.floatingUiOptions;
   }
-
   get renderInPlace() {
     return this.args.renderInPlace ?? this._config.renderInPlace ?? DEFAULTS.renderInPlace;
   }
-
   get showDelay() {
     return this.args.showDelay ?? this._config.showDelay ?? DEFAULTS.showDelay;
   }
-
   get showDuration() {
     return this.args.showDuration ?? this._config.showDuration ?? DEFAULTS.showDuration;
   }
-
   get showOn() {
     if (this.args.showOn === null) {
       return null;
     }
-
     return this.args.showOn ?? this._config.showOn ?? DEFAULTS.showOn;
   }
-
   get style() {
     return this.args.style ?? this._config.style ?? DEFAULTS.style;
   }
-
   get useCapture() {
     return this.args.useCapture ?? this._config.useCapture ?? DEFAULTS.useCapture;
   }
-
   get configKey() {
     return this.args.configKey || 'popover';
   }
-
   get isFillAnimation() {
     return this.animation === 'fill';
   }
-
   get renderFloatingElement() {
     return (this.renderInPlace || this._currentTarget) && (!this.lazyRender || this._mustRender);
   }
-
   get shouldRenderFloatingElement() {
     // Always render the floating element unless lazyRender is true and we haven't been triggered yet
     return !this.lazyRender || this._mustRender;
   }
-
   get id() {
     return this.args.id || `${guidFor(this)}-floating`;
   }
-
   get overflowPadding() {
     return this.args.overflowPadding ?? this._config.overflowPadding ?? DEFAULTS.overflowPadding;
   }
@@ -144,11 +112,8 @@ class BasicAttacher extends Component {
   // The circle element needs a special duration that is slightly faster than the floating element's
   // transition, this prevents text from appearing outside the circle as it fills the background
   get _circleTransitionDuration() {
-    return htmlSafe(
-      `transition-duration: ${Math.round(this._transitionDuration / 1.25)}ms`
-    );
+    return htmlSafe(`transition-duration: ${Math.round(this._transitionDuration / 1.25)}ms`);
   }
-
   get _class() {
     const showOrHideClass = `ember-attacher-${this._isStartingAnimation ? 'show' : 'hide'}`;
     const arrowClass = `ember-attacher-${this.arrow ? 'with' : 'without'}-arrow`;
@@ -156,16 +121,12 @@ class BasicAttacher extends Component {
     const additionalClass = this.args.additionalClass || '';
     return [`ember-attacher-${this.animation}`, baseClass, additionalClass, showOrHideClass, arrowClass].filter(Boolean).join(' ');
   }
-
   get _style() {
     const style = this.style;
     const transitionDuration = this._transitionDuration;
-    warn(
-      '@ember/string/htmlSafe must be used for any `style` passed to ember-attacher',
-      isEmpty(style) || isHTMLSafe(style),
-      { id: 'ember-attacher-require-html-safe-style' }
-    );
-
+    warn('@ember/string/htmlSafe must be used for any `style` passed to ember-attacher', isEmpty(style) || isHTMLSafe(style), {
+      id: 'ember-attacher-require-html-safe-style'
+    });
     return htmlSafe(`transition-duration: ${transitionDuration}ms; ${style}`);
   }
 
@@ -173,31 +134,27 @@ class BasicAttacher extends Component {
   get _envConfig() {
     return getOwner(this).resolveRegistration('config:environment').emberAttacher || {};
   }
-
   get _config() {
     return {
       ...this._envConfig,
-      ...this._envConfig[this.configKey],
+      ...this._envConfig[this.configKey]
     };
   }
-
   get _hideOn() {
     let hideOn = this.hideOn;
-
     if (hideOn === undefined) {
       hideOn = DEFAULTS.hideOn;
     }
-
     return hideOn === null ? [] : hideOn.split(' ');
   }
-
   get _middleware() {
     // Copy the middleware since we might write to the provided array
     const middleware = this.args.middleware ? [...this.args.middleware] : [];
-
     const flipString = this.flip;
     if (flipString) {
-      const flipOptions = { fallbackPlacements: flipString.split(' ') };
+      const flipOptions = {
+        fallbackPlacements: flipString.split(' ')
+      };
       const flipMiddleware = middleware.find(name => name === 'flip');
       if (!flipMiddleware) {
         middleware.push(flip(flipOptions));
@@ -207,23 +164,23 @@ class BasicAttacher extends Component {
     } else if (this.overflowPadding !== false) {
       middleware.push(flip());
     }
-
     if (this.overflowPadding !== false && !middleware.find(name => name === 'shift')) {
-      middleware.push(shift({ limiter: limitShift(), padding: this.overflowPadding }));
+      middleware.push(shift({
+        limiter: limitShift(),
+        padding: this.overflowPadding
+      }));
     }
-
     if (this.arrow && this._arrowElement && !middleware.find(name => name === 'arrow')) {
-      middleware.push(arrow({ element: this._arrowElement }));
+      middleware.push(arrow({
+        element: this._arrowElement
+      }));
     }
-
     return middleware;
   }
-
   get _floatingElementContainer() {
     const maybeContainer = this.floatingElementContainer;
     const renderInPlace = this._renderInPlace;
     let floatingElementContainer;
-
     if (renderInPlace) {
       floatingElementContainer = this.parentElement;
     } else if (maybeContainer instanceof Element) {
@@ -231,22 +188,16 @@ class BasicAttacher extends Component {
     } else if (typeof maybeContainer === 'string') {
       const selector = maybeContainer;
       const possibleContainers = document.querySelectorAll(selector);
-
-      assert(`floatingElementContainer selector "${selector}" found `
-        + `${possibleContainers.length} possible containers when there should be exactly 1`, possibleContainers.length === 1);
-
+      assert(`floatingElementContainer selector "${selector}" found ` + `${possibleContainers.length} possible containers when there should be exactly 1`, possibleContainers.length === 1);
       floatingElementContainer = possibleContainers[0];
     }
-
     return floatingElementContainer;
   }
-
   get _renderInPlace() {
     // document is undefined in Fastboot, so we have to render in
     // place for the floating element to show up at all.
     return typeof document !== 'undefined' ? !!this.renderInPlace : true;
   }
-
   _setIsVisibleAfterDelay(isVisible, delay) {
     if (!this._floatingElement) {
       this._animationTimeout = requestAnimationFrame(() => {
@@ -255,7 +206,6 @@ class BasicAttacher extends Component {
       return;
     }
     const onChange = this.args.onChange;
-
     if (delay) {
       this._delayedVisibilityToggle = later(this, () => {
         this._animationTimeout = requestAnimationFrame(() => {
@@ -266,7 +216,6 @@ class BasicAttacher extends Component {
             // Prevent jank by making the attachment invisible until positioned.
             // The visibility style will be toggled by this._startShowAnimation()
             this._floatingElement.style.visibility = isVisible ? 'hidden' : '';
-
             if (onChange) {
               onChange(isVisible);
             }
@@ -279,55 +228,54 @@ class BasicAttacher extends Component {
       // Prevent jank by making the attachment invisible until positioned.
       // The visibility style will be toggled by this._startShowAnimation()
       this._floatingElement.style.visibility = isVisible ? 'hidden' : '';
-
       if (onChange) {
         onChange(isVisible);
       }
     }
   }
-
   get _showOn() {
     let showOn = this.showOn;
-
     if (showOn === undefined) {
       showOn = DEFAULTS.showOn;
     }
-
     return showOn === null ? [] : showOn.split(' ');
   }
 
   // Exposed via the named yield to enable custom hide events
-  @action
   hide() {
     this._hide();
   }
-
-  @action
   onParentFinderInsert(element) {
     this.parentElement = element.parentElement;
     this._initializeAttacher();
   }
-
-  @action
   _ensureArgumentsAreValid() {
     runInDebug(() => {
       if (this.arrow && this.isFillAnimation) {
-        warn('Animation: \'fill\' is not compatible with arrow: true', { id: 70015 });
+        warn('Animation: \'fill\' is not compatible with arrow: true', {
+          id: 70015
+        });
       }
-
       if (this.useCapture !== this._lastUseCaptureArgumentValue) {
-        warn(
-          'The value of the useCapture argument was mutated',
-          { id: 'ember-attacher.use-capture-mutated' }
-        );
+        warn('The value of the useCapture argument was mutated', {
+          id: 'ember-attacher.use-capture-mutated'
+        });
       }
     });
   }
-
   constructor() {
     super(...arguments);
 
     // The debounced _hide() and _show() are stored here so they can be cancelled when necessary
+    _initializerDefineProperty(this, "parentNotFound", _descriptor, this);
+    _initializerDefineProperty(this, "parentElement", _descriptor2, this);
+    _initializerDefineProperty(this, "_isStartingAnimation", _descriptor3, this);
+    _initializerDefineProperty(this, "_arrowElement", _descriptor4, this);
+    _initializerDefineProperty(this, "_currentTarget", _descriptor5, this);
+    // This is set to true when the popover is shown in order to override lazyRender=false
+    _initializerDefineProperty(this, "_mustRender", _descriptor6, this);
+    _initializerDefineProperty(this, "_transitionDuration", _descriptor7, this);
+    _defineProperty(this, "_floatingElement", null);
     this._delayedVisibilityToggle = null;
 
     // The final source of truth on whether or not all _hide() or _show() actions have completed
@@ -343,27 +291,22 @@ class BasicAttacher extends Component {
     this._showListenersOnTargetByEvent = {};
 
     // Hacks to make sure event listeners have the right context and are still removable
-    this._debouncedHideIfMouseOutsideTargetOrAttachment
-      = this._debouncedHideIfMouseOutsideTargetOrAttachment.bind(this);
+    this._debouncedHideIfMouseOutsideTargetOrAttachment = this._debouncedHideIfMouseOutsideTargetOrAttachment.bind(this);
     this._hide = this._hide.bind(this);
     this._hideAfterDelay = this._hideAfterDelay.bind(this);
-    this._hideIfMouseOutsideTargetOrAttachment
-      = this._hideIfMouseOutsideTargetOrAttachment.bind(this);
+    this._hideIfMouseOutsideTargetOrAttachment = this._hideIfMouseOutsideTargetOrAttachment.bind(this);
     this._hideOnClickOut = this._hideOnClickOut.bind(this);
     this._hideOnEscapeKey = this._hideOnEscapeKey.bind(this);
     this._hideOnLostFocus = this._hideOnLostFocus.bind(this);
     this._hideOnMouseLeaveTarget = this._hideOnMouseLeaveTarget.bind(this);
     this._show = this._show.bind(this);
     this._showAfterDelay = this._showAfterDelay.bind(this);
-
     this._lastUseCaptureArgumentValue = this.useCapture;
   }
-
   _initializeAttacher() {
     this._removeEventListeners();
     this._currentTarget = this.args.explicitTarget || this.parentElement;
     this._addListenersForShowEvents();
-
     if (!this._isHidden || this.isShown) {
       this._addListenersForHideEvents();
 
@@ -375,57 +318,43 @@ class BasicAttacher extends Component {
     // Call hook for subclasses to add their own initialization logic
     this.args.onInitializeAttacher?.(this._currentTarget, this.id);
   }
-
   _addListenersForShowEvents() {
     if (!this._currentTarget) {
       return;
     }
-
-    this._showOn.forEach((event) => {
+    this._showOn.forEach(event => {
       this._showListenersOnTargetByEvent[event] = this._showAfterDelay;
-
       this._currentTarget.addEventListener(event, this._showAfterDelay, this.useCapture);
     });
   }
-
   willDestroy() {
     super.willDestroy(...arguments);
-
     this._cancelAnimation();
     cancel(this._delayedVisibilityToggle);
-
     this._removeEventListeners();
 
     // Call hook for cleanup
     this.args.onWillDestroy?.(this._currentTarget, this.id);
   }
-
   _removeEventListeners() {
-    Object.keys(this._hideListenersOnDocumentByEvent).forEach((eventType) => {
+    Object.keys(this._hideListenersOnDocumentByEvent).forEach(eventType => {
       document.removeEventListener(eventType, this._hideListenersOnDocumentByEvent[eventType], this.useCapture);
       delete this._hideListenersOnDocumentByEvent[eventType];
     });
     if (!this._currentTarget) {
       return;
     }
-
-    [this._hideListenersOnTargetByEvent, this._showListenersOnTargetByEvent]
-      .forEach((eventToListener) => {
-        Object.keys(eventToListener).forEach((event) => {
-          this._currentTarget.removeEventListener(event, eventToListener[event], this.useCapture);
-        });
+    [this._hideListenersOnTargetByEvent, this._showListenersOnTargetByEvent].forEach(eventToListener => {
+      Object.keys(eventToListener).forEach(event => {
+        this._currentTarget.removeEventListener(event, eventToListener[event], this.useCapture);
       });
+    });
   }
-
-  @action
   onTargetOrTriggerChange() {
     this._initializeAttacher();
   }
-
-  @action
   onIsShownChange() {
     const isShown = this.isShown;
-
     if (isShown === true && this._isHidden) {
       this._show();
 
@@ -443,31 +372,22 @@ class BasicAttacher extends Component {
 
   _showAfterDelay() {
     cancel(this._delayedVisibilityToggle);
-
     this._mustRender = true;
-
     this._addListenersForHideEvents();
-
     const showDelay = parseInt(this.showDelay);
-
     this._delayedVisibilityToggle = debounce(this, this._show, showDelay, !showDelay);
   }
-
   _show() {
     this._cancelAnimation();
-
     if (!this._currentTarget) {
       return;
     }
-
     this._mustRender = true;
 
     // Make the attachment visible immediately so transition animations can take place
     this._setIsVisibleAfterDelay(true, 0);
-
     this._startShowAnimation();
   }
-
   _startShowAnimation() {
     // Start the show animation on the next cycle so CSS transitions can have an effect.
     // If we start the animation immediately, the transition won't work because
@@ -479,7 +399,6 @@ class BasicAttacher extends Component {
       if (this.isDestroyed || this.isDestroying || !this._currentTarget) {
         return;
       }
-
       const floatingElement = this._floatingElement;
 
       // Wait until the element is visible before continuing
@@ -487,7 +406,6 @@ class BasicAttacher extends Component {
         this._startShowAnimation();
         return;
       }
-
       this._update();
 
       // Wait for the above positioning to take effect before starting the show animation,
@@ -507,7 +425,6 @@ class BasicAttacher extends Component {
           this._isStartingAnimation = true;
           floatingElement.setAttribute('aria-hidden', 'false');
         });
-
         this._isHidden = false;
       });
       animationTestWaiter.beginAsync(this._animationTimeout);
@@ -521,12 +438,9 @@ class BasicAttacher extends Component {
 
   _hideAfterDelay() {
     cancel(this._delayedVisibilityToggle);
-
     const hideDelay = parseInt(this.hideDelay);
-
     this._delayedVisibilityToggle = debounce(this, this._hide, hideDelay, !hideDelay);
   }
-
   _hide() {
     if (!this._floatingElement) {
       this._animationTimeout = requestAnimationFrame(() => {
@@ -536,9 +450,7 @@ class BasicAttacher extends Component {
       animationTestWaiter.beginAsync(this._animationTimeout);
       return;
     }
-
     this._cancelAnimation();
-
     this._removeListenersForHideEvents();
     this._animationTimeout = requestAnimationFrame(() => {
       animationTestWaiter.endAsync(this._animationTimeout);
@@ -546,21 +458,17 @@ class BasicAttacher extends Component {
       if (this.isDestroyed || this.isDestroying) {
         return;
       }
-
       const hideDuration = parseInt(this.hideDuration);
-
       run(() => {
         if (this.isDestroyed || this.isDestroying) {
           return;
         }
-
         this._transitionDuration = hideDuration;
         this._isStartingAnimation = false;
         this._floatingElement.setAttribute('aria-hidden', 'true');
         // Wait for any animations to complete before hiding the attachment
         this._setIsVisibleAfterDelay(false, hideDuration);
       });
-
       this._isHidden = true;
     });
     animationTestWaiter.beginAsync(this._animationTimeout);
@@ -578,27 +486,20 @@ class BasicAttacher extends Component {
     if (!target || this.isDestroyed || this.isDestroying) {
       return;
     }
-
     if (hideOn.includes('click')) {
       const showOnClickListener = this._showListenersOnTargetByEvent.click;
-
       if (showOnClickListener) {
         target.removeEventListener('click', showOnClickListener, this.useCapture);
-
         delete this._showListenersOnTargetByEvent.click;
       }
-
       this._hideListenersOnTargetByEvent.click = this._hideAfterDelay;
       target.addEventListener('click', this._hideAfterDelay, this.useCapture);
     }
-
     if (hideOn.includes('clickout')) {
       const clickoutEvent = 'ontouchstart' in window ? 'touchend' : 'click';
-
       this._hideListenersOnDocumentByEvent[clickoutEvent] = this._hideOnClickOut;
       document.addEventListener(clickoutEvent, this._hideOnClickOut, this.useCapture);
     }
-
     if (hideOn.includes('escapekey')) {
       this._hideListenersOnDocumentByEvent.keydown = this._hideOnEscapeKey;
       document.addEventListener('keydown', this._hideOnEscapeKey, this.useCapture);
@@ -612,14 +513,13 @@ class BasicAttacher extends Component {
     }
 
     // Hides the attachment when focus is lost on the target
-    ['blur', 'focusout'].forEach((eventType) => {
+    ['blur', 'focusout'].forEach(eventType => {
       if (hideOn.includes(eventType)) {
         this._hideListenersOnTargetByEvent[eventType] = this._hideOnLostFocus;
         target.addEventListener(eventType, this._hideOnLostFocus, this.useCapture);
       }
     });
   }
-
   _hideOnMouseLeaveTarget() {
     if (this.interactive) {
       // TODO(kjb) Should debounce this, but hiding appears sluggish if you debounce.
@@ -635,81 +535,59 @@ class BasicAttacher extends Component {
       this._hideAfterDelay();
     }
   }
-
   _debouncedHideIfMouseOutsideTargetOrAttachment(event) {
     debounce(this, this._hideIfMouseOutsideTargetOrAttachment, event, 10);
   }
-
   _hideIfMouseOutsideTargetOrAttachment(event) {
     const target = this._currentTarget;
-
     if (!target) {
       return;
     }
 
     // If cursor is not on the attachment or target, hide the floating element
-    if (!target.contains(event.target)
-      && !(this.isOffset && this._isCursorBetweenTargetAndAttachment(event))
-      && (this._floatingElement && !this._floatingElement.contains(event.target))) {
+    if (!target.contains(event.target) && !(this.isOffset && this._isCursorBetweenTargetAndAttachment(event)) && this._floatingElement && !this._floatingElement.contains(event.target)) {
       // Remove this listener before hiding the attachment
       delete this._hideListenersOnDocumentByEvent.mousemove;
       document.removeEventListener('mousemove', this._hideIfMouseOutsideTargetOrAttachment, this.useCapture);
-
       this._hideAfterDelay();
     }
   }
-
   _isCursorBetweenTargetAndAttachment(event) {
-
     if (!this._currentTarget) {
       return;
     }
-
-    const { clientX, clientY } = event;
-
+    const {
+      clientX,
+      clientY
+    } = event;
     const attachmentPosition = this._floatingElement.getBoundingClientRect();
     const targetPosition = this._currentTarget.getBoundingClientRect();
-
-    const isBetweenLeftAndRight = clientX > Math.min(attachmentPosition.left, targetPosition.left)
-      && clientX < Math.max(attachmentPosition.right, targetPosition.right);
-
-    const isBetweenTopAndBottom = clientY > Math.min(attachmentPosition.top, targetPosition.top)
-      && clientY < Math.max(attachmentPosition.bottom, targetPosition.bottom);
+    const isBetweenLeftAndRight = clientX > Math.min(attachmentPosition.left, targetPosition.left) && clientX < Math.max(attachmentPosition.right, targetPosition.right);
+    const isBetweenTopAndBottom = clientY > Math.min(attachmentPosition.top, targetPosition.top) && clientY < Math.max(attachmentPosition.bottom, targetPosition.bottom);
 
     // Check if cursor is between a left-flipped attachment
-    if (attachmentPosition.right < targetPosition.left
-      && clientX >= attachmentPosition.right && clientX <= targetPosition.left
-      && isBetweenTopAndBottom) {
+    if (attachmentPosition.right < targetPosition.left && clientX >= attachmentPosition.right && clientX <= targetPosition.left && isBetweenTopAndBottom) {
       return true;
     }
 
     // Check if cursor is between a right-flipped attachment
-    if (attachmentPosition.left > targetPosition.right
-      && clientX <= attachmentPosition.left && clientX >= targetPosition.right
-      && isBetweenTopAndBottom) {
+    if (attachmentPosition.left > targetPosition.right && clientX <= attachmentPosition.left && clientX >= targetPosition.right && isBetweenTopAndBottom) {
       return true;
     }
 
     // Check if cursor is between a bottom-flipped attachment
-    if (attachmentPosition.top > targetPosition.bottom
-      && clientY <= attachmentPosition.top && clientY >= targetPosition.bottom
-      && isBetweenLeftAndRight) {
+    if (attachmentPosition.top > targetPosition.bottom && clientY <= attachmentPosition.top && clientY >= targetPosition.bottom && isBetweenLeftAndRight) {
       return true;
     }
 
     // Check if cursor is between a top-flipped attachment
-    if (attachmentPosition.bottom < targetPosition.top
-      && clientY >= attachmentPosition.bottom && clientY <= targetPosition.top
-      && isBetweenLeftAndRight) {
+    if (attachmentPosition.bottom < targetPosition.top && clientY >= attachmentPosition.bottom && clientY <= targetPosition.top && isBetweenLeftAndRight) {
       return true;
     }
-
     return false;
   }
-
   _hideOnClickOut(event) {
     const targetReceivedClick = this._currentTarget.contains(event.target);
-
     if (this.interactive) {
       if (!targetReceivedClick && !this._floatingElement.contains(event.target)) {
         this._hideAfterDelay();
@@ -718,24 +596,19 @@ class BasicAttacher extends Component {
       this._hideAfterDelay();
     }
   }
-
   _hideOnEscapeKey(event) {
     if (event.keyCode === 27) {
       return this._hideAfterDelay();
     }
   }
-
   _hideOnLostFocus(event) {
     if (event.relatedTarget === null) {
       this._hideAfterDelay();
     }
-
     if (!this._currentTarget) {
       return;
     }
-
     const targetContainsFocus = this._currentTarget.contains(event.relatedTarget);
-
     if (this.interactive) {
       if (!targetContainsFocus && !this._floatingElement.contains(event.relatedTarget)) {
         this._hideAfterDelay();
@@ -744,13 +617,11 @@ class BasicAttacher extends Component {
       this._hideAfterDelay();
     }
   }
-
   _removeListenersForHideEvents() {
-    Object.keys(this._hideListenersOnDocumentByEvent).forEach((eventType) => {
+    Object.keys(this._hideListenersOnDocumentByEvent).forEach(eventType => {
       document.removeEventListener(eventType, this._hideListenersOnDocumentByEvent[eventType], this.useCapture);
       delete this._hideListenersOnDocumentByEvent[eventType];
     });
-
     const showOn = this._showOn;
     const target = this._currentTarget;
 
@@ -762,103 +633,138 @@ class BasicAttacher extends Component {
     // Switch clicking back to a show event
     if (showOn.includes('click')) {
       const hideOnClickListener = this._hideListenersOnTargetByEvent.click;
-
       if (hideOnClickListener) {
         target.removeEventListener('click', hideOnClickListener, this.useCapture);
         delete this._hideListenersOnTargetByEvent.click;
       }
-
       this._showListenersOnTargetByEvent.click = this._showAfterDelay;
       target.addEventListener('click', this._showAfterDelay, this.useCapture);
     }
-
-    ['blur', 'focusout', 'mouseleave'].forEach((eventType) => {
+    ['blur', 'focusout', 'mouseleave'].forEach(eventType => {
       const listener = this._hideListenersOnTargetByEvent[eventType];
-
       if (listener) {
         target.removeEventListener(eventType, listener, this.useCapture);
         delete this._hideListenersOnTargetByEvent[eventType];
       }
     });
   }
-
-  @action
   didInsertFloatingElement(floatingElement) {
     this._floatingElement = floatingElement;
-
     if (this.renderInPlace) {
       this.parentElement = floatingElement.parentElement;
       this._initializeAttacher();
     }
   }
-
-  @action
   didInsertArrow(element) {
     this._arrowElement = element;
   }
-
-  @action
   onOptionsChange() {
     this._ensureArgumentsAreValid();
     this._update();
   }
-
-  @action
   willDestroyFloatingElement() {
     this._cleanup?.();
   }
-
   _update() {
     this._cleanup?.();
     if (this.autoUpdate) {
-      this._cleanup = autoUpdate(
-        this._currentTarget,
-        this._floatingElement,
-        this._updatePosition,
-        typeOf(this.autoUpdate) === 'object' ? this.autoUpdate : undefined
-      );
+      this._cleanup = autoUpdate(this._currentTarget, this._floatingElement, this._updatePosition, typeOf(this.autoUpdate) === 'object' ? this.autoUpdate : undefined);
     } else {
       this._updatePosition();
     }
   }
-
-  @action
   _updatePosition() {
     const computePositionToken = animationTestWaiter.beginAsync();
     computePosition(this._currentTarget, this._floatingElement, {
       ...this.floatingUiOptions,
       middleware: this._middleware,
       placement: this.placement
-    }).then(({ x, y, placement, middlewareData }) => {
+    }).then(({
+      x,
+      y,
+      placement,
+      middlewareData
+    }) => {
       animationTestWaiter.endAsync(computePositionToken);
-      Object.assign(this._floatingElement.style, { left: `${x}px`, top: `${y}px`, });
-
+      Object.assign(this._floatingElement.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
       if (middlewareData.arrow) {
-        const { x, y } = middlewareData.arrow;
-
+        const {
+          x,
+          y
+        } = middlewareData.arrow;
         Object.assign(this._arrowElement.style, {
           left: x != null ? `${x}px` : '',
-          top: y != null ? `${y}px` : '',
+          top: y != null ? `${y}px` : ''
         });
       }
       this._floatingElement.setAttribute('x-placement', placement);
     });
   }
-
   _cancelAnimation() {
     if (typeof cancelAnimationFrame !== 'function') {
       return;
     }
-
     cancelAnimationFrame(this._animationTimeout);
-
     runInDebug(() => {
       if (animationTestWaiter.items?.get(this._animationTimeout)) {
         animationTestWaiter.endAsync(this._animationTimeout);
       }
     });
   }
-}
+}, _descriptor = _applyDecoratedDescriptor(_class.prototype, "parentNotFound", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return true;
+  }
+}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "parentElement", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return null;
+  }
+}), _descriptor3 = _applyDecoratedDescriptor(_class.prototype, "_isStartingAnimation", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return false;
+  }
+}), _descriptor4 = _applyDecoratedDescriptor(_class.prototype, "_arrowElement", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return null;
+  }
+}), _descriptor5 = _applyDecoratedDescriptor(_class.prototype, "_currentTarget", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return null;
+  }
+}), _descriptor6 = _applyDecoratedDescriptor(_class.prototype, "_mustRender", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return false;
+  }
+}), _descriptor7 = _applyDecoratedDescriptor(_class.prototype, "_transitionDuration", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return 0;
+  }
+}), _applyDecoratedDescriptor(_class.prototype, "hide", [action], Object.getOwnPropertyDescriptor(_class.prototype, "hide"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onParentFinderInsert", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onParentFinderInsert"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "_ensureArgumentsAreValid", [action], Object.getOwnPropertyDescriptor(_class.prototype, "_ensureArgumentsAreValid"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onTargetOrTriggerChange", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onTargetOrTriggerChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onIsShownChange", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onIsShownChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "didInsertFloatingElement", [action], Object.getOwnPropertyDescriptor(_class.prototype, "didInsertFloatingElement"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "didInsertArrow", [action], Object.getOwnPropertyDescriptor(_class.prototype, "didInsertArrow"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onOptionsChange", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onOptionsChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "willDestroyFloatingElement", [action], Object.getOwnPropertyDescriptor(_class.prototype, "willDestroyFloatingElement"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "_updatePosition", [action], Object.getOwnPropertyDescriptor(_class.prototype, "_updatePosition"), _class.prototype), _class);
+setComponentTemplate(TEMPLATE, BasicAttacher);
 
 export { BasicAttacher as default };
 //# sourceMappingURL=basic-attacher.js.map

package/dist/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/test-support/index.js

@@ -1,32 +1,22 @@
 
 function isVisible(selector, contextEl) {
-  const attachment = typeof(selector) === 'string' ? getAttachment(selector, contextEl) : selector;
-
+  const attachment = typeof selector === 'string' ? getAttachment(selector, contextEl) : selector;
   return getComputedStyle(attachment).display !== 'none';
 }
-
 function getAttachment(selectorOrElement = '', contextEl) {
-  if (selectorOrElement instanceof Window ||
-      selectorOrElement instanceof Document ||
-      selectorOrElement instanceof HTMLElement ||
-      selectorOrElement instanceof SVGElement) {
+  if (selectorOrElement instanceof Window || selectorOrElement instanceof Document || selectorOrElement instanceof HTMLElement || selectorOrElement instanceof SVGElement) {
     return selectorOrElement;
   }
-
   let result;
-
   if (contextEl instanceof HTMLElement) {
     result = contextEl.querySelector(selectorOrElement);
   } else {
     result = document.querySelector(`${selectorOrElement}`);
   }
-
   if (!result) {
-    const msg = typeof(selector) === 'string' ? selectorOrElement : selectorOrElement.innerHTML;
-
+    const msg = typeof selector === 'string' ? selectorOrElement : selectorOrElement.innerHTML;
     throw `Could not locate attachment from selector: ${msg}`;
   }
-
   return result;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-attacher",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.3",
   "description": "Tooltips and popovers for Ember.js apps",
   "keywords": [
     "ember-addon",