@ascentgl/ads-ui 21.83.0 → 21.84.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -5676,13 +5676,23 @@ class AdsDatetimepickerComponent extends AbstractInputComponent {
     /** @ignore */
     onChanged(event) {
         const value = event === null ? null : typeof event == 'string' ? event : event.value;
+        const inputHasContent = !!this.input?.nativeElement.value;
         /**
          * sync valueControl errors with displayControl errors
          * NOTE: this is needed for "invalid format" errors that are calculated for displayControl
          * by MatDatetimepicker component
          */
-        this.valueControl.setErrors(this.displayControl.errors);
+        if (inputHasContent && this.displayControl.errors) {
+            // Input has content — propagate displayControl errors (including matDatepickerParse)
+            this.valueControl.setErrors(this.displayControl.errors);
+        }
         this.onDisplayedValueChange(value ? new Date(value) : null);
+        // Re-validate valueControl so its own validators (e.g. required) run,
+        // clearing any stale errors set via setErrors above.
+        this.valueControl.updateValueAndValidity({ emitEvent: false });
+        // Directly call syncState because statusChanges may not fire if
+        // the status hasn't changed (e.g., was already INVALID).
+        this.syncState(this.valueControl.status);
     }
     onViewChanged(view) {
         this.templateFormatter.run(view);
@@ -5776,8 +5786,24 @@ class AdsDatetimepickerComponent extends AbstractInputComponent {
     }
     syncState(status) {
         if (status === 'INVALID') {
-            this.displayControl.setErrors(this.valueControl.errors);
-            this.touchControls();
+            const errors = { ...this.valueControl.errors };
+            const inputHasContent = !!this.input?.nativeElement.value;
+            // When the input has visible content but the control value is null,
+            // the user typed a partial/invalid date. Show format error instead
+            // of "required", since the field is not actually empty from the user's perspective.
+            if (inputHasContent && !this.displayControl.value) {
+                // Prefer existing parse error from displayControl, otherwise create one.
+                const existingParseError = this.displayControl.errors?.matDatepickerParse;
+                errors['matDatepickerParse'] = existingParseError ?? { text: this.input?.nativeElement.value };
+            }
+            // When the input is empty, make sure stale parse errors are not carried over
+            // from valueControl (which may have received them via setErrors in onChanged).
+            if (!inputHasContent) {
+                delete errors['matDatepickerParse'];
+            }
+            // Angular treats an empty object as "has errors" (truthy), so normalize to null.
+            const finalErrors = Object.keys(errors).length > 0 ? errors : null;
+            this.displayControl.setErrors(finalErrors);
         }
         else {
             // Clear errors correctly (Angular expects null, not [])
@@ -5830,6 +5856,12 @@ class AdsDatetimepickerComponent extends AbstractInputComponent {
     syncEmptyValues() {
         if (this.valueControl.value)
             return false;
+        // When the input has user-typed content that failed parsing (e.g., partial date '03/10/202'),
+        // displayControl is already null (set by mat-datetimepicker's _cvaOnChange(null)).
+        // Don't clear the display — the user's text should stay so the format error is visible.
+        // But when displayControl still holds a value (e.g., external form reset), allow clearing.
+        if (this.input?.nativeElement.value && !this.displayControl.value)
+            return true;
         this.setControlValue(this.displayControl, this.valueControl.value, false);
         return true;
     }
@@ -6018,6 +6050,8 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
         };
         /** @ignore - Previous raw input value for tracking changes */
         this.previousRawValue = '';
+        /** @ignore - Tracks whether the input was modified by the custom keydown handler */
+        this.inputModifiedByKeyHandler = false;
         /** @ignore */
         this.elementRef = inject(ElementRef);
     }
@@ -6048,6 +6082,18 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
         });
         this.intersectionObserver.observe(this.elementRef.nativeElement);
     }
+    /** @ignore - Override to dispatch change event on blur when input was modified programmatically */
+    touchControls() {
+        // Mark controls as touched BEFORE dispatching the change event.
+        // onChanged → syncState → super.syncState() checks valueControl.untouched
+        // and clears displayControl if it's touched+invalid — so valueControl must
+        // be touched first to prevent the user's partial input from being wiped.
+        super.touchControls();
+        if (this.inputModifiedByKeyHandler && this.input) {
+            this.inputModifiedByKeyHandler = false;
+            this.input.nativeElement.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
     /** @ignore */
     applyCustomFormat() {
         this.customDisplayFormatOverride = {};
@@ -6180,6 +6226,8 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
             newCursorPos++;
         }
         input.setSelectionRange(newCursorPos, newCursorPos);
+        // Mark that the input was modified programmatically
+        this.inputModifiedByKeyHandler = true;
         // Trigger change detection
         input.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -6198,6 +6246,8 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
         // Adjust cursor position
         const newCursorPos = Math.min(cursorPos, formatted.length);
         input.setSelectionRange(newCursorPos, newCursorPos);
+        // Mark that the input was modified programmatically
+        this.inputModifiedByKeyHandler = true;
         input.dispatchEvent(new Event('input', { bubbles: true }));
     }
     /** @ignore - Format digits with slashes (MM/DD/YYYY) */