properly expose the header to the web component

this way the logging stuff can happen in the example only as it should be.

src/controls.ts

@@ -440,14 +440,6 @@ export function triggerControls(environment: string, resellerToken: string, dest
         }
         return telephony.createCall(destination, createCallOptions)
           .then(call => {
-            console.log("Headers received from accept:", call.acceptHeaders)
-            const dialogIds = call.acceptHeaders
-              .filter(([name,]) => name.toLowerCase() == "x-cvg-dialogid")
-              .map(([, value]) => value)
-            if (dialogIds.length > 0) {
-              console.log(`DialogId: ${dialogIds[0]}`)
-            }
-
             const [, controlsCleanup] = generateCallControls(call, options)
             call.callCompletion.then(() => {
               controlsCleanup()

src/custom-element.ts

@@ -19,6 +19,7 @@ const TRIGGER_BUTTON_DISABLED_PART = `${TRIGGER_BUTTON_PART}-disabled`
 
 export interface CvgWebRtcButtonEventMap extends HTMLElementEventMap {
   new_call: NewCallEvent
+  call_accepted: CallAcceptedEvent
   call_ended: CallEndedEvent
   attribute_validation_failed: AttributeValidationFailedEvent
 }
@@ -245,6 +246,16 @@ export class NewCallEvent extends CallEvent<void> {
   }
 }
 
+export interface CallAcceptedDetails {
+  headers: HeaderList,
+}
+
+export class CallAcceptedEvent extends CallEvent<CallAcceptedDetails> {
+  constructor(headers: HeaderList) {
+    super('call_accepted', { headers })
+  }
+}
+
 export class CallEndedEvent extends CallEvent<any | null> {
   constructor(error: any | null) {
     if (error === undefined) {

src/web-call-example.ts

@@ -35,6 +35,17 @@ window.addEventListener('DOMContentLoaded', () => {
     connectButton.innerHTML = images.endCall
   })
 
+  connectButton.addEventListener('call_accepted', (e) => {
+    const headers = e.detail.headers
+    console.log("Headers received from accept:", headers)
+    const dialogIds = headers
+      .filter(([name,]) => name.toLowerCase() == "x-cvg-dialogid")
+      .map(([, value]) => value)
+    if (dialogIds.length > 0) {
+      console.log(`DialogId: ${dialogIds[0]}`)
+    }
+  })
+
   connectButton.addEventListener('call_ended', (e: CallEndedEvent) => {
     connectButton.innerHTML = images.newCall
     if (e.detail !== null) {