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 () {

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/github/tab-container-element/compare/github:984ef06...github:3c74546.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/github/tab-container-element/compare/github:984ef06...github:3c74546.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/github/tab-container-element/compare/github:984ef06...github:3c74546.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/github/tab-container-element/compare/github:984ef06...github:3c74546.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>