/*! Copyright (c) Safe As Milk. All rights reserved. */import{Animations}from"animations";import{debounce}from"utils";class TabbedContent extends HTMLElement{connectedCallback(){this.tabs=this.querySelectorAll("tab-triggers button"),this.tabPanels=this.querySelectorAll("tab-panel"),this.tabList=this.querySelector("tab-triggers"),this.currentTab=Array.from(this.tabs).find(el=>el.getAttribute("aria-selected")==="true"),this.currentTabIndex=Array.from(this.tabs).findIndex(el=>el.getAttribute("aria-selected")==="true"),this.tabs.forEach(tab=>{tab.addEventListener("click",e=>this.openTab(e.target.id))}),this.tabList.addEventListener("keydown",e=>{(e.key==="ArrowRight"||e.key==="ArrowLeft")&&(this.tabs[this.currentTabIndex].setAttribute("tabindex",-1),e.key==="ArrowRight"?(this.currentTabIndex+=1,this.currentTabIndex>=this.tabs.length&&(this.currentTabIndex=0)):e.key==="ArrowLeft"&&(this.currentTabIndex-=1,this.currentTabIndex<0&&(this.currentTabIndex=this.tabs.length-1)),this.tabs[this.currentTabIndex].setAttribute("tabindex",0),this.tabs[this.currentTabIndex].focus())})}openTab(id){if(this.currentTab.id===id)return;this.currentTab=Array.from(this.tabs).find(t=>t.id===id),this.tabList.querySelectorAll('[aria-selected="true"]').forEach(t=>{t.setAttribute("aria-selected",!1),t.setAttribute("tabindex","-1")}),this.currentTab.setAttribute("aria-selected",!0),this.currentTab.setAttribute("tabindex","0"),Array.from(this.tabPanels).forEach(p=>{p.setAttribute("hidden",!0);const animationElement=p.querySelector(".js-animate-sequence");Animations.resetAnimations(animationElement)}),this.querySelector(`#${this.currentTab.getAttribute("aria-controls")}`).removeAttribute("hidden")}}customElements.define("tabbed-content",TabbedContent);class TabTriggers extends HTMLElement{#triggersObserver;constructor(){super(),this.#triggersObserver=null,this.alignItems=this.parentElement.getAttribute("align-items")||"left"}connectedCallback(){this.#initTriggersObserver(),this.#initLinkUpdate(),new ResizeObserver(debounce(()=>{this.#updateControls()},50)).observe(this)}#initTriggersObserver(){const callback=mutationList=>{mutationList.forEach(mutation=>{mutation.type==="attributes"&&mutation.attributeName==="aria-selected"&&mutation.target.getAttribute("aria-selected","true")&&this.#moveToSelected()})};this.#triggersObserver=new MutationObserver(callback)}#initLinkUpdate(){const triggers=this.querySelectorAll("button"),anchor=this.closest(".section").querySelector(".js-update-link");anchor&&Array.from(triggers).forEach(trigger=>{trigger.addEventListener("click",()=>{const link=trigger.dataset.updateLink;link&&anchor.setAttribute("href",link)})})}#moveToSelected(){if(!["left","center"].includes(this.alignItems))return;const selected=this.querySelector('[aria-selected="true"]'),paddingLeft=Number(window.getComputedStyle(this).paddingLeft.replace("px",""));if(selected){const newPosition=this.alignItems==="left"?selected.offsetLeft-paddingLeft:selected.offsetLeft-(this.offsetWidth-selected.offsetWidth)/2;this.scrollTo({left:newPosition,behavior:"smooth"})}}#updateControls(){if(this.scrollWidth>this.offsetWidth){const triggers=this.querySelectorAll("button");Array.from(triggers).forEach(trigger=>{this.#triggersObserver.observe(trigger,{attributes:!0,childList:!1,subtree:!1})}),this.#moveToSelected()}else this.#triggersObserver.disconnect()}}customElements.define("tab-triggers",TabTriggers);
//# sourceMappingURL=/cdn/shop/t/100/assets/tabbed-content.js.map?v=175922217864836671761751575325