Merge branch '24_2' into 24_2_unskip_platforms_demo_tests

.github/workflows/update_version.yml

@@ -59,7 +59,7 @@ jobs:
           git config --global user.name "DX Robot"
 
       - name: Bump version
-        run: pnpm run all:update-version -- ${{ inputs.version }}
+        run: pnpm run all:update-version ${{ inputs.version }}
 
       - name: Commit changes and make PR
         env:

README.md

@@ -37,7 +37,7 @@ The DevExtreme website includes "Getting Started" guides for every aspect of Dev
 - [Demo Gallery](https://js.devexpress.com/Demos/WidgetsGallery)
 - [Responsive UI Templates](https://js.devexpress.com/Templates/UITemplates)
 - [Documentation](https://js.devexpress.com/Documentation)
-- [Examples on GitHub](https://github.com/DevExpress/DevExtreme-examples)
+- [Examples on GitHub](https://github.com/DevExpress-Examples)
 - [YouTube videos](https://www.youtube.com/playlist?list=PL8h4jt35t1wjGvgflbHEH_e3b23AA30-z)
 
 ## Contributing

apps/demos/Demos/Chat/Customization/description.md

@@ -0,0 +1,14 @@
+Use the following properties to customize the Chat component:
+
+- To display/hide Chat UI elements:
+    - [showAvatar](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showAvatar)    
+    - [showUserName](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showUserName)    
+    - [showDayHeaders](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showDayHeaders)     
+    - [showMessageTimestamp](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showMessageTimestamp)
+
+- To modify date/time formats:
+    - [dayHeaderFormat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dayHeaderFormat)     
+    - [messageTimestampFormat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#messageTimestampFormat) 
+
+- To deactivate Chat, use the [disabled](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#disabled) property.
+<!--split-->

apps/demos/testing/widgets/chat/Customization.test.js

@@ -0,0 +1,67 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { Selector } from 'testcafe';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
+
+fixture('Chat.Customization')
+  .page('http://localhost:8080/')
+  .before(async (ctx) => {
+    ctx.initialWindowSize = [900, 800];
+  });
+
+runManualTest('Chat', 'Customization', ['jQuery'], (test) => {
+  test('Customization', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+      .click('#day-headers-format')
+      .click(Selector('.dx-list-item').nth(2))
+      .wait(500);
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_day_headers_format_is_changed.png');
+
+    await t
+      .click('#show-day-headers');
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_day_headers_is_hidden.png');
+
+    await t
+      .click('#show-avatar');
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_avatar_is_hidden.png');
+
+    await t
+      .click('#show-avatar');
+
+    await t
+      .click('#show-user-name');
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_username_is_hidden.png');
+
+    await t
+      .click('#show-user-name');
+
+    await t
+      .click('#message-timestamp-format')
+      .click(Selector('.dx-list-item').nth(5))
+      .wait(500);
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_message_timestamp_format_is_changed.png');
+
+    await t
+      .click('#show-message-timestamp');
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_message_timestamps_is_hidden.png');
+
+    await t
+      .typeText('.dx-texteditor-input', 'testing')
+      .pressKey('enter')
+      .click('#chat-disabled');
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_is_disabled_after_sent.png');
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  });
+});

apps/demos/utils/tests/testcafe-helpers/matrix-test-helper.test.js

@@ -20,6 +20,7 @@ const testStub = {
     page() { return this; },
   },
   page() { return this; },
+  clientScripts() { return this; }
 };
 
 function updateChanges(value, options) {

apps/demos/utils/visual-tests/matrix-test-helper.js

@@ -328,7 +328,14 @@ export function runManualTestCore(testObject, product, demo, framework, callback
     return;
   }
 
-  const test = testObject.page(`http://localhost:8080/apps/demos/Demos/${product}/${demo}/${framework}/`);
+  const clientScriptSource = globalReadFrom(__dirname, `../../Demos/${product}/${demo}/client-script.js`, (x) => [{ content: x }]) || [];
+
+  const test = testObject
+    .clientScripts([
+      { module: 'mockdate' },
+      ...clientScriptSource
+    ])
+    .page(`http://localhost:8080/apps/demos/Demos/${product}/${demo}/${framework}/`);
 
   test.before?.(async (t) => {
     const [width, height] = t.fixtureCtx.initialWindowSize;

package.json

@@ -44,7 +44,7 @@
     "axe-core": "4.10.2",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.0.0-beta.13.1",
+    "devextreme-internal-tools": "16.0.0-beta.16",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",

packages/devextreme-angular/src/ui/diagram/nested/group-dxi.ts

@@ -6,7 +6,10 @@ import {
     NgModule,
     Host,
     SkipSelf,
-    Input
+    Input,
+    ContentChildren,
+    forwardRef,
+    QueryList
 } from '@angular/core';
 
 
@@ -18,6 +21,7 @@ import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
+import { DxiDiagramCommandComponent } from './command-dxi';
 
 
 @Component({
@@ -81,6 +85,14 @@ export class DxiDiagramGroupComponent extends CollectionNestedOption {
     }
 
 
+    @ContentChildren(forwardRef(() => DxiDiagramCommandComponent))
+    get commandsChildren(): QueryList<DxiDiagramCommandComponent> {
+        return this._getOption('commands');
+    }
+    set commandsChildren(value) {
+        this.setChildren('commands', value);
+    }
+
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost) {
         super();

packages/devextreme-angular/src/ui/form/nested/item-dxi.ts

@@ -10,7 +10,10 @@ import {
     Inject,
     AfterViewInit,
     SkipSelf,
-    Input
+    Input,
+    ContentChildren,
+    forwardRef,
+    QueryList
 } from '@angular/core';
 
 import { DOCUMENT } from '@angular/common';
@@ -30,6 +33,17 @@ import {
     DxTemplateHost
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
+import { DxiFormAsyncRuleComponent } from './async-rule-dxi';
+import { DxiFormCompareRuleComponent } from './compare-rule-dxi';
+import { DxiFormCustomRuleComponent } from './custom-rule-dxi';
+import { DxiFormEmailRuleComponent } from './email-rule-dxi';
+import { DxiFormNumericRuleComponent } from './numeric-rule-dxi';
+import { DxiFormPatternRuleComponent } from './pattern-rule-dxi';
+import { DxiFormRangeRuleComponent } from './range-rule-dxi';
+import { DxiFormRequiredRuleComponent } from './required-rule-dxi';
+import { DxiFormStringLengthRuleComponent } from './string-length-rule-dxi';
+import { DxiFormTabComponent } from './tab-dxi';
+import { DxiFormValidationRuleComponent } from './validation-rule-dxi';
 
 
 @Component({
@@ -302,6 +316,94 @@ export class DxiFormItemComponent extends CollectionNestedOption implements Afte
     }
 
 
+    @ContentChildren(forwardRef(() => DxiFormAsyncRuleComponent))
+    get asyncRulesChildren(): QueryList<DxiFormAsyncRuleComponent> {
+        return this._getOption('validationRules');
+    }
+    set asyncRulesChildren(value) {
+        this.setChildren('validationRules', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiFormCompareRuleComponent))
+    get compareRulesChildren(): QueryList<DxiFormCompareRuleComponent> {
+        return this._getOption('validationRules');
+    }
+    set compareRulesChildren(value) {
+        this.setChildren('validationRules', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiFormCustomRuleComponent))
+    get customRulesChildren(): QueryList<DxiFormCustomRuleComponent> {
+        return this._getOption('validationRules');
+    }
+    set customRulesChildren(value) {
+        this.setChildren('validationRules', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiFormEmailRuleComponent))
+    get emailRulesChildren(): QueryList<DxiFormEmailRuleComponent> {
+        return this._getOption('validationRules');
+    }
+    set emailRulesChildren(value) {
+        this.setChildren('validationRules', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiFormNumericRuleComponent))
+    get numericRulesChildren(): QueryList<DxiFormNumericRuleComponent> {
+        return this._getOption('validationRules');
+    }
+    set numericRulesChildren(value) {
+        this.setChildren('validationRules', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiFormPatternRuleComponent))
+    get patternRulesChildren(): QueryList<DxiFormPatternRuleComponent> {
+        return this._getOption('validationRules');
+    }
+    set patternRulesChildren(value) {
+        this.setChildren('validationRules', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiFormRangeRuleComponent))
+    get rangeRulesChildren(): QueryList<DxiFormRangeRuleComponent> {
+        return this._getOption('validationRules');
+    }
+    set rangeRulesChildren(value) {
+        this.setChildren('validationRules', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiFormRequiredRuleComponent))
+    get requiredRulesChildren(): QueryList<DxiFormRequiredRuleComponent> {
+        return this._getOption('validationRules');
+    }
+    set requiredRulesChildren(value) {
+        this.setChildren('validationRules', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiFormStringLengthRuleComponent))
+    get stringLengthRulesChildren(): QueryList<DxiFormStringLengthRuleComponent> {
+        return this._getOption('validationRules');
+    }
+    set stringLengthRulesChildren(value) {
+        this.setChildren('validationRules', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiFormTabComponent))
+    get tabsChildren(): QueryList<DxiFormTabComponent> {
+        return this._getOption('tabs');
+    }
+    set tabsChildren(value) {
+        this.setChildren('tabs', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiFormValidationRuleComponent))
+    get validationRulesChildren(): QueryList<DxiFormValidationRuleComponent> {
+        return this._getOption('validationRules');
+    }
+    set validationRulesChildren(value) {
+        this.setChildren('validationRules', value);
+    }
+
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost,
             private renderer: Renderer2,

packages/devextreme-react/src/bar-gauge.ts

@@ -641,6 +641,9 @@ const _componentSubtitle = (props: ISubtitleProps) => {
     ...props,
     elementDescriptor: {
       OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
     },
   });
 };
@@ -679,6 +682,12 @@ const _componentTitle = (props: ITitleProps) => {
     ...props,
     elementDescriptor: {
       OptionName: "title",
+      ExpectedChildren: {
+        barGaugeTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false }
+      },
     },
   });
 };