fix(pivotGrid): Change how horizontal cell width is initally calculated for auto size.

Try to also mitigate row headers auto width not calculated correctly on clean load.

Author: skrustev

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

@@ -1599,14 +1599,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     public autoSizeRowDimension(dimension: IPivotDimension) {
         if (this.getDimensionType(dimension) === PivotDimensionType.Row) {
             const relatedDims: string[] = PivotUtil.flatten([dimension]).map((x: IPivotDimension) => x.memberName);
-            let contentCollection = [];
-            if (this.hasHorizontalLayout) {
-                const allMrlContents = this.rowDimensionMrlRowsCollection.map(mrlRow => mrlRow.contentCells.toArray()).flat();
-                contentCollection = allMrlContents.filter(cell => cell.rootDimension === dimension);
-            } else {
-                contentCollection = this.rowDimensionContentCollection.toArray();
-            }
-
+            const contentCollection =  this.getContentCollection(dimension);
             const content = contentCollection.filter(x => relatedDims.indexOf(x.dimension.memberName) !== -1);
             const headers = content.map(x => x.headerGroups.toArray()).flat().map(x => x.header && x.header.refInstance);
             if (this.pivotUI.showRowHeaders) {
@@ -1950,10 +1943,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     protected getPivotRowHeaderContentWidth(headerGroup: IgxPivotRowHeaderGroupComponent) {
-        const headerStyle = this.document.defaultView.getComputedStyle(headerGroup.header.refInstance.nativeElement);
-        const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
-            parseFloat(headerStyle.borderRightWidth);
-        return this.getHeaderCellWidth(headerGroup.header.refInstance.nativeElement).width + headerPadding;
+        const headerSizes = this.getHeaderCellWidth(headerGroup.header.refInstance.nativeElement);
+        return headerSizes.width + headerSizes.padding;
     }
 
     protected getLargesContentWidth(contents: ElementRef[]): string {
@@ -2160,29 +2151,45 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         if (this.hasDimensionsToAutosize) {
             this.cdr.detectChanges();
             this.zone.onStable.pipe(first()).subscribe(() => {
-                this.autoSizeDimensionsInView();
+                requestAnimationFrame(() => {
+                    this.autoSizeDimensionsInView();
+                });
             });
         }
     }
 
+    protected getContentCollection(dimenstion: IPivotDimension) {
+        let contentCollection;
+        if (this.hasHorizontalLayout) {
+            const allMrlContents = this.rowDimensionMrlRowsCollection.map(mrlRow => mrlRow.contentCells.toArray()).flat();
+            contentCollection = allMrlContents.filter(cell => cell.rootDimension === dimenstion);
+        } else {
+            contentCollection = this.rowDimensionContentCollection.toArray();
+        }
+        return contentCollection;
+    }
+
     protected autoSizeDimensionsInView() {
         if (!this.hasDimensionsToAutosize) return;
         for (const dim of this.visibleRowDimensions) {
-            if (dim.width === 'auto' && !this.hasHorizontalLayout) {
+            if (dim.width === 'auto') {
                 const contentWidths = [];
                 const relatedDims = PivotUtil.flatten([dim]).map(x => x.memberName);
-                const content = this.rowDimensionContentCollection.filter(x => relatedDims.indexOf(x.dimension.memberName) !== -1);
+                const contentCollection = this.getContentCollection(dim);
+                const content = contentCollection.filter(x => relatedDims.indexOf(x.dimension.memberName) !== -1);
                 const headers = content.map(x => x.headerGroups.toArray()).flat().map(x => x.header && x.header.refInstance);
                 headers.forEach((header) => contentWidths.push(header?.nativeElement?.offsetWidth || 0));
+                if (this.pivotUI.showRowHeaders) {
+                    const dimensionHeader = this.theadRow.rowDimensionHeaders.find(x => x.column.field === dim.memberName);
+                    contentWidths.push(parseFloat(this.getLargesContentWidth([dimensionHeader])));
+                }
                 const max = Math.max(...contentWidths);
                 if (max === 0) {
                     // cells not in DOM yet...
                     continue;
                 }
                 const maxSize = Math.ceil(Math.max(...contentWidths));
                 dim.autoWidth = maxSize;
-            } else if (dim.width === 'auto') {
-                this.autoSizeRowDimension(dim);
             }
         }
     }

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

@@ -173,7 +173,7 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
 
     protected getHeaderWidthFromDimension() {
         if (this.grid.hasHorizontalLayout) {
-            return this.width;
+            return this.width === -1 ? 'fit-content' : this.width;
         }
         return this.grid.rowDimensionWidth(this.rootDimension);
     }

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

@@ -101,7 +101,7 @@ export class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowCompone
         } else if (this.grid.visibleRowDimensions && this.grid.dimensionDataColumns) {
             const res = [];
             this.grid.visibleRowDimensions.forEach(dim => {
-                res.push(this.grid.rowDimensionWidthToPixels(dim) + "px");
+                res.push(this.grid.rowDimensionWidth(dim));
             });
             return  res.join(' ');
         }
@@ -110,7 +110,12 @@ export class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowCompone
     public rowDimensionWidthCombined(dims: IPivotDimension[]) {
         let resWidth = 0;
         for (const dim of (dims || [])) {
-            resWidth += this.grid.rowDimensionWidthToPixels(dim);
+            const rowDimWidth = this.grid.rowDimensionWidth(dim);
+            if (rowDimWidth === 'fit-content') {
+                return -1;
+            } else {
+                resWidth += parseFloat(rowDimWidth);
+            }
         }
         return resWidth;
     }