@syncfusion/ej2-calendars 32.1.23 → 32.1.25

package/styles/fluent2.scss

@@ -2,23 +2,23 @@
 @use 'ej2-buttons/styles/button/fluent2-definition' as *;
 @use 'calendar/fluent2-definition' as *;
 @use 'calendar/icons/fluent2' as *;
-@use 'calendar/all' as *;
-@use 'calendar/bigger' as *;
+@use 'calendar/all.fluent2' as *;
+@use 'calendar/bigger.fluent2' as *;
 @use 'ej2-inputs/styles/input/fluent2-definition' as *;
 @use 'ej2-popups/styles/popup/fluent2-definition' as *;
 @use 'timepicker/fluent2-definition' as *;
 @use 'timepicker/icons/fluent2' as *;
-@use 'timepicker/all' as *;
-@use 'timepicker/bigger' as *;
+@use 'timepicker/all.fluent2' as *;
+@use 'timepicker/bigger.fluent2' as *;
 @use 'datepicker/fluent2-definition' as *;
 @use 'datepicker/icons/fluent2' as *;
-@use 'datepicker/all' as *;
-@use 'datepicker/bigger' as *;
+@use 'datepicker/all.fluent2' as *;
+@use 'datepicker/bigger.fluent2' as *;
 @use 'daterangepicker/fluent2-definition' as *;
 @use 'daterangepicker/icons/fluent2' as *;
-@use 'daterangepicker/all' as *;
-@use 'daterangepicker/bigger' as *;
+@use 'daterangepicker/all.fluent2' as *;
+@use 'daterangepicker/bigger.fluent2' as *;
 @use 'datetimepicker/fluent2-definition' as *;
 @use 'datetimepicker/icons/fluent2' as *;
-@use 'datetimepicker/all' as *;
-@use 'datetimepicker/bigger' as *;
+@use 'datetimepicker/all.fluent2' as *;
+@use 'datetimepicker/bigger.fluent2' as *;

package/styles/highcontrast-light-lite.scss

@@ -2,18 +2,18 @@
 @use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
 @use 'calendar/highcontrast-light-definition' as *;
 @use 'calendar/icons/highcontrast-light' as *;
-@use 'calendar/all' as *;
+@use 'calendar/all.highcontrast-light' as *;
 @use 'ej2-inputs/styles/input/highcontrast-light-definition' as *;
 @use 'ej2-popups/styles/popup/highcontrast-light-definition' as *;
 @use 'timepicker/highcontrast-light-definition' as *;
 @use 'timepicker/icons/highcontrast-light' as *;
-@use 'timepicker/all' as *;
+@use 'timepicker/all.highcontrast-light' as *;
 @use 'datepicker/highcontrast-light-definition' as *;
 @use 'datepicker/icons/highcontrast-light' as *;
-@use 'datepicker/all' as *;
+@use 'datepicker/all.highcontrast-light' as *;
 @use 'daterangepicker/highcontrast-light-definition' as *;
 @use 'daterangepicker/icons/highcontrast-light' as *;
-@use 'daterangepicker/all' as *;
+@use 'daterangepicker/all.highcontrast-light' as *;
 @use 'datetimepicker/highcontrast-light-definition' as *;
 @use 'datetimepicker/icons/highcontrast-light' as *;
-@use 'datetimepicker/all' as *;
+@use 'datetimepicker/all.highcontrast-light' as *;

package/styles/highcontrast-light.scss

@@ -2,23 +2,23 @@
 @use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
 @use 'calendar/highcontrast-light-definition' as *;
 @use 'calendar/icons/highcontrast-light' as *;
-@use 'calendar/all' as *;
-@use 'calendar/bigger' as *;
+@use 'calendar/all.highcontrast-light' as *;
+@use 'calendar/bigger.highcontrast-light' as *;
 @use 'ej2-inputs/styles/input/highcontrast-light-definition' as *;
 @use 'ej2-popups/styles/popup/highcontrast-light-definition' as *;
 @use 'timepicker/highcontrast-light-definition' as *;
 @use 'timepicker/icons/highcontrast-light' as *;
-@use 'timepicker/all' as *;
-@use 'timepicker/bigger' as *;
+@use 'timepicker/all.highcontrast-light' as *;
+@use 'timepicker/bigger.highcontrast-light' as *;
 @use 'datepicker/highcontrast-light-definition' as *;
 @use 'datepicker/icons/highcontrast-light' as *;
-@use 'datepicker/all' as *;
-@use 'datepicker/bigger' as *;
+@use 'datepicker/all.highcontrast-light' as *;
+@use 'datepicker/bigger.highcontrast-light' as *;
 @use 'daterangepicker/highcontrast-light-definition' as *;
 @use 'daterangepicker/icons/highcontrast-light' as *;
-@use 'daterangepicker/all' as *;
-@use 'daterangepicker/bigger' as *;
+@use 'daterangepicker/all.highcontrast-light' as *;
+@use 'daterangepicker/bigger.highcontrast-light' as *;
 @use 'datetimepicker/highcontrast-light-definition' as *;
 @use 'datetimepicker/icons/highcontrast-light' as *;
-@use 'datetimepicker/all' as *;
-@use 'datetimepicker/bigger' as *;
+@use 'datetimepicker/all.highcontrast-light' as *;
+@use 'datetimepicker/bigger.highcontrast-light' as *;

package/styles/highcontrast-lite.css

@@ -7,6 +7,7 @@
   content: "\e84f";
 }
 
+/*! calendar fabric theme variables */
 /*! calendar layout */
 ejs-calendar {
   display: block;
@@ -378,6 +379,7 @@ ejs-calendar {
   min-height: 336px;
 }
 
+/*! calendar fabric theme variables */
 .e-calendar {
   background-color: #000;
   border: 1px solid #969696;

package/styles/highcontrast-lite.scss

@@ -2,18 +2,18 @@
 @use 'ej2-buttons/styles/button/highcontrast-definition' as *;
 @use 'calendar/highcontrast-definition' as *;
 @use 'calendar/icons/highcontrast' as *;
-@use 'calendar/all' as *;
+@use 'calendar/all.highcontrast' as *;
 @use 'ej2-inputs/styles/input/highcontrast-definition' as *;
 @use 'ej2-popups/styles/popup/highcontrast-definition' as *;
 @use 'timepicker/highcontrast-definition' as *;
 @use 'timepicker/icons/highcontrast' as *;
-@use 'timepicker/all' as *;
+@use 'timepicker/all.highcontrast' as *;
 @use 'datepicker/highcontrast-definition' as *;
 @use 'datepicker/icons/highcontrast' as *;
-@use 'datepicker/all' as *;
+@use 'datepicker/all.highcontrast' as *;
 @use 'daterangepicker/highcontrast-definition' as *;
 @use 'daterangepicker/icons/highcontrast' as *;
-@use 'daterangepicker/all' as *;
+@use 'daterangepicker/all.highcontrast' as *;
 @use 'datetimepicker/highcontrast-definition' as *;
 @use 'datetimepicker/icons/highcontrast' as *;
-@use 'datetimepicker/all' as *;
+@use 'datetimepicker/all.highcontrast' as *;

package/styles/highcontrast.css

@@ -7,6 +7,7 @@
   content: "\e84f";
 }
 
+/*! calendar fabric theme variables */
 /*! calendar layout */
 ejs-calendar {
   display: block;
@@ -378,6 +379,7 @@ ejs-calendar {
   min-height: 336px;
 }
 
+/*! calendar fabric theme variables */
 .e-calendar {
   background-color: #000;
   border: 1px solid #969696;
@@ -609,6 +611,7 @@ ejs-calendar {
   border-radius: 0;
 }
 
+/*! calendar fabric theme variables */
 .e-bigger.e-calendar,
 *.e-bigger .e-calendar {
   max-width: 288px;

package/styles/highcontrast.scss

@@ -2,23 +2,23 @@
 @use 'ej2-buttons/styles/button/highcontrast-definition' as *;
 @use 'calendar/highcontrast-definition' as *;
 @use 'calendar/icons/highcontrast' as *;
-@use 'calendar/all' as *;
-@use 'calendar/bigger' as *;
+@use 'calendar/all.highcontrast' as *;
+@use 'calendar/bigger.highcontrast' as *;
 @use 'ej2-inputs/styles/input/highcontrast-definition' as *;
 @use 'ej2-popups/styles/popup/highcontrast-definition' as *;
 @use 'timepicker/highcontrast-definition' as *;
 @use 'timepicker/icons/highcontrast' as *;
-@use 'timepicker/all' as *;
-@use 'timepicker/bigger' as *;
+@use 'timepicker/all.highcontrast' as *;
+@use 'timepicker/bigger.highcontrast' as *;
 @use 'datepicker/highcontrast-definition' as *;
 @use 'datepicker/icons/highcontrast' as *;
-@use 'datepicker/all' as *;
-@use 'datepicker/bigger' as *;
+@use 'datepicker/all.highcontrast' as *;
+@use 'datepicker/bigger.highcontrast' as *;
 @use 'daterangepicker/highcontrast-definition' as *;
 @use 'daterangepicker/icons/highcontrast' as *;
-@use 'daterangepicker/all' as *;
-@use 'daterangepicker/bigger' as *;
+@use 'daterangepicker/all.highcontrast' as *;
+@use 'daterangepicker/bigger.highcontrast' as *;
 @use 'datetimepicker/highcontrast-definition' as *;
 @use 'datetimepicker/icons/highcontrast' as *;
-@use 'datetimepicker/all' as *;
-@use 'datetimepicker/bigger' as *;
+@use 'datetimepicker/all.highcontrast' as *;
+@use 'datetimepicker/bigger.highcontrast' as *;

package/styles/material-dark-lite.css

@@ -648,6 +648,14 @@ ejs-calendar {
   font-family: "e-icons";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-input-group.e-control-wrapper.e-time-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-time-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
   display: -webkit-box;
@@ -857,6 +865,14 @@ ejs-calendar {
   }
 }
 /* stylelint-enable */
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-time-wrapper .e-input-group-icon.e-icons.e-active {
   color: #00b0ff;
 }
@@ -1408,6 +1424,14 @@ ejs-calendar {
   font-family: "e-icons";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-date-range-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
   display: -webkit-box;
@@ -2046,6 +2070,14 @@ ejs-calendar {
   width: calc(100% - 110px);
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-date-range-wrapper .e-input-group-icon.e-icons.e-active {
   color: #00b0ff;
 }
@@ -2168,6 +2200,14 @@ ejs-calendar {
   min-width: 18px;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-input-group.e-control-wrapper.e-datetime-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-datetime-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
   display: -webkit-box;
@@ -2315,6 +2355,14 @@ ejs-calendar {
   width: 100%;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 /*! datetimepicker theme */
 .e-datetime-wrapper .e-input-group-icon.e-icons.e-active {
   color: #00b0ff;

package/styles/material-dark-lite.scss

@@ -2,18 +2,18 @@
 @use 'ej2-buttons/styles/button/material-dark-definition' as *;
 @use 'calendar/material-dark-definition' as *;
 @use 'calendar/icons/material-dark' as *;
-@use 'calendar/all' as *;
+@use 'calendar/all.material-dark' as *;
 @use 'ej2-inputs/styles/input/material-dark-definition' as *;
 @use 'ej2-popups/styles/popup/material-dark-definition' as *;
 @use 'timepicker/material-dark-definition' as *;
 @use 'timepicker/icons/material-dark' as *;
-@use 'timepicker/all' as *;
+@use 'timepicker/all.material-dark' as *;
 @use 'datepicker/material-dark-definition' as *;
 @use 'datepicker/icons/material-dark' as *;
-@use 'datepicker/all' as *;
+@use 'datepicker/all.material-dark' as *;
 @use 'daterangepicker/material-dark-definition' as *;
 @use 'daterangepicker/icons/material-dark' as *;
-@use 'daterangepicker/all' as *;
+@use 'daterangepicker/all.material-dark' as *;
 @use 'datetimepicker/material-dark-definition' as *;
 @use 'datetimepicker/icons/material-dark' as *;
-@use 'datetimepicker/all' as *;
+@use 'datetimepicker/all.material-dark' as *;

package/styles/material-dark.css

@@ -1242,6 +1242,14 @@ ejs-calendar {
   font-family: "e-icons";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-input-group.e-control-wrapper.e-time-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-time-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
   display: -webkit-box;
@@ -1451,6 +1459,14 @@ ejs-calendar {
   }
 }
 /* stylelint-enable */
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-time-wrapper .e-input-group-icon.e-icons.e-active {
   color: #00b0ff;
 }
@@ -1509,6 +1525,14 @@ ejs-calendar {
   font-weight: 500;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-bigger .e-time-wrapper .e-time-icon.e-icons,
 *.e-bigger.e-time-wrapper .e-time-icon.e-icons,
 *.e-bigger .e-control-wrapper .e-time-wrapper .e-time-icon.e-icons,
@@ -2110,6 +2134,14 @@ ejs-calendar {
   font-family: "e-icons";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-date-range-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
   display: -webkit-box;
@@ -2748,6 +2780,14 @@ ejs-calendar {
   width: calc(100% - 110px);
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-date-range-wrapper .e-input-group-icon.e-icons.e-active {
   color: #00b0ff;
 }
@@ -2846,6 +2886,14 @@ ejs-calendar {
   color: #fff;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-bigger .e-daterangepicker.e-range-modal,
 *.e-device.e-daterangepicker.e-range-modal {
   background-color: rgba(0, 0, 0, 0.6);
@@ -3513,6 +3561,14 @@ ejs-calendar {
   min-width: 18px;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-input-group.e-control-wrapper.e-datetime-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-datetime-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
   display: -webkit-box;
@@ -3660,6 +3716,14 @@ ejs-calendar {
   width: 100%;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 /*! datetimepicker theme */
 .e-datetime-wrapper .e-input-group-icon.e-icons.e-active {
   color: #00b0ff;
@@ -3695,6 +3759,14 @@ ejs-calendar {
   color: #00b0ff;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 .e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
 *.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
   font-size: 18px;

package/styles/material-dark.scss

@@ -2,23 +2,23 @@
 @use 'ej2-buttons/styles/button/material-dark-definition' as *;
 @use 'calendar/material-dark-definition' as *;
 @use 'calendar/icons/material-dark' as *;
-@use 'calendar/all' as *;
-@use 'calendar/bigger' as *;
+@use 'calendar/all.material-dark' as *;
+@use 'calendar/bigger.material-dark' as *;
 @use 'ej2-inputs/styles/input/material-dark-definition' as *;
 @use 'ej2-popups/styles/popup/material-dark-definition' as *;
 @use 'timepicker/material-dark-definition' as *;
 @use 'timepicker/icons/material-dark' as *;
-@use 'timepicker/all' as *;
-@use 'timepicker/bigger' as *;
+@use 'timepicker/all.material-dark' as *;
+@use 'timepicker/bigger.material-dark' as *;
 @use 'datepicker/material-dark-definition' as *;
 @use 'datepicker/icons/material-dark' as *;
-@use 'datepicker/all' as *;
-@use 'datepicker/bigger' as *;
+@use 'datepicker/all.material-dark' as *;
+@use 'datepicker/bigger.material-dark' as *;
 @use 'daterangepicker/material-dark-definition' as *;
 @use 'daterangepicker/icons/material-dark' as *;
-@use 'daterangepicker/all' as *;
-@use 'daterangepicker/bigger' as *;
+@use 'daterangepicker/all.material-dark' as *;
+@use 'daterangepicker/bigger.material-dark' as *;
 @use 'datetimepicker/material-dark-definition' as *;
 @use 'datetimepicker/icons/material-dark' as *;
-@use 'datetimepicker/all' as *;
-@use 'datetimepicker/bigger' as *;
+@use 'datetimepicker/all.material-dark' as *;
+@use 'datetimepicker/bigger.material-dark' as *;

package/styles/material-lite.css

@@ -7,6 +7,7 @@
   content: "\e916";
 }
 
+/*! calendar material theme variables */
 /*! calendar layout */
 ejs-calendar {
   display: block;
@@ -378,6 +379,7 @@ ejs-calendar {
   min-height: 336px;
 }
 
+/*! calendar material theme variables */
 .e-calendar {
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.12);
@@ -669,6 +671,24 @@ ejs-calendar {
   font-family: "e-icons";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+}
 .e-input-group.e-control-wrapper.e-time-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-time-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
   display: -webkit-box;
@@ -878,6 +898,24 @@ ejs-calendar {
   }
 }
 /* stylelint-enable */
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+}
 .e-time-wrapper .e-input-group-icon.e-icons.e-active {
   color: #e3165b;
 }
@@ -1429,6 +1467,24 @@ ejs-calendar {
   font-family: "e-icons";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+}
 .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-date-range-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
   display: -webkit-box;
@@ -2067,6 +2123,24 @@ ejs-calendar {
   width: calc(100% - 110px);
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+}
 .e-date-range-wrapper .e-input-group-icon.e-icons.e-active {
   color: #e3165b;
 }
@@ -2198,6 +2272,24 @@ ejs-calendar {
   margin: 0;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+}
 .e-input-group.e-control-wrapper.e-datetime-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-datetime-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
   display: -webkit-box;
@@ -2345,6 +2437,24 @@ ejs-calendar {
   width: 100%;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+}
 /*! datetimepicker theme */
 .e-datetime-wrapper .e-input-group-icon.e-icons.e-active {
   color: #e3165b;

package/styles/material-lite.scss

@@ -1,18 +1,18 @@
 @use 'ej2-buttons/styles/button/material-definition' as *;
 @use 'calendar/material-definition' as *;
 @use 'calendar/icons/material' as *;
-@use 'calendar/all' as *;
+@use 'calendar/all.material' as *;
 @use 'ej2-inputs/styles/input/material-definition' as *;
 @use 'ej2-popups/styles/popup/material-definition' as *;
 @use 'timepicker/material-definition' as *;
 @use 'timepicker/icons/material' as *;
-@use 'timepicker/all' as *;
+@use 'timepicker/all.material' as *;
 @use 'datepicker/material-definition' as *;
 @use 'datepicker/icons/material' as *;
-@use 'datepicker/all' as *;
+@use 'datepicker/all.material' as *;
 @use 'daterangepicker/material-definition' as *;
 @use 'daterangepicker/icons/material' as *;
-@use 'daterangepicker/all' as *;
+@use 'daterangepicker/all.material' as *;
 @use 'datetimepicker/material-definition' as *;
 @use 'datetimepicker/icons/material' as *;
-@use 'datetimepicker/all' as *;
+@use 'datetimepicker/all.material' as *;