@oslokommune/punkt-elements 13.8.0 → 13.9.0

package/src/components/tabs/tabs.ts

@@ -0,0 +1,103 @@
+import { PktElement } from '@/base-elements/element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { html, PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { provide } from '@lit/context'
+import { createRef, Ref, ref } from 'lit/directives/ref.js'
+import { tabsContext, type TabsContext } from './tabs-context'
+
+export interface IPktTabs {
+  arrowNav?: boolean
+  disableArrowNav?: boolean
+}
+
+@customElement('pkt-tabs')
+export class PktTabs extends PktElement<IPktTabs> implements IPktTabs {
+  @property({ type: Boolean, reflect: true, attribute: 'arrow-nav' }) arrowNav: boolean = true
+  @property({ type: Boolean, reflect: true, attribute: 'disable-arrow-nav' })
+  disableArrowNav: boolean = false
+
+  @state() private tabRefs: Array<HTMLAnchorElement | HTMLButtonElement | null> = []
+  @state() private tabCount: number = 0
+
+  private get useArrowNav(): boolean {
+    return this.arrowNav && !this.disableArrowNav
+  }
+
+  defaultSlot: Ref<HTMLElement> = createRef()
+  slotController!: PktSlotController
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  // Provide context to child tab items
+  @provide({ context: tabsContext })
+  @state()
+  private context: TabsContext = {
+    useArrowNav: this.useArrowNav,
+    registerTab: this.registerTab.bind(this),
+    handleClick: this.handleClick.bind(this),
+    handleKeyUp: this.handleKeyUp.bind(this),
+  }
+
+  // Update context when properties change
+  updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('arrowNav') || changedProperties.has('disableArrowNav')) {
+      this.context = {
+        ...this.context,
+        useArrowNav: this.useArrowNav,
+      }
+    }
+  }
+
+  private registerTab(element: HTMLElement, index: number) {
+    this.tabRefs[index] = element as HTMLAnchorElement | HTMLButtonElement
+    this.tabCount = Math.max(this.tabCount, index + 1)
+  }
+
+  private handleClick(index: number) {
+    this.dispatchEvent(
+      new CustomEvent('tab-selected', {
+        detail: { index },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private handleKeyUp(keyEvent: KeyboardEvent, index: number) {
+    if (!this.useArrowNav) return
+
+    if (keyEvent.code === 'ArrowLeft' && index !== 0) {
+      this.tabRefs[index - 1]?.focus()
+    }
+
+    if (keyEvent.code === 'ArrowRight' && index < this.tabCount - 1) {
+      this.tabRefs[index + 1]?.focus()
+    }
+
+    if (keyEvent.code === 'ArrowDown' || keyEvent.code === 'Space') {
+      this.dispatchEvent(
+        new CustomEvent('tab-selected', {
+          detail: { index },
+          bubbles: true,
+          composed: true,
+        }),
+      )
+    }
+  }
+
+  render() {
+    const role = this.useArrowNav ? 'tablist' : 'navigation'
+
+    return html`
+      <div class="pkt-tabs">
+        <div class="pkt-tabs__list" role=${role} ${ref(this.defaultSlot)}></div>
+      </div>
+    `
+  }
+}
+
+export default PktTabs