@beamimpact/web-sdk/dist/components/subscription-impact.js

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

import{h as v,f as T,y as m,g as d,t as O,p as L}from"../chunks/lit-iNN5L_Qk.esm.js";import{d as k}from"../chunks/lodash-P8OIs-at.esm.js";import{p as M}from"../chunks/progress-bar-PMU_xI3L.esm.js";import{s as $,a as G}from"../chunks/share-button-diP8wKOc.esm.js";import"../chunks/vendor-GKiOHg2N.esm.js";import{D as V,g as _,S as j}from"../chunks/routes-o1QpF40R.esm.js";import{u as b,A as H,d as g,a as K,_ as q,i as r}from"../chunks/localize-m-_ESmpk.esm.js";import{c as J,d as Q,e as X}from"../chunks/enforce-config-ZyPq_4CF.esm.js";import{_ as Z}from"../chunks/loading-template-t4fFsYtr.esm.js";import{makeApiKeyHeader as ee}from"../utils/makeApiKeyHeader.js";import{c as ie}from"../chunks/responsive-2lC2Wrtg.esm.js";import{logger as te}from"../utils/logger.js";import{c as ae}from"../chunks/css-card-grid-nEc--M5M.esm.js";import"../chunks/is-all-html-elements-SdSkxirh.esm.js";import"../chunks/share-button-SNvuFDC9.esm.js";import"../chunks/beam-errors-P-Lu07Ce.esm.js";var re=Object.defineProperty,ne=Object.getOwnPropertyDescriptor,oe=(e,i,a,n)=>{for(var t=n>1?void 0:n?ne(i,a):i,p=e.length-1,l;p>=0;p--)(l=e[p])&&(t=(n?l(i,a,t):l(t))||t);return n&&t&&re(i,a,t),t};class w extends v{constructor(){super(...arguments),this.infoText=""}static get styles(){return T`
      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 m`<sl-badge pill aria-label="${this.infoText}">${this.infoText}</sl-badge>`}}oe([d({type:String})],w.prototype,"infoText",2),customElements.get("beam-info-pill")||customElements.define("beam-info-pill",w);const se={"--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:e=""})=>`Your Subscription is Going Towards ${e} With Every Order`,futureTenseTitle:({causeName:e=""})=>`Your Subscription Will Go Towards ${e} With Every Order`,ctaMessagePrefix:()=>"At no extra cost, ",description:({nonprofit:e=""})=>`1% of every order will be donated to ${e} on your behalf.`,personalImpactTitle:()=>"You're Currently Funding",futureTensePersonalImpactTitle:()=>"You\u2019ll Be Funding",communityImpactTitle:()=>"Together We're Funding",personalLinkCopy:({nonprofit:e=""})=>`Learn about ${e} \u203A`,communityLinkCopy:({brandName:e=""})=>`Learn about ${e} \u203A`,percentFunded:()=>"funded",progressPillText:()=>"\u{1F389} Impact begins once order is charged"},fr:{title:({causeName:e=""})=>`Your Subscription is Going Towards ${e} With Every Order`,futureTenseTitle:({causeName:e=""})=>`Your Subscription Will Go Towards ${e} With Every Order`,ctaMessagePrefix:()=>"At no extra cost, ",description:({nonprofit:e=""})=>`1% of every order will be donated to ${e} on your behalf.`,personalImpactTitle:()=>"You're Currently Funding",futureTensePersonalImpactTitle:()=>"You\u2019ll Be Funding",communityImpactTitle:()=>"Together We're Funding",personalLinkCopy:({nonprofit:e=""})=>`Learn about ${e} \u203A`,communityLinkCopy:({brandName:e=""})=>`Learn about ${e} \u203A`,percentFunded:()=>"funded",progressPillText:()=>"\u{1F389} Impact begins once order is charged"},de:{title:({causeName:e=""})=>`Your Subscription is Going Towards ${e} With Every Order`,futureTenseTitle:({causeName:e=""})=>`Your Subscription Will Go Towards ${e} With Every Order`,ctaMessagePrefix:()=>"At no extra cost, ",description:({nonprofit:e=""})=>`1% of every order will be donated to ${e} on your behalf.`,personalImpactTitle:()=>"You're Currently Funding",futureTensePersonalImpactTitle:()=>"You\u2019ll Be Funding",communityImpactTitle:()=>"Together We're Funding",personalLinkCopy:({nonprofit:e=""})=>`Learn about ${e} \u203A`,communityLinkCopy:({brandName:e=""})=>`Learn about ${e} \u203A`,percentFunded:()=>"funded",progressPillText:()=>"\u{1F389} Impact begins once order is charged"},es:{title:({causeName:e=""})=>`Your Subscription is Going Towards ${e} With Every Order`,futureTenseTitle:({causeName:e=""})=>`Your Subscription Will Go Towards ${e} With Every Order`,ctaMessagePrefix:()=>"At no extra cost, ",description:({nonprofit:e=""})=>`1% of every order will be donated to ${e} on your behalf.`,personalImpactTitle:()=>"You're Currently Funding",futureTensePersonalImpactTitle:()=>"You\u2019ll Be Funding",communityImpactTitle:()=>"Together We're Funding",personalLinkCopy:({nonprofit:e=""})=>`Learn about ${e} \u203A`,communityLinkCopy:({brandName:e=""})=>`Learn about ${e} \u203A`,percentFunded:()=>"funded",progressPillText:()=>"\u{1F389} Impact begins once order is charged"},it:{title:({causeName:e=""})=>`Your Subscription is Going Towards ${e} With Every Order`,futureTenseTitle:({causeName:e=""})=>`Your Subscription Will Go Towards ${e} With Every Order`,ctaMessagePrefix:()=>"At no extra cost, ",description:({nonprofit:e=""})=>`1% of every order will be donated to ${e} on your behalf.`,personalImpactTitle:()=>"You're Currently Funding",futureTensePersonalImpactTitle:()=>"You\u2019ll Be Funding",communityImpactTitle:()=>"Together We're Funding",personalLinkCopy:({nonprofit:e=""})=>`Learn about ${e} \u203A`,communityLinkCopy:({brandName:e=""})=>`Learn about ${e} \u203A`,percentFunded:()=>"funded",progressPillText:()=>"\u{1F389} Impact begins once order is charged"},pl:{title:({causeName:e=""})=>`Your Subscription is Going Towards ${e} With Every Order`,futureTenseTitle:({causeName:e=""})=>`Your Subscription Will Go Towards ${e} With Every Order`,ctaMessagePrefix:()=>"At no extra cost, ",description:({nonprofit:e=""})=>`1% of every order will be donated to ${e} on your behalf.`,personalImpactTitle:()=>"You're Currently Funding",futureTensePersonalImpactTitle:()=>"You\u2019ll Be Funding",communityImpactTitle:()=>"Together We're Funding",personalLinkCopy:({nonprofit:e=""})=>`Learn about ${e} \u203A`,communityLinkCopy:({brandName:e=""})=>`Learn about ${e} \u203A`,percentFunded:()=>"funded",progressPillText:()=>"\u{1F389} Impact begins once order is charged"}};var ce=Object.defineProperty,pe=Object.getOwnPropertyDescriptor,c=(e,i,a,n)=>{for(var t=n>1?void 0:n?pe(i,a):i,p=e.length-1,l;p>=0;p--)(l=e[p])&&(t=(n?l(i,a,t):l(t))||t);return n&&t&&ce(i,a,t),t};class o extends v{constructor(){super(...arguments),this.baseUrl=V,this.lang="en",this.debug=!1,this.draftConfig=!1,this.isMobile=window.innerWidth<720,this.getImpactData=async()=>(X(["apiKey","beamUserId","nonprofitId"],this),await _({baseUrl:this.baseUrl,headers:ee(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 H(this,this.getImpactData),this.evaluateBreakPoints=k(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0}),this.resizeElements=k(()=>{$(this.impactTitleRefs),$(this.impactLinkRefs)},50,{maxWait:50,leading:!0})}get configLang(){return j[this.lang]||"en"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.evaluateBreakPoints)}async updated(i){const a=["baseUrl","storeId","apiKey","beamUserId","lang"];for(const n of a)if(i.has(n)){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(i){if(document.fonts.status==="loading")return await document.fonts.ready.catch(a=>te.error(a)),i()}get cssVariables(){const i={...M,...G,...se,"--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-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",...g("--beam-subscriptionImpact-title",{fontSize:"20px",fontWeight:"bold",lineHeight:"120%",textTransform:"capitalize",fontStyle:"normal",color:"#0a323c"}),...g("--beam-subscriptionImpact-descriptionPrefix",{fontSize:"14px",fontWeight:"800",lineHeight:"138%",fontStyle:"normal",color:"#2f302d",marginTop:"9px"}),...g("--beam-subscriptionImpact-description",{fontSize:"14px",fontWeight:"400",lineHeight:"138%",fontStyle:"normal",color:"#2f302d",marginTop:"9px"}),...g("--beam-subscriptionImpact-cardTitle",{fontSize:"12px",fontWeight:"bold",lineHeight:"120%",fontStyle:"normal",textTransform:"uppercase"}),...g("--beam-subscriptionImpact-cardDescription",{fontSize:"12px",fontWeight:"400",lineHeight:"18.2px",fontStyle:"normal",color:"#454a47"}),...g("--beam-subscriptionImpact-card-progressBarLabel",{fontSize:"10px",color:"#878a92"}),...g("--beam-subscriptionImpact-card-impactLink",{fontSize:"12px",fontWeight:"600",lineHeight:"16px",fontStyle:"normal",color:"#454a47",marginTop:"auto"})},a=this.impactDataController?.data?.config?.web?.theme||{},n={...i,...a};return Object.assign(Object.create({toCSS(){return K(this)}}),n)}render(){const{data:i,loading:a,error:n}=this.impactDataController;if(a)return Z();if(n||i==null)return this.debug?q({error:n||new Error("No data")}):"";const t=i.chain.name,p=r(this.configLang,i.personal[0].nonprofit.cause||""),l=i.personal[0].nonprofit.name,u=i.personal[0]?.impact?.goalProgressPercentage||0,h=i.community[0].impact?.goalProgressPercentage||0,C=`${u}% ${r(this.configLang,i?.config?.web?.additionalStrings?.percentFunded||"")||s[this.configLang].percentFunded()}`,S=`${h}% ${r(this.configLang,i?.config?.web?.additionalStrings?.percentFunded||"")||s[this.configLang].percentFunded()}`,P=i.community[0]?.imageUrl||"",B=i.personal[0]?.imageUrl||"",A=i.personal[0].nonprofit.causeIconUrl,F=i.personal[0].nonprofit.causeIconSelectedUrl,f=this.cssVariables["--beam-SubscriptionImpact-cardStyle"],x=this.cssVariables["--beam-SubscriptionImpact-imagePosition"],y=f==="'image'",I=f==="'selected_icon'"?F:A,W=y?P:I,E=y?B:I,N=r(this.configLang,i?.config?.web?.dynamicStrings?.ctaTitle||"")||s[this.configLang].title({causeName:p}),Y=r(this.configLang,i?.config?.web?.dynamicStrings?.ctaFutureTenseTitle||"")||s[this.configLang].futureTenseTitle({causeName:p}),z=i.store.communityPageURL,U=i.personal[0].nonprofit?.website,R=i.personal[0].share?.imageUrl,D=this.cssVariables["--beam-SubscriptionImpact-share-button-icon-name"]||"share-2";return m`
      <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">
            ${u<=1?Y:N}
          </h3>
          <div
            class="description-container ${this.isMobile?"header-container-mobile description-mobile":"header-container-desktop description-desktop"}"
          >
            <span class="description-prefix" part="description">
              ${r(this.configLang,i?.config?.web?.additionalStrings?.ctaMessagePrefix||"")||s[this.configLang].ctaMessagePrefix()}
            </span>
            <span class="description" part="description" id="beam-subscriptionImpact-description">
              ${r(this.configLang,i?.config?.web?.dynamicStrings?.ctaMessage||"")||s[this.configLang].description({nonprofit:l})}
            </span>
          </div>
        </div>
        <div class="root">
          <div
            class="card-container cardGrid ${this.isMobile?"card-container-mobile":""}"
            id="beam-subscriptionImpact-card-container"
          >
            ${this.renderInlineCard({title:u<=1?r(this.configLang,i?.config?.web?.additionalStrings?.futureTensePersonalImpactTitle||"")||s[this.configLang].futureTensePersonalImpactTitle():r(this.configLang,i?.config?.web?.additionalStrings?.personalImpactTitle||"")||s[this.configLang].personalImpactTitle(),image:E,description:r(this.configLang,i.personal[0]?.impact?.description||""),link:U,linkText:r(this.configLang,i?.config?.web?.dynamicStrings?.personalLinkCopy||"")||s[this.configLang].personalLinkCopy({nonprofit:l}),progressBarValue:u,progressBarText:C,infoPill:r(this.configLang,i?.config?.web?.additionalStrings?.progressPillText||"")||s[this.configLang].progressPillText(),imageType:f,cardType:"personal",imagePosition:x})}
            ${this.renderInlineCard({title:r(this.configLang,i?.config?.web?.additionalStrings?.communityImpactTitle||"")||s[this.configLang].communityImpactTitle(),image:W,description:r(this.configLang,i.community[0].impact?.description||""),link:z,linkText:r(this.configLang,i?.config?.web?.dynamicStrings?.communityLinkCopy||"")||s[this.configLang].communityLinkCopy({brandName:t}),progressBarValue:h,progressBarText:S,infoPill:r(this.configLang,i?.config?.web?.additionalStrings?.progressPillText||"")||s[this.configLang].progressPillText(),imageType:f,cardType:"community",imagePosition:x})}
          </div>
        </div>
        <div class="footer" part="social-share">
          <beam-share-button
            imageUrl="${R}"
            brandName="${t}"
            shareIcon="${D}"
            buttonText="${r(this.configLang,i?.config?.web?.additionalStrings?.shareButtonText||"")}"
            configLang="${this.configLang}"
          ></beam-share-button>
        </div>
      </div>
    `}renderInlineCard(i){const a=i.progressBarValue!==void 0&&i.progressBarValue<=1&&i.cardType==="personal";return m`
      <div class="inline-card ${this.isMobile?"":"inline-card-desktop"}">
        ${i.image&&i.imagePosition==="'block'"&&i.imageType==="'image'"?m` <div
              class="image-block-container"
              style="background: url('${i.image}');background-position: center;
          background-size: cover;
          background-repeat: no-repeat;"
            ></div>`:""}
        <h4 class="card-title">${i.title}</h4>
        <div class="inline-content">
          ${i.image&&i.imagePosition==="'inline'"?m`${i.imageType==="'icon'"||i.imageType==="'selected_icon'"?m` <div class="icon-container">
                    <div class="icon-background">
                      <img src="${i.image}" alt="" role="presentation" class="icon" />
                    </div>
                  </div>`:m` <div class="image-container">
                    <img src="${i.image}" alt="" role="presentation" class="image" />
                  </div>`}`:""}
          <div class="impact-container" part="details">
            <p class="card-description">${i.description}</p>
            <div class="card-progress-bar">
              ${a?m` <beam-info-pill infoText="${i.infoPill}"></beam-info-pill> `:m`
                    <beam-progress-bar value="${i.progressBarValue}" style="flex: 1 0;"> </beam-progress-bar>
                    <span class="details-funding-progress-label"> ${i.progressBarText} </span>
                  `}
            </div>
            <div class="link-container">
              <a href="${i.link}" class="impact-link" target="_blank">${i.linkText}</a>
            </div>
          </div>
        </div>
      </div>
    `}}o.tagName="beam-subscription-impact",o.styles=[J,ie,T`
      :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;
        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);
      }
    `,ae({gap:"var(--beam-subscriptionImpact-cardContainer-gap)",itemMinWidth:"250px",columnCount:"2"})],c([d({type:String,reflect:!0})],o.prototype,"baseUrl",2),c([d({type:String,reflect:!1})],o.prototype,"apiKey",2),c([d({type:Number})],o.prototype,"storeId",2),c([d({type:String,reflect:!0})],o.prototype,"nonprofitId",2),c([d({type:String,reflect:!0})],o.prototype,"beamUserId",2),c([d({type:String})],o.prototype,"lang",2),c([d({type:Boolean})],o.prototype,"debug",2),c([d({type:Boolean})],o.prototype,"draftConfig",2),c([O()],o.prototype,"isMobile",2),c([L(".card-title")],o.prototype,"impactTitleRefs",2),c([L(".impact-link")],o.prototype,"impactLinkRefs",2),Q(o);export{o as BeamSubscriptionImpact};
//# sourceMappingURL=subscription-impact.js.map