devextreme-themebuilder 25.1.1-alpha → 25.1.3

package/data/scss/widgets/base/cardView/content_view/no_data/_index.scss

@@ -0,0 +1,33 @@
+@use './variables' as *;
+
+.dx-gridcore-nodata-icon-container {
+  height: $cardview-nodata-view__icon-container-size;
+  width: $cardview-nodata-view__icon-container-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $cardview-nodata-view__icon-bg-color;
+  border-radius: 999px;
+  margin: $cardview-nodata-view__icon-container-margin;
+
+  .dx-icon {
+    font-size: $cardview-nodata-view__icon-size;
+    color: $cardview-nodata-view__icon-color;
+  }
+}
+
+.dx-gridcore-nodata-element {
+  text-align: center;
+
+  .dx-gridcore-nodata-text {
+    color: $cardview-nodata-view-text-color;
+  }
+}
+
+.dx-gridcore-nodata-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $cardview-nodata-view-bg-color;
+}

package/data/scss/widgets/base/cardView/content_view/no_data/_variables.scss

@@ -0,0 +1,8 @@
+$cardview-nodata-view__icon-container-size: null !default;
+$cardview-nodata-view__icon-container-margin: null !default;
+$cardview-nodata-view__icon-size: null !default;
+
+$cardview-nodata-view-bg-color: null !default;
+$cardview-nodata-view-text-color: null !default;
+$cardview-nodata-view__icon-color: null !default;
+$cardview-nodata-view__icon-bg-color: null !default;

package/data/scss/widgets/base/cardView/filter_panel/_index.scss

@@ -0,0 +1,17 @@
+@use './variables' as *;
+
+.dx-cardview {
+  .dx-datagrid-filter-panel {
+    background-color: $cardview-filter-panel-bg-color;
+    border-radius: $cardview-filter-panel-border-radius;
+    border-top-color: $cardview-filter-panel-border-color;
+
+    .dx-icon-filter {
+      color: $cardview-filter-panel__icon-color;
+    }
+
+    .dx-datagrid-filter-panel-text, .dx-datagrid-filter-panel-clear-filter {
+      color: $cardview-filter-panel-text-color;
+    }
+  }
+}

package/data/scss/widgets/base/cardView/filter_panel/_variables.scss

@@ -0,0 +1,5 @@
+$cardview-filter-panel-bg-color: null !default;
+$cardview-filter-panel-border-radius: null !default;
+$cardview-filter-panel-border-color: null !default;
+$cardview-filter-panel-text-color: null !default;
+$cardview-filter-panel__icon-color: null !default;

package/data/scss/widgets/base/cardView/header_panel/_index.scss

@@ -0,0 +1,82 @@
+
+@use './item';
+@use './variables' as *;
+$sortable-side-offset: 6px;
+
+.dx-cardview-header-item-sorting {
+  display: flex;
+}
+
+.dx-cardview-headers {
+  margin: $cardview-header-panel-vertical-margin 0;
+}
+
+.dx-cardview-sortable {
+  position: relative;
+  overflow: visible;
+  margin: 0 (-$sortable-side-offset);
+
+  .dx-cardview-dropzone {
+    width: calc(100% - (2 * $sortable-side-offset));
+    height: $cardview-header-panel__dropzone-height;
+    margin: 0 $sortable-side-offset;
+    background-color: $cardview-header-panel__dropzone-bg-color;
+    text-align: center;
+    position: absolute;
+    top: $cardview-header-panel__dropzone-top;
+    left: 0;
+    border-width: $cardview-header-panel__dropzone-border-width;
+    border-style: dashed;
+    border-color: $cardview-header-panel__dropzone-border-color;
+    border-radius: $cardview-header-panel__dropzone-border-radius;
+    pointer-events: none;
+    opacity: 0.0;
+    transition: opacity 0.3s ease-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+
+    .dx-icon {
+      color: $cardview-header-panel__dropzone__icon-color;
+    }
+
+    span {
+      color: $cardview-header-panel__dropzone-text-color;
+    }
+  }
+
+  .dx-cardview-dropzone-visible {
+    opacity: 1.0;
+    pointer-events: auto;
+  }
+}
+
+.dx-cardview-headerpanel-text-empty {
+  line-height: $cardview-header-panel--empty-line-height;
+}
+
+.dx-cardview-headerpanel-content {
+  display: flex;
+  &--with-header-items {
+    margin: 0 ($sortable-side-offset - $cardview-header-item__right-padding) 0 ($sortable-side-offset - $cardview-header-item__left-padding);
+  }
+
+  &--empty {
+    margin: 0 $sortable-side-offset;
+  }
+}
+.dx-cardview-header-item-container {
+  min-width: fit-content;
+  padding: 0 $cardview-header-item__right-padding 0 $cardview-header-item__left-padding;
+
+  &:first-child {
+    padding: 0 $cardview-header-item__right-padding 0 $cardview-header-item__left-padding;
+  }
+}
+
+.dx-cardview-header-item-sort-indicator {
+  border: $cardview-header-item__sort-indicator__border-size solid $cardview-header-item__sort-indicator__border-color;
+  border-radius: $cardview-header-item__sort-indicator__border-radius;
+}
+

package/data/scss/widgets/base/cardView/header_panel/_variables.scss

@@ -0,0 +1,19 @@
+$cardview-header-panel-vertical-margin: null !default;
+
+$cardview-header-panel__dropzone-height: null !default;
+$cardview-header-panel__dropzone-top: null !default;
+
+$cardview-header-panel__dropzone-bg-color: null !default;
+$cardview-header-panel__dropzone-border-width: null !default;
+$cardview-header-panel__dropzone-border-color: null !default;
+$cardview-header-panel__dropzone-border-radius: null !default;
+$cardview-header-panel__dropzone-text-color: null !default;
+$cardview-header-panel__dropzone__icon-color: null !default;
+
+$cardview-header-panel--empty-line-height: null !default;
+
+$cardview-header-item__left-padding: null !default;
+$cardview-header-item__right-padding: null !default;
+$cardview-header-item__sort-indicator__border-color: null !default;
+$cardview-header-item__sort-indicator__border-size: null !default;
+$cardview-header-item__sort-indicator__border-radius: null !default;

package/data/scss/widgets/base/cardView/header_panel/item/_index.scss

@@ -0,0 +1,111 @@
+@use '../../../icons' as *;
+@use './variables' as *;
+
+.dx-cardview-header-item {
+  display: flex;
+  align-items: center;
+  padding: $cardview-header-panel__item-padding-vertical $cardview-header-panel__item-padding-horizontal;
+  user-select: none;
+  gap: 4px;
+  border: solid $cardview-header-panel__item-border-width;
+  border-radius: $cardview-header-panel__item-border-radius;
+  line-height: $cardview-header-panel__item-line-height;
+  cursor: pointer;
+
+  .dx-icon {
+    font-size: $cardview-header-panel__item__icon-size;
+    color: $cardview-header-panel__item__icon-color;
+  }
+
+  background-color: $cardview-header-panel__item-bg-color;
+  border-color: $cardview-header-panel__item-border-color;
+  color: $cardview-header-panel__item-text-color;
+  font-weight: $cardview-header-panel__item-text-weight;
+
+  .dx-header-filter-icon--selected {
+    color: $cardview-header-panel__item__header-filter-icon--selected-color;
+  }
+
+  .dx-cardview-header-item-sorting-order {
+    color: $cardview-header-panel__item__sort-index-text-color;
+    font-weight: $cardview-header-panel__item__sort-index-text-weight;
+  }
+
+  &:hover {
+    background-color: $cardview-header-panel__item--hovered-bg-color;
+    border-color: $cardview-header-panel__item--hovered-border-color;
+    color: $cardview-header-panel__item--hovered-text-color;
+    font-weight: $cardview-header-panel__item--hovered-text-weight;
+
+    .dx-icon {
+      color: $cardview-header-panel__item--hovered__icon-color;
+    }
+
+    .dx-header-filter-icon--selected {
+      color: $cardview-header-panel__item--hovered__header-filter-icon--selected-color;
+    }
+
+    .dx-cardview-header-item-sorting-order {
+      color: $cardview-header-panel__item--hovered__sort-index-text-color;
+      font-weight: $cardview-header-panel__item--hovered__sort-index-text-weight;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px $cardview-header-panel__item--focused-outline-color solid;
+    outline-offset: -2px;
+  }
+
+  &.dx-sortable-source {
+    opacity: 1.0;
+    background-color: $cardview-header-panel__item--disabled-bg-color;
+    border-color: $cardview-header-panel__item--disabled-border-color;
+    color: $cardview-header-panel__item--disabled-text-color;
+    font-weight: $cardview-header-panel__item--disabled-text-weight;
+
+    .dx-icon {
+      color: $cardview-header-panel__item--disabled__icon-color;
+    }
+
+    .dx-header-filter-icon--selected {
+      color: $cardview-header-panel__item--disabled__header-filter-icon--selected-color;
+    }
+
+    .dx-cardview-header-item-sorting-order {
+      color: $cardview-header-panel__item--disabled__sort-index-text-color;
+      font-weight: $cardview-header-panel__item--disabled__sort-index-text-weight;
+    }
+  }
+
+  .dx-sortable-dragging > & {
+    background-color: $cardview-header-panel__item--dragged-bg-color;
+    border-color: $cardview-header-panel__item--dragged-border-color;
+    color: $cardview-header-panel__item--dragged-text-color;
+    font-weight: $cardview-header-panel__item--dragged-text-weight;
+    box-shadow:
+      0 1px 3px $cardview-header-panel__item--dragged-box-shadow-color,
+      0 6px 8px $cardview-header-panel__item--dragged-box-shadow-color;
+
+    .dx-icon {
+      color: $cardview-header-panel__item--dragged__allowance-icon-color;
+    }
+
+    .dx-icon-cursorprohibition {
+      color: $cardview-header-panel__item--dragged__prohibition-icon-color;
+    }
+  }
+}
+
+.dx-sortable-dragging.dx-cardview-column-sortable {
+  opacity: 1.0;
+}
+
+.dx-cardview {
+  .dx-header-filter-icon {
+    color: $cardview-header-panel__item__icon-color;
+
+    &--selected {
+      color: $cardview-header-panel__item__header-filter-icon--selected-color;
+    }
+  }
+}

package/data/scss/widgets/base/cardView/header_panel/item/_variables.scss

@@ -0,0 +1,44 @@
+$cardview-header-panel__item-border-radius: null !default;
+$cardview-header-panel__item-padding-horizontal: null !default;
+$cardview-header-panel__item-padding-vertical: null !default;
+$cardview-header-panel__item-line-height: null !default;
+
+$cardview-header-panel__item-bg-color: null !default;
+$cardview-header-panel__item-border-color: null !default;
+$cardview-header-panel__item-border-width: null !default;
+$cardview-header-panel__item-text-color: null !default;
+$cardview-header-panel__item-text-weight: null !default;
+$cardview-header-panel__item__icon-color: null !default;
+$cardview-header-panel__item__icon-size: null !default;
+$cardview-header-panel__item__header-filter-icon--selected-color: null !default;
+$cardview-header-panel__item__sort-index-text-color: null !default;
+$cardview-header-panel__item__sort-index-text-weight: null !default;
+
+$cardview-header-panel__item--focused-outline-color: null !default;
+
+$cardview-header-panel__item--hovered-bg-color: null !default;
+$cardview-header-panel__item--hovered-border-color: null !default;
+$cardview-header-panel__item--hovered-text-color: null !default;
+$cardview-header-panel__item--hovered-text-weight: null !default;
+$cardview-header-panel__item--hovered__icon-color: null !default;
+$cardview-header-panel__item--hovered__header-filter-icon--selected-color: null !default;
+$cardview-header-panel__item--hovered__sort-index-text-color: null !default;
+$cardview-header-panel__item--hovered__sort-index-text-weight: null !default;
+
+$cardview-header-panel__item--disabled-bg-color: null !default;
+$cardview-header-panel__item--disabled-border-color: null !default;
+$cardview-header-panel__item--disabled-text-color: null !default;
+$cardview-header-panel__item--disabled-text-weight: null !default;
+$cardview-header-panel__item--disabled__icon-color: null !default;
+$cardview-header-panel__item--disabled__header-filter-icon--selected-color: null !default;
+$cardview-header-panel__item--disabled__sort-index-text-color: null !default;
+$cardview-header-panel__item--disabled__sort-index-text-weight: null !default;
+
+$cardview-header-panel__item--dragged-bg-color: null !default;
+$cardview-header-panel__item--dragged-border-color: null !default;
+$cardview-header-panel__item--dragged-text-color: null !default;
+$cardview-header-panel__item--dragged-text-weight: null !default;
+$cardview-header-panel__item--dragged__allowance-icon-color: null !default;
+$cardview-header-panel__item--dragged__prohibition-icon-color: null !default;
+$cardview-header-panel__item--dragged-box-shadow-color: null !default;
+

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

@@ -4,7 +4,9 @@
 @use "layout/chat-header" as *;
 @use "layout/chat-alertlist" as *;
 @use "layout/chat-messagebox" as *;
+@use "layout/chat-messagebox-editing-preview" as *;
 @use "layout/chat-messagebubble" as *;
+@use "layout/chat-confirmationpopup" as *;
 @use "layout/chat-messagegroup" as *;
 @use "layout/chat-messagelist" as *;
 @use "layout/chat-typingindicator" as *;

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

@@ -3,7 +3,9 @@
 @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';
 @import 'layout/chat-messagegroup/mixins';
 @import 'layout/chat-messagelist/mixins';
 @import 'layout/chat-typingindicator/mixins';
+@import 'layout/chat-confirmationpopup/mixins';

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

@@ -10,3 +10,23 @@
     opacity: 0.5;
   }
 }
+
+@keyframes dx-chat-animation-fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dx-chat-animation-fadeout {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

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

@@ -2,9 +2,3 @@
   display: flex;
   flex-direction: column;
 }
-
-.dx-chat-alertlist-error {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}

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

@@ -6,8 +6,6 @@
   $padding-inline,
   $error-padding-block,
   $row-gap,
-  $icon-size,
-  $content-column-gap,
 ) {
   .dx-chat-alertlist {
     padding-block: $padding-block;
@@ -21,13 +19,9 @@
   }
 
   .dx-chat-alertlist-error {
-    color: $error-color;
-    column-gap: $content-column-gap;
-    padding-block: $error-padding-block;
-  }
-
-  .dx-chat-alertlist-error-icon {
-    @include dx-icon(errorcircle);
-    @include dx-icon-sizing($icon-size);
+    &.dx-informer {
+      color: $error-color;
+      padding-block: $error-padding-block;
+    }
   }
 }

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

@@ -0,0 +1,30 @@
+.dx-chat-confirmation-popup-wrapper {
+  .dx-toolbar-items-container {
+    display: flex;
+    width: 100%;
+
+    .dx-toolbar-item {
+      flex-grow: 1;
+    }
+
+    .dx-button {
+      width: 100%;
+    }
+  }
+
+  .dx-toolbar {
+    &.dx-popup-bottom {
+      .dx-toolbar-before {
+        position: unset;
+        flex-grow: 1;
+        padding-inline-end: 0;
+      }
+
+      .dx-toolbar-after {
+        position: unset;
+        flex-grow: 1;
+        padding-inline-start: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+@mixin chat-confirmation-popup(
+  $border-radius,
+  $content-padding-bottom,
+  $toolbar-padding-block,
+  $toolbar-padding-inline,
+  $toolbar-gap
+) {
+  .dx-chat-confirmation-popup-wrapper {
+    border-radius: $border-radius;
+
+    .dx-popup-content {
+      padding-bottom: $content-padding-bottom;
+    }
+
+    .dx-popup-bottom.dx-toolbar {
+      padding-block: $toolbar-padding-block;
+      padding-inline: $toolbar-padding-inline;
+    }
+
+    .dx-toolbar-items-container {
+      gap: $toolbar-gap;
+    }
+  }
+}

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

@@ -1,10 +1,15 @@
 .dx-chat-messagebox {
   display: flex;
-  align-items: flex-end;
+  flex-direction: column;
   border-top-width: 1px;
   border-top-style: solid;
 }
 
+.dx-chat-messagebox-input-container {
+  display: flex;
+  align-items: flex-end;
+}
+
 .dx-chat-messagebox-textarea {
   flex-grow: 1;
 }

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

@@ -8,6 +8,10 @@
   .dx-chat-messagebox {
     padding: $padding;
     border-top-color: $border-color;
+    gap: $padding;
+  }
+
+  .dx-chat-messagebox-input-container {
     gap: $gap;
   }
 

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

@@ -0,0 +1,37 @@
+@use "../chat" as *;
+
+.dx-chat-editing-preview {
+  display: flex;
+  align-items: center;
+  position: relative;
+  animation: dx-chat-animation-fadein 0.25s ease-out;
+
+  &.dx-chat-editing-preview-hiding {
+    animation: dx-chat-animation-fadeout 0.1s ease-out;
+  }
+}
+
+.dx-chat-editing-preview-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: 0;
+}
+
+.dx-chat-editing-preview::before {
+  content: '';
+  height: 100%;
+  border-radius: 999em;
+  position: absolute;
+}
+
+.dx-chat-editing-preview-caption {
+  font-weight: 500;
+}
+
+.dx-chat-editing-preview-text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

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

@@ -0,0 +1,33 @@
+@mixin message-editing-preview(
+  $preview-padding,
+  $message-row-gap,
+  $accent-color,
+  $caption-font-size,
+  $padding,
+  $border-width,
+  $cancel-button-color,
+) {
+  .dx-chat-editing-preview::before{
+    width: $border-width;
+    background-color: $accent-color;
+  }
+
+  .dx-chat-editing-preview-content {
+    gap: $message-row-gap;
+    padding-inline-start: $preview-padding + $border-width;
+    padding-inline-end: $preview-padding;
+  }
+
+  .dx-chat-editing-preview-caption {
+    font-size: $caption-font-size;
+    color: $accent-color;
+  }
+
+  .dx-chat-editing-preview-cancel-button {
+    &.dx-button-mode-text {
+      .dx-icon {
+        color: $cancel-button-color;
+      }
+    }
+  }
+}

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

@@ -1,3 +1,8 @@
+$chat-messagebubble-padding-image: 4px !default;
+$chat-messagebubble-border-radius-image: 8px !default;
+$chat-messagebubble-max-width-image: 400px !default;
+$chat-messagebubble-max-height-image: 400px !default;
+
 .dx-chat-messagegroup-content {
   display: flex;
   flex-direction: column;
@@ -7,6 +12,18 @@
   width: auto;
   word-break: break-word;
   white-space: break-spaces;
+
+  &.dx-chat-messagebubble-deleted {
+    .dx-chat-messagebubble-content {
+      display: flex;
+      align-items: center;
+      font-style: italic;
+    }
+  }
+
+  &.dx-has-image {
+    padding: $chat-messagebubble-padding-image;
+  }
 }
 
 .dx-chat-messagegroup-alignment-start {
@@ -32,3 +49,11 @@
     border-end-end-radius: 0;
   }
 }
+
+.dx-chat-messagebubble-image {
+  border-radius: $chat-messagebubble-border-radius-image;
+  max-width: $chat-messagebubble-max-width-image;
+  max-height: $chat-messagebubble-max-height-image;
+  width: 100%;
+  display: block;
+}

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

@@ -6,6 +6,8 @@
   $color-primary,
   $background-color-primary,
   $bubble-container-gap,
+  $bubble-delete-gap,
+  $bubble-delete-icon-size,
 ) {
   .dx-chat-messagegroup-content {
     row-gap: $bubble-container-gap;
@@ -14,6 +16,17 @@
   .dx-chat-messagebubble {
     padding: $padding;
     border-radius: $border-radius;
+
+    &.dx-chat-messagebubble-deleted {
+      .dx-chat-messagebubble-content {
+        gap: $bubble-delete-gap;
+        line-height: $bubble-delete-icon-size;
+
+        .dx-icon {
+          font-size: $bubble-delete-icon-size;
+        }
+      }
+    }
   }
 
   .dx-chat-messagegroup-alignment-start {

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

@@ -1,4 +1,5 @@
 @use "../../../mixins" as *;
+@use "../chat" as *;
 
 .dx-chat-messagegroup {
   display: grid;
@@ -16,6 +17,16 @@
   @include dx-overflow();
 }
 
+.dx-chat-message-edited {
+  display: flex;
+  align-items: center;
+  animation: dx-chat-animation-fadein 0.25s ease-out;
+
+  &.dx-chat-message-edited-hiding {
+    animation: dx-chat-animation-fadeout 0.1s ease-out;
+  }
+}
+
 .dx-chat-messagegroup-time {
   white-space: nowrap;
 }
@@ -29,5 +40,5 @@
 }
 
 .dx-chat-messagegroup-alignment-end {
-  justify-items: end;
+  justify-items: flex-end;
 }