From e1578c69cc49c8e3889e79e63e1298d19ed4623e Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Fri, 8 Mar 2024 10:53:35 +0000
Subject: [PATCH] Add onChange and onChanged alias

---
 custom-elements.json         | 43 ++++++++++++++++++++++++++++++++++++
 src/tab-container-element.ts | 16 ++++++++++++++
 test/test.js                 | 24 ++++++++++++++++++++
 3 files changed, 83 insertions(+)

diff --git a/custom-elements.json b/custom-elements.json
index 480da1b..cc4e786 100644
--- a/custom-elements.json
+++ b/custom-elements.json
@@ -153,6 +153,10 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "onChange"
+            },
             {
               "kind": "field",
               "name": "onTabContainerChange"
@@ -161,6 +165,15 @@
               "kind": "field",
               "name": "onTabContainerChanged"
             },
+            {
+              "kind": "field",
+              "name": "onChanged"
+            },
+            {
+              "kind": "field",
+              "name": "activeTab",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "activePanel",
@@ -179,6 +192,10 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "selectedTabIndex"
+            },
             {
               "kind": "method",
               "name": "selectTab",
@@ -356,6 +373,10 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "onChange"
+            },
             {
               "kind": "field",
               "name": "#onTabContainerChange",
@@ -382,12 +403,22 @@
               "kind": "field",
               "name": "onTabContainerChanged"
             },
+            {
+              "kind": "field",
+              "name": "onChanged"
+            },
             {
               "kind": "field",
               "name": "#tabList",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#tabListTabWrapper",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#beforeTabsSlot",
@@ -424,6 +455,11 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "activeTab",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "activePanel",
@@ -507,6 +543,13 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "selectedTabIndex",
+              "type": {
+                "text": "number"
+              }
+            },
             {
               "kind": "method",
               "name": "selectTab",
diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
index 563e0df..b788a5c 100644
--- a/src/tab-container-element.ts
+++ b/src/tab-container-element.ts
@@ -31,6 +31,14 @@ export class TabContainerElement extends HTMLElement {
     return this
   }
 
+  get onChange() {
+    return this.onTabContainerChange
+  }
+
+  set onChange(listener: ((event: TabContainerChangeEvent) => void) | null) {
+    this.onTabContainerChange = listener
+  }
+
   #onTabContainerChange: ((event: TabContainerChangeEvent) => void) | null = null
   get onTabContainerChange() {
     return this.#onTabContainerChange
@@ -67,6 +75,14 @@ export class TabContainerElement extends HTMLElement {
     }
   }
 
+  get onChanged() {
+    return this.onTabContainerChanged
+  }
+
+  set onChanged(listener: ((event: TabContainerChangeEvent) => void) | null) {
+    this.onTabContainerChanged = listener
+  }
+
   static observedAttributes = ['vertical']
 
   get #tabList() {
diff --git a/test/test.js b/test/test.js
index f8a6a9e..4fc3370 100644
--- a/test/test.js
+++ b/test/test.js
@@ -43,6 +43,30 @@ describe('tab-container', function () {
       el.dispatchEvent(new Event('tab-container-changed'))
       assert.equal(called, true)
     })
+
+    it('has an onChange property that is aliased to onTabContainerChange', function () {
+      const el = document.createElement('tab-container')
+      let called = false
+      const listener = () => (called = true)
+      el.onChange = listener
+      assert.equal(el.onTabContainerChange, listener)
+      assert.equal(el.onChange, listener)
+      assert.equal(called, false)
+      el.dispatchEvent(new Event('tab-container-change'))
+      assert.equal(called, true)
+    })
+
+    it('has an onChanged property that is aliased to onTabContainerChanged', function () {
+      const el = document.createElement('tab-container')
+      let called = false
+      const listener = () => (called = true)
+      el.onChanged = listener
+      assert.equal(el.onTabContainerChanged, listener)
+      assert.equal(el.onChanged, listener)
+      assert.equal(called, false)
+      el.dispatchEvent(new Event('tab-container-changed'))
+      assert.equal(called, true)
+    })
   })
 
   describe('after tree insertion with aria-selected on second tab', function () {