@pairbo/ui-kit 0.3.21 → 0.3.23

package/dist/ui-kit.js

@@ -2599,8 +2599,8 @@
   .type-canvas-container.image-loading pbo-image {
     display: block;
   }
-`;var Wp=Object.defineProperty,Up=Object.getOwnPropertyDescriptor,Ut=(n,t,e,i)=>{for(var s=i>1?void 0:i?Up(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&Wp(t,e,s),s};let Ot=class extends pt{constructor(){super(...arguments),this.backgroundImageUrl=void 0,this.message="",this.font="Arial",this.color="#000",this.alignment="left",this.scale=1,this.areaPosition={left:0,top:0},this.areaSize={width:0,height:0},this.imgLoading=!1,this.backgroundImage=void 0,this.resizeObserver=void 0}async handleBackgroundImageUrlChange(){this.imgLoading=!0,await this.appendBackgroundImageToCanvas(this.backgroundImageUrl??"",()=>{this.imgLoading=!1}),this.updateTextAreaPosition()}handleBackgroundImageChange(){if(!this.backgroundImage)return;const t=this.canvas.getContext("2d");if(!t)throw new Error("Could not get canvas context");t.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height)}firstUpdated(){this.resizeObserver=new ResizeObserver(()=>{this.updateTextAreaPosition()}),this.resizeObserver.observe(this.canvasContainer)}updated(t){if(t.has("message")||t.has("font")||t.has("color")||t.has("alignment")||t.has("areaPosition")||t.has("areaSize")){if(!this.backgroundImage)return;const e=this.canvas.getContext("2d");if(!e)return;e.clearRect(0,0,this.canvas.width,this.canvas.height),e.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height),this.wrapText(e,this.message,this.areaPosition,this.areaSize,12,this.alignment)}}getMaxStringLength(t,e,i){let s=0;for(let r=1;r<=e.length;r++){const o=e.substring(0,r);if(t.measureText(o).width>i)break;s=r}return s}wrapText(t,e,i,s,r,o){if(!t||!e||!i||!s)return;const a=s.height/r,l=a/1.2,c=e.split(`
-`);let h=[];t.font=`${l}px ${this.font}`,c.forEach(u=>{const p=u.split(" ");let g="";for(let f=0;f<p.length;f++)if(t.measureText(p[f]).width>s.width){const y=this.getMaxStringLength(t,p[f],s.width),w=p[f];f+1<p.length?(p[f]=w.substring(0,y),p[f+1]=w.substring(y,w.length)+p[f+1]):(p[f]=w.substring(0,y),p.push(w.substring(y,w.length)))}for(let f=0;f<p.length;f++){let b=g+p[f]+" ";t.measureText(b).width>s.width&&f>0?(h.push(g),g=p[f]+" "):g=b}h.push(g)});let d=i.left;o==="center"&&(d+=s.width/2),o==="right"&&(d+=s.width);for(let u=0;u<r&&u<h.length;u++){const p=h[u];t.fillStyle=this.color,t.textAlign=o,t.fillText(p,d,i.top+(u+1)*a)}}updateTextAreaPosition(){if(!this.canvas||!this.backgroundImage)return;const t=this.canvasContainer.clientWidth;this.scale=t/this.backgroundImage.width,this.canvas.width=this.backgroundImage.width*this.scale,this.canvas.height=this.backgroundImage.height*this.scale;const e=this.canvas.getContext("2d");e&&e.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height),this.areaPosition={left:.084*this.canvas.width,top:.4874*this.canvas.height},this.areaSize={width:.832*this.canvas.width,height:this.canvas.height-this.areaPosition.top-this.areaPosition.left}}async appendBackgroundImageToCanvas(t,e){return new Promise((i,s)=>{const r=new Image;r.onerror=()=>{s(new Error("Failed to load image"))},r.onload=()=>{this.backgroundImage=r,e&&e(),i()},r.src=t})}render(){return L`
+`;var Wp=Object.defineProperty,Up=Object.getOwnPropertyDescriptor,Ut=(n,t,e,i)=>{for(var s=i>1?void 0:i?Up(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(s=(i?o(t,e,s):o(s))||s);return i&&s&&Wp(t,e,s),s};let Ot=class extends pt{constructor(){super(...arguments),this.backgroundImageUrl=void 0,this.message="",this.font="Arial",this.color="#000",this.alignment="left",this.scale=1,this.areaPosition={left:0,top:0},this.areaSize={width:0,height:0},this.imgLoading=!1,this.backgroundImage=void 0,this.resizeObserver=void 0}async handleBackgroundImageUrlChange(){this.imgLoading=!0,await this.appendBackgroundImageToCanvas(this.backgroundImageUrl??"",()=>{this.imgLoading=!1}),this.updateTextAreaPosition()}handleBackgroundImageChange(){if(!this.backgroundImage)return;const t=this.canvas.getContext("2d");if(!t)throw new Error("Could not get canvas context");t.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height)}firstUpdated(){this.resizeObserver=new ResizeObserver(()=>{this.updateTextAreaPosition()}),this.resizeObserver.observe(this.canvasContainer)}updated(t){if(t.has("message")||t.has("font")||t.has("color")||t.has("alignment")||t.has("areaPosition")||t.has("areaSize")){if(!this.backgroundImage||this.areaSize.width===0||this.areaSize.height===0)return;const e=this.canvas.getContext("2d");if(!e)return;e.clearRect(0,0,this.canvas.width,this.canvas.height),e.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height),this.wrapText(e,this.message,this.areaPosition,this.areaSize,12,this.alignment)}}getMaxStringLength(t,e,i){let s=0;for(let r=1;r<=e.length;r++){const o=e.substring(0,r);if(t.measureText(o).width>i)break;s=r}return s}wrapText(t,e,i,s,r,o){if(!t||!e||!i||!s)return;const a=s.height/r,l=a/1.2,c=e.split(`
+`);let h=[];t.font=`${l}px ${this.font}`,c.forEach(u=>{const p=u.split(" ");let g="";for(let f=0;f<p.length;f++)if(t.measureText(p[f]).width>s.width){const y=this.getMaxStringLength(t,p[f],s.width),w=p[f];f+1<p.length?(p[f]=w.substring(0,y),p[f+1]=w.substring(y,w.length)+p[f+1]):(p[f]=w.substring(0,y),p.push(w.substring(y,w.length)))}for(let f=0;f<p.length;f++){let b=g+p[f]+" ";t.measureText(b).width>s.width&&f>0?(h.push(g),g=p[f]+" "):g=b}h.push(g)});let d=i.left;o==="center"&&(d+=s.width/2),o==="right"&&(d+=s.width);for(let u=0;u<r&&u<h.length;u++){const p=h[u];t.fillStyle=this.color,t.textAlign=o,t.fillText(p,d,i.top+(u+1)*a)}}updateTextAreaPosition(){if(!this.canvas||!this.backgroundImage)return;const t=this.canvasContainer.clientWidth;this.scale=t/this.backgroundImage.width,this.canvas.width=this.backgroundImage.width*this.scale,this.canvas.height=this.backgroundImage.height*this.scale;const e=this.canvas.getContext("2d");e&&e.drawImage(this.backgroundImage,0,0,this.canvas.width,this.canvas.height),this.areaPosition={left:.084*this.canvas.width,top:.4874*this.canvas.height},this.areaSize={width:.832*this.canvas.width,height:this.canvas.height-this.areaPosition.top-this.areaPosition.left}}async appendBackgroundImageToCanvas(t,e){return new Promise((i,s)=>{const r=new Image;r.onerror=()=>{s(new Error("Failed to load image"))},r.onload=()=>{this.backgroundImage=r,e&&e(),i()},t!==""&&(r.src=t)})}render(){return L`
       <div
         class="${pe({"type-canvas-container":!0,"image-loading":this.imgLoading})} 
       "
@@ -3529,6 +3529,13 @@ void main() {
     font-size: var(--label-font-size);
     cursor: pointer;
   }
+  .premium-card {
+    width: fit-content;
+  }
+
+  .premium-card-label {
+    padding-right: 5px;
+  }
 
   .premium-card-description {
     font-size: var(--description-font-size);
@@ -3571,15 +3578,14 @@ void main() {
           </label>
         </div>
 
-        <!-- Divider -->
-        <hr
-          part="divider top-divider"
-          class="divider"
-          ?hidden=${!this.dividerConfig.topDivider.visible||!this.isGift&&!this.dividerConfig.topDivider.persistent}
-        />
-
         <!-- 💌 Premium Card -->
         <div class="premium-card" part="premium-card" ?hidden=${!this.isGift||!e}>
+          <!-- Divider -->
+          <hr
+            part="divider top-divider"
+            class="divider"
+            ?hidden=${!this.dividerConfig.topDivider.visible||!this.isGift&&!this.dividerConfig.topDivider.persistent}
+          />
           <label class="premium-card-label">
             <input
               type="checkbox"
@@ -3616,8 +3622,8 @@ void main() {
           ></pbo-textarea>
         </div>
         <hr
-          part="divider"
-          class="divider bottom-divider"
+          part="divider bottom-divider"
+          class="divider"
           ?hidden=${!this.dividerConfig.bottomDivider.visible||!this.isGift&&!this.dividerConfig.bottomDivider.persistent}
         />
       </div>

package/package.json

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