import{Component}from"@theme/component";import{onDocumentLoaded,changeMetaThemeColor,setHeaderMenuStyle,calculateHeaderGroupHeight}from"@theme/utilities";import{getScrollTop,getScrollEventTarget,scrollContainerMediaQuery}from"@theme/scroll-container";class HeaderComponent extends Component{requiredRefs=["headerDrawerContainer","headerMenu","headerRowTop","mobileMenuToggle","mobileMenuDrawer","mobileMenuClose","mobileMenuOverlay","mobileMenuBody"];#menuDrawerHiddenWidth=null;#height=0;#metaThemeColorInitialized=!1;#scrollContainer=null;#lastScrollTop=0;#timeout=null;#scrollRafId=null;#animationDelay=150;#scrollThreshold=8;#resizeObserver=new ResizeObserver(([entry])=>{if(!entry)return;const height=(Array.isArray(entry.borderBoxSize)?entry.borderBoxSize[0]:entry.borderBoxSize)?.blockSize??entry.contentRect.height;if(height){if(!this.#metaThemeColorInitialized){const scrollTop=this.#getScrollTop();this.dataset.themeColor&&changeMetaThemeColor(this.dataset.themeColor),this.#metaThemeColorInitialized=!0,this.#updateScrollState(scrollTop)}this.#height=height,document.body.style.setProperty("--header-height",`${height}px`),this.#menuDrawerHiddenWidth&&window.innerWidth>this.#menuDrawerHiddenWidth&&this.#updateMenuVisibility(!1)}});#getScrollTop=()=>Math.max(0,getScrollTop());#clearHideTimeout=()=>{this.#timeout&&(clearTimeout(this.#timeout),this.#timeout=null)};#setStickyPresentation=(stickyState,scrollDirection)=>{const stateChanged=this.dataset.stickyState!==stickyState,directionChanged=this.dataset.scrollDirection!==scrollDirection;stateChanged&&(this.dataset.stickyState=stickyState,this.#metaThemeColorInitialized&&this.dataset.themeColor&&changeMetaThemeColor(this.dataset.themeColor)),directionChanged&&(this.dataset.scrollDirection=scrollDirection)};#updateAlwaysStickyState=scrollTop=>{const hasScrolled=scrollTop>this.#scrollThreshold,isScrollingUp=scrollTop<this.#lastScrollTop;this.removeAttribute("data-animating"),this.#clearHideTimeout(),this.#setStickyPresentation(hasScrolled?"active":"inactive",hasScrolled?isScrollingUp?"up":"down":"none"),this.#lastScrollTop=scrollTop};#updateScrollUpStickyState=scrollTop=>{const headerHeight=this.getBoundingClientRect().height,hasScrolled=scrollTop>this.#scrollThreshold,hasPassedHeader=scrollTop>headerHeight,isScrollingUp=scrollTop<this.#lastScrollTop;if(!hasScrolled||!hasPassedHeader){this.removeAttribute("data-animating"),this.#clearHideTimeout(),this.#setStickyPresentation("inactive","none"),this.#lastScrollTop=scrollTop;return}if(isScrollingUp){this.removeAttribute("data-animating"),this.#clearHideTimeout(),this.#setStickyPresentation("active","up"),this.#lastScrollTop=scrollTop;return}this.dataset.stickyState==="active"?(this.setAttribute("data-animating",""),this.#setStickyPresentation("active","none"),this.#clearHideTimeout(),this.#timeout=setTimeout(()=>{this.#setStickyPresentation("idle","none"),this.removeAttribute("data-animating")},this.#animationDelay)):this.#setStickyPresentation("idle","none"),this.#lastScrollTop=scrollTop};#handleOverflowMinimum=event=>{this.#updateMenuVisibility(event.detail.minimumReached)};#updateMenuVisibility(hideMenu){if(hideMenu)this.#menuDrawerHiddenWidth=window.innerWidth;else{this.#menuDrawerHiddenWidth=null;const overflowList=this.querySelector("overflow-list");overflowList&&overflowList.removeAttribute("minimum-reached")}setHeaderMenuStyle()}#handleBreakpointChange=()=>{this.getAttribute("sticky")&&(this.#scrollContainer&&(this.#scrollContainer.removeEventListener("scroll",this.#handleWindowScroll),this.#scrollContainer=getScrollEventTarget(),this.#scrollContainer.addEventListener("scroll",this.#handleWindowScroll,{passive:!0})),this.#lastScrollTop=this.#getScrollTop())};#handleWindowScroll=()=>{this.#scrollRafId===null&&(this.#scrollRafId=requestAnimationFrame(()=>{this.#scrollRafId=null,this.#updateScrollState()}))};#updateScrollState=(scrollTop=this.#getScrollTop())=>{const stickyMode=this.getAttribute("sticky");if(stickyMode==="always"){this.#updateAlwaysStickyState(scrollTop);return}stickyMode==="scroll-up"&&this.#updateScrollUpStickyState(scrollTop)};#openMobileMenu=()=>{const drawer=Array.isArray(this.refs.mobileMenuDrawer)?this.refs.mobileMenuDrawer[0]:this.refs.mobileMenuDrawer;drawer&&drawer.setAttribute("open",""),document.body.classList.add("overflow-hidden");const dynamicContent=document.querySelector("[data-mobile-menu-content]"),body=Array.isArray(this.refs.mobileMenuBody)?this.refs.mobileMenuBody[0]:this.refs.mobileMenuBody;dynamicContent&&body&&!body.contains(dynamicContent)&&body.appendChild(dynamicContent)};#closeMobileMenu=()=>{const drawer=Array.isArray(this.refs.mobileMenuDrawer)?this.refs.mobileMenuDrawer[0]:this.refs.mobileMenuDrawer;drawer&&drawer.removeAttribute("open"),document.body.classList.remove("overflow-hidden")};connectedCallback(){super.connectedCallback();const initialHeight=parseFloat(document.body.style.getPropertyValue("--header-height"));!this.#height&&initialHeight&&(this.#height=initialHeight),this.#resizeObserver.observe(this.refs.headerRowTop),this.#height&&document.body.style.setProperty("--header-height",`${this.#height}px`),this.addEventListener("overflowMinimum",this.#handleOverflowMinimum);const stickyMode=this.getAttribute("sticky");stickyMode&&((stickyMode==="scroll-up"||stickyMode==="always")&&(this.#scrollContainer=getScrollEventTarget(),this.#scrollContainer.addEventListener("scroll",this.#handleWindowScroll,{passive:!0})),scrollContainerMediaQuery.addEventListener("change",this.#handleBreakpointChange));const toggle=Array.isArray(this.refs.mobileMenuToggle)?this.refs.mobileMenuToggle[0]:this.refs.mobileMenuToggle,close=Array.isArray(this.refs.mobileMenuClose)?this.refs.mobileMenuClose[0]:this.refs.mobileMenuClose,overlay=Array.isArray(this.refs.mobileMenuOverlay)?this.refs.mobileMenuOverlay[0]:this.refs.mobileMenuOverlay;toggle?.addEventListener("click",this.#openMobileMenu),close?.addEventListener("click",this.#closeMobileMenu),overlay?.addEventListener("click",this.#closeMobileMenu)}disconnectedCallback(){super.disconnectedCallback(),this.#resizeObserver.disconnect(),this.#clearHideTimeout(),this.removeEventListener("overflowMinimum",this.#handleOverflowMinimum),scrollContainerMediaQuery.removeEventListener("change",this.#handleBreakpointChange),this.#scrollContainer?.removeEventListener("scroll",this.#handleWindowScroll),this.#scrollContainer=null;const toggle=Array.isArray(this.refs.mobileMenuToggle)?this.refs.mobileMenuToggle[0]:this.refs.mobileMenuToggle,close=Array.isArray(this.refs.mobileMenuClose)?this.refs.mobileMenuClose[0]:this.refs.mobileMenuClose,overlay=Array.isArray(this.refs.mobileMenuOverlay)?this.refs.mobileMenuOverlay[0]:this.refs.mobileMenuOverlay;toggle?.removeEventListener("click",this.#openMobileMenu),close?.removeEventListener("click",this.#closeMobileMenu),overlay?.removeEventListener("click",this.#closeMobileMenu),document.body.classList.remove("overflow-hidden"),this.#scrollRafId!==null&&(cancelAnimationFrame(this.#scrollRafId),this.#scrollRafId=null),queueMicrotask(()=>{this.isConnected||document.body.style.setProperty("--header-height","0px")})}}customElements.get("header-component")||customElements.define("header-component",HeaderComponent),onDocumentLoaded(()=>{const header=document.querySelector("header-component"),headerGroup=document.querySelector("#header-group");if(headerGroup){const resizeObserver=new ResizeObserver(()=>{const headerGroupHeight=calculateHeaderGroupHeight(header,headerGroup),roundedHeaderGroupHeight=Math.round(headerGroupHeight);document.body.style.setProperty("--header-group-height",`${roundedHeaderGroupHeight}px`)});header instanceof HTMLElement&&resizeObserver.observe(header);const children=headerGroup.children;for(let i=0;i<children.length;i++){const element=children[i];element instanceof HTMLElement&&resizeObserver.observe(element)}new MutationObserver(mutations=>{for(const mutation of mutations)if(mutation.type==="childList"){const children2=headerGroup.children;for(let i=0;i<children2.length;i++){const element=children2[i];element instanceof HTMLElement&&resizeObserver.observe(element)}}}).observe(headerGroup,{childList:!0})}});
//# sourceMappingURL=/cdn/shop/t/35/assets/gco-header.js.map?v=45044670027472659441792175355