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

package/dist/es2015/dateinput/dateinput.js

@@ -0,0 +1,969 @@
+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 { Observable } from '../common/observable';
+import { DateInputInteractionMode } from './interaction-mode';
+import { isEqual, cloneDate } from '@progress/kendo-date-math';
+import { Constants } from '../common/constants';
+const DEFAULT_SEGMENT_STEP = 1;
+const DRAG_START = "dragStart";
+const DROP = "drop";
+const TOUCH_START = "touchstart";
+const MOUSE_DOWN = "mousedown";
+const MOUSE_UP = "mouseup";
+const CLICK = "click";
+const INPUT = "input";
+const KEY_DOWN = "keydown";
+const FOCUS = "focus";
+const BLUR = "blur";
+const PASTE = "paste";
+const MOUSE_SCROLL = "DOMMouseScroll";
+const MOUSE_WHEEL = "mousewheel";
+const VALUE_CHANGE = "valueChange";
+const INPUT_END = "inputEnd";
+const BLUR_END = "blurEnd";
+const FOCUS_END = "focusEnd";
+const CHANGE = "change";
+const defaultDateInputOptions = {
+    format: "d",
+    allowNulls: false,
+    placeholder: null,
+    cycleTime: true,
+    locale: null,
+    steps: {
+        millisecond: DEFAULT_SEGMENT_STEP,
+        second: DEFAULT_SEGMENT_STEP,
+        minute: DEFAULT_SEGMENT_STEP,
+        hour: DEFAULT_SEGMENT_STEP,
+        day: DEFAULT_SEGMENT_STEP,
+        month: DEFAULT_SEGMENT_STEP,
+        year: DEFAULT_SEGMENT_STEP
+    },
+    formatPlaceholder: null,
+    events: {
+        [VALUE_CHANGE]: null,
+        [INPUT]: null,
+        [INPUT_END]: null,
+        [FOCUS]: null,
+        [FOCUS_END]: null,
+        [BLUR]: null,
+        [BLUR_END]: null,
+        [KEY_DOWN]: null,
+        [MOUSE_WHEEL]: null,
+        [CHANGE]: null
+    },
+    selectNearestSegmentOnFocus: false,
+    enableMouseWheel: false,
+    allowCaretMode: false,
+    autoSwitchParts: true,
+    autoSwitchKeys: [],
+    twoDigitYearMax: Constants.twoDigitYearMax,
+    autoCorrectParts: true
+};
+export class DateInput extends Observable {
+    constructor(element, options) {
+        super(options);
+        this.dateObject = null;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.currentText = '';
+        this.currentFormat = '';
+        this.interactionMode = DateInputInteractionMode.None;
+        this.localeId = Constants.defaultLocaleId;
+        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)) {
+            dateValue = null;
+        }
+        this.element = element;
+        // this.element._kendoWidget = this;
+        this.options = extend({}, defaultDateInputOptions, options);
+        this.intl = this.options.intlService;
+        this.formatPlaceholder = this.options.formatPlaceholder ? this.options.formatPlaceholder : 'formatPattern';
+        this.dateObject = this.createDateObject();
+        this.dateObject.setValue(dateValue);
+        this.setTextAndFormat();
+        this.bindEvents();
+        this.resetSegmentValue = true;
+        this.forceUpdate();
+    }
+    destroy() {
+        this.unbindEvents();
+        this.dateObject = null;
+        super.destroy();
+    }
+    bindEvents() {
+        this.onElementDragStart = this.onElementDragStart.bind(this);
+        this.element.addEventListener(DRAG_START, this.onElementDragStart);
+        this.onElementDrop = this.onElementDrop.bind(this);
+        this.element.addEventListener(DROP, this.onElementDrop);
+        this.onElementClick = this.onElementClick.bind(this);
+        this.element.addEventListener(CLICK, this.onElementClick);
+        this.onElementMouseDown = this.onElementMouseDown.bind(this);
+        this.element.addEventListener(MOUSE_DOWN, this.onElementMouseDown);
+        this.element.addEventListener(TOUCH_START, this.onElementMouseDown);
+        this.onElementMouseUp = this.onElementMouseUp.bind(this);
+        this.element.addEventListener(MOUSE_UP, this.onElementMouseUp);
+        this.onElementInput = this.onElementInput.bind(this);
+        this.element.addEventListener(INPUT, this.onElementInput);
+        this.onElementKeyDown = this.onElementKeyDown.bind(this);
+        this.element.addEventListener(KEY_DOWN, this.onElementKeyDown);
+        this.onElementFocus = this.onElementFocus.bind(this);
+        this.element.addEventListener(FOCUS, this.onElementFocus);
+        this.onElementBlur = this.onElementBlur.bind(this);
+        this.element.addEventListener(BLUR, this.onElementBlur);
+        this.onElementChange = this.onElementChange.bind(this);
+        this.element.addEventListener(CHANGE, this.onElementChange);
+        this.onElementPaste = this.onElementPaste.bind(this);
+        this.element.addEventListener(PASTE, this.onElementPaste);
+        this.onElementMouseWheel = this.onElementMouseWheel.bind(this);
+        this.element.addEventListener(MOUSE_SCROLL, this.onElementMouseWheel);
+        this.element.addEventListener(MOUSE_WHEEL, this.onElementMouseWheel);
+    }
+    unbindEvents() {
+        this.element.removeEventListener(DRAG_START, this.onElementDragStart);
+        this.element.removeEventListener(DROP, this.onElementDrop);
+        this.element.removeEventListener(TOUCH_START, this.onElementMouseDown);
+        this.element.removeEventListener(MOUSE_DOWN, this.onElementMouseDown);
+        this.element.removeEventListener(MOUSE_UP, this.onElementMouseUp);
+        this.element.removeEventListener(CLICK, this.onElementClick);
+        this.element.removeEventListener(INPUT, this.onElementInput);
+        this.element.removeEventListener(KEY_DOWN, this.onElementKeyDown);
+        this.element.removeEventListener(FOCUS, this.onElementFocus);
+        this.element.removeEventListener(BLUR, this.onElementBlur);
+        this.element.removeEventListener(CHANGE, this.onElementChange);
+        this.element.removeEventListener(PASTE, this.onElementPaste);
+        this.element.removeEventListener(MOUSE_SCROLL, this.onElementMouseWheel);
+        this.element.removeEventListener(MOUSE_WHEEL, this.onElementMouseWheel);
+    }
+    setOptions(options, refresh = false) {
+        this.options = extend(this.options, options);
+        if (refresh) {
+            this.destroy();
+            this.init(this.element, options);
+        }
+    }
+    /**
+     * @hidden
+     */
+    resetLocale() {
+        this.unbindEvents();
+        this.init(this.element, this.options);
+    }
+    /**
+     * @hidden
+     */
+    isInCaretMode() {
+        return this.interactionMode === DateInputInteractionMode.Caret;
+    }
+    focus() {
+        this.element.focus();
+        if (this.options.selectNearestSegmentOnFocus) {
+            this.selectNearestSegment(0);
+        }
+    }
+    /**
+     * @hidden
+     */
+    onElementDragStart(e) {
+        e.preventDefault();
+    }
+    /**
+     * @hidden
+     */
+    onElementDrop(e) {
+        e.preventDefault();
+    }
+    /**
+     * @hidden
+     */
+    onElementMouseDown() {
+        this.mouseDownStarted = true;
+        this.focusedPriorToMouseDown = this.isActive;
+    }
+    /**
+     * @hidden
+     */
+    onElementMouseUp(e) {
+        this.mouseDownStarted = false;
+        e.preventDefault();
+    }
+    /**
+     * @hidden
+     */
+    onElementClick(e) {
+        this.mouseDownStarted = false;
+        const selection = this.selection;
+        if (this.isInCaretMode()) {
+            // explicitly refresh the input element value
+            // caret mode can change the number of symbols in the element
+            // thus clicking on a segment can result in incorrect selection
+            this.forceUpdate();
+        }
+        if (e.detail === 3) {
+            // when 3 clicks occur, leave the native event to handle the change
+            // this results in selecting the whole element value
+        }
+        else {
+            if (this.isActive && this.options.selectNearestSegmentOnFocus) {
+                const selectionPresent = this.element.selectionStart !== this.element.selectionEnd;
+                const placeholderToggled = isPresent(this.options.placeholder) &&
+                    !this.dateObject.hasValue() &&
+                    !this.focusedPriorToMouseDown;
+                // focus first segment if the user hasn't selected something during mousedown and if the placeholder was just toggled
+                const selectFirstSegment = !selectionPresent && placeholderToggled;
+                const index = selectFirstSegment ? 0 : this.caret()[0];
+                this.selectNearestSegment(index);
+            }
+            else {
+                this.setSelection(this.selectionByIndex(selection.start));
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    onElementInput(e) {
+        this.triggerInput({ event: e });
+        const keyDownEvent = this.keyDownEvent || {};
+        const isBackspaceKey = keyDownEvent.keyCode === KeyCode.BACKSPACE || keyDownEvent.key === Key.BACKSPACE;
+        const isDeleteKey = keyDownEvent.keyCode === KeyCode.DELETE || keyDownEvent.key === Key.DELETE;
+        if (!this.element || !this.dateObject) {
+            return;
+        }
+        if (this.isPasteInProgress) {
+            if (this.options.allowCaretMode) {
+                // pasting should leave the input with caret
+                // thus allow direct input instead of selection mode
+                this.resetSegmentValue = false;
+            }
+            this.updateOnPaste(e);
+            this.isPasteInProgress = false;
+            return;
+        }
+        const originalInteractionMode = this.interactionMode;
+        if (this.options.allowCaretMode &&
+            originalInteractionMode !== DateInputInteractionMode.Caret &&
+            !isDeleteKey && !isBackspaceKey) {
+            this.resetSegmentValue = true;
+        }
+        if (this.options.allowCaretMode) {
+            this.interactionMode = DateInputInteractionMode.Caret;
+        }
+        else {
+            this.interactionMode = DateInputInteractionMode.Selection;
+        }
+        const hasCaret = this.isInCaretMode();
+        if (hasCaret && this.keyDownEvent.key === Key.SPACE) {
+            // do not allow custom "holes" in the date segments
+            this.setPreviousInputEventState(this.keyDownEvent);
+            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;
+        const diff = approximateStringMatching({
+            oldText: text,
+            newText: this.element.value,
+            formatPattern: this.currentFormat,
+            selectionStart: this.selection.start,
+            isInCaretMode: hasCaret,
+            keyEvent: this.keyDownEvent
+        });
+        if (hasCaret && (!diff || diff.length === 0)) {
+            this.setPreviousInputEventState(this.keyDownEvent);
+            return;
+        }
+        else if (hasCaret && diff.length === 1) {
+            if (!diff[0] || !diff[0][0]) {
+                this.setPreviousInputEventState(this.keyDownEvent);
+                return;
+            }
+            else if (hasCaret && diff[0] &&
+                (diff[0][0] === Constants.formatSeparator || diff[0][1] === Constants.formatSeparator)) {
+                this.setPreviousInputEventState(this.keyDownEvent);
+                return;
+            }
+        }
+        const navigationOnly = (diff.length === 1 && diff[0][1] === Constants.formatSeparator);
+        const parsePartsResults = [];
+        let switchPart = false;
+        if (!navigationOnly) {
+            for (let i = 0; i < diff.length; i++) {
+                const parsePartResult = this.dateObject.parsePart({
+                    symbol: diff[i][0],
+                    currentChar: diff[i][1],
+                    resetSegmentValue: this.resetSegmentValue,
+                    cycleSegmentValue: !this.isInCaretMode(),
+                    rawTextValue: this.element.value,
+                    isDeleting: isBackspaceKey || isDeleteKey
+                });
+                parsePartsResults.push(parsePartResult);
+                switchPart = parsePartResult.switchToNext;
+            }
+        }
+        if (!this.options.autoSwitchParts) {
+            switchPart = false;
+        }
+        this.resetSegmentValue = false;
+        const lastParseResult = parsePartsResults[parsePartsResults.length - 1];
+        const lastParseResultHasNoValue = lastParseResult && !lastParseResult.value;
+        const parsingFailedOnDelete = (hasCaret && (isBackspaceKey || isDeleteKey) && lastParseResultHasNoValue);
+        const resetPart = lastParseResult ? lastParseResult.resetPart : false;
+        const hasDateValueChanged = !isEqual(oldDateObjectValue, this.dateObject.value);
+        let symbolForSelection;
+        const currentSelection = this.selection;
+        if (!hasCaret || parsingFailedOnDelete || resetPart) {
+            if (resetPart) {
+                symbolForSelection = this.currentFormat[currentSelection.start];
+            }
+            this.forceUpdate();
+        }
+        if (diff.length && diff[0][0] !== Constants.formatSeparator) {
+            if (!hasCaret || parsingFailedOnDelete || resetPart) {
+                if (symbolForSelection) {
+                    this.setSelection(this.selectionBySymbol(symbolForSelection));
+                }
+                else {
+                    if (!this.options.autoSwitchParts && diff[0][1] === Constants.formatSeparator) {
+                        // do not change the selection when a separator is pressed
+                        // this should happen only if autoSwitchKeys contains the separator explicitly
+                    }
+                    else {
+                        this.setSelection(this.selectionBySymbol(diff[0][0]));
+                    }
+                }
+            }
+        }
+        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 (hasCaret && originalInteractionMode !== DateInputInteractionMode.Caret && hasDateValueChanged) {
+                    }
+                    else if (hasCaret && originalInteractionMode !== DateInputInteractionMode.Caret) {
+                        symbolForSelection = this.currentFormat[currentSelection.start];
+                        this.forceUpdate();
+                        this.setSelection(this.selectionBySymbol(symbolForSelection));
+                    }
+                    else {
+                        this.setPreviousInputEventState(this.keyDownEvent);
+                    }
+                }
+            }
+        }
+        else if (this.options.autoSwitchParts && (switchPart || navigationOnly)) {
+            if (!hasCaret) {
+                this.switchDateSegment(1);
+            }
+        }
+        this.tryTriggerValueChange({
+            oldValue: oldDateObjectValue,
+            event: e
+        });
+        this.triggerInputEnd({ event: e });
+    }
+    /**
+     * @hidden
+     */
+    onElementFocus(e) {
+        if (this.triggerFocus({ event: e })) {
+            return;
+        }
+        this.isActive = true;
+        this.interactionMode = DateInputInteractionMode.None;
+        this.refreshElementValue();
+        if (!this.mouseDownStarted) {
+            this.caret(0, this.elementValue.length);
+        }
+        this.mouseDownStarted = false;
+        this.triggerFocusEnd({ event: e });
+    }
+    /**
+     * @hidden
+     */
+    onElementBlur(e) {
+        this.resetSegmentValue = true;
+        this.isActive = false;
+        if (this.triggerBlur({ event: e })) {
+            return;
+        }
+        this.interactionMode = DateInputInteractionMode.None;
+        this.refreshElementValue();
+        this.triggerBlurEnd({ event: e });
+    }
+    /**
+     * @hidden
+     */
+    onElementChange(e) {
+        this.triggerChange({ event: e });
+    }
+    /**
+     * @hidden
+     */
+    onElementKeyDown(e) {
+        if (this.triggerKeyDown({ event: e })) {
+            return;
+        }
+        this.keyDownEvent = e;
+        this.previousElementValue = this.element.value;
+        const autoSwitchKeys = (this.options.autoSwitchKeys || [])
+            .map(x => x.toString().toLowerCase().trim());
+        if (autoSwitchKeys.indexOf(e.keyCode.toString()) >= 0 ||
+            autoSwitchKeys.indexOf(e.keyCode) >= 0 ||
+            autoSwitchKeys.indexOf(e.key.toLowerCase().trim()) >= 0) {
+            const isTabKey = autoSwitchKeys.indexOf(Key.TAB.toLowerCase().trim()) >= 0 ||
+                autoSwitchKeys.indexOf(KeyCode.TAB) >= 0 ||
+                autoSwitchKeys.indexOf(KeyCode.TAB.toString()) >= 0;
+            if (isTabKey) {
+                const { start: selectionStart, end: selectionEnd } = this.selection;
+                if (e.shiftKey && isTabKey) {
+                    this.switchDateSegment(-1);
+                }
+                else {
+                    this.switchDateSegment(1);
+                }
+                if (selectionStart !== this.selection.start || selectionEnd !== this.selection.end) {
+                    // when the selection changes, prevent the default Tab behavior
+                    e.preventDefault();
+                    return;
+                }
+            }
+            else {
+                // do not allow the "input" event to be triggered
+                e.preventDefault();
+                this.switchDateSegment(1);
+                return;
+            }
+        }
+        const symbol = this.currentFormat[this.selection.start];
+        const step = this.getStepFromSymbol(symbol);
+        let shouldPreventDefault = false;
+        if (e.altKey || e.ctrlKey || e.metaKey || e.keyCode === KeyCode.TAB) {
+            return;
+        }
+        switch (e.keyCode) {
+            case KeyCode.ARROW_LEFT:
+                this.switchDateSegment(-1);
+                shouldPreventDefault = true;
+                break;
+            case KeyCode.ARROW_UP:
+                this.modifyDateSegmentValue(step, symbol, event);
+                shouldPreventDefault = true;
+                break;
+            case KeyCode.ARROW_RIGHT:
+                this.switchDateSegment(1);
+                shouldPreventDefault = true;
+                break;
+            case KeyCode.ARROW_DOWN:
+                this.modifyDateSegmentValue(-step, symbol, event);
+                shouldPreventDefault = true;
+                break;
+            case KeyCode.ENTER:
+                // todo: handle "change" event
+                break;
+            case KeyCode.DELETE:
+            case KeyCode.BACKSPACE:
+                if (this.options.allowNulls) {
+                    const oldValue = this.dateObject.value;
+                    this.dateObject.setValue(null);
+                    this.forceUpdate();
+                    this.tryTriggerValueChange({
+                        oldValue: oldValue,
+                        event: e
+                    });
+                }
+                shouldPreventDefault = true;
+                if (e.keyCode === KeyCode.BACKSPACE &&
+                    ((this.options.autoSwitchKeys || []).indexOf(KeyCode.BACKSPACE) >= 0 ||
+                        (this.options.autoSwitchKeys || []).indexOf(Key.BACKSPACE) >= 0)) {
+                    this.switchDateSegment(-1);
+                }
+                return;
+            case Key.HOME:
+                this.selectNearestSegment(0);
+                break;
+            case Key.END:
+                this.selectNearestSegment(this.elementValue.length);
+                break;
+            default:
+                // allow the "input" event to handle the change
+                return;
+        }
+        if (shouldPreventDefault) {
+            e.preventDefault();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onElementPaste() {
+        this.isPasteInProgress = true;
+    }
+    /**
+     * @hidden
+     */
+    onElementMouseWheel(e) {
+        if (!this.options.enableMouseWheel || this.triggerMouseWheel({ event: e })) {
+            return;
+        }
+        if (!this.isActive) {
+            return;
+        }
+        const event = e;
+        if (event.shiftKey) {
+            this.switchDateSegment((event.wheelDelta || -event.detail) > 0 ? -1 : 1);
+        }
+        else {
+            this.modifyDateSegmentValue((event.wheelDelta || -event.detail) > 0 ? 1 : -1);
+        }
+        event.returnValue = false;
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        }
+    }
+    updateOnPaste(e) {
+        let value = this.intl.parseDate(this.elementValue, this.inputFormat) || this.value;
+        if (isPresent(value) && this.dateObject.shouldNormalizeCentury()) {
+            value = this.dateObject.normalizeCentury(value);
+        }
+        const oldDateObjectValue = this.dateObject && this.dateObject.getValue();
+        this.writeValue(value);
+        this.tryTriggerValueChange({
+            oldValue: oldDateObjectValue,
+            event: e
+        });
+    }
+    get elementValue() {
+        return (this.element || {}).value || '';
+    }
+    get inputFormat() {
+        if (!this.options.format) {
+            return Constants.defaultDateFormat;
+        }
+        if (typeof this.options.format === 'string') {
+            return this.options.format;
+        }
+        else {
+            return this.options.format.inputFormat;
+        }
+    }
+    get displayFormat() {
+        if (!this.options.format) {
+            return Constants.defaultDateFormat;
+        }
+        if (typeof this.options.format === 'string') {
+            return this.options.format;
+        }
+        else {
+            return this.options.format.displayFormat;
+        }
+    }
+    get selection() {
+        let returnValue = { start: 0, end: 0 };
+        if (this.element !== null && this.element.selectionStart !== undefined) {
+            returnValue = {
+                start: this.element.selectionStart,
+                end: this.element.selectionEnd
+            };
+        }
+        return returnValue;
+    }
+    setSelection(selection) {
+        // this._lastSelectedSymbol = this.currentFormat[selection.start];
+        if (this.element && document.activeElement === this.element) {
+            this.element.setSelectionRange(selection.start, selection.end);
+        }
+    }
+    /**
+     * @hidden
+     */
+    selectionBySymbol(symbol) {
+        let start = -1;
+        let end = 0;
+        for (let i = 0; i < this.currentFormat.length; i++) {
+            if (this.currentFormat[i] === symbol) {
+                end = i + 1;
+                if (start === -1) {
+                    start = i;
+                }
+            }
+        }
+        if (start < 0) {
+            start = 0;
+        }
+        return { start, end };
+    }
+    /**
+     * @hidden
+     */
+    selectionByIndex(index) {
+        let selection = { start: index, end: index };
+        for (let i = index, j = index - 1; i < this.currentFormat.length || j >= 0; i++, j--) {
+            if (i < this.currentFormat.length && this.currentFormat[i] !== Constants.formatSeparator) {
+                selection = this.selectionBySymbol(this.currentFormat[i]);
+                break;
+            }
+            if (j >= 0 && this.currentFormat[j] !== Constants.formatSeparator) {
+                selection = this.selectionBySymbol(this.currentFormat[j]);
+                break;
+            }
+        }
+        return selection;
+    }
+    switchDateSegment(offset) {
+        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;
+                }
+            }
+            let symbol;
+            for (let i = start; i < this.currentFormat.length; i++) {
+                symbol = this.currentFormat[i];
+                if (symbol !== Constants.formatSeparator) {
+                    break;
+                }
+            }
+            if (symbol) {
+                this.forceUpdate();
+                this.setSelection(this.selectionBySymbol(symbol));
+            }
+        }
+        let { start: selectionStart, end: selectionEnd } = this.selection;
+        if (selectionStart < selectionEnd &&
+            this.currentFormat[selectionStart] !== this.currentFormat[selectionEnd - 1]) {
+            this.setSelection(this.selectionByIndex(offset > 0 ? selectionStart : selectionEnd - 1));
+            this.resetSegmentValue = true;
+            return;
+        }
+        const previousFormatSymbol = this.currentFormat[selectionStart];
+        let a = selectionStart + offset;
+        while (a > 0 && a < this.currentFormat.length) {
+            if (this.currentFormat[a] !== previousFormatSymbol &&
+                this.currentFormat[a] !== Constants.formatSeparator) {
+                break;
+            }
+            a += offset;
+        }
+        if (this.currentFormat[a] === Constants.formatSeparator) {
+            // no known symbol is found
+            return;
+        }
+        let b = a;
+        while (b >= 0 && b < this.currentFormat.length) {
+            if (this.currentFormat[b] !== this.currentFormat[a]) {
+                break;
+            }
+            b += offset;
+        }
+        if (a > b && (b + 1 !== selectionStart || a + 1 !== selectionEnd)) {
+            this.setSelection({ start: b + 1, end: a + 1 });
+            this.resetSegmentValue = true;
+        }
+        else if (a < b && (a !== selectionStart || b !== selectionEnd)) {
+            this.setSelection({ start: a, end: b });
+            this.resetSegmentValue = true;
+        }
+    }
+    modifyDateSegmentValue(offset, symbol = "", event = {}) {
+        if (!this.dateObject) {
+            return;
+        }
+        const oldValue = this.value;
+        let step = DEFAULT_SEGMENT_STEP * offset;
+        const caret = this.caret();
+        symbol = symbol || this.currentFormat[caret[0]];
+        if (symbol === "S" && !this.options.steps.millisecond) {
+            const msDigits = millisecondDigitsInFormat(this.inputFormat);
+            step = millisecondStepFor(msDigits);
+        }
+        this.dateObject.modifyPart(symbol, step);
+        this.tryTriggerValueChange({
+            oldValue: oldValue,
+            event: event
+        });
+        this.forceUpdate();
+        this.setSelection(this.selectionBySymbol(symbol));
+    }
+    /**
+     * @hidden
+     */
+    tryTriggerValueChange(args = { oldValue: null, event: {} }) {
+        if (!isEqual(this.value, args.oldValue)) {
+            return this.triggerValueChange(args);
+        }
+    }
+    /**
+     * @hidden
+     */
+    triggerValueChange(args = { oldValue: null, event: {} }) {
+        return this.trigger(VALUE_CHANGE, extend(args, {
+            value: this.value
+        }));
+    }
+    /**
+     * @hidden
+     */
+    triggerInput(args = { event: {} }) {
+        return this.trigger(INPUT, extend(args, {
+            value: this.value
+        }));
+    }
+    /**
+     * @hidden
+     */
+    triggerInputEnd(args = { event: {} }) {
+        return this.trigger(INPUT_END, extend(args, {
+            value: this.value
+        }));
+    }
+    /**
+     * @hidden
+     */
+    triggerFocus(args = { event: {} }) {
+        return this.trigger(FOCUS, extend({}, args));
+    }
+    /**
+     * @hidden
+     */
+    triggerFocusEnd(args = { event: {} }) {
+        return this.trigger(FOCUS_END, extend({}, args));
+    }
+    /**
+     * @hidden
+     */
+    triggerBlur(args = { event: {} }) {
+        return this.trigger(BLUR, extend({}, args));
+    }
+    /**
+     * @hidden
+     */
+    triggerBlurEnd(args = { event: {} }) {
+        return this.trigger(BLUR_END, extend({}, args));
+    }
+    /**
+     * @hidden
+     */
+    triggerChange(args = { event: {} }) {
+        return this.trigger(CHANGE, extend(args, {
+            value: this.value
+        }));
+    }
+    /**
+     * @hidden
+     */
+    triggerKeyDown(args = { event: {} }) {
+        return this.trigger(KEY_DOWN, extend({}, args));
+    }
+    /**
+     * @hidden
+     */
+    triggerMouseWheel(args = { event: {} }) {
+        return this.trigger(MOUSE_WHEEL, extend({}, args));
+    }
+    /**
+     * @hidden
+     */
+    forceUpdate() {
+        this.setTextAndFormat();
+        this.refreshElementValue();
+    }
+    /**
+     * @hidden
+     */
+    setTextAndFormat() {
+        const { text: currentText, format: currentFormat } = this.dateObject.getTextAndFormat();
+        this.currentFormat = currentFormat;
+        this.currentText = currentText;
+    }
+    /**
+     * @hidden
+     */
+    setElementValue(value) {
+        this.previousElementValue = this.element.value;
+        this.element.value = value;
+    }
+    /**
+     * @hidden
+     */
+    getStepFromSymbol(symbol) {
+        /* eslint-disable no-fallthrough */
+        switch (symbol) {
+            case "S":
+                return Number(this.options.steps.millisecond);
+            case "s":
+                return Number(this.options.steps.second);
+            case "m":
+                return Number(this.options.steps.minute);
+            // represents hour as value from 01 through 12
+            case "h":
+            // represents hour as value from 01 through 23
+            case "H":
+                return Number(this.options.steps.hour);
+            case "M":
+                return Number(this.options.steps.month);
+            // there is no 'D' format specifier for day
+            case "d":
+            // used for formats such as "EEEE, MMMM d, yyyy",
+            // where "EEEE" stands for full name of the day e.g. Monday
+            case "E":
+                return Number(this.options.steps.day);
+            // there is no 'Y' format specifier for year
+            case "y":
+                return Number(this.options.steps.year);
+            default:
+                return DEFAULT_SEGMENT_STEP;
+        }
+        /* 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;
+        }
+        this.setElementValue(this.previousElementValue || '');
+        this.setSelection({ start: selectionStart + selectionOffset, end: selectionEnd + selectionOffset });
+    }
+    writeValue(value) {
+        this.verifyValue(value);
+        this.dateObject = this.getDateObject(value);
+        this.refreshElementValue();
+    }
+    verifyValue(value) {
+        if (value && !isDate(value)) {
+            throw new Error("The 'value' should be a valid JavaScript Date instance.");
+        }
+    }
+    refreshElementValue() {
+        const start = this.caret()[0];
+        const element = this.element;
+        const format = this.isActive ? this.inputFormat : this.displayFormat;
+        const { text: currentText, format: currentFormat } = this.dateObject.getTextAndFormat(format);
+        this.currentFormat = currentFormat;
+        this.currentText = currentText;
+        const showPlaceholder = !this.isActive &&
+            isPresent(this.options.placeholder) &&
+            !this.dateObject.hasValue();
+        if (isPresent(this.options.placeholder)) {
+            element.placeholder = this.options.placeholder;
+        }
+        const newElementValue = !showPlaceholder ? currentText : "";
+        this.setElementValue(newElementValue);
+        if (this.isActive && !this.options.allowCaretMode && this.options.selectNearestSegmentOnFocus) {
+            this.selectNearestSegment(start);
+        }
+    }
+    /**
+     * @hidden
+     */
+    caret(start, end = start) {
+        const isPosition = start !== undefined;
+        let returnValue = [start, start];
+        const element = this.element;
+        if (isPosition && (this.options.disabled || this.options.readonly)) {
+            return undefined;
+        }
+        try {
+            if (element.selectionStart !== undefined) {
+                if (isPosition) {
+                    if (isDocumentAvailable() && document.activeElement !== element) {
+                        element.focus();
+                    }
+                    element.setSelectionRange(start, end);
+                }
+                returnValue = [element.selectionStart, element.selectionEnd];
+            }
+        }
+        catch (e) {
+            returnValue = [];
+        }
+        return returnValue;
+    }
+    selectNearestSegment(index) {
+        // Finds the nearest (in both directions) known part.
+        for (let i = index, j = index - 1; i < this.currentFormat.length || j >= 0; i++, j--) {
+            if (i < this.currentFormat.length && this.currentFormat[i] !== "_") {
+                this.selectDateSegment(this.currentFormat[i]);
+                return;
+            }
+            if (j >= 0 && this.currentFormat[j] !== "_") {
+                this.selectDateSegment(this.currentFormat[j]);
+                return;
+            }
+        }
+    }
+    selectDateSegment(symbol) {
+        let begin = -1;
+        let end = 0;
+        for (let i = 0; i < this.currentFormat.length; i++) {
+            if (this.currentFormat[i] === symbol) {
+                end = i + 1;
+                if (begin === -1) {
+                    begin = i;
+                }
+            }
+        }
+        if (begin < 0) {
+            begin = 0;
+        }
+        this.caret(0, 0);
+        this.caret(begin, end);
+    }
+    /**
+     * @hidden
+     */
+    getDateObject(value) {
+        const { leadingZero } = (this.dateObject || {}) || null;
+        const dateObject = this.createDateObject({
+            value: value
+        });
+        dateObject.setLeadingZero(this.isActive ? leadingZero : null);
+        return dateObject;
+    }
+    /* tslint:disable:align */
+    /**
+     * @hidden
+     */
+    createDateObject(options = {}) {
+        const dateObject = new DateObject(extend({
+            intlService: this.intl,
+            formatPlaceholder: this.formatPlaceholder,
+            format: this.inputFormat,
+            localeId: this.localeId,
+            cycleTime: this.options.cycleTime,
+            twoDigitYearMax: this.options.twoDigitYearMax,
+            autoCorrectParts: this.options.autoCorrectParts
+        }, options));
+        return dateObject;
+    }
+}