devextreme-themebuilder 23.2.6 → 24.1.2-beta

package/data/migration-metadata/migration-metadata.js

@@ -1,120 +1,120 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    generic: [
-        '@radiogroup-checked-bg',
-        '@radiogroup-border-color',
-        '@radiogroup-bg',
-        '@radiobutton-active-bg',
-        '@radiogroup-hover-border-color',
-        '@radiobutton-focused-border-color',
-        '@accordion-color',
-        '@accordion-item-focused-border-color',
-        '@accordion-background-color',
-        '@accordion-title-active-color',
-        '@accordion-item-hover-bg',
-        '@accordion-title-active-bg',
-        '@checkbox-border-color',
-        '@checkbox-focused-borderd-color',
-        '@checkbox-bg',
-        '@checkbox-hover-border-color',
-        '@checkbox-active-icon-bg',
-        '@base-invalid-color',
-        '@base-invalid-faded-border-color',
-        '@list-border-color',
-        '@list-normal-color',
-        '@list-item-hover-bg',
-        '@list-item-focused-selected-bg',
-        '@list-focused-bg',
-        '@dropdowneditor-button-hover-bg',
-        '@dropdowneditor-button-active-bg',
-        '@tabs-border-color',
-        '@tabs-focused-border-color',
-        '@tabs-tab-hover-bg',
-        '@switch-border-color',
-        '@switch-handle-active-bg',
-        '@switch-hover-border-color',
-        '@switch-focused-border-color',
-        '@switch-container-active-bg',
-        '@switch-active-border-color',
-        '@datagrid-base-color',
-        '@datagrid-base-background-color',
-        '@datagrid-border-color',
-        '@datagrid-hover-bg',
-        '@datagrid-row-hovered-color',
-        '@datagrid-nodata-color',
-        '@datagrid-link-color',
-        '@datagrid-columnchooser-bg',
-        '@PIVOTGRID_BORDER_COLOR',
-        '@PIVOTGRID_DATA_AREA_COLOR',
-        '@scheduler-cell-hover-bg',
-        '@SCHEDULER_PANEL_TEXT_COLOR',
-        '@SCHEDULER_WORKSPACE_BACKGROUND_COLOR',
-        '@SCHEDULER_WORKSPACE_ACCENT_COLOR',
-        '@menu-popup-bg',
-        '@menu-item-hover-bg',
-        '@menu-color',
-        '@menu-item-hovered-color',
-        '@menu-popup-border-color',
-        '@calendar-color',
-        '@calendar-hover-bg',
-        '@calendar-border-color',
-        '@calendar-cell-active-bg',
-        '@treeview-hover-bg',
-        '@treeview-border-color',
-        '@form-field-item-color',
-        '@filterbuilder-bg',
-    ],
-    material: [
-        '@radiogroup-checked-bg',
-        '@radiogroup-border-color',
-        '@radiogroup-bg',
-        '@accordion-color',
-        '@accordion-background-color',
-        '@accordion-title-active-color',
-        '@accordion-item-hover-bg',
-        '@accordion-title-active-bg',
-        '@checkbox-border-color',
-        '@checkbox-bg',
-        '@checkbox-hover-border-color',
-        '@base-invalid-color',
-        '@base-invalid-faded-border-color',
-        '@list-border-color',
-        '@list-normal-color',
-        '@list-item-hover-bg',
-        '@list-item-focused-selected-bg',
-        '@datagrid-base-color',
-        '@datagrid-base-background-color',
-        '@datagrid-border-color',
-        '@datagrid-hover-bg',
-        '@datagrid-row-hovered-color',
-        '@datagrid-nodata-color',
-        '@datagrid-link-color',
-        '@datagrid-columnchooser-bg',
-        '@PIVOTGRID_BORDER_COLOR',
-        '@PIVOTGRID_DATA_AREA_COLOR',
-        '@scheduler-cell-hover-bg',
-        '@SCHEDULER_PANEL_TEXT_COLOR',
-        '@SCHEDULER_WORKSPACE_BACKGROUND_COLOR',
-        '@SCHEDULER_WORKSPACE_ACCENT_COLOR',
-        '@menu-popup-bg',
-        '@menu-item-hover-bg',
-        '@menu-color',
-        '@menu-popup-border-color',
-        '@calendar-color',
-        '@calendar-hover-bg',
-        '@calendar-cell-active-bg',
-        '@treeview-hover-bg',
-        '@treeview-border-color',
-        '@form-field-item-color',
-        '@filterbuilder-bg',
-        '@datagrid-chevron-icon-color',
-        '@datagrid-filter-row-background-color',
-        '@datagrid-active-header-filter-icon-color',
-        '@datagrid-filter-panel-color',
-        '@pivotgrid-chevron-icon-color',
-        '@menu-item-expanded-color',
-        '@numberbox-spin-icon-color',
-        '@treeview-spin-icon-color',
-    ],
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    generic: [
+        '@radiogroup-checked-bg',
+        '@radiogroup-border-color',
+        '@radiogroup-bg',
+        '@radiobutton-active-bg',
+        '@radiogroup-hover-border-color',
+        '@radiobutton-focused-border-color',
+        '@accordion-color',
+        '@accordion-item-focused-border-color',
+        '@accordion-background-color',
+        '@accordion-title-active-color',
+        '@accordion-item-hover-bg',
+        '@accordion-title-active-bg',
+        '@checkbox-border-color',
+        '@checkbox-focused-borderd-color',
+        '@checkbox-bg',
+        '@checkbox-hover-border-color',
+        '@checkbox-active-icon-bg',
+        '@base-invalid-color',
+        '@base-invalid-faded-border-color',
+        '@list-border-color',
+        '@list-normal-color',
+        '@list-item-hover-bg',
+        '@list-item-focused-selected-bg',
+        '@list-focused-bg',
+        '@dropdowneditor-button-hover-bg',
+        '@dropdowneditor-button-active-bg',
+        '@tabs-border-color',
+        '@tabs-focused-border-color',
+        '@tabs-tab-hover-bg',
+        '@switch-border-color',
+        '@switch-handle-active-bg',
+        '@switch-hover-border-color',
+        '@switch-focused-border-color',
+        '@switch-container-active-bg',
+        '@switch-active-border-color',
+        '@datagrid-base-color',
+        '@datagrid-base-background-color',
+        '@datagrid-border-color',
+        '@datagrid-hover-bg',
+        '@datagrid-row-hovered-color',
+        '@datagrid-nodata-color',
+        '@datagrid-link-color',
+        '@datagrid-columnchooser-bg',
+        '@PIVOTGRID_BORDER_COLOR',
+        '@PIVOTGRID_DATA_AREA_COLOR',
+        '@scheduler-cell-hover-bg',
+        '@SCHEDULER_PANEL_TEXT_COLOR',
+        '@SCHEDULER_WORKSPACE_BACKGROUND_COLOR',
+        '@SCHEDULER_WORKSPACE_ACCENT_COLOR',
+        '@menu-popup-bg',
+        '@menu-item-hover-bg',
+        '@menu-color',
+        '@menu-item-hovered-color',
+        '@menu-popup-border-color',
+        '@calendar-color',
+        '@calendar-hover-bg',
+        '@calendar-border-color',
+        '@calendar-cell-active-bg',
+        '@treeview-hover-bg',
+        '@treeview-border-color',
+        '@form-field-item-color',
+        '@filterbuilder-bg',
+    ],
+    material: [
+        '@radiogroup-checked-bg',
+        '@radiogroup-border-color',
+        '@radiogroup-bg',
+        '@accordion-color',
+        '@accordion-background-color',
+        '@accordion-title-active-color',
+        '@accordion-item-hover-bg',
+        '@accordion-title-active-bg',
+        '@checkbox-border-color',
+        '@checkbox-bg',
+        '@checkbox-hover-border-color',
+        '@base-invalid-color',
+        '@base-invalid-faded-border-color',
+        '@list-border-color',
+        '@list-normal-color',
+        '@list-item-hover-bg',
+        '@list-item-focused-selected-bg',
+        '@datagrid-base-color',
+        '@datagrid-base-background-color',
+        '@datagrid-border-color',
+        '@datagrid-hover-bg',
+        '@datagrid-row-hovered-color',
+        '@datagrid-nodata-color',
+        '@datagrid-link-color',
+        '@datagrid-columnchooser-bg',
+        '@PIVOTGRID_BORDER_COLOR',
+        '@PIVOTGRID_DATA_AREA_COLOR',
+        '@scheduler-cell-hover-bg',
+        '@SCHEDULER_PANEL_TEXT_COLOR',
+        '@SCHEDULER_WORKSPACE_BACKGROUND_COLOR',
+        '@SCHEDULER_WORKSPACE_ACCENT_COLOR',
+        '@menu-popup-bg',
+        '@menu-item-hover-bg',
+        '@menu-color',
+        '@menu-popup-border-color',
+        '@calendar-color',
+        '@calendar-hover-bg',
+        '@calendar-cell-active-bg',
+        '@treeview-hover-bg',
+        '@treeview-border-color',
+        '@form-field-item-color',
+        '@filterbuilder-bg',
+        '@datagrid-chevron-icon-color',
+        '@datagrid-filter-row-background-color',
+        '@datagrid-active-header-filter-icon-color',
+        '@datagrid-filter-panel-color',
+        '@pivotgrid-chevron-icon-color',
+        '@menu-item-expanded-color',
+        '@numberbox-spin-icon-color',
+        '@treeview-spin-icon-color',
+    ],
+};

package/data/scss/widgets/base/_contextMenu.scss

@@ -11,7 +11,7 @@
   }
 
   .dx-menu-item .dx-submenu {
-    position: absolute;
+    position: fixed;
     z-index: 1003;
   }
 

package/data/scss/widgets/base/_drawer.scss

@@ -5,6 +5,12 @@
 .dx-drawer {
   height: 100%;
   width: 100%;
+
+  &:not(.dx-drawer-opened) > {
+    .dx-drawer-wrapper > .dx-drawer-panel-content:not(.dx-drawer-panel-content-has-min-size) {
+      visibility: hidden;
+    }
+  }
 }
 
 .dx-drawer-wrapper {

package/data/scss/widgets/base/_fileUploader.scss

@@ -66,6 +66,12 @@
   }
 }
 
+.dx-fileuploader-dragover {
+  .dx-fileuploader-input::-webkit-file-upload-button {
+    width: 100%;
+  }
+}
+
 .dx-fileuploader-content {
   display: table-row-group;
   vertical-align: middle;

package/data/scss/widgets/base/_form.scss

@@ -119,8 +119,9 @@
   margin: 0;
 }
 
-.dx-form-group-caption {
-  font-size: 20px;
+.dx-form-group-custom-caption {
+  display: flex;
+  align-items: center;
 }
 
 .dx-form-group-with-caption {

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

@@ -15,6 +15,13 @@
   flex: 0 0 auto;
 }
 
+// NOTE: a11y aria-live container must be visible to allow screen readers read it
+.dx-gridbase-a11y-status-container {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
 @mixin grid-base($widget-name) {
   $grid-cell-padding: 7px;
   $grid-texteditor-input-padding: 32px;

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

@@ -121,7 +121,14 @@
 .dx-icon-clearcircle,
 .dx-icon-accountbox,
 .dx-icon-ordersbox,
-.dx-icon-arrowback {
+.dx-icon-arrowback,
+.dx-icon-pinmap,
+.dx-icon-handlevertical,
+.dx-icon-handlehorizontal,
+.dx-icon-triangleup,
+.dx-icon-triangledown,
+.dx-icon-triangleright,
+.dx-icon-triangleleft {
   background-position: 0 0;
   background-repeat: no-repeat;
 }
@@ -440,7 +447,7 @@ $icons: (
     "taskstop": '\f15e',
     "clearcircle": '\f15f',
     "send": '\f160',
-    "pinmap": '\f161',
+    "handlevertical":'\f161',
     "photooutline": '\f162',
     "panelright": '\f163',
     "panelleft": '\f164',
@@ -449,6 +456,11 @@ $icons: (
     "login": '\f167',
     "eyeopen": '\f168',
     "eyeclose": '\f169',
+    "handlehorizontal":'\f16a',
+    "triangleup":'\f16b',
+    "triangledown":'\f16c',
+    "triangleright":'\f16d',
+    "triangleleft":'\f16e',
     "expandform": '\f170',
     "description": '\f171',
     "belloutline": '\f172',
@@ -458,6 +470,7 @@ $icons: (
     "dataarea": '\f176',
     "datausage": '\f177',
     "datapie": '\f178',
+    "pinmap": '\f179',
 );
 
 // stylelint-enable

package/data/scss/widgets/base/_menuBase.scss

@@ -6,6 +6,7 @@
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   text-align: start;
+  box-sizing: content-box;
 
   .dx-menu-items-container,
   .dx-menu-item-wrapper {
@@ -77,6 +78,10 @@
         }
       }
     }
+
+    .dx-submenu {
+      box-sizing: content-box;
+    }
   }
 
   &.dx-rtl {
@@ -86,4 +91,19 @@
       }
     }
   }
+
+  &.dx-overlay-content .dx-scrollable {
+    overflow: visible;
+
+    .dx-scrollable-content {
+      min-height: auto;
+
+      // NOTE: to prevent bug with simulated strategy on Windows and monitor scale 150% (nested submenus are not displayed in some cases)
+      transform: none !important; // stylelint-disable-line declaration-no-important
+    }
+
+    .dx-scrollable-container {
+      overscroll-behavior: contain;
+    }
+  }
 }

package/data/scss/widgets/base/{_splitter.scss → _splitterBar.scss}

@@ -15,7 +15,7 @@
     width: 7px;
     cursor: col-resize;
 
-    .dx-splitter {
+    .dx-splitter-bar {
       height: 100%;
       width: 1px;
       display: block;

package/data/scss/widgets/base/_validation.scss

@@ -12,19 +12,18 @@
 }
 
 @mixin dx-modern-styles-validation(
-  $validation-message-font-size, 
+  $validation-message-font-size,
   $validation-message-line-height,
   $filled-texteditor-input-horizontal-padding,
-  $validation-message-padding,
   $validationsummary-item-margin,
-  $validation-message-vertical-padding, 
+  $validation-message-vertical-padding,
   $validation-message-horizontal-padding,
 ) {
   .dx-invalid-message > .dx-overlay-content {
     padding: $validation-message-vertical-padding $validation-message-horizontal-padding;
     line-height: $validation-message-line-height;
     font-size: $validation-message-font-size;
-  
+
     .dx-invalid-message-top &,
     .dx-invalid-message-bottom & {
       .dx-editor-filled &,
@@ -34,11 +33,11 @@
       }
     }
   }
-  
+
   .dx-validationsummary > .dx-validationsummary-item:not(:last-child) {
     margin-bottom: $validationsummary-item-margin;
   }
-  
+
   .dx-form-validation-summary {
     margin-top: 20px;
   }

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

@@ -49,11 +49,10 @@
   .dx-calendar-navigator-previous-view,
   .dx-calendar-navigator-next-view {
     flex-shrink: 0;
-  } 
+  }
 }
 
 @mixin dx-calendar-body-mixin(
-  $cell-other-color,
   $week-number-cell-color,
   $week-number-cell-bg,
   $week-number-cell-border-radius,

package/data/scss/widgets/base/{_checkBox.scss → checkBox/_index.scss}

@@ -1,3 +1,4 @@
+@use "../mixins" as *;
 @use "./mixins" as *;
 
 // adduse

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

@@ -0,0 +1,42 @@
+@use "sass:math";
+@use "../icons" as *;
+
+@mixin dx-checkbox-icon-centered(
+  $icon-height,
+  $icon-width,
+  $font-size: inherit,
+) {
+  &::before {
+    position: relative;
+    display: block;
+    width: $icon-width;
+    height: $icon-height;
+    top: 50%;
+    margin-top: math.div(-$icon-height, 2);
+    inset-inline-start: 50%;
+    margin-inline-start: math.div(-$icon-width, 2);
+    font-size: $font-size,
+  }
+}
+
+@mixin dx-checkbox-icon-indeterminate(
+  $color,
+  $color-bg,
+  $icon-height,
+  $icon-width,
+  $icon-border-radius,
+) {
+  .dx-checkbox-icon {
+    .dx-checkbox-indeterminate & {
+      color: $color;
+    
+      @include dx-checkbox-icon-centered($icon-height, $icon-width);
+
+      &::before {
+        content: '';
+        background-color: $color-bg;
+        border-radius: $icon-border-radius;
+      }
+    }
+  }
+}

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

@@ -152,7 +152,7 @@
 
   .dx-splitter-wrapper.dx-splitter-initial,
   .dx-splitter-wrapper.dx-splitter-inactive {
-    right: 3px;  // (dx-splitter-border width - dx-splitter width) / 2
+    right: 3px;  // (dx-splitter-border width - dx-splitter-bar width) / 2
   }
 
   .dx-filemanager-container {
@@ -174,7 +174,7 @@
     }
 
     .dx-drawer-opened {
-      .dx-splitter.dx-state-disabled {
+      .dx-splitter-bar.dx-state-disabled {
         width: 1px;
       }
     }

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

@@ -44,7 +44,7 @@
     }
   }
 
-  .dx-splitter-wrapper .dx-splitter-border .dx-splitter {
+  .dx-splitter-wrapper .dx-splitter-border .dx-splitter-bar {
     width: 2px;
   }
 

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

@@ -46,13 +46,9 @@ $agenda-appointment-recurrence-icon-color: null !default;
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg
 );
 
-$scheduler-default-header-height: 56px;
-
 $scheduler-appointment-min-size: 4px;
 $scheduler-appointment-content-padding: 5px 7px;
 $scheduler-appointment-reduced-content-padding: 40px;
-$scheduler-appointment-recurrence-content-padding: 5px 25px 5px 7px;
-$scheduler-appointment-recurrence-content-padding-rtl: 5px 7px 5px 25px;
 
 $scheduler-hovered-appointment-top-shadow-size: 5px;
 $scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color;

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

@@ -38,7 +38,6 @@ $scheduler-workspace-date-table-cell-height: 50px;
 $scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5;
 $scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5;
 $scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height;
-$scheduler-vertical-group-header-content-top-offset: 16px;
 $scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px;
 $scheduler-group-header-table-cell-height: 30px;
 

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

@@ -0,0 +1,61 @@
+
+// adduse
+.dx-splitter {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  
+  .dx-splitter-item {
+    display: flex;
+    overflow: hidden;
+    flex: 1 1 auto;
+  }
+
+  .dx-splitter-item-hidden-content {
+    visibility: hidden;
+  }
+
+  .dx-splitter-item-content {
+    position: relative;
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+
+  &.dx-splitter-vertical {
+    flex-direction: column;
+  }
+}
+
+.dx-resize-handle {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+
+  .dx-resize-handle-collapse-prev-pane,
+  .dx-resize-handle-collapse-next-pane {
+    cursor: pointer;
+  }
+
+  &.dx-resize-handle-horizontal {
+    flex-direction: column;
+
+    &.dx-resize-handle-resizable {
+      cursor: col-resize;
+    }
+  }
+
+  &.dx-resize-handle-vertical {
+    flex-direction: row;
+    
+    &.dx-resize-handle-resizable {
+      cursor: row-resize;
+    }
+  }
+
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,24 @@
+@mixin resize-handle-states(
+  $color,
+  $background-color,
+  $color-hover,
+  $background-color-hover,
+  $color-focused,
+  $background-color-focused,
+) {
+  .dx-resize-handle {
+    color: $color;
+    background-color: $background-color;
+    
+    &.dx-state-hover {
+      color: $color-hover;
+      background-color: $background-color-hover;
+    }
+    
+    &.dx-state-active,
+    &.dx-state-focused {
+      color: $color-focused;
+      background-color: $background-color-focused;
+    }
+  }
+}