@brickclay-org/ui 0.1.25 → 0.1.27

package/fesm2022/brickclay-org-ui.mjs

@@ -657,6 +657,32 @@ class BkCustomCalendar {
             return false;
         return !this.startDate || !this.endDate;
     }
+    /**
+     * Popup single-date with manual Apply: do not push to ngModel / (selected) until Apply.
+     * Inline calendars have no Apply footer, so they always commit immediately.
+     */
+    shouldDeferSingleDateCommit() {
+        return this.singleDatePicker && !this.autoApply && !this.inline;
+    }
+    emitSelectionUnlessSingleDateDeferred() {
+        if (this.shouldDeferSingleDateCommit())
+            return;
+        this.emitSelection();
+    }
+    /** Discard in-popup draft and restore last committed value from {@link selectedValue}. */
+    revertSingleDateDraftIfNeeded() {
+        if (this.shouldDeferSingleDateCommit()) {
+            this.applyValueToState(this.selectedValue ?? null);
+        }
+    }
+    finishPopupDismissal() {
+        if (this.inline)
+            return;
+        this.revertSingleDateDraftIfNeeded();
+        this.show = false;
+        this.onTouched();
+        this.closed.emit();
+    }
     /** User preference before viewport adjustment (legacy `drop` still applies when `popupPosition` is `bottom`). */
     preferPopupAbove() {
         return this.popupPosition === 'top' || (this.popupPosition === 'bottom' && this.drop === 'up');
@@ -730,6 +756,29 @@ class BkCustomCalendar {
     markAsTouched() {
         this.onTouched();
     }
+    /** Clears embedded time picker ngModels, spinner state, raw minute typing, and forces dropdowns closed. */
+    resetEmbeddedTimePickerUiState() {
+        this.singleTimeModel = null;
+        this.startTimeModel = null;
+        this.endTimeModel = null;
+        this.selectedHour = 1;
+        this.selectedMinute = 0;
+        this.selectedSecond = 0;
+        this.selectedAMPM = 'AM';
+        this.startHour = 1;
+        this.startMinute = 0;
+        this.startSecond = 0;
+        this.startAMPM = 'AM';
+        this.endHour = 2;
+        this.endMinute = 0;
+        this.endSecond = 0;
+        this.endAMPM = 'AM';
+        this.minuteInputValues = {};
+        this.openTimePickerId = null;
+        for (const id of ['single-time', 'dual-start', 'dual-end']) {
+            this.closePickerCounter[id] = (this.closePickerCounter[id] || 0) + 1;
+        }
+    }
     /** Apply CalendarSelection to internal state (startDate, endDate, startTime, endTime, selectedDates, calendar view). */
     applyValueToState(value) {
         if (!value) {
@@ -738,9 +787,8 @@ class BkCustomCalendar {
             this.startTime = null;
             this.endTime = null;
             this.selectedDates = [];
-            this.singleTimeModel = null;
-            this.startTimeModel = null;
-            this.endTimeModel = null;
+            this.activeRange = null;
+            this.resetEmbeddedTimePickerUiState();
             this.month = this.today.getMonth();
             this.year = this.today.getFullYear();
             this.generateCalendar();
@@ -817,8 +865,13 @@ class BkCustomCalendar {
             this.selectedAMPM = this.startAMPM;
         }
         else if (this.startDate) {
+            // Date-only committed value: keep startTime null; sync spinners for UX only (not emitted until user sets time).
             this.initializeTimeFromDate(this.startDate, true);
-            this.startTime = this.formatTimeToAmPm(this.startHour, this.startMinute, this.startAMPM);
+            if (!this.dualCalendar) {
+                this.selectedHour = this.startHour;
+                this.selectedMinute = this.startMinute;
+                this.selectedAMPM = this.startAMPM;
+            }
         }
         if (this.endTime) {
             const endParsed = this.parsePickerTimeString(this.endTime);
@@ -836,7 +889,6 @@ class BkCustomCalendar {
         }
         else if (this.endDate) {
             this.initializeTimeFromDate(this.endDate, false);
-            this.endTime = this.formatTimeToAmPm(this.endHour, this.endMinute, this.endAMPM);
         }
         if (this.startDate && this.endDate) {
             this.checkAndSetActiveRange();
@@ -880,9 +932,14 @@ class BkCustomCalendar {
             this.initializeDual();
         else
             this.generateCalendar();
-        // Initialize time from existing dates if available
+        // Initialize spinner state from existing dates (does not set startTime/endTime — those stay null until user picks time).
         if (this.startDate) {
             this.initializeTimeFromDate(this.startDate, true);
+            if (!this.dualCalendar) {
+                this.selectedHour = this.startHour;
+                this.selectedMinute = this.startMinute;
+                this.selectedAMPM = this.startAMPM;
+            }
         }
         if (this.endDate) {
             this.initializeTimeFromDate(this.endDate, false);
@@ -1025,7 +1082,7 @@ class BkCustomCalendar {
             this.opened.emit();
         }
         else {
-            this.closed.emit();
+            this.finishPopupDismissal();
         }
     }
     /** Update popup position when appendToBody is true (fixed positioning relative to viewport). */
@@ -1247,13 +1304,10 @@ class BkCustomCalendar {
         }
     }
     close() {
-        // Don't close if inline mode is enabled
         if (this.inline) {
             return;
         }
-        this.show = false;
-        this.onTouched();
-        this.closed.emit();
+        this.finishPopupDismissal();
     }
     onDateHover(day, fromRight = false) {
         if (!day || this.singleDatePicker || this.multiDateSelection) {
@@ -1339,8 +1393,7 @@ class BkCustomCalendar {
                     this.close();
             }
             else {
-                // Always emit selection event even if autoApply is false (especially for inline calendars)
-                this.emitSelection();
+                this.emitSelectionUnlessSingleDateDeferred();
             }
             return;
         }
@@ -1477,23 +1530,21 @@ class BkCustomCalendar {
             return;
         // Format minute inputs to 2 digits before applying
         this.formatAllMinuteInputs();
-        // Apply time to dates
+        // Apply time only when the user has an explicit time string (avoids inventing "12:00 AM" from picker defaults).
         if (this.enableTimepicker) {
             if (this.dualCalendar) {
-                // Dual calendar with separate start/end times (always 12-hour format)
-                if (this.startDate) {
+                if (this.startDate && this.startTime != null) {
                     this.applyTimeToDate(this.startDate, true);
                 }
-                if (this.endDate) {
+                if (this.endDate && this.endTime != null) {
                     this.applyTimeToDate(this.endDate, false);
                 }
             }
             else {
-                // Single calendar with time (always 12-hour format)
-                if (this.startDate) {
+                if (this.startDate && this.startTime != null) {
                     this.applyTimeToDate(this.startDate, true);
                 }
-                if (this.endDate && !this.singleDatePicker) {
+                if (this.endDate && !this.singleDatePicker && this.startTime != null) {
                     this.applyTimeToDate(this.endDate, true);
                 }
             }
@@ -1508,10 +1559,14 @@ class BkCustomCalendar {
     cancel() {
         if (this.disabled)
             return;
-        this.startDate = null;
-        this.endDate = null;
-        this.selectedDates = [];
-        this.resetCalendarFocusAfterClear();
+        // if (this.shouldDeferSingleDateCommit()) {
+        //   this.finishPopupDismissal();
+        //   return;
+        // }
+        // this.startDate = null;
+        // this.endDate = null;
+        // this.selectedDates = [];
+        // this.resetCalendarFocusAfterClear();
         this.close();
     }
     clear() {
@@ -1521,22 +1576,9 @@ class BkCustomCalendar {
         this.endDate = null;
         this.startTime = null;
         this.endTime = null;
-        // Time picker for single calendar (12-hour format: 1-12)
-        this.selectedHour = 1;
-        this.selectedMinute = 0;
-        this.selectedSecond = 0;
-        this.selectedAMPM = 'AM';
-        // NEW: Separate time pickers for dual calendar (12-hour format: 1-12)
-        this.startHour = 1;
-        this.startMinute = 0;
-        this.startSecond = 0;
-        this.startAMPM = 'AM';
-        this.endHour = 2;
-        this.endMinute = 0;
-        this.endSecond = 0;
-        this.endAMPM = 'AM';
         this.selectedDates = [];
-        this.activeRange = null; // Clear active range
+        this.activeRange = null;
+        this.resetEmbeddedTimePickerUiState();
         this.resetCalendarFocusAfterClear();
         this.emitSelection();
     }
@@ -1616,8 +1658,13 @@ class BkCustomCalendar {
         else if (this.startDate) {
             this.keyboardFocusDate = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate());
         }
-        this.emitSelection();
-        if (this.autoApply || this.closeOnAutoApply) {
+        this.emitSelectionUnlessSingleDateDeferred();
+        if (this.shouldDeferSingleDateCommit()) {
+            if (this.autoApply) {
+                this.apply();
+            }
+        }
+        else if (this.autoApply || this.closeOnAutoApply) {
             this.close();
         }
     }
@@ -1981,7 +2028,7 @@ class BkCustomCalendar {
             if (this.startDate) {
                 this.startDate.setHours(0, 0, this.selectedSecond);
             }
-            this.emitSelection();
+            this.emitSelectionUnlessSingleDateDeferred();
             return;
         }
         const { hour12, minute, ampm } = this.parsePickerTimeString(time);
@@ -1998,7 +2045,7 @@ class BkCustomCalendar {
                 h24 = 0;
             this.startDate.setHours(h24, minute, this.selectedSecond);
         }
-        this.emitSelection();
+        this.emitSelectionUnlessSingleDateDeferred();
     }
     // NEW: Handle BkTimePicker change for dual calendar
     onDualTimePickerChange(time, isStart = true) {
@@ -2079,7 +2126,7 @@ class BkCustomCalendar {
         this.selectedMinute = m;
         if (this.startDate) {
             this.startDate.setHours(h, m, this.selectedSecond);
-            this.emitSelection();
+            this.emitSelectionUnlessSingleDateDeferred();
         }
     }
     // Custom time picker controls
@@ -2240,7 +2287,7 @@ class BkCustomCalendar {
             if (this.selectedAMPM === 'AM' && h === 12)
                 h = 0;
             this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
-            this.emitSelection();
+            this.emitSelectionUnlessSingleDateDeferred();
         }
     }
     decrementSingleHour() {
@@ -2256,7 +2303,7 @@ class BkCustomCalendar {
             if (this.selectedAMPM === 'AM' && h === 12)
                 h = 0;
             this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
-            this.emitSelection();
+            this.emitSelectionUnlessSingleDateDeferred();
         }
     }
     incrementSingleMinute() {
@@ -2268,7 +2315,7 @@ class BkCustomCalendar {
             if (this.selectedAMPM === 'AM' && h === 12)
                 h = 0;
             this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
-            this.emitSelection();
+            this.emitSelectionUnlessSingleDateDeferred();
         }
     }
     decrementSingleMinute() {
@@ -2280,7 +2327,7 @@ class BkCustomCalendar {
             if (this.selectedAMPM === 'AM' && h === 12)
                 h = 0;
             this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
-            this.emitSelection();
+            this.emitSelectionUnlessSingleDateDeferred();
         }
     }
     toggleSingleAMPM() {
@@ -2292,7 +2339,7 @@ class BkCustomCalendar {
             if (this.selectedAMPM === 'AM' && h === 12)
                 h = 0;
             this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
-            this.emitSelection();
+            this.emitSelectionUnlessSingleDateDeferred();
         }
     }
     getMonthName(month) {
@@ -2321,7 +2368,7 @@ class BkCustomCalendar {
                 if (this.selectedAMPM === 'AM' && h === 12)
                     h = 0;
                 this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
-                this.emitSelection();
+                this.emitSelectionUnlessSingleDateDeferred();
             }
         }
         else if (isStart) {
@@ -2376,7 +2423,7 @@ class BkCustomCalendar {
                 if (this.selectedAMPM === 'AM' && h === 12)
                     h = 0;
                 this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
-                this.emitSelection();
+                this.emitSelectionUnlessSingleDateDeferred();
             }
         }
         else if (isStart) {
@@ -2470,7 +2517,7 @@ class BkCustomCalendar {
                 if (this.selectedAMPM === 'AM' && h === 12)
                     h = 0;
                 this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
-                this.emitSelection();
+                this.emitSelectionUnlessSingleDateDeferred();
             }
         }
         else if (isStart) {