[PM-17598] Long custom fields (#13668)

* add custom directive to use the angular CDK resize textarea directive

* swap to textarea to allow for full content to be shown when view text or hidden custom fields

* add text-field styling to web sass file

* move angular import to CL scss file

* add `textarea` to selector to enforce directive usage only on textareas

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

@@ -5,13 +5,19 @@
   <bit-card>
     <div
       class="tw-border-secondary-300 [&_bit-form-field:last-of-type]:tw-mb-0"
-      *ngFor="let field of cipher.fields; let last = last"
+      *ngFor="let field of cipher.fields; let last = last; let i = index"
       [ngClass]="{ 'tw-mb-4': !last }"
       data-testid="custom-field"
     >
       <bit-form-field *ngIf="field.type === fieldType.Text" [disableReadOnlyBorder]="last">
         <bit-label [appTextDrag]="field.value">{{ field.name }}</bit-label>
-        <input readonly bitInput type="text" [value]="field.value" aria-readonly="true" />
+        <textarea
+          readonly
+          bitInput
+          [value]="field.value"
+          aria-readonly="true"
+          vaultAutosizeReadOnlyTextArea
+        ></textarea>
         <button
           bitIconButton="bwi-clone"
           bitSuffix
@@ -32,14 +38,26 @@
           [value]="field.value"
           aria-readonly="true"
           class="tw-font-mono"
+          *ngIf="!revealedHiddenFields.includes(i)"
         />
+        <!-- `type="password"` is only available for inputs, but textarea should show the entire field when visible. -->
+        <textarea
+          *ngIf="revealedHiddenFields.includes(i)"
+          readonly
+          bitInput
+          type="password"
+          [value]="field.value"
+          aria-readonly="true"
+          class="tw-font-mono"
+          vaultAutosizeReadOnlyTextArea
+        ></textarea>
         <button
           bitSuffix
           type="button"
           bitIconButton
           bitPasswordInputToggle
           *ngIf="canViewPassword"
-          (toggledChange)="logHiddenEvent($event)"
+          (toggledChange)="toggleHiddenField($event, i)"
         ></button>
         <button
           bitIconButton="bwi-clone"

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

@@ -23,6 +23,8 @@ import {
   CheckboxModule,
 } from "@bitwarden/components";
 
+import { VaultAutosizeReadOnlyTextArea } from "../../directives/readonly-textarea.directive";
+
 @Component({
   selector: "app-custom-fields-v2",
   templateUrl: "custom-fields-v2.component.html",
@@ -38,6 +40,7 @@ import {
     SectionHeaderComponent,
     TypographyModule,
     CheckboxModule,
+    VaultAutosizeReadOnlyTextArea,
   ],
 })
 export class CustomFieldV2Component implements OnInit {
@@ -45,6 +48,9 @@ export class CustomFieldV2Component implements OnInit {
   fieldType = FieldType;
   fieldOptions: any;
 
+  /** Indexes of hidden fields that are revealed */
+  revealedHiddenFields: number[] = [];
+
   constructor(
     private i18nService: I18nService,
     private eventCollectionService: EventCollectionService,
@@ -63,7 +69,13 @@ export class CustomFieldV2Component implements OnInit {
     return this.cipher.viewPassword;
   }
 
-  async logHiddenEvent(hiddenFieldVisible: boolean) {
+  async toggleHiddenField(hiddenFieldVisible: boolean, index: number) {
+    if (hiddenFieldVisible) {
+      this.revealedHiddenFields.push(index);
+    } else {
+      this.revealedHiddenFields = this.revealedHiddenFields.filter((i) => i !== index);
+    }
+
     if (hiddenFieldVisible) {
       await this.eventCollectionService.collect(
         EventType.Cipher_ClientToggledHiddenFieldVisible,