add TabContainerChange event class

Author: keithamus

src/tab-container-element.ts

@@ -7,6 +7,30 @@ function getTabs(el: TabContainerElement): HTMLElement[] {
   )
 }
 
+export class TabContainerChangeEvent extends Event {
+  constructor(type: string, {tab, panel, ...init}: EventInit & {tab?: Element; panel?: Element}) {
+    super(type, init)
+    this.#tab = tab || null
+    this.#panel = panel || null
+  }
+
+  get detail() {
+    // eslint-disable-next-line no-console
+    console.warn('TabContainerElement.detail is deprecated, please use .panel instead')
+    return {relatedTarget: this.#panel}
+  }
+
+  #panel: Element | null = null
+  get panel(): Element | null {
+    return this.#panel
+  }
+
+  #tab: Element | null = null
+  get tab(): Element | null {
+    return this.#tab
+  }
+}
+
 function getNavigationKeyCodes(vertical: boolean): [IncrementKeyCode[], DecrementKeyCode[]] {
   if (vertical) {
     return [
@@ -24,6 +48,42 @@ export class TabContainerElement extends HTMLElement {
     return this
   }
 
+  #onTabContainerChange: ((event: TabContainerChangeEvent) => void) | null = null
+  get onTabContainerChange() {
+    return this.#onTabContainerChange
+  }
+
+  set onTabContainerChange(listener: ((event: TabContainerChangeEvent) => void) | null) {
+    if (this.#onTabContainerChange) {
+      this.removeEventListener(
+        'tab-container-change',
+        this.#onTabContainerChange as unknown as EventListenerOrEventListenerObject,
+      )
+    }
+    this.#onTabContainerChange = typeof listener === 'object' || typeof listener === 'function' ? listener : null
+    if (typeof listener === 'function') {
+      this.addEventListener('tab-container-change', listener as unknown as EventListenerOrEventListenerObject)
+    }
+  }
+
+  #onTabContainerChanged: ((event: TabContainerChangeEvent) => void) | null = null
+  get onTabContainerChanged() {
+    return this.#onTabContainerChanged
+  }
+
+  set onTabContainerChanged(listener: ((event: TabContainerChangeEvent) => void) | null) {
+    if (this.#onTabContainerChanged) {
+      this.removeEventListener(
+        'tab-container-changed',
+        this.#onTabContainerChanged as unknown as EventListenerOrEventListenerObject,
+      )
+    }
+    this.#onTabContainerChanged = typeof listener === 'object' || typeof listener === 'function' ? listener : null
+    if (typeof listener === 'function') {
+      this.addEventListener('tab-container-changed', listener as unknown as EventListenerOrEventListenerObject)
+    }
+  }
+
   connectedCallback(): void {
     this.addEventListener('keydown', (event: KeyboardEvent) => {
       const target = event.target
@@ -99,10 +159,11 @@ export class TabContainerElement extends HTMLElement {
     const selectedPanel = panels[index]
 
     const cancelled = !this.dispatchEvent(
-      new CustomEvent('tab-container-change', {
+      new TabContainerChangeEvent('tab-container-change', {
         bubbles: true,
         cancelable: true,
-        detail: {relatedTarget: selectedPanel},
+        tab: selectedTab,
+        panel: selectedPanel,
       }),
     )
     if (cancelled) return
@@ -124,9 +185,10 @@ export class TabContainerElement extends HTMLElement {
     selectedPanel.hidden = false
 
     this.dispatchEvent(
-      new CustomEvent('tab-container-changed', {
+      new TabContainerChangeEvent('tab-container-changed', {
         bubbles: true,
-        detail: {relatedTarget: selectedPanel},
+        tab: selectedTab,
+        panel: selectedPanel,
       }),
     )
   }

test/test.js

@@ -14,6 +14,30 @@ describe('tab-container', function () {
     })
   })
 
+  describe('events', function () {
+    it('has an onTabContainerChange property for the change event', function () {
+      const el = document.createElement('tab-container')
+      let called = false
+      const listener = () => (called = true)
+      el.onTabContainerChange = listener
+      assert.equal(el.onTabContainerChange, listener)
+      assert.equal(called, false)
+      el.dispatchEvent(new Event('tab-container-change'))
+      assert.equal(called, true)
+    })
+
+    it('has an onTabContainerChanged property for the changed event', function () {
+      const el = document.createElement('tab-container')
+      let called = false
+      const listener = () => (called = true)
+      el.onTabContainerChanged = listener
+      assert.equal(el.onTabContainerChanged, listener)
+      assert.equal(called, false)
+      el.dispatchEvent(new Event('tab-container-changed'))
+      assert.equal(called, true)
+    })
+  })
+
   describe('after tree insertion', function () {
     beforeEach(function () {
       document.body.innerHTML = `
@@ -54,7 +78,8 @@ describe('tab-container', function () {
       let counter = 0
       tabContainer.addEventListener('tab-container-changed', event => {
         counter++
-        assert.equal(event.detail.relatedTarget, panels[1])
+        assert.equal(event.tab, tabs[1])
+        assert.equal(event.panel, panels[1])
       })
 
       tabs[1].click()
@@ -112,7 +137,8 @@ describe('tab-container', function () {
       let counter = 0
       tabContainer.addEventListener('tab-container-change', event => {
         counter++
-        assert.equal(event.detail.relatedTarget, panels[1])
+        assert.equal(event.tab, tabs[1])
+        assert.equal(event.panel, panels[1])
         event.preventDefault()
       })
 
@@ -167,7 +193,8 @@ describe('tab-container', function () {
       let counter = 0
       tabContainer.addEventListener('tab-container-changed', event => {
         counter++
-        assert.equal(event.detail.relatedTarget, panels[1])
+        assert.equal(event.tab, tabs[1])
+        assert.equal(event.panel, panels[1])
       })
 
       tabContainer.selectTab(1)