https://diamondrensu.com/cdn/shop/t/277/assets/component-variant-options.js?v=163842857758988838681785837107

1class VariantSelects extends HTMLElement{constructor(){super(),this.formParent=this.closest("product-form"),this.form=this.formParent.querySelector("form")||null,this.formType=this.formParent.dataset.format||null,this.variant_json=this.querySelector("[data-variantJSON]"),this.metalTone=this.querySelector("[data-metaltone]"),this.container=this.formType==="product-card"?this.closest("[data-product-card]"):this.closest("[data-product-container]")}connectedCallback(){this.updateSwatchLabel(),this.formType==="product-page"&&this.onVariantChange("load"),this.addEventListener("change",evt=>{const target=this.getInputForEventTarget(evt.target);if(target.tagName==="SELECT"){const errorDiv=target.parentElement.querySelector(".validation-error");errorDiv&&errorDiv.classList.add("d-none")}else if(target.tagName==="INPUT"){const fieldset=target.closest("fieldset");if(fieldset){const errorDiv=fieldset.querySelector(".validation-error");errorDiv&&errorDiv.classList.add("d-none")}const container=target.closest('[data-optionindex="metalType"], [data-optionindex="metalTone"]');if(container){const errorDiv=container.querySelector(".validation-error");errorDiv&&errorDiv.classList.add("d-none")}}this.updateSelectedOptionLabel(target),eventBus.publish(PUB_SUB_EVENTS.optionChange,{data:{target,selectedOptionsId:this.optionValues}}),this.onVariantChange(),this.targetValue=target.value.replace(" CT","").replace(" ct","").replace(" CT","").replace(" ct",""),(target.name=="Diamond Size"||target.name=="diamond size")&&(this.targetValue>=.5?document.querySelector(".igi-certified")?.classList.remove("d-none"):document.querySelector(".igi-certified")?.classList.add("d-none"))}),this.manageMetalSelection()}validateOptions(){let isValid=!0;this.querySelectorAll(".validation-error").forEach(error=>error.classList.add("d-none"));const metalTypeFieldset=this.querySelector("[data-metal-swatches]");if(metalTypeFieldset){const hasMetalTypeSelection=metalTypeFieldset.querySelector('input[type="radio"]:checked'),errorDiv=metalTypeFieldset.querySelector(".validation-error");hasMetalTypeSelection?errorDiv&&errorDiv.classList.add("d-none"):(isValid=!1,errorDiv&&errorDiv.classList.remove("d-none"))}this.querySelectorAll('fieldset[data-optionindex]:not([data-optionindex="ring_size"])').forEach(fieldset=>{const hasSelection=fieldset.querySelector('input[type="radio"]:checked'),errorDiv=fieldset.querySelector(".validation-error");hasSelection?errorDiv&&errorDiv.classList.add("d-none"):(isValid=!1,errorDiv&&errorDiv.classList.remove("d-none"))}),this.querySelectorAll("select.variant_selector").forEach(select=>{const errorDiv=select.parentElement.querySelector(".validation-error");select.value?errorDiv&&errorDiv.classList.add("d-none"):(isValid=!1,errorDiv&&(errorDiv.classList.remove("d-none"),errorDiv.scrollIntoView({behavior:"smooth",block:"start"})))});const closerFieldset=this.querySelector('fieldset[data-optionindex="closer"]');if(closerFieldset){const hasCloserSelection=closerFieldset.querySelector('input[type="radio"]:checked'),errorDiv=closerFieldset.querySelector(".validation-error");hasCloserSelection?errorDiv&&errorDiv.classList.add("d-none"):(isValid=!1,errorDiv&&(errorDiv.classList.remove("d-none"),errorDiv.scrollIntoView({behavior:"smooth",block:"start"})))}const ringSizeSelect=this.querySelector('fieldset[data-optionindex="ring_size"]');if(ringSizeSelect){const hasSelection=ringSizeSelect.querySelector("select"),errorDiv=ringSizeSelect.querySelector(".validation-error");hasSelection.value?errorDiv&&errorDiv.classList.add("d-none"):(isValid=!1,errorDiv&&(errorDiv.classList.remove("d-none"),errorDiv.scrollIntoView({behavior:"smooth",block:"end"})))}return isValid}updateSwatchLabel(){const colorSwatchContainer=this.querySelector(".color-swatch");colorSwatchContainer&&colorSwatchContainer.querySelectorAll(".swatch").forEach(swatch=>{const colorHandle=swatch.querySelector('input[type="radio"]').dataset.handle,swatchStyle=Utility.getSwatchStyle(colorHandle);swatch.querySelector(".swatch-label").setAttribute("style",swatchStyle)})}onVariantChange(){this.setCurrentVariant(),eventBus.publish(PUB_SUB_EVENTS.variantChange,{data:{container:this.container,variant:this.currentVariant}}),this.formType==="product-page"&&this.currentVariant&&(globalSpace.product.currentVariant=this.currentVariant),typeof this.formParent?.updateProductDetails=="function"&&this.formParent.updateProductDetails(this.container,this.currentVariant)}get selectedOptionValues(){return Array.from(this.querySelectorAll('select.variant_selector, fieldset input[type="radio"]:checked')).map(({value})=>value)}setCurrentVariant(){this.currentVariant=!1;const options=this.selectedOptionValues,variants=this._getVariantData();let metalSwatchIndex=this.querySelector("[data-metal-swatches]")?.dataset?.optionindex;if(metalSwatchIndex=metalSwatchIndex-1,metalSwatchIndex&&metalSwatchIndex>=1){const selectedMetal=options[metalSwatchIndex];options.splice(metalSwatchIndex,1),options.splice(0,0,selectedMetal)}variants.find(variant=>{variant.options.every((option,i)=>options[i]===option)&&(this.currentVariant=variant)})}updateSelectedOptionLabel(target){if(target.tagName==="SELECT"||target.tagName==="OPTION"){let selectedOption;if(target.tagName=="OPTION"?(selectedOption=target,target.closest("select").classList.contains("ring-form-select")&&this.updateSelectedRingSize(selectedOption)):(selectedOption=target.selectedOptions[0],target.classList.contains("ring-form-select")&&this.updateSelectedRingSize(selectedOption)),selectedOption){const label=target.closest("fieldset").querySelector(".selected-option");label&&(label.innerHTML=selectedOption.dataset.valueLabel)}}else if(target.tagName==="INPUT"){const fieldset=target.closest("fieldset");if(fieldset){const selectedOption=fieldset.querySelector('input[type="radio"]:checked');if(selectedOption){let selectedValue=selectedOption.dataset.valueLabel;const label=fieldset.querySelector(".selected-option");label&&(label.innerHTML=selectedValue),selectedOption.closest("[data-metal-swatches]")&&(selectedOption.dataset.tone?.includes("Gold")?this.metalTone&&(this.metalTone.disabled=!1,this.metalTone.value=selectedOption.dataset.tone):this.metalTone&&(this.metalTone.value="",this.metalTone.disabled=!0))}}}}updateSelectedRingSize(target){const ringSizeContent=document.querySelector("#product-ringsize-content");ringSizeContent&&(target.value?(ringSizeContent.querySelector("[data-ring-size-value]").innerText=target.value,ringSizeContent.querySelector("[data-ring-size-diameter]").innerText=target.dataset.insideSize,ringSizeContent.querySelector("[data-ring-size-details]").classList.remove("d-none"),ringSizeContent.querySelector("[data-selected-ring-size]").classList.add("d-none")):(ringSizeContent.querySelector("[data-selected-ring-size]").classList.remove("d-none"),ringSizeContent.querySelector("[data-ring-size-details]").classList.add("d-none")))}_getVariantData(){return this.variantData=this.variantData||JSON.parse(this.variant_json?.textContent),this.variantData}getInputForEventTarget(target){return target.tagName==="SELECT"?target.selectedOptions[0]:target}get optionValues(){return Array.from(this.querySelectorAll("select option[selected], fieldset input:checked")).map(({dataset})=>dataset.optionValueId)}manageMetalSelection(){const metalButtons=this.querySelectorAll(".metal-selection-btn"),swatchInputs=this.querySelectorAll(".metal-swatch [data-metaltype]");metalButtons.forEach(btn=>{btn.addEventListener("click",evt=>{const selectedValue=evt.currentTarget.dataset.value;this.querySelector(".metal-selection-btn.active")?.classList.remove("active"),evt.currentTarget.classList.add("active"),selectedValue=="gold"?(swatchInputs.forEac

1h(input=>{input.classList.toggle("d-none",input.dataset.metaltype!==selectedValue)}),Array.from(swatchInputs).filter(input=>!input.classList.contains("d-none"))[0]?.querySelector(".swatch-label")?.click()):(swatchInputs.forEach(input=>{input.dataset.metaltype!=selectedValue&&input.classList.add("d-none")}),this.querySelector(`.metal-swatch [data-metaltype="${selectedValue}"] .swatch-label`)?.click())})})}}customElements.define("variant-selects",VariantSelects);
2//# sourceMappingURL=/cdn/shop/t/277/assets/component-variant-options.js.map?v=163842857758988838681785837107