https://www.cine-craft.de/cdn/shop/t/50/assets/component-tabs.js?v=159431986472231257911791384139

1customElements.get("custom-tabs")||customElements.define("custom-tabs",class extends HTMLElement{constructor(){super(),this._boundClickHandler=this._onTabClick.bind(this),this._boundKeyHandler=this._onKeydown.bind(this),this._boundScrollHandler=throttle(this._onScroll.bind(this),100),this._boundUserScrollIntentHandler=this._clearScrollTarget.bind(this),this._onOpenStickyHeaderHandler=this._onOpenStickyHeader.bind(this),this._onCloseStickyHeaderHandler=this._onCloseStickyHeader.bind(this),this._onToggleNavStickyHeaderHandler=this._onToggleNavStickyHeader.bind(this),this.panelBounds=[],this._pendingLayoutFrame=null,this._isStickyHeaderOpen=!1,this._scrollTargetPanelId=null}connectedCallback(){this.mode=this.dataset.mode||"tabbed",this.sticky=this.dataset.sticky==="true",this.tablist=this.querySelector('[role="tablist"]'),this.tabs=Array.from(this.querySelectorAll('[role="tab"]')),this.panels=Array.from(this.querySelectorAll('[role="tabpanel"]')),this.delta=50,this.offsetNavigation=0,this.offsetScroll=this.offsetNavigation+this.delta,this.tabs.forEac

1h(tab=>{tab.addEventListener("click",this._boundClickHandler)}),this.tablist&&this.tablist.addEventListener("keydown",this._boundKeyHandler),this.mode==="scroll"&&(this.stickHeader=document.querySelector("sticky-header"),window.addEventListener("scroll",this._boundScrollHandler,{passive:!0}),window.addEventListener("wheel",this._boundUserScrollIntentHandler,{passive:!0}),window.addEventListener("touchstart",this._boundUserScrollIntentHandler,{passive:!0}),window.addEventListener("pointerdown",this._boundUserScrollIntentHandler,{passive:!0}),window.addEventListener("keydown",this._boundUserScrollIntentHandler),this.sticky&&(document.addEventListener("openStickyHeader",this._onOpenStickyHeaderHandler),document.addEventListener("closeStickyHeader",this._onCloseStickyHeaderHandler),document.addEventListener("toggleNavInSticky",this._onToggleNavStickyHeaderHandler))),this.setupWindowResize(),this.mode==="scroll"&&(this._scheduleLayoutMetricsUpdate(),setTimeout(()=>this._scheduleLayoutMetricsUpdate(),500))}disconnectedCallback(){this.tabs?.forEach(tab=>{tab.removeEventListener("click",this._boundClickHandler)}),this.tablist&&this.tablist.removeEventListener("keydown",this._boundKeyHandler),this.mode==="scroll"&&(window.removeEventListener("scroll",this._boundScrollHandler),window.removeEventListener("wheel",this._boundUserScrollIntentHandler),window.removeEventListener("touchstart",this._boundUserScrollIntentHandler),window.removeEventListener("pointerdown",this._boundUserScrollIntentHandler),window.removeEventListener("keydown",this._boundUserScrollIntentHandler),this.sticky&&(document.removeEventListener("openStickyHeader",this._onOpenStickyHeaderHandler),document.removeEventListener("closeStickyHeader",this._onCloseStickyHeaderHandler),document.removeEventListener("toggleNavInSticky",this._onToggleNavStickyHeaderHandler))),window.removeEventListener("resize",this._debouncedOnWindowResize),this._pendingLayoutFrame&&(cancelAnimationFrame(this._pendingLayoutFrame),this._pendingLayoutFrame=null)}setupWindowResize(){this._debouncedOnWindowResize=debounce(event=>{this._onWindowResize(event)},1e3),window.addEventListener("resize",this._debouncedOnWindowResize,!1)}_onWindowResize(){this._scheduleLayoutMetricsUpdate()}_setOffsetNavigation(nextOffsetNavigation){nextOffsetNavigation!==this.offsetNavigation&&(this.offsetNavigation=nextOffsetNavigation,this.style.setProperty("--offset-navigation",`${this.offsetNavigation}px`))}_measurePanelBounds(){return this.panels.map(panel=>{const rect=panel.getBoundingClientRect(),top=rect.top+window.scrollY;return{id:panel.id,top,bottom:top+rect.height}})}_getPanelBoundById(panelId){return this.panelBounds.find(panelBound=>panelBound.id===panelId)}_isPanelInViewport(panelBound){if(!panelBound)return!1;const viewportTop=window.scrollY+this.offsetNavigation,viewportBottom=window.scrollY+window.innerHeight;return panelBound.bottom>viewportTop&&panelBound.top<viewportBottom}_setActiveTabByPanelId(panelId){const matchingTab=this.tabs.find(tab=>tab.getAttribute("aria-controls")===panelId);matchingTab&&matchingTab.getAttribute("aria-selected")!=="true"&&(this.tabs.forEac

1h(t=>t.setAttribute("aria-selected","false")),matchingTab.setAttribute("aria-selected","true"))}_clearScrollTarget(event){event?.type==="keydown"&&!["ArrowUp","ArrowDown","PageUp","PageDown","Home","End"," "].includes(event.key)||(this._scrollTargetPanelId=null)}_updateLayoutMetrics(){if(this.mode!=="scroll")return;const nextOffsetNavigation=this.sticky&&this.tablist?this.tablist.offsetHeight:0,nextPanelBounds=this._measurePanelBounds();this.panelBounds=nextPanelBounds,this._setOffsetNavigation(nextOffsetNavigation),this._isStickyHeaderOpen||(this.offsetScroll=this.offsetNavigation+this.delta)}_scheduleLayoutMetricsUpdate(){this._pendingLayoutFrame||(this._pendingLayoutFrame=requestAnimationFrame(()=>{this._pendingLayoutFrame=null,this._updateLayoutMetrics()}))}selectTab(tab){const targetPanelId=tab.getAttribute("aria-controls"),targetPanel=this.querySelector(`#${targetPanelId}`);this.mode==="scroll"&&targetPanel&&(this.timeoutStickyHeader&&clearTimeout(this.timeoutStickyHeader),this._updateLayoutMetrics(),this._scrollTargetPanelId=targetPanelId,this.setStickyHeaderPreventHide(!0),requestAnimationFrame(()=>{targetPanel.scrollIntoView({behavior:"smooth",block:"start"})}),this.timeoutStickyHeader=setTimeout(()=>{this.setStickyHeaderPreventHide(!1)}

1,1e3)),this.tabs.forEach(t=>{t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1")}),tab.setAttribute("aria-selected","true"),tab.removeAttribute("tabindex"),this.mode==="tabbed"&&(this.panels.forEach(p=>p.classList.remove("active")),targetPanel&&targetPanel.classList.add("active"))}setStickyHeaderPreventHide(value){this.stickHeader&&this.stickHeader.dataset.stickyType!="always"&&this.stickHeader.openStatus&&this.stickHeader.setPreventHide(value)}_onOpenStickyHeader(e){this._isStickyHeaderOpen=!0,window.innerWidth<989?this.offsetScroll=this.offsetNavigation+e.detail.headerHeight:(this.offsetScroll=this.offsetNavigation+e.detail.headerHeight-10,e.detail.toggleNav||(this.offsetScroll-=e.detail.navHeight)),this.offsetScroll+=this.delta}_onCloseStickyHeader(){this._isStickyHeaderOpen=!1,this.offsetScroll=this.offsetNavigation+this.delta}_onToggleNavStickyHeader(e){this._isStickyHeaderOpen=!0,this.offsetScroll=this.offsetNavigation+e.detail.headerHeight-10,e.detail.toggleNav||(this.offsetScroll-=e.detail.navHeight)}_onTabClick(event){this.selectTab(event.currentTarget)}_onKeydown(e){const currentTab=document.activeElement;if(!this.tabs.includes(currentTab))return;let newTab;e.key==="ArrowRight"?newTab=currentTab.parentElement.nextElementSibling.querySelector('[role="tab"]')||this.tabs[0]:e.key==="ArrowLeft"&&(newTab=currentTab.parentElement.previousElementSibling.querySelector('[role="tab"]')||this.tabs[this.tabs.length-1]),newTab&&(newTab.focus(),this.selectTab(newTab),e.preventDefault())}_onScroll(){if(!this.panelBounds.length){this._scheduleLayoutMetricsUpdate();return}const anchorLine=window.scrollY+this.offsetScroll;let activePanel=null;if(this._scrollTargetPanelId){const scrollTargetPanel=this._getPanelBoundById(this._scrollTargetPanelId);if(this._isPanelInViewport(scrollTargetPanel)){this._setActiveTabByPanelId(this._scrollTargetPanelId);return}this._scrollTargetPanelId=null}for(const panelBound of this.panelBounds)if(panelBound.top<=anchorLine&&panelBound.bottom>anchorLine){activePanel=panelBound;break}activePanel?this._setActiveTabByPanelId(activePanel.id):this._scheduleLayoutMetricsUpdate()}});
2//# sourceMappingURL=/cdn/shop/t/50/assets/component-tabs.js.map?v=159431986472231257911791384139