Merge branch 'master' into hhristov/fix-simple-combo-tab-focus

package.json

@@ -58,17 +58,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.0.0",
-    "@angular/common": "^19.0.0",
-    "@angular/compiler": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/elements": "^19.0.0",
-    "@angular/forms": "^19.0.0",
-    "@angular/platform-browser": "^19.0.0",
-    "@angular/platform-browser-dynamic": "^19.0.0",
-    "@angular/platform-server": "^19.0.0",
-    "@angular/router": "^19.0.0",
-    "@angular/ssr": "^19.0.0",
+    "@angular/animations": "^19.1.2",
+    "@angular/common": "^19.1.2",
+    "@angular/compiler": "^19.1.2",
+    "@angular/core": "^19.1.2",
+    "@angular/elements": "^19.1.2",
+    "@angular/forms": "^19.1.2",
+    "@angular/platform-browser": "^19.1.2",
+    "@angular/platform-browser-dynamic": "^19.1.2",
+    "@angular/platform-server": "^19.1.2",
+    "@angular/router": "^19.1.2",
+    "@angular/ssr": "^19.1.3",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@types/source-map": "0.5.2",
@@ -79,20 +79,19 @@
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",
     "tslib": "^2.3.0",
-    "uuid": "^9.0.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.0",
-    "@angular-devkit/schematics": "^19.0.0",
-    "@angular-eslint/builder": "^19.0.0",
-    "@angular-eslint/eslint-plugin": "^19.0.0",
-    "@angular-eslint/eslint-plugin-template": "^19.0.0",
-    "@angular-eslint/schematics": "^19.0.0",
-    "@angular-eslint/template-parser": "^19.0.0",
-    "@angular/cli": "^19.0.0",
-    "@angular/compiler-cli": "^19.0.0",
-    "@angular/language-service": "^19.0.0",
+    "@angular-devkit/build-angular": "^19.1.3",
+    "@angular-devkit/schematics": "^19.1.3",
+    "@angular-eslint/builder": "^19.0.2",
+    "@angular-eslint/eslint-plugin": "^19.0.2",
+    "@angular-eslint/eslint-plugin-template": "^19.0.2",
+    "@angular-eslint/schematics": "^19.0.2",
+    "@angular-eslint/template-parser": "^19.0.2",
+    "@angular/cli": "^19.1.3",
+    "@angular/compiler-cli": "^19.1.2",
+    "@angular/language-service": "^19.1.2",
     "@angularclass/hmr": "^3.0.0",
     "@microsoft/signalr": "^7.0.12",
     "@types/estree": "^1.0.0",
@@ -108,7 +107,7 @@
     "autoprefixer": "^10.4.16",
     "del": "^6.0.0",
     "eslint": "^9.15.0",
-    "fs-extra": "^11.1.1",
+    "fs-extra": "^11.3.0",
     "globby": "^13.2.2",
     "gulp": "^5.0.0",
     "gulp-cached": "^1.1.1",
@@ -122,8 +121,8 @@
     "igniteui-dockmanager": "^1.15.2",
     "igniteui-sassdoc-theme": "^1.2.3",
     "igniteui-webcomponents": "5.2.0",
-    "jasmine": "^5.4.0",
-    "jasmine-core": "~5.4.0",
+    "jasmine": "^5.5.0",
+    "jasmine-core": "~5.5.0",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "^2.0.3",
@@ -132,12 +131,12 @@
     "karma-parallel": "^0.3.1",
     "karma-spec-reporter": "^0.0.36",
     "lit-html": "^3.2.1",
-    "ng-packagr": "^19.0.0",
-    "postcss": "^8.4.31",
+    "ng-packagr": "^19.1.0",
+    "postcss": "^8.5.1",
     "postcss-scss": "^4.0.6",
     "prettier": "^3.3.3",
-    "puppeteer": "^23.8.0",
-    "sass-embedded": "^1.77.5",
+    "puppeteer": "^23.11.1",
+    "sass-embedded": "^1.83.4",
     "sass-true": "^8.1.0",
     "sassdoc": "^2.7.4",
     "sassdoc-plugin-localization": "^1.4.3",

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

@@ -24,7 +24,6 @@ import { IgxIconComponent } from '../icon/icon.component';
 import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive';
 import { IgxToggleActionDirective } from '../directives/toggle/toggle.directive';
 import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
-import { IgxButtonDirective } from '../directives/button/button.directive';
 import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
@@ -77,7 +76,6 @@ export class IgxActionStripMenuItemDirective {
         NgIf,
         NgFor,
         NgTemplateOutlet,
-        IgxButtonDirective,
         IgxIconButtonDirective,
         IgxRippleDirective,
         IgxToggleActionDirective,

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts

@@ -1,7 +1,6 @@
 import { Component, Input, TemplateRef, ViewChild, Output, EventEmitter, ElementRef, booleanAttribute } from '@angular/core';
 import { IgxIconComponent } from '../../icon/icon.component';
 import { IgxRippleDirective } from '../../directives/ripple/ripple.directive';
-import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { NgIf } from '@angular/common';
 import { IgxIconButtonDirective } from '../../directives/button/icon-button.directive';
 
@@ -11,7 +10,7 @@ import { IgxIconButtonDirective } from '../../directives/button/icon-button.dire
 @Component({
     selector: 'igx-grid-action-button',
     templateUrl: 'grid-action-button.component.html',
-    imports: [NgIf, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
+    imports: [NgIf, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
 })
 export class IgxGridActionButtonComponent {
 

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -13,7 +13,7 @@ import {
 	booleanAttribute,
     HostListener,
 } from '@angular/core';
-import { NgIf, NgTemplateOutlet, NgStyle, NgFor, DatePipe } from '@angular/common';
+import { NgIf, NgTemplateOutlet, NgFor, DatePipe } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
@@ -71,7 +71,7 @@ let NEXT_ID = 0;
     ],
     selector: 'igx-calendar',
     templateUrl: 'calendar.component.html',
-    imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, NgStyle, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar]
+    imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar]
 })
 export class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy {
     /**

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

@@ -9,7 +9,7 @@ import {
     OnDestroy,
     OnInit,
 } from "@angular/core";
-import { NgIf, NgStyle, NgTemplateOutlet, DatePipe } from "@angular/common";
+import { NgIf, NgTemplateOutlet, DatePipe } from "@angular/common";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { IgxMonthsViewComponent } from "../months-view/months-view.component";
@@ -39,7 +39,6 @@ let NEXT_ID = 0;
     templateUrl: "month-picker.component.html",
     imports: [
         NgIf,
-        NgStyle,
         NgTemplateOutlet,
         DatePipe,
         IgxIconComponent,

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts

@@ -7,7 +7,7 @@ import {
     Inject,
 } from "@angular/core";
 import { IgxCalendarMonthDirective } from "../calendar.directives";
-import { NgFor, TitleCasePipe, DatePipe } from "@angular/common";
+import { NgFor, TitleCasePipe } from "@angular/common";
 import {
     IgxCalendarViewDirective,
     DAY_INTERVAL_TOKEN,
@@ -33,7 +33,7 @@ let NEXT_ID = 0;
     ],
     selector: "igx-months-view",
     templateUrl: "months-view.component.html",
-    imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe, DatePipe]
+    imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe]
 })
 export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
     #standalone = true;

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

@@ -1437,7 +1437,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         }
         const unpinnedColumns = this.grid.unpinnedColumns.filter(c => !c.columnGroup);
         const pinnedColumns = this.grid.pinnedColumns.filter(c => !c.columnGroup);
-         
+
         let col = this;
         let vIndex = -1;
 
@@ -2326,10 +2326,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
             columns = columns.filter(c => c.level >= this.level && c !== this && c.parent !== this &&
                 c.topLevelParent === this.topLevelParent);
         }
-         
+
         // If isPreceding, find a target such that when the current column is placed after it, current colummn will receive a visibleIndex === index. This takes into account visible children of the columns.
         // If !isPreceding, finds a column of the same level and visible index that equals the passed index agument (c.visibleIndex === index). No need to consider the children here.
-         
+
         if (isPreceding) {
             columns = columns.filter(c => c.visibleIndex > this.visibleIndex);
             target = columns.find(c => c.level === this.level && c.visibleIndex + (c as any).calcChildren() - this.calcChildren() === index);
@@ -2558,7 +2558,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         const colWidth = this.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         const isAutoWidth = colWidth && typeof colWidth === 'string' && colWidth === 'fit-content';
-        if (isPercentageWidth) {
+        if (isPercentageWidth && this.grid.isColumnWidthSum) {
+            this._calcWidth = this.grid.minColumnWidth;
+        } else if (isPercentageWidth) {
             this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
         } else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width

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

@@ -719,7 +719,10 @@ export interface GridType extends IGridDataBindable {
     isLoading: boolean;
     /** @hidden @internal */
     gridSize: Size;
-
+    /** @hidden @internal */
+    isColumnWidthSum: boolean;
+    /** @hidden @internal */
+    minColumnWidth: number;
     /** Strategy, used for cloning the provided data. The type has one method, that takes any type of data */
     dataCloneStrategy: IDataCloneStrategy;
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts

@@ -1,7 +1,6 @@
 import { Component, Input, booleanAttribute } from '@angular/core';
 import { BaseFilteringComponent } from './base-filtering.component';
 import { IgxIconComponent } from '../../../icon/icon.component';
-import { IgxButtonDirective } from '../../../directives/button/button.directive';
 import { NgIf, NgClass } from '@angular/common';
 import { IgxIconButtonDirective } from '../../../directives/button/icon-button.directive';
 
@@ -11,7 +10,7 @@ import { IgxIconButtonDirective } from '../../../directives/button/icon-button.d
 @Component({
     selector: 'igx-excel-style-header',
     templateUrl: './excel-style-header.component.html',
-    imports: [NgIf, IgxButtonDirective, NgClass, IgxIconComponent, IgxIconButtonDirective]
+    imports: [NgIf, NgClass, IgxIconComponent, IgxIconButtonDirective]
 })
 export class IgxExcelStyleHeaderComponent {
     /**

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

@@ -3007,6 +3007,12 @@ export abstract class IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     public filteringPipeTrigger = 0;
+
+    /**
+     * @hidden @internal
+     */
+    public isColumnWidthSum = false;
+
     /**
      * @hidden @internal
      */
@@ -3208,7 +3214,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     private _columnSelectionMode: GridSelectionMode = GridSelectionMode.none;
 
     private lastAddedRowIndex;
-    protected isColumnWidthSum = false;
+
     private _currencyPositionLeft: boolean;
 
     private rowEditPositioningStrategy = new RowEditPositionStrategy({
@@ -3241,7 +3247,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    protected get minColumnWidth() {
+    public get minColumnWidth() {
         return MINIMUM_COLUMN_WIDTH;
     }
 
@@ -4930,7 +4936,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * @param value
      * @param condition
      * @param ignoreCase
-     * @deprecated in version 19.0.0. 
+     * @deprecated in version 19.0.0.
      */
     public filterGlobal(value: any, condition, ignoreCase?) {
         this.filteringService.filterGlobal(value, condition, ignoreCase);
@@ -6496,8 +6502,10 @@ export abstract class IgxGridBaseDirective implements GridType,
 
 
         if (this.width === null || !width) {
-            width = this.getColumnWidthSum();
             this.isColumnWidthSum = true;
+            width = this.getColumnWidthSum();
+        } else {
+            this.isColumnWidthSum = false;
         }
 
         if (this.hasVerticalScroll() && this.width !== null) {

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

@@ -1900,6 +1900,21 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(parseInt(grid.hostWidth, 10)).toBe(30 * 136);
         });
 
+        it('should render grid and columns with correct width when all are in % and inside a hidden container.', () => {
+            // in this case since the grid width is 0, the grid will use the sum of the columns
+            // those should resolve to 136px, as per the docs
+            const fix = TestBed.createComponent(IgxGridColumnHiddenPercentageWidthComponent);
+            const grid = fix.componentInstance.grid;
+            grid.width = '100%';
+            // 4 cols - 10% width
+            fix.componentInstance.initColumnsRows(5, 4);
+            fix.detectChanges();
+
+            expect(grid.calcWidth).toBe(136*4);
+            expect(grid.columns[0].calcWidth).toBe(136);
+            expect(grid.columns[1].calcWidth).toBe(136);
+        });
+
         it('should retain column with in % after hiding/showing grid with 100% width', () => {
             const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
             fix.componentInstance.initColumnsRows(5, 3);
@@ -3123,6 +3138,17 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi
     }
 }
 
+@Component({
+    template: `<igx-grid #grid [hidden]="hidden" [data]="data" [autoGenerate]="false">
+        <igx-column *ngFor="let col of columns" [width]="'10%'" [field]="col.key" [header]="col.key" [dataType]="col.dataType">
+        </igx-column>
+    </igx-grid>`,
+    imports: [IgxGridComponent, IgxColumnComponent, NgFor]
+})
+export class IgxGridColumnHiddenPercentageWidthComponent extends IgxGridDefaultRenderingComponent {
+    public hidden = true;
+}
+
 @Component({
     template: `<div>
         <igx-grid #grid [data]="data" height='300px' [style.--ig-size]="1" [autoGenerate]="true"

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -478,7 +478,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
      * @hidden @internal
      */
-    protected override get minColumnWidth() {
+    public override get minColumnWidth() {
         if (this.superCompactMode) {
             return MINIMUM_COLUMN_WIDTH_SUPER_COMPACT;
         } else {

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts

@@ -9,7 +9,6 @@ import { IPivotDimension, PivotRowHeaderGroupType } from './pivot-grid.interface
 import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component';
 import { IgxHeaderGroupStylePipe } from '../headers/pipes';
 import { IgxPivotResizeHandleDirective } from '../resizing/pivot-grid/pivot-resize-handle.directive';
-import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-cell.component';
 import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive';
 import { IgxColumnMovingDragDirective } from '../moving/moving.drag.directive';
 import { NgIf, NgClass, NgStyle } from '@angular/common';
@@ -23,7 +22,7 @@ import { IMultiRowLayoutNode } from '../common/types';
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-pivot-row-dimension-header-group',
     templateUrl: './pivot-row-dimension-header-group.component.html',
-    imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxGridFilteringCellComponent, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe]
+    imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe]
 })
 export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent implements PivotRowHeaderGroupType {
 

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts

@@ -15,9 +15,7 @@ import {
 import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface';
 import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
 import { IPivotDimension, IPivotDimensionData, IPivotGridRecord } from './pivot-grid.interface';
-import { IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe } from '../headers/pipes';
-import { IgxIconComponent } from '../../icon/icon.component';
-import { NgClass, NgFor, NgStyle } from '@angular/common';
+import { NgFor } from '@angular/common';
 import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component';
 import { IgxPivotGridHorizontalRowCellMerging } from './pivot-grid.pipes';
 
@@ -33,8 +31,7 @@ import { IgxPivotGridHorizontalRowCellMerging } from './pivot-grid.pipes';
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-pivot-row-dimension-mrl-row',
     templateUrl: './pivot-row-dimension-mrl-row.component.html',
-    imports: [NgClass, NgStyle, NgFor, IgxIconComponent, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe,
-        IgxPivotRowDimensionContentComponent, IgxPivotGridHorizontalRowCellMerging]
+    imports: [NgFor, IgxPivotRowDimensionContentComponent, IgxPivotGridHorizontalRowCellMerging]
 })
 export class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowComponent {