slick-components 17.0.81 → 17.0.83

package/fesm2022/slick-components.mjs

@@ -23,7 +23,7 @@ class SlickInitParams {
     }
 }
 class SlickInitService {
-    static { this.version = "17.0.81"; }
+    static { this.version = "17.0.83"; }
     constructor() { }
     static init(initParams) {
         console.info(`Slick Components Version ${SlickInitService.version}`);
@@ -2857,19 +2857,30 @@ class SlickDragDropDirective {
         this.itemDropped = new EventEmitter();
         this.dragEntered = new EventEmitter();
         this.dragLeft = new EventEmitter();
+        this.dragCounter = 0;
     }
     onDragOver(event) {
         event.preventDefault();
     }
     onDragEnter(event) {
         event.preventDefault();
-        this.dragEntered.emit();
+        this.dragCounter++;
+        if (this.dragCounter === 1) {
+            this.renderer.setStyle(this.el.nativeElement, 'background-color', 'rgba(var(--bs-primary-rgb), 0.05)');
+            this.dragEntered.emit();
+        }
     }
     onDragLeave(event) {
-        this.dragLeft.emit();
+        this.dragCounter--;
+        if (this.dragCounter === 0) {
+            this.renderer.removeStyle(this.el.nativeElement, 'background-color');
+            this.dragLeft.emit();
+        }
     }
     onDrop(event) {
         event.preventDefault();
+        this.dragCounter = 0;
+        this.renderer.removeStyle(this.el.nativeElement, 'background-color');
         if (!event.dataTransfer)
             return;
         const slickData = event.dataTransfer.getData('application/x-slick-draggable');
@@ -3257,13 +3268,14 @@ class SlickDropDownComponent {
             return;
         this.isVisible = true;
         this.changeDetector.detectChanges();
-        SlickUtilsService.attachElement(this.dropdownList.nativeElement, this.attachTo);
+        const dropdownEl = this.dropdownList.nativeElement;
+        SlickUtilsService.attachElement(dropdownEl, 'body');
+        dropdownEl.style.position = 'absolute';
+        dropdownEl.style.display = 'block';
+        dropdownEl.style.visibility = 'hidden';
+        await new Promise(r => requestAnimationFrame(r)); // ensure layout
         this.reposition();
-        await SlickSleepService.sleep();
-        this.dropdownList.nativeElement.style.display = "inline-block";
-        const selectedItems = this.dropdownList.nativeElement.getElementsByClassName("active");
-        if (selectedItems && selectedItems.length > 0)
-            selectedItems[0].scrollIntoView({ block: 'nearest' });
+        dropdownEl.style.visibility = 'visible';
         this.expanded = true;
         // This is necessary, otherwise `this` in the reposition function will be window
         // and not the component.
@@ -3283,21 +3295,25 @@ class SlickDropDownComponent {
         this.isVisible = false;
     }
     reposition() {
-        const dropDownRect = this.containerDiv.nativeElement.getBoundingClientRect();
-        const parentRect = (this.attachTo === 'body') ? null : document.body.querySelector(this.attachTo).getBoundingClientRect();
-        const containerLeft = (this.attachTo === 'body') ? dropDownRect.left : (dropDownRect.left - parentRect.left);
-        const containerTop = (this.attachTo === 'body') ? dropDownRect.top : (dropDownRect.top - parentRect.top);
-        const containerHeight = this.containerDiv.nativeElement.offsetHeight;
-        const containerWidth = dropDownRect.width;
-        this.width = containerWidth;
-        if (this.listWidth === '100%')
-            this.listGroupWidth = this.width;
-        else if (this.listWidth === 'auto')
-            this.listGroupWidth = "auto";
-        else
-            this.listGroupWidth = this.listWidth;
-        this.top = (containerTop + containerHeight);
-        this.left = containerLeft;
+        const dropdownEl = this.dropdownList.nativeElement;
+        const containerEl = this.containerDiv.nativeElement;
+        const rect = containerEl.getBoundingClientRect();
+        const dropdownHeight = dropdownEl.offsetHeight;
+        const scrollY = window.pageYOffset;
+        const scrollX = window.pageXOffset;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        let top;
+        // If enough space below  show below
+        if (spaceBelow >= dropdownHeight) {
+            top = rect.bottom + scrollY;
+        }
+        // Otherwise show above
+        else {
+            top = rect.top + scrollY - dropdownHeight;
+        }
+        dropdownEl.style.top = top + 'px';
+        dropdownEl.style.left = (rect.left + scrollX) + 'px';
+        dropdownEl.style.width = rect.width + 'px';
     }
     async documentClick(e) {
         // Not entirely sure why, but iPhones call onFocus when clicking out of the dropdown