Merge branch 'master' into mdragnev/filtering-optimizations

Author: rkaraivanov

ROADMAP.md

@@ -2,17 +2,21 @@
 
 # Current Milestone
 
-## Milestone 38, version 20.1 (Due by Sep, 2025)
-1. Grid cell merging feature [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514)
-2. “Clear Selection” button in Combo component is keyboard accessible [#15841](https://github.com/IgniteUI/igniteui-angular/issues/15841)
-3. Selecting a slide by index in the Carousel component [#16046](https://github.com/IgniteUI/igniteui-angular/issues/16046)
+## Milestone 40, version 20.1 (Due by Nov, 2025)
+1. Support for Angular 21
+2. AI Chat UI component [#16094](https://github.com/IgniteUI/igniteui-angular/issues/16094)
 
 ## Going down the road
 
-1. AI Chat UI component [#16094](https://github.com/IgniteUI/igniteui-angular/issues/16094)
+1. Grids performance
 
 # Previous Milestone
 
+## Milestone 39, version 20.1 (Released Sep  25th, 2025)
+1. **[DONE]** Grid cell merging feature [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514)
+2. **[DONE]** “Clear Selection” button in Combo component is keyboard accessible [#15841](https://github.com/IgniteUI/igniteui-angular/issues/15841)
+3. **[DONE]** Selecting a slide by index in the Carousel component [#16046](https://github.com/IgniteUI/igniteui-angular/issues/16046)
+
 ## Milestone 38, version 20.0 (Released Jun 09th, 2025)
 1. **[DONE]** Support of Angular 20.0
 

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -274,7 +274,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
       { name: "pinnedStartColumns" },
@@ -571,7 +570,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
       { name: "pinnedStartColumns" },
@@ -755,7 +753,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedStartColumns" },
       { name: "pinnedEndColumns" },
@@ -882,7 +879,6 @@ export var registerConfig = [
       { name: "cdr" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedStartColumns" },
       { name: "pinnedEndColumns" },
@@ -1034,7 +1030,6 @@ export var registerConfig = [
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
-      { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
       { name: "pinnedStartColumns" },

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -719,6 +719,9 @@
     %grid-display-container-tr {
         width: 100%;
         overflow: visible;
+        flex: 1;
+        // needed to override the min-width of the column headers
+        min-width: 0;
     }
 
     %grid-mrl-block {
@@ -927,7 +930,7 @@
         }
 
         padding-block: 0;
-        flex: 1 0 auto;
+        flex: 0 0 auto;
         background: inherit;
         z-index: 4;
         cursor: move;

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1668,13 +1668,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return this.pinningPosition === ColumnPinningPosition.End && pinnedCols[0] === this;
     }
 
-    /** @hidden @internal **/
-    public get rightPinnedOffset(): string {
-        return this.pinned && this.pinningPosition === ColumnPinningPosition.End ?
-            - this.grid.pinnedEndWidth - this.grid.pinnedStartWidth + 'px' :
-            null;
-    }
-
     /** @hidden @internal **/
     public get gridRowSpan(): number {
         return this.rowEnd && this.rowStart ? this.rowEnd - this.rowStart : 1;

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -939,8 +939,6 @@ export interface GridType extends IGridDataBindable {
     /** The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling */
     rowHeight: number;
     multiRowLayoutRowSize: number;
-    /** Minimal width for headers */
-    defaultHeaderGroupMinWidth: any;
     maxLevelHeaderDepth: number;
     defaultRowHeight: number;
     /** The default font size, calculated for each element */

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts

@@ -76,6 +76,21 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
     public expressionsList: ExpressionUI[];
     public moreFiltersCount = 0;
 
+    @HostBinding('class.igx-grid-th--pinned')
+    public get pinnedCss() {
+        return this.column.pinned;
+    }
+
+    @HostBinding('class.igx-grid-th--pinned-last')
+    public get pinnedLastCss() {
+        return !this.column.grid.hasColumnLayouts ? this.column.isLastPinned : false;
+    }
+
+    @HostBinding('class.igx-grid-th--pinned-first')
+    public get pinnedFirstCSS() {
+        return !this.column.grid.hasColumnLayouts ? this.column.isFirstPinned : false;;
+    }
+
     private baseClass = 'igx-grid__filtering-cell-indicator';
 
     constructor(

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -327,10 +327,10 @@ export class IgxFilteringService implements OnDestroy {
     public registerSVGIcons(): void {
         const editorIcons = editor as any[];
         editorIcons.forEach(icon => {
-            this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons', true);
         });
-        this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons');
-        this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons');
+        this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons', true);
+        this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons', true);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -4561,24 +4561,6 @@ export abstract class IgxGridBaseDirective implements GridType,
         }
     }
 
-    /**
-     * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width.
-     *
-     * @remarks
-     * Used internally for restricting header group component width.
-     * The values below depend on the header cell default right/left padding values.
-     */
-    public get defaultHeaderGroupMinWidth(): number {
-        switch (this.gridSize) {
-            case Size.Medium:
-                return 32;
-            case Size.Small:
-                return 24;
-            default:
-                return 48;
-        }
-    }
-
     /** @hidden @internal */
     public get pinnedStartWidth() {
         if (!isNaN(this._pinnedStartWidth)) {
@@ -4618,17 +4600,13 @@ export abstract class IgxGridBaseDirective implements GridType,
     public getHeaderCellWidth(element: HTMLElement): ISizeInfo {
         const range = this.document.createRange();
         const headerWidth = this.platform.getNodeSizeViaRange(range,
-            element,
-            element.parentElement);
+            element, element);
 
         const headerStyle = this.document.defaultView.getComputedStyle(element);
         const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
             parseFloat(headerStyle.borderRightWidth);
 
-        // Take into consideration the header group element, since column pinning applies borders to it if its not a columnGroup.
-        const headerGroupStyle = this.document.defaultView.getComputedStyle(element.parentElement);
-        const borderSize = parseFloat(headerGroupStyle.borderRightWidth) + parseFloat(headerGroupStyle.borderLeftWidth);
-        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize) };
+        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding) };
     }
 
     /**
@@ -4744,7 +4722,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     public getHeaderGroupWidth(column: IgxColumnComponent): string {
         return this.hasColumnLayouts
             ? ''
-            : `${Math.max(parseFloat(column.calcWidth), this.defaultHeaderGroupMinWidth)}px`;
+            : `${parseFloat(column.calcWidth)}px`;
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts

@@ -861,9 +861,9 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(50);
             expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(49);
 
-            expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48);
+            expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(49);
             expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50);
-            expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48);
+            expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(49);
         });
 
         it('should size headers correctly when column width is in %.', () => {

projects/igniteui-angular/src/lib/grids/grid/column.spec.ts

@@ -259,7 +259,7 @@ describe('IgxGrid - Column properties #grid', () => {
             expect(item.width).toEqual('200px');
         });
         const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS));
-        expect(headers[0].nativeElement.style['min-width']).toEqual('200px');
+        expect(headers[0].nativeElement.clientWidth).toEqual(200);
     });
 
     it('headers and cells classes should be correct after scroll horizontal', async () => {