[PM-16132][16249] Custom hidden field missing color and character count toggle (#13402)

* Add colored characters to custom hidden field

* Add character count toggle to hidden field

* Check correct variable for revealed hidden field

* Merge branch 'main' into vault/pm-16132/custom-hidden-field-missing-color-and-character-count-toggle

* Toggle character count on per field basis

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
Co-authored-by: bnagawiecki <107435978+bnagawiecki@users.noreply.github.com>
Co-authored-by: Leslie Tilton <23057410+Banrion@users.noreply.github.com>

libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html

@@ -51,6 +51,20 @@
           class="tw-font-mono"
           vaultAutosizeReadOnlyTextArea
         ></textarea>
+        <button
+          *ngIf="canViewPassword && revealedHiddenFields.includes(i)"
+          bitIconButton="bwi-numbered-list"
+          bitSuffix
+          type="button"
+          data-testid="toggle-hidden-field-value-count"
+          [appA11yTitle]="
+            (showHiddenValueCountFields.includes(i) ? 'hideCharacterCount' : 'showCharacterCount')
+              | i18n
+          "
+          [attr.aria-expanded]="showHiddenValueCountFields.includes(i)"
+          appStopClick
+          (click)="toggleCharacterCount(i)"
+        ></button>
         <button
           bitSuffix
           type="button"
@@ -71,6 +85,12 @@
           (click)="logCopyEvent()"
         ></button>
       </bit-form-field>
+      <div
+        *ngIf="showHiddenValueCountFields.includes(i) && revealedHiddenFields.includes(i)"
+        [ngClass]="{ 'tw-mt-3': true, 'tw-mb-2': true }"
+      >
+        <bit-color-password [password]="field.value" [showCount]="true"></bit-color-password>
+      </div>
       <bit-form-control *ngIf="field.type === fieldType.Boolean">
         <input
           bitCheckbox

libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts

@@ -21,6 +21,7 @@ import {
   SectionHeaderComponent,
   TypographyModule,
   CheckboxModule,
+  ColorPasswordModule,
 } from "@bitwarden/components";
 
 import { VaultAutosizeReadOnlyTextArea } from "../../directives/readonly-textarea.directive";
@@ -40,6 +41,7 @@ import { VaultAutosizeReadOnlyTextArea } from "../../directives/readonly-textare
     SectionHeaderComponent,
     TypographyModule,
     CheckboxModule,
+    ColorPasswordModule,
     VaultAutosizeReadOnlyTextArea,
   ],
 })
@@ -51,6 +53,11 @@ export class CustomFieldV2Component implements OnInit {
   /** Indexes of hidden fields that are revealed */
   revealedHiddenFields: number[] = [];
 
+  /**
+   * Indicates whether the hidden field's character count should be shown
+   */
+  showHiddenValueCountFields: number[] = [];
+
   constructor(
     private i18nService: I18nService,
     private eventCollectionService: EventCollectionService,
@@ -69,6 +76,15 @@ export class CustomFieldV2Component implements OnInit {
     return this.cipher.viewPassword;
   }
 
+  toggleCharacterCount(index: number) {
+    const fieldIndex = this.showHiddenValueCountFields.indexOf(index);
+    if (fieldIndex > -1) {
+      this.showHiddenValueCountFields.splice(fieldIndex, 1);
+    } else {
+      this.showHiddenValueCountFields.push(index);
+    }
+  }
+
   async toggleHiddenField(hiddenFieldVisible: boolean, index: number) {
     if (hiddenFieldVisible) {
       this.revealedHiddenFields.push(index);