<ids-dialog data-title="Title" data-cancel-text="Cancel" data-confirm-text="OK">
  <p class="if">Do you want to proceed?</p>
</ids-dialog>
<script src="…dialog-webcomponent.iife.js"></script>

<ids-dialog
  data-title="Title"
  data-cancel-text="Cancel"
  data-confirm-text="OK"
  data-text="Do you want to proceed?"
  data-id="dialog-test"
  data-is-open="true"
  data-description="A confirmation dialog"
>
</ids-dialog>
<script src="…dialog-webcomponent.iife.js"></script>

<button type="button" class="if primary button" id="open">Open dialog</button>
<ids-dialog
  data-title="Title"
  data-id="dialog-test"
  data-cancel-text="Cancel"
  data-confirm-text="OK"
>
  <p class="if text body">Do you want to proceed?</p>
</ids-dialog>
<script>
  const _dispatchEvent = (id) => {
    const _event = new CustomEvent(`ids:send:dialog:toggle:${id}`, {
      bubbles: !0,
      detail: {
        source: 'IDS_DIALOG',
        type: 'DIALOG_TOGGLE',
        payload: {
          id: id,
        },
      },
    });
    document.dispatchEvent(_event);
  };

  document.getElementById('open').addEventListener('click', (e) => {
    _dispatchEvent('dialog-test');
  });
</script>

document.addEventListener(`ids:send:dialog:toggle:${_id}`, (e) => {
  this.externalInitiatorEl = e.target;
  this.toggle();
});

document.addEventListener(`ids:send:dialog:${_id}`, (e) => {
  console.log(e);
});

// For opened event
detail: { source: "IDS_DIALOG", type: "DIALOG_OPENED", payload: { id: "<id>" } }
// For closed event
detail: { source: "IDS_DIALOG", type: "DIALOG_CLOSED", payload: { id: "<id>" } }
// Cancelled
detail: { source: "IDS_DIALOG", type: "DIALOG_CANCELLED", payload: { id: "<id>" } }
// Confirmed
detail: { source: "IDS_DIALOG", type: "DIALOG_CONFIRMED", payload: { id: "<id>" } }