https://www.bulls-bikes.com/.resources/bulls-light-module/webresou…?version=e8952428987739bafda77a42a46b4c06

1import{d as e}from"./defineElement-Bh-rOTph.js";import"./GlobalStylesStore-DJcwEi1U.js";import{T as t}from"./TemplateElement-vrJB-8f5.js";import{S as s}from"./SliderElementEvents-DhBQCjyZ.js";import{h as i}from"./html-Ck1awrLk.js";import"./StyledElement-DTZZtZgb.js";e("comparison-header",class extends t{slider=null;constructor(){super({deferUpdate:!0}),this.slider=document.getElementById("comparisonSlider"),this.$cols=Array.from(this.slider.querySelectorAll("[data-column-title]"))}connected(){this.slider.addEventListener(s.SLIDER_RUN,(e=>{this.current=e.detail})),this.slider.addEventListener(s.SLIDER_RESIZE,(e=>{this.onCurrent(),this.requestUpdate()})),this.onCurrent(),this.requestUpdate()}properties(){return{label:"Produkt",labelPrev:"Zurück",labelNext:"Weiter",current:0,count:0}}events(){return{"[ref=next]":{click:e=>{e.preventDefault(),this.slider.next()}},"[ref=prev]":{click:e=>{e.preventDefault(),this.slider.previous()}}}}watch(){return{current:()=>this.onCurrent()}}onCurrent(){const e=this.$cols[this.current];this.visibleCount=Math.round(this.slider?.offsetWidth/e?.offsetWidth)}isPrevDisabled(){if(!(this.slider?.$refs?.scroller??null))return!1;return 0===this.current||!(this.slider?.canSlide&&this.slider?.canSlideLeft)}isNextDisabled(){if(!(this.slider?.$refs?.scroller??null))return!1;return this.current+this.visibleCount>=this.count||!(this.slider?.canSlide&&this.slider?.canSlideRight)}templateLabel(){if(1===this.visibleCount)return i`<div><span class="font-bold">${this.label}:</span> ${this.current+1}/${this.count}</div>`;{const e=Math.min(this.current,parseInt(this.$cols.length-this.visibleCount)),t=Math.min(parseInt(this.current+this.visibleCount),this.$cols.length);return i` <div>
2                <span class="font-bold">${this.label}:</span> ${e+1} - ${t} von ${this.count}
3            </div>`}}template(){return this.slider?.canSlide?i`<div class="flex items-center">
4            <button ref="prev" class="btn btn-dark" ?disabled="${this.isPrevDisabled()}">
5                <svg-icon name="chevron-left"></svg-icon>
6                <span class="hidden md:block text-sm sm:text-base">${this.labelPrev}</span>
7            </button>
8            <div class="flex flex-1 flex-col justify-center items-center">${this.templateLabel()}</div>
9            <button ref="next" class="btn btn-dark" ?disabled="${this.isNextDisabled()}">
10                <span class="text-sm sm:text-base hidden md:block ">${this.labelNext}</span>
11                <svg-icon name="chevron-right"></svg-icon>
12            </button>
13        </div>`:""}});
14//# sourceMappingURL=comparison-header-BDB2Xy0Q.js.map