feat(ld-tabs): add methods for switching tabs

src/liquid/components/ld-tabs/ld-tab/ld-tab.tsx

@@ -35,7 +35,7 @@ export class LdTab {
   @Prop() disabled?: boolean
 
   /**
-   * asdf
+   * Focuses the tab
    */
   @Method()
   async focusTab() {
@@ -47,14 +47,10 @@ export class LdTab {
    */
   @Event() tabSelect: EventEmitter<string>
 
-  private handleTabClick(ev) {
-    ev.preventDefault()
+  private handleTabClick(event: MouseEvent) {
+    event.preventDefault()
 
-    if (this.disabled) return
-
-    if (ev.currentTarget.getAttribute('aria-selected')) return
-
-    this.selected = true
+    this.select()
   }
 
   @Watch('selected')
@@ -64,6 +60,16 @@ export class LdTab {
     this.tabSelect.emit()
   }
 
+  /** Set selected tab to a certain index */
+  @Method()
+  async select() {
+    if (this.disabled) return
+
+    if (this.btnRef.getAttribute('aria-selected')) return
+
+    this.selected = true
+  }
+
   render() {
     return (
       <button

src/liquid/components/ld-tabs/ld-tabs.tsx

@@ -1,5 +1,14 @@
 import '../../components' // type definitions for type checks and intelliSense
-import { Component, Element, Event, EventEmitter, h, Host } from '@stencil/core'
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+} from '@stencil/core'
+import { LdTab } from './ld-tab/ld-tab'
 
 let tabsCount = 0
 
@@ -41,16 +50,30 @@ export class LdTabs {
   }
 
   private handleTabSelect(ev) {
-    const index = Array.prototype.indexOf.call(
-      this.el.querySelector('ld-tablist').children,
-      ev.target
-    )
-
     ev.stopImmediatePropagation()
     const currentLdTab = ev.target
     this.updateTabs(currentLdTab)
     this.updateTabPanels(currentLdTab.id)
-    this.tabChange.emit(index)
+    this.tabChange.emit(currentLdTab.id)
+  }
+
+  /** Set selected tab to a certain index */
+  @Method()
+  async switchTab(identifier: number | string) {
+    const newActiveTab =
+      typeof identifier === 'number'
+        ? this.el.querySelectorAll('ld-tab')[identifier]
+        : this.el.querySelector(`ld-tab#${identifier}`)
+
+    if (!newActiveTab) {
+      throw new Error(
+        `Could not find ld-tab with ${
+          typeof identifier === 'number' ? 'index' : 'id'
+        } ${typeof identifier === 'number' ? identifier : `"${identifier}"`}.`
+      )
+    }
+
+    ;((newActiveTab as unknown) as LdTab).select()
   }
 
   componentDidRender() {

src/liquid/components/ld-tabs/readme.md

@@ -248,7 +248,7 @@ The `ld-tabs` component emits the `tabChange` event which you can use to bind cu
 
 There are two ways to programmatically select a tab: 
 
-1. By dispatching a `click` event on the respective element with `role="tab"`:
+1. By using the `switchTab`-method exposed by the `ld-tabs` element:
 
 {% example %}
 <ld-tabs id="tabs_programmatic_1">
@@ -279,13 +279,15 @@ There are two ways to programmatically select a tab:
 <ld-button id="nuts_button_1">Select nuts</ld-button>
 
 <script>
-document.getElementById('nuts_button_1').addEventListener('click', ev => {
-  document.getElementById('tabs_programmatic_1').querySelectorAll('ld-tab')[2].dispatchEvent(new Event('click'))
-})
+  document.getElementById('nuts_button_1').addEventListener('click', async (ev) => {
+    await document.getElementById('tabs_programmatic_1').switchTab(2)
+
+    console.log(`Tab successfully set to tab at index 2 using ld-tabs' "switchTab"-method.`)
+  })
 </script>
 {% endexample %}
 
-2. By updating the `selected` prop on the `ld-tab` components:
+2. By using the `select`-method exposed by the `ld-tab` element:
 
 {% example %}
 <ld-tabs id="tabs_programmatic_2">
@@ -316,10 +318,11 @@ document.getElementById('nuts_button_1').addEventListener('click', ev => {
 <ld-button id="nuts_button_2">Select nuts</ld-button>
 
 <script>
-document.getElementById('nuts_button_2').addEventListener('click', ev => {
-  document.getElementById('tabs_programmatic_2').querySelector('ld-tab[selected]').removeAttribute('selected')
-  document.getElementById('tabs_programmatic_2').querySelectorAll('ld-tab')[2].setAttribute('selected', 'true')
-})
+  document.getElementById('nuts_button_2').addEventListener('click', async (ev) => {
+    await document.getElementById('tabs_programmatic_2').querySelectorAll('ld-tab')[2].select()
+
+    console.log(`Tab successfully set to tab at index 2 using ld-tab's "select"-method.`)
+  })
 </script>
 {% endexample %}
 
@@ -342,6 +345,19 @@ document.getElementById('nuts_button_2').addEventListener('click', ev => {
 | `tabChange` | Emitted with the id of the selected tab. | `CustomEvent<string>` |
 
 
+## Methods
+
+### `switchTab(identifier: number | string) => Promise<void>`
+
+Set selected tab to a certain index
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ----------------------------------------------