Merge branch '20.0.x' into bpachilova/column-headers-a11y-15962

ddaribo · ddaribo · commit a5c8d73352a3 · 2025-06-27T17:05:49.000+03:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
@@ -299,20 +299,16 @@
             bottom: 0;
         }
 
-        igx-icon {
+        igx-icon,
+        igc-icon {
             justify-content: center;
-            --component-size: 1;
-
-            @if $variant == 'fluent' {
-                --component-size: 3;
-            }
 
             @if $variant == 'indigo' {
                 $icon-size: sizable(rem(14px), rem(16px), rem(16px));
 
-                width: var(--ig-icon-size, $icon-size);
-                height: var(--ig-icon-size, $icon-size);
-                font-size: var(--ig-icon-size, $icon-size);
+                --size: #{$icon-size};
+            } @else {
+                --component-size: 1;
             }
         }
     }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -6166,7 +6166,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     public trackColumnChanges(_index, col) {
-        return col.field + col._calcWidth;
+        return col.field + col._calcWidth.toString();
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-validation.service.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-validation.service.ts
@@ -36,6 +36,7 @@ export class IgxGridValidationService {
                 owner: this.grid
             };
             this.grid.formGroupCreated.emit(args);
+            formGroup.patchValue(data);
             this.add(rowId, formGroup);
         } else {
             // reset to pristine.
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts
@@ -47,6 +47,7 @@ import { IgxIconComponent } from "../../icon/icon.component";
 import { IgxInputGroupComponent } from "../../input-group/input-group.component";
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
 import { Size } from '../common/enums';
+import { GridColumnDataType } from '../../data-operations/data-util';
 
 interface IDataSelectorPanel {
     name: string;
@@ -541,8 +542,13 @@ export class IgxPivotDataSelectorComponent {
      * @internal
      */
     public onAggregationChange(event: ISelectionEventArgs) {
+
         if (!this.isSelected(event.newSelection.value)) {
             this.value.aggregate = event.newSelection.value;
+            const isSingleValue = this.grid.values.length === 1;
+
+            PivotUtil.updateColumnTypeByAggregator(this.grid.columns, this.value, isSingleValue);
+
             this.grid.pipeTrigger++;
             this.grid.cdr.markForCheck();
         }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -32,12 +32,12 @@ import {
 } from '@angular/core';
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 
-import { first, take, takeUntil} from 'rxjs/operators';
+import { first, take, takeUntil } from 'rxjs/operators';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxGridSelectionService } from '../selection/selection.service';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
-import { ColumnType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxColumnTemplateContext, RowType } from '../common/grid.interface';
+import { ColumnType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxColumnTemplateContext, PivotGridType, RowType } from '../common/grid.interface';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType, IPivotUISettings, PivotRowLayoutType, PivotSummaryPosition } from './pivot-grid.interface';
@@ -72,7 +72,7 @@ import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resi
 import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from '../../services/public_api';
 import { cloneArray, PlatformUtil, resizeObservable } from '../../core/utils';
 import { IgxPivotFilteringService } from './pivot-filtering.service';
-import { DataUtil } from '../../data-operations/data-util';
+import { DataUtil, GridColumnDataType } from '../../data-operations/data-util';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IgxGridTransaction } from '../common/types';
 import { GridBaseAPIService } from '../api.service';
@@ -199,7 +199,7 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104;
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit,
-    GridType, AfterViewInit, OnChanges {
+    PivotGridType, AfterViewInit, OnChanges {
 
     /**
      * Emitted when the dimension collection is changed via the grid chip area.
@@ -1672,7 +1672,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     public autoSizeRowDimension(dimension: IPivotDimension) {
         if (this.getDimensionType(dimension) === PivotDimensionType.Row) {
             const relatedDims: string[] = PivotUtil.flatten([dimension]).map((x: IPivotDimension) => x.memberName);
-            const contentCollection =  this.getContentCollection(dimension);
+            const contentCollection = this.getContentCollection(dimension);
             const content = contentCollection.filter(x => relatedDims.indexOf(x.dimension.memberName) !== -1);
             const headers = content.map(x => x.headerGroups.toArray()).flat().map(x => x.header && x.header.refInstance);
             if (this.pivotUI.showRowHeaders) {
@@ -1946,8 +1946,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      */
     public getRowDimensionByName(memberName: string) {
         const visibleRows = this.pivotUI.rowLayout === PivotRowLayoutType.Vertical ?
-         this.pivotConfiguration.rows :
-         PivotUtil.flatten(this.pivotConfiguration.rows);
+            this.pivotConfiguration.rows :
+            PivotUtil.flatten(this.pivotConfiguration.rows);
         const dimIndex = visibleRows.findIndex((target) => target.memberName === memberName);
         const dim = visibleRows[dimIndex];
         return dim;
@@ -2281,7 +2281,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         const separator = this.pivotKeys.columnDimensionSeparator;
         const dataArr = fields.map(x => x.split(separator)).sort(x => x.length);
         const hierarchy = new Map<string, any>();
-        const columnDimensions =  PivotUtil.flatten(this.columnDimensions);
+        const columnDimensions = PivotUtil.flatten(this.columnDimensions);
         dataArr.forEach(arr => {
             let currentHierarchy = hierarchy;
             const path = [];
@@ -2301,17 +2301,22 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         });
         return hierarchy;
     }
-
     protected generateColumnHierarchy(fields: Map<string, any>, data, parent = null): IgxColumnComponent[] {
         let columns = [];
         if (fields.size === 0) {
             this.values.forEach((value) => {
                 const ref = createComponent(IgxColumnComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
+                let columnDataType = value.dataType || this.resolveDataTypes(data.length ? data[0][value.member] : null);
+
+                if (value.aggregate?.key?.toLowerCase() === 'count' && (columnDataType === GridColumnDataType.Currency || columnDataType == GridColumnDataType.Percent)) {
+                    columnDataType = GridColumnDataType.Number;
+                }
+
                 ref.instance.header = value.displayName;
                 ref.instance.field = value.member;
                 ref.instance.parent = parent;
                 ref.instance.sortable = true;
-                ref.instance.dataType = value.dataType || this.resolveDataTypes(data.length ? data[0][value.member] : null);
+                ref.instance.dataType = columnDataType;
                 ref.instance.formatter = value.formatter;
                 columns.push(ref.instance);
             });
@@ -2325,9 +2330,20 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             }
             if (shouldGenerate && (value.children == null || value.children.length === 0 || value.children.size === 0)) {
                 const col = this.createColumnForDimension(value, data, parent, this.hasMultipleValues);
+
+                if (!this.hasMultipleValues && this.values.length > 0) {
+                    PivotUtil.updateColumnTypeByAggregator([col], this.values[0], true);
+                }
+
                 columns.push(col);
                 if (this.hasMultipleValues) {
                     const measureChildren = this.getMeasureChildren(data, col, false, value.dimension.width);
+
+                    measureChildren.forEach((child, index) => {
+                        const pivotValue = this.values[index];
+                        PivotUtil.updateColumnTypeByAggregator([child], pivotValue, this.values.length === 1);
+                    });
+
                     col.children.reset(measureChildren);
                     columns = columns.concat(measureChildren);
                 }
@@ -2397,20 +2413,20 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                         };
                         values.push(value);
                         break;
-                }
-            case "date":
-            {
-                const dimension: IPivotDimension = new IgxPivotDateDimension(
+                    }
+                case "date":
                     {
-                        memberName: field,
-                        enabled: isFirstDate,
-                        dataType: dataType
+                        const dimension: IPivotDimension = new IgxPivotDateDimension(
+                            {
+                                memberName: field,
+                                enabled: isFirstDate,
+                                dataType: dataType
+                            }
+                        )
+                        rowDimensions.push(dimension);
+                        isFirstDate = false;
+                        break;
                     }
-                )
-                rowDimensions.push(dimension);
-                isFirstDate = false;
-                break;
-            }
                 default: {
                     const dimension: IPivotDimension = {
                         memberName: field,
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts
@@ -156,7 +156,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
         @Inject(IGX_GRID_BASE) public override grid: PivotGridType,
         ref: ElementRef<HTMLElement>,
         cdr: ChangeDetectorRef,
-        protected renderer: Renderer2,
+        protected renderer: Renderer2
     ) {
         super(ref, cdr);
     }
@@ -426,8 +426,13 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     * @internal
     */
     public onAggregationChange(event: ISelectionEventArgs) {
+
         if (!this.isSelected(event.newSelection.value)) {
             this.value.aggregate = event.newSelection.value;
+            const isSingleValue = this.grid.values.length === 1;
+
+            PivotUtil.updateColumnTypeByAggregator(this.grid.columns, this.value, isSingleValue);
+
             this.grid.pipeTrigger++;
         }
     }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts
@@ -3,7 +3,7 @@ import { DataUtil, GridColumnDataType } from '../../data-operations/data-util';
 import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { ISortingExpression } from '../../data-operations/sorting-strategy';
-import { PivotGridType } from '../common/grid.interface';
+import { ColumnType, PivotGridType } from '../common/grid.interface';
 import { IGridSortingStrategy, IgxSorting } from '../common/strategy';
 import { IgxPivotAggregate, IgxPivotDateAggregate, IgxPivotNumericAggregate, IgxPivotTimeAggregate } from './pivot-grid-aggregate';
 import { IPivotAggregator, IPivotConfiguration, IPivotDimension, IPivotGridRecord, IPivotKeys, IPivotValue, PivotDimensionType, PivotSummaryPosition } from './pivot-grid.interface';
@@ -88,13 +88,13 @@ export class PivotUtil {
     }
 
     public static flattenGroupsHorizontally(data: IPivotGridRecord[],
-                                            dimension: IPivotDimension,
-                                            expansionStates,
-                                            defaultExpand: boolean,
-                                            visibleDimensions: IPivotDimension[],
-                                            summariesPosition: PivotSummaryPosition,
-                                            parent?: IPivotDimension,
-                                            parentRec?: IPivotGridRecord) {
+        dimension: IPivotDimension,
+        expansionStates,
+        defaultExpand: boolean,
+        visibleDimensions: IPivotDimension[],
+        summariesPosition: PivotSummaryPosition,
+        parent?: IPivotDimension,
+        parentRec?: IPivotGridRecord) {
         for (let i = 0; i < data.length; i++) {
             const rec = data[i];
             const field = dimension.memberName;
@@ -316,7 +316,7 @@ export class PivotUtil {
                 const aggregationKey = groupName ? groupName + pivotKeys.columnDimensionSeparator + key : key;
                 rec.aggregationValues.set(aggregationKey, aggregationData[key]);
             });
-        } else  if (aggregationKeys.length === 1) {
+        } else if (aggregationKeys.length === 1) {
             const aggregationKey = aggregationKeys[0];
             rec.aggregationValues.set(groupName || aggregationKey, aggregationData[aggregationKey]);
         }
@@ -508,5 +508,24 @@ export class PivotUtil {
         }
     }
 
+    public static updateColumnTypeByAggregator(columns: any[], value: IPivotValue, isSingleValue: boolean): void {
+        const targetColumnType = PivotUtil.getColumnDataTypeForValue(value);
+        columns.forEach(column => {
+            if ((column.field?.includes(value.member) || isSingleValue) && targetColumnType !== undefined) {
+                column.dataType = targetColumnType;
+            }
+        })
+    }
+
+    private static getColumnDataTypeForValue(value: IPivotValue): GridColumnDataType {
+        const isCountAggregator = value.aggregate.aggregator?.name?.toLowerCase() === 'count' || value.aggregate.aggregatorName?.toLowerCase() === 'count';
 
+        if ((value.dataType === GridColumnDataType.Currency || value.dataType === GridColumnDataType.Percent) && isCountAggregator) {
+            return GridColumnDataType.Number;
+        } else if (value.dataType === GridColumnDataType.Currency && !isCountAggregator) {
+            return GridColumnDataType.Currency;
+        } else if (value.dataType === GridColumnDataType.Percent && !isCountAggregator) {
+            return GridColumnDataType.Percent;
+        }
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, booleanAttribute } from '@angular/core';
+import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, booleanAttribute, signal } from '@angular/core';
 
 /**
  * Represents individual resizable/collapsible panes.
@@ -22,6 +22,7 @@ import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, boolea
 export class IgxSplitterPaneComponent {
     private _minSize: string;
     private _maxSize: string;
+    private _order = signal<number | null>(null);
 
     /**
      * @hidden @internal
@@ -102,7 +103,12 @@ export class IgxSplitterPaneComponent {
 
     /** @hidden @internal */
     @HostBinding('style.order')
-    public order!: number;
+    public get order() {
+        return this._order();
+    }
+    public set order(val) {
+        this._order.set(val)
+    }
 
     /**
      * @hidden @internal
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
@@ -33,7 +33,7 @@ describe('IgxSplitter', () => {
         const secondPane = splitter.panes.toArray()[1].element;
         expect(firstPane.textContent.trim()).toBe('Pane 1');
         expect(secondPane.textContent.trim()).toBe('Pane 2');
-
+        fixture.detectChanges();
         const splitterBar = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).nativeElement;
         expect(firstPane.style.order).toBe('0');
         expect(splitterBar.style.order).toBe('1');
@@ -322,6 +322,13 @@ describe('IgxSplitter', () => {
 
         expect(splitterBarComponent.style.transform).not.toBe('translate3d(0px, 0px, 0px)');
     });
+
+    it('should render correctly panes created dynamically using @for', () => {
+        fixture = TestBed.createComponent(SplitterForOfPanesComponent);
+        fixture.detectChanges();
+        splitter = fixture.componentInstance.splitter;
+        expect(splitter.panes.length).toBe(3);
+    });
 });
 
 describe('IgxSplitter pane toggle', () => {
@@ -336,6 +343,7 @@ describe('IgxSplitter pane toggle', () => {
         fixture = TestBed.createComponent(SplitterTogglePaneComponent);
         fixture.detectChanges();
         splitter = fixture.componentInstance.splitter;
+        fixture.detectChanges();
     }));
 
     it('should collapse/expand panes', () => {
@@ -601,3 +609,19 @@ export class SplitterTogglePaneComponent extends SplitterTestComponent {
 })
 export class SplitterCollapsedPaneComponent extends SplitterTestComponent {
 }
+
+@Component({
+    template: `
+<igx-splitter>
+    @for (number of numbers; track number) {
+    <igx-splitter-pane>
+      <p>{{ number }}</p>
+    </igx-splitter-pane>
+    }
+  </igx-splitter>
+    `,
+    imports: [IgxSplitterComponent, IgxSplitterPaneComponent]
+})
+export class SplitterForOfPanesComponent extends SplitterTestComponent {
+    public numbers = [1, 2, 3];
+}
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts

Original file line number	Diff line number	Diff line change
`@@ -299,20 +299,16 @@`
`299`	`299`	`bottom: 0;`
`300`	`300`	`}`
`301`	`301`
`302`		`- igx-icon {`
	`302`	`+ igx-icon,`
	`303`	`+ igc-icon {`
`303`	`304`	`justify-content: center;`
`304`		`- --component-size: 1;`
`305`		`-`
`306`		`- @if $variant == 'fluent' {`
`307`		`- --component-size: 3;`
`308`		`- }`
`309`	`305`
`310`	`306`	`@if $variant == 'indigo' {`
`311`	`307`	`$icon-size: sizable(rem(14px), rem(16px), rem(16px));`
`312`	`308`
`313`		`- width: var(--ig-icon-size, $icon-size);`
`314`		`- height: var(--ig-icon-size, $icon-size);`
`315`		`- font-size: var(--ig-icon-size, $icon-size);`
	`309`	`+ --size: #{$icon-size};`
	`310`	`+ } @else {`
	`311`	`+ --component-size: 1;`
`316`	`312`	`}`
`317`	`313`	`}`
`318`	`314`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6166,7 +6166,7 @@ export abstract class IgxGridBaseDirective implements GridType,`
`6166`	`6166`	`* @hidden @internal`
`6167`	`6167`	`*/`
`6168`	`6168`	`public trackColumnChanges(_index, col) {`
`6169`		`- return col.field + col._calcWidth;`
	`6169`	`+ return col.field + col._calcWidth.toString();`
`6170`	`6170`	`}`
`6171`	`6171`
`6172`	`6172`	`/**`