https://chestudios.co.uk/cdn/shop/t/144/assets/scroller-number.js?v=160194914225935067591758805589

1class ScrollerNumber extends HTMLElement{constructor(){super(),this.current=1,this.total=0,this.attachShadow({mode:"open"}),this.render(),this.targetElement=null,this.observer=null}connectedCallback(){const targetId=this.getAttribute("for");targetId?(this.targetElement=document.getElementById(targetId),this.setupObserver()):console.error('ScrollerNumber: No target element specified (use "for" attribute)')}disconnectedCallback(){this.observer&&this.observer.disconnect()}setupObserver(){if(!this.targetElement)return;const slides=Array.from(this.targetElement.children).filter(child=>!["STYLE","SCRIPT"].includes(child.tagName));this.total=slides.length;const options={root:this.targetElement,threshold:.5};this.observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){const visibleElement=entry.target,index=Array.from(slides).indexOf(visibleElement);index!==-1&&(this.current=index+1,this.render())}})},options),this.ensureSlideStyles(),slides.forEach(slide=>{this.observer.observe(slide)}),this.render()}handleScroll(){if(!this.targetElement)return;const slides=Array.from(this.targetElement.children).filter(child=>!["STYLE","SCRIPT"].includes(child.tagName));if(slides.length===0)return;const scrollLeft=this.targetElement.scrollLeft,containerWidth=this.targetElement.offsetWidth,containerCenter=scrollLeft+containerWidth/2;let closestSlide=null,closestDistance=1/0;slides.forEach((slide,index)=>{const slideLeft=slide.offsetLeft,slideWidth=slide.offsetWidth,slideCenter=slideLeft+slideWidth/2,distance=Math.abs(containerCenter-slideCenter);distance<closestDistance&&(closestDistance=distance,closestSlide=index)});const currentSlide=closestSlide!==null?closestSlide+1:1;currentSlide!==this.current&&currentSlide<=this.total&&(this.current=currentSlide,this.render())}render(){const style=`
2      :host {
3        display: block;
4        font-family: sans-serif;
5        font-size: 14px;
6        color: #000;
7        padding: 8px 0;
8      }
9      
10      /* No forced width styles */
11    `;this.shadowRoot.innerHTML=`
12      <style>${style}</style>
13      <div>${this.current}/${this.total}</div>
14    `,this.targetElement&&this.ensureSlideStyles(),this.targetElement&&!this._hasScrollListener&&(this.targetElement.addEventListener("scroll",this.handleScroll.bind(this)),this._hasScrollListener=!0)}ensureSlideStyles(){if(this.targetElement&&!this.targetElement._stylesApplied){this.targetElement.style.scrollSnapType="x mandatory",this.targetElement.style.scrollBehavior="smooth",this.targetElement.style.display="flex",this.targetElement.style.overflowX="auto",this.targetElement.style.scrollbarWidth="none";const style=document.createElement("style");style.textContent=`
15        #${this.targetElement.id}::-webkit-scrollbar {

16          display: none;
17        }
18        
19        #${this.targetElement.id} > *:not(style):not(script) {
20          scroll-snap-align: center;
21          box-sizing: border-box;
22          /* No forced width - will use the elements' natural width */
23          flex-shrink: 0; /* Prevent elements from shrinking */
24        }
25      `,document.head.appendChild(style),Array.from(this.targetElement.children).filter(child=>!["STYLE","SCRIPT"].includes(child.tagName)).forEach(slide=>{slide.style.flexShrink="0"}),this.targetElement._stylesApplied=!0}}static get observedAttributes(){return["for"]}attributeChangedCallback(name,oldValue,newValue){name==="for"&&oldValue!==newValue&&(this.observer&&this.observer.disconnect(),this.targetElement=document.getElementById(newValue),this.setupObserver())}}customElements.define("scroller-number",ScrollerNumber);
26//# sourceMappingURL=/cdn/shop/t/144/assets/scroller-number.js.map?v=160194914225935067591758805589