All files / src/app/shared/directives password-button.directive.ts

81.48% Statements 22/27
63.64% Branches 7/11
80% Functions 4/5
79.17% Lines 19/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 4792x         92x       92x   36x   92x 35x 35x 35x 35x 35x 35x     92x 35x     92x 35x         35x 35x         184x             92x  
import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
 
@Directive({
  selector: '[cdPasswordButton]'
})
export class PasswordButtonDirective implements OnInit {
  private iElement: HTMLElement;
 
  @Input()
  private cdPasswordButton: string;
 
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
 
  ngOnInit() {
    this.renderer.setAttribute(this.elementRef.nativeElement, 'tabindex', '-1');
    this.iElement = this.renderer.createElement('i');
    this.renderer.addClass(this.iElement, 'icon-prepend');
    this.renderer.addClass(this.iElement, 'fa');
    this.renderer.appendChild(this.elementRef.nativeElement, this.iElement);
    this.update();
  }
 
  private getInputElement() {
    return document.getElementById(this.cdPasswordButton) as HTMLInputElement;
  }
 
  private update() {
    const inputElement = this.getInputElement();
    if (inputElement && inputElement.type === 'text') {
      this.renderer.removeClass(this.iElement, 'fa-eye');
      this.renderer.addClass(this.iElement, 'fa-eye-slash');
    } else {
      this.renderer.removeClass(this.iElement, 'fa-eye-slash');
      this.renderer.addClass(this.iElement, 'fa-eye');
    }
  }
 
  @HostListener('click')
  onClick() {
    const inputElement = this.getInputElement();
    // Modify the type of the input field.
    inputElement.type = inputElement.type === 'password' ? 'text' : 'password';
    // Update the button icon/tooltip.
    this.update();
  }
}