fix(table): Add hover directive

Author: youda97

src/table/hover-toggle.directive.ts

@@ -0,0 +1,20 @@
+import {
+	Directive,
+	HostListener
+} from "@angular/core";
+
+@Directive({
+	selector: "[ibmHoverToggle]"
+})
+export class HoverToggle {
+	@HostListener("mouseenter", ["$event"])
+	addHoverClass(event) {
+		console.log(event.target);
+		event.target.previousElementSibling.classList.add("bx--expandable-row--hover-v2");
+	}
+
+	@HostListener("mouseleave", ["$event"])
+	removeHoverClass(event) {
+		event.target.previousElementSibling.classList.remove("bx--expandable-row--hover-v2");
+	}
+}

src/table/table.component.spec.ts

@@ -7,7 +7,8 @@ import {
 	TableModel,
 	TableHeaderItem,
 	TableItem,
-	DataGridFocus
+	DataGridFocus,
+	HoverToggle
 } from "./table.module";
 import { Table } from "./table.component";
 import { StaticIconModule } from "./../icon/static-icon.module";
@@ -49,7 +50,8 @@ describe("Table", () => {
 			declarations: [
 				Table,
 				TableTest,
-				DataGridFocus
+				DataGridFocus,
+				HoverToggle
 			]
 		});
 

src/table/table.component.ts

@@ -370,13 +370,12 @@ import { I18n } from "./../i18n/i18n.module";
 				<tr
 				*ngIf="model.rowsExpanded[i] && !model.isRowFiltered(i)"
 				class="bx--expandable-row-v2"
+				ibmHoverToggle
 				[attr.data-child-row]="(model.rowsExpanded[i] ? 'true' : null)">
 					<td
 						[ibmDataGridFocus]="isDataGrid"
 						[(columnIndex)]="columnIndex"
 						[attr.colspan]="row.length + 2"
-						(mouseenter)="addHoverClass($event)"
-						(mouseleave)="removeHoverClass($event)"
 						(click)="setExpandIndex($event)">
 						<ng-container *ngIf="!firstExpandedTemplateInRow(row)">{{firstExpandedDataInRow(row)}}</ng-container>
 						<ng-template
@@ -915,14 +914,6 @@ export class Table implements AfterViewInit {
 		this.model.isEnd = false;
 	}
 
-	addHoverClass(event) {
-		event.target.closest("tr").previousElementSibling.classList.add("bx--expandable-row--hover-v2");
-	}
-
-	removeHoverClass(event) {
-		event.target.closest("tr").previousElementSibling.classList.remove("bx--expandable-row--hover-v2");
-	}
-
 	handleTabIndex() {
 		setTimeout(() => {
 			const focusElementList = getFocusElementList(this.elementRef.nativeElement, tabbableSelectorIgnoreTabIndex);

src/table/table.module.ts

@@ -11,6 +11,7 @@ import { TableToolbarActions } from "./toolbar/table-toolbar-actions.component";
 import { TableToolbarSearch } from "./toolbar/table-toolbar-search.component";
 import { TableToolbarContent } from "./toolbar/table-toolbar-content.component";
 import { DataGridFocus } from "./data-grid-focus.directive";
+import { HoverToggle } from "./hover-toggle.directive";
 
 import { IconModule } from "./../icon/icon.module";
 import { StaticIconModule } from "..";
@@ -26,6 +27,7 @@ export { TableToolbarActions } from "./toolbar/table-toolbar-actions.component";
 export { TableToolbarSearch } from "./toolbar/table-toolbar-search.component";
 export { TableToolbarContent } from "./toolbar/table-toolbar-content.component";
 export { DataGridFocus } from "./data-grid-focus.directive";
+export { HoverToggle } from "./hover-toggle.directive";
 
 @NgModule({
 	declarations: [
@@ -34,15 +36,17 @@ export { DataGridFocus } from "./data-grid-focus.directive";
 		TableToolbarActions,
 		TableToolbarSearch,
 		TableToolbarContent,
-		DataGridFocus
+		DataGridFocus,
+		HoverToggle
 	],
 	exports: [
 		Table,
 		TableToolbar,
 		TableToolbarActions,
 		TableToolbarSearch,
 		TableToolbarContent,
-		DataGridFocus
+		DataGridFocus,
+		HoverToggle
 	],
 	imports: [
 		CommonModule,