update send modal

app/javascript/elements/append_template.js

@@ -0,0 +1,29 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('click', this.onClick)
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('click', this.onClick)
+  }
+
+  onClick = (e) => {
+    e.preventDefault()
+
+    const target = document.getElementById(this.dataset.targetId)
+    const item = this.querySelector('template').content.firstElementChild.cloneNode(true)
+
+    item.querySelector('a').addEventListener('click', (e) => {
+      e.preventDefault()
+
+      item.remove()
+
+      target.classList.toggle('hidden', !target.childElementCount)
+    })
+
+    target.append(item)
+    target.classList.remove('hidden')
+
+    item.querySelector('input').focus()
+  }
+}

app/javascript/elements/dynamic_list.js

@@ -2,7 +2,7 @@ import { actionable } from '@github/catalyst/lib/actionable'
 import { targets, targetable } from '@github/catalyst/lib/targetable'
 
 export default actionable(targetable(class extends HTMLElement {
-  static [targets.static] = ['items']
+  static [targets.static] = ['items', 'groups']
 
   addItem (e) {
     e.preventDefault()
@@ -24,11 +24,28 @@ export default actionable(targetable(class extends HTMLElement {
     duplicateItem.querySelectorAll('a.hidden').forEach((button) => button.classList.toggle('hidden'))
 
     originalItem.parentNode.append(duplicateItem)
+
+    this.toggleMultipleClasses()
+
+    duplicateItem.querySelector("input:not([type='hidden'])")?.focus()
   }
 
   removeItem (e) {
     e.preventDefault()
 
     this.items.find((item) => item.contains(e.target))?.remove()
+
+    this.toggleMultipleClasses()
+  }
+
+  toggleMultipleClasses () {
+    const isMultiple = this.items.length > 1
+    const elements = [...this.items, ...this.groups]
+
+    elements.forEach((element) => {
+      const classes = element.dataset.multipleClasses || this.dataset.multipleClasses
+
+      classes?.split(' ').forEach((cls) => element.classList.toggle(cls, isMultiple))
+    })
   }
 }))

app/javascript/elements/toggle_on_checked.js

@@ -0,0 +1,23 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.form.addEventListener('change', this.toggle)
+
+    this.toggle()
+  }
+
+  disconnectedCallback () {
+    this.form.removeEventListener('change', this.toggle)
+  }
+
+  toggle = () => {
+    const selector = this.dataset.names.split(' ').map((name) => `[name="${name}"]:checked:enabled`).join(', ')
+    const isChecked = !!this.form.querySelector(selector)
+
+    this.firstElementChild.classList.toggle('hidden', !isChecked)
+    this.lastElementChild.classList.toggle('hidden', isChecked)
+  }
+
+  get form () {
+    return this.closest('form')
+  }
+}