@progress/kendo-dateinputs-common 0.2.0-dev.202301231327 → 0.2.0-dev.202301241303

package/dist/npm/dateinput/dateinput.d.ts

@@ -9,9 +9,9 @@ export declare class DateInput extends Observable {
     private resetSegmentValue;
     private isActive;
     private interactionMode;
-    private formatStateOnKeyDown;
     private previousElementValue;
     private previousElementSelection;
+    private switchedPartOnPreviousKeyAction;
     private keyDownEvent;
     private isPasteInProgress;
     private mouseDownStarted;
@@ -172,6 +172,10 @@ export declare class DateInput extends Observable {
      * @hidden
      */
     forceUpdate(): void;
+    /**
+     * @hidden
+     */
+    forceUpdateWithSelection(): void;
     /**
      * @hidden
      */
@@ -213,4 +217,8 @@ export declare class DateInput extends Observable {
      * @hidden
      */
     createDateObject(options?: {}): DateObject;
+    /**
+     * @hidden
+     */
+    keyEventMatchesAutoSwitchKeys(keyObject: any): boolean;
 }

package/dist/npm/dateinput/dateinput.js

@@ -32,7 +32,6 @@ var FOCUS_END = "focusEnd";
 var CHANGE = "change";
 var defaultDateInputOptions = {
     format: "d",
-    allowNulls: false,
     hasPlaceholder: false,
     placeholder: null,
     cycleTime: true,
@@ -60,6 +59,7 @@ var defaultDateInputOptions = {
         _a[CHANGE] = null,
         _a),
     selectNearestSegmentOnFocus: false,
+    selectPreviousSegmentOnBackspace: false,
     enableMouseWheel: false,
     allowCaretMode: false,
     autoSwitchParts: true,
@@ -213,6 +213,7 @@ var DateInput = /** @class */ (function (_super) {
      */
     DateInput.prototype.onElementClick = function (e) {
         this.mouseDownStarted = false;
+        this.switchedPartOnPreviousKeyAction = false;
         var selection = this.selection;
         if (this.isInCaretMode()) {
             // explicitly refresh the input element value
@@ -245,12 +246,10 @@ var DateInput = /** @class */ (function (_super) {
      */
     DateInput.prototype.onElementInput = function (e) {
         this.triggerInput({ event: e });
-        var keyDownEvent = this.keyDownEvent || {};
-        var isBackspaceKey = keyDownEvent.keyCode === keycode_1.KeyCode.BACKSPACE || keyDownEvent.key === key_1.Key.BACKSPACE;
-        var isDeleteKey = keyDownEvent.keyCode === keycode_1.KeyCode.DELETE || keyDownEvent.key === key_1.Key.DELETE;
         if (!this.element || !this.dateObject) {
             return;
         }
+        var switchedPartOnPreviousKeyAction = this.switchedPartOnPreviousKeyAction;
         if (this.isPasteInProgress) {
             if (this.options.allowCaretMode) {
                 // pasting should leave the input with caret
@@ -261,6 +260,9 @@ var DateInput = /** @class */ (function (_super) {
             this.isPasteInProgress = false;
             return;
         }
+        var keyDownEvent = this.keyDownEvent || {};
+        var isBackspaceKey = keyDownEvent.keyCode === keycode_1.KeyCode.BACKSPACE || keyDownEvent.key === key_1.Key.BACKSPACE;
+        var isDeleteKey = keyDownEvent.keyCode === keycode_1.KeyCode.DELETE || keyDownEvent.key === key_1.Key.DELETE;
         var originalInteractionMode = this.interactionMode;
         if (this.options.allowCaretMode &&
             originalInteractionMode !== interaction_mode_1.DateInputInteractionMode.Caret &&
@@ -279,50 +281,36 @@ var DateInput = /** @class */ (function (_super) {
             this.restorePreviousInputEventState();
             return;
         }
-        var oldDateObjectValue = this.dateObject && this.dateObject.getValue();
+        var oldExistingDateValue = this.dateObject && this.dateObject.getValue();
+        var oldDateValue = this.dateObject ? this.dateObject.value : null;
         var _a = this.dateObject.getTextAndFormat(), currentText = _a.text, currentFormat = _a.format;
         this.currentFormat = currentFormat;
-        var text = "";
+        var oldText = "";
         if (hasCaret) {
             if (isBackspaceKey || isDeleteKey) {
-                text = this.previousElementValue;
+                oldText = this.previousElementValue;
             }
             else if (originalInteractionMode === interaction_mode_1.DateInputInteractionMode.Caret) {
-                text = this.previousElementValue;
+                oldText = this.previousElementValue;
             }
             else {
-                text = currentText;
+                oldText = currentText;
             }
         }
         else {
-            text = currentText;
+            oldText = currentText;
         }
         var newText = this.elementValue;
         var diff = utils_1.approximateStringMatching({
-            oldText: text,
+            oldText: oldText,
             newText: newText,
             formatPattern: this.currentFormat,
             selectionStart: this.selection.start,
             isInCaretMode: hasCaret,
             keyEvent: this.keyDownEvent
         });
-        var currentFormatChar = this.formatStateOnKeyDown.format[this.formatStateOnKeyDown.selectionStart] || "";
-        if (this.options.allowCaretMode && hasCaret && this.currentFormat.length !== this.elementValue.length) {
-            if (currentFormatChar &&
-                currentFormatChar.length > 0 &&
-                currentFormatChar !== constants_1.Constants.formatSeparator) {
-                if (!diff || diff.length === 0) {
-                    diff = [];
-                    diff[0][0] = currentFormatChar;
-                    diff[0][1] = e.data || "";
-                }
-                else if (diff[0] && diff[0][0] !== constants_1.Constants.formatSeparator) {
-                    if (diff[0][0] !== currentFormatChar) {
-                        diff[0][0] = currentFormatChar;
-                        diff[0][1] = e.data || "";
-                    }
-                }
-            }
+        if (diff && diff.length && diff[0] && diff[0][1] !== constants_1.Constants.formatSeparator) {
+            this.switchedPartOnPreviousKeyAction = false;
         }
         if (hasCaret && (!diff || diff.length === 0)) {
             this.restorePreviousInputEventState();
@@ -361,104 +349,128 @@ var DateInput = /** @class */ (function (_super) {
             switchPart = false;
         }
         this.resetSegmentValue = false;
+        var hasFixedFormat = this.options.format === this.currentFormat ||
+            // all not fixed formats are 1 symbol, e.g. "d"
+            (utils_2.isPresent(this.options.format) && this.options.format.length > 1);
         var lastParseResult = parsePartsResults[parsePartsResults.length - 1];
-        var lastParseResultHasNoValue = lastParseResult && !lastParseResult.value;
+        var lastParseResultHasNoValue = lastParseResult && !utils_2.isPresent(lastParseResult.value);
         var parsingFailedOnDelete = (hasCaret && (isBackspaceKey || isDeleteKey) && lastParseResultHasNoValue);
         var resetPart = lastParseResult ? lastParseResult.resetPart : false;
-        var hasInvalidDatePart = lastParseResult ? lastParseResult.hasInvalidDatePart : false;
-        var hasDateValueChanged = !kendo_date_math_1.isEqual(oldDateObjectValue, this.dateObject.value);
+        var newExistingDateValue = this.dateObject.getValue();
+        var hasExistingDateValueChanged = !kendo_date_math_1.isEqual(oldExistingDateValue, newExistingDateValue);
+        var newDateValue = this.dateObject.value;
         var symbolForSelection;
         var currentSelection = this.selection;
-        if (!hasCaret || parsingFailedOnDelete || resetPart) {
-            if (resetPart) {
-                symbolForSelection = this.currentFormat[currentSelection.start];
-            }
-            this.forceUpdate();
-        }
-        if (diff.length && diff[0][0] !== constants_1.Constants.formatSeparator) {
-            if (!hasCaret || parsingFailedOnDelete || resetPart) {
-                if (symbolForSelection) {
-                    this.setSelection(this.selectionBySymbol(symbolForSelection));
+        if (hasCaret) {
+            var diffChar = diff && diff.length > 0 ? diff[0][0] : null;
+            var hasLeadingZero = this.dateObject.getLeadingZero()[diffChar];
+            if (diff.length && diff[0][0] !== constants_1.Constants.formatSeparator) {
+                if (switchPart) {
+                    this.forceUpdateWithSelection();
+                    this.switchDateSegment(1);
                 }
-                else {
-                    if (!this.options.autoSwitchParts && diff[0][1] === constants_1.Constants.formatSeparator) {
-                        // do not change the selection when a separator is pressed
-                        // this should happen only if autoSwitchKeys contains the separator explicitly
+                else if (resetPart) {
+                    symbolForSelection = this.currentFormat[currentSelection.start];
+                    if (symbolForSelection) {
+                        this.forceUpdate();
+                        this.setSelection(this.selectionBySymbol(symbolForSelection));
                     }
                     else {
+                        this.restorePreviousInputEventState();
+                    }
+                }
+                else if (parsingFailedOnDelete) {
+                    this.forceUpdate();
+                    if (diff.length && diff[0][0] !== constants_1.Constants.formatSeparator) {
                         this.setSelection(this.selectionBySymbol(diff[0][0]));
                     }
                 }
-            }
-            else if (hasCaret) {
-                if ((hasDateValueChanged && utils_2.isPresent(this.dateObject.getValue()) ||
-                    (!hasDateValueChanged && switchPart && utils_2.isPresent(this.dateObject.getValue())))) {
-                    if (switchPart) {
-                        this.switchDateSegment(1);
+                else if (lastParseResultHasNoValue) {
+                    if (e.data === "0" && hasLeadingZero) {
+                        // do not reset element value on a leading zero
+                        // wait for consecutive input to determine the value
                     }
-                    else {
-                        if (this.options.format.length !== this.currentFormat.length &&
-                            currentFormatChar && currentFormatChar !== "y") {
-                            var elementValueLength = this.elementValue.length;
-                            this.forceUpdate();
-                            var selectionOffset = this.elementValue.length - elementValueLength;
-                            this.setSelection({
-                                start: currentSelection.start + selectionOffset,
-                                end: currentSelection.start + selectionOffset
-                            });
-                        }
+                    else if (utils_2.isPresent(oldExistingDateValue) && !utils_2.isPresent(newExistingDateValue)) {
+                        this.restorePreviousInputEventState();
                     }
-                }
-                else {
-                    if (lastParseResultHasNoValue) {
-                        var hasLeadingZero = this.dateObject.getLeadingZero()[currentFormatChar];
-                        if (switchPart) {
-                            this.switchDateSegment(1);
-                        }
-                        else if (e.data === "0" && hasLeadingZero) {
+                    else if (!utils_2.isPresent(oldExistingDateValue) && utils_2.isPresent(newExistingDateValue)) {
+                        this.forceUpdateWithSelection();
+                    }
+                    else if (utils_2.isPresent(oldExistingDateValue) && utils_2.isPresent(newExistingDateValue)) {
+                        if (hasExistingDateValueChanged) {
+                            this.forceUpdateWithSelection();
                         }
                         else {
                             this.restorePreviousInputEventState();
                         }
                     }
-                }
-            }
-        }
-        if (!switchPart && hasCaret && !isBackspaceKey && !isDeleteKey && !resetPart && lastParseResultHasNoValue) {
-            if (hasDateValueChanged) {
-                if (this.currentFormat.length === this.elementValue.length) {
-                    // if a full date is entered, do not reset it
-                }
-                else {
-                    // the input is not complete, not parsable or not updatable
-                    if (originalInteractionMode !== interaction_mode_1.DateInputInteractionMode.Caret && hasDateValueChanged) {
+                    else if (!utils_2.isPresent(oldExistingDateValue) && !utils_2.isPresent(newExistingDateValue)) {
+                        this.forceUpdateWithSelection();
                     }
-                    else if (originalInteractionMode !== interaction_mode_1.DateInputInteractionMode.Caret) {
-                        symbolForSelection = this.currentFormat[currentSelection.start];
-                        this.forceUpdate();
-                        this.setSelection(this.selectionBySymbol(symbolForSelection));
+                    else if (oldDateValue !== newDateValue) {
+                        // this can happen on auto correct when no valid value is parsed
                     }
-                    else if (!hasInvalidDatePart) {
+                    else {
                         this.restorePreviousInputEventState();
                     }
                 }
+                else if (!lastParseResultHasNoValue) {
+                    // the user types a valid but incomplete date (e.g. year "123" with format "yyyy")
+                    // let them continue typing, but refresh for not fixed formats
+                    if (!hasFixedFormat) {
+                        this.forceUpdateWithSelection();
+                    }
+                }
             }
             else {
-                var hasLeadingZero = this.dateObject.getLeadingZero()[currentFormatChar];
-                if (e.data === "0" && hasLeadingZero) {
+                if (!this.options.autoSwitchParts && diff[0][1] === constants_1.Constants.formatSeparator) {
+                    // do not change the selection when a separator is pressed
+                    // this should happen only if autoSwitchKeys contains the separator explicitly
                 }
-                else if (!hasInvalidDatePart) {
-                    this.restorePreviousInputEventState();
+                else {
+                    this.setSelection(this.selectionBySymbol(diff[0][0]));
                 }
             }
         }
-        else if (this.options.autoSwitchParts && (switchPart || navigationOnly)) {
-            if (!hasCaret) {
-                this.switchDateSegment(1);
+        else if (!hasCaret) {
+            this.forceUpdate();
+            if (diff.length && diff[0][0] !== constants_1.Constants.formatSeparator) {
+                this.setSelection(this.selectionBySymbol(diff[0][0]));
+            }
+            if (this.options.autoSwitchParts) {
+                if (navigationOnly) {
+                    this.resetSegmentValue = true;
+                    if (!switchedPartOnPreviousKeyAction) {
+                        this.switchDateSegment(1);
+                    }
+                    this.switchedPartOnPreviousKeyAction = true;
+                }
+                else if (switchPart) {
+                    this.switchDateSegment(1);
+                    this.switchedPartOnPreviousKeyAction = true;
+                }
+            }
+            else {
+                if (lastParseResult && lastParseResult.switchToNext) {
+                    // the value is complete and should be switched, but the "autoSwitchParts" option prevents this
+                    // ensure that the segment value can be reset on next input
+                    this.resetSegmentValue = true;
+                }
+                else if (navigationOnly) {
+                    this.resetSegmentValue = true;
+                    if (!switchedPartOnPreviousKeyAction) {
+                        this.switchDateSegment(1);
+                    }
+                    this.switchedPartOnPreviousKeyAction = true;
+                }
+            }
+            if (isBackspaceKey && this.options.selectPreviousSegmentOnBackspace) {
+                // kendo angular have this UX
+                this.switchDateSegment(-1);
             }
         }
         this.tryTriggerValueChange({
-            oldValue: oldDateObjectValue,
+            oldValue: oldExistingDateValue,
             event: e
         });
         this.triggerInputEnd({ event: e });
@@ -478,6 +490,7 @@ var DateInput = /** @class */ (function (_super) {
         }
         this.isActive = true;
         this.interactionMode = interaction_mode_1.DateInputInteractionMode.None;
+        this.switchedPartOnPreviousKeyAction = false;
         this.refreshElementValue();
         if (!this.mouseDownStarted) {
             this.caret(0, this.elementValue.length);
@@ -495,6 +508,7 @@ var DateInput = /** @class */ (function (_super) {
             return;
         }
         this.interactionMode = interaction_mode_1.DateInputInteractionMode.None;
+        this.switchedPartOnPreviousKeyAction = false;
         this.refreshElementValue();
         this.triggerBlurEnd({ event: e });
     };
@@ -514,20 +528,9 @@ var DateInput = /** @class */ (function (_super) {
         var _a = this.selection, start = _a.start, end = _a.end;
         this.keyDownEvent = e;
         this.previousElementValue = this.element.value;
-        this.formatStateOnKeyDown = {
-            format: this.currentFormat,
-            selectionStart: start,
-            selectionEnd: end
-        };
         this.previousElementSelection = { start: start, end: end };
-        var autoSwitchKeys = (this.options.autoSwitchKeys || [])
-            .map(function (x) { return x.toString().toLowerCase().trim(); });
-        if (autoSwitchKeys.indexOf(e.keyCode.toString()) >= 0 ||
-            autoSwitchKeys.indexOf(e.keyCode) >= 0 ||
-            autoSwitchKeys.indexOf(e.key.toLowerCase().trim()) >= 0) {
-            var isTabKey = autoSwitchKeys.indexOf(key_1.Key.TAB.toLowerCase().trim()) >= 0 ||
-                autoSwitchKeys.indexOf(keycode_1.KeyCode.TAB) >= 0 ||
-                autoSwitchKeys.indexOf(keycode_1.KeyCode.TAB.toString()) >= 0;
+        if (this.keyEventMatchesAutoSwitchKeys(e)) {
+            var isTabKey = e.KeyCode === keycode_1.KeyCode.TAB;
             if (isTabKey) {
                 var _b = this.selection, selectionStart = _b.start, selectionEnd = _b.end;
                 if (e.shiftKey && isTabKey) {
@@ -559,45 +562,33 @@ var DateInput = /** @class */ (function (_super) {
             case keycode_1.KeyCode.ARROW_LEFT:
                 this.switchDateSegment(-1);
                 shouldPreventDefault = true;
+                this.switchedPartOnPreviousKeyAction = false;
                 break;
             case keycode_1.KeyCode.ARROW_UP:
                 this.modifyDateSegmentValue(step, symbol, event);
                 shouldPreventDefault = true;
+                this.switchedPartOnPreviousKeyAction = false;
                 break;
             case keycode_1.KeyCode.ARROW_RIGHT:
                 this.switchDateSegment(1);
                 shouldPreventDefault = true;
+                this.switchedPartOnPreviousKeyAction = false;
                 break;
             case keycode_1.KeyCode.ARROW_DOWN:
                 this.modifyDateSegmentValue(-step, symbol, event);
                 shouldPreventDefault = true;
+                this.switchedPartOnPreviousKeyAction = false;
                 break;
             case keycode_1.KeyCode.ENTER:
                 // todo: handle "change" event
                 break;
-            case keycode_1.KeyCode.DELETE:
-            case keycode_1.KeyCode.BACKSPACE:
-                if (this.options.allowNulls) {
-                    var oldValue = this.dateObject.value;
-                    this.dateObject.setValue(null);
-                    this.forceUpdate();
-                    this.tryTriggerValueChange({
-                        oldValue: oldValue,
-                        event: e
-                    });
-                }
-                shouldPreventDefault = true;
-                if (e.keyCode === keycode_1.KeyCode.BACKSPACE &&
-                    ((this.options.autoSwitchKeys || []).indexOf(keycode_1.KeyCode.BACKSPACE) >= 0 ||
-                        (this.options.autoSwitchKeys || []).indexOf(key_1.Key.BACKSPACE) >= 0)) {
-                    this.switchDateSegment(-1);
-                }
-                return;
             case key_1.Key.HOME:
                 this.selectNearestSegment(0);
+                this.switchedPartOnPreviousKeyAction = false;
                 break;
             case key_1.Key.END:
                 this.selectNearestSegment(this.elementValue.length);
+                this.switchedPartOnPreviousKeyAction = false;
                 break;
             default:
                 // allow the "input" event to handle the change
@@ -702,9 +693,11 @@ var DateInput = /** @class */ (function (_super) {
         configurable: true
     });
     DateInput.prototype.setSelection = function (selection) {
-        // this._lastSelectedSymbol = this.currentFormat[selection.start];
         if (this.element && document.activeElement === this.element) {
             this.element.setSelectionRange(selection.start, selection.end);
+            if (selection.start !== selection.end) {
+                this.interactionMode = interaction_mode_1.DateInputInteractionMode.Selection;
+            }
         }
     };
     /**
@@ -755,8 +748,7 @@ var DateInput = /** @class */ (function (_super) {
         var selection = this.selection;
         if (this.isInCaretMode()) {
             var start = selection.start;
-            var currentSymbol = this.currentFormat[start - (this.elementValue.length - this.currentFormat.length)] ||
-                this.currentFormat[start];
+            var currentSymbol = this.currentFormat[start - 1];
             var symbol = "";
             var symbolCandidate = "";
             if (offset < 0) {
@@ -943,6 +935,19 @@ var DateInput = /** @class */ (function (_super) {
         this.setTextAndFormat();
         this.refreshElementValue();
     };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.forceUpdateWithSelection = function () {
+        var _a = this.selection, start = _a.start, end = _a.end;
+        var elementValueLength = this.elementValue.length;
+        this.forceUpdate();
+        var selectionOffset = this.elementValue.length - elementValueLength;
+        this.setSelection({
+            start: start + selectionOffset,
+            end: end + selectionOffset
+        });
+    };
     /**
      * @hidden
      */
@@ -1126,6 +1131,20 @@ var DateInput = /** @class */ (function (_super) {
         }, options));
         return dateObject;
     };
+    /* tslint:enable:align */
+    /**
+     * @hidden
+     */
+    DateInput.prototype.keyEventMatchesAutoSwitchKeys = function (keyObject) {
+        var autoSwitchKeys = (this.options.autoSwitchKeys || [])
+            .map(function (x) { return x.toString().toLowerCase().trim(); });
+        if (autoSwitchKeys.indexOf(keyObject.keyCode.toString()) >= 0 ||
+            autoSwitchKeys.indexOf(keyObject.keyCode) >= 0 ||
+            autoSwitchKeys.indexOf(keyObject.key.toLowerCase().trim()) >= 0) {
+            return true;
+        }
+        return false;
+    };
     return DateInput;
 }(observable_1.Observable));
 exports.DateInput = DateInput;

package/dist/npm/dateinput/utils.js

@@ -70,8 +70,8 @@ exports.approximateStringMatching = function (_a) {
         return [[symbol, newSegmentText[selectionStart - 1]]];
     }
     /* Handle the entering of a space or a separator for navigating to the next item. */
-    if ((!isInCaretMode && newSegmentText[newSegmentText.length - 1] === ' ') ||
-        (!isInCaretMode && newSegmentText[newSegmentText.length - 1] === oldTextSeparator)) {
+    if ((newSegmentText[newSegmentText.length - 1] === ' ') ||
+        (newSegmentText[newSegmentText.length - 1] === oldTextSeparator)) {
         return [[formatPattern[selectionStart - 1], constants_1.Constants.formatSeparator]];
     }
     /* Handle typing over a correctly selected part. */