@syncfusion/ej2-calendars 22.1.34 → 22.1.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.34
+*  version : 22.1.38
 *  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@18.30.17",
+  "_id": "@syncfusion/ej2-calendars@22.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-SnX9BTY2Swgg/KkCKCkXT2ceYIuvP7eWTB6qkKufoQODUbpGQ1FCQ39RddN5bgUgTHR7mmOR/Zr0qFONHkAFWQ==",
+  "_integrity": "sha512-NphnXaKHyjDrkhuaq3/Lj2IJu2EkG2hOZUr5ZAYfXfD9CVLz1Y5WAPWYbrFr3xtZ34g5rR1AEUDGez/FfoEHoA==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -32,8 +32,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-calendars/-/ej2-calendars-18.30.17.tgz",
-  "_shasum": "bd1deeac1a021cf0417ca1a889cb9a2f4f485ec9",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-22.1.36.tgz",
+  "_shasum": "2f92d389800d0869cae1b7a72032052b4976f2f7",
   "_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": "~22.1.34",
-    "@syncfusion/ej2-inputs": "~22.1.34",
+    "@syncfusion/ej2-base": "~22.1.38",
+    "@syncfusion/ej2-buttons": "~22.1.38",
+    "@syncfusion/ej2-inputs": "~22.1.38",
     "@syncfusion/ej2-lists": "~22.1.34",
-    "@syncfusion/ej2-popups": "~22.1.34"
+    "@syncfusion/ej2-popups": "~22.1.38"
   },
   "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.34",
+  "version": "22.1.38",
   "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 !== '') {
@@ -871,11 +871,13 @@ var DatePicker = /** @class */ (function (_super) {
     };
     DatePicker.prototype.strictModeUpdate = function () {
         var format;
+        var pattern = /^y/;
+        var charPattern = /[^a-zA-Z]/;
         var formatOptions;
         if (this.getModuleName() === 'datetimepicker') {
             format = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;
         }
-        else {
+        else if (!pattern.test(this.formatString) || charPattern.test(this.formatString)) {
             format = isNullOrUndefined(this.formatString) ? this.formatString : this.formatString.replace('dd', 'd');
         }
         if (!isNullOrUndefined(format)) {
@@ -884,6 +886,9 @@ var DatePicker = /** @class */ (function (_super) {
                 format = format.replace('MM', 'M');
             }
         }
+        else {
+            format = this.formatString;
+        }
         var dateOptions;
         if (this.getModuleName() === 'datetimepicker') {
             if (this.calendarMode === 'Gregorian') {
@@ -1298,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
@@ -1311,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/bootstrap-dark.css

@@ -2218,25 +2218,6 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-    height: 60px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-start-btn, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-end-btn {
-    max-width: 280px;
-    height: 60px;
-    font-size: 18px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
   min-width: 100%;
   width: 100%;
@@ -2470,11 +2451,6 @@ ejs-calendar {
     height: 38px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
     margin: 5vh 0 0 0;
@@ -2486,12 +2462,6 @@ ejs-calendar {
     font-size: 20px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
     min-height: 75vh;

package/styles/bootstrap.css

@@ -2226,25 +2226,6 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-    height: 60px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-start-btn, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-end-btn {
-    max-width: 280px;
-    height: 60px;
-    font-size: 18px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
   min-width: 100%;
   width: 100%;
@@ -2478,11 +2459,6 @@ ejs-calendar {
     height: 38px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
     margin: 5vh 0 0 0;
@@ -2494,12 +2470,6 @@ ejs-calendar {
     font-size: 20px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
     min-height: 75vh;

package/styles/bootstrap4.css

@@ -2249,25 +2249,6 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-    height: 60px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-start-btn, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-end-btn {
-    max-width: 280px;
-    height: 60px;
-    font-size: 18px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
   min-width: 100%;
   width: 100%;
@@ -2501,11 +2482,6 @@ ejs-calendar {
     height: 38px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
     margin: 5vh 0 0 0;
@@ -2517,12 +2493,6 @@ ejs-calendar {
     font-size: 20px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
     min-height: 75vh;

package/styles/bootstrap5-dark.css

@@ -2318,25 +2318,6 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-    height: 60px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-start-btn, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-end-btn {
-    max-width: 280px;
-    height: 60px;
-    font-size: 18px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
   min-width: 100%;
   width: 100%;
@@ -2570,11 +2551,6 @@ ejs-calendar {
     height: 38px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
     margin: 5vh 0 0 0;
@@ -2586,12 +2562,6 @@ ejs-calendar {
     font-size: 20px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
     min-height: 75vh;

package/styles/bootstrap5.css

@@ -2318,25 +2318,6 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-    height: 60px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-start-btn, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-end-btn {
-    max-width: 280px;
-    height: 60px;
-    font-size: 18px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
   min-width: 100%;
   width: 100%;
@@ -2570,11 +2551,6 @@ ejs-calendar {
     height: 38px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
     margin: 5vh 0 0 0;
@@ -2586,12 +2562,6 @@ ejs-calendar {
     font-size: 20px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
     min-height: 75vh;

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/_layout.scss

@@ -688,26 +688,6 @@
 
               #{if(&, '&', '*')} .e-start-end {
                 margin: $modal-range-start-end-margin;
-                @media (min-device-width: 768px) {
-                  margin: 4vh 0 0 0;
-                  height: 60px;
-                }
-
-                #{if(&, '&', '*')} .e-start-btn,
-                #{if(&, '&', '*')} .e-end-btn {
-                  @media (min-device-width: 768px) {
-                    max-width: 280px;
-                    height: 60px;
-                    font-size: 18px;
-                  }
-                }
-              }
-
-              #{if(&, '&', '*')} .e-day-span {
-                @media (min-device-width: 768px) {
-                  margin: 10px 0;
-                  font-size: 24px;
-                }
               }
             }
             #{if(&, '&', '*')} .e-calendar {
@@ -967,10 +947,6 @@
             margin: $modal-range-calendar-padding;
             height: $modal-range-start-end-size;
 
-            @media (min-device-width: 768px) {
-              margin: 4vh 0 0 0;
-            }
-
             @media (min-height: 600px) {
               margin: $modal-range-start-end-tablet-margin;
             }
@@ -979,10 +955,6 @@
           #{if(&, '&', '*')} .e-day-span {
             margin: 5px 0;
             font-size: 20px;
-            @media (min-device-width: 768px) {
-              margin: 10px 0;
-              font-size: 24px;
-            }
           }
           
         }            

package/styles/daterangepicker/_material3-definition.scss

@@ -164,7 +164,7 @@ $range-presets-bg-color: $transparent !default;
 $range-presets-bg-active-color: rgba($content-bg-color-selected) !default;
 $range-presets-font-color: rgba($content-text-color) !default;
 $range-calendar-normal-table-padding: 0 10px 10px !default;
-$range-calendar-bigger-table-padding: 0 15px 15px !default;
+$range-calendar-bigger-table-padding: 0 12px 12px !default;
 $range-popup-border-radius: 8px !default;
 $range-list-border-radius: 0 !default;
 $range-presets-hover-bg: $flyout-bg-color-pressed !default;

package/styles/daterangepicker/bootstrap-dark.css

@@ -681,25 +681,6 @@
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-    height: 60px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-start-btn, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-end-btn {
-    max-width: 280px;
-    height: 60px;
-    font-size: 18px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
   min-width: 100%;
   width: 100%;
@@ -933,11 +914,6 @@
     height: 38px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
     margin: 5vh 0 0 0;
@@ -949,12 +925,6 @@
     font-size: 20px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
     min-height: 75vh;

package/styles/daterangepicker/bootstrap.css

@@ -687,25 +687,6 @@
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-    height: 60px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-start-btn, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end .e-end-btn {
-    max-width: 280px;
-    height: 60px;
-    font-size: 18px;
-  }
-}
-@media (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
   min-width: 100%;
   width: 100%;
@@ -939,11 +920,6 @@
     height: 38px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
-    margin: 4vh 0 0 0;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
     margin: 5vh 0 0 0;
@@ -955,12 +931,6 @@
     font-size: 20px;
   }
 }
-@media screen and (orientation: landscape) and (min-device-width: 768px) {
-  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
-    margin: 10px 0;
-    font-size: 24px;
-  }
-}
 @media screen and (orientation: landscape) and (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
     min-height: 75vh;