API

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click={Corex.SignaturePad.clear("signature-api-cb")} class="button ui-size-sm">
    Clear
  </.action>
</div>

<.signature_pad class="signature-pad">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

  

    <div class="flex flex-wrap items-center gap-space">
  <button
    type="button"
    class="button ui-size-sm"
    onclick="document.getElementById('signature-api-cjs')?.dispatchEvent(new CustomEvent('corex:signature-pad:clear', { bubbles: false, detail: { id: 'signature-api-cjs' } }))"
  >
    Clear
  </button>
</div>

<.signature_pad class="signature-pad">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

  

    const el = document.getElementById("signature-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:signature-pad:clear", {
    bubbles: false,
    detail: { id: "signature-api-cjs" }
  })
);

  

    const el: HTMLElement | null = document.getElementById("signature-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:signature-pad:clear", {
    bubbles: false,
    detail: { id: "signature-api-cjs" }
  })
);

  

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click="signature_api_clear" class="button ui-size-sm">
    Clear
  </.action>
</div>

<.signature_pad class="signature-pad">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

  

    def handle_event("signature_api_clear", _params, socket) do
  {:noreply, Corex.SignaturePad.clear(socket, "signature-api-srv")}
end