@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
272 lines (243 loc) • 26.1 kB
JavaScript
import{h as w,f as $,y as p,g as m,t as O,p as C}from"../chunks/lit-WqMxC_PA.esm.js";import{d as z,b as G}from"../chunks/lodash-D3TLHRR_.esm.js";import{p as Y}from"../chunks/progress-bar-DF7UuuHb.esm.js";import{s as S,a as K}from"../chunks/share-button-BRjKJc5L.esm.js";import"../chunks/_share-dialog-dependencies-BG0p8uUr.esm.js";import"../chunks/vendor-KKSARHWL.esm.js";import{D as q,g as J,S as Q}from"../chunks/routes-BvX92EDq.esm.js";import{u as b,A as X,d as u,a as Z,_ as ee,i as n}from"../chunks/localize-C25pEGnx.esm.js";import{c as ie,d as ae,e as te}from"../chunks/enforce-config-Ba1JkOHs.esm.js";import{_ as ne}from"../chunks/loading-template-DG4lkIIc.esm.js";import{makeApiKeyHeader as re}from"../utils/makeApiKeyHeader.js";import{c as oe}from"../chunks/responsive-BR8qUfBa.esm.js";import{logger as se}from"../utils/logger.js";import{c as ce}from"../chunks/css-card-grid-CvoGpsJH.esm.js";import"../chunks/is-all-html-elements-fcB7UUA1.esm.js";import"../chunks/share-button-DPNNnXeM.esm.js";import"../chunks/promo-types-DKAOFHJr.esm.js";import"../chunks/beam-errors-Ci0d3926.esm.js";var pe=Object.defineProperty,me=(i,e,r,l)=>{for(var t=void 0,a=i.length-1,d;a>=0;a--)(d=i[a])&&(t=d(e,r,t)||t);return t&&pe(e,r,t),t};class A extends w{constructor(){super(...arguments),this.infoText=""}static get styles(){return $`
sl-badge::part(base) {
background-color: var(--beam-pillLabel-color-background, #000);
color: var(--beam-pillLabel-color, #fff);
border: var(--beam-pillLabel-border-width, 3px) solid var(--beam-pillLabel-border, #000);
border-radius: 18.37px;
font-family: var(--beam-pillLabel-font, inherit);
font-size: var(--beam-pillLabel-font-size, 12px);
font-style: var(--beam-pillLabel-font-style, italic);
font-weight: var(--beam-pillLabel-font-weight, bold);
text-transform: var(--beam-pillLabel-text-transform, none);
padding: var(--beam-pillLabel-padding, 3px 4px);
}
`}render(){return p`<sl-badge pill aria-label="${this.infoText}">${this.infoText}</sl-badge>`}}me([m({type:String})],A.prototype,"infoText"),customElements.get("beam-info-pill")||customElements.define("beam-info-pill",A);const le={"--beam-pillLabel-color-background":"#0A323C","--beam-pillLabel-color":"#fff","--beam-pillLabel-border":"#0A323C","--beam-pillLabel-border-width":"1px","--beam-pillLabel-font-size":"10px","--beam-pillLabel-font":"inherit","--beam-pillLabel-font-weight":"400","--beam-pillLabel-text-transform":"none","--beam-pillLabel-font-style":"italic","--beam-pillLabel-padding":"3px 4px"},s={en:{title:({causeName:i=""})=>`Your Subscription is Going Towards ${i} With Every Order`,futureTenseTitle:({causeName:i=""})=>`Your Subscription Will Go Towards ${i} With Every Order`,ctaMessagePrefix:()=>"At no extra cost, ",description:({nonprofit:i=""})=>`1% will be donated to ${i} for you, at no extra cost, every order.`,personalImpactTitle:()=>"You're Currently Funding",futureTensePersonalImpactTitle:()=>"You\u2019ll Be Funding",communityImpactTitle:()=>"Together We're Funding",personalLinkCopy:({nonprofit:i="",hideArrow:e=!1})=>`Learn about ${i}${e?"":" \u203A"}`,communityLinkCopy:({brandName:i="",hideArrow:e=!1})=>`Learn about ${i} impact${e?"":" \u203A"}`,percentFunded:()=>"funded",progressPillText:()=>"\u{1F389} Impact begins once order is charged"},fr:{title:({causeName:i=""})=>`Votre abonnement contribue \xE0 ${i} \xE0 chaque commande`,futureTenseTitle:({causeName:i=""})=>`Votre abonnement contribuera \xE0 ${i} \xE0 chaque commande`,ctaMessagePrefix:()=>"Sans frais suppl\xE9mentaires, ",description:({nonprofit:i=""})=>`1% de chaque commande sera revers\xE9 \xE0 ${i} pour vous, sans frais suppl\xE9mentaires.`,personalImpactTitle:()=>"Vous financez actuellement",futureTensePersonalImpactTitle:()=>"Vous financerez",communityImpactTitle:()=>"Ensemble, nous finan\xE7ons",personalLinkCopy:({nonprofit:i="",hideArrow:e=!1})=>`En savoir plus sur ${i}${e?"":" \u203A"}`,communityLinkCopy:({brandName:i="",hideArrow:e=!1})=>`En savoir plus sur l\u2019impact de ${i}${e?"":" \u203A"}`,percentFunded:()=>"financ\xE9",progressPillText:()=>"\u{1F389} L\u2019impact commence une fois la commande d\xE9bit\xE9e"},de:{title:({causeName:i=""})=>`Ihr Abonnement unterst\xFCtzt ${i} mit jeder Bestellung`,futureTenseTitle:({causeName:i=""})=>`Ihr Abonnement wird ${i} mit jeder Bestellung unterst\xFCtzen`,ctaMessagePrefix:()=>"Ohne zus\xE4tzliche Kosten, ",description:({nonprofit:i=""})=>`1% jeder Bestellung wird im Rahmen Ihres Abonnements an ${i} gespendet.`,personalImpactTitle:()=>"Sie unterst\xFCtzen derzeit",futureTensePersonalImpactTitle:()=>"Sie werden unterst\xFCtzen",communityImpactTitle:()=>"Gemeinsam unterst\xFCtzen wir",personalLinkCopy:({nonprofit:i="",hideArrow:e=!1})=>`Mehr \xFCber ${i} erfahren${e?"":" \u203A"}`,communityLinkCopy:({brandName:i="",hideArrow:e=!1})=>`Mehr \xFCber die Wirkung von ${i} erfahren${e?"":" \u203A"}`,percentFunded:()=>"finanziert",progressPillText:()=>"\u{1F389} Wirkung beginnt, sobald die Bestellung abgerechnet wird"},es:{title:({causeName:i=""})=>`Tu suscripci\xF3n est\xE1 apoyando a ${i} con cada pedido`,futureTenseTitle:({causeName:i=""})=>`Tu suscripci\xF3n apoyar\xE1 a ${i} con cada pedido`,ctaMessagePrefix:()=>"Sin coste adicional, ",description:({nonprofit:i=""})=>`El 1% de cada pedido se donar\xE1 a ${i} en tu nombre.`,personalImpactTitle:()=>"Actualmente est\xE1s financiando",futureTensePersonalImpactTitle:()=>"Financiar\xE1s",communityImpactTitle:()=>"Juntos estamos financiando",personalLinkCopy:({nonprofit:i="",hideArrow:e=!1})=>`Conoce m\xE1s sobre ${i}${e?"":" \u203A"}`,communityLinkCopy:({brandName:i="",hideArrow:e=!1})=>`Conoce m\xE1s sobre el impacto de ${i}${e?"":" \u203A"}`,percentFunded:()=>"financiado",progressPillText:()=>"\u{1F389} El impacto comienza una vez que se procese el pedido"},it:{title:({causeName:i=""})=>`Il tuo abbonamento sostiene ${i} con ogni ordine`,futureTenseTitle:({causeName:i=""})=>`Il tuo abbonamento sosterr\xE0 ${i} con ogni ordine`,ctaMessagePrefix:()=>"Senza alcun costo aggiuntivo, ",description:({nonprofit:i=""})=>`L'1% di ogni ordine sar\xE0 donato a ${i} per te.`,personalImpactTitle:()=>"Attualmente stai finanziando",futureTensePersonalImpactTitle:()=>"Finanzierai",communityImpactTitle:()=>"Insieme stiamo finanziando",personalLinkCopy:({nonprofit:i="",hideArrow:e=!1})=>`Scopri di pi\xF9 su ${i}${e?"":" \u203A"}`,communityLinkCopy:({brandName:i="",hideArrow:e=!1})=>`Scopri di pi\xF9 sull\u2019impatto di ${i}${e?"":" \u203A"}`,percentFunded:()=>"finanziato",progressPillText:()=>"\u{1F389} L\u2019impatto inizia una volta che l\u2019ordine \xE8 stato addebitato"},pl:{title:({causeName:i=""})=>`Twoja subskrypcja wspiera ${i} przy ka\u017Cdym zam\xF3wieniu`,futureTenseTitle:({causeName:i=""})=>`Twoja subskrypcja b\u0119dzie wspiera\u0107 ${i} przy ka\u017Cdym zam\xF3wieniu`,ctaMessagePrefix:()=>"Bez dodatkowych koszt\xF3w, ",description:({nonprofit:i=""})=>`1% z ka\u017Cdego zam\xF3wienia zostanie przekazane na rzecz ${i} w Twoim imieniu.`,personalImpactTitle:()=>"Obecnie wspierasz",futureTensePersonalImpactTitle:()=>"B\u0119dziesz wspiera\u0107",communityImpactTitle:()=>"Razem wspieramy",personalLinkCopy:({nonprofit:i="",hideArrow:e=!1})=>`Dowiedz si\u0119 wi\u0119cej o ${i}${e?"":" \u203A"}`,communityLinkCopy:({brandName:i="",hideArrow:e=!1})=>`Dowiedz si\u0119 wi\u0119cej o wp\u0142ywie ${i}${e?"":" \u203A"}`,percentFunded:()=>"sfinansowano",progressPillText:()=>"\u{1F389} Wp\u0142yw rozpoczyna si\u0119 po zrealizowaniu zam\xF3wienia"},ja:{title:({causeName:i=""})=>`Your Subscription is Going Towards ${i} With Every Order`,futureTenseTitle:({causeName:i=""})=>`Your Subscription Will Go Towards ${i} With Every Order`,ctaMessagePrefix:()=>"At no extra cost, ",description:({nonprofit:i=""})=>`1% will be donated to ${i} for you, at no extra cost, every order.`,personalImpactTitle:()=>"You're Currently Funding",futureTensePersonalImpactTitle:()=>"You\u2019ll Be Funding",communityImpactTitle:()=>"Together We're Funding",personalLinkCopy:({nonprofit:i="",hideArrow:e=!1})=>`Learn about ${i}${e?"":" \u203A"}`,communityLinkCopy:({brandName:i="",hideArrow:e=!1})=>`Learn about ${i} impact${e?"":" \u203A"}`,percentFunded:()=>"\u652F\u63F4\u6E08\u307F",progressPillText:()=>"\u{1F389} Impact begins once order is charged"}};var de=Object.defineProperty,c=(i,e,r,l)=>{for(var t=void 0,a=i.length-1,d;a>=0;a--)(d=i[a])&&(t=d(e,r,t)||t);return t&&de(e,r,t),t};class o extends w{constructor(){super(...arguments),this.baseUrl=q,this.lang="en",this.debug=!1,this.draftConfig=!1,this.isMobile=window.innerWidth<720,this.getImpactData=async()=>(te(["apiKey","beamUserId","nonprofitId"],this),await J({baseUrl:this.baseUrl,headers:re(this.apiKey),queryParams:{nonprofitId:this.nonprofitId,beamUserId:this.beamUserId,personalImpactLimit:1,communityImpactLimit:1,storeId:this.storeId,widgetName:"subscription-impact",draftConfig:this.draftConfig,version:"1.0.0",lang:this.configLang}})),this.impactDataController=new X(this,this.getImpactData),this.evaluateBreakPoints=z(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0}),this.resizeElements=z(()=>{S(this.impactTitleRefs),S(this.impactLinkRefs)},50,{maxWait:50,leading:!0})}get configLang(){return Q[this.lang]||"en"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.evaluateBreakPoints)}async updated(e){const r=["baseUrl","storeId","apiKey","beamUserId","lang"];for(const l of r)if(e.has(l)){await this.impactDataController.exec();break}this.resizeElements(),await this.handleFontLoad(this.resizeElements)}disconnectedCallback(){window.removeEventListener("resize",this.resizeElements),document.fonts.removeEventListener("loadingdone",this.resizeElements),super.disconnectedCallback()}async handleFontLoad(e){if(document.fonts.status==="loading")return await document.fonts.ready.catch(r=>se.error(r)),e()}get cssVariables(){const e={...Y,...K,...le,"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"12px","--beam-textColor":"inherit","--beam-backgroundColor":"inherit","--beam-subscriptionImpact-impactCards-maxWidth":"900px","--beam-subscriptionImpact-headerContainer-desktop-textAlign":"left","--beam-subscriptionImpact-headerContainer-mobile-textAlign":"center","--beam-subscriptionImpact-descriptionContainer-marginTop":"10px","--beam-subscriptionImpact-cardContainer-marginTop":"15px","--beam-subscriptionImpact-cardContainer-gap":"20px","--beam-subscriptionImpact-card-borderRadius":"8px","--beam-subscriptionImpact-card-background":"#f8fbfb","--beam-subscriptionImpact-card-padding":"24px 28px 24px 24px","--beam-subscriptionImpact-card-marginRight":"0px","--beam-subscriptionImpact-card-marginTop":"10px","--beam-subscriptionImpact-card-gap":"5px","--beam-subscriptionImpact-cardTitle-textAlign":"left","--beam-subscriptionImpact-cardTitle-letterSpacing":"0.36px","--beam-SubscriptionImpact-cardStyle":"'selected_icon'","--beam-SubscriptionImpact-imagePosition":"'inline'","--beam-subscriptionImpact-imageBlock-height":"120px","--beam-subscriptionImpact-imageBlock-borderRadius":"4px","--beam-subscriptionImpact-iconBackground-width":"50px","--beam-subscriptionImpact-iconBackground-height":"50px","--beam-subscriptionImpact-iconBackground-borderRadius":"50%","--beam-subscriptionImpact-iconBackground-background":"#0a323c","--beam-subscriptionImpact-icon-height":"28px","--beam-subscriptionImpact-icon-margin":"auto","--beam-subscriptionImpact-icon-padding":"10px","--beam-subscriptionImpact-icon-borderRadius":"4px","--beam-subscriptionImpact-image-borderRadius":"4px","--beam-subscriptionImpact-image-minHeight":"0","--beam-subscriptionImpact-image-minWidth":"0","--beam-subscriptionImpact-cardDescription-padding":"0px","--beam-subscriptionImpact-card-progressBar-padding":"8px 0px","--beam-subscriptionImpact-card-progressBarLabel-gap":"10px","--beam-subscriptionImpact-card-progressBarLabel-textAlign":"right","--beam-subscriptionImpact-card-progressBarLabel-marginLeft":"8px","--beam-subscriptionImpact-card-linkContainer-textAlign":"left","--beam-subscriptionImpact-card-impactLink-textDecoration":"underline","--beam-subscriptionImpact-footer-textAlign":"center","--beam-subscriptionImpact-footer-marginTop":"10px","--beam-subscriptionImpact-share-button-icon-name":"share-2","--beam-subscriptionImpact-learnAbout-arrow-display":"block",...u("--beam-subscriptionImpact-title",{fontSize:"20px",fontWeight:"bold",lineHeight:"120%",textTransform:"capitalize",fontStyle:"normal",color:"#0a323c"}),...u("--beam-subscriptionImpact-descriptionPrefix",{fontSize:"14px",fontWeight:"800",lineHeight:"138%",fontStyle:"normal",color:"#2f302d",marginTop:"9px"}),...u("--beam-subscriptionImpact-description",{fontSize:"14px",fontWeight:"400",lineHeight:"138%",fontStyle:"normal",color:"#2f302d",marginTop:"9px"}),...u("--beam-subscriptionImpact-cardTitle",{fontSize:"12px",fontWeight:"bold",lineHeight:"120%",fontStyle:"normal",textTransform:"uppercase"}),...u("--beam-subscriptionImpact-cardDescription",{fontSize:"12px",fontWeight:"400",lineHeight:"18.2px",fontStyle:"normal",color:"#454a47"}),...u("--beam-subscriptionImpact-card-progressBarLabel",{fontSize:"10px",color:"#878a92"}),...u("--beam-subscriptionImpact-card-impactLink",{fontSize:"12px",fontWeight:"600",lineHeight:"16px",fontStyle:"normal",color:"#454a47",marginTop:"auto"})},r=this.impactDataController?.data?.config?.web?.theme||{},l={...e,...r};return Object.assign(Object.create({toCSS(){return Z(this)}}),l)}render(){const{data:e,loading:r,error:l}=this.impactDataController;if(r)return ne();if(l||e==null)return this.debug?ee({error:l||new Error("No data")}):"";const t=e.community[0],a=e.personal[0],d=e.chain.name,f=n(this.configLang,a?.nonprofit.cause||""),h=a?.nonprofit.name,x=a?.impact?.goalProgressPercentage||0,I=!(a?.impact?.goalProgressPercentage>0||a?.impact?.goalCompletionText?.length>0),y=t?.impact?.goalProgressPercentage||0,P=`${x}% ${n(this.configLang,e?.config?.web?.additionalStrings?.percentFunded||"")||s[this.configLang].percentFunded()}`,F=`${y}% ${n(this.configLang,e?.config?.web?.additionalStrings?.percentFunded||"")||s[this.configLang].percentFunded()}`,E=t?.imageUrl||"",B=a?.imageUrl||"",N=a?.nonprofit.causeIconUrl,W=a?.nonprofit.causeIconSelectedUrl,g=this.cssVariables["--beam-SubscriptionImpact-cardStyle"],T=this.cssVariables["--beam-SubscriptionImpact-imagePosition"],v=g==="'image'",L=g==="'selected_icon'"?W:N,R=v?E:L,U=v?B:L,M=n(this.configLang,e?.config?.web?.dynamicStrings?.ctaTitle||"")||s[this.configLang].title({causeName:f}),D=n(this.configLang,e?.config?.web?.dynamicStrings?.ctaFutureTenseTitle||"")||s[this.configLang].futureTenseTitle({causeName:f}),j=G(e.store.communityPageURL)?e.chain.communityImpactUrl:e.store.communityPageURL,V=a?.nonprofit?.website,_=a?.share?.imageUrl,H=this.cssVariables["--beam-SubscriptionImpact-share-button-icon-name"]||"share-2",k=this.cssVariables["--beam-subscriptionImpact-learnAbout-arrow-display"]==="none";return p`
<style>
:host {
${this.cssVariables.toCSS()}
}
</style>
<div class="widget-container" id="beam-subscription-impact-container">
<div
class="header-container ${this.isMobile?"header-container-mobile":"header-container-desktop"}"
id="beam-subscriptionImpact-header-container"
>
<h3 class="title" part="title" id="beam-subscriptionImpact-title">
${I?D:M}
</h3>
<div
class="description-container ${this.isMobile?"header-container-mobile description-mobile":"header-container-desktop description-desktop"}"
>
<span class="description-prefix" part="description">
${n(this.configLang,e?.config?.web?.additionalStrings?.ctaMessagePrefix||"")||s[this.configLang].ctaMessagePrefix()}
</span>
<span class="description" part="description" id="beam-subscriptionImpact-description">
${n(this.configLang,e?.config?.web?.dynamicStrings?.ctaMessage||"")||s[this.configLang].description({nonprofit:h})}
</span>
</div>
</div>
<div class="root">
<div
class="card-container cardGrid ${this.isMobile?"card-container-mobile":""}"
id="beam-subscriptionImpact-card-container"
>
${this.renderInlineCard({title:I?n(this.configLang,e?.config?.web?.additionalStrings?.futureTensePersonalImpactTitle||"")||s[this.configLang].futureTensePersonalImpactTitle():n(this.configLang,e?.config?.web?.additionalStrings?.personalImpactTitle||"")||s[this.configLang].personalImpactTitle(),image:U,description:n(this.configLang,a?.impact?.description||""),link:V,linkText:n(this.configLang,e?.config?.web?.dynamicStrings?.personalLinkCopy||"")||s[this.configLang].personalLinkCopy({nonprofit:h,hideArrow:k}),progressBarValue:x,progressBarText:P,infoPill:n(this.configLang,e?.config?.web?.additionalStrings?.progressPillText||"")||s[this.configLang].progressPillText(),imageType:g,cardType:"personal",imagePosition:T})}
${this.renderInlineCard({title:n(this.configLang,e?.config?.web?.additionalStrings?.communityImpactTitle||"")||s[this.configLang].communityImpactTitle(),image:R,description:n(this.configLang,t?.impact?.description||""),link:j,linkText:n(this.configLang,e?.config?.web?.dynamicStrings?.communityLinkCopy||"")||s[this.configLang].communityLinkCopy({brandName:d,hideArrow:k}),progressBarValue:y,progressBarText:F,infoPill:n(this.configLang,e?.config?.web?.additionalStrings?.progressPillText||"")||s[this.configLang].progressPillText(),imageType:g,cardType:"community",imagePosition:T})}
</div>
</div>
<div class="footer" part="social-share">
<beam-share-button
imageUrl="${_}"
brandName="${d}"
shareIcon="${H}"
buttonText="${n(this.configLang,e?.config?.web?.additionalStrings?.shareButtonText||"")}"
configLang="${this.configLang}"
></beam-share-button>
</div>
</div>
`}renderInlineCard(e){const r=e.progressBarValue!==void 0&&e.progressBarValue<=1&&e.cardType==="personal";return p`
<div class="inline-card ${this.isMobile?"":"inline-card-desktop"}">
${e.image&&e.imagePosition==="'block'"&&e.imageType==="'image'"?p` <div
class="image-block-container"
style="background: url('${e.image}');background-position: center;
background-size: cover;
background-repeat: no-repeat;"
></div>`:""}
<h4 class="card-title">${e.title}</h4>
<div class="inline-content">
${e.image&&e.imagePosition==="'inline'"?p`${e.imageType==="'icon'"||e.imageType==="'selected_icon'"?p` <div class="icon-container">
<div class="icon-background">
<img src="${e.image}" alt="" role="presentation" class="icon" />
</div>
</div>`:p` <div class="image-container">
<img src="${e.image}" alt="" role="presentation" class="image" />
</div>`}`:""}
<div class="impact-container" part="details">
<p class="card-description">${e.description}</p>
<div class="card-progress-bar">
${r?p` <beam-info-pill infoText="${e.infoPill}"></beam-info-pill> `:p`
<beam-progress-bar value="${e.progressBarValue}" style="flex: 1 0;"> </beam-progress-bar>
<span class="details-funding-progress-label"> ${e.progressBarText} </span>
`}
</div>
<div class="link-container">
<a href="${e.link}" class="impact-link" target="_blank">${e.linkText}</a>
</div>
</div>
</div>
</div>
`}}o.tagName="beam-subscription-impact",o.styles=[ie,oe,$`
:host {
display: block;
font-family: var(--beam-fontFamily);
font-style: var(--beam-fontStyle);
font-size: var(--beam-fontSize);
background-color: var(--beam-backgroundColor);
color: var(--beam-textColor);
max-width: var(--beam-subscriptionImpact-impactCards-maxWidth);
word-break: normal;
}
/* subscription impact container and header css */
.header-container-mobile {
text-align: var(--beam-subscriptionImpact-headerContainer-mobile-textAlign);
}
.header-container-desktop {
text-align: var(--beam-subscriptionImpact-headerContainer-desktop-textAlign);
}
.title {
${b("--beam-subscriptionImpact-title")};
}
.description-container {
margin-top: var(--beam-subscriptionImpact-descriptionContainer-marginTop);
}
.description-prefix {
${b("--beam-subscriptionImpact-descriptionPrefix")};
}
.description {
${b("--beam-subscriptionImpact-description")};
}
.root {
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
.card-container {
margin-top: var(--beam-subscriptionImpact-cardContainer-marginTop);
gap: var(--beam-subscriptionImpact-cardContainer-gap);
display: grid;
justify-content: center;
}
.card-container-mobile {
flex-direction: column;
}
/* subscription impact card css */
.inline-card {
border-radius: var(--beam-subscriptionImpact-card-borderRadius);
background: var(--beam-subscriptionImpact-card-background);
padding: var(--beam-subscriptionImpact-card-padding);
flex: 2;
flex-direction: column;
margin-top: var(--beam-subscriptionImpact-card-marginTop);
display: flex;
gap: var(--beam-subscriptionImpact-card-gap);
}
.inline-card-desktop {
margin-right: var(--beam-subscriptionImpact-card-marginRight);
}
.inline-content {
display: flex;
flex-direction: row;
gap: 15px;
height: 100%;
}
.card-title {
text-align: var(--beam-subscriptionImpact-cardTitle-textAlign);
letter-spacing: var(--beam-subscriptionImpact-cardTitle-letterSpacing);
${b("--beam-subscriptionImpact-cardTitle")};
}
.icon-container {
flex: 0;
flex-direction: column;
}
.image-block-container {
flex-shrink: 0;
height: var(--beam-subscriptionImpact-imageBlock-height);
border-radius: var(--beam-subscriptionImpact-imageBlock-borderRadius);
}
.image-container {
flex: 4;
display: flex;
flex-direction: column;
}
.icon-background {
width: var(--beam-subscriptionImpact-iconBackground-width);
height: var(--beam-subscriptionImpact-iconBackground-height);
border-radius: var(--beam-subscriptionImpact-iconBackground-borderRadius);
padding: var(--beam-subscriptionImpact-icon-padding);
overflow: hidden;
background: var(--beam-subscriptionImpact-iconBackground-background);
display: flex;
justify-content: center;
align-items: center;
}
.icon {
height: var(--beam-subscriptionImpact-icon-height);
display: block;
margin: var(--beam-subscriptionImpact-icon-margin);
border-radius: var(--beam-subscriptionImpact-icon-borderRadius);
}
.image {
flex: 4;
height: auto;
width: 100%;
object-fit: cover;
min-height: var(--beam-subscriptionImpact-image-minHeight);
min-width: var(--beam-subscriptionImpact-image-minWidth);
border-radius: var(--beam-subscriptionImpact-image-borderRadius);
}
.impact-container {
flex: 1 1 67%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
align-items: stretch;
position: relative;
}
.card-description {
flex-grow: 1;
padding: var(--beam-subscriptionImpact-cardDescription-padding);
${b("--beam-subscriptionImpact-cardDescription")};
}
.card-progress-bar {
flex: 1 1;
display: flex;
align-items: center;
padding: var(--beam-subscriptionImpact-card-progressBar-padding);
}
.details-funding-progress-label {
gap: var(--beam-subscriptionImpact-card-progressBarLabel-gap);
white-space: nowrap;
text-align: var(--beam-subscriptionImpact-card-progressBarLabel-textAlign);
flex: 0 1;
margin-left: var(--beam-subscriptionImpact-card-progressBarLabel-marginLeft);
${b("--beam-subscriptionImpact-card-progressBarLabel")};
}
.link-container {
text-align: var(--beam-subscriptionImpact-card-linkContainer-textAlign);
}
.impact-link {
display: inline-block;
text-decoration-line: var(--beam-subscriptionImpact-card-impactLink-textDecoration);
${b("--beam-subscriptionImpact-card-impactLink")};
}
/* share footer */
.footer {
text-align: var(--beam-subscriptionImpact-footer-textAlign);
margin-top: var(--beam-subscriptionImpact-footer-marginTop);
}
`,ce({gap:"var(--beam-subscriptionImpact-cardContainer-gap)",itemMinWidth:"250px",columnCount:"2"})],c([m({type:String,reflect:!0})],o.prototype,"baseUrl"),c([m({type:String,reflect:!1})],o.prototype,"apiKey"),c([m({type:Number})],o.prototype,"storeId"),c([m({type:String,reflect:!0})],o.prototype,"nonprofitId"),c([m({type:String,reflect:!0})],o.prototype,"beamUserId"),c([m({type:String})],o.prototype,"lang"),c([m({type:Boolean})],o.prototype,"debug"),c([m({type:Boolean})],o.prototype,"draftConfig"),c([O()],o.prototype,"isMobile"),c([C(".card-title")],o.prototype,"impactTitleRefs"),c([C(".impact-link")],o.prototype,"impactLinkRefs"),ae(o);export{o as BeamSubscriptionImpact};
//# sourceMappingURL=subscription-impact.js.map