@progress/kendo-dateinputs-common 0.2.0-dev.202301061353 → 0.2.0-dev.202301130811

package/dist/es/dateinput/dateinput.js

@@ -4,7 +4,7 @@ import { DateObject } from '../common/dateobject';
 import { approximateStringMatching } from './utils';
 import { KeyCode } from '../common/keycode';
 import { Key } from '../common/key';
-import { extend, isPresent, isDocumentAvailable, millisecondDigitsInFormat, millisecondStepFor, isDate } from '../common/utils';
+import { extend, isPresent, isDocumentAvailable, millisecondDigitsInFormat, millisecondStepFor, isValidDate } from '../common/utils';
 import { Observable } from '../common/observable';
 import { DateInputInteractionMode } from './interaction-mode';
 import { isEqual, cloneDate } from '@progress/kendo-date-math';
@@ -74,7 +74,7 @@ var DateInput = /** @class */ (function (_super) {
         _this.currentText = '';
         _this.currentFormat = '';
         _this.interactionMode = DateInputInteractionMode.None;
-        _this.localeId = Constants.defaultLocaleId;
+        _this.previousElementSelection = { start: 0, end: 0 };
         _this.init(element, options);
         return _this;
     }
@@ -86,8 +86,8 @@ var DateInput = /** @class */ (function (_super) {
         configurable: true
     });
     DateInput.prototype.init = function (element, options) {
-        var dateValue = isDate(this.options.value) ? cloneDate(this.options.value) : new Date(options.formattedValue);
-        if (!isDate(dateValue)) {
+        var dateValue = isValidDate(this.options.value) ? cloneDate(this.options.value) : new Date(options.formattedValue);
+        if (!isValidDate(dateValue)) {
             dateValue = null;
         }
         this.element = element;
@@ -100,6 +100,7 @@ var DateInput = /** @class */ (function (_super) {
         this.setTextAndFormat();
         this.bindEvents();
         this.resetSegmentValue = true;
+        this.interactionMode = DateInputInteractionMode.None;
         this.forceUpdate();
     };
     DateInput.prototype.destroy = function () {
@@ -155,8 +156,8 @@ var DateInput = /** @class */ (function (_super) {
         if (refresh === void 0) { refresh = false; }
         this.options = extend(this.options, options);
         if (refresh) {
-            this.destroy();
-            this.init(this.element, options);
+            this.unbindEvents();
+            this.init(this.element, this.options);
         }
     };
     /**
@@ -272,33 +273,48 @@ var DateInput = /** @class */ (function (_super) {
         var hasCaret = this.isInCaretMode();
         if (hasCaret && this.keyDownEvent.key === Key.SPACE) {
             // do not allow custom "holes" in the date segments
-            this.setPreviousInputEventState(this.keyDownEvent);
+            this.restorePreviousInputEventState();
             return;
         }
         var oldDateObjectValue = this.dateObject && this.dateObject.getValue();
         var _a = this.dateObject.getTextAndFormat(), currentText = _a.text, currentFormat = _a.format;
         this.currentFormat = currentFormat;
-        var text = hasCaret && (isBackspaceKey || isDeleteKey) ? this.previousElementValue : currentText;
+        var text = "";
+        if (hasCaret) {
+            if (isBackspaceKey || isDeleteKey) {
+                text = this.previousElementValue;
+            }
+            else if (originalInteractionMode === DateInputInteractionMode.Caret) {
+                text = this.previousElementValue;
+            }
+            else {
+                text = currentText;
+            }
+        }
+        else {
+            text = currentText;
+        }
+        var newText = this.elementValue;
         var diff = approximateStringMatching({
             oldText: text,
-            newText: this.element.value,
+            newText: newText,
             formatPattern: this.currentFormat,
             selectionStart: this.selection.start,
             isInCaretMode: hasCaret,
             keyEvent: this.keyDownEvent
         });
         if (hasCaret && (!diff || diff.length === 0)) {
-            this.setPreviousInputEventState(this.keyDownEvent);
+            this.restorePreviousInputEventState();
             return;
         }
         else if (hasCaret && diff.length === 1) {
             if (!diff[0] || !diff[0][0]) {
-                this.setPreviousInputEventState(this.keyDownEvent);
+                this.restorePreviousInputEventState();
                 return;
             }
             else if (hasCaret && diff[0] &&
                 (diff[0][0] === Constants.formatSeparator || diff[0][1] === Constants.formatSeparator)) {
-                this.setPreviousInputEventState(this.keyDownEvent);
+                this.restorePreviousInputEventState();
                 return;
             }
         }
@@ -313,7 +329,8 @@ var DateInput = /** @class */ (function (_super) {
                     resetSegmentValue: this.resetSegmentValue,
                     cycleSegmentValue: !this.isInCaretMode(),
                     rawTextValue: this.element.value,
-                    isDeleting: isBackspaceKey || isDeleteKey
+                    isDeleting: isBackspaceKey || isDeleteKey,
+                    originalFormat: this.currentFormat
                 });
                 parsePartsResults.push(parsePartResult);
                 switchPart = parsePartResult.switchToNext;
@@ -351,6 +368,25 @@ var DateInput = /** @class */ (function (_super) {
                     }
                 }
             }
+            else if (hasCaret) {
+                if (this.options.format.length !== this.currentFormat.length) {
+                    if (hasDateValueChanged && isPresent(this.dateObject.getValue())) {
+                        if (switchPart) {
+                            this.switchDateSegment(1);
+                        }
+                    }
+                }
+                else {
+                    if (hasDateValueChanged) {
+                        if (lastParseResultHasNoValue) {
+                            this.restorePreviousInputEventState();
+                        }
+                    }
+                    else {
+                        this.restorePreviousInputEventState();
+                    }
+                }
+            }
         }
         if (!switchPart && hasCaret && !isBackspaceKey && !isDeleteKey && !resetPart && lastParseResultHasNoValue) {
             if (hasDateValueChanged) {
@@ -367,10 +403,13 @@ var DateInput = /** @class */ (function (_super) {
                         this.setSelection(this.selectionBySymbol(symbolForSelection));
                     }
                     else {
-                        this.setPreviousInputEventState(this.keyDownEvent);
+                        this.restorePreviousInputEventState();
                     }
                 }
             }
+            else {
+                this.restorePreviousInputEventState();
+            }
         }
         else if (this.options.autoSwitchParts && (switchPart || navigationOnly)) {
             if (!hasCaret) {
@@ -382,6 +421,12 @@ var DateInput = /** @class */ (function (_super) {
             event: e
         });
         this.triggerInputEnd({ event: e });
+        if (hasCaret) {
+            // a format like "F" can dynamically change the resolved format pattern based on the value, e.g.
+            // "Tuesday, February 1, 2022 3:04:05 AM" becomes
+            // "Wednesday, February 2, 2022 3:04:05 AM" giving a diff of 2 ("Tuesday".length - "Wednesday".length)
+            this.setTextAndFormat();
+        }
     };
     /**
      * @hidden
@@ -427,6 +472,8 @@ var DateInput = /** @class */ (function (_super) {
         }
         this.keyDownEvent = e;
         this.previousElementValue = this.element.value;
+        var _a = this.selection, start = _a.start, end = _a.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 ||
@@ -436,7 +483,7 @@ var DateInput = /** @class */ (function (_super) {
                 autoSwitchKeys.indexOf(KeyCode.TAB) >= 0 ||
                 autoSwitchKeys.indexOf(KeyCode.TAB.toString()) >= 0;
             if (isTabKey) {
-                var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;
+                var _b = this.selection, selectionStart = _b.start, selectionEnd = _b.end;
                 if (e.shiftKey && isTabKey) {
                     this.switchDateSegment(-1);
                 }
@@ -631,6 +678,14 @@ var DateInput = /** @class */ (function (_super) {
         if (start < 0) {
             start = 0;
         }
+        if (!this.options.autoCorrectParts && this.currentFormat.length !== this.currentText.length) {
+            if (this.currentFormat.length < this.currentText.length) {
+                end += this.currentText.length - this.currentFormat.length;
+            }
+            else {
+                end = Math.max(0, end - (this.currentFormat.length - this.currentText.length));
+            }
+        }
         return { start: start, end: end };
     };
     /**
@@ -654,24 +709,36 @@ var DateInput = /** @class */ (function (_super) {
         var selection = this.selection;
         if (this.isInCaretMode()) {
             var start = selection.start;
-            var closestNonSeparatorSymbol = this.currentFormat[start];
-            for (var i = start; i >= 0; i--) {
-                closestNonSeparatorSymbol = this.currentFormat[i];
-                if (closestNonSeparatorSymbol !== Constants.formatSeparator) {
-                    start = i;
-                    break;
+            var currentSymbol = this.currentFormat[start - (this.elementValue.length - this.currentFormat.length)];
+            var symbol = "";
+            var symbolCandidate = "";
+            if (offset < 0) {
+                for (var i = 0; i < start + offset; i++) {
+                    symbolCandidate = this.currentFormat[i];
+                    if (symbolCandidate !== Constants.formatSeparator &&
+                        symbolCandidate !== currentSymbol) {
+                        start = i;
+                        symbol = symbolCandidate;
+                        break;
+                    }
                 }
             }
-            var symbol = void 0;
-            for (var i = start; i < this.currentFormat.length; i++) {
-                symbol = this.currentFormat[i];
-                if (symbol !== Constants.formatSeparator) {
-                    break;
+            else {
+                for (var i = start + offset; i < this.currentFormat.length; i++) {
+                    symbolCandidate = this.currentFormat[i];
+                    if (symbolCandidate !== Constants.formatSeparator &&
+                        symbolCandidate !== currentSymbol) {
+                        start = i;
+                        symbol = symbolCandidate;
+                        break;
+                    }
                 }
             }
             if (symbol) {
                 this.forceUpdate();
                 this.setSelection(this.selectionBySymbol(symbol));
+                this.interactionMode = DateInputInteractionMode.Selection;
+                return;
             }
         }
         var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;
@@ -838,7 +905,6 @@ var DateInput = /** @class */ (function (_super) {
      * @hidden
      */
     DateInput.prototype.setElementValue = function (value) {
-        this.previousElementValue = this.element.value;
         this.element.value = value;
     };
     /**
@@ -874,23 +940,25 @@ var DateInput = /** @class */ (function (_super) {
         }
         /* eslint-enable no-fallthrough */
     };
-    DateInput.prototype.setPreviousInputEventState = function (keyDownEvent) {
-        var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;
-        var selectionOffset = -1;
-        if (keyDownEvent.keyCode === KeyCode.BACKSPACE) {
-            selectionOffset = 1;
-        }
-        else if (keyDownEvent.keyCode === KeyCode.DELETE) {
-            selectionOffset = 0;
-        }
-        else if (keyDownEvent.keyCode === KeyCode.SPACE) {
-            selectionOffset = -1;
-        }
-        else {
-            selectionOffset = -1;
-        }
+    /**
+     * @hidden
+     */
+    DateInput.prototype.restorePreviousInputEventState = function () {
+        this.restorePreviousElementValue();
+        this.restorePreviousElementSelection();
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.restorePreviousElementValue = function () {
         this.setElementValue(this.previousElementValue || '');
-        this.setSelection({ start: selectionStart + selectionOffset, end: selectionEnd + selectionOffset });
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.restorePreviousElementSelection = function () {
+        var _a = this.previousElementSelection, start = _a.start, end = _a.end;
+        this.setSelection({ start: start || 0, end: end || 0 });
     };
     DateInput.prototype.writeValue = function (value) {
         this.verifyValue(value);
@@ -898,7 +966,7 @@ var DateInput = /** @class */ (function (_super) {
         this.refreshElementValue();
     };
     DateInput.prototype.verifyValue = function (value) {
-        if (value && !isDate(value)) {
+        if (value && !isValidDate(value)) {
             throw new Error("The 'value' should be a valid JavaScript Date instance.");
         }
     };
@@ -916,6 +984,7 @@ var DateInput = /** @class */ (function (_super) {
             element.placeholder = this.options.placeholder;
         }
         var newElementValue = !showPlaceholder ? currentText : "";
+        this.previousElementValue = this.elementValue;
         this.setElementValue(newElementValue);
         if (this.isActive && !this.options.allowCaretMode && this.options.selectNearestSegmentOnFocus) {
             this.selectNearestSegment(start);
@@ -999,10 +1068,10 @@ var DateInput = /** @class */ (function (_super) {
             intlService: this.intl,
             formatPlaceholder: this.formatPlaceholder,
             format: this.inputFormat,
-            localeId: this.localeId,
             cycleTime: this.options.cycleTime,
             twoDigitYearMax: this.options.twoDigitYearMax,
-            autoCorrectParts: this.options.autoCorrectParts
+            autoCorrectParts: this.options.autoCorrectParts,
+            value: this.options.value
         }, options));
         return dateObject;
     };

package/dist/es/dateinput/utils.js

@@ -53,27 +53,23 @@ export var approximateStringMatching = function (_a) {
         Handle the typing over a literal as well.
     */
     if ((isInCaretMode &&
-        newSegmentText.indexOf(oldSegmentText) === 0 && formatPattern[selectionStart - 1]) ||
+        (newSegmentText.indexOf(oldSegmentText) === 0 ||
+            formatPattern[selectionStart - 1] === Constants.formatSeparator)) ||
         (!isInCaretMode &&
             (newSegmentText.indexOf(oldSegmentText) === 0 ||
                 formatPattern[selectionStart - 1] === Constants.formatSeparator))) {
-        if (isInCaretMode) {
-            var symbol = formatPattern[selectionStart - 1];
-            return [[symbol, newSegmentText[selectionStart - 1]]];
-        }
-        else {
-            var symbol = formatPattern[0];
-            for (var i = Math.max(0, oldSegmentText.length - 1); i < formatPattern.length; i++) {
-                if (formatPattern[i] !== Constants.formatSeparator) {
-                    symbol = formatPattern[i];
-                    break;
-                }
+        var symbol = formatPattern[0];
+        for (var i = Math.max(0, oldSegmentText.length - 1); i < formatPattern.length; i++) {
+            if (formatPattern[i] !== Constants.formatSeparator) {
+                symbol = formatPattern[i];
+                break;
             }
-            return [[symbol, newSegmentText[selectionStart - 1]]];
         }
+        return [[symbol, newSegmentText[selectionStart - 1]]];
     }
     /* Handle the entering of a space or a separator for navigating to the next item. */
-    if (newSegmentText[newSegmentText.length - 1] === ' ' || newSegmentText[newSegmentText.length - 1] === oldTextSeparator) {
+    if ((!isInCaretMode && newSegmentText[newSegmentText.length - 1] === ' ') ||
+        (!isInCaretMode && newSegmentText[newSegmentText.length - 1] === oldTextSeparator)) {
         return [[formatPattern[selectionStart - 1], Constants.formatSeparator]];
     }
     /* Handle typing over a correctly selected part. */