@koobiq/components 19.8.4 → 19.8.6

package/fesm2022/koobiq-components-datepicker.mjs

@@ -4,7 +4,7 @@ import { EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation
 import * as i2 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
 import * as i1 from '@koobiq/components/core';
-import { KbqOptionModule, defaultOffsetY, ruRULocaleData, validationTooltipShowDelay, validationTooltipHideDelay, KBQ_LOCALE_SERVICE, KBQ_VALIDATION, KbqErrorStateTracker, ErrorStateMatcher, KBQ_DATE_FORMATS } from '@koobiq/components/core';
+import { KbqOptionModule, defaultOffsetY, ruRULocaleData, validationTooltipShowDelay, validationTooltipHideDelay, KBQ_LOCALE_SERVICE, KBQ_VALIDATION, KbqErrorStateTracker, ErrorStateMatcher, kbqRevealSelection, kbqSetSelectionRange, KBQ_DATE_FORMATS } from '@koobiq/components/core';
 import * as i3 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import * as i4 from '@koobiq/components/select';
@@ -663,8 +663,14 @@ const kbqDatepickerAnimations = {
 
 /** Used to generate a unique ID for each datepicker instance. */
 let datepickerUid = 0;
-/** Injection token that determines the scroll handling while the calendar is open. */
-const KBQ_DATEPICKER_SCROLL_STRATEGY = new InjectionToken('kbq-datepicker-scroll-strategy');
+/**
+ * Injection token that determines the scroll handling while the calendar is open. The root default keeps the
+ * datepicker usable outside `KbqDatepickerModule`'s injector; providing the token anywhere still wins over it.
+ */
+const KBQ_DATEPICKER_SCROLL_STRATEGY = new InjectionToken('kbq-datepicker-scroll-strategy', {
+    providedIn: 'root',
+    factory: () => KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY(inject(Overlay))
+});
 /** @docs-private */
 function KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
     return () => overlay.scrollStrategies.reposition();
@@ -1212,20 +1218,36 @@ class KbqDatepickerInput {
             this.valueChange.emit(newValue);
         }
     }
-    /** The minimum valid date. */
+    /**
+     * The minimum valid date. Drives validation only — including dates typed or pasted into the
+     * input — and reports `kbqDatepickerMin`. The calendar is restricted separately, by `minDate`
+     * on the associated `<kbq-datepicker>`.
+     *
+     * Compared down to the millisecond, not by calendar day: the input keeps the time part of the
+     * value it parses, and the comparison is made on wall-clock components rather than on absolute
+     * time.
+     */
     get min() {
         return this._min;
     }
     set min(value) {
-        this._min = this.adapter.deserialize(value);
+        this._min = this.getValidDateOrNull(this.adapter.deserialize(value));
         this.validatorOnChange();
     }
-    /** The maximum valid date. */
+    /**
+     * The maximum valid date. Drives validation only — including dates typed or pasted into the
+     * input — and reports `kbqDatepickerMax`. The calendar is restricted separately, by `maxDate`
+     * on the associated `<kbq-datepicker>`.
+     *
+     * Compared down to the millisecond, not by calendar day: the input keeps the time part of the
+     * value it parses, so an upper bound meant to include its whole day has to be the end of that
+     * day.
+     */
     get max() {
         return this._max;
     }
     set max(value) {
-        this._max = this.adapter.deserialize(value);
+        this._max = this.getValidDateOrNull(this.adapter.deserialize(value));
         this.validatorOnChange();
     }
     /** Whether the datepicker-input is disabled. */
@@ -1295,15 +1317,9 @@ class KbqDatepickerInput {
     get selectionStart() {
         return this.elementRef.nativeElement.selectionStart;
     }
-    set selectionStart(value) {
-        this.elementRef.nativeElement.selectionStart = value;
-    }
     get selectionEnd() {
         return this.elementRef.nativeElement.selectionEnd;
     }
-    set selectionEnd(value) {
-        this.elementRef.nativeElement.selectionEnd = value;
-    }
     constructor(elementRef, renderer, adapter, dateFormats) {
         this.elementRef = elementRef;
         this.renderer = renderer;
@@ -1338,7 +1354,7 @@ class KbqDatepickerInput {
         this.thirdDigit = null;
         this.onTouched = () => { };
         this.onInput = () => {
-            this.correctCursorPosition();
+            const cursorPosition = this.correctedCursorPosition();
             const formattedValue = this.replaceSymbols(this.viewValue);
             const newTimeObj = this.getDateFromString(formattedValue);
             this.lastValueValid = !!newTimeObj;
@@ -1348,12 +1364,12 @@ class KbqDatepickerInput {
                     this.updateValue(newTimeObj);
                 }
                 else {
-                    this.control.updateValueAndValidity();
+                    this.control?.updateValueAndValidity();
                 }
                 return;
             }
             this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
-            this.selectNextDigitByCursor(this.selectionStart);
+            this.selectNextDigitByCursor(cursorPosition);
             this.updateValue(newTimeObj);
         };
         this.parseOnBlur = () => {
@@ -1369,7 +1385,7 @@ class KbqDatepickerInput {
             if (viewDigits.length !== 3) {
                 this.lastValueValid = false;
                 this._value = null;
-                return setTimeout(() => this.control.updateValueAndValidity());
+                return setTimeout(() => this.control?.updateValueAndValidity());
             }
             date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
             date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
@@ -1381,14 +1397,14 @@ class KbqDatepickerInput {
             else if (viewDigitWithYear.length < digitWithYear.length) {
                 this.lastValueValid = false;
                 this._value = null;
-                return setTimeout(() => this.control.updateValueAndValidity());
+                return setTimeout(() => this.control?.updateValueAndValidity());
             }
             const newTimeObj = this.createDateTime(date);
             if (!newTimeObj) {
                 this.lastValueValid = false;
                 this._value = null;
                 this.cvaOnChange(null);
-                return setTimeout(() => this.control.updateValueAndValidity());
+                return setTimeout(() => this.control?.updateValueAndValidity());
             }
             /* Check if the number of days entered does not match the entered month */
             if (!this.getValidDateOrNull(newTimeObj)) {
@@ -1413,14 +1429,16 @@ class KbqDatepickerInput {
         };
         /** The form control validator for the min date. */
         this.minValidator = (control) => {
-            const controlValue = this.adapter.deserialize(control.value);
+            // An unparseable value compares as NaN against any bound, which fails both `<= 0` and
+            // `>= 0` and would report the value as simultaneously too early and too late.
+            const controlValue = this.getValidDateOrNull(this.adapter.deserialize(control.value));
             return !this.min || !controlValue || this.adapter.compareDateTime(this.min, controlValue) <= 0
                 ? null
                 : { kbqDatepickerMin: { min: this.min, actual: controlValue } };
         };
         /** The form control validator for the max date. */
         this.maxValidator = (control) => {
-            const controlValue = this.adapter.deserialize(control.value);
+            const controlValue = this.getValidDateOrNull(this.adapter.deserialize(control.value));
             return !this.max || !controlValue || this.adapter.compareDateTime(this.max, controlValue) >= 0
                 ? null
                 : { kbqDatepickerMax: { max: this.max, actual: controlValue } };
@@ -1622,9 +1640,11 @@ class KbqDatepickerInput {
         this.configuration = this.externalConfiguration || KBQ_DATEPICKER_DEFAULT_CONFIGURATION;
     }
     setFormat(format) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.separator = format.match(/[aA-zZ]+(?<separator>\W|\D)[aA-zZ]+/).groups.separator;
+        // `[a-zA-Z]`, not `[aA-zZ]`: the latter reads as `a`, the range `A-z` and `Z`, and that range
+        // takes in the six characters ASCII puts between the two alphabets — opening bracket,
+        // backslash, closing bracket, caret, underscore and backtick. A format escaping a literal in
+        // brackets could therefore have had that bracket counted as part of a placeholder.
+        this.separator = format.match(/[a-zA-Z]+(?<separator>\W|\D)[a-zA-Z]+/).groups.separator;
         this.separatorPositions = format
             .split('')
             .reduce((acc, item, index) => (this.separator === item ? [...acc, index + 1] : acc), []);
@@ -1656,30 +1676,36 @@ class KbqDatepickerInput {
     }
     spaceKeyHandler(event) {
         event.preventDefault();
-        if (this.selectionStart === this.selectionEnd) {
-            const value = this.getNewValue(event.key, this.selectionStart);
-            this.setViewValue(value);
-            setTimeout(this.onInput);
-        }
-        else if (this.selectionStart !== this.selectionEnd) {
-            this.selectNextDigit(this.selectionStart, true);
+        const position = this.selectionStart;
+        // Right after a separator the digit group is empty, so a space cannot stand in for one:
+        // advance instead of inserting a character the value can never be parsed with.
+        if (this.selectionStart !== this.selectionEnd || this.separatorPositions.includes(position)) {
+            this.selectNextDigit(position, true);
+            return;
         }
+        this.setViewValue(this.getNewValue(event.key, position));
+        setTimeout(this.onInput);
     }
     getNewValue(key, position) {
         return [this.viewValue.slice(0, position), key, this.viewValue.slice(position)].join('');
     }
     setViewValue(value, savePosition = false) {
+        const element = this.elementRef.nativeElement;
+        const selectionStart = this.selectionStart ?? 0;
+        const selectionEnd = this.selectionEnd ?? 0;
+        this.renderer.setProperty(element, 'value', value);
         if (savePosition) {
-            const selectionStart = this.selectionStart;
-            const selectionEnd = this.selectionEnd;
-            this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
-            this.selectionStart = selectionStart;
-            this.selectionEnd = selectionEnd;
+            this.setSelection(selectionStart, selectionEnd);
         }
         else {
-            this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
+            // A paste, a model write or a calendar pick replaces the whole value, and the offset the
+            // previous one was left at has to go with it.
+            kbqRevealSelection(element);
         }
     }
+    setSelection(start, end) {
+        kbqSetSelectionRange(this.elementRef.nativeElement, start, end);
+    }
     replaceSymbols(value) {
         return value
             .split(this.separator)
@@ -1918,8 +1944,7 @@ class KbqDatepickerInput {
             changedTime = this.decrementDate(this.value, modifiedTimePart);
         }
         this.value = changedTime;
-        this.selectionStart = selectionStart;
-        this.selectionEnd = selectionEnd;
+        this.setSelection(selectionStart, selectionEnd);
         this.cvaOnChange(changedTime);
         this.onChange();
         this.stateChanges.next();
@@ -1961,16 +1986,14 @@ class KbqDatepickerInput {
     selectDigitByCursor(cursorPos) {
         setTimeout(() => {
             const [, selectionStart, selectionEnd] = this.getDateEditMetrics(cursorPos);
-            this.selectionStart = selectionStart;
-            this.selectionEnd = selectionEnd;
+            this.setSelection(selectionStart, selectionEnd);
         });
     }
     selectNextDigitByCursor(cursorPos) {
         setTimeout(() => {
             const [, , endPositionOfCurrentDigit] = this.getDateEditMetrics(cursorPos);
             const [, selectionStart, selectionEnd] = this.getDateEditMetrics(endPositionOfCurrentDigit + 1);
-            this.selectionStart = selectionStart;
-            this.selectionEnd = selectionEnd;
+            this.setSelection(selectionStart, selectionEnd);
         });
     }
     selectNextDigit(cursorPos, cycle = false) {
@@ -1979,8 +2002,7 @@ class KbqDatepickerInput {
             const nextSeparatorPos = this.viewValue.indexOf(this.separator, cursorPos);
             const newCursorPos = nextSeparatorPos > 0 ? nextSeparatorPos + 1 : lastValue;
             const [, selectionStart, selectionEnd] = this.getDateEditMetrics(newCursorPos);
-            this.selectionStart = selectionStart;
-            this.selectionEnd = selectionEnd;
+            this.setSelection(selectionStart, selectionEnd);
         });
     }
     /** Checks whether the input is invalid based on the native validation. */
@@ -2044,10 +2066,12 @@ class KbqDatepickerInput {
         }
         return this.adapter.createDateTime(value.year, value.month - 1, value.date, value.hours, value.minutes, value.seconds, value.milliseconds);
     }
-    correctCursorPosition() {
-        if (this.selectionStart && this.separatorPositions.includes(this.selectionStart)) {
-            this.selectionStart = this.selectionStart - 1;
-        }
+    // The position to advance from, with a caret that landed just past a separator pulled back onto
+    // the digit before it. Returned rather than applied to the field: on the paths where the value
+    // cannot be parsed, a moved caret would survive into the next keystroke and change what it does.
+    correctedCursorPosition() {
+        const position = this.selectionStart ?? 0;
+        return this.separatorPositions.includes(position) ? position - 1 : position;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.DateAdapter, optional: true }, { token: KBQ_DATE_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqDatepickerInput, isStandalone: true, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", required: "required", kbqDatepicker: "kbqDatepicker", kbqCalendar: "kbqCalendar", kbqDatepickerFilter: "kbqDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", kbqValidationTooltip: "kbqValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-datepicker" }, providers: [