https://chilewich.com/cdn/shop/t/335/assets/component-gift-card-re…?v=30249260698675860951790628822

1class GiftCardRecipientForm extends HTMLElement{constructor(){super(),this.checkbox=this.querySelector("[data-recipient-checkbox]"),this.formFields=this.querySelector("[data-recipient-fields]"),this.emailInput=this.querySelector("[data-recipient-email-input]"),this.emailError=this.querySelector("[data-recipient-email-error]"),this.messageInput=this.querySelector("[data-recipient-message-input]"),this.charCountCurrent=this.querySelector("[data-recipient-char-current]"),this.charCountMax=this.querySelector("[data-recipient-char-max]"),this.charCountContainer=this.querySelector("[data-recipient-char-count]"),this.hiddenInput=this.formFields?this.formFields.querySelector('input[type="hidden"][name*="__shopify_send_gift_card_to_recipient"]'):null,this.maxLength=this.messageInput&&parseInt(this.messageInput.getAttribute("maxlength"))||200,this.originalEmailName=this.emailInput?this.emailInput.getAttribute("name"):null,this.originalMessageName=this.messageInput?this.messageInput.getAttribute("name"):null,this.originalHiddenInputName=this.hiddenInput?this.hiddenInput.getAttribute("name"):null,this.isHiding=!1}connectedCallback(){this.formFields&&this.formFields.classList.contains("hidden")&&this.removeFormFieldNames(),this.checkbox&&this.checkbox.addEventListener("sl-change",this.handleCheckboxChange.bind(this)),this.formFields&&this.formFields.addEventListener("transitionend",this.handleTransitionEnd.bind(this)),this.emailInput&&(this.emailInput.addEventListener("sl-input",this.handleEmailInput.bind(this)),this.emailInput.addEventListener("sl-blur",this.handleEmailBlur.bind(this)),this.updateFilledClass(this.emailInput)),this.messageInput&&(this.messageInput.addEventListener("sl-input",this.updateCharacterCount.bind(this)),this.updateCharacterCount());const form=this.closest("form");form&&form.addEventListener("submit",this.handleFormSubmit.bind(this))}disconnectedCallback(){this.checkbox&&this.checkbox.removeEventListener("sl-change",this.handleCheckboxChange.bind(this)),this.formFields&&this.formFields.removeEventListener("transitionend",this.handleTransitionEnd.bind(this)),this.emailInput&&(this.emailInput.removeEventListener("sl-input",this.handleEmailInput.bind(this)),this.emailInput.removeEventListener("sl-blur",this.handleEmailBlur.bind(this))),this.messageInput&&this.messageInput.removeEventListener("sl-input",this.updateCharacterCount.bind(this));const form=this.closest("form");form&&form.removeEventListener("submit",this.handleFormSubmit.bind(this))}handleCheckboxChange(event){event.target.checked?this.showForm():this.hideForm()}updateFilledClass(input){input&&input.value&&input.value.trim()?input.classList.add("filled"):input&&input.classList.remove("filled")}handleEmailInput(){this.updateFilledClass(this.emailInput),this.clearEmailError()}handleEmailBlur(event){this.updateFilledClass(this.emailInput),this.validateEmail(event)}showForm(){this.formFields.classList.remove("hidden"),requestAnimationFrame(()=>{this.formFields.classList.add("visible")}),this.emailInput&&this.originalEmailName&&(this.emailInput.setAttribute("name",this.originalEmailName),this.emailInput.setAttribute("required","required")),this.messageInput&&this.originalMessageName&&this.messageInput.setAttribute("name",this.originalMessageName),this.hiddenInput&&this.originalHiddenInputName&&this.hiddenInput.setAttribute("name",this.originalHiddenInputName)}removeFormFieldNames(){this.emailInput&&(this.emailInput.removeAttribute("name"),this.emailInput.removeAttribute("required")),this.messageInput&&this.messageInput.removeAttribute("name"),this.hiddenInput&&this.hiddenInput.removeAttribute("name")}handleTransitionEnd(event){this.emailInput&&(this.emailInput.value="",this.emailInput.removeAttribute("data-user-invalid"),this.clearEmailError(),this.updateFilledClass(this.emailInput)),this.isHiding&&event.target===this.formFields&&event.propertyName==="max-height"&&(this.formFields.classList.add("hidden"),this.isHiding=!1,this.removeFormFieldNames(),this.messageInput&&(this.messageInput.value="",this.updateCharacterCount()))}hideForm(){this.isHiding=!0,this.formFields.classList.remove("visible")}isValidEmail(email){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)}validateEmail(event){if(this.formFields&&(this.formFields.classList.contains("hidden")||!this.formFields.classList.contains("visible")))return!0;const email=this.emailInput.value.trim();if(this.emailInput.checkValidity())return this.clearEmailError(),this.emailInput.setCustomValidity(""),this.emailInput.removeAttribute("data-user-invalid"),!0;{const errorMessage=email?"Please enter a valid email address":"Please enter an email address";return this.showEmailError(),this.emailInput.setCustomValidity(errorMessage),this.emailInput.setAttribute("data-user-invalid",""),!1}}showEmailError(){this.emailError&&this.emailError.classList.remove("hidden")}clearEmailError(){this.emailError&&this.emailError.classList.add("hidden"),this.emailInput&&(this.emailInput.setCustomValidity(""),this.emailInput.removeAttribute("data-user-invalid"))}updateCharacterCount(){if(!this.messageInput||!this.charCountCurrent)return;const currentLength=this.messageInput.value.length;this.charCountCurrent.textContent=currentLength,currentLength>this.maxLength*.9?(this.charCountContainer.classList.remove("c-grey-400"),this.charCountContainer.classList.add("c-grey-600")):(this.charCountContainer.classList.remove("c-grey-600"),this.charCountContainer.classList.add("c-grey-400"))}handleFormSubmit(event){if(this.formFields&&!this.formFields.classList.contains("hidden")&&this.formFields.classList.contains("visible")){const email=this.emailInput.value.trim();if(!this.emailInput.checkValidity()){event.preventDefault();const errorMessage=email?"Please enter a valid email address":"Please enter an email address";return this.showEmailError(),this.emailInput.setCustomValidity(errorMessage),this.emailInput.setAttribute("data-user-invalid",""),this.emailInput.focus(),!1}}return!0}}typeof customElements.get("gift-card-recipient-form")>"u"&&customElements.define("gift-card-recipient-form",GiftCardRecipientForm);
2//# sourceMappingURL=/cdn/shop/t/335/assets/component-gift-card-recipient-form.js.map?v=30249260698675860951790628822