[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/directives/readonly-textarea.directive.spec.ts

@@ -0,0 +1,34 @@
+import { CdkTextareaAutosize } from "@angular/cdk/text-field";
+import { EventEmitter, NgZone } from "@angular/core";
+
+import { VaultAutosizeReadOnlyTextArea } from "./readonly-textarea.directive";
+
+describe("VaultAutosizeReadOnlyTextArea", () => {
+  let directive: VaultAutosizeReadOnlyTextArea;
+  let onStable: EventEmitter<void>;
+
+  beforeEach(async () => {
+    onStable = new EventEmitter<void>();
+
+    directive = new VaultAutosizeReadOnlyTextArea(
+      { enabled: undefined } as unknown as CdkTextareaAutosize,
+      { onStable } as NgZone,
+    );
+  });
+
+  it("disables CdkTextareaAutosize by default", () => {
+    expect(directive["autosize"].enabled).toBe(false);
+  });
+
+  it("enables CdkTextareaAutosize after view init", async () => {
+    expect(directive["autosize"].enabled).toBe(false);
+
+    const viewInitPromise = directive.ngAfterViewInit();
+
+    onStable.emit();
+
+    await viewInitPromise;
+
+    expect(directive["autosize"].enabled).toBe(true);
+  });
+});

libs/vault/src/directives/readonly-textarea.directive.ts

@@ -0,0 +1,29 @@
+import { CdkTextareaAutosize, TextFieldModule } from "@angular/cdk/text-field";
+import { AfterViewInit, Directive, Host, NgZone } from "@angular/core";
+import { firstValueFrom } from "rxjs";
+
+@Directive({
+  standalone: true,
+  selector: "textarea[vaultAutosizeReadOnlyTextArea]",
+  providers: [TextFieldModule],
+  hostDirectives: [CdkTextareaAutosize],
+})
+export class VaultAutosizeReadOnlyTextArea implements AfterViewInit {
+  constructor(
+    @Host() private autosize: CdkTextareaAutosize,
+    private ngZone: NgZone,
+  ) {
+    // initially disable autosize
+    this.autosize.enabled = false;
+  }
+
+  // <textarea>s are commonly used within `bit-form-field` components which render
+  // content within templates. This causes the `CdkTextareaAutosize` to error out
+  // when trying to access the `parentNode` of the textarea. To avoid this, wait
+  // for the next change detection cycle to enable the autosize directive.
+  async ngAfterViewInit(): Promise<void> {
+    await firstValueFrom(this.ngZone.onStable);
+
+    this.autosize.enabled = true;
+  }
+}