@beamimpact/web-sdk
Version:
The Beam SDK enables brands to connect with their customers over shared values, not transactional discounts, to build stronger loyalty. Our integration achieves this by allowing customers to (a) choose a nonprofit where the brand will donate part of their
164 lines (163 loc) • 10.4 kB
JavaScript
import{i as f}from"./is-all-html-elements-SdSkxirh.esm.js";import{h as x,y as m,Z as v,g as l}from"./lit-iNN5L_Qk.esm.js";import"./vendor-GKiOHg2N.esm.js";import{u as d,s as o}from"./share-button-SNvuFDC9.esm.js";const y=(i,{source:t="contentLength"}={})=>{const a=i instanceof NodeList?Array.from(i):i;if(a.length===0||!f(a))return;const r=(t==="contentLength"?a.sort((e,n)=>n.innerText.length-e.innerText.length)[0]:a.sort((e,n)=>n.clientHeight-e.clientHeight)[0])?.clientHeight||0;for(const e of a)e.clientHeight!==r&&(e.style.height=r+"px")};function S(){return/Android|iPhone/i.test(navigator.userAgent)}var w=Object.defineProperty,C=Object.getOwnPropertyDescriptor,c=(i,t,a,r)=>{for(var e=r>1?void 0:r?C(t,a):t,n=i.length-1,h;n>=0;n--)(h=i[n])&&(e=(r?h(t,a,e):h(e))||e);return r&&e&&w(t,a,e),e};class s extends x{constructor(){super(...arguments),this.shareIcon=null,this.imageUrl=null,this.brandName=null,this.buttonText=null,this.configLang="en"}connectedCallback(){super.connectedCallback()}async handleShareClick(){try{if(!this.imageUrl||!this.brandName||!this.configLang)return;await import("./_share-dialog-dependencies-C8uChjuF.esm.js"),S()?this.openSystemShareSheet(this.imageUrl):this.handleShareDialog(this.imageUrl,this.brandName)}catch(t){console.error("Error sharing impact:",t)}}async handleShareDialog(t,a){if(!t)return;const r=this.shadowRoot?.querySelector("sl-dialog");if(r){r.show();return}await import("./_share-dialog-dependencies-C8uChjuF.esm.js");const e=this.shadowRoot?.querySelector("#modal-root"),n=await d(t),h=URL.createObjectURL(n),b=()=>{this.shadowRoot?.querySelector("sl-dialog")?.hide()},g=async()=>{await navigator.clipboard.write([new ClipboardItem({"image/png":n})]),setTimeout(b,250)},u=()=>{setTimeout(b,250)},p=m`
<style>
.plain-button {
border: none;
background: none;
font-size: inherit;
font-family: inherit;
}
.share-dialog::part(panel) {
padding: var(--beam-share-dialog-padding);
text-align: center;
}
.share-title {
font-size: var(--beam-share-title-fontSize);
font-weight: var(--beam-share-title-fontWeight);
}
.share-text {
font-size: var(--beam-share-text-fontSize);
line-height: var(--beam-share-text-lineHeight);
margin-top: var(--beam-share-text-marginTop);
}
.share-image {
border-radius: var(--beam-share-image-borderRadius);
width: var(--beam-share-image-width);
display: block;
margin: var(--beam-share-image-margin) auto;
}
.share-actions {
margin: var(--beam-share-actions-margin);
}
.share-action-button {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 5px;
}
.share-action-icon {
font-size: var(--beam-share-action-icon-size);
}
.share-action-button:hover .share-action-icon {
scale: 1.1;
}
.share-action-text {
font-size: var(--beam-share-action-text-fontSize);
line-height: var(--beam-share-action-text-lineHeight);
margin-top: var(--beam-share-text-action-marginTop);
}
.plain-button {
border: none;
background: none;
font-size: inherit;
font-family: inherit;
}
.plain-link {
text-decoration: none;
color: inherit;
}
.share-close {
display: block;
background-color: var(--beam-share-close-backgroundColor);
color: var(--beam-share-close-text-color);
justify-content: center;
padding: var(--beam-share-close-padding);
border-radius: var(--beam-share-close-borderRadius);
width: 100%;
font-size: var(--beam-share-close-fontSize);
font-weight: var(--beam-share-close-fontWeight);
}
.share-close:hover {
outline: 2px solid var(--beam-share-close-focus-borderColor);
}
</style>
<sl-dialog open label="${o[this.configLang].impactShareTitle()}" no-header class="share-dialog">
<h2 class="share-title">${o[this.configLang].impactShareTitle()}</h2>
<p class="share-text">${o[this.configLang].impactShareText({brandName:a})}</p>
<img src="${t}" alt="${o[this.configLang].impactShareTitle()}" class="share-image" />
<div class="share-actions" style="display: flex; justify-content: space-evenly">
<div style="flex: 1; text-align: center">
<button class="plain-button button share-action-button" ="${g}">
<sl-icon
library="lucide"
name="copy"
label="${o[this.configLang].impactShareCopy()}"
class="share-action-icon"
></sl-icon>
<div class="share-action-text">${o[this.configLang].impactShareCopy()}</div>
</button>
</div>
<div style="flex: 1; text-align: center">
<a
class="plain-button button share-action-button plain-link"
download="${o[this.configLang].impactShareTitle()}"
href="${h}"
="${u}"
>
<sl-icon
library="lucide"
name="download"
label="${o[this.configLang].impactShareDownload()}"
class="share-action-icon"
></sl-icon>
<div class="share-action-text">${o[this.configLang].impactShareDownload()}</div>
</a>
</div>
</div>
<button class="plain-button button share-close" ="${b}">
${o[this.configLang].impactShareClose()}
</button>
</sl-dialog>
`;e&&v(p,e)}async openSystemShareSheet(t){if(!t)return;const a=await d(t);navigator.share&&await navigator.share({files:[a]})}disconnectedCallback(){super.disconnectedCallback()}render(){return!this.imageUrl||!this.brandName||!this.configLang?m``:m`
<style>
.share-button {
font-family: var(--beam-share-button-fontFamily);
font-size: var(--beam-share-button-fontSize);
font-weight: var(--beam-share-button-fontWeight);
margin-top: var(--beam-share-button-marginTop);
margin-bottom: var(--beam-share-button-marginBottom);
text-transform: var(--beam-share-button-textTransform);
line-height: var(--beam-share-button-lineHeight);
background-color: var(--beam-share-button-backgroundColor);
color: var(--beam-share-button-color, inherit);
border-radius: var(--beam-share-button-borderRadius);
border-color: var(--beam-share-button-borderColor);
border-width: var(--beam-share-button-borderWidth);
/* add extra padding on side without icon for optical alignment */
padding: var(--beam-share-button-padding);
width: var(--beam-share-button-width);
transition: 0.15s;
}
.share-button:hover {
background-color: var(--beam-share-button-hover-backgroundColor);
color: var(--beam-share-button-hover-color);
border-color: var(--beam-share-button-hover-borderColor);
}
.share-button-text {
text-decoration: var(--beam-share-button-text-textDecoration);
margin-left: 0.33em;
}
.share-button-icon {
font-size: var(--beam-share-button-icon-size);
}
.button {
cursor: pointer;
}
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
</style>
<button ="${this.handleShareClick}" class="share-button share-button-inline button icon-button">
<sl-icon
name="${this.shareIcon}"
library="lucide"
label="${o[this.configLang].impactShareButton()}"
class="share-button-icon"
></sl-icon>
<span class="share-button-text">${this.buttonText||o[this.configLang].impactShareButton()}</span>
</button>
<div id="modal-root"></div>
`}}c([l({type:String})],s.prototype,"shareIcon",2),c([l({type:String})],s.prototype,"imageUrl",2),c([l({type:String})],s.prototype,"brandName",2),c([l({type:String})],s.prototype,"buttonText",2),c([l({type:String})],s.prototype,"configLang",2),customElements.get("beam-share-button")||customElements.define("beam-share-button",s);const k={"--beam-share-button-fontFamily":"inherit","--beam-share-button-fontSize":"14px","--beam-share-button-fontWeight":"600","--beam-share-button-textTransform":"none","--beam-share-button-marginTop":"10px","--beam-share-button-marginBottom":"10px","--beam-share-button-padding":"8px 18px 8px 16px","--beam-share-button-lineHeight":"inherit","--beam-share-button-color":"#0A323C","--beam-share-button-backgroundColor":"#fff","--beam-share-button-borderRadius":"30px","--beam-share-button-borderColor":"#0A323C","--beam-share-button-borderWidth":"1px","--beam-share-button-width":"auto","--beam-share-button-hover-borderColor":"transparent","--beam-share-button-hover-backgroundColor":"#0A323C","--beam-share-button-hover-color":"#fff","--beam-share-button-icon-size":"16px","--beam-share-button-text-textDecoration":"none","--beam-share-dialog-padding":"30px 30px","--beam-share-title-fontSize":"30px","--beam-share-title-fontWeight":"bold","--beam-share-text-fontSize":"16px","--beam-share-text-lineHeight":"1.3","--beam-share-text-marginTop":"10px","--beam-share-image-borderRadius":"4px","--beam-share-image-width":"200px","--beam-share-image-margin":"20px","--beam-share-actions-margin":"30px 60px","--beam-share-action-icon-size":"32px","--beam-share-action-text-fontSize":"16px","--beam-share-action-text-lineHeight":"1.3","--beam-share-text-action-marginTop":"10px","--beam-share-close-backgroundColor":"#ffd522","--beam-share-close-text-color":"#000","--beam-share-close-padding":"12px","--beam-share-close-borderRadius":"4px","--beam-share-close-fontSize":"16px","--beam-share-close-fontWeight":"bold","--beam-share-close-focus-borderColor":"#c2dcff"};export{k as a,y as s};
//# sourceMappingURL=share-button-k_Xn5956.esm.js.map