fix(dialog): fixing issue with open, close, cancel events not firing

.changeset/itchy-tools-marry.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`rh-dialog`: fixing issue where the cancel, open, and closed events were not firing for dialog

elements/rh-dialog/demo/events.html

@@ -0,0 +1,33 @@
+<rh-button id="first-modal-trigger">Open</rh-button>
+<rh-dialog trigger="first-modal-trigger">
+  <h2 slot="header">Modal dialog with a header</h2>
+  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+    anim id est laborum.</p>
+  <rh-cta>
+    <a href="#bar">Learn more</a>
+  </rh-cta>
+</rh-dialog>
+
+<script type="module">
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-dialog/rh-dialog.js';
+
+  const dialog = document.querySelector('rh-dialog');
+  dialog.addEventListener('close', () => {
+    // @ts-ignore
+    console.log('Dialog closed');
+  });
+  dialog.addEventListener('open', () => {
+    // @ts-ignore
+    console.log('Dialog opened');
+  });
+  dialog.addEventListener('cancel', () => {
+    // @ts-ignore
+    console.log('Dialog canceled');
+  });
+</script>
+

elements/rh-dialog/rh-dialog.ts

@@ -41,12 +41,16 @@ async function pauseYoutube(iframe: HTMLIFrameElement) {
 }
 
 function openChanged(this: RhDialog, oldValue: unknown) {
-  if (this.type === 'video' && oldValue === true && this.open === false) {
-    this.querySelector('video')?.pause?.();
-    const iframe = this.querySelector('iframe');
-    if (iframe?.src.match(/youtube/)) {
-      pauseYoutube(iframe);
+  if (this.type === 'video') {
+    if (oldValue === true && this.open === false) {
+      this.querySelector('video')?.pause?.();
+      const iframe = this.querySelector('iframe');
+      if (iframe?.src.match(/youtube/)) {
+        pauseYoutube(iframe);
+      }
     }
+  } else if (typeof oldValue === 'boolean' || typeof oldValue === 'undefined') {
+    this._openChanged(oldValue, this.open);
   }
 }