Merge pull request #86 from github/add-on-change-d-alias

Add onChange and onChanged alias

Author: owenniblock

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",

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

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