feat(pivotGrid): row dimension header sort with kb interaction

Author: IMinchev64

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

@@ -4,6 +4,7 @@ import { IgxPivotGridComponent } from './pivot-grid.component';
 import { HEADER_KEYS } from '../../core/utils';
 import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component';
 import { IMultiRowLayoutNode } from '../public_api';
+import { SortingDirection } from '../../data-operations/sorting-strategy';
 
 @Injectable()
 export class IgxPivotGridNavigationService extends IgxGridNavigationService {
@@ -127,6 +128,22 @@ export class IgxPivotGridNavigationService extends IgxGridNavigationService {
                 layout: null
             }
 
+            if (ctrl) {
+                const dimIndex = this.activeNode.column;
+                const dim = this.grid.rowDimensions[dimIndex];
+                if (dimIndex === 0 && this.activeNode.row === -1) {
+                    if (key.includes('down') || key.includes('up')) {
+                        let newSortDirection = SortingDirection.None;
+                        if (key.includes('down')) {
+                            newSortDirection = (dim.sortDirection === SortingDirection.Desc) ? SortingDirection.None : SortingDirection.Desc;
+                        } else if (key.includes('up')) {
+                            newSortDirection = (dim.sortDirection === SortingDirection.Asc) ? SortingDirection.None : SortingDirection.Asc;
+                        }
+                        this.grid.sortDimension(dim, newSortDirection);
+                        return;
+                    }
+                }
+            }
             if ((key.includes('left') || key === 'home') && this.activeNode.column > 0) {
                 newActiveNode.column = ctrl || key === 'home' ? 0 : this.activeNode.column - 1;
             }

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

@@ -20,6 +20,7 @@
         (pointerdown)="pointerdown($event)"
         [igxColumnMovingDrop]="column"
         [column]="column"
+        (keydown)="grid.navigation.headerNavigation($event)"
     >
     </igx-pivot-row-dimension-header>
     <span *ngIf="!column.columnGroup && column.resizable" class="igx-grid-th__resize-handle"