Cherry-picks to release branch

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>

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

@@ -1,8 +1,9 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxDataGridModule } from 'devextreme-angular';
-import { Customer, Service } from './app.service';
+import { DxPaginationModule } from 'devextreme-angular';
+import { Employee, Service } from './app.service';
+import { EmployeeCard } from './employee-card/employee-card.component';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -17,22 +18,53 @@ if (window && window.config.packageConfigPaths) {
 @Component({
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
 })
 export class AppComponent {
-  customers: Customer[];
+  employees: Employee[];
+
+  pageEmployees: Employee[];
+
+  itemCount: number;
+
+  readonly allowedPageSizes = [4, 6];
+
+  showInfo = true;
+
+  showNavigationButtons = true;
+
+  pageIndex = 1;
+
+  pageSize = 4;
+
+  onPageIndexChange(val) {
+    this.pageIndex = val;
+    this.setPageEmployees();
+  }
+
+  onPageSizeChange(val) {
+    this.pageSize = val;
+    this.setPageEmployees();
+  }
+
+  setPageEmployees() {
+    this.pageEmployees = this.employees.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
+  }
 
   constructor(service: Service) {
-    this.customers = service.getCustomers();
+    this.employees = service.getEmployees();
+    this.itemCount = this.employees.length;
+    this.setPageEmployees();
   }
 }
 
 @NgModule({
   imports: [
     BrowserModule,
-    DxDataGridModule,
+    DxPaginationModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, EmployeeCard],
   bootstrap: [AppComponent],
 })
 export class AppModule { }