@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-timepicker.mjs

@@ -1,12 +1,12 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { _IdGenerator, A11yModule } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { forwardRef, inject, ElementRef, Renderer2, output, Input, Directive, NgModule } from '@angular/core';
+import { forwardRef, InjectionToken, inject, ElementRef, Renderer2, signal, input, computed, booleanAttribute, linkedSignal, output, effect, untracked, Directive, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormGroupDirective, NgForm, FormsModule } from '@angular/forms';
-import { validationTooltipShowDelay, validationTooltipHideDelay, kbqRevealSelection, DateAdapter, KBQ_LOCALE_SERVICE, KbqDateTimezoneService, KbqErrorStateTracker, ErrorStateMatcher, isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE, TAB, SPACE, HOME, PAGE_UP, END, PAGE_DOWN, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, kbqSetSelectionRange } from '@koobiq/components/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormGroupDirective, NgForm, Validators, FormsModule } from '@angular/forms';
+import * as i1 from '@koobiq/components/core';
+import { ruRULocaleData, kbqLocaleConfigurationOverrideProvider, kbqRevealSelection, DateAdapter, KbqDateTimezoneService, KbqLocaleOverridesDirective, KbqErrorStateTracker, ErrorStateMatcher, validationTooltipShowDelay, validationTooltipHideDelay, isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE, TAB, SPACE, HOME, PAGE_UP, END, PAGE_DOWN, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, kbqSetSelectionRange } from '@koobiq/components/core';
 import { KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
-import { Subject, Subscription, noop } from 'rxjs';
-import { A11yModule } from '@angular/cdk/a11y';
+import { noop } from 'rxjs';
 import { PlatformModule } from '@angular/cdk/platform';
 
 var TimeParts;
@@ -50,141 +50,39 @@ const KBQ_TIMEPICKER_VALIDATORS = {
     useExisting: forwardRef(() => KbqTimepicker),
     multi: true
 };
-let uniqueComponentIdSuffix = 0;
+/**
+ * Default configuration of the timepicker.
+ *
+ * @docs-private
+ */
+const KBQ_TIMEPICKER_DEFAULT_LOCALE_CONFIGURATION = ruRULocaleData.timepicker;
+/**
+ * Injection token for providing the default configuration of the timepicker.
+ *
+ * @docs-private
+ */
+const KBQ_TIMEPICKER_LOCALE_CONFIGURATION = new InjectionToken('KbqTimepickerLocaleConfiguration', { factory: () => KBQ_TIMEPICKER_DEFAULT_LOCALE_CONFIGURATION });
+/**
+ * Utility provider for `KBQ_TIMEPICKER_LOCALE_CONFIGURATION`. Only the strings you pass are overridden; the rest
+ * keep following the active locale.
+ */
+const kbqTimepickerLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('timepicker', configuration);
 const shortFormatSize = 5;
 const fullFormatSize = 8;
 /** Maximum number of digits in a single time part */
 const timePartLength = 2;
+/** Coerces a time format, falling back to the default for anything the enum does not name. */
+const timeFormatAttribute = (value) => Object.values(TimeFormats).includes(value) ? value : DEFAULT_TIME_FORMAT;
 class KbqTimepicker {
-    /** Object used to control when error messages are shown. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get errorStateMatcher() {
-        return this.errorStateTracker.errorStateMatcher;
-    }
-    set errorStateMatcher(value) {
-        this.errorStateTracker.errorStateMatcher = value;
-    }
-    /**
-     * Implemented as part of KbqFormFieldControl.
-     * @docs-private
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
-        this.defaultPlaceholder = false;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        // Browsers may not fire the blur event if the input is disabled too quickly.
-        // Reset from here to ensure that the element doesn't become stuck.
-        if (this.focused) {
-            this.focused = false;
-        }
-        this.stateChanges.next();
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get id() {
-        return this._id;
-    }
-    set id(value) {
-        this._id = value || this.uid;
-    }
-    /**
-     * Implemented as part of KbqFormFieldControl.
-     * @docs-private
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get format() {
-        return this._format;
-    }
-    set format(formatValue) {
-        this._format =
-            Object.keys(TimeFormats)
-                .map((timeFormatKey) => TimeFormats[timeFormatKey])
-                .indexOf(formatValue) > -1
-                ? formatValue
-                : DEFAULT_TIME_FORMAT;
-        if (this.defaultPlaceholder) {
-            this._placeholder = this.timeFormatPlaceholder;
-        }
-        if (this.value) {
-            this.updateView();
-        }
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get min() {
-        return this._min;
-    }
-    set min(value) {
-        this._min = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-        this.validatorOnChange();
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get max() {
-        return this._max;
-    }
-    set max(value) {
-        this._max = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-        this.validatorOnChange();
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        const newValue = this.dateAdapter.deserialize(value);
-        this.lastValueValid = !newValue || this.dateAdapter.isValid(newValue);
-        this._value = this.getValidDateOrNull(newValue);
-        this.updateView();
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set kbqValidationTooltip(tooltip) {
-        if (!tooltip) {
-            return;
-        }
-        tooltip.enterDelay = validationTooltipShowDelay;
-        tooltip.trigger = 'manual';
-        tooltip.initListeners();
-        this.incorrectInput.subscribe(() => {
-            if (tooltip.isOpen) {
-                return;
-            }
-            tooltip.show();
-            setTimeout(() => tooltip.hide(), validationTooltipHideDelay);
-        });
-    }
+    // TODO: nothing in the library uses it; kept as public API at the DS-2196 review. Document or deprecate it.
     get hasSelection() {
         return this.selectionStart !== this.selectionEnd;
     }
     get isFullFormat() {
-        return this.format === TimeFormats.HHmmss;
+        return this.format() === TimeFormats.HHmmss;
     }
     get isShortFormat() {
-        return this.format === TimeFormats.HHmm;
+        return this.format() === TimeFormats.HHmm;
     }
     get viewValue() {
         return this.elementRef.nativeElement.value;
@@ -192,13 +90,6 @@ class KbqTimepicker {
     get ngControl() {
         return this.control;
     }
-    /**
-     * Implemented as part of KbqFormFieldControl.
-     * @docs-private
-     */
-    get empty() {
-        return !this.viewValue && !this.isBadInput();
-    }
     get selectionStart() {
         return this.elementRef.nativeElement.selectionStart;
     }
@@ -215,54 +106,93 @@ class KbqTimepicker {
     }
     /** Localized placeholder */
     get timeFormatPlaceholder() {
-        return (this.localeService?.getParams('timepicker')?.placeholder[TimeFormatToLocaleKeys[this.format]] ||
-            TIMEFORMAT_PLACEHOLDERS[this.format]);
-    }
-    /** @docs-private */
-    get errorState() {
-        return this.errorStateTracker.errorState;
-    }
-    set errorState(value) {
-        this.errorStateTracker.errorState = value;
+        return (this.localeConfiguration().placeholder[TimeFormatToLocaleKeys[this.format()]] ||
+            TIMEFORMAT_PLACEHOLDERS[this.format()]);
     }
     constructor() {
+        this.uid = inject(_IdGenerator).getId('kbq-timepicker-');
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
         this.dateAdapter = inject(DateAdapter, { optional: true });
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         this.timezoneService = inject(KbqDateTimezoneService);
+        this.localeConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('timepicker', KBQ_TIMEPICKER_LOCALE_CONFIGURATION);
+        this.errorStateTracker = new KbqErrorStateTracker(inject(ErrorStateMatcher), null, inject(FormGroupDirective, { optional: true }), inject(NgForm, { optional: true }));
+        /** @docs-private */
+        this.errorState = this.errorStateTracker.errorState;
+        this.focusedValue = signal(false, ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
         /**
          * Implemented as part of KbqFormFieldControl.
+         *
          * @docs-private
          */
-        this.stateChanges = new Subject();
+        this.focused = this.focusedValue.asReadonly();
         /**
          * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.controlType = 'timepicker';
+        /** Object used to control when error messages are shown. */
+        this.errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+        /**
+         * Implemented as part of KbqFormFieldControl. Defaults to the localized pattern of `format`.
+         *
          * @docs-private
          */
-        this.focused = false;
+        this.placeholder = computed(() => this.placeholderInput() ?? this.timeFormatPlaceholder, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /** Whether the timepicker is disabled. Also set by the bound form control. */
+        this.disabled = linkedSignal(() => this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        /** Unique id of the element, generated when not provided. */
+        this.id = computed(() => this.idInput() || this.uid, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * Implemented as part of KbqFormFieldControl.
+         *
          * @docs-private
          */
-        this.controlType = 'timepicker';
-        this._placeholder = TIMEFORMAT_PLACEHOLDERS[DEFAULT_TIME_FORMAT];
-        this._format = DEFAULT_TIME_FORMAT;
-        this._min = null;
-        this._max = null;
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Time format the input parses and renders. An unsupported value falls back to the default. */
+        this.format = input(DEFAULT_TIME_FORMAT, { ...(ngDevMode ? { debugName: "format" } : /* istanbul ignore next */ {}), transform: timeFormatAttribute });
+        /** Earliest time the control accepts. Anything the date adapter cannot read is treated as unset. */
+        this.min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        /** Latest time the control accepts. Anything the date adapter cannot read is treated as unset. */
+        this.max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** `min` as the date adapter reads it, or null when it cannot. */
+        this.minDate = computed(() => this.getValidDateOrNull(this.dateAdapter.deserialize(this.min())), ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        /** `max` as the date adapter reads it, or null when it cannot. */
+        this.maxDate = computed(() => this.getValidDateOrNull(this.dateAdapter.deserialize(this.max())), ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        this.valueState = signal(null, ...(ngDevMode ? [{ debugName: "valueState" }] : /* istanbul ignore next */ []));
+        /** The time the control holds: set with `[value]`, by the form control and by typing. */
+        this.value = this.valueState.asReadonly();
+        /** Tooltip shown for a moment whenever a keystroke is rejected. */
+        this.kbqValidationTooltip = input(...(ngDevMode ? [undefined, { debugName: "kbqValidationTooltip" }] : /* istanbul ignore next */ []));
         this.incorrectInput = output();
-        this.uid = `kbq-timepicker-${uniqueComponentIdSuffix++}`;
+        this.emptyValue = signal(true, ...(ngDevMode ? [{ debugName: "emptyValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.empty = this.emptyValue.asReadonly();
         this.lastValueValid = false;
-        this.defaultPlaceholder = true;
         this.separator = ':';
-        this.localeSubscription = Subscription.EMPTY;
+        /** Start of the part a caret key selects on a timer, until the selection lands there. */
+        this.pendingCaret = null;
         this.onInput = () => {
             const formattedValue = this.formatUserInput(this.viewValue);
             const newTimeObj = this.getDateFromTimeString(formattedValue);
             this.lastValueValid = !!newTimeObj;
             const selectionStart = this.selectionStart;
             const selectionEnd = this.selectionEnd;
-            const nextViewValue = newTimeObj ? this.getTimeStringFromDate(newTimeObj, this.format) : formattedValue;
+            const nextViewValue = newTimeObj ? this.getTimeStringFromDate(newTimeObj, this.format()) : formattedValue;
             // A complete time is always rewritten, so that the caret keeps walking between the time parts.
             // An incomplete one (e.g. `23:1`) is rewritten only when normalization trimmed it — otherwise
             // the extra digits stay in the input and the value grows unbounded.
@@ -281,37 +211,29 @@ class KbqTimepicker {
                 }
                 return;
             }
-            this.value = newTimeObj;
+            this.setValue(newTimeObj);
             this.onChange(newTimeObj);
-            this.stateChanges.next();
         };
         this.parseValidator = () => {
-            return this.focused || this.empty || this.lastValueValid
+            return this.focused() || this.isEmpty() || this.lastValueValid
                 ? null
                 : { kbqTimepickerParse: { text: this.viewValue } };
         };
         this.minValidator = (control) => {
             const controlValue = this.getValidDateOrNull(this.dateAdapter.deserialize(control.value));
-            return !this.min || !controlValue || this.dateAdapter.compareDateTime(this.min, controlValue) <= 0
+            const min = this.minDate();
+            return !min || !controlValue || this.dateAdapter.compareDateTime(min, controlValue) <= 0
                 ? null
-                : { kbqTimepickerLowerThenMin: { min: this.min, actual: controlValue } };
+                : { kbqTimepickerLowerThenMin: { min, actual: controlValue } };
         };
         this.maxValidator = (control) => {
             const controlValue = this.getValidDateOrNull(this.dateAdapter.deserialize(control.value));
-            return !this.max || !controlValue || this.dateAdapter.compareDateTime(this.max, controlValue) >= 0
+            const max = this.maxDate();
+            return !max || !controlValue || this.dateAdapter.compareDateTime(max, controlValue) >= 0
                 ? null
-                : { kbqTimepickerHigherThenMax: { max: this.max, actual: controlValue } };
+                : { kbqTimepickerHigherThenMax: { max, actual: controlValue } };
         };
         this.validatorOnChange = () => { };
-        this.updateLocaleParams = () => {
-            if (!this.defaultPlaceholder)
-                return;
-            // update via private property instead of setter to save it as default placeholder
-            this._placeholder = this.timeFormatPlaceholder;
-            // update value so view value will be also updated
-            this.value = this._value;
-        };
-        const dateAdapter = this.dateAdapter;
         if (!this.dateAdapter) {
             throw Error(`KbqTimepicker: No provider found for DateAdapter. You must import one of the existing ` +
                 `modules at your application root or provide a custom implementation or use exists ones.`);
@@ -319,14 +241,70 @@ class KbqTimepicker {
         this.validator = Validators.compose([this.parseValidator, this.minValidator, this.maxValidator]);
         this.onChange = noop;
         this.onTouched = noop;
-        // Force setter to be called in case id was not specified.
-        this.id = this.id;
-        this.errorStateTracker = new KbqErrorStateTracker(inject(ErrorStateMatcher), null, inject(FormGroupDirective, { optional: true }), inject(NgForm, { optional: true }), this.stateChanges);
-        this.localeSubscription = dateAdapter.localeChanges.subscribe(this.updateLocaleParams);
+        // A bound value is applied whenever the binding changes; an unbound one leaves the value to the form.
+        let bound = false;
+        effect(() => {
+            const value = this.valueInput();
+            if (!bound && value === undefined)
+                return;
+            bound = true;
+            untracked(() => this.setValue(value ?? null));
+        });
+        effect(() => {
+            this.localeConfiguration();
+            this.format();
+            // Re-assigning the value re-runs it through the date adapter, which formats on the new locale
+            // and the new format. Only a complete value: with none, `updateView()` would render `''` over
+            // whatever the user has half typed, and `setValue` would clear a pending parse error with it.
+            untracked(() => {
+                const value = this.valueState();
+                if (value)
+                    this.setValue(value);
+            });
+        });
+        // Browsers may not fire the blur event if the input is disabled too quickly.
+        // Reset from here to ensure that the element doesn't become stuck.
+        effect(() => {
+            if (this.disabled()) {
+                untracked(() => this.focusedValue.set(false));
+            }
+        });
+        effect((onCleanup) => {
+            const tooltip = this.kbqValidationTooltip();
+            if (!tooltip)
+                return;
+            // Borrowed, not taken over: restored in the teardown, so a tooltip that is unbound - or outlives
+            // this timepicker - gets its own trigger and delay back instead of staying listener-less.
+            const { trigger, enterDelay } = tooltip;
+            let pendingHide;
+            tooltip.enterDelay = validationTooltipShowDelay;
+            // The setter re-initialises the listeners, so `manual` also removes the hover and focus handlers.
+            tooltip.trigger = 'manual';
+            const subscription = this.incorrectInput.subscribe(() => {
+                if (tooltip.isOpen)
+                    return;
+                tooltip.show();
+                pendingHide = setTimeout(() => {
+                    pendingHide = undefined;
+                    tooltip.hide();
+                }, validationTooltipHideDelay);
+            });
+            onCleanup(() => {
+                subscription.unsubscribe();
+                // A hide still pending means this timepicker opened the tooltip: close it now rather than
+                // leave the timer to reach a tooltip it no longer drives, or leave it open for good.
+                if (pendingHide !== undefined) {
+                    clearTimeout(pendingHide);
+                    tooltip.hide();
+                }
+                tooltip.enterDelay = enterDelay;
+                tooltip.trigger = trigger;
+            });
+        });
         this.timezoneService.changes.pipe(takeUntilDestroyed()).subscribe(() => {
             // The rendered text names a wall clock in the zone it was formatted in. Left as it is, the
             // next keystroke re-parses it against the new zone and emits a different instant.
-            this.value = this._value;
+            this.setValue(this.valueState() ?? null);
         });
     }
     ngDoCheck() {
@@ -336,13 +314,19 @@ class KbqTimepicker {
             // that whatever logic is in here has to be super lean or we risk destroying the performance.
             this.updateErrorState();
         }
+        // The browser changes the rendered text without notice as the user types; `setViewValue()` covers the rest.
+        this.emptyValue.set(this.isEmpty());
     }
     ngAfterContentInit() {
         this.updateErrorState();
     }
-    ngOnDestroy() {
-        this.stateChanges.complete();
-        this.localeSubscription.unsubscribe();
+    ngOnChanges(changes) {
+        // `min` and `max` feed the validators, which Angular only re-runs when it is told to. Here rather than
+        // in an effect: an effect runs once with nothing bound - emitting `valueChanges` into the form on
+        // open - tracks whatever signals the validators read, and runs after the template has already read
+        // `errors`, which `checkNoChanges` then sees change.
+        if (changes['min'] || changes['max'])
+            this.validatorOnChange();
     }
     getSize() {
         return this.isFullFormat ? fullFormatSize : shortFormatSize;
@@ -351,15 +335,14 @@ class KbqTimepicker {
         this.elementRef.nativeElement.focus();
     }
     focusChanged(isFocused) {
-        if (isFocused !== this.focused) {
-            this.focused = isFocused;
+        if (isFocused !== this.focused()) {
+            this.focusedValue.set(isFocused);
             this.onTouched();
-            this.stateChanges.next();
         }
     }
     onBlur() {
         this.focusChanged(false);
-        if (this.viewValue !== this.getTimeStringFromDate(this.value, this.format)) {
+        if (this.viewValue !== this.getTimeStringFromDate(this.value(), this.format())) {
             this.setViewValue(this.formatUserPaste(this.viewValue));
             this.onInput();
         }
@@ -371,13 +354,13 @@ class KbqTimepicker {
         if (!newTimeObj) {
             return;
         }
-        this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.format));
-        this.value = newTimeObj;
+        this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.format()));
+        this.setValue(newTimeObj);
         this.onChange(newTimeObj);
-        this.stateChanges.next();
     }
     /**
      * Implemented as part of KbqFormFieldControl.
+     *
      * @docs-private
      */
     onContainerClick() {
@@ -387,7 +370,6 @@ class KbqTimepicker {
         const keyCode = event.keyCode;
         if (isLetterKey(event) && !event.ctrlKey && !event.metaKey) {
             event.preventDefault();
-            // TODO: The 'emit' function requires a mandatory void argument
             this.incorrectInput.emit();
         }
         else if ((hasModifierKey(event) && (isVerticalMovement(event) || isHorizontalMovement(event))) ||
@@ -421,7 +403,6 @@ class KbqTimepicker {
                 setTimeout(this.onInput);
             }
             else {
-                // TODO: The 'emit' function requires a mandatory void argument
                 this.incorrectInput.emit();
             }
         }
@@ -431,13 +412,15 @@ class KbqTimepicker {
     }
     validate(control) {
         this.setControl(control);
-        return this.validator ? this.validator(control) : null;
+        // Untracked, as `writeValue()`: a form control set from a consumer's `effect()` writes and validates on the
+        // spot, and the state read on the way — `focused`, the value, the inputs — would make the effect run again.
+        return this.validator ? untracked(() => this.validator(control)) : null;
     }
     registerOnValidatorChange(fn) {
         this.validatorOnChange = fn;
     }
     writeValue(value) {
-        this.value = value;
+        untracked(() => this.setValue(value));
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -446,7 +429,7 @@ class KbqTimepicker {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.disabled.set(isDisabled);
     }
     formatUserPaste(value) {
         if (value.match(AM_PM_FORMAT_REGEXP)) {
@@ -502,6 +485,10 @@ class KbqTimepicker {
         const validity = this.elementRef.nativeElement.validity;
         return validity && validity.badInput;
     }
+    /** Whether the input renders no text, read from the element rather than from the last change detection. */
+    isEmpty() {
+        return !this.viewValue && !this.isBadInput();
+    }
     spaceKeyHandler(event) {
         event.preventDefault();
         if (this.selectionStart === this.selectionEnd) {
@@ -523,36 +510,38 @@ class KbqTimepicker {
         return [this.viewValue.slice(0, position), key, this.viewValue.slice(position)].join('');
     }
     verticalArrowKeyHandler(keyCode) {
-        if (!this.value) {
+        const value = this.value();
+        if (!value) {
             return;
         }
         let changedTime;
         const newEditParams = this.getTimeEditMetrics(this.selectionStart);
         if (keyCode === UP_ARROW) {
-            changedTime = this.incrementTime(this.value, newEditParams.modifiedTimePart);
+            changedTime = this.incrementTime(value, newEditParams.modifiedTimePart);
         }
         if (keyCode === DOWN_ARROW) {
-            changedTime = this.decrementTime(this.value, newEditParams.modifiedTimePart);
+            changedTime = this.decrementTime(value, newEditParams.modifiedTimePart);
         }
-        this.value = changedTime;
+        this.setValue(changedTime);
         this.setSelection(newEditParams.cursorStartPosition, newEditParams.cursorEndPosition);
         this.onChange(changedTime);
-        this.stateChanges.next();
     }
     fixEmptyDigit() {
         const hasEmptyDigit = this.viewValue
             .split(this.separator)
             .map((part) => part.length)
             .some((item) => !item);
-        if (hasEmptyDigit && this.value) {
-            this.value = this.dateAdapter.clone(this.value);
+        const value = this.value();
+        if (hasEmptyDigit && value) {
+            this.setValue(this.dateAdapter.clone(value));
         }
     }
     horizontalArrowKeyHandler(keyCode) {
-        if (!this.value) {
+        if (!this.value()) {
             return;
         }
-        let cursorPos = this.selectionStart;
+        // A key pressed before the previous one's selection has landed moves on from where that one goes.
+        let cursorPos = this.pendingCaret?.start ?? this.selectionStart;
         if (keyCode === LEFT_ARROW) {
             this.fixEmptyDigit();
             cursorPos = cursorPos === 0 ? this.viewValue.length : cursorPos - 1;
@@ -565,7 +554,12 @@ class KbqTimepicker {
         this.createSelectionOfTimeComponentInInput(cursorPos);
     }
     createSelectionOfTimeComponentInInput(cursorPos) {
+        const pendingCaret = { start: this.getTimeEditMetrics(cursorPos).cursorStartPosition };
+        this.pendingCaret = pendingCaret;
         setTimeout(() => {
+            if (this.pendingCaret === pendingCaret) {
+                this.pendingCaret = null;
+            }
             const newEditParams = this.getTimeEditMetrics(cursorPos);
             this.setSelection(newEditParams.cursorStartPosition, newEditParams.cursorEndPosition);
         });
@@ -595,7 +589,7 @@ class KbqTimepicker {
         if (hours > HOURS_PER_DAY) {
             hours = 0;
         }
-        return this.dateAdapter.createDateTime(this.dateAdapter.getYear(this.value), this.dateAdapter.getMonth(this.value), this.dateAdapter.getDate(this.value), hours, minutes, seconds, this.dateAdapter.getMilliseconds(this.value));
+        return this.dateAdapter.createDateTime(this.dateAdapter.getYear(this.value()), this.dateAdapter.getMonth(this.value()), this.dateAdapter.getDate(this.value()), hours, minutes, seconds, this.dateAdapter.getMilliseconds(this.value()));
     }
     decrementTime(dateVal, whatToDecrement = TimeParts.seconds) {
         let hours = this.dateAdapter.getHours(dateVal);
@@ -622,10 +616,11 @@ class KbqTimepicker {
         if (hours < 0) {
             hours = HOURS_PER_DAY;
         }
-        return this.dateAdapter.createDateTime(this.dateAdapter.getYear(this.value), this.dateAdapter.getMonth(this.value), this.dateAdapter.getDate(this.value), hours, minutes, seconds, this.dateAdapter.getMilliseconds(this.value));
+        return this.dateAdapter.createDateTime(this.dateAdapter.getYear(this.value()), this.dateAdapter.getMonth(this.value()), this.dateAdapter.getDate(this.value()), hours, minutes, seconds, this.dateAdapter.getMilliseconds(this.value()));
     }
     /**
-     * @description Get params for arrow-keys (up/down) time value edit.
+     * Get params for arrow-keys (up/down) time value edit.
+     *
      * @param cursorPosition Current cursor position in timeString
      */
     getTimeEditMetrics(cursorPosition) {
@@ -654,7 +649,7 @@ class KbqTimepicker {
         return { modifiedTimePart, cursorStartPosition, cursorEndPosition };
     }
     /**
-     * @description Create time string for displaying inside input element of UI
+     * Create time string for displaying inside input element of UI
      */
     getTimeStringFromDate(value, timeFormat) {
         if (!value || !this.dateAdapter.isValid(value)) {
@@ -666,12 +661,12 @@ class KbqTimepicker {
         if (!timeString) {
             return null;
         }
-        const date = this.value || this.dateAdapter.today();
+        const date = this.value() || this.dateAdapter.today();
         const HMS = timeString.match(HOURS_MINUTES_SECONDS_REGEXP);
         const HM = timeString.match(HOURS_MINUTES_REGEXP);
         const H = timeString.match(HOURS_ONLY_REGEXP);
         const amPm = timeString.match(AM_PM_FORMAT_REGEXP);
-        let hours = 0;
+        let hours;
         let minutes = 0;
         let seconds = 0;
         if (amPm) {
@@ -710,6 +705,8 @@ class KbqTimepicker {
     setViewValue(value) {
         const element = this.elementRef.nativeElement;
         this.renderer.setProperty(element, 'value', value);
+        // Right away: a form or a `[value]` binding writes after `ngDoCheck()` has run.
+        this.emptyValue.set(this.isEmpty());
         // A paste or a model write replaces the whole value, and the offset the previous one was left
         // at has to go with it.
         kbqRevealSelection(element);
@@ -718,29 +715,37 @@ class KbqTimepicker {
         kbqSetSelectionRange(this.elementRef.nativeElement, start, end);
     }
     updateView() {
-        const formattedValue = this.getTimeStringFromDate(this.value, this.format);
+        const formattedValue = this.getTimeStringFromDate(this.value(), this.format());
         this.setViewValue(formattedValue);
     }
     /** @docs-private */
     updateErrorState() {
+        this.errorStateTracker.errorStateMatcher = this.errorStateMatcher();
         this.errorStateTracker.updateErrorState();
     }
+    /** Takes a value from any source, re-rendering the element with it. */
+    setValue(value) {
+        const newValue = this.dateAdapter.deserialize(value);
+        this.lastValueValid = !newValue || this.dateAdapter.isValid(newValue);
+        this.valueState.set(this.getValidDateOrNull(newValue));
+        this.updateView();
+    }
     setControl(control) {
         if (this.control)
             return;
         this.control = control;
-        this.control.valueChanges.subscribe((value) => (this._value = value));
+        this.control.valueChanges.subscribe((value) => this.valueState.set(value));
         // @TODO resolve types
         this.errorStateTracker.ngControl = { control };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimepicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTimepicker, isStandalone: true, selector: "input[kbqTimepicker]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", disabled: "disabled", id: "id", required: "required", format: "format", min: "min", max: "max", value: "value", kbqValidationTooltip: "kbqValidationTooltip" }, outputs: { incorrectInput: "incorrectInput" }, host: { listeners: { "blur": "onBlur()", "focus": "focusChanged(true)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.id": "id", "attr.placeholder": "placeholder", "attr.disabled": "disabled || null", "attr.required": "required", "attr.size": "getSize()", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-timepicker" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimepicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqTimepicker, isStandalone: true, selector: "input[kbqTimepicker]", inputs: { errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", 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 }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, kbqValidationTooltip: { classPropertyName: "kbqValidationTooltip", publicName: "kbqValidationTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { incorrectInput: "incorrectInput" }, host: { listeners: { "blur": "onBlur()", "focus": "focusChanged(true)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.id": "id()", "attr.placeholder": "placeholder()", "attr.disabled": "disabled() || null", "attr.required": "required() || null", "attr.size": "getSize()", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-timepicker" }, providers: [
             KBQ_TIMEPICKER_VALIDATORS,
             KBQ_TIMEPICKER_VALUE_ACCESSOR,
             { provide: KbqFormFieldControl, useExisting: KbqTimepicker }
-        ], exportAs: ["kbqTimepicker"], ngImport: i0 }); }
+        ], exportAs: ["kbqTimepicker"], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimepicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimepicker, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kbqTimepicker]',
@@ -753,10 +758,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         class: 'kbq-input kbq-timepicker',
                         // Native input properties that are overwritten by Angular inputs need to be synced with
                         // the native input element. Otherwise property bindings for those don't work.
-                        '[attr.id]': 'id',
-                        '[attr.placeholder]': 'placeholder',
-                        '[attr.disabled]': 'disabled || null',
-                        '[attr.required]': 'required',
+                        '[attr.id]': 'id()',
+                        '[attr.placeholder]': 'placeholder()',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[attr.required]': 'required() || null',
                         '[attr.size]': 'getSize()',
                         '[attr.autocomplete]': '"off"',
                         '(blur)': 'onBlur()',
@@ -764,41 +769,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '(paste)': 'onPaste($event)',
                         '(keydown)': 'onKeyDown($event)'
                     },
+                    hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ],
                     exportAs: 'kbqTimepicker'
                 }]
-        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], kbqValidationTooltip: [{
-                type: Input
-            }], incorrectInput: [{ type: i0.Output, args: ["incorrectInput"] }] } });
+        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], kbqValidationTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqValidationTooltip", required: false }] }], incorrectInput: [{ type: i0.Output, args: ["incorrectInput"] }] } });
 
 class KbqTimepickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqTimepickerModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqTimepickerModule, imports: [A11yModule,
             PlatformModule,
             FormsModule,
             KbqTimepicker], exports: [KbqTimepicker, KbqFormFieldModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimepickerModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimepickerModule, imports: [A11yModule,
             PlatformModule,
             FormsModule, KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -815,5 +803,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AM_PM_FORMAT_REGEXP, DEFAULT_TIME_FORMAT, HOURS_MINUTES_REGEXP, HOURS_MINUTES_SECONDS_REGEXP, HOURS_ONLY_REGEXP, HOURS_PER_DAY, KBQ_TIMEPICKER_VALIDATORS, KBQ_TIMEPICKER_VALUE_ACCESSOR, KbqTimepicker, KbqTimepickerModule, MINUTES_PER_HOUR, SECONDS_PER_MINUTE, TIMEFORMAT_PLACEHOLDERS, TimeFormatToLocaleKeys, TimeFormats, TimeParts };
+export { AM_PM_FORMAT_REGEXP, DEFAULT_TIME_FORMAT, HOURS_MINUTES_REGEXP, HOURS_MINUTES_SECONDS_REGEXP, HOURS_ONLY_REGEXP, HOURS_PER_DAY, KBQ_TIMEPICKER_DEFAULT_LOCALE_CONFIGURATION, KBQ_TIMEPICKER_LOCALE_CONFIGURATION, KBQ_TIMEPICKER_VALIDATORS, KBQ_TIMEPICKER_VALUE_ACCESSOR, KbqTimepicker, KbqTimepickerModule, MINUTES_PER_HOUR, SECONDS_PER_MINUTE, TIMEFORMAT_PLACEHOLDERS, TimeFormatToLocaleKeys, TimeFormats, TimeParts, kbqTimepickerLocaleConfigurationProvider };
 //# sourceMappingURL=koobiq-components-timepicker.mjs.map