devextreme-themebuilder 25.1.7 → 25.2.2-beta

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

@@ -4965,7 +4965,7 @@ exports.metadata = {
         }
     ]
 };
-exports.version = '25.1.7';
+exports.version = '25.2.2-beta';
 exports.browsersList = [
     'last 2 versions',
     'ios > 9',
@@ -4973,6 +4973,7 @@ exports.browsersList = [
     'not dead'
 ];
 exports.dependencies = {
+    'validation': [],
     'loadindicator': [],
     'loadpanel': [
         'loadindicator'
@@ -4981,7 +4982,6 @@ exports.dependencies = {
         'loadindicator',
         'loadpanel'
     ],
-    'validation': [],
     'button': [
         'validation'
     ],
@@ -5066,6 +5066,9 @@ exports.dependencies = {
         'loadpanel',
         'scrollview'
     ],
+    'progressbar': [
+        'validation'
+    ],
     'chat': [
         'validation',
         'button',
@@ -5074,6 +5077,7 @@ exports.dependencies = {
         'loadpanel',
         'scrollview',
         'toolbar',
+        'progressbar',
         'textbox'
     ],
     'selectbox': [
@@ -5119,9 +5123,6 @@ exports.dependencies = {
         'datebox'
     ],
     'drawer': [],
-    'deferrendering': [
-        'loadindicator'
-    ],
     'dropdownbox': [
         'validation',
         'button',
@@ -5129,9 +5130,6 @@ exports.dependencies = {
         'loadindicator',
         'textbox'
     ],
-    'progressbar': [
-        'validation'
-    ],
     'fileuploader': [
         'validation',
         'button',
@@ -5269,6 +5267,10 @@ exports.dependencies = {
         'tooltip',
         'slider'
     ],
+    'speechtotext': [
+        'validation',
+        'button'
+    ],
     'speeddialaction': [],
     'stepper': [],
     'splitter': [],
@@ -5321,10 +5323,14 @@ exports.dependencies = {
         'popup',
         'scrollview',
         'toolbar',
+        'buttongroup',
+        'list',
+        'dropdownbutton',
+        'progressbar',
+        'textarea',
         'checkbox',
         'treeview',
         'numberbox',
-        'list',
         'selectbox',
         'calendar',
         'box',
@@ -5336,9 +5342,8 @@ exports.dependencies = {
         'form',
         'menu',
         'filterbuilder',
-        'buttongroup',
-        'dropdownbutton',
-        'sortable'
+        'sortable',
+        'toast'
     ],
     'treelist': [
         'loadindicator',
@@ -5395,8 +5400,6 @@ exports.dependencies = {
         'validation',
         'button',
         'popup',
-        'radiogroup',
-        'buttongroup',
         'loadindicator',
         'textbox',
         'numberbox',
@@ -5413,6 +5416,8 @@ exports.dependencies = {
         'tabs',
         'tabpanel',
         'form',
+        'radiogroup',
+        'buttongroup',
         'textarea',
         'tagbox',
         'switch',
@@ -5422,20 +5427,24 @@ exports.dependencies = {
         'toolbar'
     ],
     'filemanager': [
-        'toast',
-        'loadindicator',
         'validation',
         'button',
+        'loadindicator',
         'textbox',
-        'contextmenu',
         'checkbox',
         'treeview',
+        'contextmenu',
         'loadpanel',
-        'popup',
         'scrollview',
+        'popup',
+        'progressbar',
+        'fileuploader',
         'toolbar',
-        'numberbox',
+        'buttongroup',
         'list',
+        'dropdownbutton',
+        'textarea',
+        'numberbox',
         'selectbox',
         'calendar',
         'box',
@@ -5447,13 +5456,10 @@ exports.dependencies = {
         'form',
         'menu',
         'filterbuilder',
-        'buttongroup',
-        'dropdownbutton',
         'sortable',
+        'toast',
         'datagrid',
-        'drawer',
-        'progressbar',
-        'fileuploader'
+        'drawer'
     ],
     'diagram': [
         'loadindicator',
@@ -5504,11 +5510,16 @@ exports.dependencies = {
         'tabpanel',
         'contextmenu',
         'toolbar',
+        'buttongroup',
+        'dropdownbutton',
+        'progressbar',
+        'textarea',
         'treeview',
         'form',
         'menu',
         'filterbuilder',
         'sortable',
+        'toast',
         'treelist'
     ]
 };

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

@@ -100,6 +100,8 @@
 }
 
 .dx-fileuploader-file-container {
+  display: flex;
+  align-items: center;
   width: 100%;
   padding: 4px 0 4px;
 
@@ -108,8 +110,14 @@
     height: 28px;
     margin-right: 10px;
 
+    &.dx-fileuploader-cancel-button-position-end {
+      margin-right: 0;
+      margin-left: 4px;
+    }
+
     &.dx-state-invisible {
       margin-right: 0;
+      margin-left: 0;
     }
   }
 }
@@ -189,12 +197,19 @@
 }
 
 .dx-fileuploader-file-size {
-  margin-left: 4px;
+  padding-left: 4px;
   float: left;
   vertical-align: super;
   font-size: 10px;
 }
 
+.dx-fileuploader-file-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-right: 6px;
+}
+
 .dx-rtl {
   .dx-fileuploader,
   &.dx-fileuploader {
@@ -205,6 +220,11 @@
     .dx-fileuploader-file-container .dx-fileuploader-button {
       margin-left: 10px;
       margin-right: 0;
+
+      &.dx-fileuploader-cancel-button-position-end {
+        margin-left: 0;
+        margin-right: 4px;
+      }
     }
 
     .dx-fileuploader-file-name,
@@ -214,7 +234,7 @@
     }
 
     .dx-fileuploader-file-size {
-      margin-right: 4px;
+      padding-right: 4px;
     }
   }
 }

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

@@ -166,3 +166,13 @@
     unicode-bidi: embed;
   }
 }
+
+.dx-form {
+  position: relative;
+}
+
+.dx-form-loadpanel-wrapper {
+  .dx-loadpanel-content {
+    padding: 0;
+  }
+}

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

@@ -272,7 +272,7 @@
   .dx-#{$widget-name}-nowrap {
     white-space: nowrap;
 
-    .dx-header-row > td > .dx-#{$widget-name}-text-content {
+    .dx-header-row > td .dx-#{$widget-name}-text-content {
       white-space: nowrap;
     }
   }
@@ -285,10 +285,6 @@
 
     // T105728
     box-sizing: content-box;
-
-    &.dx-drag-command-cell {
-      padding: 0;
-    }
   }
 
   .dx-#{$widget-name}-columns-separator {
@@ -646,7 +642,7 @@
       white-space: nowrap;
       overflow: hidden;
 
-      & > .dx-#{$widget-name}-text-content {
+      .dx-#{$widget-name}-text-content {
         display: inline-block;
         white-space: normal;
         vertical-align: top;
@@ -1073,10 +1069,6 @@
     }
   }
 
-  .dx-#{$widget-name}-notouch-action {
-    touch-action: none;
-  }
-
   .dx-#{$widget-name}-column-chooser-list.dx-treeview {
     .dx-treeview-item,
     .dx-empty-message {
@@ -1245,4 +1237,28 @@
       cursor: pointer;
     }
   }
+
+  .dx-ai-prompt-editor__progressbar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    line-height: 0;
+  }
+
+  .dx-command-ai, .dx-command-ai-header-content {
+    position: relative;
+  }
+
+  .dx-command-ai-header-content {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .dx-command-ai-header-content .dx-icon-chatsparkleoutline, .dx-command-ai-header-button {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+  }
 }

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

@@ -153,7 +153,32 @@
 .dx-icon-restore
 .dx-icon-groupbycolumn,
 .dx-icon-ungroupcolumn,
-.dx-icon-ungroupallcolumns {
+.dx-icon-ungroupallcolumns,
+.dx-icon-ratingoutline,
+.dx-icon-ratingfilled,
+.dx-icon-chatadd,
+.dx-icon-colordismiss,
+.dx-icon-clipboardpastesparkle,
+.dx-icon-micfilled,
+.dx-icon-micoutline,
+.dx-icon-stopfilled,
+.dx-icon-stopoutline,
+.dx-icon-optionsoutline,
+.dx-icon-optionsfilled,
+.dx-icon-conferenceroomoutline,
+.dx-icon-conferenceroomfilled,
+.dx-icon-chatsparkleoutline,
+.dx-icon-chatsparklefilled,
+.dx-icon-addcircleoutline,
+.dx-icon-addcirclefilled,
+.dx-icon-zoomoutoutline,
+.dx-icon-zoomoutfilled,
+.dx-icon-zoominoutline,
+.dx-icon-zoominfilled,
+.dx-icon-calendardatestartoutline,
+.dx-icon-calendardatestartfilled,
+.dx-icon-calendardateendoutline,
+.dx-icon-calendardateendfilled {
   background-position: 0 0;
   background-repeat: no-repeat;
 }
@@ -499,6 +524,8 @@ $icons: (
     "datausage": "\f177",
     "datapie": "\f178",
     "pinmap": "\f179",
+    "ratingoutline": "\f17f",
+    "ratingfilled": "\f180",
     "csv": "\f181",
     "packagebox": "\f182",
     "checkmarkcircle": "\f183",
@@ -522,6 +549,29 @@ $icons: (
     "groupbycolumn":"\f197",
     "ungroupcolumn":"\f198",
     "ungroupallcolumns":"\f199",
+    "chatadd":"\f200",
+    "colordismiss":"\f201",
+    "clipboardpastesparkle":"\f202",
+    "micoutline":"\f203",
+    "micfilled":"\f204",
+    "stopoutline":"\f205",
+    "stopfilled":"\f206",
+    "optionsoutline":"\f207",
+    "optionsfilled":"\f208",
+    "conferenceroomoutline":"\f209",
+    "conferenceroomfilled":"\f210",
+    "chatsparkleoutline":"\f211",
+    "chatsparklefilled":"\f212",
+    "addcircleoutline":"\f213",
+    "addcirclefilled":"\f214",
+    "zoomoutoutline":"\f215",
+    "zoomoutfilled":"\f216",
+    "zoominoutline":"\f217",
+    "zoominfilled":"\f218",
+    "calendardatestartoutline":"\f219",
+    "calendardatestartfilled":"\f220",
+    "calendardateendoutline":"\f221",
+    "calendardateendfilled":"\f222",
 );
 
 // stylelint-enable

package/data/scss/widgets/base/_progressBar.scss

@@ -80,7 +80,6 @@
   top: 0;
   left: 0;
   width: auto;
-  height: 20px;
   font-size: 12px;
 }
 

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

@@ -1,7 +1,7 @@
 @use "../mixins" as *;
 @use "layout/chat" as *;
 @use "layout/chat-avatar" as *;
-@use "layout/chat-header" as *;
+@use "layout/chat-fileview" as *;
 @use "layout/chat-alertlist" as *;
 @use "layout/chat-messagebox" as *;
 @use "layout/chat-messagebox-editing-preview" as *;

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

@@ -1,7 +1,7 @@
 @import 'layout/chat/mixins';
 @import 'layout/chat-avatar/mixins';
+@import 'layout/chat-fileview/mixins';
 @import 'layout/chat-alertlist/mixins';
-@import 'layout/chat-header/mixins';
 @import 'layout/chat-messagebox/mixins';
 @import 'layout/chat-messagebox-editing-preview/mixins';
 @import 'layout/chat-messagebubble/mixins';

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

@@ -3,8 +3,9 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
-  min-width: 20em;
-  min-height: 20em;
+  min-width: 22.45em;
+  min-height: 38em;
+  overflow-y: auto;
 
   &.dx-state-disabled {
     opacity: 0.5;

package/data/scss/widgets/base/chat/layout/chat-fileview/_index.scss

@@ -0,0 +1,43 @@
+@use "../../../mixins" as *;
+
+.dx-chat-file {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.dx-chat-file-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.dx-chat-file-name {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  font-weight: 600;
+  line-height: 1.2857;
+
+  @include dx-overflow();
+}
+
+.dx-chat-file-size {
+  display: block;
+  flex: 1 0 auto;
+  min-width: 0;
+  text-align: end;
+
+  @include dx-overflow();
+}
+
+.dx-chat-file-download-button {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.dx-chat-file-view {
+  display: grid;
+}

package/data/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss

@@ -0,0 +1,60 @@
+@mixin chat-file(
+  $chat-file-container-width,
+  $chat-file-container-padding,
+  $chat-file-container-background-color,
+  $chat-file-container-border-radius,
+  $chat-file-container-box-shadow,
+  $chat-file-button-size,
+  $chat-file-secondary-font-size,
+  $chat-file-secondary-color,
+  $chat-file-base-section-gap,
+  $chat-file-size-max-width,
+  $chat-file-icon-font-size,
+) {
+  .dx-chat-file {
+    width: $chat-file-container-width;
+    padding: $chat-file-container-padding;
+    background-color: $chat-file-container-background-color;
+    border-radius: $chat-file-container-border-radius;
+    box-shadow: $chat-file-container-box-shadow;
+  }
+
+  .dx-chat-file-icon-container {
+    flex-basis: $chat-file-button-size;
+    width: $chat-file-button-size;
+    height: $chat-file-button-size;
+
+    .dx-icon {
+      color: $chat-file-secondary-color;
+      font-size: $chat-file-icon-font-size;
+    }
+  }
+
+  .dx-chat-file-name {
+    margin-inline-end: $chat-file-base-section-gap * 2;
+    margin-inline-start: $chat-file-base-section-gap;
+  }
+
+  .dx-chat-file-size {
+    max-width: $chat-file-size-max-width;
+    margin-inline-end: $chat-file-base-section-gap;
+    font-size: $chat-file-secondary-font-size;
+    color: $chat-file-secondary-color;
+  }
+
+  .dx-chat-file-download-button {
+    width: $chat-file-button-size;
+    height: $chat-file-button-size;
+    flex-basis: $chat-file-button-size;
+  }
+}
+
+@mixin chat-fileview(
+  $chat-file-view-items-gap,
+  $chat-file-container-width,
+) {
+  .dx-chat-file-view {
+    gap: $chat-file-view-items-gap;
+    grid-template-columns: repeat(auto-fit, $chat-file-container-width);
+  }
+}

package/data/scss/widgets/base/chat/layout/chat-messagebox/_index.scss

@@ -5,11 +5,50 @@
   border-top-style: solid;
 }
 
-.dx-chat-messagebox-input-container {
+.dx-chat-messagebox-textarea-container {
   display: flex;
   align-items: flex-end;
 }
 
-.dx-chat-messagebox-textarea {
+.dx-chat-textarea.dx-textarea {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+
+  &.dx-texteditor {
+    > .dx-texteditor-container {
+      .dx-texteditor-input,
+      .dx-placeholder::before {
+        padding: 0;
+      }
+
+      .dx-texteditor-input {
+        max-height: 7.1em;
+      }
+    }
+  }
+}
+
+.dx-chat-textarea-attachments {
+  .dx-fileuploader-input-wrapper {
+    display: none;
+  }
+
+  .dx-fileuploader-wrapper {
+    padding: 0;
+  }
+
+  .dx-fileuploader-files-container {
+    display: grid;
+
+    .dx-fileuploader-file-container {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.dx-chat-textarea-toolbar.dx-toolbar {
+  .dx-toolbar-items-container {
+    height: auto;
+  }
 }

package/data/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss

@@ -1,27 +1,62 @@
 @mixin chat-messagebox(
-  $padding,
-  $border-color,
+  $messagebox-padding,
+  $messagebox-border-color,
   $gap,
   $textarea-border-radius,
-  $button-gap
+  $textarea-padding,
+  $toolbar-min-height,
+  $chat-file-container-width,
+  $messagebox-files-container-padding,
+  $messagebox-files-container-padding-top,
+  $messagebox-file-background-color,
+  $messagebox-file-cancel-button-secondary-color,
+  $messagebox-file-box-shadow,
 ) {
   .dx-chat-messagebox {
-    padding: $padding;
-    border-top-color: $border-color;
-    gap: $padding;
+    padding: $messagebox-padding;
+    border-top-color: $messagebox-border-color;
+    gap: $messagebox-padding;
   }
 
-  .dx-chat-messagebox-input-container {
+  .dx-chat-messagebox-textarea-container {
     gap: $gap;
   }
 
-  .dx-chat-messagebox-textarea {
-    &.dx-textarea.dx-texteditor {
+  .dx-chat-textarea.dx-textarea {
+    gap: $gap;
+    padding: $textarea-padding;
+
+    &.dx-texteditor {
       border-radius: $textarea-border-radius;
+
+      &.dx-editor-outlined::before {
+        height: $textarea-border-radius;
+        border-bottom-left-radius: $textarea-border-radius;
+        border-bottom-right-radius: $textarea-border-radius;
+      }
+    }
+
+    .dx-fileuploader-files-container {
+      padding: $messagebox-files-container-padding;
+      padding-top: $messagebox-files-container-padding-top;
+      gap: $gap;
+      grid-template-columns: repeat(auto-fit, $chat-file-container-width);
+
+      .dx-fileuploader-file-container {
+        background-color: $messagebox-file-background-color;
+        box-shadow: $messagebox-file-box-shadow;
+
+        .dx-fileuploader-cancel-button.dx-state-hover,
+        .dx-fileuploader-cancel-button.dx-state-focused {
+          background-color: $messagebox-file-cancel-button-secondary-color;
+        }
+      }
     }
   }
 
-  .dx-chat-messagebox-button {
-    margin-bottom: $button-gap;
+  .dx-chat-textarea-toolbar.dx-toolbar {
+    .dx-toolbar-items-container {
+      min-height: $toolbar-min-height;
+    }
   }
 }

package/data/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss

@@ -9,6 +9,8 @@ $chat-messagebubble-max-height-image: 400px !default;
 }
 
 .dx-chat-messagebubble {
+  display: flex;
+  flex-direction: column;
   width: auto;
   word-break: break-word;
   white-space: break-spaces;
@@ -24,6 +26,10 @@ $chat-messagebubble-max-height-image: 400px !default;
   &.dx-has-image {
     padding: $chat-messagebubble-padding-image;
   }
+
+  .dx-chat-messagebubble-content:empty {
+    display: none;
+  }
 }
 
 .dx-chat-messagegroup-alignment-start {