"use strict";function _typeof(e){return(_typeof=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e2){return typeof e2}:function(e2){return e2&&typeof Symbol=="function"&&e2.constructor===Symbol&&e2!==Symbol.prototype?"symbol":typeof e2})(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,_toPropertyKey(n.key),n)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e}function _toPropertyKey(e){return e=_toPrimitive(e,"string"),_typeof(e)=="symbol"?e:String(e)}function _toPrimitive(e,t){if(_typeof(e)!="object"||!e)return e;var r=e[Symbol.toPrimitive];if(r===void 0)return(t==="string"?String:Number)(e);if(r=r.call(e,t||"default"),_typeof(r)!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}function _callSuper(e,t,r){return t=_getPrototypeOf(t),_possibleConstructorReturn(e,_isNativeReflectConstruct()?Reflect.construct(t,r||[],_getPrototypeOf(e).constructor):t.apply(e,r))}function _possibleConstructorReturn(e,t){if(t&&(_typeof(t)==="object"||typeof t=="function"))return t;if(t!==void 0)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(e)}function _isNativeReflectConstruct(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch{}return(_isNativeReflectConstruct=function(){return!!e})()}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e2){return e2.__proto__||Object.getPrototypeOf(e2)})(e)}function _assertThisInitialized(e){if(e===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _inherits(e,t){if(typeof t!="function"&&t!==null)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&_setPrototypeOf(e,t)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e2,t2){return e2.__proto__=t2,e2})(e,t)}function handleSwipe(e,t){var n=t.onSwipeRight,o=t.onSwipeLeft,i=(e.addEventListener("touchstart",function(e2){i=e2.touches[0].clientX,l=e2.touches[0].clientY},!1),e.addEventListener("touchmove",function(e2){var t2,r;i!==null&&l!==null&&(t2=e2.touches[0].clientX,r=e2.touches[0].clientY,t2=i-t2,r=l-r,Math.abs(t2)>Math.abs(r)&&(0<t2?(e2.preventDefault(),o):(e2.preventDefault(),n))(),l=i=null)},!1),null),l=null}customElements.get("product-slider-component")||(isTouchDevice="ontouchstart"in window||0<navigator.MaxTouchPoints||0<navigator.msMaxTouchPoints,ProductSliderComponent=function(){function t(){var e;return _classCallCheck(this,t),(e=_callSuper(this,t))._elImageSlides=null,e._elCardSlides=null,e.dirty=!1,e.element=_assertThisInitialized(e),e.elMediaContainer=e.querySelector(".card-product-slider"),e.isCollectionTemplate=document.querySelector(".template-collection"),e.isGrapheneSearchTemplate=document.querySelector(".template-name-search"),e.handleSlide(),e}return _inherits(t,SliderComponent),_createClass(t,[{key:"elCardSlides",get:function(){return this._elCardSlides||(this._elCardSlides=this.querySelectorAll(".product__media-item")),this._elCardSlides}},{key:"handleSlide",value:function(){var t2=this,e=this.querySelector(".slider-button--next"),f=t2.querySelector(".product__media-item.first-img"),l=t2.querySelectorAll(".product__media-item"),e=(e&&e.addEventListener("click",function(e2){e2.preventDefault(),t2.dirty=!0,plusSlides(t2,1)}),e.addEventListener("keydown",function(e2){(e2.key==="Enter"||e2.key==" ")&&(e2.preventDefault(),t2.dirty=!0,plusSlides(t2,1))}),e.addEventListener("blur",function(e2){e2.preventDefault(),l?.forEach(i=>i?.classList.remove("is-active")),f?.classList.add("is-active")}),this.querySelector(".slider-button--prev")),e=(e&&e.addEventListener("click",function(e2){e2.preventDefault(),t2.dirty=!0,plusSlides(t2,-1)}),e.addEventListener("keydown",function(e2){(e2.key==="Enter"||e2.key==" ")&&(e2.preventDefault(),t2.dirty=!0,plusSlides(t2,-1))}),e.addEventListener("blur",function(e2){e2.preventDefault(),l?.forEach(i=>i?.classList.remove("is-active")),f?.classList.add("is-active")}),this.querySelector(".card-product-slider")),r=this.closest(".card__media");e&&1<this.elCardSlides.length&&(this.isCollectionTemplate==null&&this.isGrapheneSearchTemplate==null||handleSwipe(e,{onSwipeRight:function(){return plusSlides(t2,-1)},onSwipeLeft:function(){return plusSlides(t2,1)}}),r.addEventListener("mouseenter",function(e2){t2.dirty||isTouchDevice||plusSlides(t2,1)}),r.addEventListener("mouseleave",function(e2){t2.dirty||isTouchDevice||plusSlides(t2,-1)}))}}]),t}(),customElements.define("product-slider-component",ProductSliderComponent));var isTouchDevice,ProductSliderComponent,slideIndexNumber=1;function plusSlides(e,t){var e=e.closest("product-slider-component"),r=e.querySelectorAll(".slider-pagination .dot"),r=Array.from(r).findIndex(function(e2){return e2.classList.contains("is-active")})+1+t,n=e.elCardSlides.length;n<r?r=1:r<1&&(r=n),showSlides(r,e,Math.sign(t))}function currentSlide(e,t){e=e.parentElement.parentElement,showSlides(slideIndexNumber=t,e,1)}function showSlides(e,t,r){var n,o=(t=t.closest("product-slider-component")).elCardSlides,i=t.querySelectorAll(".slider-pagination .dot");for(e>o.length&&(slideIndexNumber=1),e<1&&(slideIndexNumber=o.length),n=0;n<o.length;n++)o[n].classList.remove("is-active");for(n=0;n<i.length;n++)i[n].className=i[n].className.replace(" is-active","");var t=o[e-1],l=r==1?o[e%o.length]:o[e-2<0?o.length-1:e-2];l.querySelector(".lazyload")&&t.querySelector("img").addEventListener("load",function(){l.querySelector(".lazyload").classList.add("lazypreload")},{once:!0}),(r=t.querySelector(".lazyload"))!=null&&r.setAttribute("fetchpriority","high"),t.classList.add("is-active"),i[e-1].className+=" is-active"}class ColorChangeComponent extends HTMLElement{constructor(){super();const swatchContainer=this.querySelector("fieldset"),hidecountbtn=this.querySelector(".over-swatch-btn");var countnum=hidecountbtn.querySelector(".more-swatch");const swathitem=this.querySelectorAll(".s-item"),swatchinput=this.querySelectorAll(".swatch-input__input"),swatchbtn=this.querySelectorAll(".swatch");var backtoleft=this.querySelector(".backtoleft");for(const swinput of swatchinput)swinput.addEventListener("click",this.onClicktoCoverImage2.bind(this));for(const swatch of swatchbtn)swatch.addEventListener("click",this.onClicktoCoverImage.bind(this)),swatch.addEventListener("mouseenter",this.onHovertoCoverImage.bind(this)),swatch.addEventListener("keydown",this.onkeydownSwatch.bind(this));hidecountbtn.addEventListener("click",this.onShowMoreColor.bind(this)),backtoleft&&backtoleft.addEventListener("click",this.onshowOriginColor.bind(this));function debounce(func,delay){let timeout;return function(...args){clearTimeout(timeout),timeout=setTimeout(()=>{func.apply(this,args)},delay)}}new ResizeObserver(debounce(()=>{setTimeout(()=>{swatchContainer.clientWidth!=0?this.init(swatchContainer,swathitem,hidecountbtn,countnum):setTimeout(()=>{this.init(swatchContainer,swathitem,hidecountbtn,countnum)},200)},200)},200)).observe(swatchContainer)}init(swatchContainer,swathitem,hidecountbtn,countnum){const containerWidth=swatchContainer.clientWidth;if(Array.from(swathitem).reduce((total,swatch)=>total+swatch.offsetWidth+4,0)>containerWidth){let hidedefaultshownum=this.calculateSwatches(containerWidth,swathitem[0].offsetWidth+4),showcolorcount=swathitem.length-hidedefaultshownum;swatchContainer.style.width=containerWidth,hidecountbtn.classList.remove("hidden"),countnum.textContent="+"+showcolorcount,countnum.setAttribute("more-swatch-count",hidedefaultshownum),countnum.setAttribute("hide-swatch-count",showcolorcount),swathitem.forEach((item,index)=>{index>=hidedefaultshownum&&item.classList.add("d-none")})}}onshowOriginColor(event){const elElement=event.currentTarget,elPrent=elElement.closest(".item-swatch");let hidecountbtn=elPrent.querySelector(".over-swatch-btn");elElement.classList.add("d-none"),hidecountbtn.classList.remove("d-none"),elPrent.style.left="0";var hideitem=elPrent.querySelectorAll(".s-item.d-block");for(const item of hideitem)item.classList.remove("d-block")}calculateSwatches(containerWidth,swatchWidth){let containerUseWidth=containerWidth-swatchWidth;return Math.floor(containerUseWidth/swatchWidth)}onShowMoreColor(event){const elElement=event.currentTarget,elPrent=elElement.closest(".item-swatch"),index=elElement.querySelector(".more-swatch").getAttribute("more-swatch-count"),elPrent_toLeft=Number(index*34);let backleftbtn=elPrent.querySelector(".backtoleft");if(backleftbtn)var newLi=backleftbtn;else{var newLi=document.createElement("li");newLi.className="backtoleft",newLi.innerHTML=`<label>
              <svg aria-hidden="true" role="img" aria-labelledby="backleft-${index}" tabindex="0" width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill: none;">
                  <title id="backleft-${index}">button to view more</title>
                  <path d="M0.999541 1.40417L5.11719 5.52182L0.99954 9.63947" stroke="#B4B4B4" stroke-width="1.23529"></path>
              </svg>
              <span class="sr-only">Back to view left colors</span>
              </label>
          `}const targetLI=elPrent.querySelector(`li:nth-child(${index})`);targetLI.parentNode.insertBefore(newLi,targetLI.nextSibling);let hideitem=elElement.closest(".item-swatch").querySelectorAll(".s-item.d-none");for(const item of hideitem)item.classList.add("d-block");elElement.classList.add("d-none"),newLi.classList.remove("d-none"),elPrent.style.left=`-${elPrent_toLeft}px`,newLi.addEventListener("click",event2=>{this.onshowOriginColor(event2)})}onClicktoCoverImage2(event){const labelElement=event.currentTarget.nextElementSibling;labelElement&&labelElement.querySelector(".swatch").click()}onClicktoCoverImage(event){const elElement=event.currentTarget,imgSrc=elElement.getAttribute("data-img"),target_img=elElement.closest(".card-wrapper").querySelector(".first-img img"),target_img_src=target_img.getAttribute("src");elElement.setAttribute("tabindex",0),target_img_src!=imgSrc?(target_img.setAttribute("src",imgSrc),target_img.setAttribute("srcset",imgSrc),console.log("Updated img src to:",imgSrc)):console.log("No img element found.");const siblings=elElement.closest(".item-swatch").querySelectorAll(".swatch");for(const sibling of siblings)sibling!==elElement&&sibling.setAttribute("tabindex","-1")}onHovertoCoverImage(event){const elElement=event.currentTarget;event.type=="mouseenter"&&elElement.click()}onkeydownSwatch(event){const elElement=event.currentTarget,index=parseInt(elElement.getAttribute("data-valueindex")),totalSize=parseInt(elElement.closest(".item-swatch").getAttribute("data-count"));let nextIndex=index+1,prevIndex=index-1;if(nextIndex>totalSize&&(nextIndex=1),prevIndex<=0&&(prevIndex=totalSize),(event.key==="Enter"||event.key==" ")&&this.click(),event.key==="ArrowRight"||event.key==="ArrowDown"){const nextLabel=elElement.closest(".item-swatch").querySelector(`.swatch[data-valueindex='${nextIndex}']`);nextLabel&&(nextLabel.focus(),nextLabel.click(),nextLabel.addEventListener("click",this.onClicktoCoverImage.bind(this)))}if(event.key==="ArrowLeft"||event.key==="ArrowUp"){const prevLabel=elElement.closest(".item-swatch").querySelector(`.swatch[data-valueindex='${prevIndex}']`);prevLabel&&(prevLabel.focus(),prevLabel.click(),prevLabel.addEventListener("click",this.onClicktoCoverImage.bind(this)))}}}customElements.define("color-change-component",ColorChangeComponent);
//# sourceMappingURL=/cdn/shop/t/106/assets/component-card-product-slider.js.map?v=149611913543897251851752133283