[PM-8803] Edit Custom Fields (#10054)

* initial add of custom fields

* add fields for custom field

* integrate custom field into cipher form service for text fields

* add hidden field type

* add boolean custom field

* add linked option type

* add testids for automated testing

* add edit option for each custom field

* update dialog component name to match add/edit nature

* add delete button for fields

* initial add of drag and drop

* collect tailwind styles from vault components

* add drag and drop functionality with announcement

* add reorder via keyboard

* update tests to match functionality

* account for partial edit of custom fields

* fix change detection for new fields

* add label's to the edit/reorder translations

* update dynamic heading to be inline

* add validation/required for field label

* disable toggle button on hidden fields when the user cannot view passwords

* remove the need for passing `updatedCipherView` by only using a single instance of `CustomFieldsComponent`

* lint fix

* use bitLink styles rather than manually defining tailwind classes

* use submit action, no duplicated button and allows for form submission via enter

* add documentation for `newField`

libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html

@@ -0,0 +1,111 @@
+<bit-section *ngIf="hasCustomFields">
+  <bit-section-header>
+    <h2 bitTypography="h5">{{ "customFields" | i18n }}</h2>
+  </bit-section-header>
+  <form [formGroup]="customFieldsForm">
+    <bit-card formArrayName="fields" cdkDropList (cdkDropListDropped)="drop($event)">
+      <div
+        *ngFor="let field of fields.controls; let i = index"
+        [formGroupName]="i"
+        class="tw-flex tw-p-3 -tw-mx-3 tw-gap-4 tw-bg-background tw-rounded-lg first:-tw-mt-3 last-of-type:tw-mb-3"
+        [ngClass]="{
+          'tw-items-center': field.value.type === FieldType.Boolean
+        }"
+        cdkDrag
+        #customFieldRow
+      >
+        <!-- Text Field -->
+        <bit-form-field *ngIf="field.value.type === FieldType.Text" class="tw-flex-1" disableMargin>
+          <bit-label>{{ field.value.name }}</bit-label>
+          <input bitInput formControlName="value" data-testid="custom-text-field" />
+        </bit-form-field>
+
+        <!-- Hidden Field -->
+        <bit-form-field
+          *ngIf="field.value.type === FieldType.Hidden"
+          class="tw-flex-1"
+          disableMargin
+        >
+          <bit-label>{{ field.value.name }}</bit-label>
+          <input
+            bitInput
+            formControlName="value"
+            type="password"
+            data-testid="custom-hidden-field"
+          />
+          <button
+            type="button"
+            bitIconButton
+            bitSuffix
+            bitPasswordInputToggle
+            data-testid="visibility-for-custom-hidden-field"
+            [disabled]="!canViewPasswords(i)"
+          ></button>
+        </bit-form-field>
+
+        <!-- Boolean Field -->
+        <bit-form-control
+          *ngIf="field.value.type === FieldType.Boolean"
+          class="tw-flex-1"
+          disableMargin
+        >
+          <input
+            bitCheckbox
+            formControlName="value"
+            type="checkbox"
+            data-testid="custom-boolean-field"
+          />
+          <bit-label>{{ field.value.name }}</bit-label>
+        </bit-form-control>
+
+        <!-- Linked Field -->
+        <bit-form-field
+          *ngIf="field.value.type === FieldType.Linked"
+          class="tw-flex-1"
+          disableMargin
+        >
+          <bit-label>{{ field.value.name }}</bit-label>
+          <bit-select formControlName="linkedId" data-testid="custom-linked-field">
+            <bit-option
+              *ngFor="let option of linkedFieldOptions"
+              [value]="option.value"
+              [label]="option.name"
+            ></bit-option>
+          </bit-select>
+        </bit-form-field>
+
+        <button
+          type="button"
+          (click)="openAddEditCustomFieldDialog({ index: i, label: field.value.name })"
+          [appA11yTitle]="'editFieldLabel' | i18n: field.value.name"
+          bitIconButton="bwi-pencil-square"
+          class="tw-self-end"
+          data-testid="edit-custom-field-button"
+          *ngIf="!isPartialEdit"
+        ></button>
+
+        <button
+          type="button"
+          bitIconButton="bwi-hamburger"
+          class="tw-self-end"
+          cdkDragHandle
+          [appA11yTitle]="'reorderToggleButton' | i18n: field.value.name"
+          (keydown)="handleKeyDown($event, field.value.name, i)"
+          data-testid="reorder-toggle-button"
+          *ngIf="!isPartialEdit"
+        ></button>
+      </div>
+
+      <button
+        type="button"
+        bitLink
+        linkType="primary"
+        (click)="openAddEditCustomFieldDialog()"
+        *ngIf="!isPartialEdit"
+      >
+        <i class="bwi bwi-plus tw-font-bold" aria-hidden="true"></i>
+        {{ "addField" | i18n }}
+      </button>
+    </bit-card>
+  </form>
+</bit-section>