if(!customElements.get("color-swatch")){class ColorSwatch extends HTMLElement{constructor(){super()}connectedCallback(){this.optionNodes=this.querySelectorAll("[data-value]"),this.init()}disconnectedCallback(){this.optionNodes.forEach(button=>button.removeEventListener("mouseenter",this.onMouseEnter.bind(this)))}init(){const productCard=this.closest(".product-card");this.mainImage=productCard.querySelector(".product-card__image--main img"),this.optionNodes.forEach(button=>button.addEventListener("mouseenter",this.onMouseEnter.bind(this))),this.selected=this.querySelector('a[aria-selected="true"]'),this.getVariantData(),this.initOptionSwatches()}initOptionSwatches(){const{colorSwatches=[]}=window.FoxThemeSettings;this.optionNodes.forEach(optNode=>{let variantImage;const{optionPosition,value:optionValue,fallbackValue}=optNode.dataset,variant=this.variantData.find(v=>v[`option${optionPosition}`]?.toLowerCase()===optionValue.toLowerCase()),check=colorSwatches.find(c=>c.key.toLowerCase()===optionValue.toLowerCase()),customColor=check?check.value:"",{optionImage}=optNode.dataset;variant&&(variantImage=variant.featured_image?variant.featured_image.src:"",optNode.href=`${optNode.href}?variant=${variant.id}`,variantImage&&(!optionImage&&!customColor&&(optNode.style=`background-image: url(${getSizedImageUrl(variantImage,"60x")}) !important;`),optNode.setAttribute("data-src",getSizedImageUrl(variantImage,"900x")),optNode.setAttribute("data-srcset",getSrcset(variantImage)))),!customColor&&!variantImage&&optNode.style.setProperty("--bg-color",`${fallbackValue}`),customColor&&optNode.style.setProperty("--bg-color",`${customColor}`),optionImage&&(optNode.style=`background-image: url(${optionImage}) !important; --bg-color: ${customColor}`)})}onMouseEnter(e){const{target}=e;this.selected?.removeAttribute("aria-selected"),target?.setAttribute("aria-selected",!0);const{src,srcset}=target?.dataset;this.mainImage&&srcset&&(this.mainImage.src=src,this.mainImage.srcset=srcset),this.selected=target}getVariantData(){this.variantData=this.variantData||JSON.parse(this.nextElementSibling.textContent)}}customElements.define("color-swatch",ColorSwatch)}
//# sourceMappingURL=/cdn/shop/t/3/assets/color-swatch.js.map?v=46146424917567339341672340465