Merge pull request #14347 from IgniteUI/skrastev/pivot-horizontal-rows

feat(igxPivotGrid): Implement horizontal row layout for Pivot Grid.

Author: dkamburov

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 18.1.0
+### New Features
+- `IgxPivotGrid`
+    - Added horizontal layout for row dimensions. Can be configured through the `pivotUI` `rowLayout` property.
+    - Added `horizontalSummary` property for each IPivotDimension, enabling summary row when using horizontal layout.
+    - Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers.
+    - Added keyboard interactions for row dimension collapse using `Alt + Arrows` and row headers sorting using `Ctrl + Arrow Up/Down`.
+
 ## 18.0.0
 ### New Features
 - `IgxCombo`, `IgxSimpleCombo`:

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

@@ -589,6 +589,10 @@
             @extend %igx-grid__tr-pivot--columnMultiRowSpan !optional
         }
 
+        @include e(tbody-pivot-mrl-dimension) {
+            @extend %igx-grid__tbody-pivot-mrl-dimension !optional
+        }
+
         @include e(tr-pivot-toggle-icons) {
             @extend %igx-grid__tr-pivot-toggle-icons !optional;
         }

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

@@ -3265,6 +3265,7 @@
                         map.get($grid-header-padding-inline, 'cosy'),
                         map.get($grid-header-padding-inline, 'comfortable')
                     );
+                    align-self: center;
                 }
             }
 
@@ -3276,5 +3277,11 @@
         }
     }
 
+    %igx-grid__tbody-pivot-mrl-dimension {
+        .igx-grid-th {
+            border-bottom: none;
+        }
+    }
+
     // Pivot grid END
 }

projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts

@@ -32,7 +32,7 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
         rows: IPivotDimension[],
         values: IPivotValue[],
         cloneStrategy: IDataCloneStrategy,
-        pivotKeys: IPivotKeys = DEFAULT_PIVOT_KEYS,
+        pivotKeys: IPivotKeys = DEFAULT_PIVOT_KEYS
     ): IPivotGridRecord[] {
         let hierarchies;
         let data: IPivotGridRecord[];

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

@@ -1235,12 +1235,17 @@ export interface PivotGridType extends GridType {
     rowDimensions: IPivotDimension[];
     rowDimensionResizing: boolean;
     /** @hidden @internal */
+    visibleRowDimensions: IPivotDimension[];
+    /** @hidden @internal */
+    hasHorizontalLayout: boolean;
+    /** @hidden @internal */
     values: IPivotValue[];
     /** @hidden @internal */
     filterDimensions: IPivotDimension[];
     /** @hidden @internal */
     dimensionDataColumns: ColumnType[];
     pivotRowWidths: number;
+    getRowDimensionByName(name: string): IPivotDimension;
     /** Represents a method declaration for setting up the columns for the pivot grid based on the pivot configuration */
     setupColumns(): void;
     /** Represents a method declaration that allows toggle of expansion state of a row (taken as a parameter) in the pivot grid */

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

@@ -7828,7 +7828,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         this._lastSearchInfo.matchCount = this._lastSearchInfo.matchInfoCache.length;
     }
 
-    private updateDefaultRowHeight() {
+    protected updateDefaultRowHeight() {
         if (this.dataRowList.length > 0 && this.dataRowList.first.cells && this.dataRowList.first.cells.length > 0) {
             const height = parseFloat(this.document.defaultView.getComputedStyle(this.dataRowList.first.cells.first.nativeElement)?.getPropertyValue('height'));
             if (height) {

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

@@ -18,7 +18,7 @@
 </igx-pivot-header-row>
 
 <div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
-    <ng-container *ngTemplateOutlet="rowDimensions.length ? defaultRowDimensionsTemplate : emptyRowDimensionsTemplate; context: this"></ng-container>
+    <ng-container *ngTemplateOutlet="rowDimensions.length ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : defaultRowDimensionsTemplate) : emptyRowDimensionsTemplate; context: this"></ng-container>
     <div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
         (dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
         (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
@@ -148,6 +148,24 @@
         </ng-template>
     </div>
 </ng-template>
+
+<ng-template #horizontalRowDimensionsTemplate>
+    <div tabindex="0" class="igx-grid__tbody-pivot-mrl-dimension" #rowDimensionContainer [style.height.px]="totalHeight" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+        <ng-container *ngIf="dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger as groupedData">
+            <ng-template #verticalRowDimScrollContainer role="rowgroup" igxGridFor let-rowGroup let-rowIndex="index"
+                    [igxGridForOf]="groupedData"
+                    [igxForScrollOrientation]="'vertical'"
+                    [igxForScrollContainer]="verticalScroll"
+                    [igxForContainerSize]="calcHeight"
+                    [igxForItemSize]="renderedRowHeight"
+                    [igxForSizePropName]="'height'"
+            >
+                <igx-pivot-row-dimension-mrl-row [rowIndex]="rowIndex" [rowGroup]="rowGroup" [groupedData]="groupedData" [style.height.px]="renderedRowHeight * rowGroup.length"></igx-pivot-row-dimension-mrl-row>
+            </ng-template>
+        </ng-container>
+    </div>
+</ng-template>
+
 <ng-template #emptyRowDimensionsTemplate>
     <div tabindex="0" *ngIf="columnDimensions.length > 0 || values.length > 0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
         <igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"