@syncfusion/ej2-calendars 33.2.12 → 33.2.15

package/helpers/e2e/timepickerHelper.js

@@ -0,0 +1,63 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base/helpers/e2e"], function (require, exports, e2e_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var timepickerHelper = (function (_super) {
+        __extends(timepickerHelper, _super);
+        function timepickerHelper(id, wrapperFn) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            if (wrapperFn !== undefined) {
+                _this.wrapperFn = wrapperFn;
+            }
+            return _this;
+        }
+        timepickerHelper.prototype.selector = function (arg) {
+            return (this.wrapperFn ? this.wrapperFn(arg) : arg);
+        };
+        timepickerHelper.prototype.getElement = function () {
+            return this.selector('#' + this.id);
+        };
+        timepickerHelper.prototype.getTimePickerInput = function () {
+            return this.selector('.e-control.e-timepicker.e-lib.e-input');
+        };
+        timepickerHelper.prototype.getTimePickerIcon = function () {
+            return this.selector('.e-time-wrapper .e-time-icon');
+        };
+        timepickerHelper.prototype.getTimePickerClearIcon = function () {
+            return this.selector('.e-time-wrapper .e-clear-icon');
+        };
+        timepickerHelper.prototype.getTimePicker = function () {
+            return this.selector('.e-input-group.e-control-wrapper');
+        };
+        timepickerHelper.prototype.getTimePickerContent = function () {
+            return this.selector('.e-timepicker .e-content');
+        };
+        timepickerHelper.prototype.getTimePickerListContent = function () {
+            return this.selector('.e-timepicker .e-content .e-list-parent');
+        };
+        timepickerHelper.prototype.getTimePickerListItem = function () {
+            return this.selector('.e-timepicker .e-content .e-list-parent .e-list-item');
+        };
+        timepickerHelper.prototype.getTimePickerDisabledTime = function () {
+            return this.selector('.e-timepicker .e-content .e-list-parent .e-list-item.e-disabled');
+        };
+        timepickerHelper.prototype.getTimePickerSelectedTime = function () {
+            return this.selector('.e-timepicker .e-content .e-list-parent .e-list-item.e-active');
+        };
+        return timepickerHelper;
+    }(e2e_1.TestHelper));
+    exports.timepickerHelper = timepickerHelper;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-calendars",
-  "version": "33.2.12",
+  "version": "33.2.15",
   "description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -9,8 +9,8 @@
   "es2015": "./dist/es6/ej2-calendars.es5.js",
   "dependencies": {
     "@syncfusion/ej2-base": "~33.2.3",
-    "@syncfusion/ej2-buttons": "~33.2.5",
-    "@syncfusion/ej2-inputs": "~33.2.12",
+    "@syncfusion/ej2-buttons": "~33.2.15",
+    "@syncfusion/ej2-inputs": "~33.2.15",
     "@syncfusion/ej2-lists": "~33.2.3",
     "@syncfusion/ej2-popups": "~33.2.7"
   },

package/src/calendar/calendar.d.ts

@@ -378,6 +378,7 @@ export declare class CalendarBase extends Component<HTMLElement> implements INot
     protected todayButtonClick(e?: MouseEvent | KeyboardEvent, value?: Date, isCustomDate?: boolean): void;
     protected resetCalendar(): void;
     protected keyActionHandle(e: KeyboardEventArgs, value?: Date, multiSelection?: boolean): void;
+    protected getPopupFocusableElements(container: HTMLElement): HTMLElement[];
     protected keyboardNavigate(number: number, currentView: number, e: KeyboardEvent, max: Date, min: Date): void;
     /**
      * Initialize the event handler

package/src/calendar/calendar.js

@@ -647,32 +647,29 @@ var CalendarBase = /** @class */ (function (_super) {
                 break;
             case 'tab':
                 if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
-                    var hasToday = this.showTodayButton && !isNullOrUndefined(this.todayElement);
-                    var isLastFocusable = hasToday
-                        ? (e.target === this.todayElement)
-                        : (e.target === this.table);
-                    if (isLastFocusable) {
-                        e.preventDefault();
-                        if (this.isAngular) {
-                            this.inputElement.focus();
-                        }
-                        else {
-                            this.element.focus();
+                    var popupEl = this.popupWrapper;
+                    if (!isNullOrUndefined(popupEl)) {
+                        var focusable = this.getPopupFocusableElements(popupEl);
+                        var lastIndex = focusable.length - 1;
+                        if (focusable.length > 0 && e.target === focusable[lastIndex]) {
+                            e.preventDefault();
+                            focusable[0].focus();
+                            // popup stays open — no hide() call
                         }
-                        this.hide();
                     }
                 }
                 break;
             case 'shiftTab':
-                if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && e.target === this.headerTitleElement) {
-                    e.preventDefault();
-                    if (this.isAngular) {
-                        this.inputElement.focus();
-                    }
-                    else {
-                        this.element.focus();
+                if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
+                    var popupEl = this.popupWrapper;
+                    if (!isNullOrUndefined(popupEl)) {
+                        var focusable = this.getPopupFocusableElements(popupEl);
+                        if (focusable.length > 0 && e.target === focusable[0]) {
+                            e.preventDefault();
+                            focusable[focusable.length - 1].focus();
+                            // popup stays open — no hide() call
+                        }
                     }
-                    this.hide();
                 }
                 break;
             case 'escape':
@@ -682,6 +679,15 @@ var CalendarBase = /** @class */ (function (_super) {
                 break;
         }
     };
+    CalendarBase.prototype.getPopupFocusableElements = function (container) {
+        var selector = [
+            'button:not([disabled]):not([tabindex="-1"])',
+            'td[tabindex="0"]:not([aria-disabled="true"])',
+            '[tabindex="0"]:not([disabled])'
+        ].join(', ');
+        return Array.from(container.querySelectorAll(selector))
+            .filter(function (el) { return !isNullOrUndefined(el.offsetParent); });
+    };
     CalendarBase.prototype.keyboardNavigate = function (number, currentView, e, max, min) {
         var date = new Date(this.checkValue(this.currentDate));
         switch (currentView) {