https://magneticme.com/cdn/shop/t/540/assets/custom-monogram.DLvabuzh.min.js

1import{b as r,c as h,i as a,s as l}from"./theme.C7kpm9kZ.min.js";import"./modulepreload-polyfill.Dhk-xt_0.min.js";const n={open:"is-open",error:"has-error"};class c extends HTMLElement{constructor(){var t;super(),this.trigger=this.querySelector(".js-trigger"),this.content=this.querySelector(".js-content"),this.inputEl=this.querySelector(".js-monogram-text"),this.counter=this.querySelector(".js-character-count"),this.fontInputs=this.querySelectorAll(".js-font-input"),this.selectedFont=this.querySelector(".js-selected-font"),this.colorInputs=this.querySelectorAll(".js-color-input"),this.selectedColor=this.querySelector(".js-selected-color"),this.payloadInput=this.querySelector(".js-embroidery-customization-payload"),this.previewText=this.querySelector(".js-monogram-preview-text"),this.maxCharacters=r((t=this.inputEl)==null?void 0:t.getAttribute("maxlength")),this.toggle=this.toggle.bind(this),this.handleInput=this.handleInput.bind(this),this.handleFontChange=this.handleFontChange.bind(this),this.handleColorChange=this.handleColorChange.bind(this)}connectedCallback(){!this.trigger||!this.content||(this.trigger.addEventListener("click",this.toggle),this.inputEl&&(this.inputEl.addEventListener("input",this.handleInput),this.handleInput()),this.fontInputs.forEach(t=>{t.addEventListener("change",this.handleFontChange)}),this.colorInputs.forEach(t=>{t.addEventListener("change",this.handleColorChange)}),this.initColor(),this.initFont(),this.syncPreview(),this.syncPayload())}disconnectedCallback(){var t,e,s;(t=this.trigger)==null||t.removeEventListener("click",this.toggle),(e=this.inputEl)==null||e.removeEventListener("input",this.handleInput),this.fontInputs.forEach(i=>{i.removeEventListener("change",this.handleFontChange)}),(s=this.colorInputs)==null||s.forEach(i=>{i.removeEventListener("change",this.handleColorChange)})}handleColorChange(t){const e=t.target;e.checked&&(this.selectedColor&&(this.selectedColor.textContent=e.value),this.syncPreview(),this.syncPayload())}initColor(){const t=this.querySelector(".js-color-input:checked");t&&this.selectedColor&&(this.selectedColor.textContent=t.value)}handleFontChange(t){const e=t.target;e.checked&&(this.selectedFont&&(this.selectedFont.textContent=e.value),this.syncPreview(),this.syncPayload())}handleInput(){const t=this.inputEl.value,e=t.length;let s="";this.counter&&(this.counter.textContent=`${e}/${this.maxCharacters}`),e>this.maxCharacters?s=`Enter no more than ${this.maxCharacters} characters.`:/[^A-Za-z0-9 ]/.test(t)?s="Use letters, numbers, and spaces only.":t.length>0&&t.trim().length===0&&(s="Enter at least one letter or number."),this.inputEl.setCustomValidity(s),this.classList.toggle(n.error,!!s),this.syncPreview(),this.syncPayload()}initFont(){const t=this.getSelectedFontInput();t&&this.selectedFont&&(this.selectedFont.textContent=t.value),this.syncPreview()}getSelectedFontInput(){return this.querySelector(".js-font-input:checked")}getSelectedColorInput(){return this.querySelector(".js-color-input:checked")}syncPreview(){var i,o;if(!this.previewText)return;const t=((i=this.inputEl)==null?void 0:i.value.trim())||this.previewText.dataset.emptyText||"Name",e=this.getSelectedFontInput(),s=this.getSelectedColorInput();this.previewText.textContent=t,this.previewText.dataset.embroideryFont=((o=e==null?void 0:e.closest("[data-embroidery-font]"))==null?void 0:o.dataset.embroideryFont)||"",this.previewText.style.setProperty("--preview-color",(s==null?void 0:s.dataset.embroideryColor)||"#FFFFFF")}getPayload(){var t,e,s;return h({text:(t=this.inputEl)==null?void 0:t.value,font:(e=this.getSelectedFontInput())==null?void 0:e.value,threadColor:(s=this.getSelectedColorInput())==null?void 0:s.value})}syncPayload(){if(!this.payloadInput)return;const t=this.getPayload();if(!this.isOpen()||!a(t,this.maxCharacters)){this.payloadInput.value="",this.payloadInput.disabled=!0;return}this.payloadInput.value=l({text:t.embroidery_text,font:t.embroidery_font,threadColor:t.embroidery_thread_color},this.maxCharacters),this.payloadInput.disabled=!1}isOpen(){return this.classList.contains(n.open)}toggle(){this.isOpen()?this.close():this.open()}open(){var e;this.classList.add(n.open),this.trigger.setAttribute("aria-expanded","true"),(e=this.inputEl)==null||e.setAttribute("required","required");const t=this.content.scrollHeight;this.content.style.maxHeight=`${t}px`,this.handleInput()}close(){var t,e;this.classList.remove(n.open),this.trigger.setAttribute("aria-expanded","fal

1se"),(t=this.inputEl)==null||t.removeAttribute("required"),(e=this.inputEl)==null||e.setCustomValidity(""),this.content.style.maxHeight="0px",this.syncPayload()}}customElements.define("custom-monogram",c);