@syncfusion/ej2-calendars 20.1.56 → 20.1.57

package/dist/es6/ej2-calendars.es5.js

@@ -237,6 +237,10 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
             duration: 400,
             isCenterRipple: true
         });
+        if (this.getModuleName() === 'daterangepicker') {
+            attributes(this.previousIcon, { tabIndex: '-1' });
+            attributes(this.nextIcon, { tabIndex: '-1' });
+        }
         attributes(this.nextIcon, ariaNextAttrs);
         this.headerTitleElement = this.createElement('div', { className: '' + LINK + ' ' + TITLE });
         attributes(this.headerTitleElement, ariaTitleAttrs);
@@ -3086,6 +3090,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         _this.isIconClicked = false;
         _this.isDynamicValueChanged = false;
         _this.moduleName = _this.getModuleName();
+        _this.isFocused = false;
         _this.datepickerOptions = options;
         return _this;
     }
@@ -3651,6 +3656,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DatePicker.prototype.inputFocusHandler = function () {
+        this.isFocused = true;
         if (!this.enabled) {
             return;
         }
@@ -5283,7 +5289,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             this.validationAttribute(this.element, this.inputElement);
         }
         this.checkHtmlAttributes(false);
-        merge(this.defaultKeyConfigs, { shiftTab: 'shift+tab' });
+        merge(this.defaultKeyConfigs, { shiftTab: 'shift+tab', tab: 'tab' });
         var start = this.checkDateValue(new Date(this.checkValue(this.startValue)));
         this.setProperties({ startDate: start }, true); // persist the value propeerty.
         this.setProperties({ endValue: this.checkDateValue(new Date(this.checkValue(this.endValue))) }, true);
@@ -5994,8 +6000,11 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    DateRangePicker.prototype.keyCalendarUpdate = function (isLeftCalendar, ele) {
-        this.removeFocusedDate();
+    DateRangePicker.prototype.keyCalendarUpdate = function (isLeftCalendar, ele, isRemoveFocus) {
+        if (isRemoveFocus === void 0) { isRemoveFocus = true; }
+        if (isRemoveFocus) {
+            this.removeFocusedDate();
+        }
         if (isLeftCalendar) {
             this.leftCalCurrentDate = new Date(+this.currentDate);
             ele = this.leftCalendar;
@@ -6096,8 +6105,37 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                 }
                 this.keyNavigation(ele, e);
                 break;
+            case 'tab':
+                if (this.tabKeyValidation(ele, LEFTCALENDER)) {
+                    ele = this.keyCalendarUpdate(false, ele, false);
+                    var focusedCell = ele.querySelector('.e-focused-date');
+                    if (isNullOrUndefined(focusedCell)) {
+                        this.currentDate = this.firstCellToFocus(this.rightCalendar);
+                    }
+                    this.keyboardNavigate(0, view, e, max, min);
+                    this.keyNavigation(ele, e);
+                }
+                break;
+            case 'shiftTab':
+                if (this.tabKeyValidation(ele, RIGHTCALENDER)) {
+                    ele = this.keyCalendarUpdate(true, ele, false);
+                    var focusedCell = ele.querySelector('.e-focused-date');
+                    if (isNullOrUndefined(focusedCell)) {
+                        this.currentDate = this.firstCellToFocus(this.leftCalendar);
+                    }
+                    this.keyboardNavigate(0, view, e, max, min);
+                    this.keyNavigation(ele, e);
+                }
+                break;
         }
     };
+    DateRangePicker.prototype.firstCellToFocus = function (calendar) {
+        var focusAbleEle = calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');
+        var focusEleID = focusAbleEle && focusAbleEle.id ? focusAbleEle.id.split('_')[0] : null;
+        var currentFirstDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
+        var focusDate = focusEleID ? new Date(+focusEleID) : currentFirstDay;
+        return focusDate;
+    };
     DateRangePicker.prototype.keyInputHandler = function (e, value) {
         var date;
         var view = this.getViewNumber(this.currentView());
@@ -6288,19 +6326,39 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                     this.presetElement.focus();
                     this.removeFocusedDate();
                 }
-                e.preventDefault();
+                if (isLeftCalendar) {
+                    e.preventDefault();
+                }
+                if (this.tabKeyValidation(ele, RIGHTCALENDER)) {
+                    this.currentDate = new Date(+this.leftCalCurrentDate);
+                    this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);
+                }
                 break;
             case 'spacebar':
                 if (this.applyButton && !this.applyButton.disabled) {
                     this.applyFunction(e);
                 }
                 break;
+            case 'tab':
+                if (this.tabKeyValidation(ele, LEFTCALENDER)) {
+                    this.currentDate = new Date(+this.rightCalCurrentDate);
+                    this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);
+                }
+                break;
             default:
                 this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);
                 this.checkMinMaxDays();
         }
         this.presetHeight();
     };
+    DateRangePicker.prototype.tabKeyValidation = function (ele, calendarPos) {
+        var isLeftCalendar = ele.classList.contains(calendarPos);
+        var rightHeader = this.rightCalendar.querySelector('.e-header');
+        var leftHeader = this.leftCalendar.querySelector('.e-header');
+        var isRightMonth = rightHeader ? rightHeader.classList.contains('e-month') : false;
+        var isLeftMonth = leftHeader ? leftHeader.classList.contains('e-month') : false;
+        return isLeftCalendar && isLeftMonth && isRightMonth && !this.isMobile;
+    };
     DateRangePicker.prototype.keyNavigation = function (calendar, e) {
         this.bindCalendarCellEvents(calendar);
         if (calendar.classList.contains(LEFTCALENDER)) {
@@ -7042,9 +7100,10 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         }
         this.removeFocusedDate();
     };
-    DateRangePicker.prototype.updateControl = function (calendar) {
+    DateRangePicker.prototype.updateControl = function (calendar, customDate) {
+        if (customDate === void 0) { customDate = null; }
         if (calendar.classList.contains(RIGHTCALENDER)) {
-            this.rightCalCurrentDate = new Date(+this.currentDate);
+            this.rightCalCurrentDate = new Date(+(customDate ? customDate : this.currentDate));
         }
         else {
             this.leftCalCurrentDate = new Date(+this.currentDate);
@@ -7372,7 +7431,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             this.rightCalNextIcon = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + NEXTICON$1);
             this.rightTitle = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + TITLE$1);
             remove(this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + ICONCONTAINER$1));
-            this.calendarElement.querySelector('table').setAttribute('tabindex', '-1');
+            this.calendarElement.querySelector('table').setAttribute('tabindex', '0');
             this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER$1).appendChild(this.rightCalNextIcon);
             this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER$1).appendChild(this.rightCalPrevIcon);
             prepend([this.rightCalPrevIcon], this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER$1));
@@ -7486,7 +7545,8 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                         this.updateControl(this.leftCalendar);
                         this.updateCalendarElement(this.rightCalendar);
                         _super.prototype.navigateTo.call(this, view, this.rightCalCurrentDate);
-                        this.updateControl(this.rightCalendar);
+                        var customDate = this.rightCalCurrentDate ? this.rightCalCurrentDate : this.currentDate;
+                        this.updateControl(this.rightCalendar, customDate);
                         this.updateNavIcons();
                         this.calendarIconEvent();
                         this.calendarIconRipple();
@@ -13434,6 +13494,7 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         this.isHiddenMask = false;
         this.isComplete = false;
         this.isNavigate = false;
+        this.navigated = false;
         this.formatRegex = /EEEEE|EEEE|EEE|EE|E|dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yy|y|HH|H|hh|h|mm|m|fff|ff|f|aa|a|ss|s|zzzz|zzz|zz|z|'[^']*'|'[^']*'/g;
         this.isDeletion = false;
         this.isShortYear = false;
@@ -13553,6 +13614,7 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         this.parent.inputElement.setSelectionRange(start, end);
     };
     MaskedDateTime.prototype.maskKeydownHandler = function (args) {
+        this.dayTypeCount = this.monthTypeCount = this.hourTypeCount = this.minuteTypeCount = this.secondTypeCount = 0;
         if (args.e.key === 'Delete') {
             this.isDeleteKey = true;
             return;
@@ -13586,6 +13648,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
             this.validCharacterCheck();
         }
     };
+    MaskedDateTime.prototype.isPersist = function () {
+        var isPersist = this.parent.isFocused || this.navigated;
+        return isPersist;
+    };
     MaskedDateTime.prototype.differenceCheck = function () {
         var start = this.parent.inputElement.selectionStart;
         var inputValue = this.parent.inputElement.value;
@@ -13605,7 +13671,9 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         }
         switch (this.previousHiddenMask[start - 1]) {
             case 'd':
-                var date = (this.isDayPart && newDateValue.getDate().toString().length < 2 ? newDateValue.getDate() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                var date = (this.isDayPart && newDateValue.getDate().toString().length < 2 && !this.isPersist() ? newDateValue.getDate() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 this.isDateZero = (newVal[start - 1] == '0');
                 if (isNaN(date)) {
                     return;
@@ -13630,12 +13698,14 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                 break;
             case 'M':
                 var month = void 0;
-                if (newDateValue.getMonth().toString().length < 2) {
+                if (newDateValue.getMonth().toString().length < 2 && !this.isPersist()) {
                     month = (this.isMonthPart ? (newDateValue.getMonth() + 1) * 10 : 0) + parseInt(newVal[start - 1], 10);
                 }
                 else {
                     month = parseInt(newVal[start - 1], 10);
                 }
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 this.isMonthZero = (newVal[start - 1] == '0');
                 if (!isNaN(month)) {
                     while (month > 12) {
@@ -13708,7 +13778,9 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                 }
                 break;
             case 'h':
-                this.hour = (this.isHourPart && (newDateValue.getHours() % 12 || 12).toString().length < 2 ? (newDateValue.getHours() % 12 || 12) * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.hour = (this.isHourPart && (newDateValue.getHours() % 12 || 12).toString().length < 2 && !this.isPersist() ? (newDateValue.getHours() % 12 || 12) * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 if (isNaN(this.hour)) {
                     return;
                 }
@@ -13721,7 +13793,9 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                 this.hourTypeCount = this.hourTypeCount + 1;
                 break;
             case 'H':
-                this.hour = (this.isHourPart && newDateValue.getHours().toString().length < 2 ? newDateValue.getHours() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.hour = (this.isHourPart && newDateValue.getHours().toString().length < 2 && !this.isPersist() ? newDateValue.getHours() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 if (isNaN(this.hour)) {
                     return;
                 }
@@ -13734,7 +13808,9 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                 this.hourTypeCount = this.hourTypeCount + 1;
                 break;
             case 'm':
-                var minutes = (this.isMinutePart && newDateValue.getMinutes().toString().length < 2 ? newDateValue.getMinutes() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                var minutes = (this.isMinutePart && newDateValue.getMinutes().toString().length < 2 && !this.isPersist() ? newDateValue.getMinutes() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 if (isNaN(minutes)) {
                     return;
                 }
@@ -13747,7 +13823,9 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                 this.minuteTypeCount = this.minuteTypeCount + 1;
                 break;
             case 's':
-                var seconds = (this.isSecondsPart && newDateValue.getSeconds().toString().length < 2 ? newDateValue.getSeconds() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                var seconds = (this.isSecondsPart && newDateValue.getSeconds().toString().length < 2 && !this.isPersist() ? newDateValue.getSeconds() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 if (isNaN(seconds)) {
                     return;
                 }
@@ -13801,6 +13879,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                 case 'd':
                     result = proxy.isDayPart ? proxy.maskDateValue.getDate().toString() : proxy.defaultConstant['day'].toString();
                     result = proxy.zeroCheck(proxy.isDateZero, proxy.isDayPart, result);
+                    if (proxy.dayTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.dayTypeCount = 0;
+                    }
                     break;
                 case 'dd':
                     result = proxy.isDayPart ? proxy.roundOff(proxy.maskDateValue.getDate(), 2) : proxy.defaultConstant['day'].toString();
@@ -13824,6 +13906,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                 case 'M':
                     result = proxy.isMonthPart ? (proxy.maskDateValue.getMonth() + 1).toString() : proxy.defaultConstant['month'].toString();
                     result = proxy.zeroCheck(proxy.isMonthZero, proxy.isMonthPart, result);
+                    if (proxy.monthTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.monthTypeCount = 0;
+                    }
                     break;
                 case 'MM':
                     result = proxy.isMonthPart ? proxy.roundOff(proxy.maskDateValue.getMonth() + 1, 2) : proxy.defaultConstant['month'].toString();
@@ -13853,6 +13939,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                     break;
                 case 'h':
                     result = proxy.isHourPart ? (proxy.maskDateValue.getHours() % 12 || 12).toString() : proxy.defaultConstant['hour'].toString();
+                    if (proxy.hourTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.hourTypeCount = 0;
+                    }
                     break;
                 case 'hh':
                     result = proxy.isHourPart ? proxy.roundOff(proxy.maskDateValue.getHours() % 12 || 12, 2) : proxy.defaultConstant['hour'].toString();
@@ -13863,6 +13953,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                     break;
                 case 'H':
                     result = proxy.isHourPart ? proxy.maskDateValue.getHours().toString() : proxy.defaultConstant['hour'].toString();
+                    if (proxy.hourTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.hourTypeCount = 0;
+                    }
                     break;
                 case 'HH':
                     result = proxy.isHourPart ? proxy.roundOff(proxy.maskDateValue.getHours(), 2) : proxy.defaultConstant['hour'].toString();
@@ -13873,6 +13967,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                     break;
                 case 'm':
                     result = proxy.isMinutePart ? proxy.maskDateValue.getMinutes().toString() : proxy.defaultConstant['minute'].toString();
+                    if (proxy.minuteTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.minuteTypeCount = 0;
+                    }
                     break;
                 case 'mm':
                     result = proxy.isMinutePart ? proxy.roundOff(proxy.maskDateValue.getMinutes(), 2) : proxy.defaultConstant['minute'].toString();
@@ -13883,6 +13981,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                     break;
                 case 's':
                     result = proxy.isSecondsPart ? proxy.maskDateValue.getSeconds().toString() : proxy.defaultConstant['second'].toString();
+                    if (proxy.secondTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.secondTypeCount = 0;
+                    }
                     break;
                 case 'ss':
                     result = proxy.isSecondsPart ? proxy.roundOff(proxy.maskDateValue.getSeconds(), 2) : proxy.defaultConstant['second'].toString();
@@ -13961,6 +14063,7 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         var start = this.parent.inputElement.selectionStart;
         var end = this.parent.inputElement.selectionEnd;
         var formatIndex = isbackward ? start - 1 : end + 1;
+        this.navigated = true;
         while (formatIndex < this.hiddenMask.length && formatIndex >= 0) {
             if (this.validCharacters.indexOf(this.hiddenMask[formatIndex]) >= 0) {
                 this.setSelection(this.hiddenMask[formatIndex]);