ember-sortable 5.1.2 → 5.2.0

package/dist/modifiers/sortable-handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"sortable-handle.js","sources":["../../src/modifiers/sortable-handle.js"],"sourcesContent":["import Modifier from 'ember-modifier';\n\n/**\n * Modifier to to mark the handle of an item. If this is not supplied the item will be the handle\n *\n * @module drag-drop/draggable-group\n * @example*\n *    <ol {{sortable-group onChange=this.update a11yAnnouncementConfig=this.myA11yConfig}}>\n *      {{#each model.items as |item|}}\n *        <li {{sortable-item model=item}}>\n *          {{item.name}}\n *          <span class=\"handle\" {{sortable-handle}}>&varr;</span>\n *        </li>\n *      {{/each}}\n *    </ol>\n */\nexport default class SortableHandleModifier extends Modifier {\n  didSetup = false;\n\n  modify(element /*, positional, named*/) {\n    if (!this.didSetup) {\n      // take the model and look up the registered element, the tell that element you are the handle\n      element.dataset.sortableHandle = true;\n      element.tabIndex = '0';\n      element.setAttribute('role', 'button');\n      this.didSetup = true;\n    }\n  }\n}\n"],"names":["SortableHandleModifier","Modifier","constructor","args","_defineProperty","modify","element","didSetup","dataset","sortableHandle","tabIndex","setAttribute"],"mappings":";;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,MAAMA,sBAAsB,SAASC,QAAQ,CAAC;AAAAC,EAAAA,WAAAA,CAAA,GAAAC,IAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAAA,IAAA,CAAA,CAAA;AAAAC,IAAAA,eAAA,mBAChD,KAAK,CAAA,CAAA;AAAA,GAAA;EAEhBC,MAAMA,CAACC,OAAO,0BAA0B;AACtC,IAAA,IAAI,CAAC,IAAI,CAACC,QAAQ,EAAE;AAClB;AACAD,MAAAA,OAAO,CAACE,OAAO,CAACC,cAAc,GAAG,IAAI,CAAA;MACrCH,OAAO,CAACI,QAAQ,GAAG,GAAG,CAAA;AACtBJ,MAAAA,OAAO,CAACK,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;MACtC,IAAI,CAACJ,QAAQ,GAAG,IAAI,CAAA;AACtB,KAAA;AACF,GAAA;AACF;;;;"}
+{"version":3,"file":"sortable-handle.js","sources":["../../src/modifiers/sortable-handle.ts"],"sourcesContent":["import Modifier from 'ember-modifier';\n\ninterface SortableHandleModifierSignature {\n  Element: HTMLElement;\n}\n\n/**\n * Modifier to to mark the handle of an item. If this is not supplied the item will be the handle\n *\n * @module drag-drop/draggable-group\n * @example*\n *    <ol {{sortable-group onChange=this.update a11yAnnouncementConfig=this.myA11yConfig}}>\n *      {{#each model.items as |item|}}\n *        <li {{sortable-item model=item}}>\n *          {{item.name}}\n *          <span class=\"handle\" {{sortable-handle}}>&varr;</span>\n *        </li>\n *      {{/each}}\n *    </ol>\n */\nexport default class SortableHandleModifier extends Modifier<SortableHandleModifierSignature> {\n  didSetup = false;\n\n  override modify(element: HTMLElement /*, positional, named*/) {\n    if (!this.didSetup) {\n      // take the model and look up the registered element, the tell that element you are the handle\n      element.dataset['sortableHandle'] = 'true';\n      element.setAttribute('tabIndex', '0');\n      element.setAttribute('role', 'button');\n      this.didSetup = true;\n    }\n  }\n}\n"],"names":["SortableHandleModifier","Modifier","constructor","args","_defineProperty","modify","element","didSetup","dataset","setAttribute"],"mappings":";;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,MAAMA,sBAAsB,SAASC,QAAQ,CAAkC;AAAAC,EAAAA,WAAAA,CAAA,GAAAC,IAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAAA,IAAA,CAAA,CAAA;AAAAC,IAAAA,eAAA,mBACjF,KAAK,CAAA,CAAA;AAAA,GAAA;EAEPC,MAAMA,CAACC,OAAoB,EAA0B;AAC5D,IAAA,IAAI,CAAC,IAAI,CAACC,QAAQ,EAAE;AAClB;AACAD,MAAAA,OAAO,CAACE,OAAO,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAA;AAC1CF,MAAAA,OAAO,CAACG,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;AACrCH,MAAAA,OAAO,CAACG,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;MACtC,IAAI,CAACF,QAAQ,GAAG,IAAI,CAAA;AACtB,KAAA;AACF,GAAA;AACF;;;;"}

package/dist/modifiers/sortable-item.js

@@ -1,4 +1,4 @@
-import { _ as _applyDecoratedDescriptor, a as _defineProperty, b as _initializerDefineProperty } from '../_rollupPluginBabelHelpers-543b1c36.js';
+import { a as _defineProperty, _ as _applyDecoratedDescriptor, b as _initializerDefineProperty } from '../_rollupPluginBabelHelpers-a7bede49.js';
 import Modifier from 'ember-modifier';
 import { Promise as Promise$1, defer } from 'rsvp';
 import { action, set } from '@ember/object';
@@ -6,8 +6,6 @@ import { DRAG_ACTIONS, END_ACTIONS, ELEMENT_CLICK_ACTION } from '../utils/consta
 import { bind, scheduleOnce, throttle, later, run } from '@ember/runloop';
 import { DEBUG } from '@glimmer/env';
 import { getX, getY } from '../utils/coordinate.js';
-import ScrollContainer from '../system/scroll-container.js';
-import scrollParent from '../system/scroll-parent.js';
 import { getBorderSpacing } from '../utils/css-calculation.js';
 import { buildWaiter } from '@ember/test-waiters';
 import { inject } from '@ember/service';
@@ -15,9 +13,103 @@ import { assert, deprecate } from '@ember/debug';
 import { registerDestructor } from '@ember/destroyable';
 import { isTesting } from '@embroider/macros';
 
+class ScrollContainer {
+  constructor(element) {
+    _defineProperty(this, "element", void 0);
+    _defineProperty(this, "isWindow", void 0);
+    _defineProperty(this, "top", void 0);
+    _defineProperty(this, "left", void 0);
+    _defineProperty(this, "width", void 0);
+    _defineProperty(this, "height", void 0);
+    _defineProperty(this, "scrollWidth", void 0);
+    _defineProperty(this, "scrollHeight", void 0);
+    _defineProperty(this, "maxScrollTop", void 0);
+    _defineProperty(this, "maxScrollLeft", void 0);
+    this.isWindow = element === document;
+    this.element = this.isWindow ? document.documentElement : element;
+    if (this.isWindow) {
+      this.top = 0;
+      this.left = 0;
+      this.width = document.documentElement.clientWidth;
+      this.height = document.documentElement.clientHeight;
+    } else {
+      // Absolute position in document
+      const {
+        top,
+        left
+      } = this.element.getBoundingClientRect();
+      this.top = top;
+      this.left = left;
+      // Viewport size of the container element
+      this.width = parseFloat(getComputedStyle(this.element).width);
+      this.height = parseFloat(getComputedStyle(this.element).height);
+    }
+    // Total size of the container element (including scrollable part)
+    this.scrollWidth = this.element.scrollWidth;
+    this.scrollHeight = this.element.scrollHeight;
+    // Max scroll pos
+    this.maxScrollTop = this.scrollHeight - this.height;
+    this.maxScrollLeft = this.scrollWidth - this.width;
+  }
+  get bottom() {
+    return this.top + this.height;
+  }
+  get right() {
+    return this.left + this.width;
+  }
+  scrollTop(value) {
+    if (value) {
+      value = Math.max(0, Math.min(this.maxScrollTop, value));
+      this.element.scrollTop = value;
+      return value;
+    }
+    return this.element.scrollTop;
+  }
+  scrollLeft(value) {
+    if (value) {
+      value = Math.max(0, Math.min(this.maxScrollLeft, value));
+      this.element.scrollLeft = value;
+      return value;
+    }
+    return this.element.scrollLeft;
+  }
+}
+
+function getParentElements(element) {
+  const parentsArray = [];
+  if (!element) {
+    return parentsArray;
+  }
+  let currentParent = element.parentElement;
+  while (currentParent !== null) {
+    parentsArray.push(currentParent);
+    currentParent = currentParent.parentElement;
+  }
+  return parentsArray;
+}
+function scrollParent (element) {
+  const position = getComputedStyle(element).position;
+  const excludeStaticParent = position === 'absolute';
+  let scrollParent = getParentElements(element).filter(function (parent) {
+    const parentElemStyles = getComputedStyle(parent);
+    if (excludeStaticParent && parentElemStyles.position === 'static') {
+      return false;
+    }
+    const {
+      overflow,
+      overflowX,
+      overflowY
+    } = parentElemStyles;
+    return /(auto|scroll)/.test(overflow + overflowX + overflowY);
+  })[0];
+  if (!scrollParent || scrollParent === document.body) {
+    scrollParent = document;
+  }
+  return scrollParent;
+}
+
 var _dec, _class, _descriptor;
 const sortableItemWaiter = buildWaiter('sortable-item-waiter');
-
 /**
  * Modifier to mark an element as an item to be reordered
  *
@@ -37,7 +129,7 @@ const sortableItemWaiter = buildWaiter('sortable-item-waiter');
  *      {{/each}}
  *    </ol>
  */
-let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_class = class SortableItemModifier extends Modifier {
+let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), _class = class SortableItemModifier extends Modifier {
   /**
    * The SortableGroupModifier this item belongs to. Assigned by the group
    * when it inspects all the items in the list
@@ -66,7 +158,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    * If no group is assigned a default is used
    *
    * @default "_EmberSortableGroup"
-   * @returns {*|string}
+   * @returns {string}
    */
   get groupName() {
     return this.named.groupName || '_EmberSortableGroup';
@@ -180,16 +272,16 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     }
     const dragOriginX = this._dragOriginX;
     const dragOriginY = this._dragOriginY;
-    if (dragOriginX > this._pageX) {
+    if (dragOriginX && this._pageX && dragOriginX > this._pageX) {
       moveDirection.left = true;
     }
-    if (dragOriginX < this._pageX) {
+    if (dragOriginX && this._pageX && dragOriginX < this._pageX) {
       moveDirection.right = true;
     }
-    if (dragOriginY > this._pageY) {
+    if (dragOriginY && this._pageY && dragOriginY > this._pageY) {
       moveDirection.top = true;
     }
-    if (dragOriginY < this._pageY) {
+    if (dragOriginY && this._pageY && dragOriginY < this._pageY) {
       moveDirection.bottom = true;
     }
     return moveDirection;
@@ -255,7 +347,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    @property disableCheckScrollBounds
    */
   get disableCheckScrollBounds() {
-    return this.named.disableCheckScrollBounds != undefined ? this.named.disableCheckScrollBounds : isTesting();
+    return this.named.disableCheckScrollBounds !== undefined ? this.named.disableCheckScrollBounds : isTesting();
   }
 
   /**
@@ -295,7 +387,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    @method freeze
    */
   freeze() {
-    let el = this.element;
+    const el = this.element;
     if (!el) {
       return;
     }
@@ -306,7 +398,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    @method reset
    */
   reset() {
-    let el = this.element;
+    const el = this.element;
     if (!el) {
       return;
     }
@@ -319,13 +411,12 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    @method thaw
    */
   thaw() {
-    let el = this.element;
+    const el = this.element;
     if (!el) {
       return;
     }
     el.style.transition = '';
   }
-
   /**
    * Setup event listeners for drag and drop
    *
@@ -337,7 +428,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     if (this.isDisabled) {
       return;
     }
-    if (this.handleElement && !startEvent.target.closest(this.handle)) {
+    if (this.handleElement && !startEvent.target?.closest(this.handle)) {
       return;
     }
     startEvent.preventDefault();
@@ -367,9 +458,9 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     if (this.sortableGroup.sortedItems.some(x => x.isBusy)) {
       return;
     }
-    let distance = this.distance;
-    let dx = Math.abs(getX(startEvent) - getX(event));
-    let dy = Math.abs(getY(startEvent) - getY(event));
+    const distance = this.distance;
+    const dx = Math.abs(getX(startEvent) - getX(event));
+    const dy = Math.abs(getY(startEvent) - getY(event));
     if (distance <= dx || distance <= dy) {
       DRAG_ACTIONS.forEach(event => window.removeEventListener(event, this._prepareDragListener));
       this._startDrag(startEvent);
@@ -387,9 +478,9 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     if (this.isBusy) {
       return;
     }
-    let drag = this._makeDragHandler(event);
-    let dragThrottled = ev => throttle(this, drag, ev, 16, false);
-    let drop = () => {
+    const drag = this._makeDragHandler(event);
+    const dragThrottled = ev => throttle(this, drag, ev, 16, false);
+    const drop = () => {
       DRAG_ACTIONS.forEach(event => window.removeEventListener(event, dragThrottled));
       END_ACTIONS.forEach(event => window.removeEventListener(event, drop));
       run(() => {
@@ -411,10 +502,10 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    */
 
   _scrollOnEdges(drag) {
-    let groupDirection = this.direction;
-    let element = this.element;
-    let scrollContainer = new ScrollContainer(scrollParent(element));
-    let itemContainer = {
+    const groupDirection = this.direction;
+    const element = this.element;
+    const scrollContainer = new ScrollContainer(scrollParent(element));
+    const itemContainer = {
       width: parseInt(getComputedStyle(element).width, 10),
       get height() {
         return parseInt(getComputedStyle(element).height, 10);
@@ -444,25 +535,25 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
       scrollKey = 'scrollTop';
       pageKey = 'pageY';
     }
-    let createFakeEvent = () => {
+    const createFakeEvent = () => {
       if (this._pageX == null && this._pageY == null) {
         return;
       }
       return {
-        pageX: this._pageX,
-        pageY: this._pageY,
-        clientX: this._pageX,
-        clientY: this._pageY
+        pageX: this._pageX ?? 0,
+        pageY: this._pageY ?? 0,
+        clientX: this._pageX ?? 0,
+        clientY: this._pageY ?? 0
       };
     };
 
     // Set a trigger padding that will start scrolling
     // the box when the item reaches within padding pixels
     // of the edge of the scroll container.
-    let checkScrollBounds = () => {
-      let leadingEdge = itemContainer[leadingEdgeKey];
-      let trailingEdge = itemContainer[trailingEdgeKey];
-      let scroll = scrollContainer[scrollKey]();
+    const checkScrollBounds = () => {
+      const leadingEdge = itemContainer[leadingEdgeKey];
+      const trailingEdge = itemContainer[trailingEdgeKey];
+      const scroll = scrollContainer[scrollKey]();
       let delta = 0;
       if (trailingEdge >= scrollContainer[trailingEdgeKey]) {
         delta = trailingEdge - scrollContainer[trailingEdgeKey];
@@ -470,10 +561,10 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
         delta = leadingEdge - scrollContainer[leadingEdgeKey];
       }
       if (delta !== 0) {
-        let speed = this.maxScrollSpeed;
+        const speed = this.maxScrollSpeed;
         delta = Math.min(Math.max(delta, -1 * speed), speed);
         delta = scrollContainer[scrollKey](scroll + delta) - scroll;
-        let event = createFakeEvent();
+        const event = createFakeEvent();
         if (event) {
           if (scrollContainer.isWindow) {
             event[pageKey] += delta;
@@ -501,7 +592,10 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     let dragOrigin;
     let elementOrigin;
     let scrollOrigin;
-    let parentElement = this.element.parentNode;
+    const parentElement = this.element.parentNode;
+    if (!parentElement) {
+      return () => {};
+    }
     if (groupDirection === 'grid') {
       this.startEvent = startEvent;
       const dragOriginX = getX(startEvent);
@@ -514,13 +608,13 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
       const scrollOriginY = parentElement.getBoundingClientRect().top;
       return event => {
         this._pageX = getX(event);
-        let dx = this._pageX - dragOriginX;
-        let scrollX = parentElement.getBoundingClientRect().left;
-        let x = elementOriginX + dx + (scrollOriginX - scrollX);
+        const dx = this._pageX - dragOriginX;
+        const scrollX = parentElement.getBoundingClientRect().left;
+        const x = elementOriginX + dx + (scrollOriginX - scrollX);
         this._pageY = getY(event);
-        let dy = this._pageY - dragOriginY;
-        let scrollY = parentElement.getBoundingClientRect().top;
-        let y = elementOriginY + dy + (scrollOriginY - scrollY);
+        const dy = this._pageY - dragOriginY;
+        const scrollY = parentElement.getBoundingClientRect().top;
+        const y = elementOriginY + dy + (scrollOriginY - scrollY);
         this._drag(x, y);
       };
     }
@@ -530,9 +624,9 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
       scrollOrigin = parentElement.getBoundingClientRect().left;
       return event => {
         this._pageX = getX(event);
-        let dx = this._pageX - dragOrigin;
-        let scrollX = parentElement.getBoundingClientRect().left;
-        let x = elementOrigin + dx + (scrollOrigin - scrollX);
+        const dx = this._pageX - dragOrigin;
+        const scrollX = parentElement.getBoundingClientRect().left;
+        const x = elementOrigin + dx + (scrollOrigin - scrollX);
         this._drag(x, 0);
       };
     }
@@ -542,12 +636,13 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
       scrollOrigin = parentElement.getBoundingClientRect().top;
       return event => {
         this._pageY = getY(event);
-        let dy = this._pageY - dragOrigin;
-        let scrollY = parentElement.getBoundingClientRect().top;
-        let y = elementOrigin + dy + (scrollOrigin - scrollY);
+        const dy = this._pageY - dragOrigin;
+        const scrollY = parentElement.getBoundingClientRect().top;
+        const y = elementOrigin + dy + (scrollOrigin - scrollY);
         this._drag(0, y);
       };
     }
+    return () => {};
   }
 
   /**
@@ -555,7 +650,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    @private
    */
   _scheduleApplyPosition() {
-    scheduleOnce('render', this, '_applyPosition');
+    scheduleOnce('render', this, this._applyPosition);
   }
 
   /**
@@ -568,20 +663,20 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     }
     const groupDirection = this.direction;
     if (groupDirection === 'grid') {
-      let x = this.x;
-      let dx = x - this.element.offsetLeft + parseFloat(getComputedStyle(this.element).marginLeft);
-      let y = this.y;
-      let dy = y - this.element.offsetTop;
+      const x = this.x;
+      const dx = x - this.element.offsetLeft + parseFloat(getComputedStyle(this.element).marginLeft);
+      const y = this.y;
+      const dy = y - this.element.offsetTop;
       this.element.style.transform = `translate(${dx}px, ${dy}px)`;
     }
     if (groupDirection === 'x') {
-      let x = this.x;
-      let dx = x - this.element.offsetLeft + parseFloat(getComputedStyle(this.element).marginLeft);
+      const x = this.x;
+      const dx = x - this.element.offsetLeft + parseFloat(getComputedStyle(this.element).marginLeft);
       this.element.style.transform = `translateX(${dx}px)`;
     }
     if (groupDirection === 'y') {
-      let y = this.y;
-      let dy = y - this.element.offsetTop;
+      const y = this.y;
+      const dy = y - this.element.offsetTop;
       this.element.style.transform = `translateY(${dy}px)`;
     }
   }
@@ -594,9 +689,11 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     if (!this.isDragging) {
       return;
     }
-    let updateInterval = this.updateInterval;
+    const updateInterval = this.updateInterval;
     this.x = dimensionX;
     this.y = dimensionY;
+
+    // @ts-expect-error Argument of type 'this' is not assignable to parameter of type 'AnyFn'.
     throttle(this, this.sortableGroup.update, updateInterval);
   }
 
@@ -608,7 +705,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     if (!this.element) {
       return;
     }
-    let transitionPromise = this._waitForTransition();
+    const transitionPromise = this._waitForTransition();
     this._preventClick();
 
     // Get sortableItems before making drop end and pass it to update function
@@ -618,7 +715,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     set(this, 'isDragging', false);
     set(this, 'isDropping', true);
     this.sortableGroup.update(sortedItems);
-    let allTransitionPromise = this._waitForAllTransitions();
+    const allTransitionPromise = this._waitForAllTransitions();
     Promise$1.all([transitionPromise, allTransitionPromise]).then(() => this._complete());
   }
 
@@ -687,7 +784,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     if (this.isAnimated) {
       const animations = this.sortableGroup.sortedItems.map(x => x.element.getAnimations());
       const animationPromises = animations.map(animation => {
-        return animation.finished;
+        return animation.every(x => x.finished);
       });
       transitionPromise = Promise$1.all(animationPromises);
     } else {
@@ -716,8 +813,8 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     if (!this.element) {
       return undefined;
     }
-    let el = this.element;
-    let transitionProperty = getComputedStyle(el).transitionProperty;
+    const el = this.element;
+    const transitionProperty = getComputedStyle(el).transitionProperty;
     return /all|transform/.test(transitionProperty) && this.transitionDuration > 0;
   }
 
@@ -728,12 +825,12 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    */
   get transitionDuration() {
     const items = this.sortableGroup.sortedItems.filter(x => !x.isDragging && !x.isDropping);
-    let el = items[0]?.element ?? this.element; // Fallback when only one element is present in list
-    let rule = getComputedStyle(el).transitionDuration;
-    let match = rule.match(/([\d.]+)([ms]*)/);
+    const el = items[0]?.element ?? this.element; // Fallback when only one element is present in list
+    const rule = getComputedStyle(el).transitionDuration;
+    const match = rule.match(/([\d.]+)([ms]*)/);
     if (match) {
-      let value = parseFloat(match[1]);
-      let unit = match[2];
+      let value = parseFloat(match[1] ?? '');
+      const unit = match[2];
       if (unit === 's') {
         value = value * 1000;
       }
@@ -749,7 +846,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    */
   get x() {
     if (this._x === undefined) {
-      let marginLeft = parseFloat(getComputedStyle(this.element).marginLeft);
+      const marginLeft = parseFloat(getComputedStyle(this.element).marginLeft);
       this._x = this.element.scrollLeft + this.element.offsetLeft - marginLeft;
     }
     return this._x;
@@ -785,9 +882,9 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    @type Number
    */
   get width() {
-    let el = this.element;
+    const el = this.element;
     let width = el.offsetWidth;
-    let elStyles = getComputedStyle(el);
+    const elStyles = getComputedStyle(el);
     width += parseInt(elStyles.marginLeft) + parseInt(elStyles.marginRight); // equal to jQuery.outerWidth(true)
 
     width += getBorderSpacing(el).horizontal;
@@ -800,9 +897,9 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
    @type Number
    */
   get height() {
-    let el = this.element;
+    const el = this.element;
     let height = el.offsetHeight;
-    let elStyles = getComputedStyle(el);
+    const elStyles = getComputedStyle(el);
 
     // This is needed atm only for grid, to fix jumping on drag-start.
     // In test-app it looks like there is a side-effect when we activate also for direction vertical.
@@ -830,23 +927,33 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     this.handleElement = this.element.querySelector(this.handle);
     const touchAction = disabled ? 'initial' : 'none';
     if (this.handleElement) {
-      this.handleElement.style['touch-action'] = touchAction;
+      this.handleElement.style['touchAction'] = touchAction;
     } else {
-      this.element.style['touch-action'] = touchAction;
+      this.element.style['touchAction'] = touchAction;
     }
   }
   constructor(owner, args) {
     super(owner, args);
     _defineProperty(this, "className", 'sortable-item');
     _initializerDefineProperty(this, "sortableService", _descriptor, this);
+    _defineProperty(this, "startEvent", void 0);
     _defineProperty(this, "_sortableGroup", void 0);
+    _defineProperty(this, "_x", void 0);
+    _defineProperty(this, "_y", void 0);
+    _defineProperty(this, "_dragOriginX", void 0);
+    _defineProperty(this, "_dragOriginY", void 0);
+    _defineProperty(this, "_pageX", void 0);
+    _defineProperty(this, "_pageY", void 0);
     _defineProperty(this, "handleElement", void 0);
     _defineProperty(this, "_isDragging", false);
     _defineProperty(this, "_isDropping", false);
     _defineProperty(this, "wasDropped", false);
+    _defineProperty(this, "_prepareDragListener", void 0);
+    _defineProperty(this, "_cancelStartDragListener", void 0);
     _defineProperty(this, "maxScrollSpeed", 20);
     _defineProperty(this, "element", void 0);
     _defineProperty(this, "didSetup", false);
+    _defineProperty(this, "named", void 0);
     /**
      * tracks if event listeners have been registered. Registering event handlers is unnecessary if item is disabled.
      */
@@ -862,7 +969,7 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
     // (doesn't work in Chrome 56), we set touch-action: none as a workaround.
     this.setupHandleElement(this.named.disabled);
     if (!this.didSetup) {
-      this.element.dataset.sortableItem = true;
+      this.element.dataset['sortableItem'] = 'true';
       this.sortableService.registerItem(this.groupName, this);
       this.didSetup = true;
     }
@@ -872,12 +979,12 @@ let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_cl
       this.addEventListener();
     }
   }
-}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "sortableService", [_dec], {
+}, _descriptor = _applyDecoratedDescriptor(_class.prototype, "sortableService", [_dec], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: null
-}), _applyDecoratedDescriptor(_class.prototype, "mouseDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "keyDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "keyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "touchStart", [action], Object.getOwnPropertyDescriptor(_class.prototype, "touchStart"), _class.prototype)), _class));
+}), _applyDecoratedDescriptor(_class.prototype, "mouseDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "keyDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "keyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "touchStart", [action], Object.getOwnPropertyDescriptor(_class.prototype, "touchStart"), _class.prototype), _class);
 /**
  *
  * @param {SortableItemModifier} instance