diff --git a/libs/packages/sam-material-extensions/src/lib/public-api.ts b/libs/packages/sam-material-extensions/src/lib/public-api.ts index 80809d6b7d..a10b883c7b 100644 --- a/libs/packages/sam-material-extensions/src/lib/public-api.ts +++ b/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'; diff --git a/libs/packages/sam-material-extensions/src/lib/table/table-row-import/table-row-navigation.directive.spec.ts b/libs/packages/sam-material-extensions/src/lib/table/table-row-click/table-row-click.directive.spec.ts similarity index 84% rename from libs/packages/sam-material-extensions/src/lib/table/table-row-import/table-row-navigation.directive.spec.ts rename to libs/packages/sam-material-extensions/src/lib/table/table-row-click/table-row-click.directive.spec.ts index abaed638b5..eaa5cf4166 100644 --- a/libs/packages/sam-material-extensions/src/lib/table/table-row-import/table-row-navigation.directive.spec.ts +++ b/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: ` `, + template: ` `, }) class TestHoverFocusComponent {} -describe('TableRowNavigationDirective', () => { +describe('TableRowClickDirective', () => { let component: TestHoverFocusComponent; let fixture: ComponentFixture; let trEl: DebugElement; beforeEach(() => { fixture = TestBed.configureTestingModule({ - declarations: [TestHoverFocusComponent, TableRowNavigationDirective], + declarations: [TestHoverFocusComponent, TableRowClickDirective], imports: [RouterTestingModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).createComponent(TestHoverFocusComponent); diff --git a/libs/packages/sam-material-extensions/src/lib/table/table-row-click/table-row-click.directive.ts b/libs/packages/sam-material-extensions/src/lib/table/table-row-click/table-row-click.directive.ts new file mode 100644 index 0000000000..c87cb2d649 --- /dev/null +++ b/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(); + + 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); + } +} diff --git a/libs/packages/sam-material-extensions/src/lib/table/table-row-import/table-row-navigation.directive.ts b/libs/packages/sam-material-extensions/src/lib/table/table-row-import/table-row-navigation.directive.ts deleted file mode 100644 index 5e7d3eea54..0000000000 --- a/libs/packages/sam-material-extensions/src/lib/table/table-row-import/table-row-navigation.directive.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2 } from '@angular/core'; -import { Router } from '@angular/router'; - -@Directive({ - selector: 'tr[mat-row][sdsTableRowNavigation]', -}) -export class TableRowNavigationDirective { - private readonly hoverClass = 'sds-table__row--hovered'; - - @Input() - highlightOnHover = false; - - constructor(private el: ElementRef, private renderer: Renderer2, private router: Router) {} - - @HostListener('mouseenter') onMouseEnter() { - if (this.highlightOnHover) { - this.addHoverClass(); - } - } - - @HostListener('mouseleave') onMouseLeave() { - if (this.highlightOnHover) { - this.removeHoverClass(); - } - } - - addHoverClass() { - this.renderer.addClass(this.el.nativeElement, this.hoverClass); - } - removeHoverClass() { - this.renderer.removeClass(this.el.nativeElement, this.hoverClass); - } -} diff --git a/libs/packages/sam-material-extensions/src/lib/table/table.component.html b/libs/packages/sam-material-extensions/src/lib/table/table.component.html index 373051c94c..b0e96d4ff2 100644 --- a/libs/packages/sam-material-extensions/src/lib/table/table.component.html +++ b/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)" > diff --git a/libs/packages/sam-material-extensions/src/lib/table/table.component.ts b/libs/packages/sam-material-extensions/src/lib/table/table.component.ts index 0fec19a51c..31165d0a17 100644 --- a/libs/packages/sam-material-extensions/src/lib/table/table.component.ts +++ b/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; @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; diff --git a/libs/packages/sam-material-extensions/src/lib/table/table.module.ts b/libs/packages/sam-material-extensions/src/lib/table/table.module.ts index c2f99aca25..0bf95e04a5 100644 --- a/libs/packages/sam-material-extensions/src/lib/table/table.module.ts +++ b/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 {}