Event

    <.color_picker
  value="#3b82f6"
  presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
  class="color-picker"
  on_value_change="cp_ev_server_value">
  <:label>Value (server)</:label>
</.color_picker>

  

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

    <.color_picker
  value="#3b82f6"
  presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
  class="color-picker"
  on_open_change="cp_ev_server_open">
  <:label>Open (server)</:label>
</.color_picker>

  

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

    <.color_picker
  value="#3b82f6"
  presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
  class="color-picker"
  on_value_change_client="color-picker-cv">
  <:label>Value (client only)</:label>
</.color_picker>

  

    const el = document.getElementById("color-picker-ev-cv");
el?.addEventListener("color-picker-cv", (event) => {
  console.log(event.detail);
});

  

    const el = document.getElementById("color-picker-ev-cv");
el?.addEventListener("color-picker-cv", (event: Event) => {
  console.log((event as CustomEvent<unknown>).detail);
});

  

    <.color_picker
  value="#3b82f6"
  presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
  class="color-picker"
  on_open_change_client="color-picker-co">
  <:label>Open (client only)</:label>
</.color_picker>

  

    const el = document.getElementById("color-picker-ev-co");
el?.addEventListener("color-picker-co", (event) => {
  console.log(event.detail);
});

  

    const el = document.getElementById("color-picker-ev-co");
el?.addEventListener("color-picker-co", (event: Event) => {
  console.log((event as CustomEvent<unknown>).detail);
});