Toggle Ready

<duet-grid grid-template="small">
  <div>
    <duet-toggle label="Loading success (optimistic change)" value="Some value" class="onchange success"></duet-toggle>
    <duet-toggle label="Loading failure (optimistic change)" value="Some value" class="onchange failure"></duet-toggle>
    <duet-toggle label="Loading success (pending change)" value="Some value" class="onclick success"></duet-toggle>
    <duet-toggle label="Loading failure (pending change)" value="Some value" class="onclick failure"></duet-toggle>
    <duet-toggle label="Loading failure (pending change)" value="Some value" class="onclick failure" checked></duet-toggle>
  </div>
</duet-grid>

<script>
const togglesOnChange = document.querySelectorAll("duet-toggle.onchange")

function clearAlert(el) {
  if (el.nextElementSibling?.matches("duet-alert")) {
    el.nextElementSibling.remove()
  }
}

function addAlertAfter(el) {
  const alert = document.createElement("duet-alert")
  alert.variation = "warning"
  alert.textContent = "Operation failed, try again"
  el.after(alert)
}

togglesOnChange.forEach(t => t.addEventListener("duetChange", ev => {

  if (t.classList.contains("success")) {
    t.loading = true
    setTimeout(() => {
      t.loading = false
    }, 2000)
  }

  if (t.classList.contains("failure")) {
    if (t.checked) {
      t.loading = true
      clearAlert(t)
      setTimeout(() => {
        t.loading = false
        // revert the state after failure
        t.checked = !t.checked
        addAlertAfter(t)
      }, 2000)
    }
  }
}))

const togglesOnClick = document.querySelectorAll("duet-toggle.onclick")
togglesOnClick.forEach(t => t.addEventListener("click", ev => {

  // prevent checked from changing
  ev.preventDefault()

  ev.stopImmediatePropagation()
  if (t.classList.contains("success")) {
    t.loading = true
    setTimeout(() => {
      t.loading = false
      // toggle the state after success
      t.checked = !t.checked
    }, 2000)
  }

  if (t.classList.contains("failure")) {
    t.loading = true
    clearAlert(t)
    setTimeout(() => {
      t.loading = false
      addAlertAfter(t)
    }, 2000)
  }
}))


</script>