Merge branch '18.2.x' into mkirkova-fix-15113-18.2.x

Author: kacheshmarova

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

@@ -2527,7 +2527,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 = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth);
         } else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width

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

@@ -718,7 +718,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/grid-base.directive.ts

@@ -3001,6 +3001,12 @@ export abstract class IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     public filteringPipeTrigger = 0;
+
+    /**
+     * @hidden @internal
+     */
+    public isColumnWidthSum = false;
+
     /**
      * @hidden @internal
      */
@@ -3201,7 +3207,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     private _columnSelectionMode: GridSelectionMode = GridSelectionMode.none;
 
     private lastAddedRowIndex;
-    protected isColumnWidthSum = false;
+
     private _currencyPositionLeft: boolean;
 
     private rowEditPositioningStrategy = new RowEditPositionStrategy({
@@ -3234,7 +3240,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    protected get minColumnWidth() {
+    public get minColumnWidth() {
         return MINIMUM_COLUMN_WIDTH;
     }
 
@@ -6488,8 +6494,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/column-resizing.spec.ts

@@ -16,6 +16,7 @@ import { IgxAvatarComponent } from '../../avatar/avatar.component';
 import { IColumnResizeEventArgs, IgxColumnComponent } from '../public_api';
 import { Size } from "../common/enums";
 import { setElementSize } from '../../test-utils/helper-utils.spec';
+import { IgxColumnResizerDirective } from '../resizing/resizer.directive';
 
 describe('IgxGrid - Deferred Column Resizing #grid', () => {
 
@@ -133,6 +134,27 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(grid.columnList.get(1).width).toEqual('70px');
         }));
 
+        it('should calculate correctly resizer position and column width when grid is scaled and zoomed', fakeAsync(() => {
+            grid.nativeElement.style.transform = 'scale(1.2)';
+            grid.nativeElement.style.setProperty('zoom', '1.05');
+            fixture.detectChanges();
+            headerResArea = GridFunctions.getHeaderResizeArea(headers[1]).nativeElement;
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, 153, 0);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture);
+            const resizerDirective = resizer.componentInstance.resizer as IgxColumnResizerDirective;
+            const leftSetterSpy = spyOnProperty(resizerDirective, 'left', 'set').and.callThrough();
+            UIInteractions.simulateMouseEvent('mousemove', resizer.nativeElement, 200, 5);
+            UIInteractions.simulateMouseEvent('mouseup', resizer.nativeElement, 200, 5);
+            fixture.detectChanges();
+
+            expect(leftSetterSpy).toHaveBeenCalled();
+            expect(parseInt(leftSetterSpy.calls.mostRecent().args[0].toFixed(0))).toEqual(200);
+            expect(parseInt(grid.columnList.get(1).headerCell.nativeElement.getBoundingClientRect().width.toFixed(0))).toEqual(173);
+        }));
+
         it('should be able to resize column to the minWidth < defaultMinWidth', fakeAsync(() => {
             const column = grid.getColumnByName('ID');
             column.minWidth = 'a';

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

@@ -1870,6 +1870,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);
@@ -3100,6 +3115,18 @@ 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>`,
+    standalone: true,
+    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

@@ -479,7 +479,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/resizing/resizer.component.html

@@ -4,5 +4,5 @@
     [restrictHResizeMax]="colResizingService.restrictResizeMax"
     [restrictHResizeMin]="colResizingService.restrictResizeMin"
     [restrictResizerTop]="restrictResizerTop"
-    (resizeEnd)="colResizingService.resizeColumn($event)">
+    (resizeEnd)="colResizingService.resizeColumn($event, resizer.ratio)">
 </div>

projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts

@@ -41,8 +41,13 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
     @Output() public resize = new Subject<any>();
 
     private _left: number;
+    private _ratio: number = 1;
     private _destroy = new Subject<boolean>();
 
+    public get ratio(): number {
+        return this._ratio;
+    }
+
     constructor(
         public element: ElementRef<HTMLElement>,
         @Inject(DOCUMENT) public document,
@@ -56,7 +61,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
                 .pipe(
                     takeUntil(this._destroy),
                     takeUntil<MouseEvent>(this.resizeEnd),
-                    map((event) => event.clientX - offset),
+                    map((event) => (event.clientX - offset) / (this._ratio)),
                 ))
         )
             .subscribe((pos) => {
@@ -113,8 +118,12 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
     public onMousedown(event: MouseEvent) {
         event.preventDefault();
         const parent = this.element.nativeElement.parentElement.parentElement;
-
-        this.left = this._left = event.clientX - parent.getBoundingClientRect().left;
+        const parentRectWidth = parent.getBoundingClientRect().width;
+        const parentComputedWidth = parseFloat(window.getComputedStyle(parent).width);
+        if (Math.abs(parentRectWidth - parentComputedWidth) > 1) {
+            this._ratio = parentRectWidth / parentComputedWidth;
+        }
+        this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio;
         this.top = (event.target as HTMLElement).getBoundingClientRect().top - parent.getBoundingClientRect().top;
 
         this.resizeStart.next(event);

projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts

@@ -35,7 +35,7 @@ export class IgxColumnResizingService {
      * @hidden
      */
     public getColumnHeaderRenderedWidth() {
-        return this.column.headerCell.nativeElement.getBoundingClientRect().width;
+        return parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width);
     }
 
     /**
@@ -101,9 +101,9 @@ export class IgxColumnResizingService {
     /**
      * Resizes the column regaridng to the column minWidth and maxWidth.
      */
-    public resizeColumn(event: MouseEvent) {
+    public resizeColumn(event: MouseEvent, ratio: number = 1) {
         this.showResizer = false;
-        const diff = event.clientX - this.startResizePos;
+        const diff = (event.clientX - this.startResizePos) / ratio;
 
         const colWidth = this.column.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;