API

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click={Corex.Dialog.set_open("dialog-api", true)} class="button ui-size-sm">
    Open
  </.action>
</div>

<.dialog id="dialog-api" class="dialog">
  <:trigger>Open</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <div class="flex flex-wrap justify-end gap-space-sm mt-space-lg">
      <.action phx-click={Corex.Dialog.set_open("dialog-api", false)} class="button ui-size-sm">
        Close
      </.action>
    </div>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

  

    <div class="flex flex-wrap items-center gap-space">
  <.action
    phx-click={
      Phoenix.LiveView.JS.dispatch("corex:dialog:set-open",
        to: "#dialog-api-js",
        detail: %{open: true},
        bubbles: false
      )
    }
    class="button ui-size-sm"
  >
    Open
  </.action>
</div>

<.dialog id="dialog-api-js" class="dialog">
  <:trigger>Open</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <div class="flex flex-wrap justify-end gap-space-sm mt-space-lg">
      <.action
        phx-click={
          Phoenix.LiveView.JS.dispatch("corex:dialog:set-open",
            to: "#dialog-api-js",
            detail: %{open: false},
            bubbles: false
          )
        }
        class="button ui-size-sm"
      >
        Close
      </.action>
    </div>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

  

    const el = document.getElementById("dialog-api-js");
el?.dispatchEvent(
  new CustomEvent("corex:dialog:set-open", { bubbles: false, detail: { open: true } })
);
el?.dispatchEvent(
  new CustomEvent("corex:dialog:set-open", { bubbles: false, detail: { open: false } })
);

  

    const el: HTMLElement | null = document.getElementById("dialog-api-js");
el?.dispatchEvent(
  new CustomEvent("corex:dialog:set-open", { bubbles: false, detail: { open: true } })
);
el?.dispatchEvent(
  new CustomEvent("corex:dialog:set-open", { bubbles: false, detail: { open: false } })
);

  

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

<.dialog id="dialog-api-server" class="dialog">
  <:trigger>Open</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <div class="flex flex-wrap justify-end gap-space-sm mt-space-lg">
      <.action phx-click="dialog_api_close" class="button ui-size-sm">Close</.action>
    </div>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

  

    def handle_event("dialog_api_open", _, socket) do
  {:noreply, Corex.Dialog.set_open(socket, "dialog-api-server", true)}
end

def handle_event("dialog_api_close", _, socket) do
  {:noreply, Corex.Dialog.set_open(socket, "dialog-api-server", false)}
end