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

package/dist/es2015/dateinput/dateinput.js

@@ -2,7 +2,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';
@@ -71,15 +71,15 @@ export class DateInput extends Observable {
         this.currentText = '';
         this.currentFormat = '';
         this.interactionMode = DateInputInteractionMode.None;
-        this.localeId = Constants.defaultLocaleId;
+        this.previousElementSelection = { start: 0, end: 0 };
         this.init(element, options);
     }
     get value() {
         return this.dateObject && this.dateObject.getValue();
     }
     init(element, options) {
-        let dateValue = isDate(this.options.value) ? cloneDate(this.options.value) : new Date(options.formattedValue);
-        if (!isDate(dateValue)) {
+        let dateValue = isValidDate(this.options.value) ? cloneDate(this.options.value) : new Date(options.formattedValue);
+        if (!isValidDate(dateValue)) {
             dateValue = null;
         }
         this.element = element;
@@ -92,6 +92,7 @@ export class DateInput extends Observable {
         this.setTextAndFormat();
         this.bindEvents();
         this.resetSegmentValue = true;
+        this.interactionMode = DateInputInteractionMode.None;
         this.forceUpdate();
     }
     destroy() {
@@ -146,8 +147,8 @@ export class DateInput extends Observable {
     setOptions(options, 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);
         }
     }
     /**
@@ -263,33 +264,48 @@ export class DateInput extends Observable {
         const 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;
         }
         const oldDateObjectValue = this.dateObject && this.dateObject.getValue();
         const { text: currentText, format: currentFormat } = this.dateObject.getTextAndFormat();
         this.currentFormat = currentFormat;
-        const text = hasCaret && (isBackspaceKey || isDeleteKey) ? this.previousElementValue : currentText;
+        let text = "";
+        if (hasCaret) {
+            if (isBackspaceKey || isDeleteKey) {
+                text = this.previousElementValue;
+            }
+            else if (originalInteractionMode === DateInputInteractionMode.Caret) {
+                text = this.previousElementValue;
+            }
+            else {
+                text = currentText;
+            }
+        }
+        else {
+            text = currentText;
+        }
+        const newText = this.elementValue;
         const 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;
             }
         }
@@ -304,7 +320,8 @@ export class DateInput extends Observable {
                     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;
@@ -342,6 +359,25 @@ export class DateInput extends Observable {
                     }
                 }
             }
+            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) {
@@ -358,10 +394,13 @@ export class DateInput extends Observable {
                         this.setSelection(this.selectionBySymbol(symbolForSelection));
                     }
                     else {
-                        this.setPreviousInputEventState(this.keyDownEvent);
+                        this.restorePreviousInputEventState();
                     }
                 }
             }
+            else {
+                this.restorePreviousInputEventState();
+            }
         }
         else if (this.options.autoSwitchParts && (switchPart || navigationOnly)) {
             if (!hasCaret) {
@@ -373,6 +412,12 @@ export class DateInput extends Observable {
             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
@@ -418,6 +463,8 @@ export class DateInput extends Observable {
         }
         this.keyDownEvent = e;
         this.previousElementValue = this.element.value;
+        const { start, end } = this.selection;
+        this.previousElementSelection = { start, end };
         const autoSwitchKeys = (this.options.autoSwitchKeys || [])
             .map(x => x.toString().toLowerCase().trim());
         if (autoSwitchKeys.indexOf(e.keyCode.toString()) >= 0 ||
@@ -606,6 +653,14 @@ export class DateInput extends Observable {
         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, end };
     }
     /**
@@ -629,24 +684,36 @@ export class DateInput extends Observable {
         const selection = this.selection;
         if (this.isInCaretMode()) {
             let start = selection.start;
-            let closestNonSeparatorSymbol = this.currentFormat[start];
-            for (let i = start; i >= 0; i--) {
-                closestNonSeparatorSymbol = this.currentFormat[i];
-                if (closestNonSeparatorSymbol !== Constants.formatSeparator) {
-                    start = i;
-                    break;
+            const currentSymbol = this.currentFormat[start - (this.elementValue.length - this.currentFormat.length)];
+            let symbol = "";
+            let symbolCandidate = "";
+            if (offset < 0) {
+                for (let i = 0; i < start + offset; i++) {
+                    symbolCandidate = this.currentFormat[i];
+                    if (symbolCandidate !== Constants.formatSeparator &&
+                        symbolCandidate !== currentSymbol) {
+                        start = i;
+                        symbol = symbolCandidate;
+                        break;
+                    }
                 }
             }
-            let symbol;
-            for (let i = start; i < this.currentFormat.length; i++) {
-                symbol = this.currentFormat[i];
-                if (symbol !== Constants.formatSeparator) {
-                    break;
+            else {
+                for (let 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;
             }
         }
         let { start: selectionStart, end: selectionEnd } = this.selection;
@@ -800,7 +867,6 @@ export class DateInput extends Observable {
      * @hidden
      */
     setElementValue(value) {
-        this.previousElementValue = this.element.value;
         this.element.value = value;
     }
     /**
@@ -836,23 +902,25 @@ export class DateInput extends Observable {
         }
         /* eslint-enable no-fallthrough */
     }
-    setPreviousInputEventState(keyDownEvent) {
-        const { start: selectionStart, end: selectionEnd } = this.selection;
-        let 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
+     */
+    restorePreviousInputEventState() {
+        this.restorePreviousElementValue();
+        this.restorePreviousElementSelection();
+    }
+    /**
+     * @hidden
+     */
+    restorePreviousElementValue() {
         this.setElementValue(this.previousElementValue || '');
-        this.setSelection({ start: selectionStart + selectionOffset, end: selectionEnd + selectionOffset });
+    }
+    /**
+     * @hidden
+     */
+    restorePreviousElementSelection() {
+        const { start, end } = this.previousElementSelection;
+        this.setSelection({ start: start || 0, end: end || 0 });
     }
     writeValue(value) {
         this.verifyValue(value);
@@ -860,7 +928,7 @@ export class DateInput extends Observable {
         this.refreshElementValue();
     }
     verifyValue(value) {
-        if (value && !isDate(value)) {
+        if (value && !isValidDate(value)) {
             throw new Error("The 'value' should be a valid JavaScript Date instance.");
         }
     }
@@ -878,6 +946,7 @@ export class DateInput extends Observable {
             element.placeholder = this.options.placeholder;
         }
         const newElementValue = !showPlaceholder ? currentText : "";
+        this.previousElementValue = this.elementValue;
         this.setElementValue(newElementValue);
         if (this.isActive && !this.options.allowCaretMode && this.options.selectNearestSegmentOnFocus) {
             this.selectNearestSegment(start);
@@ -959,10 +1028,10 @@ export class DateInput extends Observable {
             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/es2015/dateinput/utils.js

@@ -52,27 +52,23 @@ export const approximateStringMatching = ({ oldText, newText, formatPattern, sel
         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) {
-            let symbol = formatPattern[selectionStart - 1];
-            return [[symbol, newSegmentText[selectionStart - 1]]];
-        }
-        else {
-            let symbol = formatPattern[0];
-            for (let i = Math.max(0, oldSegmentText.length - 1); i < formatPattern.length; i++) {
-                if (formatPattern[i] !== Constants.formatSeparator) {
-                    symbol = formatPattern[i];
-                    break;
-                }
+        let symbol = formatPattern[0];
+        for (let 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. */

package/dist/npm/common/dateobject.d.ts

@@ -63,13 +63,14 @@ export declare class DateObject {
     /**
      * @hidden
      */
-    parsePart({ symbol, currentChar, resetSegmentValue, cycleSegmentValue, rawTextValue, isDeleting }: {
+    parsePart({ symbol, currentChar, resetSegmentValue, cycleSegmentValue, rawTextValue: rawInputValue, isDeleting, originalFormat }: {
         symbol: any;
         currentChar: any;
         resetSegmentValue: any;
         cycleSegmentValue: any;
         rawTextValue: any;
         isDeleting: any;
+        originalFormat: any;
     }): any;
     /**
      * @hidden
@@ -169,4 +170,8 @@ export declare class DateObject {
      */
     modifyDateSymbolWithValue(date: any, symbol: any, value: any): Date;
     markDatePartsAsExisting(): void;
+    /**
+     * @hidden
+     */
+    getPartsForSegment(mask: any, partIndex: any): any[];
 }