ng-zenduit 2.2.4 → 2.2.5

package/fesm2022/ng-zenduit.mjs

@@ -7405,10 +7405,26 @@ class ZenduDatePickerDropdownComponent {
                 && this.endDate.getTime() === this._appliedPresetEndTime) {
                 return this._translate.instant(this._appliedPresetLabel);
             }
+            // Show the preset name when the range matches one
+            const presetLabel = this.matchingPresetLabel(this.startDate, this.endDate);
+            if (presetLabel) {
+                return this._translate.instant(presetLabel);
+            }
             return `${this.formatDate(this.startDate)} - ${this.formatDate(this.endDate)}`;
         }
         return this.placeholder || this._translate.instant('Select dates');
     }
+    matchingPresetLabel(start, end) {
+        for (const preset of this.activePresets) {
+            const range = preset.getRange();
+            if (range.start && range.end
+                && moment(start).isSame(range.start, 'day')
+                && moment(end).isSame(range.end, 'day')) {
+                return preset.label;
+            }
+        }
+        return null;
+    }
     get legendMarkers() {
         return (this.dateMarkers || []).filter(m => !!m.title);
     }
@@ -7481,22 +7497,30 @@ class ZenduDatePickerDropdownComponent {
     updateDropdownPosition() {
         if (!this.triggerBtn)
             return;
-        setTimeout(() => {
-            const rect = this.triggerBtn.nativeElement.getBoundingClientRect();
+        // Place below the trigger synchronously so the panel opens without a flash
+        const rect = this.triggerBtn.nativeElement.getBoundingClientRect();
+        this.dropdownStyle = {
+            left: `${rect.left}px`,
+            top: `${rect.bottom + 8}px`
+        };
+        // Once rendered, flip above or pin to the viewport if it overflows
+        requestAnimationFrame(() => {
             const dropdownEl = this._element.nativeElement.querySelector('.dropdown-menu');
-            const dropdownHeight = dropdownEl ? dropdownEl.scrollHeight : 500;
-            const spaceBelow = window.innerHeight - rect.bottom - 8;
-            const spaceAbove = rect.top - 8;
+            if (!dropdownEl)
+                return;
+            const r = this.triggerBtn.nativeElement.getBoundingClientRect();
+            const dropdownHeight = dropdownEl.scrollHeight;
+            const spaceBelow = window.innerHeight - r.bottom - 8;
+            const spaceAbove = r.top - 8;
             const margin = 16;
             const viewportHeight = window.innerHeight;
-            const style = { left: `${rect.left}px` };
             if (spaceBelow >= dropdownHeight) {
-                // Fits below the trigger
-                style['top'] = `${rect.bottom + 8}px`;
+                return;
             }
-            else if (spaceAbove >= dropdownHeight) {
+            const style = { left: `${r.left}px` };
+            if (spaceAbove >= dropdownHeight) {
                 // Fits above the trigger
-                style['bottom'] = `${viewportHeight - rect.top + 8}px`;
+                style['bottom'] = `${viewportHeight - r.top + 8}px`;
             }
             else {
                 // Doesn't fit either way — pin to viewport so full content is visible