[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`

apps/browser/src/_locales/en/messages.json

@@ -3642,5 +3642,105 @@
   },
   "loading": {
     "message": "Loading"
+  },
+  "addField": {
+    "message": "Add field"
+  },
+  "add": {
+    "message": "Add"
+  },
+  "fieldType": {
+    "message": "Field type"
+  },
+  "fieldLabel": {
+    "message": "Field label"
+  },
+  "textHelpText": {
+    "message": "Use text fields for data like security questions"
+  },
+  "hiddenHelpText": {
+    "message": "Use hidden fields for sensitive data like a password"
+  },
+  "checkBoxHelpText":{
+    "message": "Use checkboxes if you'd like to auto-fill a form's checkbox, like a remember email"
+  },
+  "linkedHelpText": {
+    "message": "Use a linked field when you are experiencing auto-fill issues for a specific website."
+  },
+  "linkedLabelHelpText": {
+    "message": "Enter the the field's html id, name, aria-label, or placeholder."
+  },
+  "editField": {
+    "message": "Edit field"
+  },
+  "editFieldLabel": {
+    "message": "Edit $LABEL$",
+    "placeholders": {
+      "label": {
+        "content": "$1",
+        "example": "Custom field"
+      }
+    }
+  },
+  "deleteCustomField": {
+    "message": "Delete $LABEL$",
+    "placeholders": {
+      "label": {
+        "content": "$1",
+        "example": "Custom field"
+      }
+    }
+  },
+  "fieldAdded": {
+    "message": "$LABEL$ added",
+    "placeholders": {
+      "label": {
+        "content": "$1",
+        "example": "Custom field"
+      }
+    }
+  },
+  "reorderToggleButton": {
+    "message": "Reorder $LABEL$. Use arrow key to move item up or down.",
+    "placeholders": {
+      "label": {
+        "content": "$1",
+        "example": "Custom field"
+      }
+    }
+  },
+  "reorderFieldUp":{
+    "message": "$LABEL$ moved up, position $INDEX$ of $LENGTH$",
+    "placeholders": {
+      "label": {
+        "content": "$1",
+        "example": "Custom field"
+      },
+      "index": {
+        "content": "$2",
+        "example": "1"
+      },
+      "length": {
+        "content": "$3",
+        "example": "3"
+      }
+    }
+  },
+  "reorderFieldDown":{
+    "message": "$LABEL$ moved down, position $INDEX$ of $LENGTH$",
+    "placeholders": {
+      "label": {
+        "content": "$1",
+        "example": "Custom field"
+      },
+      "index": {
+        "content": "$2",
+        "example": "1"
+      },
+      "length": {
+        "content": "$3",
+        "example": "3"
+      }
+    }
   }
 }

apps/browser/tailwind.config.js

@@ -6,6 +6,7 @@ config.content = [
   "../../libs/components/src/**/*.{html,ts}",
   "../../libs/auth/src/**/*.{html,ts}",
   "../../libs/angular/src/**/*.{html,ts}",
+  "../../libs/vault/src/**/*.{html,ts}",
 ];
 
 module.exports = config;