@syncfusion/ej2-calendars 24.2.3 → 24.2.8

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

@@ -32,6 +32,7 @@ var DEVICE = 'e-device';
 var HEADER = 'e-header';
 var RTL = 'e-rtl';
 var CONTENT = 'e-content';
+var CONTENTTABLE = 'e-calandar-content-table';
 var YEAR = 'e-year';
 var MONTH = 'e-month';
 var DECADE = 'e-decade';
@@ -47,6 +48,7 @@ var WEEKEND = 'e-weekend';
 var WEEKNUMBER = 'e-week-number';
 var SELECTED = 'e-selected';
 var FOCUSEDDATE = 'e-focused-date';
+var FOCUSEDCELL = 'e-focused-cell';
 var OTHERMONTHROW = 'e-month-hide';
 var TODAY = 'e-today';
 var TITLE = 'e-title';
@@ -227,6 +229,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
         var ariaTitleAttrs = {
             'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'title'
         };
+        var tabIndexAttr = { 'tabindex': '0' };
         this.headerElement = this.createElement('div', { className: HEADER });
         var iconContainer = this.createElement('div', { className: ICONCONTAINER });
         this.previousIcon = this.createElement('button', { className: '' + PREVICON, attrs: { type: 'button' } });
@@ -236,6 +239,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
             isCenterRipple: true
         });
         attributes(this.previousIcon, ariaPrevAttrs);
+        attributes(this.previousIcon, tabIndexAttr);
         this.nextIcon = this.createElement('button', { className: '' + NEXTICON, attrs: { type: 'button' } });
         rippleEffect(this.nextIcon, {
             selector: '.e-next',
@@ -247,8 +251,10 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
             attributes(this.nextIcon, { tabIndex: '-1' });
         }
         attributes(this.nextIcon, ariaNextAttrs);
+        attributes(this.nextIcon, tabIndexAttr);
         this.headerTitleElement = this.createElement('div', { className: '' + LINK + ' ' + TITLE });
         attributes(this.headerTitleElement, ariaTitleAttrs);
+        attributes(this.headerTitleElement, tabIndexAttr);
         this.headerElement.appendChild(this.headerTitleElement);
         this.previousIcon.appendChild(this.createElement('span', { className: '' + PREVSPAN + ' ' + ICON }));
         this.nextIcon.appendChild(this.createElement('span', { className: '' + NEXTSPAN + ' ' + ICON }));
@@ -265,7 +271,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
     };
     CalendarBase.prototype.createContent = function () {
         this.contentElement = this.createElement('div', { className: CONTENT });
-        this.table = this.createElement('table', { attrs: { tabIndex: '0', 'role': 'grid', 'aria-activedescendant': '', 'aria-labelledby': this.element.id } });
+        this.table = this.createElement('table', { attrs: { 'class': CONTENTTABLE, 'tabIndex': '0', 'role': 'grid', 'aria-activedescendant': '', 'aria-labelledby': this.element.id } });
         if (this.getModuleName() === 'calendar') {
             this.element.appendChild(this.contentElement);
         }
@@ -278,6 +284,30 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
         if (this.showTodayButton) {
             this.createContentFooter();
         }
+        if (this.getModuleName() != 'daterangepicker') {
+            EventHandler.add(this.table, 'focus', this.addContentFocus, this);
+            EventHandler.add(this.table, 'blur', this.removeContentFocus, this);
+        }
+    };
+    CalendarBase.prototype.addContentFocus = function (args) {
+        var focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');
+        var selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
+        if (!isNullOrUndefined(selectedDate)) {
+            selectedDate.classList.add(FOCUSEDCELL);
+        }
+        else if (!isNullOrUndefined(focusedDate)) {
+            focusedDate.classList.add(FOCUSEDCELL);
+        }
+    };
+    CalendarBase.prototype.removeContentFocus = function (args) {
+        var focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');
+        var selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
+        if (!isNullOrUndefined(selectedDate)) {
+            selectedDate.classList.remove(FOCUSEDCELL);
+        }
+        else if (!isNullOrUndefined(focusedDate)) {
+            focusedDate.classList.remove(FOCUSEDCELL);
+        }
     };
     CalendarBase.prototype.getCultureValues = function () {
         var culShortNames = [];
@@ -362,6 +392,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
     CalendarBase.prototype.updateFooter = function () {
         this.todayElement.textContent = this.l10.getConstant('today');
         this.todayElement.setAttribute('aria-label', this.l10.getConstant('today'));
+        this.todayElement.setAttribute('tabindex', '0');
     };
     CalendarBase.prototype.createContentFooter = function () {
         if (this.showTodayButton) {
@@ -466,34 +497,54 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
         this.effect = '';
         switch (e.action) {
             case 'moveLeft':
-                this.keyboardNavigate(-1, view, e, this.max, this.min);
-                e.preventDefault();
+                if (this.getModuleName() != 'daterangepicker' && !isNullOrUndefined(e.target) && e.target.classList.length > 0 && e.target.classList.contains(CONTENTTABLE)) {
+                    this.keyboardNavigate(-1, view, e, this.max, this.min);
+                    e.preventDefault();
+                }
                 break;
             case 'moveRight':
-                this.keyboardNavigate(1, view, e, this.max, this.min);
-                e.preventDefault();
+                if (this.getModuleName() != 'daterangepicker' && !isNullOrUndefined(e.target) && e.target.classList.length > 0 && e.target.classList.contains(CONTENTTABLE)) {
+                    this.keyboardNavigate(1, view, e, this.max, this.min);
+                    e.preventDefault();
+                }
                 break;
             case 'moveUp':
-                if (view === 0) {
-                    this.keyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.
-                }
-                else {
-                    this.keyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.
+                if (this.getModuleName() != 'daterangepicker' && !isNullOrUndefined(e.target) && e.target.classList.length > 0 && e.target.classList.contains(CONTENTTABLE)) {
+                    if (view === 0) {
+                        this.keyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.
+                    }
+                    else {
+                        this.keyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.
+                    }
+                    e.preventDefault();
                 }
-                e.preventDefault();
                 break;
             case 'moveDown':
-                if (view === 0) {
-                    this.keyboardNavigate(7, view, e, this.max, this.min);
-                }
-                else {
-                    this.keyboardNavigate(4, view, e, this.max, this.min);
+                if (this.getModuleName() != 'daterangepicker' && !isNullOrUndefined(e.target) && e.target.classList.length > 0 && e.target.classList.contains(CONTENTTABLE)) {
+                    if (view === 0) {
+                        this.keyboardNavigate(7, view, e, this.max, this.min);
+                    }
+                    else {
+                        this.keyboardNavigate(4, view, e, this.max, this.min);
+                    }
+                    e.preventDefault();
                 }
-                e.preventDefault();
                 break;
             case 'select':
-                if (e.target === this.todayElement) {
+                if (e.target === this.headerTitleElement) {
+                    this.navigateTitle(e);
+                }
+                else if (e.target === this.previousIcon) {
+                    this.navigatePrevious(e);
+                }
+                else if (e.target === this.nextIcon) {
+                    this.navigateNext(e);
+                }
+                else if (e.target === this.todayElement) {
                     this.todayButtonClick(e, value);
+                    if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
+                        this.element.focus();
+                    }
                 }
                 else {
                     var element = !isNullOrUndefined(focusedDate) ? focusedDate : selectedDate;
@@ -506,6 +557,9 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
                         else {
                             this.contentClick(null, --view, (element), value);
                         }
+                        if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
+                            this.element.focus();
+                        }
                     }
                 }
                 break;
@@ -575,9 +629,20 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
                 this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 11, 31));
                 e.preventDefault();
                 break;
-        }
-        if (this.getModuleName() === 'calendar') {
-            this.table.focus();
+            case 'tab':
+                if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && e.target === this.todayElement) {
+                    e.preventDefault();
+                    this.element.focus();
+                    this.hide();
+                }
+                break;
+            case 'shiftTab':
+                if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && e.target === this.headerTitleElement) {
+                    e.preventDefault();
+                    this.element.focus();
+                    this.hide();
+                }
+                break;
         }
     };
     CalendarBase.prototype.keyboardNavigate = function (number, currentView, e, max, min) {
@@ -3845,8 +3910,6 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
                     this.inputElement.focus();
                 }
                 break;
-            case 'tab':
-                this.hide(e);
         }
     };
     DatePicker.prototype.inputFocusHandler = function () {
@@ -4008,7 +4071,13 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
                         this.inputElement.selectionStart = start;
                         this.inputElement.selectionEnd = end;
                     }
-                    this.hide(e);
+                    if (e.action === 'tab' && e.target === this.inputElement && this.isCalendar() && document.activeElement === this.inputElement) {
+                        e.preventDefault();
+                        this.headerTitleElement.focus();
+                    }
+                    if (e.action === 'shiftTab' && e.target === this.inputElement && this.isCalendar() && document.activeElement === this.inputElement) {
+                        this.hide(e);
+                    }
                     break;
                 }
             default:
@@ -5409,7 +5478,6 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         _this.invalidValueString = null;
         _this.isAngular = false;
         _this.preventChange = false;
-        _this.isKeyPressed = false;
         _this.dateRangeOptions = options;
         return _this;
     }
@@ -5765,7 +5833,6 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);
         EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);
         EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);
-        EventHandler.add(this.inputElement, 'keyup', this.keyupHandler, this);
         if (this.showClearButton && this.inputWrapper.clearButton) {
             EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);
         }
@@ -5792,7 +5859,6 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
         EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
         EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);
-        EventHandler.remove(this.inputElement, 'keyup', this.keyupHandler);
         if (this.showClearButton && this.inputWrapper.clearButton) {
             EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);
         }
@@ -6047,8 +6113,8 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             var startDate = this.presetsItem[i].start;
             var endDate = this.presetsItem[i].end;
             if (this.startValue && this.endValue) {
-                if ((+new Date(startDate.setHours(0, 0, 0, 0)) === +new Date(this.startValue.setHours(0, 0, 0, 0))) &&
-                    (+new Date(endDate.setHours(0, 0, 0, 0)) === +new Date(this.endValue.setHours(0, 0, 0, 0)))) {
+                if (startDate.getDate() == this.startValue.getDate() && startDate.getMonth() == this.startValue.getMonth() && startDate.getFullYear() == this.startValue.getFullYear()
+                    && endDate.getDate() == this.endValue.getDate() && endDate.getMonth() == this.endValue.getMonth() && endDate.getFullYear() == this.endValue.getFullYear()) {
                     this.activeIndex = i;
                     this.isCustomRange = false;
                 }
@@ -8027,9 +8093,6 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             this.startButton.element.classList.add(ACTIVE$1);
         }
     };
-    DateRangePicker.prototype.keyupHandler = function (e) {
-        this.isKeyPressed = (this.inputElement.value !== this.previousEleValue) ? true : false;
-    };
     DateRangePicker.prototype.applyFunction = function (eve) {
         var isValueChanged = false;
         if (eve.type !== 'touchstart') {
@@ -8052,13 +8115,15 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             eve.preventDefault();
         }
         if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {
+            if (!(this.previousStartValue && this.previousEndValue && this.startValue.getDate() == this.previousStartValue.getDate() && this.startValue.getMonth() == this.previousStartValue.getMonth() &&
+                this.startValue.getFullYear() == this.previousStartValue.getFullYear()
+                && this.endValue.getDate() == this.previousEndValue.getDate() && this.endValue.getMonth() == this.previousEndValue.getMonth()
+                && this.endValue.getFullYear() == this.previousEndValue.getFullYear())) {
+                Input.setValue(this.rangeArgs(eve).text, this.inputElement, this.floatLabelType, this.showClearButton);
+            }
             this.previousStartValue = new Date(+this.startValue);
             this.previousEndValue = new Date(+this.endValue);
             this.previousEleValue = this.inputElement.value;
-            if (!this.isKeyPressed) {
-                Input.setValue(this.rangeArgs(eve).text, this.inputElement, this.floatLabelType, this.showClearButton);
-            }
-            this.isKeyPressed = false;
             if (+this.initStartDate !== +this.startValue || +this.initEndDate !== +this.endValue) {
                 isValueChanged = true;
             }
@@ -14536,6 +14601,7 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                 {
                     var year = (this.isYearPart && (newDateValue.getFullYear().toString().length < 4
                         && !this.isShortYear) ? newDateValue.getFullYear() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                    var yearValue = (this.dateformat.match(/y/g) || []).length;
                     this.isShortYear = false;
                     this.isYearZero = (newVal[start - 1] === '0');
                     if (isNaN(year)) {
@@ -14549,7 +14615,7 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                     }
                     else {
                         newDateValue.setFullYear(year);
-                        if (year.toString().length === 4) {
+                        if (year.toString().length === yearValue) {
                             this.isNavigate = true;
                         }
                         this.previousDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth(), newDateValue.getDate());
@@ -14724,9 +14790,6 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                 case 'yy':
                     result = proxy.isYearPart ? proxy.roundOff(proxy.maskDateValue.getFullYear() % 100, 2) : proxy.defaultConstant['year'].toString();
                     result = proxy.zeroCheck(proxy.isYearZero, proxy.isYearPart, result);
-                    if (proxy.isYearPart) {
-                        proxy.isNavigate = proxy.isShortYear = (proxy.maskDateValue.getFullYear() % 100).toString().length === 2;
-                    }
                     break;
                 case 'y':
                 case 'yyyy':