if(!customElements.get("component-slider")){class ComponentSlider extends HTMLElement{constructor(){super(),this.timer=null}connectedCallback(){this.setUpSlider()}disconnectedCallback(){window.removeEventListener("resize",this.boundResize),this.eventsDeclared&&this.removeEventListeners()}setUpSlider(){this.classList.remove("loaded"),this.slider=this.querySelector(".slider__list"),this.slides=Array.from(this.querySelectorAll(".slider__item")),this.prevBtn=this.querySelector(".slider__button.prev"),this.nextBtn=this.querySelector(".slider__button.next"),this.counter=this.querySelector(".slider__counter"),this.counterType=this.dataset.counter,this.buttonsType=this.dataset.buttons,this.hasFloatingControls=this.hasAttribute("floating-controls"),this.forceGridMobile=this.classList.contains("forced-grid-mobile"),this.forceGridTablet=this.classList.contains("forced-grid-tablet"),this.forceGridDesktop=this.classList.contains("forced-grid-desktop"),this.autorotate=this.hasAttribute("autorotate"),this.autorotateSpeed=+this.dataset.autorotateSpeed,this.autorotateButton=this.querySelector(".slider__play"),this.progressBar=this.querySelector(".slider__counter__progress-bar--current"),this.thumbnailsMax=this.counterType=="images"?4:5,(this.counterType==="numbers"||this.counterType==="dots"||this.counterType==="images")&&(this.counter=this.querySelector(".slider__counter__thumbnails")),this.animationDelay=700,this.slider&&(this.isInfinite=this.hasAttribute("infinite"),this.isDraggable=this.hasAttribute("draggable"),this.matchThumbnails=this.hasAttribute("match-thumbnails"),this.currentIndex=0,this.currentPosition=0,this.totalSlides=this.slides.length,this.postUpdateTimeout=null,this.computedStyle=getComputedStyle(this),this.slideOffset=parseFloat(computePixelValue(this.computedStyle.getPropertyValue("--slide-offset"))||0)*(.5*parseFloat(computePixelValue(this.computedStyle.getPropertyValue("--column-count"))||0)),this.declareEvents(),this.isInfinite?(this.totalClones=+this.dataset.clones+1,this.setSlidesClones()):this.fullSlides=this.slides,this.setUpSlides(),this.setVisibleSlides(),this.setUpCounter(),requestAnimationFrame(()=>this.classList.add("loaded")),this.navigateToSlide(0,!1),this.updateControls(),this.isInfinite||this.updateButtons(),this.autorotate&&(this.playAutorotate(),this.autorotateButton&&this.autorotateButton.addEventListener("click",()=>{this.hasAttribute("play")?this.pauseAutorotate():this.playAutorotate()})))}declareEvents(){this.resizeTimeout=null,this.boundResize=this.onResize.bind(this),this.boundWheel=debounce(this.onWheel.bind(this),200),this.boundThumbnailScroll=this.onThumbnailsScroll.bind(this),this.onScrollTimeout=null,this.boundOnScroll=this.onScroll.bind(this),this.boundNextClick=this.onNextClick.bind(this),this.boundPrevClick=this.onPrevClick.bind(this),this.boundTouchStart=this.touchStart.bind(this),this.boundMouseDown=this.mouseDown.bind(this),this.boundMouseMove=this.mouseMove.bind(this),this.boundMouseUp=this.mouseUp.bind(this),this.boundOnMoveStop=this.onMoveStop.bind(this),this.isDragging=!1,this.hasMoved=!1,this.startPos=0,this.currentSlide=0,this.prevSlide=0,this.isNavigating=!1,window.addEventListener("resize",this.boundResize),this.eventsDeclared||this.setEventListeners()}setEventListeners(){this.eventsDeclared||(this.nextBtn&&this.nextBtn.addEventListener("click",this.boundNextClick,{passive:!1}),this.prevBtn&&this.prevBtn.addEventListener("click",this.boundPrevClick,{passive:!1}),this.slider.addEventListener("mousedown",this.boundMouseDown,{passive:!1}),this.slider.addEventListener("touchstart",this.boundTouchStart,{passive:!1}),this.slider.addEventListener("wheel",this.boundWheel,{passive:!0}),this.eventsDeclared=!0,this.slider.classList.remove("no-events"))}removeEventListeners(){this.eventsDeclared&&(this.nextBtn&&this.nextBtn.removeEventListener("click",this.boundNextClick),this.prevBtn&&this.prevBtn.removeEventListener("click",this.boundPrevClick),this.slider.removeEventListener("mousedown",this.boundTouchStart),this.slider.removeEventListener("touchstart",this.boundTouchStart),this.slider.removeEventListener("wheel",this.boundWheel,{passive:!0}),this.eventsDeclared=!1,this.slider.classList.add("no-events"))}onNextClick(){this.navigateToSlide(this.currentIndex+1,!0)}onPrevClick(){this.navigateToSlide(this.currentIndex-1,!0)}navigateToSlide(index,setTransition=!0,trigger=null){this.isNavigating=!0,this.setButtonsDisabled(!0),this.isInfinite?this.currentIndex==0&&index==this.totalSlides-1&&trigger=="thumbnail"&&this.filteredSlides.length>2?this.currentIndex=-1:index==0&&this.currentIndex==this.totalSlides-1&&trigger=="thumbnail"&&this.filteredSlides.length>2?this.currentIndex=this.totalSlides:this.currentIndex=index:this.currentIndex>=this.totalSlides?this.currentIndex=this.totalSlides-1:this.currentIndex<0?this.currentIndex=0:this.currentIndex=index;const isInfiniteOverflow=this.isInfinite&&(this.currentIndex<0||this.currentIndex>=this.totalSlides);this.updateSliderPosition(setTransition,!isInfiniteOverflow),this.isInfinite&&(this.currentIndex>=this.totalSlides?(setTimeout(()=>{this.setButtonsDisabled(!0)},1),setTimeout(()=>{this.currentIndex=this.currentIndex-this.totalSlides,this.updateSliderPosition(!1)},this.animationDelay+1)):this.currentIndex<0&&(setTimeout(()=>{this.setButtonsDisabled(!0)},1),setTimeout(()=>{this.currentIndex=this.totalSlides+this.currentIndex,this.updateSliderPosition(!1)},this.animationDelay+1)))}updateSliderPosition(setTransition=!0,stopNavigating=!0){const targetSlide=this.fullSlides.find(slide=>+slide.dataset.index===this.currentIndex);if(!targetSlide)return;this.currentPosition=targetSlide.offsetLeft-this.slidePositions[0];const scrollBehavior=setTransition?"smooth":"auto";this.slider.scrollTo({left:this.currentPosition,behavior:scrollBehavior}),clearTimeout(this.postUpdateTimeout),this.counterType==="bar"&&this.updateProgressBar(),this.postUpdateTimeout=setTimeout(()=>{this.postUpdateSliderPosition(stopNavigating)},setTransition?this.animationDelay:0)}postUpdateSliderPosition(stopNavigating=!0){this.setButtonsDisabled(!1),this.currentIndex>=0&&this.currentIndex{this.updateThumbnails()}):this.counterType=="counter"?requestAnimationFrame(()=>{this.updateCounter()}):this.counterType=="bar"&&requestAnimationFrame(()=>{this.updateProgressBar()})),this.isInfinite||requestAnimationFrame(()=>{this.updateButtons()}),this.prevSlide=this.currentPosition,stopNavigating&&(this.isNavigating=!1)}navigateToClosestPosition(position){const closestIndex=this.getIndexByClosestPosition(position);requestAnimationFrame(()=>{this.navigateToSlide(closestIndex,!0)})}onMoveStop(){if(this.currentPosition=this.slider.scrollLeft,this.isDraggable)this.navigateToClosestPosition(this.currentPosition);else{const movedBy=this.currentPosition-this.prevSlide,nextSlideIndex=this.currentIndex>=this.totalSlides-this.visibleSlides&&!this.isInfinite?this.totalSlides-1:this.currentIndex+1,prevSlideIndex=this.currentIndex===0&&!this.isInfinite?0:this.currentIndex-1,nextSlidePosition=+this.filteredFullSlides.find(item=>+item.dataset.index===nextSlideIndex)?.dataset.position,prevSlidePosition=+this.filteredFullSlides.find(item=>+item.dataset.index===prevSlideIndex)?.dataset.position;movedBy>30?this.currentPositionprevSlidePosition?this.navigateToSlide(this.currentIndex-1,!0):this.navigateToClosestPosition(this.currentPosition):this.isNavigating||this.navigateToSlide(this.currentIndex)}}getIndexByClosestPosition(position){const closestPosition=this.scrollablePositions.reduce((closest,current)=>Math.abs(current-position)+item.dataset.position==closestPosition)[0].dataset.index}mouseDown(event){this.isDragging=!0,this.hasMoved=!1,this.slider.classList.remove("touch"),this.startPos=this.getPositionX(event),this.startPosY=this.getPositionY(event),this.slider.classList.add("grabbing"),this.slider.addEventListener("mousemove",this.boundMouseMove,{passive:!1}),this.slider.addEventListener("mouseup",this.boundMouseUp,{passive:!1}),this.slider.addEventListener("mouseleave",this.boundMouseUp,{passive:!1}),window.addEventListener("mouseleave",this.boundMouseUp,{passive:!1}),window.addEventListener("mouseup",this.boundMouseUp,{passive:!1})}mouseMove(event){if(!this.isDragging)return;const currentX=this.getPositionX(event),currentY=this.getPositionY(event),diffX=Math.abs(currentX-this.startPos);if(Math.abs(currentY-this.startPosY)>diffX)return;event.preventDefault(),this.slider.classList.add("moving"),this.hasMoved=!0;const maxSlideOffset=this.isInfinite?1:0,firstSlidePosition=+this.filteredFullSlides[0].dataset.position-this.slideOffset-this.slidePositions[0],lastSlidePosition=+this.filteredFullSlides[this.filteredFullSlides.length-this.visibleSlides-maxSlideOffset]?.offsetLeft+this.slideOffset;let newPos=this.currentPosition+this.startPos-currentX;newPos=Math.max(firstSlidePosition,Math.min(newPos,lastSlidePosition)),this.slider.scrollLeft=newPos}mouseUp(event){this.isDragging=!1,this.hasMoved&&requestAnimationFrame(this.boundOnMoveStop),this.slider.classList.remove("grabbing","moving"),this.slider.removeEventListener("mouseup",this.boundMouseUp,{passive:!1}),this.slider.removeEventListener("mouseleave",this.boundMouseUp,{passive:!1}),this.slider.removeEventListener("mousemove",this.boundMouseMove,{passive:!1}),window.removeEventListener("mouseleave",this.boundMouseUp,{passive:!1}),window.removeEventListener("mouseup",this.boundMouseUp,{passive:!1})}touchStart(){this.slider.classList.add("touch"),this.prevScrollTop=this.slider.scrollTop,this.prevScrollLeft=this.slider.scrollLeft,this.slider.addEventListener("scroll",this.boundOnScroll,{passive:!1})}getPositionX(event){return event.type.includes("mouse")?event.pageX:event.touches[0].clientX}getPositionY(event){return event.type.includes("mouse")?event.pageY:event.touches[0].clientY}onWheel(){requestAnimationFrame(this.boundOnMoveStop)}onScroll(event){this.currentIndex=this.getIndexByClosestPosition(this.slider.scrollLeft);const diffX=Math.abs(this.slider.scrollLeft-this.prevScrollLeft);Math.abs(this.slider.scrollTOp-this.prevScrollTop)>diffX||(event.preventDefault(),clearTimeout(this.onScrollTimeout),this.onScrollTimeout=setTimeout(()=>{this.postUpdateSliderPosition(),this.isInfinite&&(this.currentIndex>=this.totalSlides?(setTimeout(()=>{this.setButtonsDisabled(!0)},1),setTimeout(()=>{this.currentIndex=this.currentIndex-this.totalSlides,this.updateSliderPosition(!1)},this.animationDelay+1)):this.currentIndex<0&&(setTimeout(()=>{this.setButtonsDisabled(!0)},1),setTimeout(()=>{this.currentIndex=this.totalSlides+this.currentIndex,this.updateSliderPosition(!1)},this.animationDelay+1))),this.slider.removeEventListener("scroll",this.boundOnScroll,{passive:!1})},200))}setUpSlides(){let index=0;this.slides.forEach(slide=>{slide.getBoundingClientRect().width>0?(slide.dataset.index=index,index++):slide.removeAttribute("data-index")}),this.totalSlides=index,this.hiddenSlides=this.slides.filter(slide=>slide.getBoundingClientRect().width<=0),this.filteredSlides=this.slides.filter(slide=>slide.getBoundingClientRect().width>0),this.setClonesData(),this.setUpSlidesPosition()}setUpSlidesPosition(){if(this.slideOffset=parseFloat(this.computedStyle.getPropertyValue("--slide-offset")||0)*(.5*parseFloat(this.computedStyle.getPropertyValue("--column-count")||0)),this.slidePositions=[],this.fullSlides.forEach(slide=>{slide.getBoundingClientRect().width>0?(slide.dataset.position=slide.offsetLeft+this.slideOffset,this.slidePositions.push(slide.offsetLeft+this.slideOffset)):slide.removeAttribute("data-position")}),this.hiddenFullSlides=this.fullSlides.filter(slide=>slide.getBoundingClientRect().width<=0),this.filteredFullSlides=this.fullSlides.filter(slide=>slide.getBoundingClientRect().width>0),this.scrollableFullSlides=[...this.filteredFullSlides],this.scrollablePositions=[...this.slidePositions],!this.isInfinite)for(let i=1;i{const item=document.createElement("div");item.classList.add("thumbnail",`thumbnail--${this.counterType.slice(0,-1)}`),this.counterType==="numbers"&&(item.textContent=index+1),this.counterType==="images"&&item.style.setProperty("--thumbnail-image",`url(${slide.dataset.sliderThumbnailImage})`),index===0&&item.classList.add("active"),item.addEventListener("click",()=>this.navigateToSlide(index,!0,"thumbnail")),fragment.appendChild(item)}),this.counter.appendChild(fragment),this.thumbnails=Array.from(this.counter.querySelectorAll(".thumbnail"))}this.counterType==="counter"&&(this.counterCurrent=this.counter.querySelector(".counter--current"),this.counterMax=this.counter.querySelector(".counter--max"),this.updateCounter()),this.counterType==="bar"&&this.updateProgressBar()}}updateControls(){if(this.classList.remove("hide-clones"),this.counter&&this.counter.classList.remove("hidden"),(this.counterType=="dots"||this.counterType=="numbers"||this.counterType==="images")&&this.thumbnails.forEach(thumbnail=>{thumbnail.classList.remove("hidden")}),this.nextBtn&&this.nextBtn.classList.remove("hidden"),this.prevBtn&&this.prevBtn.classList.remove("hidden"),this.counterType=="counter"&&this.updateCounter(),this.forceGridMobile&&window.innerWidth<750||this.forceGridTablet&&window.innerWidth>=750&&window.innerWidth<990||this.forceGridDesktop&&window.innerWidth>=990){this.removeControls();return}if(this.counterType=="dots"||this.counterType=="numbers"||this.counterType==="images"){const removeDotsLength=this.isInfinite||this.matchThumbnails?0:this.visibleSlides-1;this.filteredSlides.forEach((slide,index)=>{(slide.getBoundingClientRect().width<=0||index>=this.filteredSlides.length-removeDotsLength)&&this.thumbnails[index].classList.add("hidden")}),this.currentThumbnails=this.thumbnails.filter(dot=>!dot.classList.contains("hidden")),this.currentThumbnails.length<=1||this.visibleSlides>=this.slides.length?this.removeControls():this.eventsDeclared||requestAnimationFrame(()=>{this.setEventListeners()}),this.currentThumbnails.length>this.thumbnailsMax?(this.counter.classList.add("overflowed"),this.onThumbnailsScroll(),this.counter.addEventListener("scroll",this.boundThumbnailScroll,{passive:!1})):(this.counter.classList.remove("overflowed"),this.counter.removeEventListener("scroll",this.boundThumbnailScroll))}else this.visibleSlides>=this.slides.length?this.removeControls():this.eventsDeclared||requestAnimationFrame(()=>{this.setEventListeners()})}removeControls(){this.counter&&this.counter.classList.add("hidden"),this.nextBtn&&this.nextBtn.classList.add("hidden"),this.prevBtn&&this.prevBtn.classList.add("hidden"),this.classList.add("hide-clones"),this.eventsDeclared&&this.removeEventListeners()}updateThumbnails(){const removeMaxLength=this.isInfinite?0:this.visibleSlides-1,maxCounterSlides=this.totalSlides-removeMaxLength;if(this.currentIndex<0||this.currentIndex>=maxCounterSlides){this.currentIndex=Math.max(0,Math.min(this.currentIndex,maxCounterSlides-1));return}const currentThumbnail=this.thumbnails[this.currentIndex];let lastCurrentThumbnail=currentThumbnail;if(this.thumbnails.forEach((dot,index)=>{dot.classList.toggle("active",index===this.currentIndex),dot.classList.toggle("previous",index===this.currentIndex-1),dot.classList.toggle("next",index===this.currentIndex+1),this.matchThumbnails&&(index>=this.currentIndex&&index<=this.currentIndex+this.visibleSlides-1?(dot.classList.add("visible-active"),lastCurrentThumbnail=dot):dot.classList.remove("visible-active"))}),!currentThumbnail||!lastCurrentThumbnail)return;const counterScrollLeft=this.counter.scrollLeft,counterScrollTop=this.counter.scrollTop,counterClientWidth=this.counter.clientWidth,counterClientHeight=this.counter.clientHeight,currentThumbnailOffsetLeft=currentThumbnail.offsetLeft-this.counter.offsetLeft,lastThumbnailOffsetLeft=lastCurrentThumbnail.offsetLeft-this.counter.offsetLeft,currentThumbnailOffsetTop=lastCurrentThumbnail.offsetTop-this.counter.offsetTop,lastThumbnailOffsetTop=currentThumbnail.offsetTop-this.counter.offsetTop,currentThumbnailWidth=currentThumbnail.getBoundingClientRect().width,currentThumbnailHeight=currentThumbnail.getBoundingClientRect().height,counterGap=parseFloat(computePixelValue(getComputedStyle(this.counter).columnGap)||computePixelValue(getComputedStyle(this.counter).gap)||0),scrollOffsetX=currentThumbnailWidth+counterGap,scrollOffsetY=currentThumbnailHeight+counterGap;let newScrollLeft=counterScrollLeft,newScrollTop=counterScrollTop;currentThumbnailOffsetLeftcounterScrollLeft+counterClientWidth-scrollOffsetX&&(newScrollLeft=lastThumbnailOffsetLeft+currentThumbnailWidth-counterClientWidth+scrollOffsetX),currentThumbnailOffsetTopcounterScrollTop+counterClientHeight-scrollOffsetY&&(newScrollTop=lastThumbnailOffsetLeft+currentThumbnailHeight-counterClientHeight+scrollOffsetY),this.counter.scrollTo({left:newScrollLeft,top:newScrollTop,behavior:"smooth"})}onThumbnailsScroll(){requestAnimationFrame(()=>{const counterScrollLeft=this.counter.scrollLeft,counterOffsetLeft=this.counter.offsetLeft,counterClientWidth=this.counter.clientWidth,thumbnailsOffset=this.hasFloatingControls?0:counterOffsetLeft;this.thumbnails[0].offsetLeft-thumbnailsOffsetcounterScrollLeft+counterClientWidth?this.counter.classList.add("overflowed--right"):this.counter.classList.remove("overflowed--right")})}updateCounter(){if(!this.counterCurrent||!this.counterMax)return;const removeMaxLength=this.isInfinite?0:this.visibleSlides-1,maxCounterSlides=this.totalSlides-removeMaxLength,currentCounterSlide=this.currentIndex+1;if(this.currentIndex<0){this.currentIndex=0;return}if(this.currentIndex>maxCounterSlides-1){this.currentIndex--;return}this.counterCurrent.textContent=maxCounterSlides0?(this.prevBtn.removeAttribute("disabled"),this.prevBtn.removeAttribute("aria-disabled"),this.prevBtn.classList.remove("disabled")):(this.prevBtn.setAttribute("disabled",!0),this.prevBtn.setAttribute("aria-disabled",!0),this.prevBtn.classList.add("disabled")),this.currentIndex{clone.remove()});const fragmentEnd=document.createDocumentFragment(),fragmentStart=document.createDocumentFragment();let prevSlide=null;for(let i=0;i<=this.totalClones;i++){if(this.slides[i]){const clone=this.slides[i].cloneNode(!0);clone.removeAttribute("id"),clone.classList.replace("slider__item","slider__clone"),clone.classList.add("slider__clone--end"),fragmentEnd.appendChild(clone)}if(this.slides[this.slides.length-i-1]){const clone=this.slides[this.slides.length-i-1].cloneNode(!0);clone.removeAttribute("id"),clone.classList.replace("slider__item","slider__clone"),clone.classList.add("slider__clone--start"),prevSlide!=null?fragmentStart.insertBefore(clone,prevSlide):fragmentStart.appendChild(clone),prevSlide=clone}}this.slider.appendChild(fragmentEnd),this.slider.insertBefore(fragmentStart,this.slides[0]),this.fullSlides=Array.from(this.querySelectorAll(".slider__item, .slider__clone"))}setClonesData(){let indexEnd=this.totalSlides;this.fullSlides.filter(slide=>slide.classList.contains("slider__clone--end")).forEach(slide=>{slide.getBoundingClientRect().width>0?(slide.dataset.index=indexEnd,indexEnd++):slide.removeAttribute("data-index")});let indexStart=-1;this.fullSlides.filter(slide=>slide.classList.contains("slider__clone--start")).reverse().forEach(slide=>{slide.getBoundingClientRect().width>0?(slide.dataset.index=indexStart,indexStart--):slide.removeAttribute("data-index")})}isMobileOrTouchDevice(){const hasTouch="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,isMobile=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);return hasTouch||isMobile}onResize(){this.setUpSlides(),this.setVisibleSlides(),this.updateControls(),clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(()=>{this.navigateToClosestPosition(this.currentPosition)},50)}setAutorotate(){const removeMaxLength=this.isInfinite?0:this.visibleSlides-1,maxCounterSlides=this.totalSlides-removeMaxLength,nextSlide=this.isInfinite?this.currentIndex+1:this.currentIndex>=maxCounterSlides-1?0:this.currentIndex+1;this.navigateToSlide(nextSlide,!0)}playAutorotate(){this.setAttribute("play",!0),this.autorotateButton&&(this.autorotateButton.setAttribute("aria-pressed",!0),this.autorotateButton.setAttribute("aria-label",window.accessibilityStrings.pauseSlider)),this.timer=setInterval(this.setAutorotate.bind(this),this.autorotateSpeed*1e3)}pauseAutorotate(){this.removeAttribute("play"),this.autorotateButton&&(this.autorotateButton.setAttribute("aria-pressed",!1),this.autorotateButton.setAttribute("aria-label",window.accessibilityStrings.playSlider)),clearInterval(this.timer)}updateProgressBar(){if(!this.progressBar)return;const removeMaxLength=this.isInfinite?0:this.visibleSlides-1,maxCounterSlides=this.totalSlides-removeMaxLength,currentCounterSlide=this.currentIndex+1,progress=Math.min(currentCounterSlide/maxCounterSlides,1);this.progressBar.style.width=`${progress*100}%`}}customElements.define("component-slider",ComponentSlider)} //# sourceMappingURL=/cdn/shop/t/365/assets/component-slider.js.map?v=107129219133399362821753250039