chore(*): Allow overflow for headers that need to span multiple rows.

Author: MKirova

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

@@ -163,12 +163,13 @@
             </ng-container>
         </ng-container>
     <div [style.max-height.px]='maxContainerHeight'>
-        <div class="igx-grid-thead__group" *ngFor='let dimLevelColumns of columnDimensionsByLevel' [style.width.px]='grid.unpinnedWidth'>
+        <div style='overflow:visible;' [style.height.px]='grid.rowHeight' class="igx-grid-thead__group" *ngFor='let dimLevelColumns of columnDimensionsByLevel' [style.width.px]='grid.unpinnedWidth'>
             <ng-template igxGridFor #headerVirtualContainer let-column
                 [igxGridForOf]="dimLevelColumns" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]="grid.parentVirtDir"
                 [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges"
                 [igxForSizePropName]="'calcPixelWidth'" [igxForScrollOrientation]="'horizontal'">
                 <igx-grid-header-group [ngClass]="column.headerGroupClasses"
+                [style.height.px]='calcHeight(column)'
                 [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                 [style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                 [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"

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

@@ -19,7 +19,7 @@ import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive'
 import { ISelectionEventArgs } from '../../drop-down/drop-down.common';
 import { IgxDropDownComponent } from '../../drop-down/drop-down.component';
 import { AbsoluteScrollStrategy, AutoPositionStrategy, OverlaySettings, PositionSettings, VerticalAlignment } from '../../services/public_api';
-import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface';
+import { ColumnType, IGX_GRID_BASE, PivotGridType } from '../common/grid.interface';
 import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';
 import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
 import { DropPosition } from '../moving/moving.service';
@@ -94,6 +94,10 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
         return this.totalDepth * this.grid.renderedRowHeight;
     }
 
+    public calcHeight(col: ColumnType) {
+        return !col.columnGroup && col.level < this.totalDepth ? (this.totalDepth - col.level) * this.grid.rowHeight : this.grid.rowHeight;
+    }
+
 
     public populateColumnDimensionsByLevel() {
         const res = [];