Events

    <.timer
  countdown
  start_ms={3_600_000}
  target_ms={0}
  class="timer"
  on_tick="timer_tick"
  on_complete="timer_complete"
>
  <:start_trigger><.heroicon name="hero-play"/></:start_trigger>
  <:pause_trigger><.heroicon name="hero-pause"/></:pause_trigger>
  <:resume_trigger><.heroicon name="hero-play"/></:resume_trigger>
  <:reset_trigger><.heroicon name="hero-arrow-path"/></:reset_trigger>
</.timer>

  

    def handle_event("timer_tick", %{"id" => id} = params, socket) do
  IO.inspect(params, label: "timer_tick")
  {:noreply, socket}
end

def handle_event("timer_complete", %{"id" => id} = params, socket) do
  IO.inspect(params, label: "timer_complete")
  {:noreply, socket}
end
  

    <.timer
  id="timer-events-client"
  countdown
  start_ms={3_600_000}
  target_ms={0}
  class="timer"
  on_tick_client="timer-tick"
  on_complete_client="timer-complete"
>
  <:start_trigger><.heroicon name="hero-play"/></:start_trigger>
  <:pause_trigger><.heroicon name="hero-pause"/></:pause_trigger>
  <:resume_trigger><.heroicon name="hero-play"/></:resume_trigger>
  <:reset_trigger><.heroicon name="hero-arrow-path"/></:reset_trigger>
</.timer>

  

    const el = document.getElementById("timer-events-client")
if (!el) return
el.addEventListener("timer-tick", (event) => {
  const d = event.detail
  console.log(d?.formattedTime, d?.id)
})
el.addEventListener("timer-complete", (event) => {
  console.log(event.detail?.id)
})

  

    const el: HTMLElement | null = document.getElementById("timer-events-client")
if (!el) return
el.addEventListener("timer-tick", (event: CustomEvent<{ formattedTime?: string; id?: string }>) => {
  const d = event.detail
  console.log(d?.formattedTime, d?.id)
})
el.addEventListener("timer-complete", (event: CustomEvent<{ id?: string }>) => {
  console.log(event.detail?.id)
})