Fix angular performance issue on color-password.component (#14560)

* Fix performance issue, by using track $index instead of character as it can contain duplicate characters

* Migrate component to use Angular signal inputs

* Make file ts-strict compliant

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

libs/components/src/color-password/color-password.component.ts

@@ -1,7 +1,4 @@
-// FIXME: Update this file to be type safe and remove this and next line
+import { Component, computed, HostBinding, input } from "@angular/core";
-// @ts-strict-ignore
-
-import { Component, HostBinding, Input } from "@angular/core";
 
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
@@ -14,10 +11,10 @@ enum CharacterType {
 
 @Component({
   selector: "bit-color-password",
-  template: `@for (character of passwordArray; track character; let i = $index) {
+  template: `@for (character of passwordCharArray(); track $index; let i = $index) {
     <span [class]="getCharacterClass(character)">
       <span>{{ character }}</span>
-      @if (showCount) {
+      @if (showCount()) {
         <span class="tw-whitespace-nowrap tw-text-xs tw-leading-5 tw-text-main">{{ i + 1 }}</span>
       }
     </span>
@@ -25,8 +22,13 @@ enum CharacterType {
   standalone: true,
 })
 export class ColorPasswordComponent {
-  @Input() password: string = null;
+  password = input<string>("");
-  @Input() showCount = false;
+  showCount = input<boolean>(false);
+
+  // Convert to an array to handle cases that strings have special characters, i.e.: emoji.
+  passwordCharArray = computed(() => {
+    return Array.from(this.password() ?? "");
+  });
 
   characterStyles: Record<CharacterType, string[]> = {
     [CharacterType.Emoji]: [],
@@ -40,16 +42,11 @@ export class ColorPasswordComponent {
     return ["tw-min-w-0", "tw-whitespace-pre-wrap", "tw-break-all"];
   }
 
-  get passwordArray() {
-    // Convert to an array to handle cases that strings have special characters, i.e.: emoji.
-    return Array.from(this.password);
-  }
-
   getCharacterClass(character: string) {
     const charType = this.getCharacterType(character);
     const charClass = this.characterStyles[charType];
 
-    if (this.showCount) {
+    if (this.showCount()) {
       return charClass.concat([
         "tw-inline-flex",
         "tw-flex-col",

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.spec.ts

@@ -168,7 +168,7 @@ describe("LoginCredentialsViewComponent", () => {
 
         const passwordColor = passwordField.query(By.directive(ColorPasswordComponent));
 
-        expect(passwordColor.componentInstance.password).toBe(cipher.login.password);
+        expect(passwordColor.componentInstance.password()).toBe(cipher.login.password);
       });
 
       it("records event", () => {

libs/vault/src/components/password-history-view/password-history-view.component.spec.ts

@@ -68,7 +68,7 @@ describe("PasswordHistoryViewComponent", () => {
     it("renders all passwords", () => {
       const passwords = fixture.debugElement.queryAll(By.directive(ColorPasswordComponent));
 
-      expect(passwords.map((password) => password.componentInstance.password)).toEqual([
+      expect(passwords.map((password) => password.componentInstance.password())).toEqual([
         "bad-password-1",
         "bad-password-2",
       ]);