devextreme-themebuilder 25.1.1-alpha → 25.1.3

package/data/scss/widgets/base/_htmlEditor.scss

@@ -352,6 +352,32 @@ $transparent-border: 1px solid transparent;
   min-width: 360px;
 }
 
+.dx-aidialog {
+  .dx-toolbar-after .dx-toolbar-item:nth-last-child(2) {
+    padding-inline-end: 0;
+  }
+}
+
+.dx-aidialog-controls {
+  display: flex;
+
+  .dx-selectbox {
+    flex: 1 0 0;
+  }
+}
+
+.dx-aidialog-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.dx-aidialog-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+}
+
 .dx-overlay-content {
   &.dx-popup-fullscreen {
     .dx-formdialog-form {

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

@@ -139,7 +139,21 @@
 .dx-icon-unfixcolumn,
 .dx-icon-packagebox,
 .dx-icon-checkmarkcircle,
-.dx-icon-clipboardtasklist {
+.dx-icon-clipboardtasklist,
+.dx-icon-daterangepicker,
+.dx-icon-cardcontent,
+.dx-icon-cursormove,
+.dx-icon-cursorprohibition,
+.dx-icon-arrowsortup,
+.dx-icon-arrowsortdown,
+.dx-icon-imagethumbnail,
+.dx-icon-sparkle,
+.dx-icon-servicebell,
+.dx-icon-dropzone,
+.dx-icon-restore
+.dx-icon-groupbycolumn,
+.dx-icon-ungroupcolumn,
+.dx-icon-ungroupallcolumns {
   background-position: 0 0;
   background-repeat: no-repeat;
 }
@@ -490,10 +504,24 @@ $icons: (
     "checkmarkcircle": "\f183",
     "clipboardtasklist": "\f184",
     "today": "\f185",
+    "daterangepicker": "\f186",
+    "cardcontent": "\f187",
+    "cursormove": "\f188",
+    "cursorprohibition": "\f189",
+    "arrowsortup": "\f190",
+    "arrowsortdown": "\f191",
+    "imagethumbnail": "\f192",
+    "sparkle": "\f193",
+    "servicebell": "\f194",
     "unfixcolumn":"\f17a",
     "fixcolumnleft":"\f17b",
     "stickcolumn":"\f17c",
     "fixcolumnright":"\f17d",
+    "dropzone":"\f195",
+    "restore":"\f196",
+    "groupbycolumn":"\f197",
+    "ungroupcolumn":"\f198",
+    "ungroupallcolumns":"\f199",
 );
 
 // stylelint-enable

package/data/scss/widgets/base/_loadIndicator.scss

@@ -1,7 +1,5 @@
 @use "sass:math";
 
-// @use "../base/mixins" as *;
-
 // adduse
 
 $loadindicator-width: 32px;
@@ -43,13 +41,8 @@ $loadindicator-height: 32px;
   animation: dx-loadindicator-icon-custom-rotate 1.5s infinite linear;
 
   @keyframes dx-loadindicator-icon-custom-rotate {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
   }
 }
 
@@ -73,3 +66,84 @@ $loadindicator-height: 32px;
   height: 100%;
   position: relative;
 }
+
+@mixin loadindicator-animation-sparkle(
+  $bg-color1,
+  $bg-color2,
+  $bg-color3
+) {
+  .dx-loadindicator-content-sparkle {
+    .dx-loadindicator-segment {
+      position: absolute;
+      width: 37.5%;
+      height: 37.5%;
+      aspect-ratio: 1;
+      clip-path: polygon(
+        48.76% 3.14%,
+        51.24% 3.14%,
+        63.93% 35.32%,
+        64.68% 36.07%,
+        96.86% 48.76%,
+        96.86% 51.24%,
+        64.68% 63.93%,
+        63.93% 64.68%,
+        51.24% 96.86%,
+        48.76% 96.86%,
+        36.07% 64.68%,
+        35.32% 63.93%,
+        3.14% 51.24%,
+        3.14% 48.76%,
+        35.32% 36.07%,
+        36.07% 35.32%,
+        48.76% 3.14%
+      );
+      transform-origin: center;
+      transform: scale(0.33);
+      background-color: $bg-color3;
+      animation: dx-sparkle-scale 1.4s infinite linear;
+    }
+
+    .dx-loadindicator-segment0 {
+      left: 50%;
+      top: 9.375%;
+      background-color: $bg-color3;
+      animation-delay: 0s;
+    }
+
+    .dx-loadindicator-segment1 {
+      left: 9.375%;
+      top: 29.6875%;
+      background-color: $bg-color3;
+      animation-delay: 0.8s;
+    }
+
+    .dx-loadindicator-segment2 {
+      left: 40.625%;
+      top: 54.6875%;
+      background-color: $bg-color3;
+      animation-delay: 0.4s;
+    }
+  }
+
+  @keyframes dx-sparkle-scale {
+    0% {
+      transform: scale(0.33);
+      background-color: $bg-color3;
+    }
+
+    33% {
+      transform: scale(1);
+      background-color: $bg-color1;
+    }
+
+    66% {
+      transform: scale(0.66);
+      background-color: $bg-color2;
+    }
+
+    100% {
+      transform: scale(0.33);
+      background-color: $bg-color3;
+    }
+  }
+}

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

@@ -50,8 +50,7 @@
         display: inline;
         vertical-align: middle;
         white-space: nowrap;
-
-        @include dx-overflow(ellipsis);
+        text-overflow: ellipsis;
       }
 
       .dx-menu-item-text-with-url {

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

@@ -29,6 +29,7 @@
   background: $start-color;
   background: radial-gradient(circle closest-side at center, $start-color $start-position, $end-color $end-position);
 }
+
 @mixin flex-container($direction: row, $wrap: wrap) {
   display: flex;
   flex-flow: $direction $wrap;
@@ -132,5 +133,13 @@
   height: $indicator-size;
 }
 
+@mixin dx-pending-indicator-centered() {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 $overlay-zindex: 1000;
 $max-integer: 2147483647;

package/data/scss/widgets/base/_recurrenceEditor.scss

@@ -1,16 +1,7 @@
-$recurrence-count-number-box-right-margin: 11px;
-$recurrence-count-number-box-left-margin: 16px;
-$recurrence-until-date-box-box-margin: 28px;
-$recurrence-label-line-height-margin: 36px;
-
 $recurrence-interval-number-box-margin-top: 25px;
 $recurrence-radio-group-item-padding: 10px;
 $recurrence-button-group-item-padding: 8px;
 
-.dx-recurrence-repeat-end-wrapper {
-  display: flex;
-}
-
 .dx-recurrence-repeat-on,
 .dx-recurrence-numberbox-interval-wrapper {
   .dx-layout-manager .dx-field-item {
@@ -38,10 +29,6 @@ $recurrence-button-group-item-padding: 8px;
   margin-top: $recurrence-interval-number-box-margin-top;
 }
 
-.dx-recurrence-repeat-end-label {
-  line-height: $recurrence-label-line-height-margin;
-}
-
 .dx-recurrence-radiogroup-repeat-type {
   margin: 0;
 
@@ -50,15 +37,6 @@ $recurrence-button-group-item-padding: 8px;
   }
 }
 
-.dx-recurrence-datebox-until-date {
-  margin-left: $recurrence-until-date-box-box-margin;
-}
-
-.dx-recurrence-numberbox-repeat-count {
-  margin-left: $recurrence-count-number-box-left-margin;
-  margin-right: $recurrence-count-number-box-right-margin;
-}
-
 .dx-recurrence-button-group {
   width: 100%;
 

package/data/scss/widgets/base/_sortable.scss

@@ -23,7 +23,6 @@ $base-accent: null !default;
 }
 
 .dx-sortable-dragging.dx-sortable-clone * {
-  cursor: pointer;
   cursor: grabbing;
 }
 
@@ -39,8 +38,7 @@ $base-accent: null !default;
   position: absolute;
   top: 0;
   left: 0;
-  border: 1px solid transparent;
-  border-color: $base-accent;
+  border: 1px solid $base-accent;
   box-sizing: border-box;
   z-index: $max-integer;
 }

package/data/scss/widgets/base/_tabs.scss

@@ -74,7 +74,7 @@
   }
 }
 
-.dx-tabs:not(.dx-tabs-vertical) .dx-tabs-scrollable .dx-tab {
+.dx-tabs.dx-tabs-horizontal .dx-tabs-scrollable .dx-tab {
   flex-basis: 100%;
   min-width: max-content;
 }
@@ -124,7 +124,7 @@
 }
 
 .dx-rtl {
-  &.dx-tabs:not(.dx-tabs-vertical) {
+  &.dx-tabs.dx-tabs-horizontal{
     flex-direction: row-reverse;
   }
 }

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

@@ -0,0 +1,42 @@
+@use './content_view';
+@use './header_panel';
+@use './filter_panel';
+@use './column_chooser';
+@use './variables' as *;
+
+// adduse
+
+.dx-cardview {
+  padding: $cardview-padding;
+  background-color: $cardview-bg-color;
+  border-radius: $cardview-border-radius;
+  color: $cardview-text-color;
+  font-weight: $cardview-text-weight;
+
+  .dx-link {
+    text-decoration: underline;
+    cursor: pointer;
+    color: $cardview-link-color;
+  }
+}
+
+.dx-cardview-root-container {
+  display: flex;
+  flex-direction: column;
+  gap: $cardview-gap;
+  height: 100%;
+}
+
+.dx-cardview-header-container {
+  display: flex;
+  flex-direction: column;
+  gap: $cardview-header-gap;
+
+  .dx-toolbar {
+    background-color: transparent;
+  }
+}
+
+.dx-cardview-exclude-flexbox {
+  position: absolute;
+}

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

@@ -0,0 +1,8 @@
+$cardview-gap: null !default;
+$cardview-padding: null !default;
+$cardview-bg-color: null !default;
+$cardview-border-radius: null !default;
+$cardview-text-weight: null !default;
+$cardview-header-gap: null !default;
+$cardview-link-color: null !default;
+$cardview-text-color: null !default;

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

@@ -0,0 +1,24 @@
+@use './variables' as *;
+
+.dx-cardview-column-chooser-list {
+  .dx-empty-message {
+    text-align: center;
+    left: 0;
+    right: 0;
+    bottom: 50%;
+    position: absolute;
+    color: $cardview-columnchooser--empty__message-color;
+    padding: 0 $cardview-column-chooser--empty__message-horizontal-padding;
+  }
+}
+
+.dx-cardview-column-chooser-plain {
+  .dx-treeview-expander-icon-stub {
+    display: none;
+  }
+
+  .dx-treeview-select-all-item {
+    padding-left: $cardview-column-chooser__select-all-item-horizontal-padding;
+    padding-right: $cardview-column-chooser__select-all-item-horizontal-padding;
+  }
+}

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

@@ -0,0 +1,3 @@
+$cardview-columnchooser--empty__message-color: null !default;
+$cardview-column-chooser--empty__message-horizontal-padding: null !default;
+$cardview-column-chooser__select-all-item-horizontal-padding: null !default;

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

@@ -0,0 +1,8 @@
+@use '../variables' as *;
+@use './content';
+@use './no_data';
+
+.dx-gridcore-contentview {
+  overflow: hidden;
+  flex-grow: 1;
+}

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

@@ -0,0 +1,13 @@
+@use './variables' as *;
+@use './card';
+
+.dx-cardview-content {
+  display: grid;
+  justify-items: center;
+  column-gap: $cardview-cards-column-gap;
+  row-gap: $cardview-cards-row-gap;
+  grid-template-columns: repeat(var(--dx-cardview-cardsperrow), 1fr);
+
+  // NOTE: This is default value for the cardCover.maxHeight option
+  --dx-cardview-card-cover-max-height: #{$cardview-card__cover-max-height};
+}

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

@@ -0,0 +1,3 @@
+$cardview-cards-column-gap: null !default;
+$cardview-cards-row-gap: null !default;
+$cardview-card__cover-max-height: null !default;

package/data/scss/widgets/base/cardView/content_view/content/card/_index.scss

@@ -0,0 +1,30 @@
+@use './header';
+@use './content';
+@use './cover';
+@use './variables' as *;
+
+.dx-cardview-card {
+  width: 100%;
+  min-width: var(--dx-cardview-card-min-width, $cardview-card-min-width);
+  max-width: var(--dx-cardview-card-max-width);
+  border: $cardview-card-border-width solid $cardview-card-border-color;
+  border-radius: $cardview-card-border-radius;
+  background-color: $cardview-card-bg-color;
+  color: $cardview-card-text-color;
+  overflow: hidden;
+
+  & > div > :nth-child(2) {
+    border-top: none;
+  }
+
+  &:focus-visible {
+    outline: 2px $cardview-card--focused-outline-color solid;
+    outline-offset: -2px;
+  }
+}
+
+.dx-cardview-card-selection {
+  background-color: $cardview-card--selected-bg-color;
+  border-color: $cardview-card--selected-border-color;
+  color: $cardview-card--selected-text-color;
+}

package/data/scss/widgets/base/cardView/content_view/content/card/_variables.scss

@@ -0,0 +1,15 @@
+$cardview-card-border-width: null !default;
+$cardview-card-min-width: null !default;
+$cardview-card-border-radius: null !default;
+
+$cardview-card-bg-color: null !default;
+$cardview-card-border-color: null !default;
+$cardview-card-divider-color: null !default;
+$cardview-card-text-color: null !default;
+
+$cardview-card--selected-bg-color: null !default;
+$cardview-card--selected-border-color: null !default;
+$cardview-card--selected-divider-color: null !default;
+$cardview-card--selected-text-color: null !default;
+
+$cardview-card--focused-outline-color: null !default;

package/data/scss/widgets/base/cardView/content_view/content/card/content/_index.scss

@@ -0,0 +1,69 @@
+@use './variables' as *;
+@use '../variables' as *;
+
+.dx-cardview-card-content {
+  padding: $cardview-card__content-padding;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: $cardview-card__content-row-gap;
+  width: 100%;
+  border-top: $cardview-card-border-width solid $cardview-card-divider-color;
+
+  // NOTE: Override default fonts only in "material-compact"
+  font-size: $cardview-card__content-font-size;
+  line-height: $cardview-card__content-line-height;
+
+  .dx-cardview-card-selection & {
+    border-top-color: $cardview-card--selected-divider-color;
+  }
+}
+
+.dx-cardview-field-template {
+  grid-column: span 2;
+}
+
+.dx-cardview-field-caption,
+.dx-cardview-field-value,
+.dx-cardview-field-template {
+  padding: $cardview-card__content__cell-padding-vertical $cardview-card__content__cell-padding-horizontal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .dx-cardview-word-wrap-enabled & {
+    white-space: normal;
+  }
+}
+
+.dx-cardview-field-caption {
+  font-weight: $cardview-card__field-caption-weight;
+
+  .dx-cardview-card-selection & {
+    font-weight: $cardview-card--selected__field-caption-weight;
+  }
+}
+
+.dx-cardview-field-value {
+  &--text-align-right {
+    text-align: right;
+  }
+
+  &--text-align-left {
+    text-align: left;
+  }
+
+  &--text-align-center {
+    text-align: center;
+  }
+
+  &__text-part {
+    &--highlighted {
+      color: $cardview-card__content__field-value--highlighted-text-color;
+      background: $cardview-card__content__field-value--highlighted-bg-color;
+      border-radius: $cardview-card__content__field-value--highlighted-border-radius;
+      padding: $cardview-card__content__field-value--highlighted-border-padding;
+      font-weight: $cardview-card__content__field-value--highlighted-text-weight;
+      box-shadow: $cardview-card__content__field-value--highlighted-box-shadow;
+    }
+  }
+}

package/data/scss/widgets/base/cardView/content_view/content/card/content/_variables.scss

@@ -0,0 +1,16 @@
+$cardview-card__content-padding: null !default;
+$cardview-card__content-row-gap: null !default;
+$cardview-card__content-font-size: null !default;
+$cardview-card__content-line-height: null !default;
+$cardview-card__content__cell-padding-vertical: null !default;
+$cardview-card__content__cell-padding-horizontal: null !default;
+
+$cardview-card__content__field-value--highlighted-bg-color: null !default;
+$cardview-card__content__field-value--highlighted-text-color: null !default;
+$cardview-card__content__field-value--highlighted-border-radius: null !default;
+$cardview-card__content__field-value--highlighted-border-padding: null !default;
+$cardview-card__content__field-value--highlighted-text-weight: null !default;
+$cardview-card__content__field-value--highlighted-box-shadow: null !default;
+
+$cardview-card__field-caption-weight: null !default;
+$cardview-card--selected__field-caption-weight: null !default;

package/data/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss

@@ -0,0 +1,43 @@
+@use './variables' as *;
+@use '../variables' as *;
+
+.dx-card-cover {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  border-top: $cardview-card-border-width solid $cardview-card-divider-color;
+  max-height: var(--dx-cardview-card-cover-max-height);
+  aspect-ratio: var(--dx-cardview-card-cover-ratio);
+  width: 100%;
+  background-color: $cardview-card__cover-bg-color;
+
+  &-noimage {
+    background-color: $cardview-card__cover--noimage-bg-color;
+    align-items: center;
+
+    .dx-icon-imagethumbnail {
+      font-size: $cardview-card__cover--noimage__icon-size;
+      color: $cardview-card__cover--noimage__icon-color;
+    }
+  }
+}
+
+.dx-cardview-card-selection .dx-card-cover {
+  border-top-color: $cardview-card--selected-divider-color;
+  background-color: $cardview-card--selected__cover-bg-color;
+
+  &-noimage {
+    background-color: $cardview-card--selected__cover--noimage-bg-color;
+
+    .dx-icon-imagethumbnail {
+      color: $cardview-card--selected__cover--noimage__icon-color;
+    }
+  }
+}
+
+.dx-card-cover-image {
+  object-fit: scale-down;
+  width: 100%;
+  height: 100%;
+}
+

package/data/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss

@@ -0,0 +1,8 @@
+$cardview-card__cover-bg-color: null !default;
+$cardview-card__cover--noimage-bg-color: null !default;
+$cardview-card__cover--noimage__icon-color: null !default;
+$cardview-card__cover--noimage__icon-size: null !default;
+
+$cardview-card--selected__cover-bg-color: null !default;
+$cardview-card--selected__cover--noimage-bg-color: null !default;
+$cardview-card--selected__cover--noimage__icon-color: null !default;

package/data/scss/widgets/base/cardView/content_view/content/card/header/_index.scss

@@ -0,0 +1,56 @@
+@use './variables' as *;
+@use '../variables' as *;
+
+.dx-cardview-card-header {
+  display: flex;
+  align-items: center;
+  height: $cardview-card__header-height;
+
+  .dx-toolbar {
+    padding: 0 12px;
+    border-radius: $cardview-card-border-radius $cardview-card-border-radius 0 0;
+    background-color: transparent;
+
+    .dx-toolbar-label {
+      font-size: $cardview-card__header-text-size;
+    }
+
+    .dx-toolbar-items-container {
+      height: $cardview-card__header__toolbar-override-height;
+    }
+  }
+
+  .dx-cardview-select-checkbox {
+    padding-right: $cardview-card__header__selection-checkbox-padding-right;
+  }
+}
+
+.dx-cardview-card-selection {
+  .dx-toolbar {
+    background-color: $cardview-card--selected-bg-color;
+  }
+}
+
+.dx-cardview-select-checkboxes-hidden .dx-cardview-card:not(.dx-cardview-card-selection) .dx-cardview-select-checkbox {
+  .dx-checkbox {
+    display: none;
+  }
+
+  .dx-toolbar-item-content::before {
+    content: '';
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    pointer-events: none;
+  }
+
+  .dx-toolbar-item-content:hover {
+    &::before {
+      display: none;
+    }
+
+    .dx-checkbox {
+      display: inline-block;
+    }
+  }
+}

package/data/scss/widgets/base/cardView/content_view/content/card/header/_variables.scss

@@ -0,0 +1,4 @@
+$cardview-card__header-height: null !default;
+$cardview-card__header-text-size: null !default;
+$cardview-card__header__toolbar-override-height: null !default;
+$cardview-card__header__selection-checkbox-padding-right: null !default;