https://www.persol.com/cdn/shop/t/2/assets/po-monogram.js?v=162343681983857311071768572227

1class PoMonogram extends HTMLElement{constructor(){super(),this.textInputs=this.querySelectorAll(".js-text-inputs input"),this.inputFontFieldset=this.querySelector(".js-font-inputs"),this.fontInputs=this.querySelectorAll(".js-font-inputs input"),this.dynamicTextArea=this.querySelector(".js-monogram-dynamic-text"),this.applyButton=this.querySelector(".js-btn-apply-monogram"),this.productFormAddToCart=this.closest("product-info")?.querySelector(".js-pdp-po-main-buy-buttons product-form form"),this.monogramTextModalOpener=this.querySelector(".js-monogram-text-modal-opener"),this.monogramNotAppliedElements=this.querySelectorAll(".js-monogram--not-applied"),this.monogramAppliedElements=this.querySelectorAll(".js-monogram--applied"),this.removeButton=this.querySelector(".js-remove-monogram-button")}connectedCallback(){this.textInputs.forEach((input,index)=>{input.addEventListener("input",event=>{this.checkTextInputs(this.textInputs),input.value.length===1&&index<this.textInputs.length-1&&this.textInputs[index+1].focus()}),input.addEventListener("keydown",event=>{event.key==="Backspace"&&input.value===""&&index>0&&this.textInputs[index-1].focus()})}),this.inputFontFieldset.addEventListener("change",event=>{this.toggleCheckedInput(this.fontInputs,event),this.applyButton.setAttribute("data-monogram-font",event.target.value)}),this.applyButton.addEventListener("click",event=>{this.handleApplyMonogram(this.applyButton)}),this.removeButton.addEventListener("click",event=>{this.handleRemoveMonogram()}),subscribe(PUB_SUB_EVENTS.monogramRemoved,event=>{event.source!="internal"&&this.handleRemoveMonogram(!1)})}checkTextInputs(inputs){const combinedText=Array.from(inputs).map(input=>input.value.trim()).filter(value=>value!=="").join("").toUpperCase();this.applyButton.setAttribute("data-monogram-text",combinedText),this.dynamicTextArea.textContent=combinedText.split("").map(char=>char+".").join(" ").toUpperCase(),combinedText!=""?this.applyButton.removeAttribute("disabled"):this.applyButton.setAttribute("disabled","")}toggleCheckedInput(inputs,event){inputs.forEach(input=>{input.value===event.target.value?(input.setAttribute("checked",""),this.dynamicTextArea.style.fontFamily=input.dataset.fontFamily):input.removeAttribute("checked")})}handleApplyMonogram(element){if(element.dataset.monogramVariantId!=""&&element.dataset.monogramText!=""){let input=this.productFormAddToCart.querySelector('input[name="monogram-input"]');input?(input.dataset.monogramVariantId=element.dataset.monogramVariantId,input.dataset.monogramText=element.dataset.monogramText,input.dataset.monogramFont=element.dataset.monogramFont):(input=document.createElement("input"),input.type="hidden",input.name="monogram-input",input.className="js-nested-cart-item",input.dataset.monogramVariantId=element.dataset.monogramVariantId,input.dataset.monogramText=element.dataset.monogramText,input.dataset.monogramFont=element.dataset.monogramFont,this.productFormAddToCart.appendChild(input)),this.monogramTextModalOpener&&(this.monogramTextModalOpener.textContent=element.dataset.monogramText),this.updateTextElements(!0),publish(PUB_SUB_EVENTS.monogramApplied,{monogramText:element.dataset.monogramText,monogramFont:element.dataset.monogramFont})}}handleRemoveMonogram(shouldPublish=!0){let input=this.productFormAddToCart.querySelector('input[name="monogram-input"]');if(input){input.remove(),this.resetElements(),this.removeButton.blur(),this.updateTextElements(!1),shouldPublish&&publish(PUB_SUB_EVENTS.monogramRemoved,{source:"internal"});let poMonogramAlertDrawer=document.querySelector("po-monogram-alert-drawer");poMonogramAlertDrawer&&poMonogramAlertDrawer.setAttribute("hidden","")}}resetElements(){this.textInputs.forEach(input=>input.value=""),this.dynamicTextArea.textContent="",this.applyButton.setAttribute("disabled",""),this.applyButton.setAttribute("data-monogram-text",""),this.fontInputs.length&&(this.fontInputs.forEach((input,i)=>{input.checked=i===0}),this.dynamicTextArea.style.fontFamily=this.fontInputs[0].dataset.fontFamily),this.monogramTextModalOpener&&(this.monogramTextModalOpener.textContent="")}updateTextElements(monogramApplied){this.monogramNotAppliedElements.forEac

1h(element=>{element.setAttribute("aria-hidden",monogramApplied)}),this.monogramAppliedElements.forEach(element=>{element.setAttribute("aria-hidden",!monogramApplied)})}}customElements.define("po-monogram",PoMonogram);class PoMonogramAlertDrawer extends HTMLElement{constructor(){super(),this.productType=this.dataset.productType,this.alertRemoveButton=this.querySelector("[data-alert-monogram-remove]")}connectedCallback(){subscribe(PUB_SUB_EVENTS.monogramApplied,event=>{this.removeAttribute("hidden")}),this.alertRemoveButton.addEventListener("click",event=>{this.productType=="sun"&&publish(PUB_SUB_EVENTS.monogramRemoved,{source:"external"}),this.handleHideDrawer(),this.triggerClickRxcBtn()})}handleHideDrawer(){document.querySelector('input[name="monogram-input"]')||this.setAttribute("hidden","")}triggerClickRxcBtn(){let rxcButton=document.querySelector('button[name="rxc-activator"]');rxcButton&&rxcButton.click()}}customElements.define("po-monogram-alert-drawer",PoMonogramAlertDrawer);
2//# sourceMappingURL=/cdn/shop/t/2/assets/po-monogram.js.map?v=162343681983857311071768572227