@skyux/datetime 14.9.2 → 14.11.0

package/fesm2022/skyux-datetime.mjs

@@ -5014,7 +5014,34 @@ const SKY_TIMEPICKER_VALIDATOR = {
     multi: true,
 };
 class SkyTimepickerInputDirective {
-    #_timeFormat = 'hh';
+    constructor() {
+        this.#_timeFormat = 'hh';
+        /**
+         * Whether to retain invalid entries in the input when it loses focus. When
+         * set to `true`, an invalid value remains in the field and the associated
+         * form control is flagged with a `skyTime` error, matching the behavior of
+         * the datepicker.
+         * @default false
+         */
+        this.skyTimepickerRetainInvalidValues = input(false, { ...(ngDevMode ? { debugName: "skyTimepickerRetainInvalidValues" } : {}), transform: booleanAttribute });
+        this.#_disabled = false;
+        // Set while an invalid entry is retained on the control instead of cleared
+        // (only when clearing invalid values is disabled).
+        this.#hasRetainedInvalidValue = false;
+        this.#renderer = inject(Renderer2);
+        this.#elRef = inject(ElementRef);
+        this.#changeDetector = inject(ChangeDetectorRef);
+        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+        this.#_onChange = (_) => { };
+        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.#_onTouched = () => { };
+        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.#_validatorChange = () => { };
+    }
+    #_timeFormat;
     // TODO: In a future breaking change - grab the parent component through dependency injection and remove this setter.
     // Also remove the HostBinding that references it.
     /**
@@ -5061,8 +5088,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();
@@ -5070,12 +5100,15 @@ class SkyTimepickerInputDirective {
         }
     }
     #control;
-    #_disabled = false;
+    #_disabled;
     #_modelValue;
     #_skyTimepickerInput;
-    #renderer = inject(Renderer2);
-    #elRef = inject(ElementRef);
-    #changeDetector = inject(ChangeDetectorRef);
+    // Set while an invalid entry is retained on the control instead of cleared
+    // (only when clearing invalid values is disabled).
+    #hasRetainedInvalidValue;
+    #renderer;
+    #elRef;
+    #changeDetector;
     ngOnInit() {
         this.#renderer.addClass(this.#elRef.nativeElement, 'sky-form-control');
         this.pickerChangedSubscription =
@@ -5088,7 +5121,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();
         }
     }
@@ -5124,7 +5162,18 @@ class SkyTimepickerInputDirective {
         this.disabled = isDisabled;
     }
     writeValue(value) {
-        this.#modelValue = this.#formatter(value);
+        const formatted = this.#formatter(value);
+        // When retaining is enabled, 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 (this.skyTimepickerRetainInvalidValues() &&
+            typeof value === 'string' &&
+            value.length > 0 &&
+            formatted.local === 'Invalid date') {
+            this.#applyInvalidValue(value);
+            return;
+        }
+        this.#modelValue = formatted;
     }
     validate(control) {
         if (!this.#control) {
@@ -5134,12 +5183,35 @@ class SkyTimepickerInputDirective {
         if (!value) {
             return null;
         }
+        // A raw string value only remains on the control when retaining invalid
+        // values is enabled.
+        if (typeof value === 'string' && this.skyTimepickerRetainInvalidValues()) {
+            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) {
@@ -5187,15 +5259,15 @@ class SkyTimepickerInputDirective {
     }
     /* istanbul ignore next */
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-    #_onChange = (_) => { };
+    #_onChange;
     /* istanbul ignore next */
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    #_onTouched = () => { };
+    #_onTouched;
     /* istanbul ignore next */
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    #_validatorChange = () => { };
+    #_validatorChange;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTimepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: SkyTimepickerInputDirective, isStandalone: true, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" }, properties: { "attr.skyTimepickerInput": "this.hostTimepickerInput" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: SkyTimepickerInputDirective, isStandalone: true, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: { classPropertyName: "skyTimepickerInput", publicName: "skyTimepickerInput", isSignal: false, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: false, isRequired: false, transformFunction: null }, returnFormat: { classPropertyName: "returnFormat", publicName: "returnFormat", isSignal: false, isRequired: false, transformFunction: null }, skyTimepickerRetainInvalidValues: { classPropertyName: "skyTimepickerRetainInvalidValues", publicName: "skyTimepickerRetainInvalidValues", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" }, properties: { "attr.skyTimepickerInput": "this.hostTimepickerInput" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
             type: Directive,
@@ -5212,7 +5284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 type: Input
             }], returnFormat: [{
                 type: Input
-            }], disabled: [{
+            }], skyTimepickerRetainInvalidValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "skyTimepickerRetainInvalidValues", required: false }] }], disabled: [{
                 type: Input
             }], onChange: [{
                 type: HostListener,