@pairbo/ui-kit 0.3.15 → 0.3.16

package/dist/ui-kit.js

@@ -1474,12 +1474,12 @@
   .skip::part(label) {
     font-size: 14px;
   }
-`,gi=()=>/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent),ws=o=>o!=null,Kl=o=>Object.entries(o).reduce((t,[e,i])=>(i==null||(t[e]=i),t),{});function Nu(o,t){let e;return function(...i){clearTimeout(e),e=setTimeout(()=>o.apply(this,i),t)}}var Vu=Object.defineProperty,Uu=Object.getOwnPropertyDescriptor,At=(o,t,e,i)=>{for(var s=i>1?void 0:i?Uu(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&Vu(t,e,s),s};let K=class extends gt{constructor(){super(...arguments),this.resizeTimeout=null,this.cardInnerImageUrl="../../../public/Greeting Card from Pairbo.png",this.card=null,this.submitTypeForm=async t=>{console.error("submitTypingForm function not implemented",t)},this.loading=!1,this.disabled=!1,this.onClose=()=>{},this.windowHeight=window.innerHeight,this.charsNum=0,this.ctaButtonState=K.CTA_STATES.primary,this.wrappedSubmitTypeForm=async t=>{console.warn("submitTypingForm function not implemented",t)},this.handleResize=()=>{this.resizeTimeout&&window.clearTimeout(this.resizeTimeout),this.resizeTimeout=window.setTimeout(()=>{this.windowHeight=window.innerHeight},50)}}updateWrappedSubmitTypeForm(){this.wrappedSubmitTypeForm=async t=>{this.loading=!0,this.disabled=!0;try{this.submitTypeForm(t),this.onClose(),this.emit("pbo-type-form-submitted")}catch(e){console.error("Error submitting type form:",e)}finally{this.loading=!1,this.disabled=!1}}}firstUpdated(){console.log("Is type-form disabled: ",this.disabled,this.loading),this.textArea.addEventListener("invalid",()=>{alert("Please add a message to continue")})}get formData(){var e,i,s,r,n,a,l,c;const t={pboCardId:((e=this.card)==null?void 0:e.pboId)||"Unknown",productId:(i=this.card)==null?void 0:i.productId,sku:(s=this.card)==null?void 0:s.sku,variantId:(r=this.card)==null?void 0:r.variantId,font:((n=this.fontSelector)==null?void 0:n.value)||"",text:((a=this.greetingText)==null?void 0:a.value)||"",color:((l=this.textColor)==null?void 0:l.value)||"",alignment:((c=this.textAlignment)==null?void 0:c.value)||""};return Kl(t)}handleFormChange(t){var e;this.ctaButtonState=K.CTA_STATES.primary,this.charsNum=((e=this.greetingText)==null?void 0:e.value.length)||0,this.emit("pbo-type-form-change",{detail:this.formData})}hostConnected(){this.addEventListener("pbo-change",this.handleFormChange)}hostDisconnected(){this.removeEventListener("pbo-change",this.handleFormChange)}submitFormHandler(t){var i;t.preventDefault();const e=(i=t.submitter)==null?void 0:i.name;if(this.ctaButtonState.type==="danger"){e==="skip"&&this.wrappedSubmitTypeForm(this.formData);return}if(this.greetingText.value===""||this.greetingText.value===null||this.greetingText.value===void 0){this.ctaButtonState=K.CTA_STATES.danger,this.greetingText.focus();return}this.wrappedSubmitTypeForm(this.formData)}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize),this.resizeTimeout&&window.clearTimeout(this.resizeTimeout)}render(){const t=223-this.charsNum;return L`
+`,gi=()=>/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent),ws=o=>o!=null,Kl=o=>Object.entries(o).reduce((t,[e,i])=>(i==null||(t[e]=i),t),{});function Nu(o,t){let e;return function(...i){clearTimeout(e),e=setTimeout(()=>o.apply(this,i),t)}}var Vu=Object.defineProperty,Uu=Object.getOwnPropertyDescriptor,At=(o,t,e,i)=>{for(var s=i>1?void 0:i?Uu(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&Vu(t,e,s),s};let K=class extends gt{constructor(){super(...arguments),this.resizeTimeout=null,this.cardInnerImageUrl="../../../public/Greeting Card from Pairbo.png",this.card=null,this.submitTypeForm=async t=>{console.error("submitTypingForm function not implemented",t)},this.loading=!1,this.disabled=!1,this.onClose=()=>{},this.windowHeight=window.innerHeight,this.charsNum=0,this.ctaButtonState=K.CTA_STATES.primary,this.wrappedSubmitTypeForm=async t=>{console.warn("submitTypingForm function not implemented",t)},this.handleResize=()=>{this.resizeTimeout&&window.clearTimeout(this.resizeTimeout),this.resizeTimeout=window.setTimeout(()=>{this.windowHeight=window.innerHeight},50)}}updateWrappedSubmitTypeForm(){this.wrappedSubmitTypeForm=async t=>{this.loading=!0,this.disabled=!0;try{this.submitTypeForm(t),this.onClose(),this.emit("pbo-type-form-submitted")}catch(e){console.error("Error submitting type form:",e)}finally{this.loading=!1,this.disabled=!1}}}firstUpdated(){this.textArea.addEventListener("invalid",()=>{alert("Please add a message to continue")})}get formData(){var e,i,s,r,n,a,l,c;const t={pboCardId:((e=this.card)==null?void 0:e.pboId)||"Unknown",productId:(i=this.card)==null?void 0:i.productId,sku:(s=this.card)==null?void 0:s.sku,variantId:(r=this.card)==null?void 0:r.variantId,font:((n=this.fontSelector)==null?void 0:n.value)||"",text:((a=this.greetingText)==null?void 0:a.value)||"",color:((l=this.textColor)==null?void 0:l.value)||"",alignment:((c=this.textAlignment)==null?void 0:c.value)||""};return Kl(t)}handleFormChange(t){var e;this.ctaButtonState=K.CTA_STATES.primary,this.charsNum=((e=this.greetingText)==null?void 0:e.value.length)||0,this.emit("pbo-type-form-change",{detail:this.formData})}hostConnected(){this.addEventListener("pbo-change",this.handleFormChange)}hostDisconnected(){this.removeEventListener("pbo-change",this.handleFormChange)}submitFormHandler(t){var i;t.preventDefault();const e=(i=t.submitter)==null?void 0:i.name;if(this.ctaButtonState.type==="danger"){e==="skip"&&this.wrappedSubmitTypeForm(this.formData);return}if(this.greetingText.value===""||this.greetingText.value===null||this.greetingText.value===void 0){this.ctaButtonState=K.CTA_STATES.danger,this.greetingText.focus();return}this.wrappedSubmitTypeForm(this.formData)}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize),this.resizeTimeout&&window.clearTimeout(this.resizeTimeout)}render(){const t=223-this.charsNum;return L`
       <form class="typing-form" @submit=${this.submitFormHandler}>
         <pbo-textarea
           exportparts="textarea:editor-textarea"
           class="greeting-text"
-          @pbo-input=${this.handleFormChange}
+          @pbo-input=${e=>{this.handleFormChange(e),this.emit("pbo_edit_type_form",{detail:{action:"message"}})}}
           help-text=${t===1?`${t} character`:`${t} characters`}
           maxlength="223"
           rows="${window.innerHeight>=800?12:8}"
@@ -1495,7 +1495,7 @@
           class="font-selector"
           exportparts="form-control-label:font-selector-label,base:font-selector-base,form-control-label:type-form-label"
           .fonts="${[{value:"Calibri",label:"Calibri",font:"Calibri, sans-serif"},{value:"Caveat",label:"Caveat",font:"Caveat, cursive"},{value:"Dancing Script",label:"Dancing Script",font:"Dancing Script, cursive"},{value:"Kalam",label:"Kalam",font:"Kalam, cursive"},{value:"Sacramento",label:"Sacramento",font:"Sacramento, cursive"},{value:"Reenie Beanie",label:"Reenie Beanie",font:"Reenie Beanie, cursive"}]}"
-          @pbo-change=${this.handleFormChange}
+          @pbo-change=${e=>{this.handleFormChange(e),this.emit("pbo_edit_type_form",{detail:{action:"font"}})}}
           size="large"
           ?disabled="${this.disabled}"
         ></pbo-font-selector>
@@ -1503,7 +1503,7 @@
         <div class="color-alignment-container">
           <pbo-radio-group 
             class="text-color" 
-            @pbo-change=${this.handleFormChange} 
+            @pbo-change=${e=>{this.handleFormChange(e),this.emit("pbo_edit_type_form",{detail:{action:"color"}})}} 
             value="rgb(0,0,0)" 
             label="Color"
             size="large"
@@ -1515,7 +1515,7 @@
 
           <pbo-radio-group
             class="text-alignment"
-            @pbo-change=${this.handleFormChange}
+            @pbo-change=${e=>{this.handleFormChange(e),this.emit("pbo_edit_type_form",{detail:{action:"alignment"}})}}
             value="left"
             label="Align"
             size="large"
@@ -3381,7 +3381,7 @@ void main() {
         style="${ue({"--track-width":"3px","--indicator-color":"black"})}"
       ></pbo-spinner>
       <span>${Math.round(this.progress)}%</span>
-    </div>`}};He.styles=[pt,Hm];He.dependencies={"pbo-spinner":rs};Js([C({type:Boolean,reflect:!0})],He.prototype,"loading",2);Js([C({type:Number})],He.prototype,"loadingTime",2);Js([C()],He.prototype,"loadingPattern",2);Js([$()],He.prototype,"progress",2);He=Js([dt("pbo-fake-loading")],He);var Um=Object.defineProperty,Wm=Object.getOwnPropertyDescriptor,st=(o,t,e,i)=>{for(var s=i>1?void 0:i?Wm(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&Um(t,e,s),s};let Z=class extends gt{constructor(){super(...arguments),this.card=null,this.submitHandwrittenForm=async t=>{console.warn("submitHandwrittenForm not implemented",t)},this.getProcessedImg=async t=>(console.warn("getProcessedImg not implemented",t.name),{masked_img:"",uid:""}),this.onClose=()=>{console.warn("onClose not implemented")},this.isSubmitLoading=!1,this.isSubmitDisabled=!1,this.isProcessingError=!1,this.isImageProcessing=!1,this.sourceImg=null,this.processedImg={uid:null,masked_img:null},this.handwrittenDimensions={top:null,left:null,width:null,height:null,cardHeight:null,cardWidth:null}}showPicker(){this.imageInput.showPicker()}setButtonsDisabled(t){this.uploadButton&&this.saveButton&&this.reuploadButton&&(this.uploadButton.disabled=t,this.saveButton.disabled=t,this.reuploadButton.disabled=t)}setButtonsError(t){this.uploadButton&&this.saveButton&&(this.uploadButton.variant=t?"danger":"primary",this.saveButton.variant=t?"danger":"primary",this.uploadButton.value=t?"Error uploading image":"Upload Handwritten Image")}setButtonsLoading(t){this.uploadButton&&this.saveButton&&(this.saveButton.loading=t)}handleSubmitLoadingChange(){this.setButtonsLoading(this.isSubmitLoading)}handleSubmitDisabledChange(){this.setButtonsDisabled(this.isSubmitDisabled)}handleProcessingErrorChange(){this.setButtonsError(this.isProcessingError)}handleSourceImgChange(t,e){this.processedImg={uid:null,masked_img:null},this.emit("pbo-change",{detail:{isLoading:!0,processedFileUrl:null}})}handleProcessImageChange(t,e){this.emit("pbo-change",{detail:{isLoading:!1,processedFileUrl:e}})}handleImageProcessingChange(){this.setButtonsDisabled(this.isImageProcessing),this.setButtonsLoading(this.isImageProcessing),this.emit("pbo-image-processing",{detail:{isLoading:this.isImageProcessing}})}get formData(){var s,r,n,a;const t=177.8/this.handwrittenDimensions.cardHeight,e=127/this.handwrittenDimensions.cardWidth,i={pboCardId:((s=this.card)==null?void 0:s.pboId)||"Unknown",productId:(r=this.card)==null?void 0:r.productId,sku:(n=this.card)==null?void 0:n.sku,variantId:(a=this.card)==null?void 0:a.variantId,pred_image_uid:this.processedImg.uid||"",position_x:this.handwrittenDimensions.top*e,position_y:this.handwrittenDimensions.left*t,height:this.handwrittenDimensions.height*t,width:this.handwrittenDimensions.width*e};return Kl(i)}setDimensions(t){this.handwrittenDimensions=t}handleProcessedImgChange(){this.processedImg.masked_img&&this.emit("pbo-change",{detail:{isLoading:!1,processedFileUrl:this.processedImg.masked_img}})}async handleFileChange(t){var i,s;this.sourceImg===null&&this.processedImg.masked_img===null?this.emit("pbo_edit_handwritten_form",{detail:{action:"upload"}}):this.emit("pbo_edit_handwritten_form",{detail:{action:"reupload"}}),this.sourceImg=null,this.processedImg={uid:null,masked_img:null},this.isProcessingError=!1;const e=(s=(i=t.target)==null?void 0:i.files)==null?void 0:s[0];if(e!=null){this.sourceImg=e,this.isImageProcessing=!0,this.updateComplete.then(()=>{this.uploadButton.scrollIntoView(!0)});try{const r=await this.getProcessedImg(e);console.log(r),this.processedImg={masked_img:`data:image/png;base64,${r.masked_img}`,uid:r.uid}}catch{this.isProcessingError=!0}finally{this.isImageProcessing=!1}}}async handleSubmit(t){t.preventDefault(),this.isSubmitLoading=!0,this.isSubmitDisabled=!0;try{await this.submitHandwrittenForm(this.formData),this.onClose(),this.emit("pbo-handwritten-form-submitted")}catch(e){console.error("Error submitting handwritten form:",e)}finally{this.isSubmitLoading=!1,this.isSubmitDisabled=!1}}render(){return L`
+    </div>`}};He.styles=[pt,Hm];He.dependencies={"pbo-spinner":rs};Js([C({type:Boolean,reflect:!0})],He.prototype,"loading",2);Js([C({type:Number})],He.prototype,"loadingTime",2);Js([C()],He.prototype,"loadingPattern",2);Js([$()],He.prototype,"progress",2);He=Js([dt("pbo-fake-loading")],He);var Um=Object.defineProperty,Wm=Object.getOwnPropertyDescriptor,st=(o,t,e,i)=>{for(var s=i>1?void 0:i?Wm(t,e):t,r=o.length-1,n;r>=0;r--)(n=o[r])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&Um(t,e,s),s};let Z=class extends gt{constructor(){super(...arguments),this.card=null,this.submitHandwrittenForm=async t=>{console.warn("submitHandwrittenForm not implemented",t)},this.getProcessedImg=async t=>(console.warn("getProcessedImg not implemented",t.name),{masked_img:"",uid:""}),this.onClose=()=>{console.warn("onClose not implemented")},this.isSubmitLoading=!1,this.isSubmitDisabled=!1,this.isProcessingError=!1,this.isImageProcessing=!1,this.sourceImg=null,this.processedImg={uid:null,masked_img:null},this.handwrittenDimensions={top:null,left:null,width:null,height:null,cardHeight:null,cardWidth:null}}showPicker(){this.imageInput.showPicker()}setButtonsDisabled(t){this.uploadButton&&this.saveButton&&this.reuploadButton&&(this.uploadButton.disabled=t,this.saveButton.disabled=t,this.reuploadButton.disabled=t)}setButtonsError(t){this.uploadButton&&this.saveButton&&(this.uploadButton.variant=t?"danger":"primary",this.saveButton.variant=t?"danger":"primary",this.uploadButton.value=t?"Error uploading image":"Upload Handwritten Image")}setButtonsLoading(t){this.uploadButton&&this.saveButton&&(this.saveButton.loading=t)}handleSubmitLoadingChange(){this.setButtonsLoading(this.isSubmitLoading)}handleSubmitDisabledChange(){this.setButtonsDisabled(this.isSubmitDisabled)}handleProcessingErrorChange(){this.setButtonsError(this.isProcessingError)}handleSourceImgChange(t,e){this.processedImg={uid:null,masked_img:null},this.emit("pbo-change",{detail:{isLoading:!0,processedFileUrl:null}})}handleProcessImageChange(t,e){this.emit("pbo-change",{detail:{isLoading:!1,processedFileUrl:e}})}handleImageProcessingChange(){this.setButtonsDisabled(this.isImageProcessing),this.setButtonsLoading(this.isImageProcessing),this.emit("pbo-image-processing",{detail:{isLoading:this.isImageProcessing}})}get formData(){var s,r,n,a;const t=177.8/this.handwrittenDimensions.cardHeight,e=127/this.handwrittenDimensions.cardWidth,i={pboCardId:((s=this.card)==null?void 0:s.pboId)||"Unknown",productId:(r=this.card)==null?void 0:r.productId,sku:(n=this.card)==null?void 0:n.sku,variantId:(a=this.card)==null?void 0:a.variantId,pred_image_uid:this.processedImg.uid||"",position_x:this.handwrittenDimensions.top*e,position_y:this.handwrittenDimensions.left*t,height:this.handwrittenDimensions.height*t,width:this.handwrittenDimensions.width*e};return Kl(i)}setDimensions(t){this.handwrittenDimensions=t}handleProcessedImgChange(){this.processedImg.masked_img&&this.emit("pbo-change",{detail:{isLoading:!1,processedFileUrl:this.processedImg.masked_img}})}async handleFileChange(t){var i,s;this.sourceImg===null&&this.processedImg.masked_img===null?this.emit("pbo_edit_handwritten_form",{detail:{action:"upload"}}):this.emit("pbo_edit_handwritten_form",{detail:{action:"reupload"}}),this.sourceImg=null,this.processedImg={uid:null,masked_img:null},this.isProcessingError=!1;const e=(s=(i=t.target)==null?void 0:i.files)==null?void 0:s[0];if(e!=null){this.sourceImg=e,this.isImageProcessing=!0,this.updateComplete.then(()=>{this.uploadButton.scrollIntoView(!0)});try{const r=await this.getProcessedImg(e);this.processedImg={masked_img:`data:image/png;base64,${r.masked_img}`,uid:r.uid}}catch{this.isProcessingError=!0}finally{this.isImageProcessing=!1}}}async handleSubmit(t){t.preventDefault(),this.isSubmitLoading=!0,this.isSubmitDisabled=!0;try{await this.submitHandwrittenForm(this.formData),this.onClose(),this.emit("pbo-handwritten-form-submitted")}catch(e){console.error("Error submitting handwritten form:",e)}finally{this.isSubmitLoading=!1,this.isSubmitDisabled=!1}}render(){return L`
       <form name="handwritten-form" class="handwritten-form" @submit=${this.handleSubmit}>
         <div class="handwritten-tutorials">
           <section>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pairbo/ui-kit",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "description": "",
   "type": "module",
   "readme": "./README-NPM.md",