@pairbo/ui-kit 0.3.31 → 0.3.32

package/dist/ui-kit.js

@@ -1955,7 +1955,7 @@
           />
         </pbo-zoomed-preview>
       </pbo-drawer>
-    `}};rt.styles=[gt,Yu];rt.dependencies={"pbo-image":ne};It([C({type:Object})],rt.prototype,"card",2);It([C({type:Number,reflect:!0})],rt.prototype,"focusIndex",2);It([C({type:Object})],rt.prototype,"livePreviewProps",2);It([C()],rt.prototype,"handwrittenPreviewProps",2);It([C()],rt.prototype,"type",2);It([F()],rt.prototype,"allowPinchToToggle",2);It([F()],rt.prototype,"distance",2);It([H("#thumbnails")],rt.prototype,"thumbnailCarousel",2);It([H("#main-carousel")],rt.prototype,"mainCarousel",2);It([H(".editor__zoomed")],rt.prototype,"zoomedPreview",2);It([H(".main-slide.active")],rt.prototype,"activeMainSlide",2);It([H("pbo-type-canvas")],rt.prototype,"typeCanvas",2);It([_n(".thumbnail")],rt.prototype,"thumbnailElements",2);It([_n(".main-slide")],rt.prototype,"mainSlideElements",2);It([F()],rt.prototype,"mainImageTemplates",2);It([V("card")],rt.prototype,"handleCardChange",1);It([V("focusIndex")],rt.prototype,"handleFocusIndexChange",1);It([V("type"),V("focusIndex")],rt.prototype,"handleAllowPinchToToggle",1);rt=It([ut("pbo-editor-card-slider")],rt);var Ju=Object.defineProperty,Qu=Object.getOwnPropertyDescriptor,Yt=(o,t,e,i)=>{for(var s=i>1?void 0:i?Qu(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&&Ju(t,e,s),s};let _t=class extends ft{constructor(){super(...arguments),this.card=null,this.onClose=()=>{},this.typeFormCtaLabel="",this.handwrittenFormCtaLabel="",this.formData={font:"Monsieur La Doulaise",text:"",color:"rgb(0,0,0)",alignment:"left"},this.handwrittenFormState={isLoading:!1,processedFileUrl:""},this.editorType="type",this.handleTypingFormChange=()=>{this.formData=this.typeForm.formData},this.handleHandwrittenFormChange=t=>{this.handwrittenFormState=t.detail,this.slider.focusOn(1),gi()&&t.detail.processedFileUrl!==""&&t.detail.isLoading===!1&&(this.slider.openZoomedPreview(),this.slider.scrollIntoView({behavior:"smooth",block:"start"}))},this.handleHandwrittenImageDimensionsChanged=t=>{this.handwrittenForm.setDimensions(t.detail)},this.handleEditorChange=t=>{this.emit("pbo-switch-editor",{detail:{fromEditor:this.editorType,toEditor:t.detail.editor},bubbles:!0,composed:!0}),this.editorType=t.detail.editor}}async handleCardChange(){await this.updateComplete,this.card&&(this.slider.card=this.card,this.requestUpdate(),this.typeForm.card=this.card,this.handwrittenForm.card=this.card)}handleEditorTypeChange(){this.updateComplete.then(()=>{this.slider.focusOn(1),this.editorType==="handwritten"&&gi()&&this.handwrittenForm.scrollIntoView(!0)})}firstUpdated(){this.addEventListener("handwritten-image-dimensions-changed",this.handleHandwrittenImageDimensionsChanged),this.typeForm.addEventListener("pbo-type-form-change",this.handleTypingFormChange),this.handwrittenForm.addEventListener("pbo-change",this.handleHandwrittenFormChange)}disconnectedCallback(){this.typeForm.removeEventListener("pbo-change",this.handleTypingFormChange),this.handwrittenForm.removeEventListener("pbo-change",this.handleHandwrittenFormChange)}render(){return L`
+    `}};rt.styles=[gt,Yu];rt.dependencies={"pbo-image":ne};It([C({type:Object})],rt.prototype,"card",2);It([C({type:Number,reflect:!0})],rt.prototype,"focusIndex",2);It([C({type:Object})],rt.prototype,"livePreviewProps",2);It([C()],rt.prototype,"handwrittenPreviewProps",2);It([C()],rt.prototype,"type",2);It([F()],rt.prototype,"allowPinchToToggle",2);It([F()],rt.prototype,"distance",2);It([H("#thumbnails")],rt.prototype,"thumbnailCarousel",2);It([H("#main-carousel")],rt.prototype,"mainCarousel",2);It([H(".editor__zoomed")],rt.prototype,"zoomedPreview",2);It([H(".main-slide.active")],rt.prototype,"activeMainSlide",2);It([H("pbo-type-canvas")],rt.prototype,"typeCanvas",2);It([_n(".thumbnail")],rt.prototype,"thumbnailElements",2);It([_n(".main-slide")],rt.prototype,"mainSlideElements",2);It([F()],rt.prototype,"mainImageTemplates",2);It([V("card")],rt.prototype,"handleCardChange",1);It([V("focusIndex")],rt.prototype,"handleFocusIndexChange",1);It([V("type"),V("focusIndex")],rt.prototype,"handleAllowPinchToToggle",1);rt=It([ut("pbo-editor-card-slider")],rt);var Ju=Object.defineProperty,Qu=Object.getOwnPropertyDescriptor,Yt=(o,t,e,i)=>{for(var s=i>1?void 0:i?Qu(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&&Ju(t,e,s),s};let _t=class extends ft{constructor(){super(...arguments),this.card=null,this.onClose=()=>{},this.typeFormCtaLabel="",this.handwrittenFormCtaLabel="",this.formData={font:"Monsieur La Doulaise",text:"",color:"rgb(0,0,0)",alignment:"left"},this.handwrittenFormState={isLoading:!1,processedFileUrl:""},this.editorType="type",this.handleTypingFormChange=()=>{this.formData=this.typeForm.formData},this.handleHandwrittenFormChange=t=>{this.handwrittenFormState=t.detail,this.slider.focusOn(1),gi()&&t.detail.processedFileUrl!==""&&t.detail.isLoading===!1&&(this.slider.openZoomedPreview(),this.slider.scrollIntoView({behavior:"smooth",block:"start"}))},this.handleHandwrittenImageDimensionsChanged=t=>{this.handwrittenForm.setDimensions(t.detail)},this.handleEditorChange=t=>{this.emit("pbo-switch-editor",{detail:{fromEditor:this.editorType,toEditor:t.detail.editor},bubbles:!0,composed:!0}),this.editorType=t.detail.editor}}async handleCardChange(){await this.updateComplete,this.card&&(this.slider.card=this.card,this.requestUpdate(),this.typeForm.card=this.card,this.handwrittenForm.card=this.card)}handleEditorTypeChange(){this.updateComplete.then(()=>{this.slider.focusOn(1),this.editorType==="handwritten"&&gi()&&this.handwrittenForm.scrollIntoView(!0)})}firstUpdated(){this.addEventListener("handwritten-image-dimensions-changed",this.handleHandwrittenImageDimensionsChanged),this.typeForm.addEventListener("pbo-type-form-change",this.handleTypingFormChange),this.handwrittenForm.addEventListener("pbo-handwritten-form-change",this.handleHandwrittenFormChange)}disconnectedCallback(){this.typeForm.removeEventListener("pbo-type-form-change",this.handleTypingFormChange),this.handwrittenForm.removeEventListener("pbo-handwritten-form-change",this.handleHandwrittenFormChange)}render(){return L`
       <div class="editor">
         <div class="editor__card" part="editor-card-slider-container">
           <pbo-editor-card-slider
@@ -2947,7 +2947,7 @@
         style="${pe({"--track-width":"3px","--indicator-color":"black"})}"
       ></pbo-spinner>
       <span>${Math.round(this.progress)}%</span>
-    </div>`}};He.styles=[gt,tg];He.dependencies={"pbo-spinner":os};Xs([C({type:Boolean,reflect:!0})],He.prototype,"loading",2);Xs([C({type:Number})],He.prototype,"loadingTime",2);Xs([C()],He.prototype,"loadingPattern",2);Xs([F()],He.prototype,"progress",2);He=Xs([ut("pbo-fake-loading")],He);var sg=Object.defineProperty,rg=Object.getOwnPropertyDescriptor,et=(o,t,e,i)=>{for(var s=i>1?void 0:i?rg(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&&sg(t,e,s),s};let q=class extends ft{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.ctaPrimaryLabel="Add to Cart",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-handwritten-form-change",{detail:{isLoading:!0,processedFileUrl:null}})}handleProcessImageChange(t,e){this.emit("pbo-handwritten-form-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,l;const t=177.8/this.handwrittenDimensions.cardHeight,e=127/this.handwrittenDimensions.cardWidth,i={barcode:((s=this.card)==null?void 0:s.barcode)||"",pboCardId:((r=this.card)==null?void 0:r.pboId)||"Unknown",productId:(n=this.card)==null?void 0:n.productId,sku:(a=this.card)==null?void 0:a.sku,variantId:(l=this.card)==null?void 0:l.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 ql(i)}setDimensions(t){this.handwrittenDimensions=t}handleProcessedImgChange(){this.processedImg.masked_img&&this.emit("pbo-handwritten-form-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`
+    </div>`}};He.styles=[gt,tg];He.dependencies={"pbo-spinner":os};Xs([C({type:Boolean,reflect:!0})],He.prototype,"loading",2);Xs([C({type:Number})],He.prototype,"loadingTime",2);Xs([C()],He.prototype,"loadingPattern",2);Xs([F()],He.prototype,"progress",2);He=Xs([ut("pbo-fake-loading")],He);var sg=Object.defineProperty,rg=Object.getOwnPropertyDescriptor,et=(o,t,e,i)=>{for(var s=i>1?void 0:i?rg(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&&sg(t,e,s),s};let q=class extends ft{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.ctaPrimaryLabel="Add to Cart",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-handwritten-form-change",{detail:{isLoading:!0,processedFileUrl:null}})}handleProcessImageChange(t,e){this.emit("pbo-handwritten-form-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,l;const t=177.8/this.handwrittenDimensions.cardHeight,e=127/this.handwrittenDimensions.cardWidth,i={barcode:((s=this.card)==null?void 0:s.barcode)||"",pboCardId:((r=this.card)==null?void 0:r.pboId)||"Unknown",productId:(n=this.card)==null?void 0:n.productId,sku:(a=this.card)==null?void 0:a.sku,variantId:(l=this.card)==null?void 0:l.variantId,pred_image_uid:this.processedImg.uid||"",position_x:this.handwrittenDimensions.left*e,position_y:this.handwrittenDimensions.top*t,height:this.handwrittenDimensions.height*t,width:this.handwrittenDimensions.width*e};return ql(i)}setDimensions(t){this.handwrittenDimensions=t}handleProcessedImgChange(){this.processedImg.masked_img&&this.emit("pbo-handwritten-form-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.31",
+  "version": "0.3.32",
   "description": "",
   "type": "module",
   "readme": "./README-NPM.md",