/*! Copyright (c) Safe As Milk. All rights reserved. */import{debounce}from"utils";import ItemsScroll from"items-scroll";class ItemsScrollPagedNavigation extends ItemsScroll{#boundItemsScroll;#boundHandleStateChange;#boundPageNavigationClick;#controlsListenersEnabled=!1;#itemAtScrollIndex;#navigationPagesAmount;#resizeObserver;#ticking=!1;constructor(){super(),this.pageNavigationWrapper=null,this.navigationCounterOnly=this.hasAttribute("mobile-counter-only"),this.navigationCounterSeparator="/",this.navigationCounterShowForPagesAmount=7,this.navigationCounterShowUpToContainerSize=768,this.#boundItemsScroll=this.#handleItemsScroll.bind(this),this.#boundHandleStateChange=this.#handleStateChange.bind(this),this.#boundPageNavigationClick=this.#handlePageNavigationClick.bind(this)}connectedCallback(){super.connectedCallback(),this.#setPageNavigationState(),this.#resizeObserver=new ResizeObserver(debounce(()=>{this.#updatePageNavigationList()}),50),this.#resizeObserver.observe(this.items),this.addEventListener("on:items-scroll:change-state",this.#boundHandleStateChange),this.pageNavigationContainer&&this.pageNavigationContainer.addEventListener("click",this.#handlePageNavigationClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("on:items-scroll:change-state",this.#boundHandleStateChange),this.#resizeObserver&&(this.#resizeObserver.disconnect(),this.#resizeObserver=null),this.#disableControlsListeners()}#enableControlsListeners(){this.#controlsListenersEnabled||(this.items.addEventListener("scroll",this.#boundItemsScroll),this.pageNavigationContainer&&this.pageNavigationContainer.addEventListener("click",this.#boundPageNavigationClick),this.#controlsListenersEnabled=!0)}#disableControlsListeners(){this.#controlsListenersEnabled&&(this.items.removeEventListener("scroll",this.#boundItemsScroll),this.pageNavigationContainer&&this.pageNavigationContainer.removeEventListener("click",this.#boundPageNavigationClick),this.#controlsListenersEnabled=!1)}#updatePageNavigationList(){this.pageNavigationWrapper||(this.pageNavigationWrapper=document.createElement("div"),this.pageNavigationWrapper.classList.add("page-navigation-wrapper"),this.appendChild(this.pageNavigationWrapper));const pagesAmount=Math.ceil(this.items.children.length/this.itemsPerPage);pagesAmount!==this.#navigationPagesAmount&&(this.#navigationPagesAmount=pagesAmount,this.navigationCounterShowUpToContainerSize&&this.navigationCounterShowUpToContainerSize>=this.offsetWidth&&this.navigationCounterShowForPagesAmount&&(this.navigationCounterOnly||this.#navigationPagesAmount>=this.navigationCounterShowForPagesAmount)?(this.pageNavigationContainer&&this.pageNavigationContainer.setAttribute("hidden",!0),this.pageNavigationCounter||(this.pageNavigationCounter=document.createElement("div"),this.pageNavigationCounter.classList.add("page-navigation-counter"),this.pageNavigationWrapper.appendChild(this.pageNavigationCounter)),this.pageNavigationCounter.removeAttribute("hidden"),this.pageNavigationCounter.innerHTML=`
          <span class="page-navigation-counter__current">${this.#itemAtScrollIndex||1}</span>
          <span class="page-navigation-counter__separator">${this.navigationCounterSeparator}</span>
          <span class="page-navigation-counter__total">${this.#navigationPagesAmount}</span>
        `,this.#setPageNavigationState()):(this.pageNavigationCounter&&this.pageNavigationCounter.setAttribute("hidden",!0),this.pageNavigationContainer||(this.pageNavigationContainer=document.createElement("ul"),this.pageNavigationContainer.classList.add("page-navigation"),this.pageNavigationContainer.setAttribute("role","tablist"),this.pageNavigationWrapper.appendChild(this.pageNavigationContainer)),this.pageNavigationContainer.removeAttribute("hidden"),this.#navigationPagesAmount>1?(this.pageNavigationContainer.innerHTML=`
            ${Array.from({length:pagesAmount},(_,i)=>`
              <li class="page-navigation__item" role="presentation">
                <button type="button" role="tab" class="page-navigation__button" data-page="${i+1}" aria-label="Scroll to page ${i+1} of ${this.#navigationPagesAmount}" tabindex="-1">
                  <span class="visually-hidden">${i+1}</span>
                </button>
              </li>
            `).join(`
`)}
          `,this.#setPageNavigationState()):this.pageNavigationContainer.innerHTML=""))}#handleStateChange({detail:{scrollable}}){scrollable?(this.#updatePageNavigationList(),this.#enableControlsListeners()):this.pageNavigationContainer&&this.#disableControlsListeners()}#handlePageNavigationClick(e){const{target}=e;if(!target.classList.contains("page-navigation__button"))return;const page=Number(target.dataset.page);this.#moveItems(this.items.children[this.itemsPerPage*(page-1)].offsetLeft,"smooth")}#setPageNavigationState(){if(this.pageNavigationDisabled||!this.#navigationPagesAmount||!this.#navigationPagesAmount>1)return;const{itemAtScroll}=this,itemAtScrollIndex=[...this.items.children].indexOf(itemAtScroll);this.#itemAtScrollIndex=itemAtScrollIndex;const currentNavigationPageIndex=this.#itemAtScrollIndex+this.itemsPerPage>this.items.children.length-1?this.#navigationPagesAmount-1:Math.floor(itemAtScrollIndex/this.itemsPerPage);if(this.pageNavigationContainer&&(this.pageNavigationContainer.querySelector(".is-active")&&this.pageNavigationContainer.querySelector(".is-active").classList.remove("is-active"),this.pageNavigationContainer.children[currentNavigationPageIndex]&&this.pageNavigationContainer.children[currentNavigationPageIndex].querySelector("button").classList.add("is-active")),this.pageNavigationCounter){const pageNavigationCounterCurrentElement=this.pageNavigationCounter.querySelector(".page-navigation-counter__current");this.pageNavigationCounter.setAttribute("aria-label",`Page ${currentNavigationPageIndex+1} of ${this.#navigationPagesAmount}`),pageNavigationCounterCurrentElement&&(pageNavigationCounterCurrentElement.innerHTML=currentNavigationPageIndex+1)}}#handleItemsScroll(){this.pageNavigationDisabled||this.#ticking||(window.requestAnimationFrame(()=>{this.#setPageNavigationState(),this.#ticking=!1}),this.#ticking=!0)}#moveItems(position,behavior="instant"){let itemsScrollX=position;itemsScrollX<0?itemsScrollX=0:itemsScrollX>this.items.scrollWidth-this.items.offsetWidth&&(itemsScrollX=this.items.scrollWidth-this.items.offsetWidth),behavior==="instant"?this.items.scrollTo({behavior:"instant",left:itemsScrollX}):this.smoothScrollItems(itemsScrollX)}}customElements.define("items-scroll-paged-navigation",ItemsScrollPagedNavigation);
//# sourceMappingURL=/cdn/shop/t/100/assets/items-scroll-paged-navigation.js.map?v=6570701935369699931751575324