Merge branch 'vnext' into localization-2025-10-24

Author: randriova

doc/en/components/charts/features/chart-data-annotations.md

@@ -10,8 +10,8 @@ namespace: Infragistics.Controls.Charts
 
 In the {Platform} chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data.
 
-[!Note]
-These features are designed to support cartesian axes and does not currently support radius or angle axes.
+> [!Note]
+> These features are designed to support cartesian axes and does not currently support radius or angle axes. 
 
 For example, you can annotates stock prices with stock events and patterns.
 

doc/en/components/excel-library-working-with-charts.md

@@ -13,7 +13,8 @@ The Infragistics {Platform} Excel Engine's `WorksheetChart` functionality allows
 
 `sample="/excel/excel-library/working-with-charts", height="500", alt="{Platform} Working with Charts Example"`
 
-
+> [!Note]
+> The XLSX format is required. Other formats are not supported at this time.
 
 <div class="divider--half"></div>
 

doc/en/components/general-changelog-dv-react.md

@@ -11,6 +11,73 @@ All notable changes for each version of {ProductName} are documented on this pag
 
 ## **{PackageVerLatest}**
 
+### New Components
+
+- Added `IgrChat` component
+
+### {PackageGrids} (Grids)
+- `IgrGrid`, `IgrTreeGrid`, `IgrHierarchicalGrid`
+ - Introduced a new cell merging feature that allows you to configure and merge cells in a column based on same data or other custom condition, into a single cell.
+
+ It can be enabled on the individual columns:
+
+ ```tsx
+ <IgrColumn field="field" merge={true}></IgrColumn>
+ ```
+ The merging can be configured on the grid level to apply either:
+ - `onSort` - only when the column is sorted.
+ - `always` - always, regardless of data operations.
+
+ ```tsx
+ <IgrGrid cellMergeMode="always">
+ </IgrGrid>
+ ```
+
+ The default `cellMergeMode` is `onSort`.
+
+ The functionality can be modified by setting a custom `mergeStrategy` on the grid, in case some other merge conditions or logic is needed for a custom scenario.
+
+ It's possible also to set a `mergeComparer` on the individual columns, in case some custom handling is needed for a particular data field.
+
+ - Added ability to pin individual columns to a specific side (start or end of the grid), so that you can now have pinning from both sides. This can be done either declaratively by setting the `pinningPosition` property on the column:
+
+ ```tsx
+ <IgrColumn field="Col1" pinned={true} pinningPosition="pinningPosition">
+ </IgrColumn>
+ ```
+
+ ```ts
+ pinningPosition = ColumnPinningPosition.End;
+ ```
+
+ Or with the API, via optional parameter:
+
+ ```ts
+ grid.pinColumn('Col1', 0, ColumnPinningPosition.End);
+ grid.pinColumn('Col2', 0, ColumnPinningPosition.Start);
+ ```
+
+ If property `pinningPosition` is not set on a column, the column will default to the position specified on the grid's `pinning` options for `columns`.
+
+ - **Sorting improvements**
+ - Improved sorting algorithm efficiency using Schwartzian transformation. This is a technique, also known as decorate-sort-undecorate, which avoids recomputing the sort keys by temporarily associating them with the original data records.
+ - Refactored sorting algorithms from recursive to iterative.
+ - **Groupby improvements**
+ - Refactored grouping algorithm from recursive to iterative.
+ - Optimized grouping operations.
+
+### Bug Fixes
+| Bug Number | Control | Description |
+|------------|---------|-------------|
+|[1853](https://github.com/IgniteUI/igniteui-webcomponents/pull/1853)| List |removed duplicated CSS variables across list components and themes|
+|[1871](https://github.com/IgniteUI/igniteui-webcomponents/pull/1871)| Card |Consume colors from themes|
+|[1873](https://github.com/IgniteUI/igniteui-webcomponents/pull/1873)| Card |Avatar size in card header|
+|[1882](https://github.com/IgniteUI/igniteui-webcomponents/pull/1882)| Chat |Message actions not rendered after last message|
+|[1885](https://github.com/IgniteUI/igniteui-webcomponents/pull/1885)| Date Picker |Change event not emitted for non-editable input configuration|
+|[1894](https://github.com/IgniteUI/igniteui-webcomponents/pull/1894)| Date Picker | Issues when clearing the value and notch border in Material theme|
+
+## **{PackageVerChanges-25-1-OCT}**
+
 ### {PackageMaps} (Geographic Map)
 
 #### <label>PREVIEW</label> Azure Map Imagery Support

doc/en/components/general-changelog-dv-wc.md

@@ -12,6 +12,74 @@ All notable changes for each version of {ProductName} are documented on this pag
 
 ## **{PackageVerLatest}**
 
+
+### New Components
+
+- Added `IgrChat` component
+
+### {PackageGrids} (Grids)
+- `IgcGrid`, `IgcTreeGrid`, `IgcHierarchicalGrid`
+ - Introduced a new cell merging feature that allows you to configure and merge cells in a column based on same data or other custom condition, into a single cell.
+
+ It can be enabled on the individual columns:
+
+ ```html
+ <igc-column field="field" merge="true"></igc-column>
+ ```
+ The merging can be configured on the grid level to apply either:
+ - `onSort` - only when the column is sorted.
+ - `always` - always, regardless of data operations.
+
+ ```html
+ <igc-grid cellMergeMode="always">
+ </igc-grid>
+ ```
+
+ The default `cellMergeMode` is `onSort`.
+
+ The functionality can be modified by setting a custom `mergeStrategy` on the grid, in case some other merge conditions or logic is needed for a custom scenario.
+
+ It's possible also to set a `mergeComparer` on the individual columns, in case some custom handling is needed for a particular data field.
+
+ - Added ability to pin individual columns to a specific side (start or end of the grid), so that you can now have pinning from both sides. This can be done either declaratively by setting the `pinningPosition` property on the column:
+
+ ```html
+ <igc-column field="Col1" pinned="true" pinningPosition="pinningPosition">
+ </igc-column>
+ ```
+
+ ```ts
+ pinningPosition = ColumnPinningPosition.End;
+ ```
+
+ Or with the API, via optional parameter:
+
+ ```ts
+ grid.pinColumn('Col1', 0, ColumnPinningPosition.End);
+ grid.pinColumn('Col2', 0, ColumnPinningPosition.Start);
+ ```
+
+ If property `pinningPosition` is not set on a column, the column will default to the position specified on the grid's `pinning` options for `columns`.
+
+ - **Sorting improvements**
+ - Improved sorting algorithm efficiency using Schwartzian transformation. This is a technique, also known as decorate-sort-undecorate, which avoids recomputing the sort keys by temporarily associating them with the original data records.
+ - Refactored sorting algorithms from recursive to iterative.
+ - **Groupby improvements**
+ - Refactored grouping algorithm from recursive to iterative.
+ - Optimized grouping operations.
+
+### Bug Fixes
+| Bug Number | Control | Description |
+|------------|---------|-------------|
+|[1853](https://github.com/IgniteUI/igniteui-webcomponents/pull/1853)| List |removed duplicated CSS variables across list components and themes|
+|[1871](https://github.com/IgniteUI/igniteui-webcomponents/pull/1871)| Card |Consume colors from themes|
+|[1873](https://github.com/IgniteUI/igniteui-webcomponents/pull/1873)| Card |Avatar size in card header|
+|[1882](https://github.com/IgniteUI/igniteui-webcomponents/pull/1882)| Chat |Message actions not rendered after last message|
+|[1885](https://github.com/IgniteUI/igniteui-webcomponents/pull/1885)| Date Picker |Change event not emitted for non-editable input configuration|
+|[1894](https://github.com/IgniteUI/igniteui-webcomponents/pull/1894)| Date Picker | Issues when clearing the value and notch border in Material theme|
+
+## **{PackageVerChanges-25-1-SEP}**
+
 ### {PackageMaps}
 
 #### <label>PREVIEW</label> Azure Map Imagery Support

doc/en/components/grids/_shared/cell-merging.md

@@ -34,13 +34,23 @@ The grid exposes a `cellMergeMode` property that accepts values from the `GridCe
 ```tsx
 const cellMergeMode: GridCellMergeMode = 'always';
 ```
+
+```html
+<{ComponentSelector} cell-merge-mode="always">
+ ...
+</{ComponentSelector}>
+```
 ### Column Merge Toggle
 At the column level, merging can be enabled or disabled with the `merge` property.
 
 ```tsx
 <IgrColumn field="OrderID" merge={true}></IgrColumn>
 <IgrColumn field="ShipperName" merge={false}></IgrColumn>
 ```
+```html
+<igc-column field="OrderID" merge="true"></igc-column>
+<igc-column field="ShipperName" merge="false"></igc-column>
+```
 
 In the above example:
  - The **OrderID** column will merge adjacent duplicate values.
@@ -49,7 +59,7 @@ In the above example:
 ### Combined Example
 
 ```tsx
-<{ComponentSelector} data={data} cellMergeMode]={cellMergeMode} autoGenerate={false}>
+<{ComponentSelector} data={data} cellMergeMode={cellMergeMode} autoGenerate={false}>
  <IgrColumn field="OrderID" header="Order ID" merge={true}></IgrColumn>
  <IgrColumn field="ShipperName" header="Shipper Name" merge={true}></IgrColumn>
  <IgrColumn field="Salesperson" header="Salesperson"></IgrColumn>
@@ -58,14 +68,22 @@ In the above example:
 ```tsx
 const cellMergeMode: GridCellMergeMode = 'onSort';
 ```
+```html
+<{ComponentSelector} cell-merge-mode="onSort" auto-generate="false">
+ <igc-column field="OrderID" header="Order ID" merge="true"></igc-column>
+ <igc-column field="ShipperName" header="Shipper Name" merge="false"></igc-column>
+ <igc-column field="Salesperson" header="Salesperson"></igc-column>
+</{ComponentSelector}>
+```
 Here, the grid is set to merge only when columns are sorted, and both Category and Product columns are configured for merging.
 
 ## Custom Merge Conditions
 In addition to the built-in `always` and `onSort` modes, the grid allows you to define a custom condition for merging cells through the `mergeStrategy` property. This strategy controls both how cells are compared and how merged ranges are calculated.
 
 ### Merge Strategy Class
-A custom merge strategy must implement the `IgrGridMergeStrategy` class:
+A custom merge strategy must implement the `GridMergeStrategy` class:
 
+<!-- React -->
 ```ts
 export declare class IgrGridMergeStrategy {
  merge: (
@@ -80,14 +98,33 @@ export declare class IgrGridMergeStrategy {
  comparer: (prevRecord: any, record: any, field: string) => boolean; 
 }
 ```
+<!-- end: React -->
+<!-- WebComponents -->
+```ts
+export declare class IgcGridMergeStrategy {
+ merge: (
+ data: any[],
+ field: string,
+ comparer: (prevRecord: any, currentRecord: any, field: string) => boolean,
+ result: any[],
+ activeRowIndex?: number,
+ grid?: GridType
+ ) => any[];
+
+ comparer: (prevRecord: any, record: any, field: string) => boolean; 
+}
+```
+<!-- end: WebComponents -->
+
 - `merge` - defines how merged cells are produced.
 - `comparer` - defines the condition to decide if two adjacent records should be merged.
 
 <!-- ComponentStart: Grid, HierarchicalGrid -->
 ### Extending the Default Strategy
 
-If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in `IgrDefaultMergeStrategy` and override the relevant methods.
+If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in `DefaultMergeStrategy` and override the relevant methods.
 
+<!-- React -->
 ```ts
 export class MyCustomStrategy extends IgrDefaultMergeStrategy {
  /* Merge only cells within their respective projects */
@@ -100,6 +137,21 @@ export class MyCustomStrategy extends IgrDefaultMergeStrategy {
  }
 }
 ```
+<!-- end: React -->
+<!-- WebComponents -->
+```ts
+export class MyCustomStrategy extends IgcDefaultMergeStrategy {
+ /* Merge only cells within their respective projects */
+ public override comparer(prevRecord: any, record: any, field: string): boolean {
+ const a = prevRecord[field];
+ const b = record[field];
+ const projA = prevRecord['ProjectName'];
+ const projB = record['ProjectName'];
+ return a === b && projA === projB;
+ }
+}
+```
+<!-- end: WebComponents -->
 <!-- ComponentEnd: Grid, HierarchicalGrid -->
 <!-- ComponentStart: TreeGrid -->
 The `IgxTreeGrid` provides two built-in strategies that implement the `IGridMergeStrategy` interface: `DefaultTreeGridMergeStrategy` and `ByLevelTreeGridMergeStrategy`. `DefaultTreeGridMergeStrategy` merges all cells with the same value, regardless of their hierarchical level. In contrast, `ByLevelTreeGridMergeStrategy` only merges cells if they have the same value and are located at the same level, making level a required condition for merging.
@@ -108,6 +160,7 @@ The `IgxTreeGrid` provides two built-in strategies that implement the `IGridMerg
 
 If you only want to customize part of the behavior (for example, the comparer logic), you can extend one of the built-in strategies, either `DefaultTreeGridMergeStrategy` or `ByLevelTreeGridMergeStrategy`, and override the relevant methods.
 
+<!-- React -->
 ```ts
 export class MyCustomStrategy extends IgrDefaultTreeGridMergeStrategy {
  /* Merge only cells within their respective projects */
@@ -120,10 +173,26 @@ export class MyCustomStrategy extends IgrDefaultTreeGridMergeStrategy {
  }
 }
 ```
+<!-- end: React -->
+<!-- WebComponents -->
+```ts
+export class MyCustomStrategy extends IgcDefaultTreeGridMergeStrategy {
+ /* Merge only cells within their respective projects */
+ public override comparer(prevRecord: any, record: any, field: string): boolean {
+ const a = prevRecord[field];
+ const b = record[field];
+ const projA = prevRecord['ProjectName'];
+ const projB = record['ProjectName'];
+ return a === b && projA === projB;
+ }
+}
+```
+<!-- end: WebComponents -->
 <!-- ComponentEnd: TreeGrid -->
 
 ### Applying a Custom Strategy
 Once defined, assign the strategy to the grid through the `mergeStrategy` property:
+<!-- React -->
 ```tsx
 <{ComponentSelector} data={data} mergeStrategy={customStrategy}>
  <IgrColumn field="ActionID" merge={true}></IgrColumn>
@@ -133,6 +202,18 @@ Once defined, assign the strategy to the grid through the `mergeStrategy` proper
 ```ts
 const customStrategy = new MyCustomStrategy() as IgrGridMergeStrategy;
 ```
+<!-- end: React -->
+<!-- WebComponents -->
+```ts
+constructor() {
+ const grid = (this.grid = document.getElementById('grid') as IgcGridComponent);
+
+ grid.data = this.data;
+ grid.mergeStrategy = new MyCustomStrategy() as IgcGridMergeStrategy;
+ grid.cellMergeMode = 'always';
+}
+```
+<!-- end: WebComponents -->
 <!-- ComponentStart: Grid -->
 ### Demo
 `sample="/{ComponentSample}/cell-merge-custom-sample", height="700", alt="{Platform} {ComponentTitle} Cell Merging Example"`

doc/en/components/grids/_shared/column-pinning.md

@@ -299,13 +299,13 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End };
 
 `sample="/{ComponentSample}/column-pinning-right-side", height="510", alt="{Platform} {ComponentTitle} column pinning right side"`
 
-<!-- React -->
-Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo bellow for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added ot the toolbar, or simply drag a column to another pinned one.
+<!-- React, WebComponents -->
+Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo bellow for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one.
 
 ### Demo
 
 `sample="/{ComponentSample}/column-pinning-both-sides", height="510", alt="{Platform} {ComponentTitle} column pinning both sides"`
-<!-- end: React -->
+<!-- end: React, WebComponents -->
 
 
 ## Custom Column Pinning UI

doc/en/components/interactivity/chat.md

@@ -453,6 +453,8 @@ chat.addEventListener('igcMessageCreated', (e) => {
  console.log('Message:', e.detail);
 });
 ```
+
+`sample="/interactions/chat/features", height="900", alt="Web Components Chat Features"`
 <!-- end: WebComponents -->
 <!-- React -->
 ```tsx
@@ -462,7 +464,6 @@ chatRef.current.addEventListener('onMessageCreated', (e) => {
 });
 ```
 <!-- end: React -->
-`sample="/interactions/chat/features", height="900", alt="Web Components Chat Features"`
 
 ## Styling
 

docConfig.json

@@ -180,7 +180,8 @@
  { "name": "{PackageVerChanges-25-1-JUL2}", "value": "19.1.0 (July 2025)"},
  { "name": "{PackageVerChanges-25-1-AUG}", "value": "19.2.0 (August 2025)"},
  { "name": "{PackageVerChanges-25-1-SEP}", "value": "19.2.1 (September 2025)"},
- { "name": "{PackageVerLatest}", "value": "19.2.2 (October 2025)"},
+ { "name": "{PackageVerChanges-25-1-OCT}", "value": "19.2.2 (October 2025)"},
+ { "name": "{PackageVerLatest}", "value": "19.3.0 (October 2025)"},
  { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-react-examples/tree/master/samples"},
  { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-react-examples/tree/master/browser"},
  { "name": "{GithubLink}", "value": "https://github.com/IgniteUI/igniteui-react"},
@@ -340,6 +341,7 @@
  { "name": "{PackageVerChanges-25-1-JUL}", "value": "6.0.1 (July 2025)"},
  { "name": "{PackageVerChanges-25-1-JUL-2}", "value": "6.1.0 (July 2025)"},
  { "name": "{PackageVerChanges-25-1-AUG}", "value": "6.2.0 (August 2025)"},
+ { "name": "{PackageVerChanges-25-1-SEP}", "value": "6.2.1 (September 2025)"},
  { "name": "{PackageCommonVerChanges-1.0.0}", "value": "1.0.0 (November 2021)"},
  { "name": "{PackageCommonVerChanges-2.0.0}", "value": "2.0.0 (February 2022)"},
  { "name": "{PackageCommonVerChanges-2.1.0}", "value": "2.1.0 (March 2022)"},
@@ -407,7 +409,7 @@
  { "name": "{PackageDockManagerVerChanges-1.14.2}", "value": "1.14.2"},
  { "name": "{PackageDockManagerVerChanges-1.14.3}", "value": "1.14.3"},
  { "name": "{PackageDockManagerVerChanges-1.14.4}", "value": "1.14.4"},
- { "name": "{PackageVerLatest}", "value": "6.2.1 (September 2025)"},
+ { "name": "{PackageVerLatest}", "value": "6.3.0 (October 2025)"},
  { "name": "{PackageWebComponents}", "value": "igniteui-webcomponents"},
  { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-wc-examples/tree/master/samples"},
  { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-wc-examples/tree/master/browser"},