1276: Update sdsTableRowNavigation directive

libs/packages/sam-material-extensions/src/lib/public-api.ts

@@ -1,7 +1,7 @@
 export * from './accordion/accordion.module';
 export * from './accordion/accordion.component';
 export * from './table/table.module';
-export * from './table/table-row-import/table-row-navigation.directive';
+export * from './table/table-row-click/table-row-click.directive';
 export * from './table/models/table-column-settings.model';
 export * from './table/models/table-settings.model';
 export * from './table/models/table-column-settings.model';

libs/packages/sam-material-extensions/src/lib/table/table-row-import/table-row-navigation.directive.spec.ts → libs/packages/sam-material-extensions/src/lib/table/table-row-click/table-row-click.directive.spec.ts

@@ -1,22 +1,22 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, ElementRef, Renderer2 } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { TableRowNavigationDirective } from './table-row-navigation.directive';
+import { TableRowClickDirective } from './table-row-click.directive';
 import { RouterTestingModule } from '@angular/router/testing';
 
 @Component({
-  template: ` <tr mat-row sdsTableRowNavigation [highlightOnHover]="true"></tr> `,
+  template: ` <tr mat-row sdsTableRowClick [highlightOnHover]="true"></tr> `,
 })
 class TestHoverFocusComponent {}
 
-describe('TableRowNavigationDirective', () => {
+describe('TableRowClickDirective', () => {
   let component: TestHoverFocusComponent;
   let fixture: ComponentFixture<TestHoverFocusComponent>;
   let trEl: DebugElement;
 
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      declarations: [TestHoverFocusComponent, TableRowNavigationDirective],
+      declarations: [TestHoverFocusComponent, TableRowClickDirective],
       imports: [RouterTestingModule],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).createComponent(TestHoverFocusComponent);

libs/packages/sam-material-extensions/src/lib/table/table-row-click/table-row-click.directive.ts

@@ -0,0 +1,54 @@
+import { Directive, ElementRef, EventEmitter, HostListener, Input, Output, Renderer2 } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Directive({
+  selector: 'tr[mat-row][sdsTableRowClick]',
+})
+export class TableRowClickDirective {
+  private readonly hoverClass = 'sds-table__row--hovered';
+
+  @Input()
+  emitOnRowClick = false;
+
+  @Input()
+  highlightOnHover = false;
+
+  @Output('rowClicked')
+  rowClicked = new EventEmitter<null>();
+
+  constructor(private el: ElementRef, private renderer: Renderer2, private router: Router) {}
+
+  ngAfterViewInit(): void {
+    if (this.highlightOnHover) {
+      console.warn('Row Input highlightOnHover is depricated. Please update input to emitOnRowClick.');
+    }
+  }
+
+  @HostListener('mouseenter') onMouseEnter() {
+    if (this.highlightOnHover || this.emitOnRowClick) {
+      this.addHoverClass();
+    }
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    if (this.highlightOnHover || this.emitOnRowClick) {
+      this.removeHoverClass();
+    }
+  }
+  @HostListener('click')
+  handleRowClicked() {
+    if (!this.emitOnRowClick && !this.highlightOnHover) {
+      console.warn(
+        `Row click event is being emitted without highlighting enable. This feature is depricated and will be removed in the future. To continue receiving rowClicked events please set emitOnRowClick=true on sds-row.`
+      );
+      this.rowClicked.emit();
+    }
+  }
+
+  addHoverClass() {
+    this.renderer.addClass(this.el.nativeElement, this.hoverClass);
+  }
+  removeHoverClass() {
+    this.renderer.removeClass(this.el.nativeElement, this.hoverClass);
+  }
+}

libs/packages/sam-material-extensions/src/lib/table/table.component.html

@@ -100,11 +100,11 @@
       *matRowDef="let row; columns: rowConfig.displayedColumns; let i = dataIndex"
       class="sds-table__row"
       [ngClass]="{ 'cursor-pointer': rowConfig.expandOnClick, 'sds-table__row--expanded': expandedElement == row }"
-      (click)="
-        rowConfig.expandOnClick ? (expandedElement = expandedElement === row ? null : row) : false; rowClicked.emit(i)
-      "
-      sdsTableRowNavigation
+      (click)="rowConfig.expandOnClick ? (expandedElement = expandedElement === row ? null : row) : false"
+      sdsTableRowClick
+      [emitOnRowClick]="rowConfig.emitOnRowClick"
       [highlightOnHover]="rowConfig.highlightOnHover"
+      (rowClicked)="rowClicked.emit(i)"
     ></tr>
 
     <ng-container *ngIf="expansion">

libs/packages/sam-material-extensions/src/lib/table/table.component.ts

@@ -25,6 +25,8 @@ import { BehaviorSubject } from 'rxjs';
 export interface SdsRowConfig {
   displayedColumns?: string[];
   expandOnClick?: boolean;
+  emitOnRowClick?: boolean;
+  // Remove below options
   highlightOnHover?: boolean;
   rowClickNavigate?: string;
 }
@@ -44,8 +46,11 @@ export interface SdsFooterRowConfig extends SdsRowConfig {
 export class SdsTableRowComponent {
   @Input() displayedColumns: Array<string>;
   @Input() expandOnClick = false;
-  @Input() highlightOnHover = false;
+  @Input() emitOnRowClick = false;
+
+  // Remove below inputs
   @Input() rowClickNavigate: string;
+  @Input() highlightOnHover = false;
 }
 
 @Component({
@@ -247,7 +252,6 @@ export class SdsTableComponent implements OnInit, AfterContentInit, AfterViewIni
     this.rowConfig.displayedColumns = this.sdsTableRowComponent.displayedColumns;
     this.rowConfig.expandOnClick = this.sdsTableRowComponent.expandOnClick;
     this.rowConfig.highlightOnHover = this.sdsTableRowComponent.highlightOnHover;
-    this.rowConfig.rowClickNavigate = this.sdsTableRowComponent.rowClickNavigate;
 
     if (this.sdsTableHeaderRowComponent) {
       this.headerRowConfig.displayedColumns = this.sdsTableHeaderRowComponent.displayedColumns;

libs/packages/sam-material-extensions/src/lib/table/table.module.ts

@@ -11,7 +11,7 @@ import {
   SdsTableHeaderCellDirective,
   SdsTableFooterCellDirective,
 } from './table.component';
-import { TableRowNavigationDirective } from './table-row-import/table-row-navigation.directive';
+import { TableRowClickDirective } from './table-row-click/table-row-click.directive';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 
@@ -31,7 +31,7 @@ import { RouterModule } from '@angular/router';
     SdsTableCellDirective,
     SdsTableHeaderCellDirective,
     SdsTableFooterCellDirective,
-    TableRowNavigationDirective,
+    TableRowClickDirective,
   ],
   imports: [
     RouterModule,
@@ -52,7 +52,7 @@ import { RouterModule } from '@angular/router';
     SdsTableCellDirective,
     SdsTableHeaderCellDirective,
     SdsTableFooterCellDirective,
-    TableRowNavigationDirective,
+    TableRowClickDirective,
   ],
 })
 export class SdsTableModule {}