@syncfusion/ej2-angular-calendars 20.2.46 → 20.2.50

package/styles/calendar/icons/_highcontrast.scss

@@ -1,10 +1,9 @@
 @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,10 +1,9 @@
 @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,10 +1,9 @@
 @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,10 +1,9 @@
 @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,10 +1,9 @@
 @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,7 +37,6 @@ 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,7 +38,6 @@ 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,7 +38,6 @@ 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;
@@ -886,7 +885,6 @@ 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,7 +38,6 @@ 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;
@@ -886,7 +885,6 @@ 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,10 +21,8 @@ $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;
@@ -33,5 +31,4 @@ $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,10 +20,8 @@ $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,10 +26,8 @@ $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,13 +14,10 @@ $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;
@@ -42,5 +39,4 @@ $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,10 +21,8 @@ $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;
@@ -33,5 +31,4 @@ $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,10 +20,8 @@ $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,13 +14,10 @@ $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,13 +14,10 @@ $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;
@@ -42,5 +39,4 @@ $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,10 +21,8 @@ $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,10 +22,8 @@ $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;
@@ -34,5 +32,4 @@ $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;
     }
-  }
+}
 }
 
-/* stylelint-disable */
+// sass-lint:disable-all
 .e-date-overflow {
   overflow: hidden !important;
 }
@@ -96,6 +96,12 @@
     top:0 !important;
     left: 0 !important;
   }
+
+  .e-datepicker.e-popup-wrapper.e-popup-expand.e-lib.e-popup.e-control.e-popup-open {
+    min-width: 100%;
+    min-height:100%;
+  }
+
 }
 
 .e-content-placeholder.e-datepicker.e-placeholder-datepicker {
@@ -109,7 +115,64 @@
   min-height: 40px;
 }
 
-/* stylelint-enable */
+.e-datepick-mob-popup-wrap {
+
+  
+  #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+
+    #{if(&, '&', '*')} .e-model-header {
+
+      height:15%;
+
+      #{if(&, '&', '*')} .e-popup-close {
+        float: right;
+        margin-right: 10px;
+        padding: 5px;
+      }
+
+      #{if(&, '&', '*')} .e-popup-close::before {
+        content: "\e932";
+        font-family: "e-icons";
+        color: rgba(255,255,255);
+      }
+    }
+
+    #{if(&, '&', '*')} .e-calendar {
+      min-width: 100%;
+      min-height:100%;
+      height:100%;
+      
+      #{if(&, '&', '*')} .e-header.e-month {
+        height: 10%;
+      }
+
+    }
+
+  #{if(&, '&', '*')} .e-calendar-cell-container {
+    height:85%;
+  }
+
+  .e-footer-container
+  {
+    height: 10%;
+  }
+
+  #{if(&, '&', '*')} .e-content.e-month
+  {
+    height: 80%;
+    table
+    {
+    height:100%;
+    }
+
+  }
+
+  }
+}
+
+
+// sass-lint:enable-all
+
 
 @media screen and (orientation: landscape) and (max-height: 360px) {
 
@@ -119,3 +182,65 @@
     overflow: auto;
   }
 }
+
+@media screen and (orientation: landscape) {
+  .e-datepick-mob-popup-wrap {
+
+    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+      #{if(&, '&', '*')} .e-model-header {
+
+        float: left;
+        height: 100%;
+        width: 30%;
+
+        .e-popup-close {
+          float: left;
+          padding: 5px;
+        }
+
+        .e-model-year {
+          font-size: 35px;
+          margin-top: 35%;
+        }
+
+      }
+
+      #{if(&, '&', '*')} .e-model-month ,
+      #{if(&, '&', '*')} .e-model-day {
+        display: block;
+        font-size: 40px;
+        margin-top: 10%;
+      }
+
+      #{if(&, '&', '*')} .e-header.e-month ,
+      #{if(&, '&', '*')} .e-footer-container {
+        height: 10%;
+      }
+
+      .e-content.e-month {
+        height: 75%;
+      }
+
+      .e-calendar {
+        display: flex;
+      }
+
+      .e-calendar-cell-container {
+        float: right;
+        height: 90%;
+        width: 70%;
+      }
+
+      .e-calendar.e-device .e-month table tbody {
+        display: table-row-group;
+      }
+
+      #{if(&, '&', '*')} .e-content.e-month table ,
+      #{if(&, '&', '*')} .e-content.e-decade table ,
+      #{if(&, '&', '*')} .e-content.e-year table {
+        height: 100%;
+      }
+    }
+  }
+}
+

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,10 +25,8 @@ $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;
@@ -38,5 +36,4 @@ $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,10 +24,8 @@ $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,13 +14,10 @@ $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;
@@ -42,5 +39,4 @@ $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,13 +14,10 @@ $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;
@@ -40,5 +37,4 @@ $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,19 +9,20 @@
     #{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 {
@@ -29,8 +30,7 @@
         @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;