beesoft-components 0.2.25 → 0.2.26-1

package/build/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle, createContext, useContext, useReducer } from 'react';
+import React, { useState, useRef, useEffect, useMemo, memo, forwardRef, useCallback, useImperativeHandle, createContext, useContext, useReducer } from 'react';
 import ReactDOM from 'react-dom';
 
 /******************************************************************************
@@ -30364,44 +30364,73 @@ function OverlayPanel(_a) {
         } })));
 }
 
-function ContentEditableInput(props, ref) {
-    var value = props.value, _a = props.readOnly, readOnly = _a === void 0 ? false : _a, _b = props.debounceTime, debounceTime = _b === void 0 ? 500 : _b, _c = props.fillContainer, fillContainer = _c === void 0 ? true : _c, leftElement = props.leftElement, rightElement = props.rightElement, className = props.className, leftElementClassName = props.leftElementClassName, rightElementClassName = props.rightElementClassName, _d = props.isSingleLine, isSingleLine = _d === void 0 ? false : _d, _e = props.allowSingleLineScroll, allowSingleLineScroll = _e === void 0 ? false : _e, onFocus = props.onFocus, onBlur = props.onBlur, onInput = props.onInput, onElementCreate = props.onElementCreate, onLeftElementClick = props.onLeftElementClick, onRightElementClick = props.onRightElementClick;
-    var inputRef = useRef(null);
-    var onLeftElementClicked = function (event) {
-        if (onLeftElementClick) {
-            onLeftElementClick(event);
+var ContentEditableInput = function (props, ref) {
+    var value = props.value, _a = props.readOnly, readOnly = _a === void 0 ? false : _a, _b = props.debounceTime, debounceTime = _b === void 0 ? 800 : _b, _c = props.fillContainer, fillContainer = _c === void 0 ? true : _c, leftElement = props.leftElement, rightElement = props.rightElement, className = props.className, leftElementClassName = props.leftElementClassName, rightElementClassName = props.rightElementClassName, _d = props.isSingleLine, isSingleLine = _d === void 0 ? true : _d, _e = props.allowSingleLineScroll, allowSingleLineScroll = _e === void 0 ? false : _e, placeholder = props.placeholder, onFocus = props.onFocus, onBlur = props.onBlur, onInput = props.onInput, onInnerTextChange = props.onInnerTextChange, onInnerHTMLChange = props.onInnerHTMLChange, onElementCreate = props.onElementCreate, onLeftElementClick = props.onLeftElementClick, onRightElementClick = props.onRightElementClick;
+    var textStyles = useRef('bsc-flex-grow focus:bsc-outline-none');
+    var placeHolderStyles = useRef('bsc-text-gray-400');
+    var inputRef = useRef();
+    var focusListener = useCallback(function (event) {
+        var element = event.target;
+        var value = element.innerHTML;
+        element.className = "".concat(textStyles.current);
+        if (placeholder && value === placeholder) {
+            element.innerHTML = '';
         }
-    };
-    var onRightElementClicked = function (event) {
-        if (onRightElementClick) {
-            onRightElementClick(event);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }, [placeholder, onFocus]);
+    var blurListener = useCallback(function (event) {
+        var value = event.target.innerHTML;
+        if (placeholder && value === '') {
+            var element = event.target;
+            element.innerHTML = placeholder;
+            element.className = "".concat(textStyles.current, " ").concat(placeHolderStyles.current);
         }
-    };
-    var onFocused = function (event) {
-        if (onFocus) {
-            onFocus(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [placeholder, onBlur]);
+    var onInputElementCreated = useCallback(function (element) {
+        var _a, _b;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('focus', focusListener);
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('blur', blurListener);
+        if (placeholder && element && element !== document.activeElement && element.innerHTML === '') {
+            element.innerHTML = placeholder;
+            element.className = "".concat(textStyles.current, " ").concat(placeHolderStyles.current);
         }
+        element.addEventListener('focus', focusListener);
+        element.addEventListener('blur', blurListener);
+        inputRef.current = element;
+    }, [placeholder]);
+    var onElementCreated = useCallback(function (element) {
+        onElementCreate === null || onElementCreate === void 0 ? void 0 : onElementCreate(element);
+    }, [onElementCreate]);
+    var onLeftElementClicked = function (event) {
+        onLeftElementClick === null || onLeftElementClick === void 0 ? void 0 : onLeftElementClick(event);
     };
-    var onInputChanged = debounce_1(function (event) {
-        if (onInput) {
-            onInput(event);
-        }
+    var onRightElementClicked = function (event) {
+        onRightElementClick === null || onRightElementClick === void 0 ? void 0 : onRightElementClick(event);
+    };
+    var onInputChanged = lodashExports.debounce(function (event) {
+        onInput === null || onInput === void 0 ? void 0 : onInput(event);
+        onInnerTextChange === null || onInnerTextChange === void 0 ? void 0 : onInnerTextChange(event.target.innerText);
+        onInnerHTMLChange === null || onInnerHTMLChange === void 0 ? void 0 : onInnerHTMLChange(event.target.innerHTML);
     }, debounceTime);
-    var onElementCreated = function (element) {
-        if (element) {
-            if (onElementCreate) {
-                onElementCreate(element);
-            }
-            if (element.offsetWidth < element.scrollWidth && value) {
-                element.setAttribute('title', value);
-            }
+    var setInnerText = useCallback(function (innerText) {
+        if (inputRef.current) {
+            inputRef.current.innerText = innerText;
         }
-    };
-    var focus = function () {
+    }, []);
+    var setInnerHTML = useCallback(function (innerHTML) {
+        if (inputRef.current) {
+            inputRef.current.innerHTML = innerHTML;
+        }
+    }, []);
+    var focus = useCallback(function () {
         var _a;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
+    }, []);
     useImperativeHandle(ref, function () { return ({
+        inputElement: inputRef.current,
+        setInnerText: setInnerText,
+        setInnerHTML: setInnerHTML,
         focus: focus,
     }); });
     var classNames = cx({ 'bsc-w-full ': fillContainer }, 'bsc-flex bsc-flex-row bsc-shadow-sm bsc-border bsc-border-solid bsc-border-gray-300 dark:bsc-border-white dark:bsc-bg-gray-900 dark:bsc-text-white bsc-rounded-md bsc-p-2', {
@@ -30410,9 +30439,1297 @@ function ContentEditableInput(props, ref) {
     }, className);
     var leftElementClasses = cx('bsc-flex-shrink', { 'bsc-mr-2': leftElement }, leftElementClassName);
     var rightElementClasses = cx('bsc-flex-shrink', { 'bsc-ml-2': rightElement }, rightElementClassName);
-    return (jsxs("div", __assign({ className: classNames, ref: function (element) { return onElementCreated(element); } }, { children: [leftElement && (jsx("div", __assign({ className: leftElementClasses, onClick: onLeftElementClicked }, { children: leftElement }))), jsx("div", __assign({ ref: inputRef, className: "bsc-flex-grow focus:bsc-outline-none", contentEditable: !readOnly, suppressContentEditableWarning: true, onFocus: onFocused, onBlur: onBlur, onInput: onInputChanged }, { children: value })), rightElement && (jsx("div", __assign({ className: rightElementClasses, onClick: onRightElementClicked }, { children: rightElement })))] })));
-}
-var ContentEditableInput$1 = forwardRef(ContentEditableInput);
+    return (jsxs("div", __assign({ className: classNames, ref: function (element) { return element && onElementCreated(element); } }, { children: [leftElement && (jsx("div", __assign({ className: leftElementClasses, onClick: onLeftElementClicked }, { children: leftElement }))), jsx("div", __assign({ ref: function (element) { return element && onInputElementCreated(element); }, className: textStyles.current, contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: onInputChanged }, { children: value })), rightElement && (jsx("div", __assign({ className: rightElementClasses, onClick: onRightElementClicked }, { children: rightElement })))] })));
+};
+var ContentEditableInput$1 = memo(forwardRef(ContentEditableInput));
+
+var FormattedInputDefaultFormats;
+(function (FormattedInputDefaultFormats) {
+    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateDayMonthYear"] = 0] = "DateDayMonthYear";
+    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateMonthDayYear"] = 1] = "DateMonthDayYear";
+    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateYearMonthDay"] = 2] = "DateYearMonthDay";
+    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateRangeDayMonthYear"] = 3] = "DateRangeDayMonthYear";
+    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateRangeMonthDayYear"] = 4] = "DateRangeMonthDayYear";
+    FormattedInputDefaultFormats[FormattedInputDefaultFormats["DateRangeYearMonthDay"] = 5] = "DateRangeYearMonthDay";
+    FormattedInputDefaultFormats[FormattedInputDefaultFormats["Time12Hour"] = 6] = "Time12Hour";
+    FormattedInputDefaultFormats[FormattedInputDefaultFormats["Time24Hour"] = 7] = "Time24Hour";
+    FormattedInputDefaultFormats[FormattedInputDefaultFormats["Custom"] = 8] = "Custom";
+})(FormattedInputDefaultFormats || (FormattedInputDefaultFormats = {}));
+
+var InputSlotCreator = (function () {
+    function InputSlotCreator() {
+    }
+    InputSlotCreator.create = function (formatPartEntries) {
+        var slots = [];
+        for (var i = 0, len = formatPartEntries.length; i < len; i++) {
+            var entry = formatPartEntries[i];
+            if (entry.isSeparator) {
+                continue;
+            }
+            slots.push(__assign({ partIndex: i, partText: '', isComplete: false }, entry));
+        }
+        return slots;
+    };
+    return InputSlotCreator;
+}());
+
+var PartEntryCreator = (function () {
+    function PartEntryCreator() {
+    }
+    PartEntryCreator.create = function (format) {
+        var formatPartList = [];
+        var currentIndex = 0;
+        for (var i = 0, len = format.formatParts.length; i < len; i++) {
+            var formatPart = format.formatParts[i];
+            var startPosition = currentIndex;
+            var endPosition = startPosition + formatPart.characterCount;
+            formatPartList.push(__assign({ startPosition: startPosition, endPosition: endPosition }, formatPart));
+            currentIndex = endPosition;
+        }
+        return formatPartList;
+    };
+    return PartEntryCreator;
+}());
+
+var InputSlotCollection = (function () {
+    function InputSlotCollection(format) {
+        this.inputSlots = InputSlotCreator.create(PartEntryCreator.create(format));
+    }
+    InputSlotCollection.getInstance = function (format) {
+        if (!this.instance) {
+            this.instance = new InputSlotCollection(format);
+        }
+        return this.instance;
+    };
+    InputSlotCollection.prototype.clearAllSlots = function () {
+        for (var i = 0, length_1 = this.inputSlots.length; i < length_1; i++) {
+            this.inputSlots[i].partText = '';
+        }
+    };
+    InputSlotCollection.prototype.getSlot = function (partIndex) {
+        return this.inputSlots.find(function (slot) { return slot.partIndex === partIndex; });
+    };
+    InputSlotCollection.prototype.getFirstSlot = function () {
+        return this.inputSlots[0];
+    };
+    InputSlotCollection.prototype.getNextSlot = function (currentPartIndex) {
+        var currentIndex = this.inputSlots.findIndex(function (slot) { return slot.partIndex === currentPartIndex; });
+        if (currentIndex > -1 && currentIndex + 1 < this.inputSlots.length) {
+            return this.inputSlots[currentIndex + 1];
+        }
+    };
+    InputSlotCollection.prototype.getPreviousSlot = function (currentPartIndex) {
+        var currentIndex = this.inputSlots.findIndex(function (slot) { return slot.partIndex === currentPartIndex; });
+        if (currentIndex > -1 && currentIndex - 1 >= 0) {
+            return this.inputSlots[currentIndex - 1];
+        }
+    };
+    InputSlotCollection.prototype.getLastSlotWithData = function () {
+        var incompleteSlotIndex = this.inputSlots.findIndex(function (slot) { return !slot.isComplete; });
+        var finalSlotIndex = incompleteSlotIndex;
+        for (var i = incompleteSlotIndex + 1, length_2 = this.inputSlots.length; i < length_2; i++) {
+            var slot = this.inputSlots[i];
+            if (slot.partText.length > 0) {
+                finalSlotIndex = i;
+            }
+        }
+        return this.inputSlots[finalSlotIndex];
+    };
+    InputSlotCollection.prototype.allSlotsCompleted = function () {
+        return this.inputSlots.every(function (slot) { return slot.isComplete; });
+    };
+    return InputSlotCollection;
+}());
+
+var FormatNavigator = (function () {
+    function FormatNavigator(format) {
+        this.currentPartIndex = 0;
+        this.currentCursorPosition = 0;
+        this.inputSelection = null;
+        this.formatPartList = PartEntryCreator.create(format);
+        this.inputSlotCollection = InputSlotCollection.getInstance(format);
+    }
+    FormatNavigator.getInstance = function (format) {
+        if (!this._instance) {
+            this._instance = new FormatNavigator(format);
+        }
+        return this._instance;
+    };
+    FormatNavigator.prototype.getCursorPosition = function () {
+        return this.currentCursorPosition;
+    };
+    FormatNavigator.prototype.getCurrentPartIndex = function () {
+        return this.currentPartIndex;
+    };
+    FormatNavigator.prototype.setInputElement = function (element) {
+        this.inputElement = element;
+    };
+    FormatNavigator.prototype.setCursorToCurrentPosition = function () {
+        this.setCursorSelection(this.currentCursorPosition);
+    };
+    FormatNavigator.prototype.setCursorPosition = function (position) {
+        this.setCursorSelection(position);
+    };
+    FormatNavigator.prototype.setCursorSelection = function (start, end) {
+        this.createInputRangeSelection();
+        if (this.inputRange && this.textNode) {
+            this.inputRange.setStart(this.textNode, start);
+            this.inputRange.setEnd(this.textNode, end || start);
+            this.currentCursorPosition = end || start;
+            this.setPartIndexByCursorPosition();
+        }
+    };
+    FormatNavigator.prototype.isAtLastPart = function () {
+        return this.currentPartIndex === this.formatPartList.length - 1;
+    };
+    FormatNavigator.prototype.moveHome = function () {
+        var firstSlot = this.inputSlotCollection.getFirstSlot();
+        this.setCursorSelection(firstSlot.startPosition);
+    };
+    FormatNavigator.prototype.moveEnd = function () {
+        var lastDataSlot = this.inputSlotCollection.getLastSlotWithData();
+        var lastCursorPosition = lastDataSlot.startPosition + lastDataSlot.partText.length;
+        this.setCursorSelection(lastCursorPosition);
+    };
+    FormatNavigator.prototype.moveCursorLeft = function () {
+        if (this.currentCursorPosition > 0) {
+            var newCursorPosition = this.currentCursorPosition - 1;
+            var currentPartEntry = this.formatPartList[this.currentPartIndex];
+            if (newCursorPosition >= currentPartEntry.startPosition && newCursorPosition <= currentPartEntry.endPosition) {
+                this.setCursorSelection(newCursorPosition);
+            }
+            else {
+                for (var i = this.currentPartIndex - 1; i >= 0; i--) {
+                    currentPartEntry = this.formatPartList[i];
+                    if (newCursorPosition >= currentPartEntry.startPosition &&
+                        newCursorPosition <= currentPartEntry.endPosition) {
+                        if (currentPartEntry.isSeparator) {
+                            this.setCursorSelection(this.formatPartList[i - 1].endPosition);
+                        }
+                        else {
+                            this.setCursorSelection(newCursorPosition);
+                        }
+                    }
+                }
+            }
+        }
+    };
+    FormatNavigator.prototype.moveCursorRight = function () {
+        var lastDataSlot = this.inputSlotCollection.getLastSlotWithData();
+        var lastCursorPosition = lastDataSlot.startPosition + lastDataSlot.partText.length;
+        if (this.currentCursorPosition < lastCursorPosition) {
+            var newCursorPosition = this.currentCursorPosition + 1;
+            var currentPartEntry = this.formatPartList[this.currentPartIndex];
+            if (newCursorPosition >= currentPartEntry.startPosition && newCursorPosition <= currentPartEntry.endPosition) {
+                this.setCursorSelection(newCursorPosition);
+            }
+            else {
+                for (var i = this.currentPartIndex + 1, length_1 = this.formatPartList.length; i < length_1; i++) {
+                    currentPartEntry = this.formatPartList[i];
+                    if (newCursorPosition >= currentPartEntry.startPosition &&
+                        newCursorPosition <= currentPartEntry.endPosition) {
+                        if (currentPartEntry.isSeparator) {
+                            this.setCursorSelection(this.formatPartList[i + 1].startPosition);
+                        }
+                        else {
+                            this.setCursorSelection(newCursorPosition);
+                        }
+                    }
+                }
+            }
+        }
+    };
+    FormatNavigator.prototype.moveToNextInputPart = function () {
+        if (this.currentPartIndex < this.formatPartList.length - 1) {
+            var partEntry = this.findNextEditablePart();
+            if (partEntry) {
+                this.currentPartIndex = partEntry.partIndex;
+                this.setCursorSelection(partEntry.startPosition);
+            }
+        }
+    };
+    FormatNavigator.prototype.moveToPreviousInputPart = function () {
+        if (this.currentPartIndex > 0) {
+            var partEntry = this.findPreviousEditablePart();
+            if (partEntry) {
+                this.currentPartIndex = partEntry.partIndex;
+                this.setCursorSelection(partEntry.endPosition);
+            }
+        }
+    };
+    FormatNavigator.prototype.findNextEditablePart = function () {
+        return this.inputSlotCollection.getNextSlot(this.currentPartIndex);
+    };
+    FormatNavigator.prototype.findPreviousEditablePart = function () {
+        return this.inputSlotCollection.getPreviousSlot(this.currentPartIndex);
+    };
+    FormatNavigator.prototype.setPartIndexByCursorPosition = function () {
+        for (var i = 0; i < this.formatPartList.length; i++) {
+            var formatPart = this.formatPartList[i];
+            if (this.currentCursorPosition >= formatPart.startPosition &&
+                this.currentCursorPosition <= formatPart.endPosition) {
+                if (formatPart.isSeparator) {
+                    this.currentCursorPosition = this.formatPartList[i + 1].startPosition;
+                    this.currentPartIndex = i + 1;
+                    break;
+                }
+                this.currentPartIndex = i;
+                break;
+            }
+        }
+    };
+    FormatNavigator.prototype.createInputRangeSelection = function () {
+        var _a, _b, _c;
+        if (this.inputElement) {
+            this.inputSelection = window.getSelection();
+            this.inputRange = document.createRange();
+            (_a = this.inputSelection) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+            this.inputRange.selectNodeContents(this.inputElement);
+            this.inputRange.collapse(true);
+            (_b = this.inputSelection) === null || _b === void 0 ? void 0 : _b.removeAllRanges();
+            (_c = this.inputSelection) === null || _c === void 0 ? void 0 : _c.addRange(this.inputRange);
+            if (this.inputElement.firstChild) {
+                this.textNode = this.inputElement.firstChild;
+            }
+        }
+    };
+    return FormatNavigator;
+}());
+
+var FormatRenderer = (function () {
+    function FormatRenderer(format) {
+        this.formatPartList = PartEntryCreator.create(format);
+        this.inputSlotCollection = InputSlotCollection.getInstance(format);
+    }
+    FormatRenderer.prototype.setInputElement = function (element) {
+        this.inputElement = element;
+    };
+    FormatRenderer.prototype.render = function () {
+        var _a;
+        var output = '';
+        for (var i = 0, length_1 = this.formatPartList.length; i < length_1; i++) {
+            var partEntry = this.formatPartList[i];
+            if (!partEntry.isSeparator) {
+                var inputSlot = this.inputSlotCollection.getSlot(i);
+                if (inputSlot) {
+                    output +=
+                        inputSlot.partText + ((_a = inputSlot.inputText) === null || _a === void 0 ? void 0 : _a.repeat(inputSlot.characterCount - inputSlot.partText.length));
+                }
+            }
+            else {
+                output += partEntry.inputText;
+            }
+        }
+        if (this.inputElement) {
+            this.inputElement.innerHTML = output;
+        }
+    };
+    return FormatRenderer;
+}());
+
+var FormatValueType;
+(function (FormatValueType) {
+    FormatValueType[FormatValueType["Text"] = 0] = "Text";
+    FormatValueType[FormatValueType["Numeric"] = 1] = "Numeric";
+})(FormatValueType || (FormatValueType = {}));
+
+var KeyTypeChecker = (function () {
+    function KeyTypeChecker() {
+        this.numberKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        this.movementKeys = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
+        this.editingKeys = ['Backspace', 'Delete'];
+        this.ignoreKeys = ['Shift', 'Alt', 'Control', 'Fn', 'Meta'];
+    }
+    KeyTypeChecker.prototype.isNumberKey = function (key) {
+        return this.numberKeys.includes(key);
+    };
+    KeyTypeChecker.prototype.isMovementKey = function (event) {
+        return this.movementKeys.includes(event.key);
+    };
+    KeyTypeChecker.prototype.isEditingKey = function (event) {
+        return this.editingKeys.includes(event.key);
+    };
+    KeyTypeChecker.prototype.isIgnoreKey = function (event) {
+        return this.ignoreKeys.includes(event.key);
+    };
+    return KeyTypeChecker;
+}());
+
+var PartEntryIterator = (function () {
+    function PartEntryIterator(format) {
+        this._currentIndex = 0;
+        this.index = 0;
+        this.formatParts = PartEntryCreator.create(format);
+    }
+    Object.defineProperty(PartEntryIterator.prototype, "currentIndex", {
+        get: function () {
+            return this._currentIndex;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PartEntryIterator.prototype.hasNext = function () {
+        return this.index < this.formatParts.length;
+    };
+    PartEntryIterator.prototype.next = function () {
+        if (this.index < this.formatParts.length) {
+            this._currentIndex = this.index++;
+            return this.formatParts[this._currentIndex];
+        }
+    };
+    PartEntryIterator.prototype.peek = function () {
+        if (this.index < this.formatParts.length) {
+            return this.formatParts[this.index];
+        }
+    };
+    PartEntryIterator.prototype.reset = function () {
+        this.index = 0;
+    };
+    return PartEntryIterator;
+}());
+
+var InputRuleProcessor = (function () {
+    function InputRuleProcessor(format) {
+        this.format = format;
+        this.inputSlotCollection = InputSlotCollection.getInstance(format);
+        this.formatNavigator = FormatNavigator.getInstance(format);
+        this.keyTypeChecker = new KeyTypeChecker();
+        this.formatRenderer = new FormatRenderer(format);
+        this.formatPartList = new PartEntryIterator(format);
+    }
+    InputRuleProcessor.prototype.setInputElement = function (element) {
+        this.formatRenderer.setInputElement(element);
+    };
+    InputRuleProcessor.prototype.processKeyPress = function (event) {
+        if (this.keyTypeChecker.isEditingKey(event)) {
+            this.processEditRules(event);
+            return;
+        }
+        this.processInputRules(event);
+    };
+    InputRuleProcessor.prototype.processInputValue = function (value) {
+        var _a;
+        this.inputSlotCollection.clearAllSlots();
+        this.formatPartList.reset();
+        var valueIndex = 0;
+        while (this.formatPartList.hasNext()) {
+            var partEntry = this.formatPartList.next();
+            if (partEntry && !partEntry.isSeparator) {
+                if (((_a = this.formatPartList.peek()) === null || _a === void 0 ? void 0 : _a.isSeparator) === true) {
+                    var formatPartIndex = this.formatPartList.currentIndex;
+                    var separator = this.formatPartList.next();
+                    if (separator && separator.inputText) {
+                        var separatorIndex = value.indexOf(separator.inputText, valueIndex);
+                        var slot = this.inputSlotCollection.getSlot(formatPartIndex);
+                        if (slot && separatorIndex > -1) {
+                            slot.partText = value.substring(valueIndex, separatorIndex);
+                            this.processSlotRules(slot);
+                            valueIndex = separatorIndex + separator.characterCount;
+                        }
+                    }
+                }
+                else {
+                    var slot = this.inputSlotCollection.getSlot(this.formatPartList.currentIndex);
+                    if (slot) {
+                        slot.partText = value.substring(valueIndex);
+                        this.processSlotRules(slot);
+                    }
+                }
+            }
+        }
+    };
+    InputRuleProcessor.prototype.processEditRules = function (event) {
+        var inputSlot = this.inputSlotCollection.getSlot(this.formatNavigator.getCurrentPartIndex());
+        if (!inputSlot) {
+            return;
+        }
+        var cursorPosition = this.formatNavigator.getCursorPosition();
+        var cursorPositionInSlot = cursorPosition - inputSlot.startPosition;
+        var deleteShiftsFormatPart = this.format.deleteShiftsFormatPart || false;
+        switch (event.key) {
+            case 'Backspace':
+                var isAtBeginningOfInputSlot = inputSlot.startPosition === cursorPosition;
+                if (!isAtBeginningOfInputSlot) {
+                    inputSlot.partText =
+                        inputSlot.partText.substring(0, cursorPositionInSlot - 1) +
+                            inputSlot.partText.substring(cursorPositionInSlot);
+                    if (deleteShiftsFormatPart) {
+                        this.shiftFormatParts(inputSlot);
+                    }
+                    this.formatRenderer.render();
+                    this.formatNavigator.moveCursorLeft();
+                    this.processSlotRules(inputSlot, true);
+                }
+                else {
+                    this.processSlotRules(inputSlot, true);
+                    var previousSlot = this.inputSlotCollection.getPreviousSlot(inputSlot.partIndex);
+                    if (previousSlot) {
+                        previousSlot.partText = previousSlot.partText.substring(0, previousSlot.partText.length - 1);
+                        if (deleteShiftsFormatPart) {
+                            this.shiftFormatParts(previousSlot);
+                        }
+                        this.formatRenderer.render();
+                        this.formatNavigator.setCursorPosition(previousSlot.startPosition + previousSlot.partText.length);
+                        this.processSlotRules(previousSlot, true);
+                    }
+                }
+                break;
+            case 'Delete':
+                inputSlot.partText =
+                    inputSlot.partText.substring(0, cursorPositionInSlot) +
+                        inputSlot.partText.substring(cursorPositionInSlot + 1);
+                if (deleteShiftsFormatPart) {
+                    this.shiftFormatParts(inputSlot);
+                }
+                this.formatRenderer.render();
+                this.formatNavigator.setCursorToCurrentPosition();
+                this.processSlotRules(inputSlot, true);
+                break;
+        }
+    };
+    InputRuleProcessor.prototype.shiftFormatParts = function (inputSlot) {
+        var previousSlot = inputSlot;
+        var nextSlot;
+        while ((nextSlot = this.inputSlotCollection.getNextSlot(previousSlot.partIndex)) !== undefined) {
+            var removedCharacter = nextSlot.partText.substring(0, 1);
+            nextSlot.partText = nextSlot.partText.substring(1);
+            previousSlot.partText = previousSlot.partText + removedCharacter;
+            previousSlot = nextSlot;
+        }
+    };
+    InputRuleProcessor.prototype.processInputRules = function (event) {
+        var inputSlot = this.inputSlotCollection.getSlot(this.formatNavigator.getCurrentPartIndex());
+        if (!inputSlot) {
+            return;
+        }
+        var key = event.key;
+        var characterCount = inputSlot.characterCount;
+        var currentValue = inputSlot.partText;
+        if (inputSlot.valueType === FormatValueType.Numeric) {
+            if (!this.keyTypeChecker.isNumberKey(key)) {
+                return;
+            }
+            var maximumValue = inputSlot.maximumValue;
+            var exceedingMaximumValueCausesTab = inputSlot.exceedingMaximumValueCausesTab || false;
+            var padWithZeros = inputSlot.padWithZeros || false;
+            var newValue = parseInt(this.createNewValue(inputSlot, key));
+            if (maximumValue && newValue > maximumValue) {
+                if (exceedingMaximumValueCausesTab) {
+                    if (padWithZeros) {
+                        inputSlot.partText = inputSlot.partText.padStart(characterCount, '0');
+                    }
+                    inputSlot.isComplete = true;
+                    var nextSlot = this.inputSlotCollection.getNextSlot(inputSlot.partIndex);
+                    if (nextSlot && !nextSlot.isComplete) {
+                        nextSlot.partText = key;
+                    }
+                    this.formatRenderer.render();
+                    if (nextSlot) {
+                        this.formatNavigator.setCursorPosition(!nextSlot.isComplete ? nextSlot.startPosition + 1 : nextSlot.startPosition);
+                    }
+                }
+                else {
+                    return;
+                }
+            }
+            else if (currentValue.length + 1 === characterCount) {
+                this.addToInputSlot(key);
+                inputSlot.isComplete = true;
+                this.formatRenderer.render();
+                if (!this.formatNavigator.isAtLastPart()) {
+                    this.formatNavigator.moveToNextInputPart();
+                }
+                else {
+                    this.formatNavigator.moveCursorRight();
+                }
+            }
+            else {
+                this.addToInputSlot(key);
+                this.formatRenderer.render();
+                this.formatNavigator.moveCursorRight();
+            }
+        }
+        else {
+            if (currentValue.length + 1 === characterCount) {
+                this.addToInputSlot(key);
+                inputSlot.isComplete = true;
+                this.formatRenderer.render();
+                this.formatNavigator.moveToNextInputPart();
+            }
+            else {
+                this.addToInputSlot(key);
+                this.formatRenderer.render();
+                this.formatNavigator.moveCursorRight();
+            }
+        }
+    };
+    InputRuleProcessor.prototype.addToInputSlot = function (key) {
+        var inputSlot = this.inputSlotCollection.getSlot(this.formatNavigator.getCurrentPartIndex());
+        if (inputSlot) {
+            inputSlot.partText = this.createNewValue(inputSlot, key);
+        }
+    };
+    InputRuleProcessor.prototype.createNewValue = function (inputSlot, key) {
+        var currentValue = inputSlot.partText;
+        var cursorPosition = this.formatNavigator.getCursorPosition();
+        if (cursorPosition >= inputSlot.startPosition + inputSlot.partText.length) {
+            return currentValue + key;
+        }
+        else {
+            var slotCursorPosition = cursorPosition - inputSlot.startPosition;
+            return currentValue.substring(0, slotCursorPosition) + key + currentValue.substring(slotCursorPosition);
+        }
+    };
+    InputRuleProcessor.prototype.processSlotRules = function (inputSlot, isEditing) {
+        if (isEditing === void 0) { isEditing = false; }
+        var characterCount = inputSlot.characterCount;
+        var allCharactersRequired = inputSlot.allCharactersRequired || false;
+        if (inputSlot.valueType === FormatValueType.Numeric) {
+            var minimumValue = inputSlot.minimumValue;
+            var maximumValue = inputSlot.maximumValue;
+            if (allCharactersRequired) {
+                inputSlot.isComplete = inputSlot.partText.length === characterCount;
+            }
+            else if (minimumValue !== undefined && maximumValue !== undefined) {
+                var padWithZeros = inputSlot.padWithZeros || false;
+                var currentValue = parseInt(inputSlot.partText);
+                inputSlot.isComplete = currentValue >= minimumValue && currentValue <= maximumValue;
+                if (inputSlot.isComplete && padWithZeros && !isEditing) {
+                    inputSlot.partText = inputSlot.partText.padStart(characterCount, '0');
+                }
+            }
+            else {
+                inputSlot.isComplete = inputSlot.partText.length > 0;
+            }
+        }
+        else {
+            if (allCharactersRequired) {
+                inputSlot.isComplete = inputSlot.partText.length === characterCount;
+            }
+            else {
+                inputSlot.isComplete = inputSlot.partText.length > 0;
+            }
+        }
+    };
+    return InputRuleProcessor;
+}());
+
+var KeyProcessor = (function () {
+    function KeyProcessor(format) {
+        this.format = format;
+        this.formatNavigator = FormatNavigator.getInstance(format);
+        this.ruleProcessor = new InputRuleProcessor(format);
+        this.keyTypeChecker = new KeyTypeChecker();
+        this.formatRenderer = new FormatRenderer(format);
+    }
+    KeyProcessor.prototype.setInputElement = function (element) {
+        this.ruleProcessor.setInputElement(element);
+        this.formatRenderer.setInputElement(element);
+    };
+    KeyProcessor.prototype.processMovementKey = function (event) {
+        var key = event.key, metaKey = event.metaKey;
+        switch (key) {
+            case 'ArrowLeft':
+                if (!metaKey) {
+                    this.formatNavigator.moveCursorLeft();
+                }
+                else {
+                    this.formatNavigator.moveHome();
+                }
+                break;
+            case 'ArrowRight':
+                if (!metaKey) {
+                    this.formatNavigator.moveCursorRight();
+                }
+                else {
+                    this.formatNavigator.moveEnd();
+                }
+                break;
+            case 'Home':
+                this.formatNavigator.moveHome();
+                break;
+            case 'End':
+                this.formatNavigator.moveEnd();
+                break;
+        }
+    };
+    KeyProcessor.prototype.processKeyPress = function (event) {
+        if (this.keyTypeChecker.isIgnoreKey(event)) {
+            return false;
+        }
+        if (this.keyTypeChecker.isMovementKey(event)) {
+            this.processMovementKey(event);
+            return false;
+        }
+        this.ruleProcessor.processKeyPress(event);
+        return true;
+    };
+    return KeyProcessor;
+}());
+
+var FormatParser = (function () {
+    function FormatParser(format, inputValue) {
+        if (inputValue === void 0) { inputValue = ''; }
+        this.inputValue = inputValue;
+        this.inputElementSet = false;
+        this.keyProcessor = new KeyProcessor(format);
+        this.formatNavigator = FormatNavigator.getInstance(format);
+        this.formatRenderer = new FormatRenderer(format);
+        this.inputSlotCollection = InputSlotCollection.getInstance(format);
+        this.inputRuleProcessor = new InputRuleProcessor(format);
+    }
+    FormatParser.prototype.inputElementCreated = function (element) {
+        this.keyProcessor.setInputElement(element);
+        this.formatNavigator.setInputElement(element);
+        this.formatRenderer.setInputElement(element);
+        this.inputElement = element;
+        this.inputElementSet = true;
+        if (this.inputElementSet && this.inputValue.length > 0) {
+            this.inputValuePassed(this.inputValue);
+        }
+    };
+    FormatParser.prototype.inputFocused = function () {
+        var _this = this;
+        this.formatRenderer.render();
+        setTimeout(function () { return _this.formatNavigator.setCursorToCurrentPosition(); });
+    };
+    FormatParser.prototype.inputValuePassed = function (inputValue) {
+        var _this = this;
+        this.inputValue = inputValue;
+        if (this.inputElementSet && this.inputValue.length > 0) {
+            this.inputRuleProcessor.processInputValue(inputValue);
+            setTimeout(function () {
+                _this.formatRenderer.render();
+                _this.formatNavigator.setCursorToCurrentPosition();
+            });
+        }
+    };
+    FormatParser.prototype.registerFormatCompleteEvent = function (onFormatComplete) {
+        this.onFormatComplete = onFormatComplete;
+    };
+    FormatParser.prototype.keyDownHandler = function (event) {
+        if (event.key === 'Tab') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.keyProcessor.processKeyPress(event)) {
+            if (this.inputSlotCollection.allSlotsCompleted() && this.inputElement && this.onFormatComplete) {
+                this.onFormatComplete(this.inputElement.innerHTML);
+            }
+        }
+    };
+    return FormatParser;
+}());
+
+var format$7 = {
+    formatParts: [
+        {
+            characterCount: 2,
+            placeholder: 'D',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 31,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 4,
+            placeholder: 'Y',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: true,
+            valueType: FormatValueType.Numeric,
+        },
+    ],
+};
+
+var format$6 = {
+    formatParts: [
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'D',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 31,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 4,
+            placeholder: 'Y',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: true,
+            valueType: FormatValueType.Numeric,
+        },
+    ],
+};
+
+var format$5 = {
+    formatParts: [
+        {
+            characterCount: 4,
+            placeholder: 'Y',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: true,
+            valueType: FormatValueType.Numeric,
+        },
+        {
+            characterCount: 1,
+            placeholder: '-',
+            inputText: '-',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '-',
+            inputText: '-',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'D',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 31,
+            exceedingMaximumValueCausesError: true,
+            padWithZeros: true,
+        },
+    ],
+};
+
+var format$4 = {
+    formatParts: [
+        {
+            characterCount: 2,
+            placeholder: 'D',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 31,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 4,
+            placeholder: 'Y',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: true,
+            valueType: FormatValueType.Numeric,
+        },
+        {
+            characterCount: 3,
+            placeholder: ' - ',
+            inputText: ' - ',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'D',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 31,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 4,
+            placeholder: 'Y',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: true,
+            valueType: FormatValueType.Numeric,
+        },
+    ],
+};
+
+var format$3 = {
+    formatParts: [
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'D',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 31,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 4,
+            placeholder: 'Y',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: true,
+            valueType: FormatValueType.Numeric,
+        },
+        {
+            characterCount: 3,
+            placeholder: ' - ',
+            inputText: ' - ',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'D',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 31,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 4,
+            placeholder: 'Y',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: true,
+            valueType: FormatValueType.Numeric,
+        },
+    ],
+};
+
+var format$2 = {
+    formatParts: [
+        {
+            characterCount: 4,
+            placeholder: 'Y',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: true,
+            valueType: FormatValueType.Numeric,
+        },
+        {
+            characterCount: 1,
+            placeholder: '-',
+            inputText: '-',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '-',
+            inputText: '-',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'D',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 31,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 3,
+            placeholder: ' - ',
+            inputText: ' - ',
+            isSeparator: true,
+        },
+        {
+            characterCount: 4,
+            placeholder: 'Y',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: true,
+            valueType: FormatValueType.Numeric,
+        },
+        {
+            characterCount: 1,
+            placeholder: '-',
+            inputText: '-',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: '/',
+            inputText: '/',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'D',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 31,
+            exceedingMaximumValueCausesError: true,
+            padWithZeros: true,
+        },
+    ],
+};
+
+var format$1 = {
+    formatParts: [
+        {
+            characterCount: 2,
+            placeholder: 'H',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 12,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: ':',
+            inputText: ':',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 0,
+            maximumValue: 59,
+            exceedingMaximumValueCausesError: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: ' ',
+            inputText: ' ',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            isSeparator: false,
+            possibleValues: ['AM', 'PM'],
+        },
+    ],
+};
+
+var format = {
+    formatParts: [
+        {
+            characterCount: 2,
+            placeholder: 'H',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 0,
+            maximumValue: 23,
+            exceedingMaximumValueCausesTab: true,
+            padWithZeros: true,
+        },
+        {
+            characterCount: 1,
+            placeholder: ':',
+            inputText: ':',
+            isSeparator: true,
+        },
+        {
+            characterCount: 2,
+            placeholder: 'M',
+            inputText: '_',
+            isSeparator: false,
+            allCharactersRequired: false,
+            valueType: FormatValueType.Numeric,
+            minimumValue: 1,
+            maximumValue: 59,
+            exceedingMaximumValueCausesError: true,
+            padWithZeros: true,
+        },
+    ],
+};
+
+var FormattedInput = function (props, ref) {
+    var _a = props.value, value = _a === void 0 ? '' : _a, format$8 = props.format, _b = props.defaultFormat, defaultFormat = _b === void 0 ? FormattedInputDefaultFormats.Custom : _b, _c = props.readOnly, readOnly = _c === void 0 ? false : _c, _d = props.debounceTime, debounceTime = _d === void 0 ? 800 : _d, _e = props.fillContainer, fillContainer = _e === void 0 ? true : _e, leftElement = props.leftElement, rightElement = props.rightElement, className = props.className, leftElementClassName = props.leftElementClassName, rightElementClassName = props.rightElementClassName, _f = props.isSingleLine, isSingleLine = _f === void 0 ? false : _f, _g = props.allowSingleLineScroll, allowSingleLineScroll = _g === void 0 ? false : _g, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onElementCreate = props.onElementCreate, onLeftElementClick = props.onLeftElementClick, onRightElementClick = props.onRightElementClick;
+    var inputRef = useRef();
+    var inputElementRef = useRef();
+    var formatParser = useRef();
+    useEffect(function () {
+        if (formatParser.current) {
+            formatParser.current.inputValuePassed(value);
+        }
+    }, [value]);
+    useEffect(function () {
+        var _a, _b;
+        if (defaultFormat !== FormattedInputDefaultFormats.Custom) {
+            var formatSetting = getPreDefinedFormat(defaultFormat);
+            if (!formatSetting) {
+                throw new Error('The selected format does not exist');
+            }
+            formatParser.current = new FormatParser(formatSetting, value);
+        }
+        else {
+            if (!format$8) {
+                throw new Error('The format property is required when the default format is custom');
+            }
+            formatParser.current = new FormatParser(format$8, value);
+        }
+        if (inputElementRef.current) {
+            (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.inputElementCreated(inputElementRef.current);
+        }
+        (_b = formatParser.current) === null || _b === void 0 ? void 0 : _b.registerFormatCompleteEvent(onFormatComplete);
+    }, [defaultFormat, format$8]);
+    var onFormatComplete = useCallback(function (value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }, [onChange]);
+    var getPreDefinedFormat = useCallback(function (format$8) {
+        switch (format$8) {
+            case FormattedInputDefaultFormats.DateDayMonthYear:
+                return format$7;
+            case FormattedInputDefaultFormats.DateMonthDayYear:
+                return format$6;
+            case FormattedInputDefaultFormats.DateYearMonthDay:
+                return format$5;
+            case FormattedInputDefaultFormats.DateRangeDayMonthYear:
+                return format$4;
+            case FormattedInputDefaultFormats.DateRangeMonthDayYear:
+                return format$3;
+            case FormattedInputDefaultFormats.DateRangeYearMonthDay:
+                return format$2;
+            case FormattedInputDefaultFormats.Time12Hour:
+                return format$1;
+            case FormattedInputDefaultFormats.Time24Hour:
+                return format;
+        }
+    }, []);
+    var onFocusHandler = useCallback(function (event) {
+        var _a;
+        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.inputFocused();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }, [onFocus]);
+    var onMouseUp = useCallback(function (event) {
+    }, []);
+    var onKeyDownHandler = useCallback(function (event) {
+        var _a;
+        (_a = formatParser.current) === null || _a === void 0 ? void 0 : _a.keyDownHandler(event);
+    }, []);
+    var onInputRefCreated = useCallback(function (ref) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.inputElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', onKeyDownHandler);
+        (_d = (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.inputElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseup', onMouseUp);
+        inputRef.current = ref;
+        (_f = (_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.inputElement) === null || _f === void 0 ? void 0 : _f.addEventListener('keydown', onKeyDownHandler);
+        (_h = (_g = inputRef.current) === null || _g === void 0 ? void 0 : _g.inputElement) === null || _h === void 0 ? void 0 : _h.addEventListener('mouseup', onMouseUp);
+        inputElementRef.current = (_j = inputRef.current) === null || _j === void 0 ? void 0 : _j.inputElement;
+    }, []);
+    var focus = useCallback(function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    useImperativeHandle(ref, function () { return ({
+        focus: focus,
+    }); });
+    return (jsx(ContentEditableInput$1, { ref: function (refElement) { return refElement && onInputRefCreated(refElement); }, readOnly: readOnly, debounceTime: debounceTime, fillContainer: fillContainer, leftElement: leftElement, rightElement: rightElement, className: className, leftElementClassName: leftElementClassName, rightElementClassName: rightElementClassName, isSingleLine: isSingleLine, allowSingleLineScroll: allowSingleLineScroll, onFocus: onFocusHandler, onBlur: onBlur, onElementCreate: onElementCreate, onLeftElementClick: onLeftElementClick, onRightElementClick: onRightElementClick }));
+};
+var FormattedInput$1 = memo(forwardRef(FormattedInput));
 
 var DateTimeContext = createContext(undefined);
 
@@ -30564,6 +31881,18 @@ function loadLocale(localeToLoad) {
             .catch(function (error) { return reject(error); });
     });
 }
+function getDateFormatByLocale(locale) {
+    var year = 2023;
+    var month = 12;
+    var day = 20;
+    var date = new Date(year, month - 1, day);
+    var formattedDate = date.toLocaleDateString(locale, {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+    });
+    return formattedDate.replace("".concat(year), 'YYYY').replace("".concat(month), 'MM').replace("".concat(day), 'DD');
+}
 function createDefaultColors() {
     return {
         inputBgColor: 'bsc-bg-white',
@@ -30648,8 +31977,9 @@ var DateTimeActionType;
     DateTimeActionType[DateTimeActionType["SetSelectedDateRange"] = 7] = "SetSelectedDateRange";
     DateTimeActionType[DateTimeActionType["SetSelectedStartDate"] = 8] = "SetSelectedStartDate";
     DateTimeActionType[DateTimeActionType["SetSelectedEndDate"] = 9] = "SetSelectedEndDate";
-    DateTimeActionType[DateTimeActionType["ClearDates"] = 10] = "ClearDates";
-    DateTimeActionType[DateTimeActionType["InitializeDates"] = 11] = "InitializeDates";
+    DateTimeActionType[DateTimeActionType["SetInputFormat"] = 10] = "SetInputFormat";
+    DateTimeActionType[DateTimeActionType["ClearDates"] = 11] = "ClearDates";
+    DateTimeActionType[DateTimeActionType["InitializeDates"] = 12] = "InitializeDates";
 })(DateTimeActionType || (DateTimeActionType = {}));
 var reducer = function (state, action) {
     switch (action.type) {
@@ -30673,6 +32003,8 @@ var reducer = function (state, action) {
             return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate, selectedEndDate: undefined });
         case DateTimeActionType.SetSelectedEndDate:
             return __assign(__assign({}, state), { selectedEndDate: action.selectedEndDate });
+        case DateTimeActionType.SetInputFormat:
+            return __assign(__assign({}, state), { inputFormat: action.inputFormat });
         case DateTimeActionType.ClearDates:
             return {
                 currentSelector: state.currentSelector,
@@ -31090,12 +32422,15 @@ function DateTimeYearSelector(_a) {
 
 function DateTime(_a) {
     var _b;
-    var value = _a.value, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, label = _a.label, _d = _a.useDefaultDateValue, useDefaultDateValue = _d === void 0 ? false : _d, _e = _a.allowClear, allowClear = _e === void 0 ? false : _e, locale = _a.locale, className = _a.className, _f = _a.dateSelection, dateSelection = _f === void 0 ? DateSelectionType.DateTime : _f, dateFormat = _a.dateFormat, timeConstraints = _a.timeConstraints, icon = _a.icon, _g = _a.iconPosition, iconPosition = _g === void 0 ? CalendarIconPosition.Right : _g, inputElement = _a.inputElement, _h = _a.colors, colors = _h === void 0 ? createDefaultColors() : _h, selectableDate = _a.selectableDate, isValidDate = _a.isValidDate, onChange = _a.onChange, calendarTemplate = _a.calendarTemplate, dateScrollerTemplate = _a.dateScrollerTemplate, inputTemplate = _a.inputTemplate;
-    var _j = useState(false), selectorOpen = _j[0], setSelectorOpen = _j[1];
-    var _k = useState(), dropDownTarget = _k[0], setDropDownTarget = _k[1];
+    var value = _a.value, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, label = _a.label, _d = _a.useDefaultDateValue, useDefaultDateValue = _d === void 0 ? false : _d, _e = _a.useFormattedInput, useFormattedInput = _e === void 0 ? false : _e, _f = _a.allowClear, allowClear = _f === void 0 ? false : _f, locale = _a.locale, className = _a.className, _g = _a.dateSelection, dateSelection = _g === void 0 ? DateSelectionType.DateTime : _g, dateFormat = _a.dateFormat, timeConstraints = _a.timeConstraints, icon = _a.icon, _h = _a.iconPosition, iconPosition = _h === void 0 ? CalendarIconPosition.Right : _h, inputElement = _a.inputElement, _j = _a.colors, colors = _j === void 0 ? createDefaultColors() : _j, selectableDate = _a.selectableDate, isValidDate = _a.isValidDate, onChange = _a.onChange, calendarTemplate = _a.calendarTemplate, dateScrollerTemplate = _a.dateScrollerTemplate, inputTemplate = _a.inputTemplate;
+    var _k = useState(false), selectorOpen = _k[0], setSelectorOpen = _k[1];
+    var _l = useState(), dropDownTarget = _l[0], setDropDownTarget = _l[1];
+    var isFormattedInput = useRef();
+    var inputElementChanged = useRef(false);
     var language = useRef(locale || getBrowserLanguage());
     var loadedLocale = useRef();
     var inputElementRef = useRef();
+    var dropDownTargetRef = useRef();
     var contextProps = useRef({
         calendarTemplate: calendarTemplate,
         dateScrollerTemplate: dateScrollerTemplate,
@@ -31120,6 +32455,57 @@ function DateTime(_a) {
             });
         }
     }, [value, loadedLocale.current]);
+    useEffect(function () {
+        if (dateSelection && loadedLocale.current && loadedLocale.current.code) {
+            var dateFormatString = getDateFormatByLocale(loadedLocale.current.code);
+            if (dateSelection === DateSelectionType.DateOnly) {
+                if (dateFormatString === 'DD/MM/YYYY') {
+                    dispatcher({
+                        type: DateTimeActionType.SetInputFormat,
+                        inputFormat: FormattedInputDefaultFormats.DateDayMonthYear,
+                    });
+                }
+                else if (dateFormatString === 'MM/DD/YYYY') {
+                    dispatcher({
+                        type: DateTimeActionType.SetInputFormat,
+                        inputFormat: FormattedInputDefaultFormats.DateMonthDayYear,
+                    });
+                }
+                else if (dateFormatString === 'YYYY/MM/DD') {
+                    dispatcher({
+                        type: DateTimeActionType.SetInputFormat,
+                        inputFormat: FormattedInputDefaultFormats.DateYearMonthDay,
+                    });
+                }
+            }
+            else if (dateSelection === DateSelectionType.TimeOnly) {
+                dispatcher({
+                    type: DateTimeActionType.SetInputFormat,
+                    inputFormat: FormattedInputDefaultFormats.Time12Hour,
+                });
+            }
+            else if (dateSelection === DateSelectionType.DateRange) {
+                if (dateFormatString === 'DD/MM/YYYY') {
+                    dispatcher({
+                        type: DateTimeActionType.SetInputFormat,
+                        inputFormat: FormattedInputDefaultFormats.DateRangeDayMonthYear,
+                    });
+                }
+                else if (dateFormatString === 'MM/DD/YYYY') {
+                    dispatcher({
+                        type: DateTimeActionType.SetInputFormat,
+                        inputFormat: FormattedInputDefaultFormats.DateRangeMonthDayYear,
+                    });
+                }
+                else if (dateFormatString === 'YYYY/MM/DD') {
+                    dispatcher({
+                        type: DateTimeActionType.SetInputFormat,
+                        inputFormat: FormattedInputDefaultFormats.DateRangeYearMonthDay,
+                    });
+                }
+            }
+        }
+    }, [dateSelection, loadedLocale.current]);
     useEffect(function () {
         if (inputElement) {
             inputElementRef.current = inputElement;
@@ -31165,13 +32551,21 @@ function DateTime(_a) {
         currentViewDate: new Date(),
         dateInitialized: false,
     };
-    var _l = useReducer(reducer, initialState), state = _l[0], dispatcher = _l[1];
-    var onFocus = function (event) {
+    var _m = useReducer(reducer, initialState), state = _m[0], dispatcher = _m[1];
+    var onFocus = function () {
         setDropDownElement();
         setSelectorOpen(true);
     };
     var onInput = function (event) {
         var dateString = event.target.innerText;
+        onDateStringChange(dateString);
+    };
+    var onFormatStringChange = function (formattedText) {
+        if (formattedText) {
+            onDateStringChange(formattedText);
+        }
+    };
+    var onDateStringChange = function (dateString) {
         var inputDate = dateSelection !== DateSelectionType.DateRange
             ? parseDate(dateString, loadedLocale.current)
             : parseDateRange(dateString, loadedLocale.current);
@@ -31204,7 +32598,7 @@ function DateTime(_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange();
         }
     };
-    var onCalendarClick = function (event) {
+    var onCalendarClick = function () {
         setDropDownElement();
         setSelectorOpen(!selectorOpen);
     };
@@ -31215,14 +32609,18 @@ function DateTime(_a) {
         setSelectorOpen(false);
         onChange === null || onChange === void 0 ? void 0 : onChange();
     };
-    var onInputElementCreated = function (element) {
-        if (!inputElementRef.current) {
+    var onInputElementCreated = function (element, formattedInput) {
+        if (!inputElementRef.current || isFormattedInput.current !== formattedInput) {
             inputElementRef.current = element;
+            isFormattedInput.current = formattedInput;
+            inputElementChanged.current = true;
         }
     };
-    var setDropDownElement = function (event) {
-        if (!dropDownTarget && inputElementRef.current) {
+    var setDropDownElement = function () {
+        if ((!dropDownTargetRef.current || inputElementChanged.current) && inputElementRef.current) {
+            dropDownTargetRef.current = inputElementRef.current;
             setDropDownTarget(inputElementRef.current);
+            inputElementChanged.current = false;
         }
     };
     var onDateTimeHidden = function () {
@@ -31324,7 +32722,7 @@ function DateTime(_a) {
         _b["".concat((colors === null || colors === void 0 ? void 0 : colors.readOnlyInputBgColor) || 'bsc-bg-gray-200')] = readOnly,
         _b["".concat((colors === null || colors === void 0 ? void 0 : colors.inputBgColor) || 'bsc-bg-white')] = !readOnly,
         _b), "dark:bsc-bg-black ".concat(colors === null || colors === void 0 ? void 0 : colors.inputBorderColor, " bc-dt-input"), className);
-    return (jsx(DateTimeContext.Provider, __assign({ value: contextProps.current }, { children: jsxs("div", __assign({ className: "bc-date-time" }, { children: [jsxs(TemplateOutlet, __assign({ props: inputTemplateProps, template: template }, { children: [label && jsx("label", __assign({ className: "dark:bsc-text-white bc-dt-label" }, { children: label })), jsx(ContentEditableInput$1, __assign({ value: getValue(), readOnly: readOnly, className: inputStyles, onFocus: onFocus, onInput: onInput, onElementCreate: onInputElementCreated }, inputProps))] })), jsx(OverlayPanel, __assign({ visible: selectorOpen, target: dropDownTarget, shouldTargetCloseOverlay: false, shouldScrollCloseOverlay: true, shouldCheckZIndex: true, shouldRemainOnScreen: true, hidden: onDateTimeHidden, unmountWhenHidden: true }, { children: jsxs(Fragment, { children: [state.currentSelector === DateTimeActionType.DaySelector &&
+    return (jsx(DateTimeContext.Provider, __assign({ value: contextProps.current }, { children: jsxs("div", __assign({ className: "bc-date-time" }, { children: [label && jsx("label", __assign({ className: "dark:bsc-text-white bc-dt-label" }, { children: label })), useFormattedInput === false || state.inputFormat === undefined ? (jsx(TemplateOutlet, __assign({ props: inputTemplateProps, template: template }, { children: jsx(ContentEditableInput$1, __assign({ value: getValue(), readOnly: readOnly, className: inputStyles, onFocus: onFocus, onInput: onInput, onElementCreate: function (element) { return onInputElementCreated(element, false); } }, inputProps)) }))) : (jsx(FormattedInput$1, __assign({ value: getValue(), readOnly: readOnly, className: inputStyles, onFocus: onFocus, onChange: onFormatStringChange, onElementCreate: function (element) { return onInputElementCreated(element, true); }, defaultFormat: state.inputFormat }, inputProps))), jsx(OverlayPanel, __assign({ visible: selectorOpen, target: dropDownTarget, shouldTargetCloseOverlay: false, shouldScrollCloseOverlay: true, shouldCheckZIndex: true, shouldRemainOnScreen: true, hidden: onDateTimeHidden, unmountWhenHidden: true }, { children: jsxs(Fragment, { children: [state.currentSelector === DateTimeActionType.DaySelector &&
                                 canShowDateSelectors &&
                                 state.dateInitialized &&
                                 loadedLocale.current && (jsx(DateTimeDaySelector, { selectedDate: state.selectedDate, viewDate: state.currentViewDate, locale: loadedLocale.current, showTimeSelector: dateSelection === DateSelectionType.DateTime, selectableDate: selectableDate, isValidDate: isValidDate, dispatcher: dispatcher, onChange: onChange })), state.currentSelector === DateTimeActionType.MonthSelector &&