slick-components 17.0.82 → 17.0.84

package/fesm2022/slick-components.mjs

@@ -23,7 +23,7 @@ class SlickInitParams {
     }
 }
 class SlickInitService {
-    static { this.version = "17.0.82"; }
+    static { this.version = "17.0.84"; }
     constructor() { }
     static init(initParams) {
         console.info(`Slick Components Version ${SlickInitService.version}`);
@@ -3268,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.
@@ -3294,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
@@ -6574,6 +6579,10 @@ class SlickGridComponent {
             this.gridOptions.columns.push(column);
         else
             this.gridOptions.columns.splice(idx, 0, column);
+        this.templateRefs = {};
+        this.slickGridColumnTemplates.forEach(t => {
+            this.templateRefs[t.columnKey] = t.template;
+        });
         this.setGridOptions(this.gridOptions);
     }
     getRequestModel(requestModel = null) {