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

82.14% Statements 23/28
64.29% Branches 9/14
83.33% Functions 5/6
80% Lines 20/25

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 4798x         98x       98x   40x   98x 39x 39x 39x 39x 39x 39x     98x 39x     98x 39x 39x       39x 39x         196x             98x  
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();
    Iif (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();
  }
}