https://drinkmockly.com/cdn/shop/t/35/assets/component-product-form.js?v=7283852649402684351772755047

1import{gsap}from"gsap";import{cart}from"@mockly/cart";const selectors={form:"form",submitButton:"[data-submit-button]",submitTextIdle:"[data-submit-text-idle]",submitTextBusy:"[data-submit-text-busy]",submitTextSuccess:"[data-submit-text-success]",submitTextActive:"[data-active-text]",error:"[data-error]",errorText:"[data-error-text]"};class ComponentProductForm extends HTMLElement{#error=null;constructor(){super(),this.handleSubmit=this.handleSubmit.bind(this),this.animateSubmitText=this.animateSubmitText.bind(this)}animateSubmitText(state="idle"){const activeText=state==="idle"?this.submitTextIdle:state==="busy"?this.submitTextBusy:this.submitTextSuccess,inactiveText=this.querySelector(selectors.submitTextActive);activeText?.setAttribute("data-active-text",!0),inactiveText?.removeAttribute("data-active-text"),gsap.fromTo(activeText,{opacity:0,yPercent:50},{opacity:1,yPercent:0,duration:.84,ease:"elastic.out(1, 0.9)",overwrite:!0}),gsap.fromTo(inactiveText,{opacity:1,yPercent:0},{opacity:0,yPercent:-50,duration:.84,ease:"elastic.out(1, 0.9)",overwrite:!0})}updateError(){this.#error?(this.error?.removeAttribute("aria-hidden"),this.errorText&&(this.errorText.textContent=this.#error)):(this.error?.setAttribute("aria-hidden","true"),this.errorText&&(this.errorText.textContent=""))}async handleSubmit(event){event.preventDefault();const formData=new FormData(this.form),data=Object.fromEntries(formData);this.#error=null,this.updateError();const payload={items:[{id:data.id,quantity:data.quantity??1}]};this.animateSubmitText("busy"),this.submitButton?.setAttribute("disabled",!0),this.submitButton?.setAttribute("aria-busy",!0);try{await cart.add(payload),this.animateSubmitText("success"),setTimeout(()=>{this.animateSubmitText("idle"),this.submitButton?.removeAttribute("disabled")},2e3)}catch(error){this.#error=error.message,this.updateError(),this.animateSubmitText("idle"),this.submitButton?.removeAttribute("disabled")}finally{this.submitButton?.removeAttribute("aria-busy")}}connectedCallback(){if(this.form=this.querySelector(selectors.form),this.submitButton=this.querySelector(selectors.submitButton),this.submitTextIdle=this.querySelector(selectors.submitTextIdle),this.submitTextBusy=this.querySelector(selectors.submitTextBusy),this.submitTextSuccess=this.querySelector(selectors.submitTextSuccess),this.error=this.querySelector(selectors.error),this.errorText=this.querySelector(selectors.errorText),!this.form)throw new Error("No product form found in ComponentProductForm");this.form.addEventListener("submit",this.handleSubmit)}disconnectedCallback(){this.form.removeEventListener("submit",this.handleSubmit)}}customElements.get("product-form")||customElements.define("product-form",ComponentProductForm);
2//# sourceMappingURL=/cdn/shop/t/35/assets/component-product-form.js.map?v=7283852649402684351772755047