import { Directive, HostListener, ElementRef, Input } from '@angular/core';

@Directive({
  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: '[hover-class]'
})
export class HoverClassDirective {
  @Input('hover-class') hoverClass: any;

  constructor(private readonly $elementRef: ElementRef) {}

  @HostListener('mouseenter')
  public onMouseEnter() {
    this.$elementRef.nativeElement.classList.add(this.hoverClass);
  }

  @HostListener('mouseleave')
  public onMouseLeave() {
    this.$elementRef.nativeElement.classList.remove(this.hoverClass);
  }
}
