devextreme-themebuilder 24.2.6 → 25.1.1-alpha

package/data/metadata/dx-theme-builder-metadata.js

@@ -3387,7 +3387,7 @@ exports.metadata = {
         }
     ]
 };
-exports.version = '24.2.6';
+exports.version = '25.1.1-alpha';
 exports.browsersList = [
     'last 2 versions',
     'ios > 9',
@@ -3662,6 +3662,7 @@ exports.dependencies = {
         'slider'
     ],
     'speeddialaction': [],
+    'stepper': [],
     'splitter': [],
     'switch': [
         'validation'

package/data/scss/widgets/base/_gridBase.scss

@@ -532,7 +532,7 @@
         width: $grid-command-expand-column-width;
         min-width: $grid-command-expand-column-width;
         max-width: $grid-command-expand-column-width;
-        z-index: 1;
+        z-index: 3;
 
         @include user-select(none);
       }

package/data/scss/widgets/base/_icons.scss

@@ -118,6 +118,7 @@
 .dx-icon-taskinprogress,
 .dx-icon-taskstop,
 .dx-icon-taskhelpneeded,
+.dx-icon-today,
 .dx-icon-clearcircle,
 .dx-icon-accountbox,
 .dx-icon-ordersbox,
@@ -135,7 +136,10 @@
 .dx-icon-fixcolumnleft,
 .dx-icon-fixcolumnright,
 .dx-icon-stickcolumn,
-.dx-icon-unfixcolumn {
+.dx-icon-unfixcolumn,
+.dx-icon-packagebox,
+.dx-icon-checkmarkcircle,
+.dx-icon-clipboardtasklist {
   background-position: 0 0;
   background-repeat: no-repeat;
 }
@@ -481,6 +485,11 @@ $icons: (
     "datausage": "\f177",
     "datapie": "\f178",
     "pinmap": "\f179",
+    "csv": "\f181",
+    "packagebox": "\f182",
+    "checkmarkcircle": "\f183",
+    "clipboardtasklist": "\f184",
+    "today": "\f185",
     "unfixcolumn":"\f17a",
     "fixcolumnleft":"\f17b",
     "stickcolumn":"\f17c",

package/data/scss/widgets/base/scheduler/_common.scss

@@ -7,6 +7,15 @@ $scheduler-appointment-collector-margin: 3px;
 $scheduler-appointment-collector-height: 20px;
 $scheduler-popup-scrollable-content-padding: 20px;
 
+// NOTE: a11y aria-live container must be visible to allow screen readers read it
+.dx-scheduler-a11y-status-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: polygon(0 0);
+}
+
 .dx-scheduler-appointment-popup {
   .dx-popup-content {
     padding-top: 0;

package/data/scss/widgets/base/scheduler/layout/_header.scss

@@ -28,10 +28,17 @@ $arrow-down: "\f016";
 @mixin header-sizes(
   $height,
   $item-padding,
+  $border,
 ) {
-  height: $height;
-
   .dx-toolbar {
+    &:not(.dx-toolbar-multiline) {
+      @if $border {
+        height: $height - 2px;
+      } @else {
+        height: $height;
+      }
+    }
+
     .dx-toolbar-item-content,
     .dx-toolbar-menu-container {
       padding: $item-padding;

package/data/scss/widgets/base/scheduler/views/_index.scss

@@ -491,11 +491,13 @@ $scheduler-month-date-text-padding: 6px;
 }
 
 .dx-scheduler-all-day-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: $scheduler-panel-text-color;
   width: $scheduler-left-column-width;
   height: $scheduler-all-day-table-cell-height;
   position: relative;
-  line-height: $scheduler-all-day-table-cell-height;
   text-align: center;
   border-bottom: 2px solid $scheduler-base-border-color;
 
@@ -507,12 +509,10 @@ $scheduler-month-date-text-padding: 6px;
 
   .dx-scheduler-work-space-all-day-collapsed & {
     height: $scheduler-collapsed-all-day-table-cell-height;
-    line-height: $scheduler-collapsed-all-day-table-cell-height;
   }
 
   .dx-scheduler-work-space-vertical-grouped & {
     height: $scheduler-vertical-grouped-all-day-table-cell-height;
-    line-height: $scheduler-vertical-grouped-all-day-table-cell-height;
   }
 }
 
@@ -712,7 +712,6 @@ $scheduler-month-date-text-padding: 6px;
     .dx-scheduler-all-day-title {
       top: 0;
       height: 50px !important; // stylelint-disable-line declaration-no-important
-      line-height: 50px !important; // stylelint-disable-line declaration-no-important
       border-bottom: none;
     }
   }

package/data/scss/widgets/base/stepper/_index.scss

@@ -0,0 +1,7 @@
+@use "../mixins" as *;
+@use "layout/stepper" as *;
+@use "layout/connector" as *;
+@use "layout/step-list" as *;
+@use "layout/step" as *;
+
+// adduse

package/data/scss/widgets/base/stepper/_mixins.scss

@@ -0,0 +1,4 @@
+@import 'layout/stepper/mixins';
+@import 'layout/connector/mixins';
+@import 'layout/step-list/mixins';
+@import 'layout/step/mixins';

package/data/scss/widgets/base/stepper/layout/connector/_index.scss

@@ -0,0 +1,30 @@
+.dx-stepper-connector {
+  display: flex;
+  position: absolute;
+
+  .dx-stepper-connector-value {
+    transition: flex-grow 0.5s ease-in-out;
+  }
+
+  &.dx-stepper-connector-horizontal {
+    height: 2px;
+    width: 100%;
+
+    .dx-stepper-connector-value {
+      width: 0;
+      height: 100%;
+    }
+  }
+
+  &.dx-stepper-connector-vertical {
+    width: 2px;
+    height: 100%;
+    flex-direction: column;
+
+    .dx-stepper-connector-value {
+      height: 0;
+      width: 100%;
+    }
+  }
+}
+

package/data/scss/widgets/base/stepper/layout/connector/_mixins.scss

@@ -0,0 +1,21 @@
+@mixin connector(
+  $connector-background-color,
+  $background-color,
+  $margin-start,
+) {
+  .dx-stepper-connector {
+    background-color: $connector-background-color;
+  }
+
+  .dx-stepper-connector-value {
+    background-color: $background-color;
+  }
+
+  .dx-stepper-connector-horizontal {
+    margin-block-start: $margin-start;
+  }
+
+  .dx-stepper-connector-vertical {
+    margin-inline-start: $margin-start;
+  }
+}

package/data/scss/widgets/base/stepper/layout/step/_index.scss

@@ -0,0 +1,71 @@
+.dx-step {
+  position: relative;
+  flex: 1;
+  cursor: default;
+
+  &.dx-state-hover {
+    cursor: pointer;
+  }
+
+  &.dx-step-completed,
+  &.dx-step-selected {
+    .dx-step-text {
+      font-weight: 600;
+    }
+  }
+
+  &.dx-step-selected {
+    .dx-step-label {
+      font-weight: 600;
+    }
+  }
+}
+
+.dx-step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition-property: color, background-color, border-color;
+  transition-duration: .4s;
+  transition-timing-function: ease-in-out;
+  border-style: solid;
+  border-radius: 999em;
+}
+
+.dx-step-content {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.dx-step-label {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dx-step-title,
+.dx-step-optional-mark {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.dx-stepper-vertical {
+  .dx-step {
+    display: flex;
+  }
+
+  .dx-step-content {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .dx-step-title,
+  .dx-step-optional-mark {
+    text-align: start;
+  }
+}

package/data/scss/widgets/base/stepper/layout/step/_mixins.scss

@@ -0,0 +1,258 @@
+@mixin step(
+  $min-size,
+  $width,
+  $height,
+  $content-row-gap,
+  $content-column-gap,
+  $stepper-step-optional-mark-font-size,
+) {
+  .dx-stepper-horizontal {
+    .dx-step {
+      min-width: $min-size;
+    }
+  }
+
+  .dx-stepper-vertical {
+    .dx-step {
+      min-height: $min-size;
+    }
+  }
+
+  .dx-step-content {
+    row-gap: $content-row-gap;
+    column-gap: $content-column-gap;
+
+    .dx-step-optional-mark {
+      font-size: $stepper-step-optional-mark-font-size;
+    }
+  }
+
+  .dx-step-indicator {
+    z-index: 0;
+    width: $width;
+    height: $height;
+  }
+}
+
+@mixin step-states(
+  $background-color,
+  $background-color-hover,
+  $color-selected,
+  $background-color-selected,
+  $background-color-selected-hover,
+  $border-color,
+  $border-color-hover,
+  $border-color-focused,
+  $border-color-selected,
+  $invalid-color,
+  $invalid-color-hover,
+  $disabled-color,
+  $disabled-bg,
+) {
+  .dx-step-indicator {
+    background-color: $background-color;
+    border-color: $border-color;
+    box-shadow: 0 0 0 8px $background-color;
+  }
+
+  .dx-step {
+    &.dx-state-hover {
+      .dx-step-indicator {
+        border-color: $border-color-hover;
+        background-color: $background-color-hover;
+      }
+
+      &.dx-step-completed,
+      &.dx-step-selected {
+        .dx-step-indicator {
+          border-color: $border-color-focused;
+          background-color: $background-color-selected-hover;
+        }
+
+        &.dx-step-invalid {
+          .dx-step-indicator {
+            color: $color-selected;
+            border-color: $invalid-color-hover;
+            background-color: $invalid-color-hover;
+          }
+        }
+      }
+
+      &.dx-step-invalid {
+        .dx-step-indicator {
+          color: $invalid-color-hover;
+        }
+
+        .dx-step-label {
+          color: $invalid-color-hover;
+        }
+      }
+    }
+
+    &.dx-state-active {
+      .dx-step-indicator {
+        background-color: $background-color-hover;
+      }
+    }
+
+    &.dx-step-invalid {
+      .dx-step-indicator {
+        color: $invalid-color;
+      }
+
+      .dx-step-label {
+        color: $invalid-color;
+      }
+    }
+
+    &.dx-step-completed {
+      .dx-step-indicator {
+        color: $color-selected;
+        border-color: $border-color-selected;
+        background-color: $background-color-selected;
+        box-shadow: 0 0 0 8px $background-color;
+      }
+
+      .dx-step-label {
+        color: $background-color-selected;
+      }
+
+      &.dx-step-invalid {
+        .dx-step-label {
+          color: $invalid-color;
+        }
+
+        .dx-step-indicator {
+          border-color: $invalid-color;
+          background-color: $invalid-color;
+          box-shadow: 0 0 0 8px $background-color;
+        }
+
+        &.dx-state-focused {
+          .dx-step-indicator {
+            border-color: $invalid-color-hover;
+            background-color: $invalid-color-hover;
+          }
+        }
+      }
+
+      &.dx-state-disabled {
+        .dx-step-indicator {
+          color: $disabled-color;
+          border-color: $disabled-bg;
+          background-color: $disabled-bg;
+        }
+
+        .dx-step-label {
+          color: $disabled-color;
+        }
+
+        &.dx-state-focused {
+          .dx-step-indicator {
+            border-color: $disabled-bg;
+            background-color: $disabled-bg;
+          }
+        }
+      }
+    }
+
+    &.dx-step-selected {
+      .dx-step-indicator {
+        color: $color-selected;
+        border-color: $border-color-selected;
+        background-color: $background-color-selected;
+        box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-selected, 0 0 0 8px $background-color;
+      }
+
+      .dx-step-label {
+        color: $background-color-selected;
+      }
+
+      &.dx-step-invalid {
+        .dx-step-label {
+          color: $invalid-color;
+        }
+
+        .dx-step-indicator {
+          border-color: $invalid-color;
+          background-color: $invalid-color;
+          box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $invalid-color, 0 0 0 8px $background-color;
+        }
+      }
+
+      &.dx-state-disabled {
+        .dx-step-indicator {
+          color: $disabled-color;
+          border-color: $disabled-bg;
+          background-color: $disabled-bg;
+        }
+
+        .dx-step-label {
+          color: $disabled-color;
+        }
+
+        &.dx-state-focused {
+          .dx-step-indicator {
+            border-color: $disabled-bg;
+            background-color: $disabled-bg;
+          }
+        }
+      }
+    }
+
+    &.dx-state-focused {
+      .dx-step-indicator {
+        box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-focused, 0 0 0 8px $background-color;
+      }
+
+      &.dx-step-selected,
+      &.dx-step-completed {
+        .dx-step-indicator {
+          background-color: $background-color-selected-hover;
+        }
+      }
+
+      &.dx-step-invalid {
+        .dx-step-indicator {
+          box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $invalid-color-hover, 0 0 0 8px $background-color;
+        }
+      }
+    }
+
+    &.dx-state-disabled {
+      .dx-step-indicator {
+        color: $disabled-color;
+        border-color: $disabled-bg;
+        background-color: $disabled-bg;
+      }
+
+      .dx-step-label {
+        color: $disabled-color;
+      }
+    }
+  }
+
+  .dx-stepper {
+    &.dx-state-focused {
+      .dx-step-selected {
+        .dx-step-indicator {
+          box-shadow: 0 0 0 8px $background-color;
+        }
+
+        &.dx-state-focused {
+          .dx-step-indicator {
+            box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-focused, 0 0 0 8px $background-color;
+          }
+
+          &.dx-step-invalid {
+            .dx-step-indicator {
+              border-color: $invalid-color-hover;
+              background-color: $invalid-color-hover;
+              box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $invalid-color-hover, 0 0 0 8px $background-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/data/scss/widgets/base/stepper/layout/step-list/_index.scss

@@ -0,0 +1,9 @@
+.dx-step-list {
+  display: flex;
+  width: 100%;
+
+  .dx-stepper-vertical & {
+    height: 100%;
+    flex-direction: column;
+  }
+}

package/data/scss/widgets/base/stepper/layout/step-list/_mixins.scss

@@ -0,0 +1 @@
+

package/data/scss/widgets/base/stepper/layout/stepper/_index.scss

@@ -0,0 +1,14 @@
+.dx-stepper {
+  display: flex;
+  position: relative;
+}
+
+.dx-stepper-vertical {
+  height: 100%;
+  align-items: center;
+}
+
+.dx-stepper-horizontal {
+  width: 100%;
+  justify-content: center;
+}

package/data/scss/widgets/base/stepper/layout/stepper/_mixins.scss

@@ -0,0 +1,7 @@
+@mixin stepper(
+  $margin,
+) {
+  .dx-stepper {
+    margin: $margin;
+  }
+}

package/data/scss/widgets/fluent/_index.scss

@@ -5,6 +5,7 @@
 @use "./button";
 @use "./buttonGroup";
 @use "./scrollView";
+@use "./stepper";
 @use "./splitter";
 @use "./checkBox";
 @use "./switch";

package/data/scss/widgets/fluent/menu/_index.scss

@@ -36,6 +36,7 @@
 
   .dx-menu-vertical {
     .dx-menu-item-popout {
+      margin-inline-start: $fluent-menu-icon-to-text-offset;
       display: flex;
       align-items: center;
       justify-content: center;

package/data/scss/widgets/fluent/scheduler/_index.scss

@@ -116,25 +116,26 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 }
 
 .dx-scheduler-all-day-title {
+  display: flex;
+  align-items: center;
+  justify-content: end;
   height: $fluent-scheduler-all-day-table-cell-height;
-  line-height: $fluent-scheduler-all-day-table-cell-height;
   font-size: $fluent-scheduler-all-day-title-font-size;
   border-bottom: baseScheduler.$scheduler-base-border;
   text-align: right;
   padding-right: $fluent-scheduler-agenda-time-panel-cell-padding;
-}
 
-.dx-scheduler-small {
-  .dx-scheduler-all-day-title {
+  .dx-rtl & {
+    justify-content: start;
+  }
+
+  .dx-scheduler-small & {
     font-size: $fluent-scheduler-all-day-title-font-size * 0.8;
     padding-right: 2px;
   }
-}
 
-.dx-scheduler-work-space-all-day-collapsed {
-  .dx-scheduler-all-day-title {
+  .dx-scheduler-work-space-all-day-collapsed & {
     height: $fluent-scheduler-collapsed-all-day-table-cell-height;
-    line-height: $fluent-scheduler-collapsed-all-day-table-cell-height;
   }
 }
 
@@ -441,6 +442,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   @include header-sizes(
     $fluent-scheduler-header-height,
     $fluent-scheduler-toolbar-item-offset,
+    baseScheduler.$scheduler-base-border,
   );
 
   .dx-scheduler-navigator-next,

package/data/scss/widgets/fluent/stepper/_colors.scss

@@ -0,0 +1,36 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+@use "../button/colors" as *;
+
+// adduse
+
+$stepper-step-bg: $base-typography-bg !default;
+$stepper-step-hover-bg: $button-normal-hover-bg !default;
+
+$stepper-step-color-selected: $base-inverted-text-color !default;
+$stepper-step-selected-bg: $button-default-bg !default;
+$stepper-step-selected-hover-bg: $button-default-hover-bg !default;
+
+$stepper-step-invalid-bg: $button-danger-bg !default;
+$stepper-step-invalid-hover-bg: $button-danger-hover-bg !default;
+
+$stepper-step-border-color: $base-border-color !default;
+$stepper-step-hover-border-color: $base-border-color-hover !default;
+
+$stepper-step-focused-border-color: $stepper-step-selected-hover-bg !default;
+$stepper-step-selected-border-color: $base-accent !default;
+
+$stepper-connector-bg: $base-border-color !default;
+$stepper-connector-value-bg: $base-accent !default;
+
+$stepper-step-disabled-text-color: $base-foreground-disabled !default;
+$stepper-step-disabled-bg: null !default;
+
+@if $mode == 'light' {
+  $stepper-step-disabled-bg: $base-background-disabled !default;
+}
+
+@if $mode == 'dark' {
+  $stepper-step-disabled-bg: $base-background-disabled !default;
+}