JezK

Edit File: sc-tab-group.entry.js.map

{"file":"sc-tab-group.entry.js","mappings":"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","names":[],"sources":["src/components/ui/tab-group/sc-tab-group.scss?tag=sc-tab-group&encapsulation=shadow","src/components/ui/tab-group/sc-tab-group.tsx"],"sourcesContent":[":host {\n display: block;\n --sc-tabs-min-width: 225px;\n}\n\n$mobile-size: 750px;\n\n.tab-group {\n display: flex;\n flex-wrap: wrap;\n position: relative;\n border: solid 1px transparent;\n border-radius: 0;\n flex-direction: row;\n\n @media screen and (min-width: $mobile-size) {\n flex-wrap: nowrap;\n }\n\n &__tabs {\n display: flex;\n flex-wrap: wrap;\n flex: 0 0 auto;\n flex-direction: column;\n margin-bottom: var(--sc-spacing-xx-large);\n }\n\n &__nav-container {\n order: 1;\n flex: 1 0 100%;\n\n @media screen and (min-width: $mobile-size) {\n min-width: var(--sc-tabs-min-width);\n flex: 0 1 auto;\n }\n }\n\n &__body {\n flex: 1 1 auto;\n order: 2;\n\n @media screen and (min-width: $mobile-size) {\n padding: 0 var(--sc-spacing-xx-large);\n }\n }\n\n}\n\n::slotted(sc-tab) {\n margin-bottom: var(--sc-spacing-xx-small);\n}\n","import { Component, h, Element, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sc-tab-group',\n styleUrl: 'sc-tab-group.scss',\n shadow: true,\n})\nexport class ScTabGroup {\n @Element() el: HTMLScTabGroupElement;\n @State() activeTab: HTMLScTabElement;\n\n private tabs: HTMLScTabElement[] = [];\n private panels: HTMLScTabPanelElement[] = [];\n\n @Event() scTabHide: EventEmitter<string>;\n @Event() scTabShow: EventEmitter<string>;\n\n private mutationObserver: MutationObserver;\n\n componentDidLoad() {\n this.syncTabsAndPanels();\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab() || this.tabs[0], { emitEvents: false });\n\n this.mutationObserver = new MutationObserver(() => {\n this.syncTabsAndPanels();\n });\n this.mutationObserver.observe(this.el, { attributes: true, childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n }\n\n syncTabsAndPanels() {\n this.tabs = this.getAllTabs();\n this.panels = this.getAllPanels();\n }\n\n setAriaLabels() {\n // Link each tab with its corresponding panel\n this.tabs.map(tab => {\n const panel = this.panels.find(el => el.name === tab.panel) as HTMLScTabPanelElement;\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id') as string);\n panel.setAttribute('aria-labelledby', tab.getAttribute('id') as string);\n }\n });\n }\n\n handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('sc-tab') as HTMLScTabElement;\n const tabGroup = tab?.closest('sc-tab-group') as HTMLScTabGroupElement;\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.el) {\n return;\n }\n\n if (tab) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('sc-tab') as HTMLScTabElement;\n const tabGroup = tab?.closest('sc-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.el) {\n return true;\n }\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n if (tab) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n }\n }\n\n // Move focus left or right\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = document.activeElement as HTMLScTabElement;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'sc-tab') {\n let index = this.tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = this.tabs.length - 1;\n } else if (event.key === 'ArrowUp') {\n index = Math.max(0, index - 1);\n } else if (event.key === 'ArrowDown') {\n index = Math.min(this.tabs.length - 1, index + 1);\n }\n\n this.tabs[index].triggerFocus({ preventScroll: true });\n\n event.preventDefault();\n }\n }\n }\n\n /** Handle the active tabl selection */\n setActiveTab(tab: HTMLScTabElement, options?: { emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }) {\n options = Object.assign(\n {\n emitEvents: true,\n scrollBehavior: 'auto',\n },\n options,\n );\n\n if (tab && tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n this.tabs.map(el => (el.active = el === this.activeTab));\n this.panels.map(el => (el.active = el.name === this.activeTab.panel));\n\n // Emit events\n if (options.emitEvents) {\n if (previousTab) {\n this.scTabHide.emit(previousTab.panel);\n }\n this.scTabShow.emit(this.activeTab.panel);\n }\n }\n }\n\n getActiveTab() {\n const tabs = this.getAllTabs();\n return tabs.find(el => el.active);\n }\n\n getAllChildren() {\n const slots = this.el.shadowRoot.querySelectorAll('slot') as NodeListOf<HTMLSlotElement>;\n const tags = ['sc-tab', 'sc-tab-panel'];\n const allSlots = Array.from(slots)\n .map(slot => slot?.assignedElements?.({ flatten: true }))\n .flat();\n return allSlots\n .reduce((all: HTMLElement[], el: HTMLElement) => all.concat(el, [...(el?.querySelectorAll?.('*') || [])] as HTMLElement[]), [])\n .filter((el: HTMLElement) => tags.includes(el?.tagName?.toLowerCase?.())) as HTMLElement[];\n }\n\n /** Get all child tabs */\n getAllTabs(includeDisabled = false) {\n return this.getAllChildren().filter((el: any) => {\n return includeDisabled ? el.tagName.toLowerCase() === 'sc-tab' : el.tagName.toLowerCase() === 'sc-tab' && !el.disabled;\n }) as HTMLScTabElement[];\n }\n\n /** Get all child panels */\n getAllPanels() {\n return this.getAllChildren().filter((el: any) => el.tagName.toLowerCase() === 'sc-tab-panel') as [HTMLScTabPanelElement];\n }\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'tab-group': true,\n }}\n onClick={e => this.handleClick(e)}\n onKeyDown={e => this.handleKeyDown(e)}\n >\n <div class=\"tab-group__nav-container\" part=\"nav\">\n <div class=\"tab-group__nav\">\n <div part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <slot onSlotchange={() => this.syncTabsAndPanels()} name=\"nav\"></slot>\n </div>\n </div>\n </div>\n <div part=\"body\" class=\"tab-group__body\">\n <slot onSlotchange={() => this.syncTabsAndPanels()} />\n </div>\n </div>\n );\n }\n}\n"],"version":3}