@syncfusion/ej2-calendars 20.2.50 → 20.3.48

package/styles/calendar/icons/_highcontrast.scss

@@ -1,9 +1,10 @@
 @include export-module('calendar-highcontrast-icons') {
+
   /*! component icons */
   .e-calendar .e-header {
     #{if(&, '&', '*')} .e-date-icon-prev::before {
       content: '\e85e';
-      }
+    }
 
     #{if(&, '&', '*')} .e-date-icon-next::before {
       content: '\e84f';

package/styles/calendar/icons/_material-dark.scss

@@ -1,9 +1,10 @@
 @include export-module('calendar-material-icons') {
+
   /*! component icons */
   .e-calendar .e-header {
     #{if(&, '&', '*')} .e-date-icon-prev::before {
       content: '\e910';
-      }
+    }
 
     #{if(&, '&', '*')} .e-date-icon-next::before {
       content: '\e916';

package/styles/calendar/icons/_material.scss

@@ -1,9 +1,10 @@
 @include export-module('calendar-material-icons') {
+
   /*! component icons */
   .e-calendar .e-header {
     #{if(&, '&', '*')} .e-date-icon-prev::before {
       content: '\e910';
-      }
+    }
 
     #{if(&, '&', '*')} .e-date-icon-next::before {
       content: '\e916';

package/styles/calendar/icons/_material3.scss

@@ -1,9 +1,10 @@
 @include export-module('calendar-material3-icons') {
+
   /*! component icons */
   .e-calendar .e-header {
     #{if(&, '&', '*')} .e-date-icon-prev::before {
       content: '\e776';
-      }
+    }
 
     #{if(&, '&', '*')} .e-date-icon-next::before {
       content: '\e729';

package/styles/calendar/icons/_tailwind.scss

@@ -1,9 +1,10 @@
 @include export-module('calendar-tailwind-icons') {
+
   /*! component icons */
   .e-calendar .e-header {
     #{if(&, '&', '*')} .e-date-icon-prev::before {
       content: '\e776';
-      }
+    }
 
     #{if(&, '&', '*')} .e-date-icon-next::before {
       content: '\e729';

package/styles/calendar/material-dark.css

@@ -37,6 +37,7 @@ ejs-calendar {
 
 .e-calendar,
 .e-bigger.e-small .e-calendar {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   border-radius: 2px;
   display: block;

package/styles/calendar/material.css

@@ -38,6 +38,7 @@ ejs-calendar {
 
 .e-calendar,
 .e-bigger.e-small .e-calendar {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   border-radius: 2px;
   display: block;

package/styles/calendar/tailwind-dark.css

@@ -38,6 +38,7 @@ ejs-calendar {
 
 .e-calendar,
 .e-bigger.e-small .e-calendar {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   border-radius: 4px;
   display: block;
@@ -885,6 +886,7 @@ ejs-calendar {
 }
 .e-calendar .e-footer-container .e-btn.e-today.e-flat.e-primary:not(:hover),
 .e-bigger.e-small .e-calendar .e-footer-container .e-btn.e-today.e-flat.e-primary:not(:hover) {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #22d3ee;
   border-color: #22d3ee;

package/styles/calendar/tailwind.css

@@ -38,6 +38,7 @@ ejs-calendar {
 
 .e-calendar,
 .e-bigger.e-small .e-calendar {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   border-radius: 4px;
   display: block;
@@ -885,6 +886,7 @@ ejs-calendar {
 }
 .e-calendar .e-footer-container .e-btn.e-today.e-flat.e-primary:not(:hover),
 .e-bigger.e-small .e-calendar .e-footer-container .e-btn.e-today.e-flat.e-primary:not(:hover) {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #4f46e5;
   border-color: #4f46e5;

package/styles/datepicker/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
+@import 'layout.scss';
 @import 'theme.scss';

package/styles/datepicker/_bootstrap-dark-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $datepicker-icon-color: none !default;
 $datepicker-active-icon-color: $datepicker-icon-color !default;
 $datepicker-popup-box-shadow: 0 6px 12px rgba($base-font, .5) !default;
@@ -21,8 +21,10 @@ $datepicker-modal-header-bg: transparent !default;
 $datepicker-modal-header-color: transparent !default;
 $datepicker-modal-header-display: none !default;
 $datepicker-calendar-tbody-landscape-height: 150px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 14px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 18px !default;
 $model-year-font-size: 14px !default;
@@ -31,4 +33,5 @@ $model-year-line-height: 32px !default;
 $model-month-font-size: 20px !default;
 $model-month-font-weight: 500 !default;
 $model-month-line-height: 32px !default;
+
 //enddefault

package/styles/datepicker/_bootstrap-definition.scss

@@ -20,8 +20,10 @@ $datepicker-modal-header-bg: transparent !default;
 $datepicker-modal-header-color: transparent !default;
 $datepicker-modal-header-display: none !default;
 $datepicker-calendar-tbody-landscape-height: 150px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 14px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 18px !default;
 $model-year-font-size: 14px !default;

package/styles/datepicker/_bootstrap4-definition.scss

@@ -26,8 +26,10 @@ $datepicker-modal-header-bg: transparent !default;
 $datepicker-modal-header-color: transparent !default;
 $datepicker-modal-header-display: none !default;
 $datepicker-calendar-tbody-landscape-height: 150px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 12px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 15px !default;
 $model-year-font-size: 14px !default;

package/styles/datepicker/_bootstrap5-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $datepicker-icon: '\e901' !default;
 $datepicker-icon-font-size: 18px !default;
 $datepicker-icon-container-min-height: 18px !default;
@@ -14,10 +14,13 @@ $datepicker-box-sizing: border-box !default;
 $datepicker-modal-header-display: block !default;
 $datepicker-calendar-tbody-landscape-height: 130px !default;
 $datepicker-popup-bigger-margin-top: 8px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 16px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 20px !default;
+
 // color variables
 $datepicker-popup-border: 1px solid $border-light !default;
 $datepicker-input-border-style: none !default;
@@ -39,4 +42,5 @@ $model-year-line-height: 32px !default;
 $model-month-font-size: 20px !default;
 $model-month-font-weight: 500 !default;
 $model-month-line-height: 32px !default;
+
 //enddefault

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

@@ -21,8 +21,10 @@ $datepicker-modal-header-bg: $theme-primary !default;
 $datepicker-modal-header-color: $neutral-white !default;
 $datepicker-modal-header-display: none !default;
 $datepicker-calendar-tbody-landscape-height: 150px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 14px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 18px !default;
 $model-year-font-size: 14px !default;
@@ -31,4 +33,5 @@ $model-year-line-height: 32px !default;
 $model-month-font-size: 20px !default;
 $model-month-font-weight: 500 !default;
 $model-month-line-height: 32px !default;
+
 //enddefault

package/styles/datepicker/_fabric-definition.scss

@@ -20,8 +20,10 @@ $datepicker-modal-header-bg: $theme-primary !default;
 $datepicker-modal-header-color: $neutral-white !default;
 $datepicker-modal-header-display: none !default;
 $datepicker-calendar-tbody-landscape-height: 150px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 14px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 18px !default;
 $model-year-font-size: 14px !default;

package/styles/datepicker/_fluent-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $datepicker-icon: '\e901' !default;
 $datepicker-icon-font-size: 18px !default;
 $datepicker-icon-container-min-height: 18px !default;
@@ -14,10 +14,13 @@ $datepicker-box-sizing: border-box !default;
 $datepicker-modal-header-display: block !default;
 $datepicker-calendar-tbody-landscape-height: 130px !default;
 $datepicker-popup-bigger-margin-top: 8px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 16px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 20px !default;
+
 // color variables
 $datepicker-popup-border: 0 solid $border-light !default;
 $datepicker-input-border-style: none !default;

package/styles/datepicker/_fusionnew-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $datepicker-icon: '\e901' !default;
 $datepicker-icon-font-size: 18px !default;
 $datepicker-icon-container-min-height: 18px !default;
@@ -14,10 +14,13 @@ $datepicker-box-sizing: border-box !default;
 $datepicker-modal-header-display: block !default;
 $datepicker-calendar-tbody-landscape-height: 130px !default;
 $datepicker-popup-bigger-margin-top: 8px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 16px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 20px !default;
+
 // color variables
 $datepicker-popup-border: 1px solid $border-light !default;
 $datepicker-input-border-style: none !default;
@@ -39,4 +42,5 @@ $model-year-line-height: 32px !default;
 $model-month-font-size: 20px !default;
 $model-month-font-weight: 500 !default;
 $model-month-line-height: 32px !default;
+
 //enddefault

package/styles/datepicker/_highcontrast-definition.scss

@@ -21,8 +21,10 @@ $datepicker-modal-header-bg: $header-font !default;
 $datepicker-modal-header-color: $header-font-alt !default;
 $datepicker-modal-header-display: none !default;
 $datepicker-calendar-tbody-landscape-height: 150px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 14px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 18px !default;
 $model-year-font-size: 14px !default;

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

@@ -1,4 +1,4 @@
-//default 
+//default
 $datepicker-icon-color: $content-font !default;
 $datepicker-active-icon-color: $content-font !default;
 $datepicker-popup-box-shadow: none !default;
@@ -22,8 +22,10 @@ $datepicker-modal-header-bg: $header-font !default;
 $datepicker-modal-header-color: $header-font-alt !default;
 $datepicker-modal-header-display: none !default;
 $datepicker-calendar-tbody-landscape-height: 150px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 14px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 18px !default;
 $model-year-font-size: 14px !default;
@@ -32,4 +34,5 @@ $model-year-line-height: 32px !default;
 $model-month-font-size: 20px !default;
 $model-month-font-weight: 500 !default;
 $model-month-line-height: 32px !default;
+
 //enddefault

package/styles/datepicker/_layout.scss

@@ -27,7 +27,7 @@
 
       #{if(&, '&', '*')} .e-content table tbody tr.e-month-hide:last-child {
         display: $datepicker-othermonth-row;
-	}
+      }
     }
 
     #{if(&, '&', '*')}.e-popup-wrapper {
@@ -46,7 +46,7 @@
       top: 0;
       width: 100%;
       z-index: 999;
-	}
+    }
 
     #{if(&, '&', '*')} .e-model-header {
       background-color: $datepicker-modal-header-bg;
@@ -60,8 +60,8 @@
         font-weight: $model-year-font-weight;
         line-height: $model-year-line-height;
         margin: 0;
+      }
     }
-}
 
     #{if(&, '&', '*')} .e-model-month,
     #{if(&, '&', '*')} .e-model-day {
@@ -70,10 +70,10 @@
       line-height: $model-month-line-height;
       margin: 0;
     }
-}
+  }
 }
 
-// sass-lint:disable-all
+/* stylelint-disable */
 .e-date-overflow {
   overflow: hidden !important;
 }
@@ -98,8 +98,10 @@
   }
 
   .e-datepicker.e-popup-wrapper.e-popup-expand.e-lib.e-popup.e-control.e-popup-open {
+    @if $skin-name == 'material' {
     min-width: 100%;
     min-height:100%;
+    }
   }
 
 }
@@ -115,14 +117,15 @@
   min-height: 40px;
 }
 
+
 .e-datepick-mob-popup-wrap {
 
+  @if $skin-name == 'material' {
   
   #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
 
     #{if(&, '&', '*')} .e-model-header {
-
-      height:15%;
+      height: 15%;
 
       #{if(&, '&', '*')} .e-popup-close {
         float: right;
@@ -131,9 +134,9 @@
       }
 
       #{if(&, '&', '*')} .e-popup-close::before {
-        content: "\e932";
-        font-family: "e-icons";
-        color: rgba(255,255,255);
+        content: '\e932';
+        font-family: 'e-icons';
+        color: rgba(0, 0, 0, 0.54);
       }
     }
 
@@ -141,6 +144,10 @@
       min-width: 100%;
       min-height:100%;
       height:100%;
+
+      th{
+        font-size: 9px;
+      }
       
       #{if(&, '&', '*')} .e-header.e-month {
         height: 10%;
@@ -169,10 +176,7 @@
 
   }
 }
-
-
-// sass-lint:enable-all
-
+}
 
 @media screen and (orientation: landscape) and (max-height: 360px) {
 
@@ -185,7 +189,7 @@
 
 @media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap {
-
+    @if $skin-name == 'material' {
     #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
       #{if(&, '&', '*')} .e-model-header {
 
@@ -199,7 +203,7 @@
         }
 
         .e-model-year {
-          font-size: 35px;
+          font-size: 3.2vw;
           margin-top: 35%;
         }
 
@@ -208,7 +212,7 @@
       #{if(&, '&', '*')} .e-model-month ,
       #{if(&, '&', '*')} .e-model-day {
         display: block;
-        font-size: 40px;
+        font-size: 4vw;
         margin-top: 10%;
       }
 
@@ -243,4 +247,5 @@
     }
   }
 }
-
+}
+/* stylelint-enable */

package/styles/datepicker/_material-dark-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $datepicker-icon-color: $accent !default;
 $datepicker-active-icon-color: $datepicker-icon-color !default;
 $datepicker-popup-box-shadow: 0 5px 5px -3px rgba($grey-light-font, .2), 0 8px 10px 1px rgba($grey-light-font, .14), 0 3px 14px 2px rgba($grey-light-font, .12) !default;
@@ -25,8 +25,10 @@ $datepicker-modal-header-bg: $accent !default;
 $datepicker-modal-header-color: $grey-white !default;
 $datepicker-modal-header-display: block !default;
 $datepicker-calendar-tbody-landscape-height: 130px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 14px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 18px !default;
 $zero-value: 0 !default;
@@ -36,4 +38,5 @@ $model-year-line-height: 32px !default;
 $model-month-font-size: 20px !default;
 $model-month-font-weight: 500 !default;
 $model-month-line-height: 32px !default;
+
 //enddefault

package/styles/datepicker/_material-definition.scss

@@ -24,8 +24,10 @@ $datepicker-modal-header-bg: $accent !default;
 $datepicker-modal-header-color: $grey-white !default;
 $datepicker-modal-header-display: block !default;
 $datepicker-calendar-tbody-landscape-height: 130px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 14px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 18px !default;
 $zero-value: 0 !default;

package/styles/datepicker/_material3-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $datepicker-icon: '\e901' !default;
 $datepicker-icon-font-size: 18px !default;
 $datepicker-icon-container-min-height: 18px !default;
@@ -14,10 +14,13 @@ $datepicker-box-sizing: border-box !default;
 $datepicker-modal-header-display: block !default;
 $datepicker-calendar-tbody-landscape-height: 130px !default;
 $datepicker-popup-bigger-margin-top: 8px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 16px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 20px !default;
+
 // color variables
 $datepicker-popup-border: 1px solid $border-light !default;
 $datepicker-input-border-style: none !default;
@@ -39,4 +42,5 @@ $model-year-line-height: 32px !default;
 $model-month-font-size: 20px !default;
 $model-month-font-weight: 500 !default;
 $model-month-line-height: 32px !default;
+
 //enddefault

package/styles/datepicker/_tailwind-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $datepicker-icon: '\e901' !default;
 $datepicker-icon-font-size: 18px !default;
 $datepicker-icon-container-min-height: 18px !default;
@@ -14,10 +14,13 @@ $datepicker-box-sizing: border-box !default;
 $datepicker-modal-header-display: block !default;
 $datepicker-calendar-tbody-landscape-height: 130px !default;
 $datepicker-popup-bigger-margin-top: 6px !default;
+
 // mouse small icon
 $datepicker-small-icon-font-size: 16px !default;
+
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 20px !default;
+
 // color variables
 $datepicker-popup-border: 1px solid $border-light !default;
 $datepicker-input-border-style: none !default;
@@ -37,4 +40,5 @@ $model-year-line-height: 32px !default;
 $model-month-font-size: 20px !default;
 $model-month-font-weight: 500 !default;
 $model-month-line-height: 32px !default;
+
 //enddefault

package/styles/datepicker/_theme.scss

@@ -1,4 +1,4 @@
-@include export-module('datepicker-theme') {
+@include export-module('datepicker-theme') {
   #{&}.e-datepicker,
   .e-bigger.e-small #{&}.e-datepicker,
   .e-bigger #{&}.e-datepicker,
@@ -9,20 +9,19 @@
     #{if(&, '&', '*')}.e-popup-wrapper {
       border: $datepicker-popup-border;
       box-shadow: $datepicker-popup-box-shadow;
-   }
+    }
 
     #{if(&, '&', '*')} .e-calendar {
       background-color: $datepicker-popup-bg-color;
       border: $datepicker-calendar-border-style;
-   }
-
+    }
   }
 
   #{if(&, '&', '*')}.e-input-group {
     #{if(&, '&', '*')}.e-date-wrapper.e-dateinput-active:active:not(.e-success):not(.e-warning):not(.e-error) {
       border: $datepicker-input-border-style;
-	  }
-      }
+    }
+  }
 
   .e-date-wrapper {
     #{if(&, '&', '*')} span.e-input-group-icon {
@@ -30,7 +29,8 @@
         @if ($skin-name != 'bootstrap' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap-dark' and $skin-name != 'fabric' and $skin-name != 'fabric-dark') {
           color: $datepicker-icon-color;
         }
-      }#{if(&, '&', '*')}.e-date-icon.e-icons.e-active {
+      }
+      #{if(&, '&', '*')}.e-date-icon.e-icons.e-active {
         @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' {
           background: $datepicker-icon-active-bg-color;
           border-color: $datepicker-active-border-color;