@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
391 lines (351 loc) • 29.2 kB
JavaScript
import{y as m,m as I,f as D,g as p,t as L,h as M,q as F,u as x,k as P}from"../chunks/lit-iNN5L_Qk.esm.js";import{d as W}from"../chunks/lodash-P8OIs-at.esm.js";import{D as A,f as U,u as R,W as _,S as z}from"../chunks/routes-Dmf2ZNnZ.esm.js";import{u as d,A as C,d as u,a as E,_ as N,i as l}from"../chunks/localize-o-cYvHQf.esm.js";import{p as H}from"../chunks/progress-bar-PMU_xI3L.esm.js";import{c as j,d as K,e as v}from"../chunks/enforce-config-ZAI7WYAd.esm.js";import{_ as O}from"../chunks/loading-template-t4fFsYtr.esm.js";import{makeApiKeyHeader as k}from"../utils/makeApiKeyHeader.esm.js";import{B as G}from"../chunks/beam-errors-P-Lu07Ce.esm.js";import{createScopedLocalStorage as Y}from"../utils/local-storage.esm.js";import{c as q}from"../chunks/css-card-grid-nEc--M5M.esm.js";import{b as V}from"../chunks/events-6Z5MkCRr.esm.js";import"./beam-partner-logos.esm.js";import"../utils/logger.esm.js";const J=({height:r="1em",width:o="1em"}={})=>m`
<svg
style="${I({height:r,width:o,position:"relative",bottom:"0"})}"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 78.369 78.369"
>
<g>
<path
d="M78.049,19.015L29.458,67.606c-0.428,0.428-1.121,0.428-1.548,0L0.32,40.015c-0.427-0.426-0.427-1.119,0-1.547l6.704-6.704
c0.428-0.427,1.121-0.427,1.548,0l20.113,20.112l41.113-41.113c0.429-0.427,1.12-0.427,1.548,0l6.703,6.704
C78.477,17.894,78.477,18.586,78.049,19.015z"
style="fill: currentColor"
/>
</g>
</svg>
`,S={en:{ctaTitle:()=>"Choose Your Impact",ctaMessagePrefix:()=>" at no extra cost.",ctaMessage:({donationPercentage:r="1%"}={})=>`Choose a nonprofit and ${r} will be donated there for you with every order of your subscription,`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose"},fr:{ctaTitle:()=>"Choose Your Impact",ctaMessagePrefix:()=>" at no extra cost.",ctaMessage:({donationPercentage:r="1%"}={})=>`Choose a nonprofit and ${r} will be donated there for you with every order of your subscription,`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose"},de:{ctaTitle:()=>"Choose Your Impact",ctaMessagePrefix:()=>" at no extra cost.",ctaMessage:({donationPercentage:r="1%"}={})=>`Choose a nonprofit and ${r} will be donated there for you with every order of your subscription,`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose"},es:{ctaTitle:()=>"Choose Your Impact",ctaMessagePrefix:()=>" at no extra cost.",ctaMessage:({donationPercentage:r="1%"}={})=>`Choose a nonprofit and ${r} will be donated there for you with every order of your subscription,`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose"},it:{ctaTitle:()=>"Choose Your Impact",ctaMessagePrefix:()=>" at no extra cost.",ctaMessage:({donationPercentage:r="1%"}={})=>`Choose a nonprofit and ${r} will be donated there for you with every order of your subscription,`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose"},pl:{ctaTitle:()=>"Choose Your Impact",ctaMessagePrefix:()=>" at no extra cost.",ctaMessage:({donationPercentage:r="1%"}={})=>`Choose a nonprofit and ${r} will be donated there for you with every order of your subscription,`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose"}};var Z=Object.defineProperty,Q=Object.getOwnPropertyDescriptor,c=(r,o,t,e)=>{for(var i=e>1?void 0:e?Q(o,t):o,b=r.length-1,s;b>=0;b--)(s=r[b])&&(i=(e?s(o,t,i):s(i))||i);return e&&i&&Z(o,t,i),i};const X=2*60*60*1e3;class a extends M{constructor(){super(...arguments),this.baseUrl=A,this.lang="en",this.draftConfig=!1,this.debug=!1,this.isMobile=window.innerWidth<768,this.getChainNonprofits=async()=>{v(["apiKey","subscriptionId","storeId"],this);const o=await U({baseUrl:this.baseUrl,headers:k(this.apiKey),requestBody:{storeId:this.storeId,postalCode:this.postalCode,countryCode:this.countryCode,widgetName:"select-subscription-nonprofit",version:"1.0.0",lang:this.configLang,options:{config:{draftConfig:this.draftConfig}}}});return this.localStorage.setItemJson("chainNonprofits",{createdAt:new Date,data:o}),o},this.updateNonprofitIdForSubscription=async({selectedNonprofitId:o})=>this.subscriptionId?(v(["apiKey","subscriptionId"],this),R({baseUrl:this.baseUrl,headers:k(this.apiKey),requestBody:{remoteSubscriptionId:this.subscriptionId,nonprofitId:o,selectionMethod:"subscription_management_widget"}})):null,this.nonprofitListDataController=new C(this,this.getChainNonprofits),this.subscriptionUpdateDataController=new C(this,this.updateNonprofitIdForSubscription),this.localStorage=Y(this),this.makeHandleSelect=(o,t,e)=>async i=>{if(!this.allowChange)return;const b=this.selectedNonprofitId;if(i instanceof KeyboardEvent){let s=null;switch(i.key){case"ArrowUp":case"ArrowLeft":t===0?s=e[e.length-1]:s=e[t-1],i.preventDefault();break;case"ArrowRight":case"ArrowDown":t===e.length-1?s=e[0]:s=e[t+1],i.preventDefault();break;case"Enter":case" ":i.preventDefault();break;default:return}if(s){const f=this.renderRoot.querySelector(`[data-value="${s.nonprofit.id}"]`);f!==null&&(f.tabIndex=0,f.focus());return}}if(i.currentTarget instanceof HTMLElement){if(b===o)return;this.selectedNonprofitId=o}},this.handleSubmit=async()=>{const{selectedNonprofitId:o}=this;if(!this.allowSubmit||o==null)return;await this.subscriptionUpdateDataController.exec({selectedNonprofitId:o});const t=this.nonprofitListDataController?.data?.nonprofits.find(e=>e.nonprofit.id===o);this.dispatchEvent(new V({selectedNonprofitId:o,nonprofitName:t?.nonprofit.name,source:_.select_subscription_nonprofit}))},this.evaluateBreakPoints=W(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0})}get configLang(){return z[this.lang]||"en"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.evaluateBreakPoints)}async firstUpdated(o){await this.restoreStateFromCache()}async updated(o){const t=["baseUrl","storeId","apiKey","countryCode","postalCode","lang"];for(const e of t)if(o.has(e)){await this.nonprofitListDataController.exec();break}}disconnectedCallback(){super.disconnectedCallback()}restoreStateFromCache(){v(["apiKey"],this);try{const{createdAt:o=0,data:t}=this.localStorage.getItemJson("chainNonprofits")||{};new Date(o).valueOf()+X>new Date().valueOf()&&(this.nonprofitListDataController.data=t,this.nonprofitListDataController.loading=!1)}catch{}}get allowChange(){return this.subscriptionUpdateDataController.data==null&&!this.subscriptionUpdateDataController.loading}get allowSubmit(){return!!(this.selectedNonprofitId&&this.allowChange)}get cssVariables(){const o={...H,"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"inherit","--beam-textColor":"inherit","--beam-backgroundColor":"inherit","--beam-SelectSubscriptionNonprofit-maxWidth":"800px","--beam-SelectSubscriptionNonprofit-mobile-header-alignItems":"center","--beam-SelectSubscriptionNonprofit-desktop-header-alignItems":"center","--beam-SelectSubscriptionNonprofit-headerContainer-padding":"2px","--beam-SelectSubscriptionNonprofit-title-textAlign":"inherit","--beam-SelectSubscriptionNonprofit-description-textAlign":"center","--beam-SelectSubscriptionNonprofit-description-lineHeight":"138%","--beam-SelectSubscriptionNonprofit-description-marginTop":"3px","--beam-SelectSubscriptionNonprofit-desktop-description-width":"80%","--beam-SelectSubscriptionNonprofit-mobile-description-width":"90%","--beam-SelectSubscriptionNonprofit-options-marginTop":"10px","--beam-SelectSubscriptionNonprofit-options-padding":"10px","--beam-SelectSubscriptionNonprofit-options-borderWidth":"1px","--beam-SelectSubscriptionNonprofit-options-borderColor":"transparent","--beam-SelectSubscriptionNonprofit-options-borderRadius":"8px","--beam-SelectSubscriptionNonprofit-options-backgroundColor":"#F9FBFB","--beam-SelectSubscriptionNonprofit-option-padding":"15px","--beam-SelectSubscriptionNonprofit-options-hover-backgroundColor":"#e1f1ee","--beam-SelectSubscriptionNonprofit-options-hover-borderWidth":"1px","--beam-SelectSubscriptionNonprofit-options-hover-borderColor":"#e1f1ee","--beam-SelectSubscriptionNonprofit-options-selected-borderWidth":"1px","--beam-SelectSubscriptionNonprofit-options-selected-borderColor":"#e1f1ee","--beam-SelectSubscriptionNonprofit-options-selected-backgroundColor":"#e1f1ee","--beam-SelectSubscriptionNonprofit-options-gap":"20px","--beam-SelectSubscriptionNonprofit-options-minWidth":"250px","--beam-SelectSubscriptionNonprofit-options-columnCount":"2","--beam-SelectSubscriptionNonprofit-options-icon-borderRadius":"4px","--beam-SelectSubscriptionNonprofit-options-icon-padding":"10px","--beam-SelectSubscriptionNonprofit-options-image-borderRadius":"4px","--beam-SelectSubscriptionNonprofit-cardIconContainer-height":"100%","--beam-SelectSubscriptionNonprofit-iconBackground-width":"50px","--beam-SelectSubscriptionNonprofit-iconBackground-height":"50px","--beam-SelectSubscriptionNonprofit-iconBackground-borderRadius":"50%","--beam-SelectSubscriptionNonprofit-iconBackground-background":"#0a323c","--beam-SelectSubscriptionNonprofit-icon-height":"50px","--beam-SelectSubscriptionNonprofit-checkmark-backgroundColor":"transparent","--beam-SelectSubscriptionNonprofit-checkmark-color":"transparent","--beam-SelectSubscriptionNonprofit-checkmark-borderColor":"#0A323C","--beam-SelectSubscriptionNonprofit-checkmark-selected-color":"#fff","--beam-SelectSubscriptionNonprofit-checkmark-selected-backgroundColor":"#0A323C","--beam-SelectSubscriptionNonprofit-checkmark-selected-borderColor":"#0A323C","--beam-SelectSubscriptionNonprofit-checkmark-hover-color":"#fff","--beam-SelectSubscriptionNonprofit-checkmark-hover-backgroundColor":"#0A323C","--beam-SelectSubscriptionNonprofit-checkmark-hover-borderColor":"#0A323C","--beam-SelectSubscriptionNonprofit-cardStyle":"'selected_icon'","--beam-SelectSubscriptionNonprofit-submitButton-color":"#fff","--beam-SelectSubscriptionNonprofit-submitButton-hover-color":"#fff","--beam-SelectSubscriptionNonprofit-submitButton-disabled-color":"#fff","--beam-SelectSubscriptionNonprofit-submitButton-backgroundColor":"#0A323C","--beam-SelectSubscriptionNonprofit-submitButton-hover-backgroundColor":"#222","--beam-SelectSubscriptionNonprofit-submitButton-disabled-backgroundColor":"#767676","--beam-SelectSubscriptionNonprofit-submitButton-borderColor":"#333","--beam-SelectSubscriptionNonprofit-submitButton-hover-borderColor":"#222","--beam-SelectSubscriptionNonprofit-submitButton-disabled-borderColor":"#767676","--beam-SelectSubscriptionNonprofit-submitButton-fontSize":"14px","--beam-SelectSubscriptionNonprofit-submitButton-fontWeight":"inherit","--beam-SelectSubscriptionNonprofit-submitButton-fontFamily":"inherit","--beam-SelectSubscriptionNonprofit-submitButton-textTransform":"none","--beam-SelectSubscriptionNonprofit-submitButton-borderRadius":"30px","--beam-SelectSubscriptionNonprofit-submitButton-padding":"10px 30px",...u("--beam-SelectSubscriptionNonprofit-title",{fontSize:"20px",fontWeight:"bold",lineHeight:"120%",textTransform:"capitalize",color:"#0a323c"}),...u("--beam-SelectSubscriptionNonprofit-descriptionPrefix",{marginTop:"3px",color:"#2f302d",fontSize:"14px",fontWeight:"bold",fontStyle:"normal",lineHeight:"138%"}),...u("--beam-SelectSubscriptionNonprofit-description",{color:"#2f302d",fontSize:"14px",fontStyle:"normal"}),"--beam-SelectSubscriptionNonprofit-details-cause-letterSpacing":"0.36px",...u("--beam-SelectSubscriptionNonprofit-details-cause",{fontSize:"12px",fontWeight:"bold",color:"#0a323c",fontStyle:"normal",lineHeight:"120%"}),...u("--beam-SelectSubscriptionNonprofit-details-description",{fontSize:"12px",marginTop:"5px",fontStyle:"normal",lineHeight:"140%",fontWeight:"400"}),"--beam-SelectSubscriptionNonprofit-details-fundingProgress-marginTop":"7px",...u("--beam-SelectSubscriptionNonprofit-details-funding-progress-label",{fontSize:"12px",color:"#666666",fontWeight:"400",fontStyle:"normal"}),"--beam-SelectSubscriptionNonprofit-stickyFooter-boxShadow":"0px -20px 20px 0px rgba(0, 0, 0, 0.04)","--beam-SelectSubscriptionNonprofit-stickyFooter-padding":"15px 0px 45px","--beam-SelectSubscriptionNonprofit-stickyFooter-backgroundColor":"white","--beam-SelectSubscriptionNonprofit-stickyFooter-marginLeft":"-15px","--beam-SelectSubscriptionNonprofit-stickyFooter-marginRight":"-15px","--beam-SelectSubscriptionNonprofit-stickyFooter-width":"auto"},t=this.nonprofitListDataController?.data?.config?.web?.theme||{},e={...o,...t};return Object.assign(Object.create({toCSS(){return E(this)}}),e)}render(){const{selectedNonprofitId:o}=this,{data:t,loading:e}=this.nonprofitListDataController;if(e&&!t)return O();if(this.nonprofitListDataController.error)return this.debug?N({error:this.nonprofitListDataController.error}):"";if(this.subscriptionUpdateDataController.error&&this.debug)return N({error:this.subscriptionUpdateDataController.error});if(t==null)return this.debug?N({error:new G("No data")}):"";const i=t?.nonprofits||[],b=i.find(n=>n.nonprofit.id===o)||null,s=this.cssVariables["--beam-SelectSubscriptionNonprofit-cardStyle"],f=s==="'icon'"||s==="'selected_icon'";return m`
<style>
:host {
${this.cssVariables.toCSS()}
}
</style>
<div class="widget-container ${this.isMobile?"widget-container-mobile":""}">
<div class="header-container ${this.isMobile?"header-container-mobile":"header-container-desktop"}">
<h3 class="title" part="title" id="beam-SelectSubscriptionNonprofit-title">
${l(this.configLang,t?.config?.web?.title||"")||S[this.configLang].ctaTitle()}
</h3>
<div
class="description-container ${this.isMobile?"header-container-mobile description-mobile":"header-container-desktop description-desktop"}"
>
<span class="description" part="description">
${l(this.configLang,t?.config?.web?.additionalStrings?.ctaMessage||"")||S[this.configLang].ctaMessage()}
</span>
<span class="description-prefix" part="description">
${l(this.configLang,t?.config?.web?.additionalStrings?.ctaMessagePrefix||"")||S[this.configLang].ctaMessagePrefix()}
</span>
</div>
</div>
<div class="root">
<div
tabindex="-1"
class="options cardGrid"
part="options"
role="radiogroup"
aria-labelledby="beam-SelectSubscriptionNonprofit-title"
?aria-disabled=${!this.allowChange}
>
${F(i,n=>n.nonprofit.id,(n,h)=>{const g=o===n.nonprofit.id,y=g||b==null&&h===0,w=n.nonprofit.causeIconUrl,B=n.nonprofit.causeIconSelectedUrl,$=n.imageUrl,T=s==="'selected_icon'"?B:w;return m`
<div
class="option ${x({isSelected:g,isDisabled:!this.allowChange})}"
part="option"
role="radio"
tabindex="${y?0:-1}"
data-value=${n.nonprofit.id}
?aria-checked=${g}
@click=${this.makeHandleSelect(n.nonprofit.id,h,i)}
@keydown=${this.makeHandleSelect(n.nonprofit.id,h,i)}
aria-label="${l(this.configLang,n.nonprofit.cause||"")}"
>
${f?m` <div class="card-icon-container">
<div class="icon-background">
<img src="${T}" alt="" role="presentation" class="card-icon" />
</div>
</div>`:m` <div class="card-image-container">
<img src="${$}" alt="" role="presentation" class="card-image" />
</div>`}
<div class="card-details-container" part="details">
<div class="details-cause">
<span part="checkbox" class="checkbox">
<span style="line-height: 0;"> ${J({height:"10px",width:"10px"})} </span>
</span>
${l(this.configLang,n.nonprofit.cause||"")}
</div>
<p class="details-description">
${P(l(this.configLang,n.impact.description||""))}
</p>
<div class="card-progress-bar">
<beam-progress-bar
value="${n.impact.goalProgressPercentage}"
style="flex: 1 0;"
></beam-progress-bar>
<span class="details-funding-progress-label">
${l(this.configLang,n.impact.goalProgressText)}
</span>
</div>
</div>
</div>
`})}
</div>
</div>
<div
id="footer"
class="footer ${this.isMobile?"sticky-footer":"footer-desktop"} ${this.isMobile&&!this.selectedNonprofitId?"hideStickyFooter":""}"
>
<button
type="button"
?aria-disabled=${!this.allowSubmit}
@click="${this.handleSubmit}"
class="${x({isDisabled:!this.allowSubmit,submitButton:!0})}"
part="submitButton"
>
${this.subscriptionUpdateDataController.data!==null?l(this.configLang,t?.config?.web?.additionalStrings?.submitButtonTextCompleted||"")||S[this.configLang].submitButtonTextCompleted():l(this.configLang,t?.config?.web?.additionalStrings?.submitButtonText||"")||S[this.configLang].submitButtonText()}
</button>
</div>
</div>
`}}a.tagName="beam-select-subscription-nonprofit",a.styles=[j,D`
:host {
display: block;
max-width: var(--beam-SelectSubscriptionNonprofit-maxWidth);
font-family: var(--beam-fontFamily);
font-style: var(--beam-fontStyle);
font-size: var(--beam-fontSize);
background-color: var(--beam-backgroundColor);
color: var(--beam-textColor);
word-break: normal;
}
.widget-container-mobile {
position: relative;
}
.header-container {
align-items: flex-start;
justify-content: space-between;
padding: var(--beam-SelectSubscriptionNonprofit-headerContainer-padding);
display: flex;
flex-direction: column;
gap: 8px;
}
.header-container-mobile {
align-items: var(--beam-SelectSubscriptionNonprofit-mobile-header-alignItems);
}
.header-container-desktop {
align-items: var(--beam-SelectSubscriptionNonprofit-desktop-header-alignItems);
}
.title {
text-align: var(--beam-SelectSubscriptionNonprofit-title-textAlign);
${d("--beam-SelectSubscriptionNonprofit-title")};
}
.description-container {
text-align: var(--beam-SelectSubscriptionNonprofit-description-textAlign);
line-height: var(--beam-SelectSubscriptionNonprofit-description-lineHeight);
margin-top: var(--beam-SelectSubscriptionNonprofit-description-marginTop);
}
.description-prefix {
${d("--beam-SelectSubscriptionNonprofit-descriptionPrefix")};
}
.description {
${d("--beam-SelectSubscriptionNonprofit-description")};
}
.description-desktop {
width: var(--beam-SelectSubscriptionNonprofit-desktop-description-width);
}
.description-mobile {
width: var(--beam-SelectSubscriptionNonprofit-mobile-description-width);
}
.root {
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
.options {
margin-top: var(--beam-SelectSubscriptionNonprofit-options-marginTop);
padding: var(--beam-SelectSubscriptionNonprofit-options-padding);
}
.card-icon-container {
height: var(--beam-SelectSubscriptionNonprofit-cardIconContainer-height);
flex: 0;
flex-direction: column;
}
.icon-background {
width: var(--beam-SelectSubscriptionNonprofit-iconBackground-width);
height: var(--beam-SelectSubscriptionNonprofit-iconBackground-height);
border-radius: var(--beam-SelectSubscriptionNonprofit-iconBackground-borderRadius);
overflow: hidden;
background: var(--beam-SelectSubscriptionNonprofit-iconBackground-background);
display: flex;
justify-content: center;
align-items: center;
}
.card-icon {
height: var(--beam-SelectSubscriptionNonprofit-icon-height);
display: block;
padding: var(--beam-SelectSubscriptionNonprofit-options-icon-padding);
border-radius: var(--beam-SelectSubscriptionNonprofit-options-icon-borderRadius);
}
.card-image-container {
height: 100%;
flex: 4;
display: flex;
flex-direction: column;
}
.card-image {
flex: 1;
height: auto;
width: 100%;
object-fit: cover;
border-radius: var(--beam-SelectSubscriptionNonprofit-options-image-borderRadius);
}
.option {
/* outline is used to prevent layer shift if changing border width */
outline: var(--beam-SelectSubscriptionNonprofit-options-borderWidth) solid
var(--beam-SelectSubscriptionNonprofit-options-borderColor);
border-radius: var(--beam-SelectSubscriptionNonprofit-options-borderRadius);
background-color: var(--beam-SelectSubscriptionNonprofit-options-backgroundColor);
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s, outline 0.2s;
display: flex;
gap: 15px;
padding: var(--beam-SelectSubscriptionNonprofit-option-padding);
}
.options.cardGrid {
order: 3;
}
.option:not(.isDisabled):focus-visible,
.option:not(.isDisabled):hover,
.option:not(.isSelected):focus-visible,
.option:not(.isSelected):hover {
background-color: var(--beam-SelectSubscriptionNonprofit-options-hover-backgroundColor);
outline: var(--beam-SelectSubscriptionNonprofit-options-hover-borderWidth) solid
var(--beam-SelectSubscriptionNonprofit-options-hover-borderColor);
}
.option.isDisabled {
cursor: not-allowed;
}
.option.isSelected {
outline: var(--beam-SelectSubscriptionNonprofit-options-selected-borderWidth) solid
var(--beam-SelectSubscriptionNonprofit-options-selected-borderColor);
background-color: var(--beam-SelectSubscriptionNonprofit-options-selected-backgroundColor);
}
.option.isSelected:focus-visible,
.option.isSelected:hover {
outline: var(--beam-SelectSubscriptionNonprofit-options-selected-borderWidth) solid
var(--beam-SelectSubscriptionNonprofit-options-selected-borderColor);
}
.option .checkbox {
margin-left: 5px;
float: right;
padding: 2px;
border-radius: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-style: solid;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
color: var(--beam-SelectSubscriptionNonprofit-checkmark-color);
background-color: var(--beam-SelectSubscriptionNonprofit-checkmark-backgroundColor);
border-color: var(--beam-SelectSubscriptionNonprofit-checkmark-borderColor);
}
.option.isSelected .checkbox,
.option.isSelected:focus-visible .checkbox,
.option.isSelected:hover .checkbox {
color: var(--beam-SelectSubscriptionNonprofit-checkmark-selected-color);
background-color: var(--beam-SelectSubscriptionNonprofit-checkmark-selected-backgroundColor);
border-color: var(--beam-SelectSubscriptionNonprofit-checkmark-selected-borderColor);
}
.option:not(.isSelected):focus-visible .checkbox,
.option:not(.isSelected):hover .checkbox {
color: var(--beam-SelectSubscriptionNonprofit-checkmark-hover-color);
background-color: var(--beam-SelectSubscriptionNonprofit-checkmark-hover-backgroundColor);
border-color: var(--beam-SelectSubscriptionNonprofit-checkmark-hover-borderColor);
}
.card-details-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;
}
.details-cause {
flex: 0 1;
${d("--beam-SelectSubscriptionNonprofit-details-cause")};
letter-spacing: var(--beam-SelectSubscriptionNonprofit-details-cause-letterSpacing);
}
.details-description {
flex: 1 1;
${d("--beam-SelectSubscriptionNonprofit-details-description")}
}
.details-description .nonprofitName {
font-weight: var(--beam-SelectSubscriptionNonprofit-details-nonprofitName-fontWeight);
font-style: var(--beam-SelectSubscriptionNonprofit-details-nonprofitName-fontStyle);
}
.card-progress-bar {
display: flex;
margin-top: var(--beam-SelectSubscriptionNonprofit-details-fundingProgress-marginTop);
align-items: center;
}
.details-funding-progress-label {
white-space: nowrap;
text-align: right;
flex: 0 1;
margin-left: 15px;
${d("--beam-SelectSubscriptionNonprofit-details-funding-progress-label")}
}
.footer {
text-align: center;
}
.sticky-footer {
position: sticky;
background: var(--beam-SelectSubscriptionNonprofit-stickyFooter-backgroundColor);
bottom: 0;
box-shadow: var(--beam-SelectSubscriptionNonprofit-stickyFooter-boxShadow);
padding: var(--beam-SelectSubscriptionNonprofit-stickyFooter-padding);
left: 0;
right: 0;
margin-left: var(--beam-SelectSubscriptionNonprofit-stickyFooter-marginLeft);
margin-right: var(--beam-SelectSubscriptionNonprofit-stickyFooter-marginRight);
width: var(--beam-SelectSubscriptionNonprofit-stickyFooter-width);
}
.footer-desktop {
margin-top: 20px;
}
.submitButton {
color: var(--beam-SelectSubscriptionNonprofit-submitButton-color);
background-color: var(--beam-SelectSubscriptionNonprofit-submitButton-backgroundColor);
border: 1px solid var(--beam-SelectSubscriptionNonprofit-submitButton-borderColor);
font-size: var(--beam-SelectSubscriptionNonprofit-submitButton-fontSize);
font-weight: var(--beam-SelectSubscriptionNonprofit-submitButton-fontWeight);
font-family: var(--beam-SelectSubscriptionNonprofit-submitButton-fontFamily);
text-transform: var(--beam-SelectSubscriptionNonprofit-submitButton-textTransform);
border-radius: var(--beam-SelectSubscriptionNonprofit-submitButton-borderRadius);
padding: var(--beam-SelectSubscriptionNonprofit-submitButton-padding);
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
cursor: pointer;
display: inline-flex;
width: 234.173px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.submitButton:not(.isDisabled):focus-visible,
.submitButton:not(.isDisabled):hover {
background-color: var(--beam-SelectSubscriptionNonprofit-submitButton-hover-backgroundColor);
border-color: var(--beam-SelectSubscriptionNonprofit-submitButton-hover-borderColor);
color: var(--beam-SelectSubscriptionNonprofit-submitButton-hover-color);
}
.submitButton.isDisabled {
color: var(--beam-SelectSubscriptionNonprofit-submitButton-disabled-color);
background-color: var(--beam-SelectSubscriptionNonprofit-submitButton-disabled-backgroundColor);
border-color: var(--beam-SelectSubscriptionNonprofit-submitButton-disabled-borderColor);
cursor: not-allowed;
}
.hideStickyFooter {
display: none;
}
`,q({gap:"var(--beam-SelectSubscriptionNonprofit-options-gap)",itemMinWidth:"var(--beam-SelectSubscriptionNonprofit-options-minWidth)",columnCount:"var(--beam-SelectSubscriptionNonprofit-options-columnCount)"})],c([p({type:String})],a.prototype,"baseUrl",2),c([p({type:String})],a.prototype,"apiKey",2),c([p({type:String})],a.prototype,"subscriptionId",2),c([p({type:Number})],a.prototype,"storeId",2),c([p({type:String})],a.prototype,"countryCode",2),c([p({type:String})],a.prototype,"postalCode",2),c([p({type:Number,reflect:!0})],a.prototype,"selectedNonprofitId",2),c([p({type:String})],a.prototype,"lang",2),c([p({type:Boolean})],a.prototype,"draftConfig",2),c([p({type:Boolean})],a.prototype,"debug",2),c([L()],a.prototype,"isMobile",2),K(a);export{a as BeamSelectSubscriptionNonprofit};
//# sourceMappingURL=select-subscription-nonprofit.esm.js.map