html5sortable - npm Package Compare versions

Comparing version 0.9.8 to 0.9.10

dist/html5sortable.amd.js

@@ -401,2 +401,8 @@ /*
 
+    /* eslint-env browser */
+    /**
+     * get handle or return item
+     * @param {Array<HTMLElement>} items
+     * @param {string} selector
+     */
     function _getHandles (items, selector) {
@@ -411,9 +417,14 @@ if (!(items instanceof Array)) {
             .filter(function (item) {
-            return item.querySelector(selector) instanceof HTMLElement;
+            return item.querySelector(selector) instanceof HTMLElement ||
+                (item.shadowRoot && item.shadowRoot.querySelector(selector) instanceof HTMLElement);
         })
             .map(function (item) {
-            return item.querySelector(selector);
+            return item.querySelector(selector) || (item.shadowRoot && item.shadowRoot.querySelector(selector));
         });
     }
 
+    function getEventTarget (event) {
+        return (event.composedPath && event.composedPath()[0]) || event.target;
+    }
+
     /**
@@ -459,3 +470,3 @@ * defaultDragImage returns the current item as dragged image
             // Firefox requires it to use the event target's id for the data
-            event.dataTransfer.setData('text/plain', event.target.id);
+            event.dataTransfer.setData('text/plain', getEventTarget(event).id);
             // set the drag image on the event
@@ -591,2 +602,5 @@ event.dataTransfer.setDragImage(dragImage.element, dragImage.posX, dragImage.posY);
     var originItemsBeforeUpdate;
+    // Previous Sortable Container - we dispatch as sortenter event when a
+    // dragged item enters a sortableContainer for the first time
+    var previousContainer;
     // Destination List - data from before any item was changed
@@ -646,4 +660,9 @@ var destinationItemsBeforeUpdate;
      * @param {HTMLElement} element a single sortable
+     * @param {Event} event - the current event. We need to pass it to be able to
+     * find Sortable whith shadowRoot (document fragment has no parent)
      */
-    function findSortable(element) {
+    function findSortable(element, event) {
+        if (event.composedPath) {
+            return event.composedPath().find(function (el) { return el.isSortable; });
+        }
         while (element.isSortable !== true) {
@@ -664,3 +683,3 @@ element = element.parentElement;
         var itemlist = items.filter(function (ele) {
-            return ele.contains(element);
+            return ele.contains(element) || (ele.shadowRoot && ele.shadowRoot.contains(element));
         });
@@ -802,3 +821,8 @@ return itemlist.length > 0 ? itemlist[0] : element;
                 var tempContainer = document.createElement(sortableElement.tagName);
-                tempContainer.innerHTML = options.placeholder;
+                if (options.placeholder instanceof HTMLElement) {
+                    tempContainer.appendChild(options.placeholder);
+                }
+                else {
+                    tempContainer.innerHTML = options.placeholder;
+                }
                 customPlaceholder = tempContainer.children[0];
@@ -827,11 +851,12 @@ }
                 // ignore dragstart events
-                if (e.target.isSortable === true) {
+                var target = getEventTarget(e);
+                if (target.isSortable === true) {
                     return;
                 }
                 e.stopImmediatePropagation();
-                if ((options.handle && !e.target.matches(options.handle)) || e.target.getAttribute('draggable') === 'false') {
+                if ((options.handle && !target.matches(options.handle)) || target.getAttribute('draggable') === 'false') {
                     return;
                 }
-                var sortableContainer = findSortable(e.target);
-                var dragItem = findDragElement(sortableContainer, e.target);
+                var sortableContainer = findSortable(target, e);
+                var dragItem = findDragElement(sortableContainer, target);
                 // grab values
@@ -857,3 +882,4 @@ originItemsBeforeUpdate = _filter(sortableContainer.children, options.items);
                         },
-                        item: dragging
+                        item: dragging,
+                        originalTarget: target
                     }
@@ -866,8 +892,24 @@ }));
             addEventListener(sortableElement, 'dragenter', function (e) {
-                if (e.target.isSortable === true) {
-                    return;
+                var target = getEventTarget(e);
+                var sortableContainer = findSortable(target, e);
+                if (sortableContainer && sortableContainer !== previousContainer) {
+                    destinationItemsBeforeUpdate = _filter(sortableContainer.children, addData(sortableContainer, 'items'))
+                        .filter(function (item) { return item !== store(sortableElement).placeholder; });
+                    sortableContainer.dispatchEvent(new CustomEvent('sortenter', {
+                        detail: {
+                            origin: {
+                                elementIndex: originElementIndex,
+                                index: originIndex,
+                                container: originContainer
+                            },
+                            destination: {
+                                container: sortableContainer,
+                                itemsBeforeUpdate: destinationItemsBeforeUpdate
+                            },
+                            item: dragging,
+                            originalTarget: target
+                        }
+                    }));
                 }
-                var sortableContainer = findSortable(e.target);
-                destinationItemsBeforeUpdate = _filter(sortableContainer.children, addData(sortableContainer, 'items'))
-                    .filter(function (item) { return item !== store(sortableElement).placeholder; });
+                previousContainer = sortableContainer;
             });
@@ -907,2 +949,3 @@ /*
                 }));
+                previousContainer = null;
                 dragging = null;
@@ -1056,3 +1099,3 @@ draggingHeight = null;
                 var element = e.target;
-                var sortableElement = element.isSortable === true ? element : findSortable(element);
+                var sortableElement = element.isSortable === true ? element : findSortable(element, e);
                 element = findDragElement(sortableElement, element);
@@ -1059,0 +1102,0 @@ if (!dragging || !_listsConnected(sortableElement, dragging.parentElement) || addData(sortableElement, '_disabled') === 'true') {

dist/html5sortable.cjs.js

@@ -401,2 +401,8 @@ /*
 
+/* eslint-env browser */
+/**
+ * get handle or return item
+ * @param {Array<HTMLElement>} items
+ * @param {string} selector
+ */
 function _getHandles (items, selector) {
@@ -411,9 +417,14 @@ if (!(items instanceof Array)) {
         .filter(function (item) {
-        return item.querySelector(selector) instanceof HTMLElement;
+        return item.querySelector(selector) instanceof HTMLElement ||
+            (item.shadowRoot && item.shadowRoot.querySelector(selector) instanceof HTMLElement);
     })
         .map(function (item) {
-        return item.querySelector(selector);
+        return item.querySelector(selector) || (item.shadowRoot && item.shadowRoot.querySelector(selector));
     });
 }
 
+function getEventTarget (event) {
+    return (event.composedPath && event.composedPath()[0]) || event.target;
+}
+
 /**
@@ -459,3 +470,3 @@ * defaultDragImage returns the current item as dragged image
         // Firefox requires it to use the event target's id for the data
-        event.dataTransfer.setData('text/plain', event.target.id);
+        event.dataTransfer.setData('text/plain', getEventTarget(event).id);
         // set the drag image on the event
@@ -591,2 +602,5 @@ event.dataTransfer.setDragImage(dragImage.element, dragImage.posX, dragImage.posY);
 var originItemsBeforeUpdate;
+// Previous Sortable Container - we dispatch as sortenter event when a
+// dragged item enters a sortableContainer for the first time
+var previousContainer;
 // Destination List - data from before any item was changed
@@ -646,4 +660,9 @@ var destinationItemsBeforeUpdate;
  * @param {HTMLElement} element a single sortable
+ * @param {Event} event - the current event. We need to pass it to be able to
+ * find Sortable whith shadowRoot (document fragment has no parent)
  */
-function findSortable(element) {
+function findSortable(element, event) {
+    if (event.composedPath) {
+        return event.composedPath().find(function (el) { return el.isSortable; });
+    }
     while (element.isSortable !== true) {
@@ -664,3 +683,3 @@ element = element.parentElement;
     var itemlist = items.filter(function (ele) {
-        return ele.contains(element);
+        return ele.contains(element) || (ele.shadowRoot && ele.shadowRoot.contains(element));
     });
@@ -802,3 +821,8 @@ return itemlist.length > 0 ? itemlist[0] : element;
             var tempContainer = document.createElement(sortableElement.tagName);
-            tempContainer.innerHTML = options.placeholder;
+            if (options.placeholder instanceof HTMLElement) {
+                tempContainer.appendChild(options.placeholder);
+            }
+            else {
+                tempContainer.innerHTML = options.placeholder;
+            }
             customPlaceholder = tempContainer.children[0];
@@ -827,11 +851,12 @@ }
             // ignore dragstart events
-            if (e.target.isSortable === true) {
+            var target = getEventTarget(e);
+            if (target.isSortable === true) {
                 return;
             }
             e.stopImmediatePropagation();
-            if ((options.handle && !e.target.matches(options.handle)) || e.target.getAttribute('draggable') === 'false') {
+            if ((options.handle && !target.matches(options.handle)) || target.getAttribute('draggable') === 'false') {
                 return;
             }
-            var sortableContainer = findSortable(e.target);
-            var dragItem = findDragElement(sortableContainer, e.target);
+            var sortableContainer = findSortable(target, e);
+            var dragItem = findDragElement(sortableContainer, target);
             // grab values
@@ -857,3 +882,4 @@ originItemsBeforeUpdate = _filter(sortableContainer.children, options.items);
                     },
-                    item: dragging
+                    item: dragging,
+                    originalTarget: target
                 }
@@ -866,8 +892,24 @@ }));
         addEventListener(sortableElement, 'dragenter', function (e) {
-            if (e.target.isSortable === true) {
-                return;
+            var target = getEventTarget(e);
+            var sortableContainer = findSortable(target, e);
+            if (sortableContainer && sortableContainer !== previousContainer) {
+                destinationItemsBeforeUpdate = _filter(sortableContainer.children, addData(sortableContainer, 'items'))
+                    .filter(function (item) { return item !== store(sortableElement).placeholder; });
+                sortableContainer.dispatchEvent(new CustomEvent('sortenter', {
+                    detail: {
+                        origin: {
+                            elementIndex: originElementIndex,
+                            index: originIndex,
+                            container: originContainer
+                        },
+                        destination: {
+                            container: sortableContainer,
+                            itemsBeforeUpdate: destinationItemsBeforeUpdate
+                        },
+                        item: dragging,
+                        originalTarget: target
+                    }
+                }));
             }
-            var sortableContainer = findSortable(e.target);
-            destinationItemsBeforeUpdate = _filter(sortableContainer.children, addData(sortableContainer, 'items'))
-                .filter(function (item) { return item !== store(sortableElement).placeholder; });
+            previousContainer = sortableContainer;
         });
@@ -907,2 +949,3 @@ /*
             }));
+            previousContainer = null;
             dragging = null;
@@ -1056,3 +1099,3 @@ draggingHeight = null;
             var element = e.target;
-            var sortableElement = element.isSortable === true ? element : findSortable(element);
+            var sortableElement = element.isSortable === true ? element : findSortable(element, e);
             element = findDragElement(sortableElement, element);
@@ -1059,0 +1102,0 @@ if (!dragging || !_listsConnected(sortableElement, dragging.parentElement) || addData(sortableElement, '_disabled') === 'true') {

dist/html5sortable.es.js

@@ -399,2 +399,8 @@ /*
 
+/* eslint-env browser */
+/**
+ * get handle or return item
+ * @param {Array<HTMLElement>} items
+ * @param {string} selector
+ */
 function _getHandles (items, selector) {
@@ -409,9 +415,14 @@ if (!(items instanceof Array)) {
         .filter(function (item) {
-        return item.querySelector(selector) instanceof HTMLElement;
+        return item.querySelector(selector) instanceof HTMLElement ||
+            (item.shadowRoot && item.shadowRoot.querySelector(selector) instanceof HTMLElement);
     })
         .map(function (item) {
-        return item.querySelector(selector);
+        return item.querySelector(selector) || (item.shadowRoot && item.shadowRoot.querySelector(selector));
     });
 }
 
+function getEventTarget (event) {
+    return (event.composedPath && event.composedPath()[0]) || event.target;
+}
+
 /**
@@ -457,3 +468,3 @@ * defaultDragImage returns the current item as dragged image
         // Firefox requires it to use the event target's id for the data
-        event.dataTransfer.setData('text/plain', event.target.id);
+        event.dataTransfer.setData('text/plain', getEventTarget(event).id);
         // set the drag image on the event
@@ -589,2 +600,5 @@ event.dataTransfer.setDragImage(dragImage.element, dragImage.posX, dragImage.posY);
 var originItemsBeforeUpdate;
+// Previous Sortable Container - we dispatch as sortenter event when a
+// dragged item enters a sortableContainer for the first time
+var previousContainer;
 // Destination List - data from before any item was changed
@@ -644,4 +658,9 @@ var destinationItemsBeforeUpdate;
  * @param {HTMLElement} element a single sortable
+ * @param {Event} event - the current event. We need to pass it to be able to
+ * find Sortable whith shadowRoot (document fragment has no parent)
  */
-function findSortable(element) {
+function findSortable(element, event) {
+    if (event.composedPath) {
+        return event.composedPath().find(function (el) { return el.isSortable; });
+    }
     while (element.isSortable !== true) {
@@ -662,3 +681,3 @@ element = element.parentElement;
     var itemlist = items.filter(function (ele) {
-        return ele.contains(element);
+        return ele.contains(element) || (ele.shadowRoot && ele.shadowRoot.contains(element));
     });
@@ -800,3 +819,8 @@ return itemlist.length > 0 ? itemlist[0] : element;
             var tempContainer = document.createElement(sortableElement.tagName);
-            tempContainer.innerHTML = options.placeholder;
+            if (options.placeholder instanceof HTMLElement) {
+                tempContainer.appendChild(options.placeholder);
+            }
+            else {
+                tempContainer.innerHTML = options.placeholder;
+            }
             customPlaceholder = tempContainer.children[0];
@@ -825,11 +849,12 @@ }
             // ignore dragstart events
-            if (e.target.isSortable === true) {
+            var target = getEventTarget(e);
+            if (target.isSortable === true) {
                 return;
             }
             e.stopImmediatePropagation();
-            if ((options.handle && !e.target.matches(options.handle)) || e.target.getAttribute('draggable') === 'false') {
+            if ((options.handle && !target.matches(options.handle)) || target.getAttribute('draggable') === 'false') {
                 return;
             }
-            var sortableContainer = findSortable(e.target);
-            var dragItem = findDragElement(sortableContainer, e.target);
+            var sortableContainer = findSortable(target, e);
+            var dragItem = findDragElement(sortableContainer, target);
             // grab values
@@ -855,3 +880,4 @@ originItemsBeforeUpdate = _filter(sortableContainer.children, options.items);
                     },
-                    item: dragging
+                    item: dragging,
+                    originalTarget: target
                 }
@@ -864,8 +890,24 @@ }));
         addEventListener(sortableElement, 'dragenter', function (e) {
-            if (e.target.isSortable === true) {
-                return;
+            var target = getEventTarget(e);
+            var sortableContainer = findSortable(target, e);
+            if (sortableContainer && sortableContainer !== previousContainer) {
+                destinationItemsBeforeUpdate = _filter(sortableContainer.children, addData(sortableContainer, 'items'))
+                    .filter(function (item) { return item !== store(sortableElement).placeholder; });
+                sortableContainer.dispatchEvent(new CustomEvent('sortenter', {
+                    detail: {
+                        origin: {
+                            elementIndex: originElementIndex,
+                            index: originIndex,
+                            container: originContainer
+                        },
+                        destination: {
+                            container: sortableContainer,
+                            itemsBeforeUpdate: destinationItemsBeforeUpdate
+                        },
+                        item: dragging,
+                        originalTarget: target
+                    }
+                }));
             }
-            var sortableContainer = findSortable(e.target);
-            destinationItemsBeforeUpdate = _filter(sortableContainer.children, addData(sortableContainer, 'items'))
-                .filter(function (item) { return item !== store(sortableElement).placeholder; });
+            previousContainer = sortableContainer;
         });
@@ -905,2 +947,3 @@ /*
             }));
+            previousContainer = null;
             dragging = null;
@@ -1054,3 +1097,3 @@ draggingHeight = null;
             var element = e.target;
-            var sortableElement = element.isSortable === true ? element : findSortable(element);
+            var sortableElement = element.isSortable === true ? element : findSortable(element, e);
             element = findDragElement(sortableElement, element);
@@ -1057,0 +1100,0 @@ if (!dragging || !_listsConnected(sortableElement, dragging.parentElement) || addData(sortableElement, '_disabled') === 'true') {

dist/html5sortable.js

@@ -402,2 +402,8 @@ /*
 
+    /* eslint-env browser */
+    /**
+     * get handle or return item
+     * @param {Array<HTMLElement>} items
+     * @param {string} selector
+     */
     function _getHandles (items, selector) {
@@ -412,9 +418,14 @@ if (!(items instanceof Array)) {
             .filter(function (item) {
-            return item.querySelector(selector) instanceof HTMLElement;
+            return item.querySelector(selector) instanceof HTMLElement ||
+                (item.shadowRoot && item.shadowRoot.querySelector(selector) instanceof HTMLElement);
         })
             .map(function (item) {
-            return item.querySelector(selector);
+            return item.querySelector(selector) || (item.shadowRoot && item.shadowRoot.querySelector(selector));
         });
     }
 
+    function getEventTarget (event) {
+        return (event.composedPath && event.composedPath()[0]) || event.target;
+    }
+
     /**
@@ -460,3 +471,3 @@ * defaultDragImage returns the current item as dragged image
             // Firefox requires it to use the event target's id for the data
-            event.dataTransfer.setData('text/plain', event.target.id);
+            event.dataTransfer.setData('text/plain', getEventTarget(event).id);
             // set the drag image on the event
@@ -592,2 +603,5 @@ event.dataTransfer.setDragImage(dragImage.element, dragImage.posX, dragImage.posY);
     var originItemsBeforeUpdate;
+    // Previous Sortable Container - we dispatch as sortenter event when a
+    // dragged item enters a sortableContainer for the first time
+    var previousContainer;
     // Destination List - data from before any item was changed
@@ -647,4 +661,9 @@ var destinationItemsBeforeUpdate;
      * @param {HTMLElement} element a single sortable
+     * @param {Event} event - the current event. We need to pass it to be able to
+     * find Sortable whith shadowRoot (document fragment has no parent)
      */
-    function findSortable(element) {
+    function findSortable(element, event) {
+        if (event.composedPath) {
+            return event.composedPath().find(function (el) { return el.isSortable; });
+        }
         while (element.isSortable !== true) {
@@ -665,3 +684,3 @@ element = element.parentElement;
         var itemlist = items.filter(function (ele) {
-            return ele.contains(element);
+            return ele.contains(element) || (ele.shadowRoot && ele.shadowRoot.contains(element));
         });
@@ -803,3 +822,8 @@ return itemlist.length > 0 ? itemlist[0] : element;
                 var tempContainer = document.createElement(sortableElement.tagName);
-                tempContainer.innerHTML = options.placeholder;
+                if (options.placeholder instanceof HTMLElement) {
+                    tempContainer.appendChild(options.placeholder);
+                }
+                else {
+                    tempContainer.innerHTML = options.placeholder;
+                }
                 customPlaceholder = tempContainer.children[0];
@@ -828,11 +852,12 @@ }
                 // ignore dragstart events
-                if (e.target.isSortable === true) {
+                var target = getEventTarget(e);
+                if (target.isSortable === true) {
                     return;
                 }
                 e.stopImmediatePropagation();
-                if ((options.handle && !e.target.matches(options.handle)) || e.target.getAttribute('draggable') === 'false') {
+                if ((options.handle && !target.matches(options.handle)) || target.getAttribute('draggable') === 'false') {
                     return;
                 }
-                var sortableContainer = findSortable(e.target);
-                var dragItem = findDragElement(sortableContainer, e.target);
+                var sortableContainer = findSortable(target, e);
+                var dragItem = findDragElement(sortableContainer, target);
                 // grab values
@@ -858,3 +883,4 @@ originItemsBeforeUpdate = _filter(sortableContainer.children, options.items);
                         },
-                        item: dragging
+                        item: dragging,
+                        originalTarget: target
                     }
@@ -867,8 +893,24 @@ }));
             addEventListener(sortableElement, 'dragenter', function (e) {
-                if (e.target.isSortable === true) {
-                    return;
+                var target = getEventTarget(e);
+                var sortableContainer = findSortable(target, e);
+                if (sortableContainer && sortableContainer !== previousContainer) {
+                    destinationItemsBeforeUpdate = _filter(sortableContainer.children, addData(sortableContainer, 'items'))
+                        .filter(function (item) { return item !== store(sortableElement).placeholder; });
+                    sortableContainer.dispatchEvent(new CustomEvent('sortenter', {
+                        detail: {
+                            origin: {
+                                elementIndex: originElementIndex,
+                                index: originIndex,
+                                container: originContainer
+                            },
+                            destination: {
+                                container: sortableContainer,
+                                itemsBeforeUpdate: destinationItemsBeforeUpdate
+                            },
+                            item: dragging,
+                            originalTarget: target
+                        }
+                    }));
                 }
-                var sortableContainer = findSortable(e.target);
-                destinationItemsBeforeUpdate = _filter(sortableContainer.children, addData(sortableContainer, 'items'))
-                    .filter(function (item) { return item !== store(sortableElement).placeholder; });
+                previousContainer = sortableContainer;
             });
@@ -908,2 +950,3 @@ /*
                 }));
+                previousContainer = null;
                 dragging = null;
@@ -1057,3 +1100,3 @@ draggingHeight = null;
                 var element = e.target;
-                var sortableElement = element.isSortable === true ? element : findSortable(element);
+                var sortableElement = element.isSortable === true ? element : findSortable(element, e);
                 element = findDragElement(sortableElement, element);
@@ -1060,0 +1103,0 @@ if (!dragging || !_listsConnected(sortableElement, dragging.parentElement) || addData(sortableElement, '_disabled') === 'true') {

dist/html5sortable.min.js

@@ -1,2 +0,2 @@
-var sortable=function(){"use strict";function d(e,t,n){if(void 0===n)return e&&e.h5s&&e.h5s.data&&e.h5s.data[t];e.h5s=e.h5s||{},e.h5s.data=e.h5s.data||{},e.h5s.data[t]=n}function u(e,t){if(!(e instanceof NodeList||e instanceof HTMLCollection||e instanceof Array))throw new Error("You must provide a nodeList/HTMLCollection/Array of elements to be filtered.");return"string"!=typeof t?Array.from(e):Array.from(e).filter(function(e){return 1===e.nodeType&&e.matches(t)})}var p=new Map,t=function(){function e(){this._config=new Map,this._placeholder=void 0,this._data=new Map}return Object.defineProperty(e.prototype,"config",{get:function(){var n={};return this._config.forEach(function(e,t){n[t]=e}),n},set:function(e){if("object"!=typeof e)throw new Error("You must provide a valid configuration object to the config setter.");var t=Object.assign({},e);this._config=new Map(Object.entries(t))},enumerable:!0,configurable:!0}),e.prototype.setConfig=function(e,t){if(!this._config.has(e))throw new Error("Trying to set invalid configuration item: "+e);this._config.set(e,t)},e.prototype.getConfig=function(e){if(!this._config.has(e))throw new Error("Invalid configuration item requested: "+e);return this._config.get(e)},Object.defineProperty(e.prototype,"placeholder",{get:function(){return this._placeholder},set:function(e){if(!(e instanceof HTMLElement)&&null!==e)throw new Error("A placeholder must be an html element or null.");this._placeholder=e},enumerable:!0,configurable:!0}),e.prototype.setData=function(e,t){if("string"!=typeof e)throw new Error("The key must be a string.");this._data.set(e,t)},e.prototype.getData=function(e){if("string"!=typeof e)throw new Error("The key must be a string.");return this._data.get(e)},e.prototype.deleteData=function(e){if("string"!=typeof e)throw new Error("The key must be a string.");return this._data.delete(e)},e}();function m(e){if(!(e instanceof HTMLElement))throw new Error("Please provide a sortable to the store function.");return p.has(e)||p.set(e,new t),p.get(e)}function g(e,t,n){if(e instanceof Array)for(var r=0;r<e.length;++r)g(e[r],t,n);else e.addEventListener(t,n),m(e).setData("event"+t,n)}function l(e,t){if(e instanceof Array)for(var n=0;n<e.length;++n)l(e[n],t);else e.removeEventListener(t,m(e).getData("event"+t)),m(e).deleteData("event"+t)}function h(e,t,n){if(e instanceof Array)for(var r=0;r<e.length;++r)h(e[r],t,n);else e.setAttribute(t,n)}function s(e,t){if(e instanceof Array)for(var n=0;n<e.length;++n)s(e[n],t);else e.removeAttribute(t)}function v(e){if(!e.parentElement||0===e.getClientRects().length)throw new Error("target element must be part of the dom");var t=e.getClientRects()[0];return{left:t.left+window.pageXOffset,right:t.right+window.pageXOffset,top:t.top+window.pageYOffset,bottom:t.bottom+window.pageYOffset}}function y(e,t){if(!(e instanceof HTMLElement&&(t instanceof NodeList||t instanceof HTMLCollection||t instanceof Array)))throw new Error("You must provide an element and a list of elements.");return Array.from(t).indexOf(e)}function E(e){if(!(e instanceof HTMLElement))throw new Error("Element is not a node element.");return null!==e.parentNode}var n=function(e,t,n){if(!(e instanceof HTMLElement&&e.parentElement instanceof HTMLElement))throw new Error("target and element must be a node");e.parentElement.insertBefore(t,"before"===n?e:e.nextElementSibling)},w=function(e,t){return n(e,t,"before")},b=function(e,t){return n(e,t,"after")};function T(e){if(!(e instanceof HTMLElement))throw new Error("You must provide a valid dom element");var n=window.getComputedStyle(e);return["height","padding-top","padding-bottom"].map(function(e){var t=parseInt(n.getPropertyValue(e),10);return isNaN(t)?0:t}).reduce(function(e,t){return e+t})}function f(e,t){if(!(e instanceof Array))throw new Error("You must provide a Array of HTMLElements to be filtered.");return"string"!=typeof t?e:e.filter(function(e){return e.querySelector(t)instanceof HTMLElement}).map(function(e){return e.querySelector(t)})}var L=function(e,t,n){return{element:e,posX:n.pageX-t.left,posY:n.pageY-t.top}};function C(e,t){if(!0===e.isSortable){var n=m(e).getConfig("acceptFrom");if(null!==n&&!1!==n&&"string"!=typeof n)throw new Error('HTML5Sortable: Wrong argument, "acceptFrom" must be "null", "false", or a valid selector string.');if(null!==n)return!1!==n&&0<n.split(",").filter(function(e){return 0<e.length&&t.matches(e)}).length;if(e===t)return!0;if(void 0!==m(e).getConfig("connectWith")&&null!==m(e).getConfig("connectWith"))return m(e).getConfig("connectWith")===m(t).getConfig("connectWith")}return!1}var M,A,D,x,H,I,S,Y={items:null,connectWith:null,disableIEFix:null,acceptFrom:null,copy:!1,placeholder:null,placeholderClass:"sortable-placeholder",draggingClass:"sortable-dragging",hoverClass:!1,debounce:0,throttleTime:100,maxItems:0,itemSerializer:void 0,containerSerializer:void 0,customDragImage:null};function O(e,t){if("string"==typeof m(e).getConfig("hoverClass")){var o=m(e).getConfig("hoverClass").split(" ");!0===t?(g(e,"mousemove",function(r,o){var i=this;if(void 0===o&&(o=250),"function"!=typeof r)throw new Error("You must provide a function as the first argument for throttle.");if("number"!=typeof o)throw new Error("You must provide a number as the second argument for throttle.");var a=null;return function(){for(var e=[],t=0;t<arguments.length;t++)e[t-0]=arguments[t];var n=Date.now();(null===a||o<=n-a)&&(a=n,r.apply(i,e))}}(function(r){0===r.buttons&&u(e.children,m(e).getConfig("items")).forEach(function(e){var t,n;e!==r.target?(t=e.classList).remove.apply(t,o):(n=e.classList).add.apply(n,o)})},m(e).getConfig("throttleTime"))),g(e,"mouseleave",function(){u(e.children,m(e).getConfig("items")).forEach(function(e){var t;(t=e.classList).remove.apply(t,o)})})):(l(e,"mousemove"),l(e,"mouseleave"))}}var c=function(e){l(e,"dragstart"),l(e,"dragend"),l(e,"dragover"),l(e,"dragenter"),l(e,"drop"),l(e,"mouseenter"),l(e,"mouseleave")},_=function(e,t){var n=e;return!0===m(t).getConfig("copy")&&(h(n=e.cloneNode(!0),"aria-copied","true"),e.parentElement.appendChild(n),n.style.display="none",n.oldDisplay=e.style.display),n};function W(e){for(;!0!==e.isSortable;)e=e.parentElement;return e}function F(e,t){var n=d(e,"opts"),r=u(e.children,n.items).filter(function(e){return e.contains(t)});return 0<r.length?r[0]:t}var r=function(e){var t,n,r,o=d(e,"opts")||{},i=u(e.children,o.items),a=f(i,o.handle);l(e,"dragover"),l(e,"dragenter"),l(e,"drop"),(n=t=e).h5s&&delete n.h5s.data,s(t,"aria-dropeffect"),l(a,"mousedown"),c(i),s(r=i,"aria-grabbed"),s(r,"aria-copied"),s(r,"draggable"),s(r,"role")},N=function(e){var t=d(e,"opts"),n=u(e.children,t.items),r=f(n,t.handle);(h(e,"aria-dropeffect","move"),d(e,"_disabled","false"),h(r,"draggable","true"),!1===t.disableIEFix)&&("function"==typeof(document||window.document).createElement("span").dragDrop&&g(r,"mousedown",function(){if(-1!==n.indexOf(this))this.dragDrop();else{for(var e=this.parentElement;-1===n.indexOf(e);)e=e.parentElement;e.dragDrop()}}))},P=function(e){var t=d(e,"opts"),n=u(e.children,t.items),r=f(n,t.handle);d(e,"_disabled","false"),c(n),l(r,"mousedown"),l(e,"dragover"),l(e,"dragenter"),l(e,"drop")};function j(e,c){var f=String(c);return c=c||{},"string"==typeof e&&(e=document.querySelectorAll(e)),e instanceof HTMLElement&&(e=[e]),e=Array.prototype.slice.call(e),/serialize/.test(f)?e.map(function(e){var t=d(e,"opts");return function(t,n,e){if(void 0===n&&(n=function(e,t){return e}),void 0===e&&(e=function(e){return e}),!(t instanceof HTMLElement)||1==!t.isSortable)throw new Error("You need to provide a sortableContainer to be serialized.");if("function"!=typeof n||"function"!=typeof e)throw new Error("You need to provide a valid serializer for items and the container.");var r=d(t,"opts").items,o=u(t.children,r),i=o.map(function(e){return{parent:t,node:e,html:e.outerHTML,index:y(e,o)}});return{container:e({node:t,itemCount:i.length}),items:i.map(function(e){return n(e,t)})}}(e,t.itemSerializer,t.containerSerializer)}):(e.forEach(function(s){if(/enable|disable|destroy/.test(f))return j[f](s);["connectWith","disableIEFix"].forEach(function(e){c.hasOwnProperty(e)&&null!==c[e]&&console.warn('HTML5Sortable: You are using the deprecated configuration "'+e+'". This will be removed in an upcoming version, make sure to migrate to the new options when updating.')}),c=Object.assign({},Y,m(s).config,c),m(s).config=c,d(s,"opts",c),s.isSortable=!0,P(s);var e,t=u(s.children,c.items);if(null!==c.placeholder&&void 0!==c.placeholder){var n=document.createElement(s.tagName);n.innerHTML=c.placeholder,e=n.children[0]}m(s).placeholder=function(e,t,n){if(void 0===n&&(n="sortable-placeholder"),!(e instanceof HTMLElement))throw new Error("You must provide a valid element as a sortable.");if(!(t instanceof HTMLElement)&&void 0!==t)throw new Error("You must provide a valid element as a placeholder or set ot to undefined.");return void 0===t&&(["UL","OL"].includes(e.tagName)?t=document.createElement("li"):["TABLE","TBODY"].includes(e.tagName)?(t=document.createElement("tr")).innerHTML='<td colspan="100"></td>':t=document.createElement("div")),"string"==typeof n&&(r=t.classList).add.apply(r,n.split(" ")),t;var r}(s,e,c.placeholderClass),d(s,"items",c.items),c.acceptFrom?d(s,"acceptFrom",c.acceptFrom):c.connectWith&&d(s,"connectWith",c.connectWith),N(s),h(t,"role","option"),h(t,"aria-grabbed","false"),O(s,!0),g(s,"dragstart",function(e){if(!0!==e.target.isSortable&&(e.stopImmediatePropagation(),(!c.handle||e.target.matches(c.handle))&&"false"!==e.target.getAttribute("draggable"))){var t=W(e.target),n=F(t,e.target);I=u(t.children,c.items),x=I.indexOf(n),H=y(n,t.children),D=t,function(e,t,n){if(!(e instanceof Event))throw new Error("setDragImage requires a DragEvent as the first argument.");if(!(t instanceof HTMLElement))throw new Error("setDragImage requires the dragged element as the second argument.");if(n||(n=L),e.dataTransfer&&e.dataTransfer.setDragImage){var r=n(t,v(t),e);if(!(r.element instanceof HTMLElement)||"number"!=typeof r.posX||"number"!=typeof r.posY)throw new Error("The customDragImage function you provided must return and object with the properties element[string], posX[integer], posY[integer].");e.dataTransfer.effectAllowed="copyMove",e.dataTransfer.setData("text/plain",e.target.id),e.dataTransfer.setDragImage(r.element,r.posX,r.posY)}}(e,n,c.customDragImage),A=T(n),n.classList.add(c.draggingClass),h(M=_(n,t),"aria-grabbed","true"),t.dispatchEvent(new CustomEvent("sortstart",{detail:{origin:{elementIndex:H,index:x,container:D},item:M}}))}}),g(s,"dragenter",function(e){if(!0!==e.target.isSortable){var t=W(e.target);S=u(t.children,d(t,"items")).filter(function(e){return e!==m(s).placeholder})}}),g(s,"dragend",function(e){if(M){M.classList.remove(c.draggingClass),h(M,"aria-grabbed","false"),"true"===M.getAttribute("aria-copied")&&"true"!==d(M,"dropped")&&M.remove(),M.style.display=M.oldDisplay,delete M.oldDisplay;var t=Array.from(p.values()).map(function(e){return e.placeholder}).filter(function(e){return e instanceof HTMLElement}).filter(E)[0];t&&t.remove(),s.dispatchEvent(new CustomEvent("sortstop",{detail:{origin:{elementIndex:H,index:x,container:D},item:M}})),A=M=null}}),g(s,"drop",function(e){if(C(s,M.parentElement)){e.preventDefault(),e.stopPropagation(),d(M,"dropped","true");var t=Array.from(p.values()).map(function(e){return e.placeholder}).filter(function(e){return e instanceof HTMLElement}).filter(E)[0];b(t,M),t.remove(),s.dispatchEvent(new CustomEvent("sortstop",{detail:{origin:{elementIndex:H,index:x,container:D},item:M}}));var n=m(s).placeholder,r=u(D.children,c.items).filter(function(e){return e!==n}),o=!0===this.isSortable?this:this.parentElement,i=u(o.children,d(o,"items")).filter(function(e){return e!==n}),a=y(M,Array.from(M.parentElement.children).filter(function(e){return e!==n})),l=y(M,i);H===a&&D===o||s.dispatchEvent(new CustomEvent("sortupdate",{detail:{origin:{elementIndex:H,index:x,container:D,itemsBeforeUpdate:I,items:r},destination:{index:l,elementIndex:a,container:o,itemsBeforeUpdate:S,items:i},item:M}}))}});var r,o,i,a=(r=function(t,e,n){if(M)if(c.forcePlaceholderSize&&(m(t).placeholder.style.height=A+"px"),-1<Array.from(t.children).indexOf(e)){var r=T(e),o=y(m(t).placeholder,e.parentElement.children),i=y(e,e.parentElement.children);if(A<r){var a=r-A,l=v(e).top;if(o<i&&n<l)return;if(i<o&&l+r-a<n)return}void 0===M.oldDisplay&&(M.oldDisplay=M.style.display),"none"!==M.style.display&&(M.style.display="none");var s=!1;try{s=v(e).top+e.offsetHeight/2<=n}catch(e){s=o<i}s?b(e,m(t).placeholder):w(e,m(t).placeholder),Array.from(p.values()).filter(function(e){return void 0!==e.placeholder}).forEach(function(e){e.placeholder!==m(t).placeholder&&e.placeholder.remove()})}else{var f=Array.from(p.values()).filter(function(e){return void 0!==e.placeholder}).map(function(e){return e.placeholder});-1!==f.indexOf(e)||t!==e||u(e.children,c.items).length||(f.forEach(function(e){return e.remove()}),e.appendChild(m(t).placeholder))}},void 0===(o=c.debounce)&&(o=0),function(){for(var e=[],t=0;t<arguments.length;t++)e[t-0]=arguments[t];clearTimeout(i),i=setTimeout(function(){r.apply(void 0,e)},o)}),l=function(e){var t=e.target,n=!0===t.isSortable?t:W(t);if(t=F(n,t),M&&C(n,M.parentElement)&&"true"!==d(n,"_disabled")){var r=d(n,"opts");parseInt(r.maxItems)&&u(n.children,d(n,"items")).length>=parseInt(r.maxItems)&&M.parentElement!==n||(e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect=!0===m(n).getConfig("copy")?"copy":"move",a(n,t,e.pageY))}};g(t.concat(s),"dragover",l),g(t.concat(s),"dragenter",l)}),e)}return j.destroy=function(e){r(e)},j.enable=function(e){N(e)},j.disable=function(e){var t,n,r;n=d(t=e,"opts"),r=f(u(t.children,n.items),n.handle),h(t,"aria-dropeffect","none"),d(t,"_disabled","true"),h(r,"draggable","false"),l(r,"mousedown")},j}();
+var sortable=function(){"use strict";function d(e,t,n){if(void 0===n)return e&&e.h5s&&e.h5s.data&&e.h5s.data[t];e.h5s=e.h5s||{},e.h5s.data=e.h5s.data||{},e.h5s.data[t]=n}function u(e,t){if(!(e instanceof NodeList||e instanceof HTMLCollection||e instanceof Array))throw new Error("You must provide a nodeList/HTMLCollection/Array of elements to be filtered.");return"string"!=typeof t?Array.from(e):Array.from(e).filter(function(e){return 1===e.nodeType&&e.matches(t)})}var p=new Map,t=function(){function e(){this._config=new Map,this._placeholder=void 0,this._data=new Map}return Object.defineProperty(e.prototype,"config",{get:function(){var n={};return this._config.forEach(function(e,t){n[t]=e}),n},set:function(e){if("object"!=typeof e)throw new Error("You must provide a valid configuration object to the config setter.");var t=Object.assign({},e);this._config=new Map(Object.entries(t))},enumerable:!0,configurable:!0}),e.prototype.setConfig=function(e,t){if(!this._config.has(e))throw new Error("Trying to set invalid configuration item: "+e);this._config.set(e,t)},e.prototype.getConfig=function(e){if(!this._config.has(e))throw new Error("Invalid configuration item requested: "+e);return this._config.get(e)},Object.defineProperty(e.prototype,"placeholder",{get:function(){return this._placeholder},set:function(e){if(!(e instanceof HTMLElement)&&null!==e)throw new Error("A placeholder must be an html element or null.");this._placeholder=e},enumerable:!0,configurable:!0}),e.prototype.setData=function(e,t){if("string"!=typeof e)throw new Error("The key must be a string.");this._data.set(e,t)},e.prototype.getData=function(e){if("string"!=typeof e)throw new Error("The key must be a string.");return this._data.get(e)},e.prototype.deleteData=function(e){if("string"!=typeof e)throw new Error("The key must be a string.");return this._data.delete(e)},e}();function m(e){if(!(e instanceof HTMLElement))throw new Error("Please provide a sortable to the store function.");return p.has(e)||p.set(e,new t),p.get(e)}function h(e,t,n){if(e instanceof Array)for(var r=0;r<e.length;++r)h(e[r],t,n);else e.addEventListener(t,n),m(e).setData("event"+t,n)}function l(e,t){if(e instanceof Array)for(var n=0;n<e.length;++n)l(e[n],t);else e.removeEventListener(t,m(e).getData("event"+t)),m(e).deleteData("event"+t)}function g(e,t,n){if(e instanceof Array)for(var r=0;r<e.length;++r)g(e[r],t,n);else e.setAttribute(t,n)}function s(e,t){if(e instanceof Array)for(var n=0;n<e.length;++n)s(e[n],t);else e.removeAttribute(t)}function v(e){if(!e.parentElement||0===e.getClientRects().length)throw new Error("target element must be part of the dom");var t=e.getClientRects()[0];return{left:t.left+window.pageXOffset,right:t.right+window.pageXOffset,top:t.top+window.pageYOffset,bottom:t.bottom+window.pageYOffset}}function y(e,t){if(!(e instanceof HTMLElement&&(t instanceof NodeList||t instanceof HTMLCollection||t instanceof Array)))throw new Error("You must provide an element and a list of elements.");return Array.from(t).indexOf(e)}function E(e){if(!(e instanceof HTMLElement))throw new Error("Element is not a node element.");return null!==e.parentNode}var n=function(e,t,n){if(!(e instanceof HTMLElement&&e.parentElement instanceof HTMLElement))throw new Error("target and element must be a node");e.parentElement.insertBefore(t,"before"===n?e:e.nextElementSibling)},w=function(e,t){return n(e,t,"before")},b=function(e,t){return n(e,t,"after")};function T(e){if(!(e instanceof HTMLElement))throw new Error("You must provide a valid dom element");var n=window.getComputedStyle(e);return["height","padding-top","padding-bottom"].map(function(e){var t=parseInt(n.getPropertyValue(e),10);return isNaN(t)?0:t}).reduce(function(e,t){return e+t})}function c(e,t){if(!(e instanceof Array))throw new Error("You must provide a Array of HTMLElements to be filtered.");return"string"!=typeof t?e:e.filter(function(e){return e.querySelector(t)instanceof HTMLElement||e.shadowRoot&&e.shadowRoot.querySelector(t)instanceof HTMLElement}).map(function(e){return e.querySelector(t)||e.shadowRoot&&e.shadowRoot.querySelector(t)})}function L(e){return e.composedPath&&e.composedPath()[0]||e.target}var C=function(e,t,n){return{element:e,posX:n.pageX-t.left,posY:n.pageY-t.top}};function M(e,t){if(!0===e.isSortable){var n=m(e).getConfig("acceptFrom");if(null!==n&&!1!==n&&"string"!=typeof n)throw new Error('HTML5Sortable: Wrong argument, "acceptFrom" must be "null", "false", or a valid selector string.');if(null!==n)return!1!==n&&0<n.split(",").filter(function(e){return 0<e.length&&t.matches(e)}).length;if(e===t)return!0;if(void 0!==m(e).getConfig("connectWith")&&null!==m(e).getConfig("connectWith"))return m(e).getConfig("connectWith")===m(t).getConfig("connectWith")}return!1}var x,H,A,D,I,S,Y,O,_={items:null,connectWith:null,disableIEFix:null,acceptFrom:null,copy:!1,placeholder:null,placeholderClass:"sortable-placeholder",draggingClass:"sortable-dragging",hoverClass:!1,debounce:0,throttleTime:100,maxItems:0,itemSerializer:void 0,containerSerializer:void 0,customDragImage:null};function P(e,t){if("string"==typeof m(e).getConfig("hoverClass")){var o=m(e).getConfig("hoverClass").split(" ");!0===t?(h(e,"mousemove",function(r,o){var i=this;if(void 0===o&&(o=250),"function"!=typeof r)throw new Error("You must provide a function as the first argument for throttle.");if("number"!=typeof o)throw new Error("You must provide a number as the second argument for throttle.");var a=null;return function(){for(var e=[],t=0;t<arguments.length;t++)e[t-0]=arguments[t];var n=Date.now();(null===a||o<=n-a)&&(a=n,r.apply(i,e))}}(function(r){0===r.buttons&&u(e.children,m(e).getConfig("items")).forEach(function(e){var t,n;e!==r.target?(t=e.classList).remove.apply(t,o):(n=e.classList).add.apply(n,o)})},m(e).getConfig("throttleTime"))),h(e,"mouseleave",function(){u(e.children,m(e).getConfig("items")).forEach(function(e){var t;(t=e.classList).remove.apply(t,o)})})):(l(e,"mousemove"),l(e,"mouseleave"))}}var f=function(e){l(e,"dragstart"),l(e,"dragend"),l(e,"dragover"),l(e,"dragenter"),l(e,"drop"),l(e,"mouseenter"),l(e,"mouseleave")},W=function(e,t){var n=e;return!0===m(t).getConfig("copy")&&(g(n=e.cloneNode(!0),"aria-copied","true"),e.parentElement.appendChild(n),n.style.display="none",n.oldDisplay=e.style.display),n};function F(e,t){if(t.composedPath)return t.composedPath().find(function(e){return e.isSortable});for(;!0!==e.isSortable;)e=e.parentElement;return e}function N(e,t){var n=d(e,"opts"),r=u(e.children,n.items).filter(function(e){return e.contains(t)||e.shadowRoot&&e.shadowRoot.contains(t)});return 0<r.length?r[0]:t}var r=function(e){var t,n,r,o=d(e,"opts")||{},i=u(e.children,o.items),a=c(i,o.handle);l(e,"dragover"),l(e,"dragenter"),l(e,"drop"),(n=t=e).h5s&&delete n.h5s.data,s(t,"aria-dropeffect"),l(a,"mousedown"),f(i),s(r=i,"aria-grabbed"),s(r,"aria-copied"),s(r,"draggable"),s(r,"role")},j=function(e){var t=d(e,"opts"),n=u(e.children,t.items),r=c(n,t.handle);(g(e,"aria-dropeffect","move"),d(e,"_disabled","false"),g(r,"draggable","true"),!1===t.disableIEFix)&&("function"==typeof(document||window.document).createElement("span").dragDrop&&h(r,"mousedown",function(){if(-1!==n.indexOf(this))this.dragDrop();else{for(var e=this.parentElement;-1===n.indexOf(e);)e=e.parentElement;e.dragDrop()}}))},q=function(e){var t=d(e,"opts"),n=u(e.children,t.items),r=c(n,t.handle);d(e,"_disabled","false"),f(n),l(r,"mousedown"),l(e,"dragover"),l(e,"dragenter"),l(e,"drop")};function z(e,f){var c=String(f);return f=f||{},"string"==typeof e&&(e=document.querySelectorAll(e)),e instanceof HTMLElement&&(e=[e]),e=Array.prototype.slice.call(e),/serialize/.test(c)?e.map(function(e){var t=d(e,"opts");return function(t,n,e){if(void 0===n&&(n=function(e,t){return e}),void 0===e&&(e=function(e){return e}),!(t instanceof HTMLElement)||1==!t.isSortable)throw new Error("You need to provide a sortableContainer to be serialized.");if("function"!=typeof n||"function"!=typeof e)throw new Error("You need to provide a valid serializer for items and the container.");var r=d(t,"opts").items,o=u(t.children,r),i=o.map(function(e){return{parent:t,node:e,html:e.outerHTML,index:y(e,o)}});return{container:e({node:t,itemCount:i.length}),items:i.map(function(e){return n(e,t)})}}(e,t.itemSerializer,t.containerSerializer)}):(e.forEach(function(s){if(/enable|disable|destroy/.test(c))return z[c](s);["connectWith","disableIEFix"].forEach(function(e){f.hasOwnProperty(e)&&null!==f[e]&&console.warn('HTML5Sortable: You are using the deprecated configuration "'+e+'". This will be removed in an upcoming version, make sure to migrate to the new options when updating.')}),f=Object.assign({},_,m(s).config,f),m(s).config=f,d(s,"opts",f),s.isSortable=!0,q(s);var e,t=u(s.children,f.items);if(null!==f.placeholder&&void 0!==f.placeholder){var n=document.createElement(s.tagName);f.placeholder instanceof HTMLElement?n.appendChild(f.placeholder):n.innerHTML=f.placeholder,e=n.children[0]}m(s).placeholder=function(e,t,n){if(void 0===n&&(n="sortable-placeholder"),!(e instanceof HTMLElement))throw new Error("You must provide a valid element as a sortable.");if(!(t instanceof HTMLElement)&&void 0!==t)throw new Error("You must provide a valid element as a placeholder or set ot to undefined.");return void 0===t&&(["UL","OL"].includes(e.tagName)?t=document.createElement("li"):["TABLE","TBODY"].includes(e.tagName)?(t=document.createElement("tr")).innerHTML='<td colspan="100"></td>':t=document.createElement("div")),"string"==typeof n&&(r=t.classList).add.apply(r,n.split(" ")),t;var r}(s,e,f.placeholderClass),d(s,"items",f.items),f.acceptFrom?d(s,"acceptFrom",f.acceptFrom):f.connectWith&&d(s,"connectWith",f.connectWith),j(s),g(t,"role","option"),g(t,"aria-grabbed","false"),P(s,!0),h(s,"dragstart",function(e){var t=L(e);if(!0!==t.isSortable&&(e.stopImmediatePropagation(),(!f.handle||t.matches(f.handle))&&"false"!==t.getAttribute("draggable"))){var n=F(t,e),r=N(n,t);S=u(n.children,f.items),D=S.indexOf(r),I=y(r,n.children),A=n,function(e,t,n){if(!(e instanceof Event))throw new Error("setDragImage requires a DragEvent as the first argument.");if(!(t instanceof HTMLElement))throw new Error("setDragImage requires the dragged element as the second argument.");if(n||(n=C),e.dataTransfer&&e.dataTransfer.setDragImage){var r=n(t,v(t),e);if(!(r.element instanceof HTMLElement)||"number"!=typeof r.posX||"number"!=typeof r.posY)throw new Error("The customDragImage function you provided must return and object with the properties element[string], posX[integer], posY[integer].");e.dataTransfer.effectAllowed="copyMove",e.dataTransfer.setData("text/plain",L(e).id),e.dataTransfer.setDragImage(r.element,r.posX,r.posY)}}(e,r,f.customDragImage),H=T(r),r.classList.add(f.draggingClass),g(x=W(r,n),"aria-grabbed","true"),n.dispatchEvent(new CustomEvent("sortstart",{detail:{origin:{elementIndex:I,index:D,container:A},item:x,originalTarget:t}}))}}),h(s,"dragenter",function(e){var t=L(e),n=F(t,e);n&&n!==Y&&(O=u(n.children,d(n,"items")).filter(function(e){return e!==m(s).placeholder}),n.dispatchEvent(new CustomEvent("sortenter",{detail:{origin:{elementIndex:I,index:D,container:A},destination:{container:n,itemsBeforeUpdate:O},item:x,originalTarget:t}}))),Y=n}),h(s,"dragend",function(e){if(x){x.classList.remove(f.draggingClass),g(x,"aria-grabbed","false"),"true"===x.getAttribute("aria-copied")&&"true"!==d(x,"dropped")&&x.remove(),x.style.display=x.oldDisplay,delete x.oldDisplay;var t=Array.from(p.values()).map(function(e){return e.placeholder}).filter(function(e){return e instanceof HTMLElement}).filter(E)[0];t&&t.remove(),s.dispatchEvent(new CustomEvent("sortstop",{detail:{origin:{elementIndex:I,index:D,container:A},item:x}})),H=x=Y=null}}),h(s,"drop",function(e){if(M(s,x.parentElement)){e.preventDefault(),e.stopPropagation(),d(x,"dropped","true");var t=Array.from(p.values()).map(function(e){return e.placeholder}).filter(function(e){return e instanceof HTMLElement}).filter(E)[0];b(t,x),t.remove(),s.dispatchEvent(new CustomEvent("sortstop",{detail:{origin:{elementIndex:I,index:D,container:A},item:x}}));var n=m(s).placeholder,r=u(A.children,f.items).filter(function(e){return e!==n}),o=!0===this.isSortable?this:this.parentElement,i=u(o.children,d(o,"items")).filter(function(e){return e!==n}),a=y(x,Array.from(x.parentElement.children).filter(function(e){return e!==n})),l=y(x,i);I===a&&A===o||s.dispatchEvent(new CustomEvent("sortupdate",{detail:{origin:{elementIndex:I,index:D,container:A,itemsBeforeUpdate:S,items:r},destination:{index:l,elementIndex:a,container:o,itemsBeforeUpdate:O,items:i},item:x}}))}});var r,o,i,a=(r=function(t,e,n){if(x)if(f.forcePlaceholderSize&&(m(t).placeholder.style.height=H+"px"),-1<Array.from(t.children).indexOf(e)){var r=T(e),o=y(m(t).placeholder,e.parentElement.children),i=y(e,e.parentElement.children);if(H<r){var a=r-H,l=v(e).top;if(o<i&&n<l)return;if(i<o&&l+r-a<n)return}void 0===x.oldDisplay&&(x.oldDisplay=x.style.display),"none"!==x.style.display&&(x.style.display="none");var s=!1;try{s=v(e).top+e.offsetHeight/2<=n}catch(e){s=o<i}s?b(e,m(t).placeholder):w(e,m(t).placeholder),Array.from(p.values()).filter(function(e){return void 0!==e.placeholder}).forEach(function(e){e.placeholder!==m(t).placeholder&&e.placeholder.remove()})}else{var c=Array.from(p.values()).filter(function(e){return void 0!==e.placeholder}).map(function(e){return e.placeholder});-1!==c.indexOf(e)||t!==e||u(e.children,f.items).length||(c.forEach(function(e){return e.remove()}),e.appendChild(m(t).placeholder))}},void 0===(o=f.debounce)&&(o=0),function(){for(var e=[],t=0;t<arguments.length;t++)e[t-0]=arguments[t];clearTimeout(i),i=setTimeout(function(){r.apply(void 0,e)},o)}),l=function(e){var t=e.target,n=!0===t.isSortable?t:F(t,e);if(t=N(n,t),x&&M(n,x.parentElement)&&"true"!==d(n,"_disabled")){var r=d(n,"opts");parseInt(r.maxItems)&&u(n.children,d(n,"items")).length>=parseInt(r.maxItems)&&x.parentElement!==n||(e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect=!0===m(n).getConfig("copy")?"copy":"move",a(n,t,e.pageY))}};h(t.concat(s),"dragover",l),h(t.concat(s),"dragenter",l)}),e)}return z.destroy=function(e){r(e)},z.enable=function(e){j(e)},z.disable=function(e){var t,n,r;n=d(t=e,"opts"),r=c(u(t.children,n.items),n.handle),g(t,"aria-dropeffect","none"),d(t,"_disabled","true"),g(r,"draggable","false"),l(r,"mousedown")},z}();
 //# sourceMappingURL=html5sortable.min.js.map

package.json

@@ -5,4 +5,8 @@ {
   "file": "src/html5sortable.ts",
+  "files": [
+    "src/**/*",
+    "dist/*"
+  ],
   "dest": "dist",
-  "version": "0.9.8",
+  "version": "0.9.10",
   "license": "MIT",
@@ -28,17 +32,17 @@ "description": "VanillaJS sortable lists and grids using native HTML5 drag and drop API.",
   "devDependencies": {
-    "@types/jest": "^23.3.1",
+    "@types/jest": "^24.0.0",
     "coveralls": "^3.0.2",
     "eslint": "^5.6.1",
-    "eslint-plugin-typescript": "^0.13.0",
+    "eslint-plugin-typescript": "^0.14.0",
     "jest": "^23.5.0",
-    "rollup": "^0.66.3",
+    "rollup": "^1.2.0",
     "rollup-plugin-strip-code": "^0.2.6",
     "rollup-plugin-typescript": "^0.8.1",
-    "rollup-plugin-uglify": "^4.0.0",
+    "rollup-plugin-uglify": "^6.0.1",
     "rollup-watch": "^4.3.1",
     "snazzy": "^8.0.0",
     "standard": "^12.0.1",
-    "ts-jest": "^23.1.4",
+    "ts-jest": "^24.0.0",
     "typescript": "^3.1.2",
-    "typescript-eslint-parser": "^20.0.0"
+    "typescript-eslint-parser": "^21.0.0"
   },
@@ -60,3 +64,8 @@ "jest": {
       "**/__tests__/**/*.test.(ts|js)"
-    ]
+    ],
+    "globals": {
+      "ts-jest": {
+        "diagnostics": false
+      }
+    }
   },
@@ -78,3 +87,3 @@ "standard": {
     "preversion": "npm test",
-    "version": "npm run build && git add -A dist docs",
+    "version": "npm run build && git add -A docs",
     "postversion": "git push && git push --tags",
@@ -81,0 +90,0 @@ "tsc": "tsc ./src/*.ts --pretty --diagnostics --noEmit --watch"

src/getHandles.ts

@@ -7,2 +7,3 @@ /* eslint-env browser */
  */
+
 export default (items: Array<HTMLElement>, selector: string): Array<HTMLElement> => {
@@ -20,8 +21,9 @@ if (!(items instanceof Array)) {
     .filter((item: HTMLElement) => {
-      return item.querySelector(selector) instanceof HTMLElement
+      return item.querySelector(selector) instanceof HTMLElement ||
+        (item.shadowRoot && item.shadowRoot.querySelector(selector) instanceof HTMLElement)
     })
     // replace item with handle in array
     .map((item: HTMLElement) => {
-      return item.querySelector(selector)
+      return item.querySelector(selector) || (item.shadowRoot && item.shadowRoot.querySelector(selector))
     })
 }

src/html5sortable.ts

@@ -17,2 +17,3 @@ /* eslint-env browser */
 import _getHandles from './getHandles'
+import getEventTarget from './getEventTarget'
 import setDragImage from './setDragImage'
@@ -40,2 +41,6 @@ import { default as store, stores } from './store' /* eslint-disable-line */
 
+// Previous Sortable Container - we dispatch as sortenter event when a
+// dragged item enters a sortableContainer for the first time
+let previousContainer
+
 // Destination List - data from before any item was changed
@@ -96,4 +101,9 @@ let destinationItemsBeforeUpdate
  * @param {HTMLElement} element a single sortable
+ * @param {Event} event - the current event. We need to pass it to be able to
+ * find Sortable whith shadowRoot (document fragment has no parent)
  */
-function findSortable (element) {
+function findSortable (element, event) {
+  if (event.composedPath) {
+    return event.composedPath().find(el => el.isSortable)
+  }
   while (element.isSortable !== true) {
@@ -114,3 +124,3 @@ element = element.parentElement
   const itemlist = items.filter(function (ele) {
-    return ele.contains(element)
+    return ele.contains(element) || (ele.shadowRoot && ele.shadowRoot.contains(element))
   })
@@ -256,3 +266,7 @@
       let tempContainer = document.createElement(sortableElement.tagName)
-      tempContainer.innerHTML = options.placeholder
+      if (options.placeholder instanceof HTMLElement) {
+        tempContainer.appendChild(options.placeholder)
+      } else {
+        tempContainer.innerHTML = options.placeholder
+      }
       customPlaceholder = tempContainer.children[0]
@@ -283,3 +297,4 @@ }
       // ignore dragstart events
-      if (e.target.isSortable === true) {
+      const target = getEventTarget(e)
+      if (target.isSortable === true) {
         return
@@ -289,8 +304,8 @@ }
 
-      if ((options.handle && !e.target.matches(options.handle)) || e.target.getAttribute('draggable') === 'false') {
+      if ((options.handle && !target.matches(options.handle)) || target.getAttribute('draggable') === 'false') {
         return
       }
 
-      const sortableContainer = findSortable(e.target)
-      const dragItem = findDragElement(sortableContainer, e.target)
+      const sortableContainer = findSortable(target, e)
+      const dragItem = findDragElement(sortableContainer, target)
 
@@ -319,3 +334,4 @@ // grab values
           },
-          item: dragging
+          item: dragging,
+          originalTarget: target
         }
@@ -329,9 +345,29 @@ }))
     _on(sortableElement, 'dragenter', (e) => {
-      if (e.target.isSortable === true) {
-        return
+      const target = getEventTarget(e)
+      const sortableContainer = findSortable(target, e)
+
+      if (sortableContainer && sortableContainer !== previousContainer) {
+        destinationItemsBeforeUpdate = _filter(sortableContainer.children, _data(sortableContainer, 'items'))
+          .filter(item => item !== store(sortableElement).placeholder)
+
+        sortableContainer.dispatchEvent(new CustomEvent('sortenter', {
+          detail: {
+            origin: {
+              elementIndex: originElementIndex,
+              index: originIndex,
+              container: originContainer
+            },
+            destination: {
+              container: sortableContainer,
+              itemsBeforeUpdate: destinationItemsBeforeUpdate
+            },
+            item: dragging,
+            originalTarget: target
+          }
+        }))
       }
-      const sortableContainer = findSortable(e.target)
-      destinationItemsBeforeUpdate = _filter(sortableContainer.children, _data(sortableContainer, 'items'))
-        .filter(item => item !== store(sortableElement).placeholder)
+
+      previousContainer = sortableContainer
     })
+
     /*
@@ -377,2 +413,3 @@ * Dragend Event - https://developer.mozilla.org/en-US/docs/Web/Events/dragend
 
+      previousContainer = null
       dragging = null
@@ -537,3 +574,3 @@ draggingHeight = null
       let element = e.target
-      const sortableElement = element.isSortable === true ? element : findSortable(element)
+      const sortableElement = element.isSortable === true ? element : findSortable(element, e)
       element = findDragElement(sortableElement, element)
@@ -540,0 +577,0 @@ if (!dragging || !_listsConnected(sortableElement, dragging.parentElement) || _data(sortableElement, '_disabled') === 'true') {

src/setDragImage.ts

 /* eslint-env browser */
 import offset from './offset'
+import getEventTarget from './getEventTarget'
 /**
@@ -50,3 +51,3 @@ * defaultDragImage returns the current item as dragged image
     // Firefox requires it to use the event target's id for the data
-    event.dataTransfer.setData('text/plain', event.target.id)
+    event.dataTransfer.setData('text/plain', getEventTarget(event).id)
     // set the drag image on the event
@@ -53,0 +54,0 @@ event.dataTransfer.setDragImage(dragImage.element, dragImage.posX, dragImage.posY)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

333996

decreased by-29.59%

Number of package files

36

decreased by-47.83%

Lines of code

5661

decreased by-37.04%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes