Currency Dropdown (#415)

* Initial dropdown setup and styles

* Allow form field to pass through block content and update dropdown posititon

* add currency to accounts params

* Add repositionDropdown function and carry over dropdown controller

* remove block context from form builder in favour of using form tag directly

* Hide currency input and set checks for input and label before updating

* align currency button with balance

* revert form_field_tag changes

* remove margin on currency button, looks cleaner

---------

Signed-off-by: Josh Pigford <josh@joshpigford.com>
Co-authored-by: Josh Pigford <josh@joshpigford.com>

app/javascript/controllers/currency_dropdown_controller.js

@@ -0,0 +1,58 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dropdown"
+export default class extends Controller {
+  static targets = ["menu", "input", "label", "option"]
+
+  toggleMenu(event) {
+    event.stopPropagation(); // Prevent event from closing the menu immediately
+    this.repositionDropdown();
+    this.menuTarget.classList.toggle("hidden");
+  }
+
+  hideMenu = () => {
+    this.menuTarget.classList.add("hidden");
+  }
+
+  connect() {
+    document.addEventListener("click", this.hideMenu);
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.hideMenu);
+  }
+
+  repositionDropdown () {
+    const button = this.menuTarget.previousElementSibling;
+    const menu = this.menuTarget;
+
+    // Calculate position
+    const buttonRect = button.getBoundingClientRect();
+    menu.style.top = `${buttonRect.bottom + window.scrollY}px`;
+    menu.style.left = `${buttonRect.left + window.scrollX}px`;
+  }
+
+  selectOption (e) {
+    const value = e.target.getAttribute('data-value');
+
+    if (value) {
+      // Remove active option background and tick
+      this.optionTargets.forEach((element) => {
+        element.classList.remove('bg-gray-100');
+        element.children[0].classList.add('hidden');
+      });
+
+      // Set currency value and label
+      if (this.hasInputTarget) {
+        this.inputTarget.value = value;
+      }
+      if (this.hasLabelTarget) {
+        this.labelTarget.innerHTML = value;
+      }
+
+      // Reassign active option background and tick 
+      e.currentTarget.classList.add('bg-gray-100')
+      e.currentTarget.children[0].classList.remove('hidden');
+    }
+  }
+}