fix(pivot): fixed row height to scale with headers (#14873)

Author: tishko0

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

@@ -3093,8 +3093,11 @@
                 max-height: 100%;
             }
         }
-    }
 
+        %igx-grid__tr-pivot--row-area {
+            padding-bottom: rem(4px);
+        }
+    }
 
     %grid-thead--pivot {
         display: flex;

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

@@ -3620,7 +3620,7 @@ export abstract class IgxGridBaseDirective implements GridType,
             this.zone.run(() => {
                 // do not trigger reflow if element is detached.
                 if (this.nativeElement.isConnected) {
-                    if (this._gridSize !== this.gridSize) {
+                    if (this.shouldResize) {
                         // resizing occurs due to the change of --ig-size css var
                         this._gridSize = this.gridSize;
                         this.updateDefaultRowHeight();
@@ -5312,6 +5312,10 @@ export abstract class IgxGridBaseDirective implements GridType,
         return this.width && this.width.indexOf('%') !== -1;
     }
 
+    protected get shouldResize(): boolean {
+        return this._gridSize !== this.gridSize;
+    }
+
     /**
      * @hidden @internal
      */

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

@@ -49,7 +49,7 @@
             </ng-template>
         </ng-template>
         <ng-template #record_template let-rowIndex="index" let-rowData>
-            <igx-pivot-row [style.height.px]="renderedRowHeight" [gridID]="id" [index]="rowIndex" [data]="rowData"
+            <igx-pivot-row [gridID]="id" [index]="rowIndex" [data]="rowData"
                 [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-pivot-row>

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

@@ -25,11 +25,13 @@ import {
     createComponent,
     EnvironmentInjector,
     CUSTOM_ELEMENTS_SCHEMA,
-    booleanAttribute
+    booleanAttribute,
+    OnChanges,
+    SimpleChanges
 } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet, NgIf, NgClass, NgStyle, NgFor } from '@angular/common';
 
-import { first} 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';
@@ -67,7 +69,7 @@ import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTempl
 import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service';
 import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service';
 import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from '../../services/public_api';
-import { cloneArray, PlatformUtil } from '../../core/utils';
+import { cloneArray, PlatformUtil, resizeObservable } from '../../core/utils';
 import { IgxPivotFilteringService } from './pivot-filtering.service';
 import { DataUtil } from '../../data-operations/data-util';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
@@ -197,7 +199,7 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104;
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit,
-    GridType, AfterViewInit {
+    GridType, AfterViewInit, OnChanges {
 
     /**
      * Emitted when the dimension collection is changed via the grid chip area.
@@ -695,6 +697,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     };
     private _sortableColumns = true;
     private _visibleRowDimensions: IPivotDimension[] = [];
+    private _shouldUpdateSizes = false;
 
     /**
     * Gets/Sets the default expand state for all rows.
@@ -1086,6 +1089,16 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         });
     }
 
+    /**
+     * @hidden @internal
+     */
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes.superCompactMode && !changes.superCompactMode.isFirstChange()) {
+            this._shouldUpdateSizes = true;
+            resizeObservable(this.verticalScrollContainer.displayContainer).pipe(take(1), takeUntil(this.destroy$)).subscribe(() => this.resizeNotify.next());
+        }
+    }
+
     /**
      * Notifies for dimension change.
      */
@@ -1119,6 +1132,18 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return rows.concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined);
     }
 
+    protected override get shouldResize(): boolean {
+        if (!this.dataRowList.first?.cells || this.dataRowList.first.cells.length === 0) {
+            return false;
+        }
+        const isSizePropChanged = super.shouldResize;
+        if (isSizePropChanged || this._shouldUpdateSizes) {
+            this._shouldUpdateSizes = false;
+            return true;
+        }
+        return false;
+    }
+
     /** @hidden @internal */
     public createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean) {
         options.outlet = this.outlet;

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

@@ -759,6 +759,42 @@ describe('IgxPivotGrid #pivotGrid', () => {
             expect(pivotGrid.columns.length).toBe(3);
         });
 
+        it('should calculate row headers according to grid size', async() => {
+            const pivotGrid = fixture.componentInstance.pivotGrid;
+            const rowHeightSmall = 32;
+            const rowHeightMedium = 40;
+            const rowHeightLarge = 50;
+
+            pivotGrid.superCompactMode = false;
+            setElementSize(pivotGrid.nativeElement, Size.Large);
+
+            await wait(100);
+            fixture.detectChanges();
+
+            expect(pivotGrid.gridSize).toBe(Size.Large);
+            const dimensionContents = fixture.debugElement.queryAll(By.css('.igx-grid__tbody-pivot-dimension'));
+            let rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
+            let rowHeader = rowHeaders[0].queryAll(By.directive(IgxPivotRowDimensionHeaderComponent));
+            expect(rowHeader[0].nativeElement.offsetHeight).toBe(rowHeightLarge);
+
+            setElementSize(pivotGrid.nativeElement, Size.Small);
+            await wait(100);
+            fixture.detectChanges();
+
+            expect(pivotGrid.gridSize).toBe(Size.Small);
+            rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
+            rowHeader = rowHeaders[0].queryAll(By.directive(IgxPivotRowDimensionHeaderComponent));
+            expect(rowHeader[0].nativeElement.offsetHeight).toBe(rowHeightSmall);
+
+            setElementSize(pivotGrid.nativeElement, Size.Medium);
+            await wait(100);
+            fixture.detectChanges();
+
+            expect(pivotGrid.gridSize).toBe(Size.Medium);
+            rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
+            rowHeader = rowHeaders[0].queryAll(By.directive(IgxPivotRowDimensionHeaderComponent));
+            expect(rowHeader[0].nativeElement.offsetHeight).toBe(rowHeightMedium);
+        });
 
         describe('IgxPivotGrid Features #pivotGrid', () => {
             it('should show excel style filtering via dimension chip.', async () => {