Merge branch '17.2.x' into ganastasov/fix-14539-17.2.x

Author: georgianastasov

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

@@ -26,7 +26,7 @@ import { ISortingExpression, SortingDirection } from '../../data-operations/sort
 import { GRID_SCROLL_CLASS } from '../../test-utils/grid-functions.spec';
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { IgxPaginatorComponent, IgxPaginatorContentDirective } from '../../paginator/paginator.component';
-import { IGridRowEventArgs, IgxGridFooterComponent, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../public_api';
+import { IGridRowEventArgs, IgxColumnGroupComponent, IgxGridFooterComponent, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../public_api';
 import { getComponentSize } from '../../core/utils';
 
 
@@ -1896,6 +1896,20 @@ describe('IgxGrid Component Tests #grid', () => {
 
             expect(calcWidth).not.toBe(80);
         });
+
+        it('should correctly autosize column headers inside column groups.', async () => {
+            const fix = TestBed.createComponent(IgxGridColumnHeaderInGroupAutoSizeComponent);
+            const grid = fix.componentInstance.grid;
+            grid.data = [{field1: "Test"}];
+
+            //waiting for reqeustAnimationFrame to finish
+            fix.detectChanges();
+            await wait(17);
+            fix.detectChanges();
+
+            const calcWidth = parseInt(grid.getColumnByName("field1").calcWidth);
+            expect(calcWidth).toBe(126);
+        });
     });
 
     describe('IgxGrid - API methods', () => {
@@ -2962,6 +2976,36 @@ export class IgxGridColumnHeaderAutoSizeComponent {
 
 }
 
+@Component({
+    template: `
+    <igx-grid #grid>
+    <igx-column-group>
+      <igx-column
+        field="field1"
+        header="Field 1 Header"
+        width="auto"
+      ></igx-column>
+      <igx-column
+        field="field2"
+        header="Field 2 Header"
+        width="auto"
+      ></igx-column>
+      <igx-column
+        field="field3"
+        header="Field 3 Header"
+        width="auto"
+      ></igx-column>
+      </igx-column-group>
+    </igx-grid>`,
+    standalone: true,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
+
+})
+export class IgxGridColumnHeaderInGroupAutoSizeComponent {
+    @ViewChild('grid', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+}
+
 @Component({
     template: `<igx-grid #grid [data]="data" [width]="'500px'" (columnInit)="initColumns($event)">
         <igx-column *ngFor="let col of columns" [field]="col.key" [header]="col.key" [dataType]="col.dataType">

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts

@@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxGridComponent } from './grid.component';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
-import { ViewChild, Component } from '@angular/core';
+import { ViewChild, Component, DebugElement } from '@angular/core';
 import { IgxColumnLayoutComponent } from '../columns/column-layout.component';
 import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy';
@@ -30,6 +30,7 @@ interface ColGroupsType {
 describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
     let fixture: ComponentFixture<FixtureType>;
     let grid: IgxGridComponent;
+    const COLUMN_HEADER_CLASS = '.igx-grid-th';
     configureTestSuite((() => {
         return TestBed.configureTestingModule({
             imports: [
@@ -896,6 +897,30 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
             expect((grid.verticalScrollContainer.getScroll().children[0] as HTMLElement).offsetHeight -
                 grid.verticalScrollContainer.getScroll().offsetHeight).toBeLessThanOrEqual(0);
         }));
+
+        it('should create only one ghost element when dragging a column', async () => {
+            const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
+            
+            const header = headers[1].nativeElement;
+            UIInteractions.simulatePointerEvent('pointerdown', header, 50, 50);
+            await wait();
+            fixture.detectChanges();
+
+            UIInteractions.simulatePointerEvent('pointermove', header, 56, 56);
+            await wait(50);
+            fixture.detectChanges();
+
+            UIInteractions.simulatePointerEvent('pointermove', header, 230, 30);
+            await wait();
+            fixture.detectChanges();
+
+            const ghost = fixture.debugElement.queryAll(By.css('.igx-grid__drag-ghost-image'));
+            expect(ghost.length).toEqual(1);
+
+            UIInteractions.simulatePointerEvent('pointerup', header, 230, 30);
+            await wait();
+            fixture.detectChanges();
+        });
     });
 
     describe('Resizing', () => {
@@ -1335,6 +1360,19 @@ export class ColumnLayoutGroupingTestComponent extends ColumnLayoutPinningTestCo
         { field: 'Country', rowStart: 2, colStart: 2, groupable: true },
         { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3 }
     ];
+
+    public override colGroups: ColGroupsType[] = [
+        {
+            group: 'group1',
+            pinned: true,
+            columns: this.cols2
+        },
+        {
+            group: 'group2',
+            pinned: false,
+            columns: this.cols1
+        }
+    ];
 }
 @Component({
     template: `

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -11,11 +11,7 @@
             <igx-grid-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
                 [ngClass]="child.headerGroupClasses"
                 [ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
-                [column]="child"
-                [igxColumnMovingDrag]="child"
-                [ghostHost]="grid.outlet.nativeElement"
-                [attr.droppable]="true"
-                [igxColumnMovingDrop]="child">
+                [column]="child">
             </igx-grid-header-group>
         </ng-container>
     </div>
@@ -70,8 +66,8 @@
                 [ngClass]="child.headerGroupClasses"
                 [ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
                 [column]="child"
-                [style.min-width]="child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts"
-                [style.flex-basis]="child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts">
+                [style.min-width]="child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts"
+                [style.flex-basis]="child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts">
             </igx-grid-header-group>
         </ng-container>
     </div>