slick-components 4.4.13 → 4.4.14

package/bundles/slick-components.umd.js

@@ -69,7 +69,7 @@
         };
         return SlickInitService;
     }());
-    SlickInitService.version = "4.4.13";
+    SlickInitService.version = "4.4.14";
     SlickInitService.decorators = [
         { type: core.Injectable }
     ];
@@ -566,6 +566,16 @@
             }
             return hasSelector;
         };
+        SlickUtilsService.findParentByAttr = function (el, attrName, attrValue) {
+            var currentEl = el;
+            while (currentEl && currentEl !== document.body) {
+                if (currentEl.hasAttribute(attrName) && currentEl.getAttribute(attrName) === attrValue) {
+                    return currentEl;
+                }
+                currentEl = currentEl.parentElement;
+            }
+            return null;
+        };
         SlickUtilsService.findParent = function (el, className) {
             var currentEl = el;
             while (currentEl && currentEl !== document.body) {
@@ -633,6 +643,11 @@
             }
             catch (_a) { }
         };
+        SlickUtilsService.arrayInsert = function (elementToInsert, arr, index) {
+            var pre = arr.slice(0, index);
+            var post = arr.slice(index, arr.length);
+            return __spreadArray(__spreadArray(__spreadArray([], __read(pre)), [elementToInsert]), __read(post));
+        };
         return SlickUtilsService;
     }());
     SlickUtilsService.getHashCode = function (str) {
@@ -3968,155 +3983,205 @@
         function SlickDropListDirective(el) {
             var _this = this;
             this.onSlickDropListReorder = new core.EventEmitter();
+            this.onSlickDropListEnter = new core.EventEmitter();
+            this.onSlickDropListLeave = new core.EventEmitter();
             this.uuid = SlickUtilsService.newGuid();
             this.fnMouseDown = function (e) { return _this.mouseDown(e); };
-            this.fnMouseEnter = function (e) { return _this.mouseEnter(e); };
+            this.fnMouseMove = function (e) { return _this.mouseMove(e); };
             this.fnMouseUp = function () { return _this.mouseUp(); };
-            this.first = true;
             this.el = el.nativeElement;
             this.el.setAttribute("drop-list-uuid", this.uuid);
         }
         SlickDropListDirective.prototype.ngOnInit = function () {
             this.el.style.position = "relative";
-            this.el.addEventListener("mousedown", this.fnMouseDown, true);
+            document.addEventListener("mousedown", this.fnMouseDown, true);
         };
         SlickDropListDirective.prototype.ngOnDestroy = function () {
-            var _this = this;
-            this.el.removeEventListener("mousedown", this.fnMouseDown, true);
+            document.removeEventListener("mousedown", this.fnMouseDown, true);
+            document.removeEventListener("mousemove", this.fnMouseMove, true);
             document.removeEventListener("mouseup", this.fnMouseUp, true);
-            this.el.querySelectorAll(".slick-drop-list-item").forEach(function (e) { return e.removeEventListener("mouseenter", _this.fnMouseEnter, false); });
         };
-        SlickDropListDirective.prototype.mouseDown = function (e) {
+        SlickDropListDirective.prototype.mouseDown = function (e, target) {
+            if (target === void 0) { target = null; }
             return __awaiter(this, void 0, void 0, function () {
-                var grabEls, sortOrder, dropListItems, i, item, dropListItem;
-                var _this = this;
+                var parent, grabEls, dropListItem;
                 return __generator(this, function (_a) {
+                    this.isAdding = false;
+                    this.isMoving = false;
                     if (e.button !== 0 || !e || !e.target)
                         return [2 /*return*/];
+                    document.removeEventListener("mouseup", this.fnMouseUp, true);
+                    document.removeEventListener("mousemove", this.fnMouseMove, true);
+                    document.addEventListener("mouseup", this.fnMouseUp, true);
+                    document.addEventListener("mousemove", this.fnMouseMove, true);
+                    if (!target)
+                        target = e.target;
+                    parent = SlickUtilsService.findParentByAttr(target, 'drop-list-uuid', this.uuid);
+                    if (!parent)
+                        return [2 /*return*/];
+                    this.isMoving = true;
                     grabEls = this.el.querySelectorAll(".slick-drop-list-grab");
-                    if (grabEls.length > 0 && !SlickUtilsService.findParent(e.target, "slick-drop-list-grab"))
+                    if (grabEls.length > 0 && !SlickUtilsService.findParent(target, "slick-drop-list-grab"))
                         return [2 /*return*/, true];
-                    this.first = true;
-                    this.isMoving = true;
-                    sortOrder = 0;
-                    dropListItems = this.el.querySelectorAll(".slick-drop-list-item");
-                    for (i = 0; i < dropListItems.length; i++) {
-                        item = dropListItems[i];
-                        item.setAttribute("data-sortorder", sortOrder.toString());
-                        //item.style.cursor = "move";
-                        sortOrder++;
-                    }
-                    document.removeEventListener("mouseup", this.fnMouseUp, true);
-                    this.el.querySelectorAll(".slick-drop-list-item").forEach(function (e) { return e.removeEventListener("mouseenter", _this.fnMouseEnter, false); });
-                    dropListItem = SlickUtilsService.findParent(e.target, "slick-drop-list-item");
+                    dropListItem = SlickUtilsService.findParent(target, "slick-drop-list-item");
                     if (!dropListItem) {
                         console.error("Can't find item element");
                         return [2 /*return*/];
                     }
-                    this.el.style.userSelect = "none";
-                    this.cursorOffset = e.pageY - dropListItem.getBoundingClientRect().top;
-                    this.originalIdx = parseInt(dropListItem.getAttribute("data-sortorder"));
-                    this.currentIdx = parseInt(dropListItem.getAttribute("data-sortorder"));
-                    this.lastIdx = parseInt(dropListItem.getAttribute("data-sortorder"));
-                    this.placeholderEl = dropListItem;
-                    this.placeholderEl.classList.add("slick-drop-list-placeholder");
-                    this.placeholderEl.classList.remove("slick-drop-list-item");
-                    this.placeholderEl.style.boxShadow = "4px 12px 6px rgba(0,0,0,.24)";
-                    this.placeholderHeight = this.placeholderEl.getBoundingClientRect().height;
-                    this.el.removeChild(this.placeholderEl);
-                    this.el.appendChild(this.placeholderEl);
-                    this.itemHeights = [];
-                    this.el.querySelectorAll(".slick-drop-list-item").forEach(function (item) { return _this.itemHeights.push(item.getBoundingClientRect().height); });
-                    this.el.querySelectorAll(".slick-drop-list-item").forEach(function (e) { return e.addEventListener("mouseenter", _this.fnMouseEnter, false); });
-                    document.addEventListener("mouseup", this.fnMouseUp, true);
+                    // Find which element the mouse is over
+                    this.currentIdx = this.findElementIdx(e.y, false);
+                    this.originalIdx = this.currentIdx;
+                    this.startMove(dropListItem);
                     return [2 /*return*/];
                 });
             });
         };
-        SlickDropListDirective.prototype.mouseEnter = function (e) {
-            // Now see if we need to swap the orders
-            var parent = SlickUtilsService.findParent(e.target, "slick-drop-list-item");
-            if (parent && !parent.classList.contains("slick-drop-list-placeholder")) {
-                this.currentIdx = 0;
-                var allDropListItems = this.el.querySelectorAll(".slick-drop-list-item");
-                for (var i = 0; i < allDropListItems.length; i++) {
-                    var item = allDropListItems[i];
-                    if (item !== parent)
-                        this.currentIdx++;
-                    else
-                        break;
+        SlickDropListDirective.prototype.mouseMove = function (e) {
+            if (this.isAdding)
+                return;
+            var parent = SlickUtilsService.findParentByAttr(e.target, 'drop-list-uuid', this.uuid);
+            if (!parent) {
+                // If this isn't the parent, but we we're moving, that means we just left this parent
+                // Send a message which element was dragged out and reset everything else
+                if (this.isMoving && this.onSlickDropListLeave.observers.length > 0) {
+                    this.isMoving = false;
+                    var allItems = this.el.querySelectorAll(".slick-drop-list-item");
+                    allItems.forEach(function (item) {
+                        item.classList.remove("slick-drop-list-item-animation");
+                        item.style.transform = "";
+                    });
+                    this.onSlickDropListLeave.emit(this.originalIdx);
+                }
+                return;
+            }
+            if (!this.isMoving && this.onSlickDropListEnter.observers.length === 0)
+                return;
+            // If the mouse was clicked outside of this droplist, but it has now moved inside this droplist, tell the parent where
+            // in the droplist it has moved.
+            // Since there is no way for a directive to have functions called via ViewChild, just assume that the page 
+            // has added the appropriate element at the appropriate place
+            if (!this.isMoving && this.onSlickDropListEnter) {
+                this.isAdding = true;
+                // Find which element the mouse is over
+                var idx = this.findElementIdx(e.y, false);
+                this.isAddingMouseEvent = e;
+                // The caller needs to call the ready function after adding the new record to the array
+                this.onSlickDropListEnter.emit({ idx: idx, ready: this.newItemReady.bind(this) });
+                return;
+            }
+            // Find which element the mouse is over
+            var dropListItems = this.el.querySelectorAll(".slick-drop-list-item");
+            for (var i = 0; i < dropListItems.length; i++) {
+                var dropListItem = dropListItems[i];
+                var boundingRect = dropListItem.getBoundingClientRect();
+                var topHalfTop = boundingRect.top;
+                var topHalfBottom = topHalfTop + (boundingRect.height / 2);
+                var bottomHalfTop = topHalfBottom + 1;
+                var bottomHalfBottom = boundingRect.bottom;
+                if (this.currentIdx !== i && e.y >= topHalfTop && e.y <= topHalfBottom) {
+                    this.currentIdx = i;
+                    this.redraw();
+                    break;
+                }
+                if (this.currentIdx !== i + 1 && e.y >= bottomHalfTop && e.y <= bottomHalfBottom) {
+                    this.currentIdx = i + 1;
+                    this.redraw();
+                    break;
                 }
-                this.redraw();
             }
         };
         SlickDropListDirective.prototype.mouseUp = function () {
-            var _this = this;
-            var allItems = this.el.querySelectorAll(".slick-drop-list-item");
-            var sortOrderEl = allItems[this.currentIdx];
-            var sortOrder = parseInt(sortOrderEl.getAttribute("data-sortorder"));
+            document.removeEventListener("mouseup", this.fnMouseUp, true);
+            document.removeEventListener("mousemove", this.fnMouseMove, true);
+            if (!this.isMoving)
+                return;
+            this.isMoving = false;
+            // Remove the placeholder
             this.placeholderEl.classList.remove("slick-drop-list-placeholder");
             this.placeholderEl.classList.add("slick-drop-list-item");
             this.placeholderEl.style.boxShadow = "";
             this.placeholderEl.style.transform = "";
-            this.placeholderEl.removeAttribute("data-sortorder");
-            this.placeholderEl.removeEventListener("mouseenter", this.fnMouseEnter, false);
             this.el.removeChild(this.placeholderEl);
-            if (sortOrder === allItems.length)
+            // Add the placeholder back
+            var allItems = this.el.querySelectorAll(".slick-drop-list-item");
+            if (this.currentIdx === allItems.length)
                 this.el.appendChild(this.placeholderEl);
             else
-                this.el.insertBefore(this.placeholderEl, sortOrderEl);
+                this.el.insertBefore(this.placeholderEl, allItems[this.currentIdx]);
             this.placeholderEl = null;
             allItems.forEach(function (item) {
                 item.classList.remove("slick-drop-list-item-animation");
-                item.removeAttribute("data-sortorder");
                 item.style.transform = "";
-                item.removeEventListener("mouseenter", _this.fnMouseEnter, false);
             });
-            document.removeEventListener("mouseup", this.fnMouseUp, true);
             if (this.onSlickDropListReorder)
-                this.onSlickDropListReorder.emit([this.originalIdx, sortOrder]);
+                this.onSlickDropListReorder.emit([this.originalIdx, this.currentIdx]);
+            this.originalIdx = null;
             this.currentIdx = null;
-            this.lastIdx = null;
-            this.dir = null;
         };
         SlickDropListDirective.prototype.redraw = function () {
-            if (this.dir && this.currentIdx === this.lastIdx)
-                this.dir = (this.dir === 'UP') ? 'DOWN' : 'UP';
-            else
-                this.dir = (this.currentIdx <= this.lastIdx) ? "UP" : "DOWN";
-            this.lastIdx = this.currentIdx;
             var allChildren = this.el.querySelectorAll(".slick-drop-list-item");
             var placeholderOffset = 0;
-            if (this.dir === "UP") {
-                for (var i = 0; i < allChildren.length; i++) {
-                    var item = allChildren[i];
-                    if (i < this.currentIdx) {
-                        item.style.transform = "translate3d(0px, 0px, 0px)";
-                    }
-                    else {
-                        item.style.transform = "translate3d(0px, " + this.placeholderHeight + "px, 0px)";
-                        placeholderOffset += this.itemHeights[i];
-                    }
+            for (var i = 0; i < allChildren.length; i++) {
+                var item = allChildren[i];
+                if (i < this.currentIdx) {
+                    item.style.transform = "translate3d(0px, 0px, 0px)";
                 }
-            }
-            else {
-                for (var i = 0; i < allChildren.length; i++) {
-                    var item = allChildren[i];
-                    if (i <= this.currentIdx) {
-                        item.style.transform = "translate3d(0px, 0px, 0px)";
-                    }
-                    else {
-                        item.style.transform = "translate3d(0px, " + this.placeholderHeight + "px, 0px)";
-                        placeholderOffset += this.itemHeights[i];
-                    }
+                else {
+                    item.style.transform = "translate3d(0px, " + this.placeholderHeight + "px, 0px)";
+                    placeholderOffset += this.itemHeights[i];
                 }
             }
             this.placeholderEl.style.transform = "translate3d(0px, -" + placeholderOffset + "px, 0px)";
-            if (this.first) {
-                setTimeout(function () { return allChildren.forEach(function (item) { return item.classList.add("slick-drop-list-item-animation"); }); });
-                this.first = false;
+        };
+        SlickDropListDirective.prototype.newItemReady = function (idx) {
+            var _this = this;
+            setTimeout(function () {
+                _this.currentIdx = idx;
+                _this.originalIdx = idx;
+                var dropListItem = _this.el.querySelectorAll(".slick-drop-list-item").item(idx);
+                _this.mouseDown(_this.isAddingMouseEvent, dropListItem);
+            });
+        };
+        SlickDropListDirective.prototype.findElementIdx = function (mouseY, useTopAndBottom) {
+            var dropListItems = this.el.querySelectorAll(".slick-drop-list-item");
+            for (var i = 0; i < dropListItems.length; i++) {
+                var dropListItem = dropListItems[i];
+                var boundingRect = dropListItem.getBoundingClientRect();
+                if (useTopAndBottom) {
+                    var topHalfTop = boundingRect.top;
+                    var topHalfBottom = topHalfTop + (boundingRect.height / 2);
+                    var bottomHalfTop = topHalfBottom + 1;
+                    var bottomHalfBottom = boundingRect.bottom;
+                    if (mouseY >= topHalfTop && mouseY <= topHalfBottom)
+                        return i;
+                    if (mouseY >= bottomHalfTop && mouseY <= bottomHalfBottom)
+                        return i + 1;
+                }
+                else {
+                    if (mouseY >= boundingRect.top && mouseY <= boundingRect.bottom)
+                        return i;
+                }
             }
         };
+        SlickDropListDirective.prototype.startMove = function (dropListItem) {
+            var _this = this;
+            this.el.style.userSelect = "none";
+            this.placeholderEl = dropListItem;
+            this.placeholderEl.classList.add("slick-drop-list-placeholder");
+            this.placeholderEl.classList.remove("slick-drop-list-item");
+            this.placeholderEl.style.boxShadow = "4px 12px 6px rgba(0,0,0,.24)";
+            this.placeholderHeight = this.placeholderEl.getBoundingClientRect().height;
+            this.el.removeChild(this.placeholderEl);
+            this.el.appendChild(this.placeholderEl);
+            this.itemHeights = [];
+            this.el.querySelectorAll(".slick-drop-list-item").forEach(function (item) { return _this.itemHeights.push(item.getBoundingClientRect().height); });
+            this.redraw();
+            // Don't start the animation until after the first click because it looks weird
+            setTimeout(function () {
+                var allChildren = _this.el.querySelectorAll(".slick-drop-list-item");
+                allChildren.forEach(function (item) { return item.classList.add("slick-drop-list-item-animation"); });
+            });
+        };
         return SlickDropListDirective;
     }());
     SlickDropListDirective.decorators = [
@@ -4129,7 +4194,9 @@
         { type: core.ElementRef }
     ]; };
     SlickDropListDirective.propDecorators = {
-        onSlickDropListReorder: [{ type: core.Output, args: ["onSlickDropListReorder",] }]
+        onSlickDropListReorder: [{ type: core.Output, args: ["onSlickDropListReorder",] }],
+        onSlickDropListEnter: [{ type: core.Output, args: ["onSlickDropListEnter",] }],
+        onSlickDropListLeave: [{ type: core.Output, args: ["onSlickDropListLeave",] }]
     };
 
     var SlickDropListItemDirective = /** @class */ (function () {
@@ -9751,18 +9818,18 @@
     exports.ɵa = SlickContainerHeaderComponent;
     exports.ɵb = SlickContainerBodyComponent;
     exports.ɵc = SlickContainerFooterComponent;
-    exports.ɵd = SlickGridColumnTemplateDirective;
-    exports.ɵe = SlickPagingComponent;
-    exports.ɵf = SlickFunctionLockService;
-    exports.ɵg = SlickCardComponent;
-    exports.ɵh = SlickCardHeaderComponent;
-    exports.ɵi = SlickDialogService;
-    exports.ɵj = SlickDialogFooterComponent;
-    exports.ɵk = SlickDragDropDirective;
-    exports.ɵl = SlickDraggableDirective;
-    exports.ɵm = SlickDropDownService;
-    exports.ɵn = SlickLogService;
-    exports.ɵo = SlickDropListDirective;
+    exports.ɵd = SlickDropListDirective;
+    exports.ɵe = SlickGridColumnTemplateDirective;
+    exports.ɵf = SlickPagingComponent;
+    exports.ɵg = SlickFunctionLockService;
+    exports.ɵh = SlickCardComponent;
+    exports.ɵi = SlickCardHeaderComponent;
+    exports.ɵj = SlickDialogService;
+    exports.ɵk = SlickDialogFooterComponent;
+    exports.ɵl = SlickDragDropDirective;
+    exports.ɵm = SlickDraggableDirective;
+    exports.ɵn = SlickDropDownService;
+    exports.ɵo = SlickLogService;
     exports.ɵp = SlickDropListItemDirective;
     exports.ɵq = SlickDropListGrabDirective;
     exports.ɵr = SlickFileListItemComponent;