Cherry-picks to release branch

.github/workflows/demos_visual_tests_frameworks.yml

@@ -451,7 +451,7 @@ jobs:
       working-directory: apps/demos
       env:
         CHANGEDFILEINFOSPATH: changed-files.json
-        BROWSERS: chrome:headless --disable-gpu --window-size=1200,800 --js-flags=--random-seed=2147483647
+        BROWSERS: chrome:headless --window-size=1200,800 --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
         # DEBUG: hammerhead:*,testcafe:*
         CONCURRENCY: 4
         TCQUARANTINE: true

apps/demos/Demos/Chat/Customization/jQuery/index.js

@@ -10,30 +10,6 @@ $(() => {
     messageTimestampFormat: messageTimestampFormat[0],
   }).dxChat('instance');
 
-  $('#chat-disabled').dxCheckBox({
-    value: false,
-    text: 'Disable Chat',
-    onValueChanged(data) {
-      chat.option('disabled', data.value);
-    },
-  });
-
-  $('#show-day-headers').dxCheckBox({
-    value: true,
-    text: 'Show Day Headers',
-    onValueChanged(data) {
-      chat.option('showDayHeaders', data.value);
-    },
-  });
-
-  $('#show-message-timestamp').dxCheckBox({
-    value: true,
-    text: 'Show Message Timestamp',
-    onValueChanged(data) {
-      chat.option('showMessageTimestamp', data.value);
-    },
-  });
-
   $('#show-avatar').dxCheckBox({
     value: true,
     text: 'Show Avatar',
@@ -50,6 +26,14 @@ $(() => {
     },
   });
 
+  $('#show-day-headers').dxCheckBox({
+    value: true,
+    text: 'Show Day Headers',
+    onValueChanged(data) {
+      chat.option('showDayHeaders', data.value);
+    },
+  });
+
   $('#day-headers-format').dxSelectBox({
     items: dayHeaderFormat,
     value: dayHeaderFormat[0],
@@ -59,6 +43,14 @@ $(() => {
     },
   });
 
+  $('#show-message-timestamp').dxCheckBox({
+    value: true,
+    text: 'Show Message Timestamp',
+    onValueChanged(data) {
+      chat.option('showMessageTimestamp', data.value);
+    },
+  });
+
   $('#message-timestamp-format').dxSelectBox({
     items: messageTimestampFormat,
     value: messageTimestampFormat[0],
@@ -67,4 +59,12 @@ $(() => {
       chat.option('messageTimestampFormat', data.value);
     },
   });
+
+  $('#chat-disabled').dxCheckBox({
+    value: false,
+    text: 'Disable Chat',
+    onValueChanged(data) {
+      chat.option('disabled', data.value);
+    },
+  });
 });

apps/demos/Demos/Chat/Overview/Vue/App.vue

@@ -1,62 +1,67 @@
 <template>
-    <DxChat
-        v-model:items="messages"
-        v-model:user="currentUser"
-        v-model:typing-users="userChatTypingUsers"
-        @message-entered="onMessageEntered($event)"
-        @typing-start="userChatTypingStart()"
-        @typing-end="userChatTypingEnd()"
-    ></DxChat>
-    <DxChat
-        v-model:items="messages"
-        v-model:user="supportAgent"
-        v-model:typing-users="supportChatTypingUsers"
-        @message-entered="onMessageEntered($event)"
-        @typing-start="supportChatTypingStart()"
-        @typing-end="supportChatTypingEnd()"
-    ></DxChat>
+  <DxChat
+    v-model:items="messages"
+    v-model:user="currentUser"
+    v-model:typing-users="userChatTypingUsers"
+    @message-entered="onMessageEntered($event)"
+    @typing-start="userChatTypingStart()"
+    @typing-end="userChatTypingEnd()"
+  />
+  <DxChat
+    v-model:items="messages"
+    v-model:user="supportAgent"
+    v-model:typing-users="supportChatTypingUsers"
+    @message-entered="onMessageEntered($event)"
+    @typing-start="supportChatTypingStart()"
+    @typing-end="supportChatTypingEnd()"
+  />
 </template>
 
-<style scoped>
-    #app {
-        display: flex;
-        gap: 20px;
-    }
-
-    .dx-chat {
-        height: 710px;
-    }
-
-    .dx-avatar {
-        border: 1px solid var(--dx-color-border);
-    }
-</style>
-
 <script setup lang="ts">
-    import { ref } from 'vue';
-    import DxChat from 'devextreme-vue/chat';
-    import { messages, supportAgent, currentUser } from './data.ts';
-
-    const userChatTypingUsers = ref([]);
-    const supportChatTypingUsers = ref([]);
-
-    function onMessageEntered(event) {
-        messages.value = [...messages.value, event.message];
-    }
-
-    function userChatTypingStart() {
-        supportChatTypingUsers.value = [currentUser.value];
-    }
-
-    function userChatTypingEnd() {
-        supportChatTypingUsers.value = [];
-    }
-
-    function supportChatTypingStart() {
-        userChatTypingUsers.value = [supportAgent.value];
-    }
-
-    function supportChatTypingEnd() {
-        userChatTypingUsers.value = [];
-    }
+import { ref } from 'vue';
+import DxChat from 'devextreme-vue/chat';
+import {
+  messages as initialMessages,
+  supportAgent,
+  currentUser,
+} from './data.ts';
+
+const messages = ref(initialMessages);
+const userChatTypingUsers = ref([]);
+const supportChatTypingUsers = ref([]);
+
+function onMessageEntered(event) {
+  messages.value = [...messages.value, event.message];
+}
+
+function userChatTypingStart() {
+  supportChatTypingUsers.value = [currentUser];
+}
+
+function userChatTypingEnd() {
+  supportChatTypingUsers.value = [];
+}
+
+function supportChatTypingStart() {
+  userChatTypingUsers.value = [supportAgent];
+}
+
+function supportChatTypingEnd() {
+  userChatTypingUsers.value = [];
+}
 </script>
+
+<style scoped>
+#app {
+  display: flex;
+  gap: 20px;
+}
+
+.dx-chat {
+  height: 710px;
+}
+
+.dx-avatar {
+  border: 1px solid var(--dx-color-border);
+}
+</style>

apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css

@@ -0,0 +1,100 @@
+body {
+  overflow-x: hidden;
+}
+
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.container {
+  min-width: 720px;
+  width: 100%;
+}
+
+::ng-deep .employees {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  min-height: 644px;
+  padding-bottom: 24px;
+}
+
+::ng-deep employee-card {
+  width: 100%;
+  max-height: 312px;
+  align-self: stretch;
+  overflow: hidden;
+  border: var(--dx-border-width) solid var(--dx-color-border);
+  border-radius: var(--dx-border-radius);
+  background-color: var(--dx-component-color-bg);
+}
+
+::ng-deep .employees.employees--forth employee-card {
+  min-width: 250px;
+  width: 390px;
+  flex-basis: calc(50% - 10px);
+}
+
+::ng-deep .employees.employees--six employee-card {
+  flex-basis: calc(33.3% - 12.5px);
+}
+
+::ng-deep .employees__img-wrapper {
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+  border-bottom: var(--dx-border-width) solid var(--dx-color-border);
+  background-color: #fff;
+}
+
+::ng-deep .employees__img {
+  display: block;
+  height: 220px;
+  position: absolute;
+  content: "";
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+::ng-deep .employees__info {
+  padding: 24px;
+}
+
+::ng-deep .employees__info-row {
+  margin-bottom: 8px;
+  text-wrap: nowrap;
+}
+
+::ng-deep .employees__info-label {
+  display: inline-block;
+  font-weight: 600;
+  vertical-align: middle;
+}
+
+::ng-deep .employees.employees--forth .employees__info-label {
+  width: 160px;
+}
+
+::ng-deep .employees.employees--six .employees__info-label {
+  width: 80px;
+}
+
+::ng-deep .employees__info-value {
+  display: inline-block;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  overflow: hidden;
+  white-space:nowrap
+}
+
+::ng-deep .employees.employees--forth .employees__info-value {
+  max-width: 180px;
+}
+
+::ng-deep .employees.employees--six .employees__info-value {
+  max-width: 120px;
+}

apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html

@@ -1,7 +1,22 @@
-<dx-data-grid
-  id="gridContainer"
-  [dataSource]="customers"
-  [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']"
-  [showBorders]="true"
->
-</dx-data-grid>
+<div class="container">
+  <div
+    class="employees"
+    [ngClass]="pageSize === 4 ? 'employees--forth' : 'employees--six'"
+  >
+    @for (employee of pageEmployees; track employee.ID) {
+    <employee-card [employee]="employee"></employee-card>
+    }
+  </div>
+
+  <dx-pagination
+    [showInfo]="showInfo"
+    [showNavigationButtons]="showNavigationButtons"
+    [allowedPageSizes]="allowedPageSizes"
+    [itemCount]="itemCount"
+    [pageIndex]="pageIndex"
+    [pageSize]="pageSize"
+    (pageIndexChange)="onPageIndexChange($event)"
+    (pageSizeChange)="onPageSizeChange($event)"
+  >
+  </dx-pagination>
+</div>