devextreme 23.1.2-beta → 23.1.3

package/renovation/viz/common/renderers/base_graphics_props.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/base_graphics_props.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/renderers/base_props.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/base_props.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/renderers/gray_scale_filter.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/gray_scale_filter.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/renderers/pattern.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/pattern.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/renderers/shadow_filter.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/shadow_filter.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/renderers/svg_path.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/svg_path.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/renderers/svg_rect.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/svg_rect.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/renderers/svg_root.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/svg_root.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/renderers/svg_text.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/svg_text.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/renderers/types.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/types.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/renderers/utils.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/renderers/utils.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/tooltip.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/tooltip.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/tooltip_utils.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/tooltip_utils.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/types.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/types.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/common/utils.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/common/utils.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/sparklines/bullet.j.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/sparklines/bullet.j.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/sparklines/bullet.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/sparklines/bullet.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/sparklines/types.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/sparklines/types.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/renovation/viz/sparklines/utils.js

@@ -1,7 +1,7 @@
 /**
  * DevExtreme (renovation/viz/sparklines/utils.js)
- * Version: 23.1.2
- * Build date: Wed May 17 2023
+ * Version: 23.1.3
+ * Build date: Fri Jun 09 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/scss/widgets/base/calendar/_calendar.scss

@@ -8,9 +8,14 @@
 
   position: relative;
   display: flex;
+  direction: ltr;
   flex-direction: column;
   justify-content: space-between;
   border: 1px solid transparent;
+
+  &.dx-rtl {
+    direction: rtl;
+  }
 }
 
 .dx-calendar-views-wrapper {
@@ -22,7 +27,6 @@
 .dx-calendar-navigator {
   display: flex;
   justify-content: space-between;
-  direction: ltr;
 
   .dx-calendar-caption-button {
     flex-grow: 1;
@@ -63,7 +67,6 @@
   table {
     width: 100%;
     height: 100%;
-    direction: ltr;
     table-layout: fixed;
     border-spacing: 0;
     line-height: normal;
@@ -80,12 +83,19 @@
 
     @include dx-overflow();
   }
+}
 
-  .dx-calendar-week-number-cell {
+.dx-calendar-week-number-cell {
+  position: relative;
+
+  span {
+    position: absolute;
     display: flex;
-    height: 100%;
     align-items: center;
     justify-content: center;
+    text-align: center;
+    width: 2em;
+    inset: 0;
   }
 }
 
@@ -131,29 +141,3 @@
     }
   }
 }
-
-.dx-calendar-range {
-  .dx-calendar-cell {
-    &::before {
-      content: "";
-      position: absolute;
-      z-index: 1;
-      inset-inline-start: 50%;
-      inset-inline-end: 0;
-    }
-  }
-}
-
-.dx-rtl {
-  &.dx-calendar {
-    .dx-calendar-body {
-      table {
-        left: 0;
-      }
-
-      .dx-widget {
-        direction: ltr;
-      }
-    }
-  }
-}

package/scss/widgets/base/calendar/_mixins.scss

@@ -11,20 +11,16 @@
 ) {
   .dx-calendar {
     width: $calendar-width;
-    min-width: $calendar-width;
     height: $calendar-height;
-    min-height: $calendar-height;
     background-color: $calendar-bg;
     gap: $calendar-element-padding;
 
     &.dx-calendar-with-footer {
       height: $calendar-height + $calendar-element-padding + $footer-button-height;
-      min-height: $calendar-height + $calendar-element-padding + $footer-button-height;
     }
 
     &.dx-calendar-multiview {
       width: $calendar-width * 2;
-      min-width: $calendar-width * 2;
     }
 
     &.dx-invalid {
@@ -46,24 +42,6 @@
   $header-color,
 ) {
   .dx-calendar-body {
-    table {
-      .dx-week-number-header {
-        font-size: $cell-font-size;
-        width: 2.5em;
-      }
-
-      .dx-calendar-week-number-cell {
-        color: $week-number-cell-color;
-        background-color: $week-number-cell-bg;
-        width: 2em;
-        margin-right: 0.5em;
-
-        .dx-rtl & {
-          margin-left: 0.5em;
-        }
-      }
-    }
-
     thead {
       tr {
         height: 2em;
@@ -78,22 +56,41 @@
       tr {
         &:first-of-type {
           .dx-calendar-week-number-cell {
-            border-top-left-radius: $week-number-cell-border-radius;
-            border-top-right-radius: $week-number-cell-border-radius;
+            span {
+              border-start-start-radius: $week-number-cell-border-radius;
+              border-start-end-radius: $week-number-cell-border-radius;
+            }
           }
         }
 
         &:last-of-type {
           .dx-calendar-week-number-cell {
-            border-bottom-left-radius: $week-number-cell-border-radius;
-            border-bottom-right-radius: $week-number-cell-border-radius;
+            span {
+              border-end-start-radius: $week-number-cell-border-radius;
+              border-end-end-radius: $week-number-cell-border-radius;
+            }
           }
         }
       }
     }
 
-    td {
+    .dx-week-number-header {
       font-size: $cell-font-size;
+      width: 2.5em;
+    }
+  }
+
+  .dx-calendar-cell {
+    font-size: $cell-font-size;
+  }
+
+  .dx-calendar-week-number-cell {
+    color: $week-number-cell-color;
+    width: 2em;
+
+    span {
+      background-color: $week-number-cell-bg;
+      inset-inline-start: 0;
     }
   }
 }
@@ -103,7 +100,7 @@
   $cell-text-color,
   $base-border-radius,
   $base-accent,
-  $cell-hover-bg-color,
+  $cell-hover-bg,
   $cell-hover-color,
   $cell-active-bg,
   $cell-selected-bg,
@@ -111,6 +108,8 @@
   $cell-contoured-border-color,
   $calendar-cell-other-color,
   $calendar-cell-other-hover-color,
+  $calendar-cell-hover-border-color,
+  $calendar-cell-range-border-radius,
 ) {
   .dx-calendar-cell {
     color: $cell-text-color;
@@ -141,7 +140,7 @@
 
     &.dx-state-hover {
       span {
-        background-color: $cell-hover-bg-color;
+        background-color: $cell-hover-bg;
         color: $cell-hover-color;
       }
     }
@@ -165,82 +164,6 @@
       }
     }
 
-    &.dx-calendar-cell-in-range,
-    &.dx-calendar-cell-in-range.dx-state-hover,
-    &.dx-calendar-cell-in-range.dx-state-active {
-      &::before {
-        width: 100%;
-        border-radius: 0;
-      }
-    }
-
-    &.dx-calendar-range-start-date,
-    &.dx-calendar-range-start-date.dx-state-hover,
-    &.dx-calendar-range-start-date.dx-state-active {
-      &::before {
-        width: 50%;
-        inset-inline-start: 50%;
-        inset-inline-end: 0;
-      }
-    }
-
-    &.dx-calendar-range-end-date,
-    &.dx-calendar-range-end-date.dx-state-hover,
-    &.dx-calendar-range-end-date.dx-state-active {
-      &::before {
-        width: 50%;
-      }
-    }
-
-    &.dx-state-hover,
-    &.dx-state-active {
-      &::before {
-        width: calc(50% + 1em);
-        border-top-right-radius: 50%;
-        border-bottom-right-radius: 50%;
-      }
-    }
-
-    &.dx-calendar-cell-in-range {
-      &::before {
-        height: 2em;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
-        width: 100%;
-        background-color: $cell-hover-bg-color;
-      }
-
-      &.dx-calendar-cell-range-hover-start {
-        &::before {
-          width: calc(50% + 1em);
-          inset-inline-start: auto;
-          inset-inline-end: 0;
-          border-top-left-radius: $cell-border-radius;
-          border-bottom-left-radius: $cell-border-radius;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-
-      &.dx-calendar-cell-range-hover-end {
-        &::before {
-          width: calc(50% + 1em);
-          inset-inline-start: 0;
-          inset-inline-end: 0;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-          border-top-right-radius: $cell-border-radius;
-          border-bottom-right-radius: $cell-border-radius;
-        }
-      }
-
-      &.dx-calendar-cell-range-hover-start.dx-calendar-cell-range-hover-end {
-        &::before {
-          content: none;
-        }
-      }
-    }
-
     &.dx-calendar-other-view,
     &.dx-calendar-empty-cell {
       color: $calendar-cell-other-color;
@@ -260,11 +183,32 @@
     }
 
     &.dx-calendar-other-view {
+      &::before,
+      &::after {
+        content: none;
+      }
+
       &.dx-calendar-range-start-date,
       &.dx-calendar-range-end-date,
-      &.dx-calendar-cell-in-range {
-        &::before {
-          content: none;
+      &.dx-calendar-cell-in-range,
+      &.dx-calendar-cell-range-hover {
+        &.dx-state-hover,
+        &.dx-state-active {
+          span {
+            color: $calendar-cell-other-hover-color;
+          }
+        }
+
+        &.dx-state-hover {
+          span {
+            background-color: $cell-hover-bg;
+          }
+        }
+
+        &.dx-state-active {
+          span {
+            background-color: $cell-active-bg;
+          }
         }
 
         span {
@@ -294,3 +238,141 @@
   }
 }
 
+@mixin dx-calendar-cell-in-range-mixin(
+  $pseudo: "::before",
+  $cell-hover-bg,
+  $calendar-cell-hover-border-color,
+  $calendar-cell-range-border-radius,
+  $calendar-range-cell-border-width,
+  $cell: '.dx-calendar-cell-in-range',
+  $startCell: '.dx-calendar-range-start-date',
+  $endCell: '.dx-calendar-range-end-date',
+) {
+  #{$cell} {
+    &#{$pseudo} {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      height: 2em;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      width: 100%;
+      background-color: $cell-hover-bg;
+      border-width: $calendar-range-cell-border-width;
+      border-style: dashed;
+      border-color: $calendar-cell-hover-border-color transparent;
+    }
+
+    &#{$startCell},
+    &#{$endCell},
+    &.dx-calendar-cell-start,
+    &.dx-calendar-cell-end,
+    &.dx-calendar-cell-start-in-row,
+    &.dx-calendar-cell-end-in-row {
+      &#{$pseudo} {
+        width: calc(50% + 1em);
+      }
+    }
+
+    &#{$startCell} {
+      &#{$pseudo} {
+        inset-inline-start: auto;
+        border-start-start-radius: $calendar-cell-range-border-radius;
+        border-end-start-radius: $calendar-cell-range-border-radius;
+        border-inline-start-color: $calendar-cell-hover-border-color;
+      }
+
+      &#{$endCell} {
+        &#{$pseudo} {
+          content: none;
+        }
+      }
+    }
+
+    &#{$endCell} {
+      &#{$pseudo} {
+        border-start-end-radius: $calendar-cell-range-border-radius;
+        border-end-end-radius: $calendar-cell-range-border-radius;
+        border-inline-end-color: $calendar-cell-hover-border-color;
+      }
+    }
+
+    &.dx-calendar-cell-start-in-row {
+      &#{$pseudo} {
+        inset-inline-start: auto;
+        border-start-start-radius: $calendar-cell-range-border-radius;
+        border-end-start-radius: $calendar-cell-range-border-radius;
+        border-inline-start-color: $calendar-cell-hover-border-color;
+      }
+
+      &#{$endCell},
+      &.dx-calendar-cell-end {
+        &#{$pseudo} {
+          width: 2em;
+          inset-inline-start: calc(50% - 1em);
+          inset-inline-end: auto;
+        }
+      }
+    }
+
+    &.dx-calendar-cell-end-in-row {
+      &#{$pseudo} {
+        border-start-end-radius: $calendar-cell-range-border-radius;
+        border-end-end-radius: $calendar-cell-range-border-radius;
+        border-inline-end-color: $calendar-cell-hover-border-color;
+      }
+
+      &#{$startCell} {
+        &#{$pseudo} {
+          width: 2em;
+          inset-inline-start: calc(50% - 1em);
+          inset-inline-end: auto;
+        }
+      }
+    }
+
+    &.dx-calendar-cell-start {
+      &#{$pseudo} {
+        inset-inline-start: auto;
+        border-start-start-radius: $calendar-cell-range-border-radius;
+        border-end-start-radius: $calendar-cell-range-border-radius;
+        border-inline-start-color: $calendar-cell-hover-border-color;
+      }
+
+      &#{$endCell} {
+        &#{$pseudo} {
+          width: 2em;
+          inset-inline-start: calc(50% - 1em);
+          inset-inline-end: auto;
+          border-start-end-radius: $calendar-cell-range-border-radius;
+          border-end-end-radius: $calendar-cell-range-border-radius;
+          border-inline-end-color: $calendar-cell-hover-border-color;
+        }
+      }
+
+      &.dx-calendar-cell-end-in-row {
+        &#{$pseudo} {
+          width: 2em;
+          inset-inline-start: calc(50% - 1em);
+          inset-inline-end: auto;
+        }
+      }
+    }
+
+    &.dx-calendar-cell-end {
+      &#{$pseudo} {
+        border-start-end-radius: $calendar-cell-range-border-radius;
+        border-end-end-radius: $calendar-cell-range-border-radius;
+        border-inline-end-color: $calendar-cell-hover-border-color;
+      }
+
+      &#{$startCell} {
+        &#{$pseudo} {
+          width: 2em;
+          inset-inline-start: calc(50% - 1em);
+          inset-inline-end: auto;
+        }
+      }
+    }
+  }
+}