feat(dialog): implement <dialog> interface

adds `close` and `cancel` events to dialog

packages/web-components/fast-components/src/dialog/dialog.pw.spec.ts

@@ -46,7 +46,7 @@ describe("FASTDialog", function () {
     // FASTDialog should focus on the first element
     it("should focus on first element", async function () {
         const element = await this.page.$("fast-dialog");
-    
+
         expect(
             await this.page.evaluate(
                 () => document.activeElement?.id

packages/web-components/fast-foundation/src/dialog/dialog.spec.ts

@@ -6,7 +6,7 @@ import { KeyCodes } from "@microsoft/fast-web-utilities";
 
 const FASTDialog = Dialog.compose({
     baseName: "dialog",
-    template,  
+    template,
 })
 
 async function setup() {
@@ -262,6 +262,52 @@ describe("Dialog", () => {
             await disconnect();
         });
 
+        it("should fire a 'cancel' event when its overlay is clicked", async () => {
+            const { element, connect, disconnect } = await setup();
+
+            await connect();
+
+            const overlay = element.shadowRoot!.querySelector(".overlay")! as HTMLElement;
+
+            const wasDismissed = await new Promise(resolve => {
+                element.addEventListener("cancel", () => resolve(true));
+
+                overlay.click();
+
+                // Resolve false on the next update in case click hasn't happened
+                DOM.queueUpdate(() => resolve(false));
+            });
+
+            expect(wasDismissed).to.equal(true);
+
+            await disconnect();
+        });
+
+        it("should fire a 'close' event when its button is clicked", async () => {
+            const { element, connect, disconnect } = await setup();
+
+            const button = document.createElement('button');
+            button.textContent = 'close';
+            element.append(button)
+
+            await connect();
+
+            const overlay = element.shadowRoot!.querySelector(".overlay")! as HTMLElement;
+
+            const wasDismissed = await new Promise(resolve => {
+                element.addEventListener("close", () => resolve(true));
+
+                button.click();
+
+                // Resolve false on the next update in case click hasn't happened
+                DOM.queueUpdate(() => resolve(false));
+            });
+
+            expect(wasDismissed).to.equal(true);
+
+            await disconnect();
+        });
+
         it("should fire a 'dismiss' event when keydown is invoked on the document", async () => {
             const { element, connect, disconnect, document } = await setup();