@skyux/datetime 15.0.0-alpha.3 → 15.0.0-alpha.4

package/fesm2022/skyux-datetime.mjs

@@ -5071,8 +5071,11 @@ class SkyTimepickerInputDirective {
         return this.#_modelValue;
     }
     set #modelValue(value) {
-        if (value !== this.#_modelValue) {
+        // A retained invalid entry must be cleaned up even when the model value is
+        // unchanged (e.g. a form reset while `undefined` is the model value).
+        if (value !== this.#_modelValue || this.#hasRetainedInvalidValue) {
             this.#_modelValue = value;
+            this.#hasRetainedInvalidValue = false;
             this.#updateTimepickerInput();
             this.#setInputValue(value);
             this.#_validatorChange();
@@ -5083,6 +5086,8 @@ class SkyTimepickerInputDirective {
     #_disabled = false;
     #_modelValue;
     #_skyTimepickerInput;
+    // Set while an invalid entry is retained on the control instead of cleared.
+    #hasRetainedInvalidValue = false;
     #renderer = inject(Renderer2);
     #elRef = inject(ElementRef);
     #changeDetector = inject(ChangeDetectorRef);
@@ -5098,7 +5103,12 @@ class SkyTimepickerInputDirective {
         // Watch for the control to be added and initialize the value immediately.
         /* istanbul ignore else */
         if (this.#control && this.#control.parent) {
-            this.#control.setValue(this.#modelValue, { emitEvent: false });
+            // When an invalid entry is being retained, the raw string is already on
+            // the control and flagged invalid by the validator; overwriting it with
+            // the (undefined) model value would discard the entry and clear the error.
+            if (!this.#hasRetainedInvalidValue) {
+                this.#control.setValue(this.#modelValue, { emitEvent: false });
+            }
             this.#changeDetector.markForCheck();
         }
     }
@@ -5134,7 +5144,16 @@ class SkyTimepickerInputDirective {
         this.disabled = isDisabled;
     }
     writeValue(value) {
-        this.#modelValue = this.#formatter(value);
+        const formatted = this.#formatter(value);
+        // Keep invalid entries in the input instead of clearing them so the user
+        // can see and correct their entry (matching the datepicker's behavior).
+        if (typeof value === 'string' &&
+            value.length > 0 &&
+            formatted.local === 'Invalid date') {
+            this.#applyInvalidValue(value);
+            return;
+        }
+        this.#modelValue = formatted;
     }
     validate(control) {
         if (!this.#control) {
@@ -5144,12 +5163,35 @@ class SkyTimepickerInputDirective {
         if (!value) {
             return null;
         }
+        // A raw string value only remains on the control when it could not be
+        // parsed into a time and was retained as-is.
+        if (typeof value === 'string') {
+            if (this.#formatter(value).local === 'Invalid date') {
+                // Mark as touched so the invalid CSS styles appear even when the value
+                // is set programmatically.
+                this.#control.markAsTouched();
+                return { skyTime: { invalid: value } };
+            }
+            return null;
+        }
         /* istanbul ignore next */
         if (value.local === 'Invalid date') {
             return { skyTime: { invalid: control.value } };
         }
         return null;
     }
+    #applyInvalidValue(rawValue) {
+        // There is no valid model value while an invalid entry is retained.
+        this.#_modelValue = undefined;
+        this.#hasRetainedInvalidValue = true;
+        // Keep the user's raw entry in the input element.
+        this.#renderer.setProperty(this.#elRef.nativeElement, 'value', rawValue);
+        // Push the raw string to the form control and re-run validation. The
+        // validator supplies the `skyTime` error, so we avoid calling `setErrors`
+        // here to preserve any errors contributed by other validators.
+        this.#_onChange(rawValue);
+        this.#_validatorChange();
+    }
     #setInputValue(value) {
         let formattedValue = '';
         if (value) {