@beamimpact/web-sdk/dist/components/select-subscription-nonprofit.esm.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{m as D,y as m,f as F,g as p,t as E,h as I,u as z,q as v,k as L}from"../chunks/lit-WqMxC_PA.esm.js";import{d as A}from"../chunks/lodash-D3TLHRR_.esm.js";import{D as M,d as W,u as P,W as U,S as R}from"../chunks/routes-DguZveS3.esm.js";import{u as d,A as k,d as u,a as _,_ as N,i as l}from"../chunks/localize-Btu9xYcE.esm.js";import{p as j}from"../chunks/progress-bar-DF7UuuHb.esm.js";import{c as H,d as K,e as x}from"../chunks/enforce-config-CZ3ToOgr.esm.js";import{_ as O}from"../chunks/loading-template-DG4lkIIc.esm.js";import{makeApiKeyHeader as C}from"../utils/makeApiKeyHeader.esm.js";import{B as G}from"../chunks/beam-errors-Ci0d3926.esm.js";import{createScopedLocalStorage as q}from"../utils/local-storage.esm.js";import{c as V}from"../chunks/css-card-grid-CvoGpsJH.esm.js";import{c as Z}from"../chunks/events-Dki0ka4F.esm.js";import"./beam-partner-logos.esm.js";import"../chunks/promo-types-DKAOFHJr.esm.js";import"../utils/logger.esm.js";const J=({height:e="1em",width:t="1em"}={})=>m`
    <svg
      style="${D({height:e,width:t,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, with every order of your subscription.",ctaMessage:({donationPercentage:e="1%"}={})=>`Choose a nonprofit and ${e} will be donated there for you,`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose"},fr:{ctaTitle:()=>"Choisissez votre impact",ctaMessagePrefix:()=>" sans frais suppl\xE9mentaires, \xE0 chaque commande de votre abonnement.",ctaMessage:({donationPercentage:e="1%"}={})=>`Choisissez une association et ${e} sera revers\xE9 en votre nom,`,submitButtonText:()=>"Confirmer",submitButtonTextCompleted:()=>"Confirm\xE9 !",chooseButtonText:()=>"Choisir"},de:{ctaTitle:()=>"W\xE4hle deinen Impact",ctaMessagePrefix:()=>" ohne zus\xE4tzliche Kosten, bei jeder Bestellung deines Abonnements.",ctaMessage:({donationPercentage:e="1%"}={})=>`W\xE4hle eine gemeinn\xFCtzige Organisation und ${e} werden in deinem Namen gespendet,`,submitButtonText:()=>"Best\xE4tigen",submitButtonTextCompleted:()=>"Best\xE4tigt!",chooseButtonText:()=>"W\xE4hlen"},es:{ctaTitle:()=>"Elige tu impacto",ctaMessagePrefix:()=>" sin coste adicional, con cada pedido de tu suscripci\xF3n.",ctaMessage:({donationPercentage:e="1%"}={})=>`Elige una organizaci\xF3n sin \xE1nimo de lucro y donaremos ${e} en tu nombre,`,submitButtonText:()=>"Confirmar",submitButtonTextCompleted:()=>"\xA1Confirmado!",chooseButtonText:()=>"Elegir"},it:{ctaTitle:()=>"Scegli il tuo impatto",ctaMessagePrefix:()=>" senza costi aggiuntivi, a ogni ordine del tuo abbonamento.",ctaMessage:({donationPercentage:e="1%"}={})=>`Seleziona un'organizzazione no-profit e l\u2019${e} sar\xE0 donato a tuo nome,`,submitButtonText:()=>"Confermare",submitButtonTextCompleted:()=>"Confermato!",chooseButtonText:()=>"Scegli"},pl:{ctaTitle:()=>"Wybierz sw\xF3j wp\u0142yw",ctaMessagePrefix:()=>" bez \u017Cadnych dodatkowych koszt\xF3w, przy ka\u017Cdym zam\xF3wieniu w ramach subskrypcji.",ctaMessage:({donationPercentage:e="1%"}={})=>`Wybierz organizacj\u0119 non-profit, a ${e} zostanie przekazane w Twoim imieniu,`,submitButtonText:()=>"Zatwierd\u017A",submitButtonTextCompleted:()=>"Zatwierdzono!",chooseButtonText:()=>"Wybierz"},ja:{ctaTitle:()=>"\u5BC4\u4ED8\u5148\u3092\u304A\u9078\u3073\u304F\u3060\u3055\u3044\u3002",ctaMessagePrefix:()=>"\u8FFD\u52A0\u8CBB\u7528\u306A\u3057\u3067\u3001\u3054\u8CFC\u5165\u3054\u3068\u306B\u3001",ctaMessage:({donationPercentage:e="1%"}={})=>`\u975E\u55B6\u5229\u56E3\u4F53\u3092\u9078\u3076\u3068\u3001${e}\u304C\u305D\u306E\u56E3\u4F53\u306B\u5BC4\u4ED8\u3055\u308C\u307E\u3059\u3001`,submitButtonText:()=>"\u78BA\u8A8D\u3059\u308B",submitButtonTextCompleted:()=>"\u78BA\u8A8D\u6E08\u307F",chooseButtonText:()=>"\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}};var Y=Object.defineProperty,c=(e,t,o,n)=>{for(var i=void 0,b=e.length-1,s;b>=0;b--)(s=e[b])&&(i=s(t,o,i)||i);return i&&Y(t,o,i),i};const Q=2*60*60*1e3;class a extends I{constructor(){super(...arguments),this.baseUrl=M,this.lang="en",this.draftConfig=!1,this.debug=!1,this.isMobile=window.innerWidth<768,this.getChainNonprofits=async()=>{x(["apiKey","subscriptionId","storeId"],this);const t=await W({baseUrl:this.baseUrl,headers:C(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:t}),t},this.updateNonprofitIdForSubscription=async({selectedNonprofitId:t})=>this.subscriptionId?(x(["apiKey","subscriptionId"],this),P({baseUrl:this.baseUrl,headers:C(this.apiKey),requestBody:{remoteSubscriptionId:this.subscriptionId,nonprofitId:t,selectionMethod:"subscription_management_widget"}})):null,this.nonprofitListDataController=new k(this,this.getChainNonprofits),this.subscriptionUpdateDataController=new k(this,this.updateNonprofitIdForSubscription),this.localStorage=q(this),this.makeHandleSelect=(t,o,n)=>async i=>{if(!this.allowChange)return;const b=this.selectedNonprofitId;if(i instanceof KeyboardEvent){let s=null;switch(i.key){case"ArrowUp":case"ArrowLeft":o===0?s=n[n.length-1]:s=n[o-1],i.preventDefault();break;case"ArrowRight":case"ArrowDown":o===n.length-1?s=n[0]:s=n[o+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===t)return;this.selectedNonprofitId=t}},this.handleSubmit=async()=>{const{selectedNonprofitId:t}=this;if(!this.allowSubmit||t==null)return;await this.subscriptionUpdateDataController.exec({selectedNonprofitId:t});const o=this.nonprofitListDataController?.data?.nonprofits.find(n=>n.nonprofit.id===t);this.dispatchEvent(new Z({selectedNonprofitId:t,nonprofitName:o?.nonprofit.name,source:U.select_subscription_nonprofit,timestamp:new Date}))},this.evaluateBreakPoints=A(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0})}get configLang(){return R[this.lang]||"en"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.evaluateBreakPoints)}async firstUpdated(t){await this.restoreStateFromCache()}async updated(t){const o=["baseUrl","storeId","apiKey","countryCode","postalCode","lang"];for(const n of o)if(t.has(n)){await this.nonprofitListDataController.exec();break}}disconnectedCallback(){super.disconnectedCallback()}restoreStateFromCache(){x(["apiKey"],this);try{const{createdAt:t=0,data:o}=this.localStorage.getItemJson("chainNonprofits")||{};new Date(t).valueOf()+Q>new Date().valueOf()&&(this.nonprofitListDataController.data=o,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 t={...j,"--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"},o=this.nonprofitListDataController?.data?.config?.web?.theme||{},n={...t,...o};return Object.assign(Object.create({toCSS(){return _(this)}}),n)}render(){const{selectedNonprofitId:t}=this,{data:o,loading:n}=this.nonprofitListDataController;if(n&&!o)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(o==null)return this.debug?N({error:new G("No data")}):"";const i=o?.nonprofits||[],b=i.find(r=>r.nonprofit.id===t)||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,o?.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,o?.config?.web?.additionalStrings?.ctaMessage||"")||S[this.configLang].ctaMessage()}
            </span>
            <span class="description-prefix" part="description">
              ${l(this.configLang,o?.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}
          >
            ${z(i,r=>r.nonprofit.id,(r,g)=>{const h=t===r.nonprofit.id,y=h||b==null&&g===0,w=r.nonprofit.causeIconUrl,B=r.nonprofit.causeIconSelectedUrl,T=r.imageUrl,$=s==="'selected_icon'"?B:w;return m`
                  <div
                    class="option ${v({isSelected:h,isDisabled:!this.allowChange})}"
                    part="option"
                    role="radio"
                    tabindex="${y?0:-1}"
                    data-value=${r.nonprofit.id}
                    ?aria-checked=${h}
                    @click=${this.makeHandleSelect(r.nonprofit.id,g,i)}
                    @keydown=${this.makeHandleSelect(r.nonprofit.id,g,i)}
                    aria-label="${l(this.configLang,r.nonprofit.cause||"")}"
                  >
                    ${f?m` <div class="card-icon-container">
                          <div class="icon-background">
                            <img src="${$}" alt="" role="presentation" class="card-icon" />
                          </div>
                        </div>`:m` <div class="card-image-container">
                          <img src="${T}" 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,r.nonprofit.cause||"")}
                      </div>
                      <p class="details-description">
                        ${L(l(this.configLang,r.impact.description||""))}
                      </p>
                      <div class="card-progress-bar">
                        <beam-progress-bar
                          value="${r.impact.goalProgressPercentage}"
                          style="flex: 1 0;"
                        ></beam-progress-bar>
                        <span class="details-funding-progress-label">
                          ${l(this.configLang,r.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="${v({isDisabled:!this.allowSubmit,submitButton:!0})}"
            part="submitButton"
          >
            ${this.subscriptionUpdateDataController.data!==null?l(this.configLang,o?.config?.web?.additionalStrings?.submitButtonTextCompleted||"")||S[this.configLang].submitButtonTextCompleted():l(this.configLang,o?.config?.web?.additionalStrings?.submitButtonText||"")||S[this.configLang].submitButtonText()}
          </button>
        </div>
      </div>
    `}}a.tagName="beam-select-subscription-nonprofit",a.styles=[H,F`
      :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;
      }
    `,V({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"),c([p({type:String})],a.prototype,"apiKey"),c([p({type:String})],a.prototype,"subscriptionId"),c([p({type:Number})],a.prototype,"storeId"),c([p({type:String})],a.prototype,"countryCode"),c([p({type:String})],a.prototype,"postalCode"),c([p({type:Number,reflect:!0})],a.prototype,"selectedNonprofitId"),c([p({type:String})],a.prototype,"lang"),c([p({type:Boolean})],a.prototype,"draftConfig"),c([p({type:Boolean})],a.prototype,"debug"),c([E()],a.prototype,"isMobile"),K(a);export{a as BeamSelectSubscriptionNonprofit};
//# sourceMappingURL=select-subscription-nonprofit.esm.js.map