ngx-com 0.1.2 → 0.1.4

package/fesm2022/ngx-com-components-datepicker.mjs

@@ -469,6 +469,16 @@ class ComDatepicker {
     showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
     /** Step interval for minutes in the time picker. */
     minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
+    /**
+     * When true, date/time selections while the panel is open update only the visual state.
+     * The value is committed (emitted via `dateChange`, propagated to forms) only when
+     * the user presses "Done". Closing via Escape or backdrop click reverts to the
+     * pre-open value without emitting.
+     *
+     * All in-panel actions (date selection, time change, today, footer clear) are buffered.
+     * The trigger clear button (panel closed) always commits immediately.
+     */
+    commitOnClose = input(false, ...(ngDevMode ? [{ debugName: "commitOnClose" }] : []));
     // ============ OUTPUTS ============
     /** Emitted when a date is selected. */
     dateChange = output();
@@ -484,6 +494,11 @@ class ComDatepicker {
     /** Calendar active date for navigation. Recomputes when value or startAt changes; user navigation overrides via .set(). */
     calendarActiveDate = linkedSignal({ ...(ngDevMode ? { debugName: "calendarActiveDate" } : {}), source: () => ({ value: this.internalValue(), startAt: this.startAt() }),
         computation: ({ value, startAt }) => value ?? startAt ?? this.dateAdapter.today() });
+    /**
+     * Snapshot of the value when the panel was opened.
+     * Used by `commitOnClose` to revert on Escape/backdrop close.
+     */
+    committedValue = signal(null, ...(ngDevMode ? [{ debugName: "committedValue" }] : []));
     /** Live announcements for screen readers. */
     liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
     /** Whether the input is focused (not panel). */
@@ -612,9 +627,9 @@ class ComDatepicker {
         }
         return this.dateFormat();
     }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : []));
-    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    /** Whether the panel should stay open (keepOpen, time picker shown, or commitOnClose). */
     effectiveKeepOpen = computed(() => {
-        return this.keepOpen() || this.showTimePicker();
+        return this.keepOpen() || this.showTimePicker() || this.commitOnClose();
     }, ...(ngDevMode ? [{ debugName: "effectiveKeepOpen" }] : []));
     // ============ CVA CALLBACKS ============
     onChange = () => { };
@@ -632,6 +647,7 @@ class ComDatepicker {
     // ============ CVA IMPLEMENTATION ============
     writeValue(value) {
         this.internalValue.set(value);
+        this.committedValue.set(value);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -677,16 +693,40 @@ class ComDatepicker {
         if (this.disabled() || this.isOpen()) {
             return;
         }
+        this.committedValue.set(this.value());
         this.createOverlay();
         this.isOpen.set(true);
         this.opened.emit();
         this.announce('Calendar opened');
     }
-    /** Closes the datepicker panel. */
+    /** Closes the datepicker panel. Reverts buffered changes when `commitOnClose` is active. */
     close() {
         if (!this.isOpen()) {
             return;
         }
+        // Revert to committed value when commitOnClose is active
+        if (this.commitOnClose()) {
+            this.internalValue.set(this.committedValue());
+            this.announce('Changes discarded');
+        }
+        this.destroyOverlay();
+        this.isOpen.set(false);
+        this.closed.emit();
+        this.onTouched();
+        this.touched.set(true);
+        // Return focus to trigger
+        this.inputRef().nativeElement.focus();
+    }
+    /** Commits the buffered value and closes the panel. Called by the Done button. */
+    commitAndClose() {
+        if (!this.isOpen()) {
+            return;
+        }
+        // Commit the buffered value before closing
+        if (this.commitOnClose()) {
+            this.updateValue(this.internalValue());
+            this.announce('Date confirmed');
+        }
         this.destroyOverlay();
         this.isOpen.set(false);
         this.closed.emit();
@@ -704,17 +744,27 @@ class ComDatepicker {
             this.open();
         }
     }
-    /** Clears the selected date. */
+    /** Clears the selected date. Buffered when commitOnClose is active and panel is open. */
     clear(event) {
         event?.preventDefault();
         event?.stopPropagation();
-        this.updateValue(null);
+        if (this.commitOnClose() && this.isOpen()) {
+            this.internalValue.set(null);
+        }
+        else {
+            this.updateValue(null);
+        }
         this.announce('Date cleared');
     }
-    /** Selects today's date. */
+    /** Selects today's date. Buffered when commitOnClose is active and panel is open. */
     selectToday() {
         const today = this.dateAdapter.today();
-        this.updateValue(today);
+        if (this.commitOnClose() && this.isOpen()) {
+            this.internalValue.set(today);
+        }
+        else {
+            this.updateValue(today);
+        }
         if (!this.effectiveKeepOpen()) {
             this.close();
         }
@@ -795,18 +845,18 @@ class ComDatepicker {
     }
     onDateSelected(date) {
         // Preserve time when selecting a new date if time picker is shown
+        let resolvedDate = date;
         if (this.showTimePicker()) {
             const currentValue = this.internalValue();
             if (currentValue) {
-                const withTime = this.dateAdapter.setTime(date, this.dateAdapter.getHours(currentValue), this.dateAdapter.getMinutes(currentValue), this.dateAdapter.getSeconds(currentValue));
-                this.updateValue(withTime);
-            }
-            else {
-                this.updateValue(date);
+                resolvedDate = this.dateAdapter.setTime(date, this.dateAdapter.getHours(currentValue), this.dateAdapter.getMinutes(currentValue), this.dateAdapter.getSeconds(currentValue));
             }
         }
+        if (this.commitOnClose() && this.isOpen()) {
+            this.internalValue.set(resolvedDate);
+        }
         else {
-            this.updateValue(date);
+            this.updateValue(resolvedDate);
         }
         if (!this.effectiveKeepOpen()) {
             this.close();
@@ -818,7 +868,12 @@ class ComDatepicker {
             return;
         const current = this.internalValue() ?? this.dateAdapter.today();
         const updated = this.dateAdapter.setTime(current, time.hours, time.minutes, time.seconds);
-        this.updateValue(updated);
+        if (this.commitOnClose() && this.isOpen()) {
+            this.internalValue.set(updated);
+        }
+        else {
+            this.updateValue(updated);
+        }
     }
     onActiveDateChange(date) {
         this.calendarActiveDate.set(date);
@@ -893,10 +948,16 @@ class ComDatepicker {
         this.onValidatorChange();
     }
     parseAndSetValue(inputValue) {
+        const shouldBuffer = this.commitOnClose() && this.isOpen();
         if (!inputValue.trim()) {
             // Empty input - clear if allowed
             if (this.hasValue()) {
-                this.updateValue(null);
+                if (shouldBuffer) {
+                    this.internalValue.set(null);
+                }
+                else {
+                    this.updateValue(null);
+                }
             }
             return;
         }
@@ -904,7 +965,12 @@ class ComDatepicker {
         if (parsed && this.dateAdapter.isValid(parsed)) {
             // Validate against min/max/filter
             if (this.isDateValid(parsed)) {
-                this.updateValue(parsed);
+                if (shouldBuffer) {
+                    this.internalValue.set(parsed);
+                }
+                else {
+                    this.updateValue(parsed);
+                }
             }
             else {
                 // Invalid date - revert to current value
@@ -935,7 +1001,7 @@ class ComDatepicker {
         this.liveAnnouncement.set(message);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDatepicker, isStandalone: true, selector: "com-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showTimePicker: { classPropertyName: "showTimePicker", publicName: "showTimePicker", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", dateChange: "dateChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-datepicker-disabled": "disabled()", "class.com-datepicker-open": "isOpen()" }, classAttribute: "com-datepicker-host inline-block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDatepicker, isStandalone: true, selector: "com-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showTimePicker: { classPropertyName: "showTimePicker", publicName: "showTimePicker", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, commitOnClose: { classPropertyName: "commitOnClose", publicName: "commitOnClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", dateChange: "dateChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-datepicker-disabled": "disabled()", "class.com-datepicker-open": "isOpen()" }, classAttribute: "com-datepicker-host inline-block" }, providers: [
             SingleSelectionStrategy,
             { provide: CALENDAR_SELECTION_STRATEGY, useExisting: SingleSelectionStrategy },
             { provide: FormFieldControl, useExisting: forwardRef(() => ComDatepicker) },
@@ -1037,7 +1103,7 @@ class ComDatepicker {
           </div>
         }
 
-        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker() || commitOnClose()) {
           <div [class]="footerClasses()">
             @if (showTodayButton()) {
               <button
@@ -1057,11 +1123,11 @@ class ComDatepicker {
                 Clear
               </button>
             }
-            @if (showTimePicker()) {
+            @if (showTimePicker() || commitOnClose()) {
               <button
                 type="button"
                 [class]="todayButtonClasses()"
-                (click)="close()"
+                (click)="commitAndClose()"
               >
                 Done
               </button>
@@ -1177,7 +1243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           </div>
         }
 
-        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker() || commitOnClose()) {
           <div [class]="footerClasses()">
             @if (showTodayButton()) {
               <button
@@ -1197,11 +1263,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 Clear
               </button>
             }
-            @if (showTimePicker()) {
+            @if (showTimePicker() || commitOnClose()) {
               <button
                 type="button"
                 [class]="todayButtonClasses()"
-                (click)="close()"
+                (click)="commitAndClose()"
               >
                 Done
               </button>
@@ -1230,7 +1296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[class.com-datepicker-disabled]': 'disabled()',
                         '[class.com-datepicker-open]': 'isOpen()',
                     }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePicker", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePicker", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], commitOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnClose", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /** Default position for the datepicker panel. */
 const DEFAULT_POSITIONS = [
@@ -1355,6 +1421,16 @@ class ComDateRangePicker {
     showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
     /** Step interval for minutes in the time pickers. */
     minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
+    /**
+     * When true, range/time selections while the panel is open update only the visual state.
+     * The value is committed (emitted via `rangeChange`, propagated to forms) only when
+     * the user presses "Done". Closing via Escape or backdrop click reverts to the
+     * pre-open value without emitting.
+     *
+     * All in-panel actions (range selection, time change, today, footer clear) are buffered.
+     * The trigger clear button (panel closed) always commits immediately.
+     */
+    commitOnClose = input(false, ...(ngDevMode ? [{ debugName: "commitOnClose" }] : []));
     // ============ OUTPUTS ============
     /** Emitted when a complete range is selected. */
     rangeChange = output();
@@ -1372,6 +1448,11 @@ class ComDateRangePicker {
     /** Calendar active date for navigation. Recomputes when value or startAt changes; user navigation overrides via .set(). */
     calendarActiveDate = linkedSignal({ ...(ngDevMode ? { debugName: "calendarActiveDate" } : {}), source: () => ({ value: this.internalValue(), startAt: this.startAt() }),
         computation: ({ value, startAt }) => value?.start ?? startAt ?? this.dateAdapter.today() });
+    /**
+     * Snapshot of the value when the panel was opened.
+     * Used by `commitOnClose` to revert on Escape/backdrop close.
+     */
+    committedValue = signal(null, ...(ngDevMode ? [{ debugName: "committedValue" }] : []));
     /** Live announcements for screen readers. */
     liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
     /** Whether any input is focused. */
@@ -1531,9 +1612,9 @@ class ComDateRangePicker {
         }
         return this.dateFormat();
     }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : []));
-    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    /** Whether the panel should stay open (keepOpen, time picker shown, or commitOnClose). */
     effectiveKeepOpen = computed(() => {
-        return this.keepOpen() || this.showTimePicker();
+        return this.keepOpen() || this.showTimePicker() || this.commitOnClose();
     }, ...(ngDevMode ? [{ debugName: "effectiveKeepOpen" }] : []));
     // ============ CVA CALLBACKS ============
     onChange = () => { };
@@ -1551,6 +1632,7 @@ class ComDateRangePicker {
     // ============ CVA IMPLEMENTATION ============
     writeValue(value) {
         this.internalValue.set(value);
+        this.committedValue.set(value);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1604,16 +1686,46 @@ class ComDateRangePicker {
         if (this.disabled() || this.isOpen()) {
             return;
         }
+        this.committedValue.set(this.value());
         this.createOverlay();
         this.isOpen.set(true);
         this.opened.emit();
         this.announce('Calendar opened. Select a start date.');
     }
-    /** Closes the datepicker panel. */
+    /** Closes the datepicker panel. Reverts buffered changes when `commitOnClose` is active. */
     close() {
         if (!this.isOpen()) {
             return;
         }
+        // Revert to committed value when commitOnClose is active
+        if (this.commitOnClose()) {
+            this.internalValue.set(this.committedValue());
+            this.announce('Changes discarded');
+        }
+        this.destroyOverlay();
+        this.isOpen.set(false);
+        this.closed.emit();
+        this.onTouched();
+        this.touched.set(true);
+        // Return focus to appropriate input
+        const activeInput = this.activeInput();
+        if (activeInput === 'end') {
+            this.endInputRef().nativeElement.focus();
+        }
+        else {
+            this.startInputRef().nativeElement.focus();
+        }
+    }
+    /** Commits the buffered value and closes the panel. Called by the Done button. */
+    commitAndClose() {
+        if (!this.isOpen()) {
+            return;
+        }
+        // Commit the buffered value before closing
+        if (this.commitOnClose()) {
+            this.updateValue(this.internalValue());
+            this.announce('Date range confirmed');
+        }
         this.destroyOverlay();
         this.isOpen.set(false);
         this.closed.emit();
@@ -1637,20 +1749,31 @@ class ComDateRangePicker {
             this.open();
         }
     }
-    /** Clears the selected date range. */
+    /** Clears the selected date range. Buffered when commitOnClose is active and panel is open. */
     clear(event) {
         event?.preventDefault();
         event?.stopPropagation();
-        this.updateValue(null);
+        if (this.commitOnClose() && this.isOpen()) {
+            this.internalValue.set(null);
+        }
+        else {
+            this.updateValue(null);
+        }
         this.announce('Date range cleared');
     }
-    /** Selects today's date as the start date. */
+    /** Selects today's date as the start date. Buffered when commitOnClose is active and panel is open. */
     selectToday() {
         const today = this.dateAdapter.today();
         const currentValue = this.internalValue();
+        const shouldBuffer = this.commitOnClose() && this.isOpen();
         // Set today as start if no start, or as end if we have a start
         if (!currentValue?.start) {
-            this.updateValue(createDateRangeValue(today, null));
+            if (shouldBuffer) {
+                this.internalValue.set(createDateRangeValue(today, null));
+            }
+            else {
+                this.updateValue(createDateRangeValue(today, null));
+            }
             this.announce('Start date set to today');
         }
         else if (!currentValue.end) {
@@ -1658,7 +1781,12 @@ class ComDateRangePicker {
             const newRange = this.dateAdapter.compareDate(today, currentValue.start) < 0
                 ? createDateRangeValue(today, currentValue.start)
                 : createDateRangeValue(currentValue.start, today);
-            this.updateValue(newRange);
+            if (shouldBuffer) {
+                this.internalValue.set(newRange);
+            }
+            else {
+                this.updateValue(newRange);
+            }
             if (!this.effectiveKeepOpen()) {
                 this.close();
             }
@@ -1757,7 +1885,12 @@ class ComDateRangePicker {
         const range = selection;
         if (range) {
             const newValue = createDateRangeValue(range.start, range.end);
-            this.updateValue(newValue);
+            if (this.commitOnClose() && this.isOpen()) {
+                this.internalValue.set(newValue);
+            }
+            else {
+                this.updateValue(newValue);
+            }
             if (range.start && range.end) {
                 // Complete range selected
                 this.announce(`Range selected: ${this.formatDate(range.start)} to ${this.formatDate(range.end)}`);
@@ -1779,7 +1912,13 @@ class ComDateRangePicker {
         const value = this.internalValue();
         const startDate = value?.start ?? this.dateAdapter.today();
         const updated = this.dateAdapter.setTime(startDate, time.hours, time.minutes, time.seconds);
-        this.updateValue(createDateRangeValue(updated, value?.end ?? null));
+        const newValue = createDateRangeValue(updated, value?.end ?? null);
+        if (this.commitOnClose() && this.isOpen()) {
+            this.internalValue.set(newValue);
+        }
+        else {
+            this.updateValue(newValue);
+        }
     }
     onEndTimeChange(time) {
         if (!time)
@@ -1787,7 +1926,13 @@ class ComDateRangePicker {
         const value = this.internalValue();
         const endDate = value?.end ?? this.dateAdapter.today();
         const updated = this.dateAdapter.setTime(endDate, time.hours, time.minutes, time.seconds);
-        this.updateValue(createDateRangeValue(value?.start ?? null, updated));
+        const newValue = createDateRangeValue(value?.start ?? null, updated);
+        if (this.commitOnClose() && this.isOpen()) {
+            this.internalValue.set(newValue);
+        }
+        else {
+            this.updateValue(newValue);
+        }
     }
     // ============ FormFieldControl IMPLEMENTATION ============
     /**
@@ -1861,22 +2006,35 @@ class ComDateRangePicker {
     }
     parseAndSetStart(inputValue) {
         const currentValue = this.internalValue();
+        const shouldBuffer = this.commitOnClose() && this.isOpen();
         if (!inputValue.trim()) {
             // Clear start date
             if (currentValue?.start) {
-                this.updateValue(createDateRangeValue(null, currentValue.end));
+                const newValue = createDateRangeValue(null, currentValue.end);
+                if (shouldBuffer) {
+                    this.internalValue.set(newValue);
+                }
+                else {
+                    this.updateValue(newValue);
+                }
             }
             return;
         }
         const parsed = this.dateAdapter.parse(inputValue, this.effectiveDateFormat());
         if (parsed && this.dateAdapter.isValid(parsed) && this.isDateValid(parsed)) {
             // Ensure start <= end
+            let newValue;
             if (currentValue?.end && this.dateAdapter.compareDate(parsed, currentValue.end) > 0) {
-                // Swap dates
-                this.updateValue(createDateRangeValue(currentValue.end, parsed));
+                newValue = createDateRangeValue(currentValue.end, parsed);
+            }
+            else {
+                newValue = createDateRangeValue(parsed, currentValue?.end ?? null);
+            }
+            if (shouldBuffer) {
+                this.internalValue.set(newValue);
             }
             else {
-                this.updateValue(createDateRangeValue(parsed, currentValue?.end ?? null));
+                this.updateValue(newValue);
             }
         }
         else {
@@ -1886,22 +2044,35 @@ class ComDateRangePicker {
     }
     parseAndSetEnd(inputValue) {
         const currentValue = this.internalValue();
+        const shouldBuffer = this.commitOnClose() && this.isOpen();
         if (!inputValue.trim()) {
             // Clear end date
             if (currentValue?.end) {
-                this.updateValue(createDateRangeValue(currentValue.start, null));
+                const newValue = createDateRangeValue(currentValue.start, null);
+                if (shouldBuffer) {
+                    this.internalValue.set(newValue);
+                }
+                else {
+                    this.updateValue(newValue);
+                }
             }
             return;
         }
         const parsed = this.dateAdapter.parse(inputValue, this.effectiveDateFormat());
         if (parsed && this.dateAdapter.isValid(parsed) && this.isDateValid(parsed)) {
             // Ensure start <= end
+            let newValue;
             if (currentValue?.start && this.dateAdapter.compareDate(parsed, currentValue.start) < 0) {
-                // Swap dates
-                this.updateValue(createDateRangeValue(parsed, currentValue.start));
+                newValue = createDateRangeValue(parsed, currentValue.start);
+            }
+            else {
+                newValue = createDateRangeValue(currentValue?.start ?? null, parsed);
+            }
+            if (shouldBuffer) {
+                this.internalValue.set(newValue);
             }
             else {
-                this.updateValue(createDateRangeValue(currentValue?.start ?? null, parsed));
+                this.updateValue(newValue);
             }
         }
         else {
@@ -1931,7 +2102,7 @@ class ComDateRangePicker {
         this.liveAnnouncement.set(message);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDateRangePicker, isStandalone: true, selector: "com-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showTimePicker: { classPropertyName: "showTimePicker", publicName: "showTimePicker", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", rangeChange: "rangeChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-date-range-picker-disabled": "disabled()", "class.com-date-range-picker-open": "isOpen()" }, classAttribute: "com-date-range-picker-host inline-block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDateRangePicker, isStandalone: true, selector: "com-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showTimePicker: { classPropertyName: "showTimePicker", publicName: "showTimePicker", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, commitOnClose: { classPropertyName: "commitOnClose", publicName: "commitOnClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", rangeChange: "rangeChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-date-range-picker-disabled": "disabled()", "class.com-date-range-picker-open": "isOpen()" }, classAttribute: "com-date-range-picker-host inline-block" }, providers: [
             RangeSelectionStrategy,
             { provide: CALENDAR_SELECTION_STRATEGY, useExisting: RangeSelectionStrategy },
             { provide: FormFieldControl, useExisting: forwardRef(() => ComDateRangePicker) },
@@ -2080,7 +2251,7 @@ class ComDateRangePicker {
           </div>
         }
 
-        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker() || commitOnClose()) {
           <div [class]="footerClasses()">
             @if (showTodayButton()) {
               <button
@@ -2100,11 +2271,11 @@ class ComDateRangePicker {
                 Clear
               </button>
             }
-            @if (showTimePicker()) {
+            @if (showTimePicker() || commitOnClose()) {
               <button
                 type="button"
                 [class]="todayButtonClasses()"
-                (click)="close()"
+                (click)="commitAndClose()"
               >
                 Done
               </button>
@@ -2267,7 +2438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           </div>
         }
 
-        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker() || commitOnClose()) {
           <div [class]="footerClasses()">
             @if (showTodayButton()) {
               <button
@@ -2287,11 +2458,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 Clear
               </button>
             }
-            @if (showTimePicker()) {
+            @if (showTimePicker() || commitOnClose()) {
               <button
                 type="button"
                 [class]="todayButtonClasses()"
-                (click)="close()"
+                (click)="commitAndClose()"
               >
                 Done
               </button>
@@ -2320,7 +2491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[class.com-date-range-picker-disabled]': 'disabled()',
                         '[class.com-date-range-picker-open]': 'isOpen()',
                     }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], startInputRef: [{ type: i0.ViewChild, args: ['startInputElement', { isSignal: true }] }], endInputRef: [{ type: i0.ViewChild, args: ['endInputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePicker", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], startInputRef: [{ type: i0.ViewChild, args: ['startInputElement', { isSignal: true }] }], endInputRef: [{ type: i0.ViewChild, args: ['endInputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePicker", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], commitOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnClose", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * Datepicker components public API.