From db5e86ebcfee89387566c5f5a7e373d13620f499 Mon Sep 17 00:00:00 2001
From: Giorgi Cheishvili <giorgi.cheishvili@outlook.com>
Date: Thu, 7 Sep 2023 22:53:34 +0400
Subject: [PATCH] feat(platform): table tree nodes are operable using left and
 right arrow keys (#10482)

---
 .../table-row/table-row.component.html        |  1 -
 .../table-row/table-row.component.ts          | 19 ++++++++++++++++++-
 .../src/lib/table/table.component.html        |  5 +++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/libs/platform/src/lib/table/components/table-row/table-row.component.html b/libs/platform/src/lib/table/components/table-row/table-row.component.html
index 1de9042dc29..34ce29f087b 100644
--- a/libs/platform/src/lib/table/components/table-row/table-row.component.html
+++ b/libs/platform/src/lib/table/components/table-row/table-row.component.html
@@ -119,7 +119,6 @@
     [focusable]="true"
     [attr.role]="column.role"
     [headers]="rowId + '__' + column.name"
-    [ngClass]="'fdp-table__col--' + column.name"
     [ngClass]="[
         'fdp-table__col--' + column.name,
         column._freezed ? 'fd-table__cell--fixed' : '',
diff --git a/libs/platform/src/lib/table/components/table-row/table-row.component.ts b/libs/platform/src/lib/table/components/table-row/table-row.component.ts
index 657880c9c5e..f6959e9c780 100644
--- a/libs/platform/src/lib/table/components/table-row/table-row.component.ts
+++ b/libs/platform/src/lib/table/components/table-row/table-row.component.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
@@ -8,6 +8,7 @@ import {
     ElementRef,
     EventEmitter,
     HostBinding,
+    HostListener,
     Input,
     NgZone,
     OnChanges,
@@ -107,6 +108,10 @@ export class TableRowComponent<T> extends TableRowDirective implements OnInit, A
     @Input()
     freezeEndColumnsTo: string;
 
+    /** Whether the row is tree row. */
+    @Input()
+    isTreeRow: boolean;
+
     /**
      * Event emitted when keyboard drag performed.
      */
@@ -206,6 +211,18 @@ export class TableRowComponent<T> extends TableRowDirective implements OnInit, A
         });
     }
 
+    /** @hidden */
+    @HostListener('keydown.arrowLeft', ['$event'])
+    @HostListener('keydown.arrowRight', ['$event'])
+    private _onArrowKeydown($event: KeyboardEvent): void {
+        if ($event.target === this._elmRef.nativeElement && this.isTreeRow) {
+            const shouldBeOpen = KeyUtil.isKeyCode($event, this._rtl ? LEFT_ARROW : RIGHT_ARROW);
+            if (shouldBeOpen !== this.row.expanded) {
+                this._toggleGroupRow();
+            }
+        }
+    }
+
     /** @hidden */
     ngOnInit(): void {
         super.ngOnInit();
diff --git a/libs/platform/src/lib/table/table.component.html b/libs/platform/src/lib/table/table.component.html
index 81622ab3ac9..1a6f9529263 100644
--- a/libs/platform/src/lib/table/table.component.html
+++ b/libs/platform/src/lib/table/table.component.html
@@ -96,8 +96,8 @@
                             [fdkDndItem]="row"
                             [applyDragItemClass]="isDraggable"
                             [class]="row | rowClasses : rowsClass"
-                            [tabindex]="rowsActivable || !!row.navigatable ? 0 : -1"
-                            [focusable]="rowsActivable || !!row.navigatable"
+                            [tabindex]="row.isTree || rowsActivable || !!row.navigatable ? 0 : -1"
+                            [focusable]="row.isTree || rowsActivable || !!row.navigatable"
                             [hoverable]="rowsActivable || _isShownSelectionColumn || !!row.navigatable"
                             [activable]="rowsActivable || !!row.navigatable"
                             [active]="rowIndex === _navigatedRowIndex"
@@ -109,6 +109,7 @@
                             [main]="true"
                             [class.fd-table__row--draggable]="isDraggable"
                             fdp-table-row
+                            [isTreeRow]="row.isTree"
                             [rowId]="id"
                             [index]="rowIndex"
                             [row]="row"