class SliderComponent extends HTMLElement{constructor(){if(super(),this.slider=this.querySelector("ul"),this.sliderItems=this.querySelectorAll("li"),this.pageCount=this.querySelector(".slider-counter--current"),this.pageTotal=this.querySelector(".slider-counter--total"),this.prevButton=this.querySelector('button[name="previous"]'),this.nextButton=this.querySelector('button[name="next"]'),this.dotButton=this.querySelectorAll('button[name="dots"]'),!this.slider||!this.nextButton)return;new ResizeObserver(entries=>this.initPages()).observe(this.slider),this.slider.addEventListener("scroll",this.update.bind(this)),this.prevButton.addEventListener("click",this.onButtonClick.bind(this)),this.nextButton.addEventListener("click",this.onButtonClick.bind(this)),this.dotButton.forEach(button=>{button.addEventListener("click",this.onDotClick.bind(this))}),console.log("here working greate working there  ")}initPages(){!this.sliderItems.length!==0&&(this.slidesPerPage=Math.floor(this.slider.clientWidth/this.sliderItems[0].clientWidth),this.totalPages=this.sliderItems.length-this.slidesPerPage+1)}update(){this.currentPage=Math.round(this.slider.scrollLeft/this.sliderItems[0].clientWidth),this.querySelector(".dots-item.active")?.classList.remove("active"),this.querySelectorAll(".dots-item")[this.currentPage]?.classList.add("active")}onButtonClick(event){event.preventDefault();const slideScrollPosition=event.currentTarget.name==="next"?this.slider.scrollLeft+this.sliderItems[0].clientWidth:this.slider.scrollLeft-this.sliderItems[0].clientWidth;this.slider.scrollTo({left:slideScrollPosition})}onDotClick(event){event.preventDefault(),this.dotActive=this.querySelector(".dots-item.active button");const sliderItemActive=this.dotActive.dataset.index,sliderItem=event.currentTarget.dataset.index,sliderCount=sliderItem>sliderItemActive?sliderItem-sliderItemActive:sliderItemActive-sliderItem;this.querySelector(".dots-item.active").classList.remove("active"),event.currentTarget.closest(".dots-item").classList.add("active");const slideScrollPosition=sliderItem*this.sliderItems[0].clientWidth;this.slider.scrollTo({left:slideScrollPosition})}}customElements.define("slider-component",SliderComponent);class ProductSliderComponent extends SliderComponent{constructor(){if(super(),this.slider=this.querySelector(".slider"),this.sliderItems=this.querySelectorAll(".slider__slide"),!this.slider||!this.nextButton)return;new ResizeObserver(entries=>this.initPages()).observe(this.slider),this.slider.addEventListener("DOMSubtreeModified",()=>{this.slider=this.querySelector(".slider"),this.sliderItems=this.querySelectorAll(".slider__slide"),this.slider.addEventListener("scroll",this.update.bind(this)),this.prevButton?.addEventListener("click",this.onButtonClick.bind(this)),this.nextButton?.addEventListener("click",this.onButtonClick.bind(this)),this.dotButton.forEach(button=>{button.addEventListener("click",this.onDotClick.bind(this))})}),this.slider.addEventListener("scroll",this.update.bind(this)),this.prevButton?.addEventListener("click",this.onButtonClick.bind(this)),this.nextButton?.addEventListener("click",this.onButtonClick.bind(this)),this.dotButton.forEach(button=>{button.addEventListener("click",this.onDotClick.bind(this))})}}customElements.define("product-slider-component",ProductSliderComponent);class BannerSliderComponent extends SliderComponent{constructor(){if(super(),this.slider=this.querySelector(".slider"),this.sliderItems=this.querySelectorAll(".slider__slide"),!this.slider||!this.dotButton)return;new ResizeObserver(entries=>this.initPages()).observe(this.slider),this.slider.addEventListener("DOMSubtreeModified",()=>{this.slider=this.querySelector(".slider"),this.sliderItems=this.querySelectorAll(".slider__slide"),this.slider.addEventListener("scroll",this.update.bind(this)),this.prevButton?.addEventListener("click",this.onButtonClick.bind(this)),this.nextButton?.addEventListener("click",this.onButtonClick.bind(this)),this.dotButton.forEach(button=>{button.addEventListener("click",this.onDotClick.bind(this))})}),this.slider.addEventListener("scroll",this.update.bind(this)),this.prevButton?.addEventListener("click",this.onButtonClick.bind(this)),this.nextButton?.addEventListener("click",this.onButtonClick.bind(this)),this.dotButton.forEach(button=>{button.addEventListener("click",this.onDotClick.bind(this))}),this.initButtonDisable()}initButtonDisable(){const observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{entry.isIntersecting?entry.target.classList.contains("first-item")?this.prevButton?.classList.add("disabled"):entry.target.classList.contains("last-item")&&this.nextButton?.classList.add("disabled"):entry.target.classList.contains("first-item")?this.prevButton?.classList.remove("disabled"):entry.target.classList.contains("last-item")&&this.nextButton?.classList.remove("disabled")})},{threshold:.8,root:this.slider});this.sliderItems[0].classList.add("first-item"),this.sliderItems[this.sliderItems.length-1].classList.add("last-item"),observer.observe(this.sliderItems[0]),observer.observe(this.sliderItems[this.sliderItems.length-1])}}window.addEventListener("load",()=>{customElements.define("banner-slider-component",BannerSliderComponent)});
//# sourceMappingURL=/cdn/shop/t/9/assets/slider.js.map?v=172448948807124557931659634436