[SM-342] Password Toggle directive (#3850)

libs/components/src/form-field/password-input-toggle.directive.ts

@@ -0,0 +1,54 @@
+import {
+  AfterContentInit,
+  Directive,
+  EventEmitter,
+  Host,
+  HostListener,
+  Input,
+  OnChanges,
+  Output,
+} from "@angular/core";
+
+import { ButtonComponent } from "../button";
+
+import { BitFormFieldComponent } from "./form-field.component";
+
+@Directive({
+  selector: "[bitPasswordInputToggle]",
+})
+export class BitPasswordInputToggleDirective implements AfterContentInit, OnChanges {
+  @Input() toggled = false;
+  @Output() toggledChange = new EventEmitter<boolean>();
+
+  @HostListener("click") onClick() {
+    this.toggled = !this.toggled;
+    this.toggledChange.emit(this.toggled);
+
+    this.update();
+
+    this.formField.input?.focus();
+  }
+
+  constructor(@Host() private button: ButtonComponent, private formField: BitFormFieldComponent) {}
+
+  get icon() {
+    return this.toggled ? "bwi-eye-slash" : "bwi-eye";
+  }
+
+  ngOnChanges(): void {
+    this.update();
+  }
+
+  ngAfterContentInit(): void {
+    this.toggled = this.formField.input.type !== "password";
+    this.button.icon = this.icon;
+  }
+
+  private update() {
+    this.button.icon = this.icon;
+    if (this.formField.input?.type != null) {
+      this.formField.input.type = this.toggled ? "text" : "password";
+      this.formField.input.spellcheck = this.toggled ? false : undefined;
+    }
+  }
+}