@syncfusion/ej2-calendars 22.1.36 → 22.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.36
+*  version : 22.2.5
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-calendars@*",
-  "_id": "@syncfusion/ej2-calendars@21.1.36",
+  "_id": "@syncfusion/ej2-calendars@22.1.38",
   "_inBundle": false,
-  "_integrity": "sha512-w+YPV4yDyd71W7cM8Ctt3RetN8aTlNhAnZ0LXcRxbLQHKsS3jh4mZMP9iwyzBG/I6KJHmZJERH8uM0n3JTbPxA==",
+  "_integrity": "sha512-zGy7hUky1kYnX3fOahA6MOBfS96CdcaEem4xQU04J9I9B4JGWig57/FbJM7d+fD82ziwCZHMUKEoWgfx/gBIZA==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -32,8 +32,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-21.1.36.tgz",
-  "_shasum": "86ab91640ba05d4992bbb37df7413ac9e23fa877",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-22.1.38.tgz",
+  "_shasum": "7d3e377422163ae2c15fdb2aa167c94fd9ed7005",
   "_spec": "@syncfusion/ej2-calendars@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -44,11 +44,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.1.34",
-    "@syncfusion/ej2-buttons": "~21.1.36",
-    "@syncfusion/ej2-inputs": "~22.1.34",
-    "@syncfusion/ej2-lists": "~22.1.34",
-    "@syncfusion/ej2-popups": "~22.1.36"
+    "@syncfusion/ej2-base": "~22.2.5",
+    "@syncfusion/ej2-buttons": "~22.2.5",
+    "@syncfusion/ej2-inputs": "~22.2.5",
+    "@syncfusion/ej2-lists": "~22.2.5",
+    "@syncfusion/ej2-popups": "~22.2.5"
   },
   "deprecated": false,
   "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.",
@@ -81,6 +81,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "22.1.36",
+  "version": "22.2.5",
   "sideEffects": false
 }

package/src/datepicker/datepicker.js

@@ -184,7 +184,7 @@ var DatePicker = /** @class */ (function (_super) {
             this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
         }
         if (this.fullScreenMode && Browser.isDevice) {
-            this.cssClass = "e-popup-expand";
+            this.cssClass += ' ' + "e-popup-expand";
         }
         var updatedCssClassValues = this.cssClass;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
@@ -1303,6 +1303,7 @@ var DatePicker = /** @class */ (function (_super) {
                     addClass(_this.inputWrapper.buttons, ACTIVE);
                     _this.preventArgs.appendTo.appendChild(_this.popupWrapper);
                     _this.popupObj.refreshPosition(_this.inputElement);
+                    var popupLeft = parseFloat(_this.popupWrapper.style.left) - (_this.popupWrapper.offsetWidth - _this.inputWrapper.container.offsetWidth);
                     var openAnimation = {
                         name: 'FadeIn',
                         duration: Browser.isDevice ? 0 : OPENDURATION
@@ -1316,6 +1317,9 @@ var DatePicker = /** @class */ (function (_super) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     _super.prototype.setOverlayIndex.call(_this, _this.mobilePopupWrapper, _this.popupObj.element, _this.modal, Browser.isDevice);
                     _this.setAriaAttributes();
+                    if (_this.enableRtl && popupLeft > 0) {
+                        _this.popupWrapper.style.left = popupLeft + "px";
+                    }
                 }
                 else {
                     _this.popupObj.destroy();

package/src/daterangepicker/daterangepicker.js

@@ -3031,6 +3031,10 @@ var DateRangePicker = /** @class */ (function (_super) {
                 else {
                     _this.inputElement.removeAttribute('aria-activedescendant');
                 }
+                if (_this.enableRtl) {
+                    var popupLeft = parseFloat(_this.popupWrapper.style.left) - (_this.popupWrapper.offsetWidth - _this.inputWrapper.container.offsetWidth);
+                    _this.popupWrapper.style.left = popupLeft > 0 ? popupLeft + "px" : _this.popupWrapper.style.left;
+                }
                 addClass([_this.inputWrapper.buttons[0]], ACTIVE);
                 if (!_this.isMobile) {
                     if (_this.cancelButton) {
@@ -3407,7 +3411,7 @@ var DateRangePicker = /** @class */ (function (_super) {
     };
     DateRangePicker.prototype.createInput = function () {
         if (this.fullScreenMode && this.isMobile) {
-            this.cssClass = "e-popup-expand";
+            this.cssClass += ' ' + "e-popup-expand";
         }
         var updatedCssClassValue = this.cssClass;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {

package/src/timepicker/timepicker.js

@@ -330,7 +330,7 @@ var TimePicker = /** @class */ (function (_super) {
     };
     TimePicker.prototype.createInputElement = function () {
         if (this.fullScreenMode && Browser.isDevice) {
-            this.cssClass = "e-popup-expand";
+            this.cssClass += ' ' + "e-popup-expand";
         }
         var updatedCssClassesValue = this.cssClass;
         var isBindClearAction = this.enableMask ? false : true;

package/styles/calendar/_fabric-dark-definition.scss

@@ -92,7 +92,7 @@ $calendar-title-font-weight-style: 300 !default;
 $calendar-yeardecade-hover-color: $neutral-light-fontalt !default;
 $calendar-spanicon-font-weight-style: 300 !default;
 $calendar-title-margin-left-style: 7px !default;
-$calendar-normal-year-decade-padding: 0 0 10px 0 !default;
+$calendar-normal-year-decade-padding: 5px !default;
 $calendar-icon-font-size-style: 14px !default;
 $calendar-link-font-weight-style: 500 !default;
 $calendar-focused-date-bg-style: $neutral-quintenaryalt !default;

package/styles/calendar/_fabric-definition.scss

@@ -88,7 +88,7 @@ $calendar-title-font-weight-style: 300 !default;
 $calendar-yeardecade-hover-color: $neutral-tertiary-alt !default;
 $calendar-spanicon-font-weight-style: 300 !default;
 $calendar-title-margin-left-style: 7px !default;
-$calendar-normal-year-decade-padding: 0 0 10px 0 !default;
+$calendar-normal-year-decade-padding: 5px !default;
 $calendar-icon-font-size-style: 14px !default;
 $calendar-link-font-weight-style: 500 !default;
 $calendar-focused-date-bg-style: $neutral-quintenaryalt !default;

package/styles/calendar/_highcontrast-definition.scss

@@ -86,7 +86,7 @@ $calendar-yeardecade-bg-color: $bg-base-0 !default;
 $calendar-yeardecade-hover-color: $hover-font !default;
 $calendar-spanicon-font-weight-style: 300 !default;
 $calendar-title-margin-left-style: 7px !default;
-$calendar-normal-year-decade-padding: 0 0 10px 0 !default;
+$calendar-normal-year-decade-padding: 5px !default;
 $calendar-icon-font-size-style: 14px !default;
 $calendar-link-font-weight-style: 500 !default;
 $calendar-focused-date-bg-style: $bg-base-0 !default;

package/styles/calendar/_highcontrast-light-definition.scss

@@ -86,7 +86,7 @@ $calendar-yeardecade-bg-color: $bg-base-0 !default;
 $calendar-yeardecade-hover-color: $hover-font !default;
 $calendar-spanicon-font-weight-style: 300 !default;
 $calendar-title-margin-left-style: 7px !default;
-$calendar-normal-year-decade-padding: 0 0 10px 0 !default;
+$calendar-normal-year-decade-padding: 5px !default;
 $calendar-icon-font-size-style: 14px !default;
 $calendar-link-font-weight-style: 500 !default;
 $calendar-focused-date-bg-style: $bg-base-0 !default;

package/styles/calendar/fabric-dark.css

@@ -335,7 +335,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-year td,
 .e-bigger.e-small .e-calendar .e-content.e-decade td {
   height: 45px;
-  padding: 0 0 10px 0;
+  padding: 5px;
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,

package/styles/calendar/fabric.css

@@ -336,7 +336,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-year td,
 .e-bigger.e-small .e-calendar .e-content.e-decade td {
   height: 45px;
-  padding: 0 0 10px 0;
+  padding: 5px;
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,

package/styles/calendar/highcontrast-light.css

@@ -326,7 +326,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-year td,
 .e-bigger.e-small .e-calendar .e-content.e-decade td {
   height: 45px;
-  padding: 0 0 10px 0;
+  padding: 5px;
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,

package/styles/calendar/highcontrast.css

@@ -336,7 +336,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-year td,
 .e-bigger.e-small .e-calendar .e-content.e-decade td {
   height: 45px;
-  padding: 0 0 10px 0;
+  padding: 5px;
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,

package/styles/daterangepicker/_highcontrast-definition.scss

@@ -124,7 +124,7 @@ $range-header-btn-max-width: 116px !default;
 $range-header-btn-bigger-max-width: 132px !default;
 $range-presets-width: 160px !default;
 $range-hover-start-radius: 50% 0 0 50% !default;
-$range-hover-end-radius: 0 !default;
+$range-hover-end-radius: 0 50% 50% 0 !default;
 $range-text-overflow: ellipsis !default;
 $range-icon-hover-color: $hover-bg !default;
 $range-icon-border-radius: 0 !default;

package/styles/daterangepicker/_highcontrast-light-definition.scss

@@ -126,7 +126,7 @@ $range-header-btn-max-width: 116px !default;
 $range-header-btn-bigger-max-width: 132px !default;
 $range-presets-width: 160px !default;
 $range-hover-start-radius: 50% 0 0 50% !default;
-$range-hover-end-radius: 0 !default;
+$range-hover-end-radius: 0 50% 50% 0 !default;
 $range-text-overflow: ellipsis !default;
 $range-icon-hover-color: $hover-bg !default;
 $range-icon-border-radius: 0 !default;

package/styles/daterangepicker/highcontrast-light.css

@@ -209,7 +209,7 @@
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 0;
+  border-radius: 0 50% 50% 0;
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day, .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
@@ -323,7 +323,7 @@
 }
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover {
-  border-radius: 0;
+  border-radius: 0 50% 50% 0;
 }
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover {

package/styles/daterangepicker/highcontrast.css

@@ -210,7 +210,7 @@
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 0;
+  border-radius: 0 50% 50% 0;
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day, .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
@@ -324,7 +324,7 @@
 }
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover {
-  border-radius: 0;
+  border-radius: 0 50% 50% 0;
 }
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover {

package/styles/fabric-dark.css

@@ -335,7 +335,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-year td,
 .e-bigger.e-small .e-calendar .e-content.e-decade td {
   height: 45px;
-  padding: 0 0 10px 0;
+  padding: 5px;
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,

package/styles/fabric.css

@@ -336,7 +336,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-year td,
 .e-bigger.e-small .e-calendar .e-content.e-decade td {
   height: 45px;
-  padding: 0 0 10px 0;
+  padding: 5px;
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,

package/styles/highcontrast-light.css

@@ -326,7 +326,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-year td,
 .e-bigger.e-small .e-calendar .e-content.e-decade td {
   height: 45px;
-  padding: 0 0 10px 0;
+  padding: 5px;
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,
@@ -1753,7 +1753,7 @@ ejs-calendar {
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 0;
+  border-radius: 0 50% 50% 0;
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day, .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
@@ -1867,7 +1867,7 @@ ejs-calendar {
 }
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover {
-  border-radius: 0;
+  border-radius: 0 50% 50% 0;
 }
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover {

package/styles/highcontrast.css

@@ -336,7 +336,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-year td,
 .e-bigger.e-small .e-calendar .e-content.e-decade td {
   height: 45px;
-  padding: 0 0 10px 0;
+  padding: 5px;
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,
@@ -1765,7 +1765,7 @@ ejs-calendar {
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 0;
+  border-radius: 0 50% 50% 0;
 }
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day, .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
@@ -1879,7 +1879,7 @@ ejs-calendar {
 }
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover {
-  border-radius: 0;
+  border-radius: 0 50% 50% 0;
 }
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover {