@beamimpact/web-sdk/dist/chunks/progress-bar-DF7UuuHb.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{f as g,g as n,h as d,y as m}from"./lit-WqMxC_PA.esm.js";var l=Object.defineProperty,b=(e,s,t,c)=>{for(var r=void 0,o=e.length-1,i;o>=0;o--)(i=e[o])&&(r=i(s,t,r)||r);return r&&l(s,t,r),r};class a extends d{constructor(){super(...arguments),this.value=0,this.animateProgress=!0}render(){return m`<div class="progress-bar-container">
      <style>
        :host {
          --beam-ProgressBar-value: ${this.value};
        }
      </style>
      <div class="progress-bar"></div>
    </div>`}}a.styles=g`
    :host {
      display: inline-block;
      min-width: 20px;
    }

    .progress-bar-container {
      border-radius: var(--beam-ProgressBar-border-radius, 8px);
      height: var(--beam-ProgressBar-height, 8px);
      padding: 0;
      width: 100%;
      background: var(--beam-ProgressBar-color-background, lightgray);
      position: relative;
      border: var(--beam-ProgressBar-border-width, 1px) solid var(--beam-ProgressBar-color-border, currentColor);
      overflow: hidden;
    }

    @keyframes animate-bar {
      0% {
        width: 0;
      }

      100% {
        width: calc(var(--beam-ProgressBar-value) * 1%);
      }
    }

    .progress-bar {
      width: calc(var(--beam-ProgressBar-value, 0) * 1%);
      height: 100%;
      position: absolute;
      background: var(--beam-ProgressBar-color-bar, linear-gradient(to right, currentColor, currentColor));
      left: 0;
      bottom: 0;
      top: 0;
      background-clip: padding-box;
      animation-duration: calc(
        var(--beam-ProgressBar-animation-duration-base, 0s) + var(--beam-ProgressBar-animation-duration-variable, 0s) *
          var(--beam-ProgressBar-value) / 100
      );
      animation-iteration-count: 1;
      animation-name: animate-bar;
      animation-timing-function: linear;
      border-radius: var(--beam-ProgressBar-progress-border-radius, 8px);
    }
  `,b([n({type:Number})],a.prototype,"value"),b([n({type:Boolean})],a.prototype,"animateProgress"),customElements.get("beam-progress-bar")||customElements.define("beam-progress-bar",a);const u={"--beam-ProgressBar-border-radius":"8px","--beam-ProgressBar-progress-border-radius":"8px","--beam-ProgressBar-height":"8px","--beam-ProgressBar-color-background":"transparent","--beam-ProgressBar-border-width":"1px","--beam-ProgressBar-color-border":"currentColor","--beam-ProgressBar-color-bar":"currentColor","--beam-ProgressBar-animation-duration-base":"0s","--beam-ProgressBar-animation-duration-variable":"0s"};export{u as p};
//# sourceMappingURL=progress-bar-DF7UuuHb.esm.js.map