@syncfusion/ej2-angular-calendars 22.2.12 → 23.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (231) hide show
  1. package/esm2020/src/calendar/calendar.component.mjs +5 -4
  2. package/esm2020/src/datepicker/datepicker.component.mjs +5 -4
  3. package/esm2020/src/daterangepicker/daterangepicker.component.mjs +5 -4
  4. package/esm2020/src/datetimepicker/datetimepicker.component.mjs +5 -4
  5. package/esm2020/src/timepicker/timepicker.component.mjs +5 -4
  6. package/fesm2015/syncfusion-ej2-angular-calendars.mjs +20 -15
  7. package/fesm2015/syncfusion-ej2-angular-calendars.mjs.map +1 -1
  8. package/fesm2020/syncfusion-ej2-angular-calendars.mjs +20 -15
  9. package/fesm2020/syncfusion-ej2-angular-calendars.mjs.map +1 -1
  10. package/package.json +9 -9
  11. package/schematics/utils/lib-details.d.ts +2 -2
  12. package/schematics/utils/lib-details.js +2 -2
  13. package/schematics/utils/lib-details.ts +2 -2
  14. package/src/calendar/calendar.component.d.ts +3 -2
  15. package/src/datepicker/datepicker.component.d.ts +3 -2
  16. package/src/daterangepicker/daterangepicker.component.d.ts +3 -2
  17. package/src/datetimepicker/datetimepicker.component.d.ts +3 -2
  18. package/src/timepicker/timepicker.component.d.ts +3 -2
  19. package/styles/bootstrap-dark.css +91 -40
  20. package/styles/bootstrap.css +91 -40
  21. package/styles/bootstrap4.css +91 -40
  22. package/styles/bootstrap5-dark.css +92 -41
  23. package/styles/bootstrap5.css +92 -41
  24. package/styles/calendar/bootstrap-dark.scss +1 -1
  25. package/styles/calendar/bootstrap.scss +1 -1
  26. package/styles/calendar/bootstrap4.scss +1 -1
  27. package/styles/calendar/bootstrap5-dark.scss +1 -1
  28. package/styles/calendar/bootstrap5.scss +1 -1
  29. package/styles/calendar/fabric-dark.scss +1 -1
  30. package/styles/calendar/fabric.scss +1 -1
  31. package/styles/calendar/fluent-dark.scss +1 -1
  32. package/styles/calendar/fluent.scss +1 -1
  33. package/styles/calendar/highcontrast-light.scss +1 -1
  34. package/styles/calendar/highcontrast.scss +1 -1
  35. package/styles/calendar/material-dark.css +0 -1
  36. package/styles/calendar/material-dark.scss +1 -1
  37. package/styles/calendar/material.css +0 -1
  38. package/styles/calendar/material.scss +1 -1
  39. package/styles/calendar/material3-dark.css +0 -1
  40. package/styles/calendar/material3-dark.scss +1 -1
  41. package/styles/calendar/material3.css +0 -1
  42. package/styles/calendar/material3.scss +1 -1
  43. package/styles/calendar/tailwind-dark.css +0 -1
  44. package/styles/calendar/tailwind-dark.scss +1 -1
  45. package/styles/calendar/tailwind.css +0 -1
  46. package/styles/calendar/tailwind.scss +1 -1
  47. package/styles/datepicker/_bootstrap-dark-definition.scss +5 -5
  48. package/styles/datepicker/_bootstrap-definition.scss +5 -5
  49. package/styles/datepicker/_bootstrap4-definition.scss +5 -5
  50. package/styles/datepicker/_bootstrap5-definition.scss +6 -6
  51. package/styles/datepicker/_fabric-dark-definition.scss +4 -4
  52. package/styles/datepicker/_fabric-definition.scss +6 -6
  53. package/styles/datepicker/_fluent-definition.scss +4 -4
  54. package/styles/datepicker/_fusionnew-definition.scss +5 -5
  55. package/styles/datepicker/_highcontrast-definition.scss +5 -5
  56. package/styles/datepicker/_highcontrast-light-definition.scss +5 -5
  57. package/styles/datepicker/_layout.scss +34 -9
  58. package/styles/datepicker/_material-dark-definition.scss +4 -4
  59. package/styles/datepicker/_material-definition.scss +4 -4
  60. package/styles/datepicker/_material3-definition.scss +4 -4
  61. package/styles/datepicker/_tailwind-definition.scss +8 -8
  62. package/styles/datepicker/bootstrap-dark.css +49 -19
  63. package/styles/datepicker/bootstrap-dark.scss +1 -1
  64. package/styles/datepicker/bootstrap.css +49 -19
  65. package/styles/datepicker/bootstrap.scss +1 -1
  66. package/styles/datepicker/bootstrap4.css +49 -19
  67. package/styles/datepicker/bootstrap4.scss +1 -1
  68. package/styles/datepicker/bootstrap5-dark.css +50 -20
  69. package/styles/datepicker/bootstrap5-dark.scss +1 -1
  70. package/styles/datepicker/bootstrap5.css +50 -20
  71. package/styles/datepicker/bootstrap5.scss +1 -1
  72. package/styles/datepicker/fabric-dark.css +48 -18
  73. package/styles/datepicker/fabric-dark.scss +1 -1
  74. package/styles/datepicker/fabric.css +49 -19
  75. package/styles/datepicker/fabric.scss +1 -1
  76. package/styles/datepicker/fluent-dark.css +48 -18
  77. package/styles/datepicker/fluent-dark.scss +1 -1
  78. package/styles/datepicker/fluent.css +48 -18
  79. package/styles/datepicker/fluent.scss +1 -1
  80. package/styles/datepicker/highcontrast-light.css +49 -19
  81. package/styles/datepicker/highcontrast-light.scss +1 -1
  82. package/styles/datepicker/highcontrast.css +49 -19
  83. package/styles/datepicker/highcontrast.scss +1 -1
  84. package/styles/datepicker/material-dark.css +48 -19
  85. package/styles/datepicker/material-dark.scss +1 -1
  86. package/styles/datepicker/material.css +48 -19
  87. package/styles/datepicker/material.scss +1 -1
  88. package/styles/datepicker/material3-dark.css +48 -19
  89. package/styles/datepicker/material3-dark.scss +1 -1
  90. package/styles/datepicker/material3.css +48 -19
  91. package/styles/datepicker/material3.scss +1 -1
  92. package/styles/datepicker/tailwind-dark.css +52 -23
  93. package/styles/datepicker/tailwind-dark.scss +1 -1
  94. package/styles/datepicker/tailwind.css +52 -23
  95. package/styles/datepicker/tailwind.scss +1 -1
  96. package/styles/daterangepicker/_bootstrap-dark-definition.scss +4 -4
  97. package/styles/daterangepicker/_bootstrap-definition.scss +4 -4
  98. package/styles/daterangepicker/_bootstrap4-definition.scss +4 -4
  99. package/styles/daterangepicker/_bootstrap5-definition.scss +4 -4
  100. package/styles/daterangepicker/_fabric-dark-definition.scss +4 -4
  101. package/styles/daterangepicker/_fabric-definition.scss +4 -4
  102. package/styles/daterangepicker/_fluent-definition.scss +4 -4
  103. package/styles/daterangepicker/_fusionnew-definition.scss +4 -4
  104. package/styles/daterangepicker/_highcontrast-definition.scss +4 -4
  105. package/styles/daterangepicker/_highcontrast-light-definition.scss +4 -4
  106. package/styles/daterangepicker/_layout.scss +48 -19
  107. package/styles/daterangepicker/_material-dark-definition.scss +4 -4
  108. package/styles/daterangepicker/_material-definition.scss +4 -4
  109. package/styles/daterangepicker/_material3-definition.scss +8 -5
  110. package/styles/daterangepicker/_tailwind-definition.scss +5 -5
  111. package/styles/daterangepicker/bootstrap-dark.css +30 -26
  112. package/styles/daterangepicker/bootstrap-dark.scss +1 -1
  113. package/styles/daterangepicker/bootstrap.css +30 -26
  114. package/styles/daterangepicker/bootstrap.scss +1 -1
  115. package/styles/daterangepicker/bootstrap4.css +30 -26
  116. package/styles/daterangepicker/bootstrap4.scss +1 -1
  117. package/styles/daterangepicker/bootstrap5-dark.css +30 -26
  118. package/styles/daterangepicker/bootstrap5-dark.scss +1 -1
  119. package/styles/daterangepicker/bootstrap5.css +30 -26
  120. package/styles/daterangepicker/bootstrap5.scss +1 -1
  121. package/styles/daterangepicker/fabric-dark.css +30 -26
  122. package/styles/daterangepicker/fabric-dark.scss +1 -1
  123. package/styles/daterangepicker/fabric.css +30 -26
  124. package/styles/daterangepicker/fabric.scss +1 -1
  125. package/styles/daterangepicker/fluent-dark.css +30 -26
  126. package/styles/daterangepicker/fluent-dark.scss +1 -1
  127. package/styles/daterangepicker/fluent.css +30 -26
  128. package/styles/daterangepicker/fluent.scss +1 -1
  129. package/styles/daterangepicker/highcontrast-light.css +30 -26
  130. package/styles/daterangepicker/highcontrast-light.scss +1 -1
  131. package/styles/daterangepicker/highcontrast.css +30 -26
  132. package/styles/daterangepicker/highcontrast.scss +1 -1
  133. package/styles/daterangepicker/material-dark.css +30 -27
  134. package/styles/daterangepicker/material-dark.scss +1 -1
  135. package/styles/daterangepicker/material.css +30 -27
  136. package/styles/daterangepicker/material.scss +1 -1
  137. package/styles/daterangepicker/material3-dark.css +53 -28
  138. package/styles/daterangepicker/material3-dark.scss +1 -1
  139. package/styles/daterangepicker/material3.css +53 -28
  140. package/styles/daterangepicker/material3.scss +1 -1
  141. package/styles/daterangepicker/tailwind-dark.css +31 -28
  142. package/styles/daterangepicker/tailwind-dark.scss +1 -1
  143. package/styles/daterangepicker/tailwind.css +31 -28
  144. package/styles/daterangepicker/tailwind.scss +1 -1
  145. package/styles/datetimepicker/bootstrap-dark.scss +1 -1
  146. package/styles/datetimepicker/bootstrap.scss +1 -1
  147. package/styles/datetimepicker/bootstrap4.scss +1 -1
  148. package/styles/datetimepicker/bootstrap5-dark.scss +1 -1
  149. package/styles/datetimepicker/bootstrap5.scss +1 -1
  150. package/styles/datetimepicker/fabric-dark.scss +1 -1
  151. package/styles/datetimepicker/fabric.scss +1 -1
  152. package/styles/datetimepicker/fluent-dark.scss +1 -1
  153. package/styles/datetimepicker/fluent.scss +1 -1
  154. package/styles/datetimepicker/highcontrast-light.scss +1 -1
  155. package/styles/datetimepicker/highcontrast.scss +1 -1
  156. package/styles/datetimepicker/material-dark.css +0 -1
  157. package/styles/datetimepicker/material-dark.scss +1 -1
  158. package/styles/datetimepicker/material.css +0 -1
  159. package/styles/datetimepicker/material.scss +1 -1
  160. package/styles/datetimepicker/material3-dark.css +0 -1
  161. package/styles/datetimepicker/material3-dark.scss +1 -1
  162. package/styles/datetimepicker/material3.css +0 -1
  163. package/styles/datetimepicker/material3.scss +1 -1
  164. package/styles/datetimepicker/tailwind-dark.css +0 -1
  165. package/styles/datetimepicker/tailwind-dark.scss +1 -1
  166. package/styles/datetimepicker/tailwind.css +0 -1
  167. package/styles/datetimepicker/tailwind.scss +1 -1
  168. package/styles/fabric-dark.css +90 -39
  169. package/styles/fabric.css +103 -52
  170. package/styles/fluent-dark.css +90 -39
  171. package/styles/fluent.css +90 -39
  172. package/styles/highcontrast-light.css +91 -40
  173. package/styles/highcontrast.css +91 -40
  174. package/styles/material-dark.css +90 -40
  175. package/styles/material.css +90 -40
  176. package/styles/material3-dark.css +113 -41
  177. package/styles/material3-dark.scss +1 -1
  178. package/styles/material3.css +113 -41
  179. package/styles/material3.scss +1 -1
  180. package/styles/tailwind-dark.css +95 -49
  181. package/styles/tailwind.css +95 -49
  182. package/styles/timepicker/_bootstrap-dark-definition.scss +2 -2
  183. package/styles/timepicker/_bootstrap-definition.scss +2 -2
  184. package/styles/timepicker/_bootstrap4-definition.scss +2 -2
  185. package/styles/timepicker/_bootstrap5-definition.scss +2 -2
  186. package/styles/timepicker/_fabric-dark-definition.scss +2 -2
  187. package/styles/timepicker/_fabric-definition.scss +4 -4
  188. package/styles/timepicker/_fluent-definition.scss +2 -2
  189. package/styles/timepicker/_fusionnew-definition.scss +2 -2
  190. package/styles/timepicker/_highcontrast-definition.scss +2 -2
  191. package/styles/timepicker/_highcontrast-light-definition.scss +2 -2
  192. package/styles/timepicker/_layout.scss +16 -0
  193. package/styles/timepicker/_material-dark-definition.scss +2 -2
  194. package/styles/timepicker/_material-definition.scss +2 -2
  195. package/styles/timepicker/_material3-definition.scss +2 -2
  196. package/styles/timepicker/_tailwind-definition.scss +2 -2
  197. package/styles/timepicker/_theme.scss +1 -0
  198. package/styles/timepicker/bootstrap-dark.css +19 -2
  199. package/styles/timepicker/bootstrap-dark.scss +1 -1
  200. package/styles/timepicker/bootstrap.css +19 -2
  201. package/styles/timepicker/bootstrap.scss +1 -1
  202. package/styles/timepicker/bootstrap4.css +19 -2
  203. package/styles/timepicker/bootstrap4.scss +1 -1
  204. package/styles/timepicker/bootstrap5-dark.css +19 -2
  205. package/styles/timepicker/bootstrap5-dark.scss +1 -1
  206. package/styles/timepicker/bootstrap5.css +19 -2
  207. package/styles/timepicker/bootstrap5.scss +1 -1
  208. package/styles/timepicker/fabric-dark.css +19 -2
  209. package/styles/timepicker/fabric-dark.scss +1 -1
  210. package/styles/timepicker/fabric.css +22 -5
  211. package/styles/timepicker/fabric.scss +1 -1
  212. package/styles/timepicker/fluent-dark.css +19 -2
  213. package/styles/timepicker/fluent-dark.scss +1 -1
  214. package/styles/timepicker/fluent.css +19 -2
  215. package/styles/timepicker/fluent.scss +1 -1
  216. package/styles/timepicker/highcontrast-light.css +19 -2
  217. package/styles/timepicker/highcontrast-light.scss +1 -1
  218. package/styles/timepicker/highcontrast.css +19 -2
  219. package/styles/timepicker/highcontrast.scss +1 -1
  220. package/styles/timepicker/material-dark.css +19 -3
  221. package/styles/timepicker/material-dark.scss +1 -1
  222. package/styles/timepicker/material.css +19 -3
  223. package/styles/timepicker/material.scss +1 -1
  224. package/styles/timepicker/material3-dark.css +19 -3
  225. package/styles/timepicker/material3-dark.scss +1 -1
  226. package/styles/timepicker/material3.css +19 -3
  227. package/styles/timepicker/material3.scss +1 -1
  228. package/styles/timepicker/tailwind-dark.css +19 -3
  229. package/styles/timepicker/tailwind-dark.scss +1 -1
  230. package/styles/timepicker/tailwind.css +19 -3
  231. package/styles/timepicker/tailwind.scss +1 -1
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1145,15 +1144,22 @@ ejs-calendar {
1145
1144
  top: 0 !important;
1146
1145
  }
1147
1146
 
1147
+ .e-timepicker-mob-popup-wrap .e-popup-expand.e-timepicker.e-popup,
1148
+ .e-datetimepicker.e-popup-expand.e-timepicker.e-popup,
1149
+ .e-timepicker-mob-popup-wrap .e-popup-expand.e-datetimepicker.e-popup,
1150
+ .e-datetimepicker.e-popup-expand.e-popup {
1151
+ border-radius: 0;
1152
+ }
1153
+
1148
1154
  .e-timepicker-mob-popup-wrap .e-popup-expand .e-model-header,
1149
1155
  .e-datetimepicker.e-popup-expand .e-model-header {
1150
1156
  height: 10%;
1151
- padding: 2.5vh 2.5vw;
1157
+ padding: 2.5vh 2.5vw 2.5vh 1.5vw;
1152
1158
  display: -ms-flexbox;
1153
1159
  display: flex;
1154
1160
  -ms-flex-align: center;
1155
1161
  align-items: center;
1156
- font-size: 3vh;
1162
+ font-size: 2vh;
1157
1163
  border-bottom: none;
1158
1164
  }
1159
1165
  .e-timepicker-mob-popup-wrap .e-popup-expand .e-model-header .e-popup-close,
@@ -1165,6 +1171,11 @@ ejs-calendar {
1165
1171
  .e-datetimepicker.e-popup-expand .e-model-header .e-model-title {
1166
1172
  padding: 1vh 2vw;
1167
1173
  text-transform: uppercase;
1174
+ font-weight: 500;
1175
+ }
1176
+ .e-timepicker-mob-popup-wrap .e-popup-expand .e-model-header .e-btn.e-popup-close,
1177
+ .e-datetimepicker.e-popup-expand .e-model-header .e-btn.e-popup-close {
1178
+ font-size: 2vh;
1168
1179
  }
1169
1180
  .e-timepicker-mob-popup-wrap .e-popup-expand .e-content,
1170
1181
  .e-datetimepicker.e-popup-expand .e-content {
@@ -1203,6 +1214,10 @@ ejs-calendar {
1203
1214
  .e-datetimepicker.e-popup-expand .e-model-header .e-model-title {
1204
1215
  padding: 1vh 1vw;
1205
1216
  }
1217
+ .e-timepicker-mob-popup-wrap .e-popup-expand .e-model-header .e-btn.e-popup-close,
1218
+ .e-datetimepicker.e-popup-expand .e-model-header .e-btn.e-popup-close {
1219
+ font-size: 2vw;
1220
+ }
1206
1221
  .e-timepicker-mob-popup-wrap .e-popup-expand .e-content,
1207
1222
  .e-datetimepicker.e-popup-expand .e-content {
1208
1223
  height: 85%;
@@ -1274,6 +1289,7 @@ ejs-calendar {
1274
1289
  .e-timepicker-mob-popup-wrap .e-timepicker.e-popup-expand .e-model-header .e-popup-close,
1275
1290
  .e-datetimepicker.e-popup-expand .e-model-header .e-popup-close {
1276
1291
  color: rgba(var(--color-sf-on-primary));
1292
+ font-weight: 500;
1277
1293
  }
1278
1294
 
1279
1295
  /* stylelint-disable property-no-vendor-prefix */
@@ -1452,6 +1468,11 @@ ejs-calendar {
1452
1468
  min-height: 40px;
1453
1469
  }
1454
1470
 
1471
+ @media screen and (orientation: landscape) {
1472
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
1473
+ line-height: 64px;
1474
+ }
1475
+ }
1455
1476
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand {
1456
1477
  border-radius: 0;
1457
1478
  }
@@ -1461,9 +1482,15 @@ ejs-calendar {
1461
1482
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header.e-blazor-device .e-popup-close {
1462
1483
  float: right;
1463
1484
  }
1485
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header.e-blazor-device {
1486
+ height: 15vh;
1487
+ }
1488
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header.e-blazor-device .e-popup-close {
1489
+ float: right;
1490
+ }
1464
1491
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header {
1465
1492
  height: 20vh;
1466
- padding: 2vh 2vw;
1493
+ padding: 2vh 6vw;
1467
1494
  }
1468
1495
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-day-wrapper {
1469
1496
  margin: 12vh 0 0 0;
@@ -1472,13 +1499,19 @@ ejs-calendar {
1472
1499
  color: inherit;
1473
1500
  float: left;
1474
1501
  font-size: 20px;
1475
- padding: 2px;
1476
1502
  }
1477
1503
  @media (min-device-width: 768px) {
1478
1504
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
1479
1505
  font-size: 24px;
1480
1506
  }
1481
1507
  }
1508
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
1509
+ background: transparent;
1510
+ border-color: transparent;
1511
+ box-shadow: none;
1512
+ font-weight: 400;
1513
+ padding: 0;
1514
+ }
1482
1515
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
1483
1516
  color: inherit;
1484
1517
  float: right;
@@ -1520,13 +1553,19 @@ ejs-calendar {
1520
1553
  }
1521
1554
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev {
1522
1555
  margin-right: 18px;
1556
+ vertical-align: inherit;
1557
+ height: 35px;
1558
+ width: 35px;
1523
1559
  }
1524
1560
  @media (min-device-width: 768px) {
1525
1561
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev {
1526
- height: 34px;
1527
- width: 34px;
1562
+ height: 55px;
1563
+ width: 55px;
1528
1564
  }
1529
1565
  }
1566
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev .e-icons {
1567
+ vertical-align: inherit;
1568
+ }
1530
1569
  @media (min-device-width: 768px) {
1531
1570
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev .e-icons {
1532
1571
  font-size: 24px;
@@ -1534,6 +1573,18 @@ ejs-calendar {
1534
1573
  }
1535
1574
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next {
1536
1575
  margin-right: 0;
1576
+ vertical-align: inherit;
1577
+ height: 35px;
1578
+ width: 35px;
1579
+ }
1580
+ @media (min-device-width: 768px) {
1581
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next {
1582
+ height: 55px;
1583
+ width: 55px;
1584
+ }
1585
+ }
1586
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next .e-icons {
1587
+ vertical-align: inherit;
1537
1588
  }
1538
1589
  @media (min-device-width: 768px) {
1539
1590
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next .e-icons {
@@ -1558,15 +1609,11 @@ ejs-calendar {
1558
1609
  }
1559
1610
  }
1560
1611
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar-cell-container {
1561
- height: 85vh;
1612
+ height: 79vh;
1562
1613
  }
1563
1614
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-footer-container {
1564
1615
  display: none;
1565
1616
  }
1566
- .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar-cell-container .e-footer-container {
1567
- display: block;
1568
- padding: 5px 0;
1569
- }
1570
1617
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-content.e-month {
1571
1618
  height: 69vh;
1572
1619
  }
@@ -1625,7 +1672,6 @@ ejs-calendar {
1625
1672
  @media screen and (orientation: landscape) {
1626
1673
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
1627
1674
  float: left;
1628
- padding: 2px;
1629
1675
  }
1630
1676
  }
1631
1677
  @media screen and (orientation: landscape) {
@@ -1645,7 +1691,7 @@ ejs-calendar {
1645
1691
  }
1646
1692
  @media screen and (orientation: landscape) and (max-height: 600px) {
1647
1693
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-title {
1648
- line-height: 8vh;
1694
+ line-height: 12vh;
1649
1695
  }
1650
1696
  }
1651
1697
  @media screen and (orientation: landscape) and (min-height: 600px) {
@@ -2474,7 +2520,7 @@ ejs-calendar {
2474
2520
  }
2475
2521
  @media (min-device-width: 768px) {
2476
2522
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-model-header-wrapper {
2477
- font-size: 24px;
2523
+ font-size: 18px;
2478
2524
  }
2479
2525
  }
2480
2526
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-model-header-wrapper .e-apply {
@@ -2509,43 +2555,75 @@ ejs-calendar {
2509
2555
  padding: 2vh 2vw;
2510
2556
  line-height: 5vh;
2511
2557
  }
2512
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next {
2558
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev {
2559
+ height: 36px;
2560
+ width: 36px;
2561
+ margin-right: 60vw;
2562
+ vertical-align: inherit;
2563
+ font-size: 18px;
2564
+ }
2565
+ @media screen and (orientation: landscape) {
2566
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev {
2567
+ margin-right: 78vw;
2568
+ vertical-align: inherit;
2569
+ }
2570
+ }
2571
+ @media (min-device-width: 768px) {
2572
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev span {
2573
+ font-size: 18px;
2574
+ padding: 11px;
2575
+ }
2576
+ }
2577
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next {
2513
2578
  height: 36px;
2514
2579
  width: 36px;
2580
+ margin-right: 42px;
2515
2581
  }
2516
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
2582
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
2517
2583
  padding: 10px;
2518
2584
  line-height: 1;
2519
2585
  }
2520
2586
  @media (min-device-width: 768px) {
2521
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
2522
- font-size: 24px;
2587
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
2588
+ font-size: 18px;
2523
2589
  }
2524
2590
  }
2525
2591
  @media (max-height: 600px) {
2526
2592
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
2593
+ margin-left: -25vw;
2594
+ position: absolute;
2595
+ text-align: center;
2596
+ vertical-align: middle;
2597
+ width: 50vw;
2598
+ line-height: 44px;
2527
2599
  line-height: 8vh;
2528
2600
  }
2529
2601
  }
2530
2602
  @media (min-height: 600px) {
2531
2603
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
2604
+ margin-left: -25vw;
2605
+ position: absolute;
2606
+ text-align: center;
2607
+ vertical-align: middle;
2608
+ width: 50vw;
2609
+ line-height: 44px;
2532
2610
  line-height: inherit;
2533
2611
  }
2534
2612
  }
2535
2613
  @media (min-device-width: 768px) {
2536
2614
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
2537
- font-size: 24px;
2615
+ font-size: 18px;
2538
2616
  }
2539
2617
  }
2540
2618
  @media (min-device-width: 768px) {
2541
2619
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar th {
2542
- font-size: 24px;
2620
+ font-size: 18px;
2543
2621
  height: 48px;
2544
2622
  }
2545
2623
  }
2546
2624
  @media (min-device-width: 768px) {
2547
2625
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-content span.e-day {
2548
- font-size: 24px;
2626
+ font-size: 18px;
2549
2627
  height: 64px;
2550
2628
  width: 64px;
2551
2629
  line-height: 64px;
@@ -2569,12 +2647,6 @@ ejs-calendar {
2569
2647
  height: 78vh;
2570
2648
  }
2571
2649
  }
2572
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-footer {
2573
- display: block;
2574
- }
2575
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-footer .e-btn.e-apply, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-footer .e-btn.e-cancel {
2576
- float: right;
2577
- }
2578
2650
  @media (max-height: 600px) {
2579
2651
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
2580
2652
  min-height: 100%;
@@ -2622,17 +2694,17 @@ ejs-calendar {
2622
2694
  }
2623
2695
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header {
2624
2696
  height: 10%;
2625
- padding: 2.5vh 2.5vw;
2697
+ padding: 2.5vh 2.5vw 2.5vh 1.5vw;
2626
2698
  display: -ms-flexbox;
2627
2699
  display: flex;
2628
2700
  -ms-flex-align: center;
2629
2701
  align-items: center;
2630
- font-size: 3vh;
2702
+ font-size: 2vh;
2631
2703
  border-bottom: none;
2632
2704
  }
2633
2705
  @media (min-device-width: 768px) {
2634
2706
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header {
2635
- font-size: 2vw;
2707
+ font-size: 18px;
2636
2708
  }
2637
2709
  }
2638
2710
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header .e-popup-close {
@@ -2644,14 +2716,14 @@ ejs-calendar {
2644
2716
  text-transform: uppercase;
2645
2717
  }
2646
2718
 
2647
- @media screen and (orientation: landscape) and (max-height: 600px) {
2648
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header.e-blazor-device {
2649
- height: 23vh;
2719
+ @media screen and (orientation: landscape) {
2720
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
2721
+ padding: 0;
2650
2722
  }
2651
2723
  }
2652
- @media screen and (orientation: landscape) and (min-height: 600px) {
2653
- .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header.e-blazor-device {
2654
- height: 20vh;
2724
+ @media screen and (orientation: landscape) and (min-device-width: 768px) {
2725
+ .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
2726
+ font-size: 18px;
2655
2727
  }
2656
2728
  }
2657
2729
  @media screen and (orientation: landscape) and (min-height: 600px) {
@@ -2686,7 +2758,7 @@ ejs-calendar {
2686
2758
  @media screen and (orientation: landscape) {
2687
2759
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header {
2688
2760
  height: 15%;
2689
- font-size: 2vw;
2761
+ font-size: 18px;
2690
2762
  }
2691
2763
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header .e-popup-close {
2692
2764
  padding: 1vh 1vw;
@@ -2713,7 +2785,7 @@ ejs-calendar {
2713
2785
  @media screen and (orientation: landscape) {
2714
2786
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
2715
2787
  margin: 0;
2716
- height: 38px;
2788
+ height: 28px;
2717
2789
  }
2718
2790
  }
2719
2791
  @media screen and (orientation: landscape) and (min-height: 600px) {
@@ -2723,8 +2795,8 @@ ejs-calendar {
2723
2795
  }
2724
2796
  @media screen and (orientation: landscape) {
2725
2797
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-day-span {
2726
- margin: 5px 0;
2727
- font-size: 20px;
2798
+ margin: 8px 0;
2799
+ font-size: 16px;
2728
2800
  }
2729
2801
  }
2730
2802
  @media screen and (orientation: landscape) and (min-height: 600px) {
@@ -1,5 +1,5 @@
1
1
 
2
- @import 'ej2-base/styles/material3-definition.scss';
2
+
3
3
  @import 'calendar/material3.scss';
4
4
  @import 'timepicker/material3.scss';
5
5
  @import 'datepicker/material3.scss';