Merge branch '26_1' into chore/26_1_fix_alerts

Author: dxvladislavvolkov

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

@@ -1,11 +1,11 @@
 <div id="accordion">
   <dx-accordion
-    #accordion
     [dataSource]="companies"
-    [collapsible]="false"
-    [multiple]="false"
-    [animationDuration]="300"
-    [selectedItems]="[companies[0]]"
+    [collapsible]="collapsible"
+    [multiple]="multiple"
+    [animationDuration]="animationDuration"
+    [selectedItems]="selectedItems"
+    (selectedItemsChange)="onSelectedItemsChange($event)"
     id="accordion-container"
   >
     <div *dxTemplate="let company of 'title'">
@@ -41,20 +41,17 @@
   <div class="options">
     <div class="caption">Options</div>
     <div class="option">
-      <dx-check-box
-        text="Multiple enabled"
-        [(value)]="accordion.multiple"
-      ></dx-check-box>
+      <dx-check-box text="Multiple enabled" [(value)]="multiple"></dx-check-box>
     </div>
     <div class="option">
       <dx-check-box
         text="Collapsible enabled"
-        [(value)]="accordion.collapsible"
+        [(value)]="collapsible"
       ></dx-check-box>
     </div>
     <div class="option">
       <span>Animation duration</span>
-      <dx-slider [min]="0" [max]="1000" [(value)]="accordion.animationDuration">
+      <dx-slider [min]="0" [max]="1000" [(value)]="animationDuration">
         <dxo-slider-tooltip
           [enabled]="true"
           position="bottom"
@@ -67,8 +64,8 @@
       <dx-tag-box
         [dataSource]="companies"
         displayExpr="CompanyName"
-        [(value)]="accordion.selectedItems"
-        [disabled]="!accordion.multiple"
+        [(value)]="selectedItems"
+        [disabled]="!multiple"
         [inputAttr]="{ 'aria-label': 'Company' }"
       ></dx-tag-box>
     </div>

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

@@ -1,5 +1,5 @@
 import {
-  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   enableProdMode,
   provideZoneChangeDetection,
@@ -16,7 +16,6 @@ if (!/localhost/.test(document.location.host)) {
 }
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
@@ -32,8 +31,22 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   companies: Company[];
 
-  constructor(service: Service) {
+  selectedItems: Company[];
+
+  multiple = false;
+
+  collapsible = false;
+
+  animationDuration = 300;
+
+  constructor(service: Service, private changeDetectorRef: ChangeDetectorRef) {
     this.companies = service.getCompanies();
+    this.selectedItems = [this.companies[0]];
+  }
+
+  onSelectedItemsChange(items: Company[]) {
+    this.selectedItems = items;
+    this.changeDetectorRef.detectChanges();
   }
 }
 

apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.ts

@@ -1,7 +1,5 @@
 import {
-  ChangeDetectionStrategy,
   Component,
-  AfterViewInit,
   enableProdMode,
   provideZoneChangeDetection,
   inject,
@@ -19,7 +17,6 @@ if (!/localhost/.test(document.location.host)) {
 }
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
@@ -28,28 +25,24 @@ if (!/localhost/.test(document.location.host)) {
     DxSelectBoxModule,
   ],
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent {
   temperature: number[] = [2, 4, 6, 8, 9, 10, 11];
 
   palette: string[] = ['#c3a2cc', '#b7b5e0', '#e48cba'];
 
   paletteIndex = 0;
 
-  monthWeather = {} as DataSource;
-
   http = inject(HttpClient);
 
-  ngAfterViewInit() {
-    this.monthWeather = new DataSource({
-      store: new CustomStore({
-        load: () => lastValueFrom(this.http.get('../../../../data/monthWeather.json'))
-          .catch(() => { throw new Error('Data Loading Error'); }),
-        loadMode: 'raw',
-      }),
-      filter: ['t', '>', '2'],
-      paginate: false,
-    });
-  }
+  monthWeather = new DataSource({
+    store: new CustomStore({
+      load: () => lastValueFrom(this.http.get('../../../../data/monthWeather.json'))
+        .catch(() => { throw new Error('Data Loading Error'); }),
+      loadMode: 'raw',
+    }),
+    filter: ['t', '>', '2'],
+    paginate: false,
+  });
 
   customizePoint = () => {
     const color = this.palette[this.paletteIndex];

apps/demos/Demos/Charts/SignalRService/Angular/app/app.component.html

@@ -1,4 +1,5 @@
-<div ng-if="connectionStarted">
+@if (connectionStarted) {
+<div>
   <dx-chart
     id="chart"
     [dataSource]="dataSource"
@@ -74,3 +75,4 @@
     </div>
   </dx-chart>
 </div>
+}

apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.ts

@@ -4,7 +4,7 @@ import {
   AfterViewInit,
   enableProdMode,
   provideZoneChangeDetection,
-  ChangeDetectionStrategy,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { DxDataGridModule, DxDataGridComponent, DxButtonModule } from 'devextreme-angular';
 import { query } from 'devextreme-angular/common/data';
@@ -16,7 +16,6 @@ if (!/localhost/.test(document.location.host)) {
 }
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
@@ -41,7 +40,7 @@ export class AppComponent implements AfterViewInit {
 
   avgDuration = 0;
 
-  constructor() {
+  constructor(private changeDetectorRef: ChangeDetectorRef) {
     const url = 'https://js.devexpress.com/Demos/NetCore/api/TreeListTasks';
 
     this.tasksDataSource = AspNetData.createStore({
@@ -82,6 +81,7 @@ export class AppComponent implements AfterViewInit {
       .groupBy('Task_Assigned_Employee_ID')
       .toArray().length;
     this.avgDuration = Math.round(averageDurationInDays) || 0;
+    this.changeDetectorRef.markForCheck();
   }
 }
 

apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.ts

@@ -1,7 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { DxDataGridModule, DxSelectBoxModule } from 'devextreme-angular';
-import themes, { isGeneric } from 'devextreme/ui/themes';
+import themes from 'devextreme/ui/themes';
 import { Service, Sale } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -29,7 +29,7 @@ export class AppComponent {
   constructor(service: Service) {
     this.sales = service.getSales();
     this.allMode = 'allPages';
-    this.checkBoxesMode = isGeneric(themes.current()) ? 'onClick' : 'always';
+    this.checkBoxesMode = themes.current().startsWith('generic') ? 'onClick' : 'always';
   }
 }
 

apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/App.tsx

@@ -8,7 +8,7 @@ import DataGrid, {
   Pager,
 } from 'devextreme-react/data-grid';
 import { SelectBox } from 'devextreme-react/select-box';
-import themes, { isGeneric } from 'devextreme/ui/themes';
+import themes from 'devextreme/ui/themes';
 import { sales } from './data.ts';
 
 const selectAllFieldLabel = { 'aria-label': 'Select All Mode' };
@@ -20,7 +20,7 @@ const selectAllModes = ['allPages', 'page'];
 const App = () => {
   const [allMode, setAllMode] = useState<DataGridTypes.SelectAllMode>('allPages');
   const [checkBoxesMode, setCheckBoxesMode] = useState<DataGridTypes.SelectionColumnDisplayMode>(
-    isGeneric(themes.current()) ? 'onClick' : 'always',
+    () => themes.current().startsWith('generic') ? 'onClick' : 'always',
   );
 
   const onCheckBoxesModeChanged = useCallback(({ value }) => {

apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/App.js

@@ -3,7 +3,7 @@ import DataGrid, {
   Column, Selection, FilterRow, Paging, Pager,
 } from 'devextreme-react/data-grid';
 import { SelectBox } from 'devextreme-react/select-box';
-import themes, { isGeneric } from 'devextreme/ui/themes';
+import themes from 'devextreme/ui/themes';
 import { sales } from './data.js';
 
 const selectAllFieldLabel = { 'aria-label': 'Select All Mode' };
@@ -12,8 +12,8 @@ const showCheckBoxesModes = ['none', 'onClick', 'onLongTap', 'always'];
 const selectAllModes = ['allPages', 'page'];
 const App = () => {
   const [allMode, setAllMode] = useState('allPages');
-  const [checkBoxesMode, setCheckBoxesMode] = useState(
-    isGeneric(themes.current()) ? 'onClick' : 'always',
+  const [checkBoxesMode, setCheckBoxesMode] = useState(() =>
+    themes.current().startsWith('generic') ? 'onClick' : 'always',
   );
   const onCheckBoxesModeChanged = useCallback(({ value }) => {
     setCheckBoxesMode(value);

apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue

@@ -72,13 +72,13 @@ import {
   DxPager,
   type DxDataGridTypes,
 } from 'devextreme-vue/data-grid';
-import themes, { isGeneric } from 'devextreme/ui/themes';
+import themes from 'devextreme/ui/themes';
 import { sales } from './data.ts';
 
 const selectAllModes: DxDataGridTypes.SelectAllMode[] = ['allPages', 'page'];
 const showCheckBoxesModes: DxDataGridTypes.SelectionColumnDisplayMode[] = ['none', 'onClick', 'onLongTap', 'always'];
 const allMode = ref(selectAllModes[0]);
-const checkBoxesMode = ref<DxDataGridTypes.SelectionColumnDisplayMode>(isGeneric(themes.current()) ? 'onClick' : 'always');
+const checkBoxesMode = ref<DxDataGridTypes.SelectionColumnDisplayMode>(themes.current().startsWith('generic') ? 'onClick' : 'always');
 </script>
 <style>
 .options {

apps/demos/Demos/DataGrid/NewRecordPosition/Angular/app/app.component.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import {
+  ChangeDetectorRef, Component, enableProdMode, provideZoneChangeDetection,
+} from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import Guid from 'devextreme/core/guid';
 import { CustomStore } from 'devextreme-angular/common/data';
@@ -13,7 +15,6 @@ if (!/localhost/.test(document.location.host)) {
 type FirstArgument<T> = T extends (...args: any) => any ? Parameters<T>[0] : never;
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
@@ -38,7 +39,7 @@ export class AppComponent {
 
   scrollingModeOptions: DxDataGridTypes.DataGridScrollMode[] = ['standard', 'virtual'];
 
-  constructor(service: Service) {
+  constructor(service: Service, private changeDetectorRef: ChangeDetectorRef) {
     this.dataSource = service.getDataSource();
   }
 
@@ -50,6 +51,7 @@ export class AppComponent {
       insertAfterKey: row.key,
     }];
     this.editRowKey = key;
+    this.changeDetectorRef.markForCheck();
   };
 
   isAddButtonVisible({ row }: FirstArgument<DxDataGridTypes.ColumnButton['visible']>) {