@beamimpact/web-sdk 1.29.0-beta.1

package/dist/components/community-impact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"community-impact.js","sources":["../../src/components/community-impact/strings.ts","../../src/components/community-impact/index.ts"],"sourcesContent":["export const strings = {\n  en: {\n    fundedTimes: ({ times = 0 }) => `Funded <b>${times}</b> ${times > 1 ? \"times\" : \"time\"} so far`,\n    learnMore: () => `Learn more`,\n    seeAll: () => `See All`,\n  },\n  fr: {\n    fundedTimes: ({ times = 0 }) => `Financé <b>${times}</b> fois pour l'instant`,\n    learnMore: () => `En savoir plus`,\n    seeAll: () => `Voir tout`,\n  },\n  de: {\n    fundedTimes: ({ times = 0 }) => `<b>${times}</b> Mal finanziert`,\n    learnMore: () => `Mehr erfahren`,\n    seeAll: () => `Alle anzeigen`,\n  },\n  es: {\n    fundedTimes: ({ times = 0 }) => `Financiado <b>${times}</b> ${times > 1 ? \"vez\" : \"veces\"}`,\n    learnMore: () => `Saber más`,\n    seeAll: () => `Ver Todo`,\n  },\n  it: {\n    fundedTimes: ({ times = 0 }) => `Finanziato <b>${times}</b> ${times > 1 ? \"volta\" : \"volte\"}`,\n    learnMore: () => `Scopri di più`,\n    seeAll: () => `Vedi Tutto`,\n  },\n  pl: {\n    fundedTimes: ({ times = 0 }) => `Udzielono wsparcia <b>${times}</b> ${times > 1 ? \"razy\" : \"raz\"}`,\n    learnMore: () => `Dowiedz się więcej`,\n    seeAll: () => `Zobacz wszystko`,\n  },\n};\n","import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { state } from \"lit/decorators/state.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport \"../../shared/components/progress-bar\";\nimport \"../beam-partner-logos\";\nimport { cssReset } from \"../../shared/css-reset\";\nimport { defineCustomElement } from \"../../shared/defineCustomElement\";\nimport { _cssVariableMap } from \"../../shared/fragments/css-variable-map\";\nimport { AsyncController } from \"../../shared/controllers/async-controller\";\nimport { getImpact } from \"../../api-sdk/v3/routes\";\nimport { _errorMessage } from \"../../shared/fragments/error-message-template\";\nimport { _loading } from \"../../shared/fragments/loading-template\";\nimport { defineCustomText, useCustomText } from \"../../shared/fragments/custom-text\";\nimport { DEFAULT_BASE_URL, SUPPORTED_LANGUAGES } from \"../../api-sdk/constants\";\nimport { enforceConfig } from \"../../shared/enforce-config\";\nimport { BeamError, MissingConfig } from \"../../shared/beam-errors\";\nimport { TNumericId } from \"../../shared/types\";\nimport { cssCardGrid } from \"../../shared/fragments/css-card-grid\";\nimport { LANGUAGES } from \"../../api-sdk/types\";\nimport { localizeUserString } from \"../../shared/localize\";\nimport { progressBarConfigDefaults } from \"../../shared/components/progress-bar\";\nimport { partnerLogosConfigDefaults } from \"../beam-partner-logos\";\nimport { strings } from \"./strings\";\n\ntype RequiredConfig = {\n  apiKey: string;\n  chainId: TNumericId;\n};\n\ntype IAPIV3NonprofitImpact = Awaited<ReturnType<typeof getImpact>>[\"community\"][0];\n\n/**\n * Beam Impact Overview Widget\n * Displays a grid of cards highlighting progress against funding goals\n * for the non-profits the chain is supporting.\n */\nexport class BeamCommunityImpact extends LitElement {\n  static tagName = \"beam-community-impact\";\n\n  @property({ type: String }) public apiKey?: RequiredConfig[\"apiKey\"];\n\n  @property({ type: Number }) public chainId?: RequiredConfig[\"chainId\"];\n\n  @property({ type: String }) public baseUrl = DEFAULT_BASE_URL;\n\n  @property({ type: String }) public cardStyle: \"icon\" | \"image\" = \"image\";\n\n  @property({ type: String }) public lang: LANGUAGES = \"en\";\n\n  @property({ type: Boolean }) public debug = false;\n\n  @state() private selectedFilter: string | null = null;\n\n  get configLang() {\n    return SUPPORTED_LANGUAGES[this.lang] || \"en\";\n  }\n\n  private getImpactData = async () => {\n    if (!enforceConfig<RequiredConfig>([\"apiKey\", \"chainId\"], this)) throw new MissingConfig();\n    const res = getImpact({\n      baseUrl: this.baseUrl,\n      headers: {\n        authorization: `Api-Key ${this.apiKey}`,\n      },\n      queryParams: {\n        chainId: this.chainId,\n        personalImpactLimit: 0,\n        widgetName: \"community-impact\",\n        version: \"1.0.0\",\n        lang: this.configLang,\n      },\n    });\n\n    return res;\n  };\n\n  private impactDataController = new AsyncController<typeof this.getImpactData>(this, this.getImpactData);\n\n  willUpdate(changedProperties: Map<string, unknown>) {\n    // Reload nonprofit list on change of any of these props:\n    // Also fires on first load as props go from undefined => value\n    const requireNewDataProps = [\"chainId\", \"baseUrl\", \"lang\"];\n    for (const prop of requireNewDataProps) {\n      if (changedProperties.has(prop)) {\n        this.impactDataController.exec();\n        break;\n      }\n    }\n  }\n\n  private renderFilterTabs({ nonprofits }: { nonprofits: IAPIV3NonprofitImpact[] }) {\n    const uniqueFilters = Array.from(new Set(nonprofits.flatMap((n) => n.filters || [])));\n    if (uniqueFilters.length === 0) return \"\";\n    const handleSeeAllFocus = () => {\n      this.selectedFilter = null;\n    };\n    const handleFilterFocus = (filter: string) => {\n      if (this.selectedFilter === filter) {\n        this.selectedFilter = null;\n      } else {\n        this.selectedFilter = filter;\n      }\n    };\n    return html` <div\n      class=\"beam-filter-tabs\"\n      part=\"filters\"\n      style=\"display: inline-flex; flex-wrap: wrap; gap: 0.5em 1em\"\n    >\n      <span\n        tabindex=\"0\"\n        style=\"${styleMap({\n          \"padding-bottom\": \"1px\",\n          \"border-bottom-width\": \"2px\",\n          \"border-bottom-style\": \"solid\",\n          \"border-bottom-color\": this.selectedFilter === null ? \"currentColor\" : \"transparent\",\n        })}\"\n        @click=${handleSeeAllFocus}\n        @keydown=${(evt: KeyboardEvent) => {\n          if ([\"Enter\", \" \"].includes(evt.key)) {\n            evt.preventDefault();\n            handleSeeAllFocus();\n          }\n        }}\n        >${strings[this.configLang].seeAll()}</span\n      >\n      ${uniqueFilters.map(\n        (filter: string) =>\n          html`<span\n            tabindex=\"0\"\n            @click=${() => handleFilterFocus(filter)}\n            @keydown=${(evt: KeyboardEvent) => {\n              if ([\"Enter\", \" \"].includes(evt.key)) {\n                evt.preventDefault();\n                handleFilterFocus(filter);\n              }\n            }}\n            style=\"${styleMap({\n              \"padding-bottom\": \"1px\",\n              \"border-bottom-width\": \"2px\",\n              \"border-bottom-style\": \"solid\",\n              \"border-bottom-color\": this.selectedFilter === filter ? \"currentColor\" : \"transparent\",\n            })}\"\n            >${filter}</span\n          >`\n      )}\n    </div>`;\n  }\n\n  private renderImageCard = (data: IAPIV3NonprofitImpact) => {\n    return html`\n      <div class=\"image-card\" part=\"nonprofit-card\" style=\"display: flex; flex-direction: column;\">\n        <div class=\"image-card-image-box\" style=\"background-image: url('${data.imageUrl}');\">\n          <p class=\"image-card-cause\">${localizeUserString(this.configLang, data.nonprofit?.cause || \"\")}</p>\n          <h4 class=\"image-card-name\">${localizeUserString(this.configLang, data.nonprofit?.name)}</h4>\n        </div>\n        <div\n          style=\"padding: 5px 15px 15px; flex: 1 1 auto; border-radius: 0px; border: none; display: flex; flex-direction: column;\"\n        >\n          <div class=\"image-card-progress\" style=\"display: flex; align-items: center;\">\n            <beam-progress-bar style=\"flex-grow: 1;\" value=\"${data.impact?.goalProgressPercentage}\"></beam-progress-bar>\n            <span class=\"image-card-progressText\" style=\"margin-left: 20px;\"\n              >${localizeUserString(this.configLang, data.impact?.goalProgressText)}</span\n            >\n          </div>\n          <div class=\"image-card-description\">\n            ${unsafeHTML(localizeUserString(this.configLang, data.impact?.description || \"\"))}\n          </div>\n          <div style=\"display: flex; align-items: end; flex-wrap: wrap; gap: 10px; flex: 1;\" class=\"image-card-footer\">\n            <div class=\"image-card-goal-completion\" style=\"flex-grow: 1;\">\n              ${unsafeHTML(localizeUserString(this.configLang, data.impact?.goalCompletionText))}\n            </div>\n            <a\n              href=\"${data.nonprofit?.website}\"\n              target=\"_blank\"\n              class=\"image-card-link\"\n              style=\"color: var(--beam-CommunityImpact-imageCard-link-color, inherit); white-space: nowrap\"\n            >\n              ${localizeUserString(this.configLang, data.nonprofit?.websiteLinkText)}<span class=\"image-card-link-arrow\"\n                >&nbsp;&rsaquo;</span\n              >\n            </a>\n          </div>\n        </div>\n      </div>\n    `;\n  };\n\n  private renderIconCard = (data: IAPIV3NonprofitImpact) => {\n    return html`\n      <div class=\"icon-card\" part=\"nonprofit-card\" style=\"display: flex; flex-direction: column;\">\n        <img class=\"icon-card-icon\" src=\"${data.nonprofit?.causeIconUrl}\" alt=\"${data.nonprofit?.cause}\" />\n        <p class=\"icon-card-cause\">${data.nonprofit?.cause}</p>\n        <h4 class=\"icon-card-name\">${data.nonprofit?.name}</h4>\n        <div class=\"icon-card-description\" part=\"nonprofit-card-description\" style=\"flex: 1;\">\n          ${unsafeHTML(localizeUserString(this.configLang, data.impact?.description || \"\"))}\n        </div>\n        <div class=\"icon-card-footer\" style=\"width: 100%; text-align: center;\">\n          <div class=\"icon-card-progress\" style=\"display: flex; align-items: center; width: 100%;\">\n            <beam-progress-bar style=\"flex: 1 0;\" value=\"${data.impact?.goalProgressPercentage}\"></beam-progress-bar>\n            <span style=\"text-align: right; flex: 0 1; white-space: nowrap\" class=\"icon-card-progressText\"\n              >${localizeUserString(this.configLang, data.impact?.goalProgressText)}</span\n            >\n          </div>\n          <div class=\"icon-card-goal-completion\">\n            ${unsafeHTML(localizeUserString(this.configLang, data.impact?.goalCompletionText))}\n          </div>\n          <a\n            href=\"${data.nonprofit?.website}\"\n            target=\"_blank\"\n            class=\"icon-card-link\"\n            style=\"color: var(--beam-CommunityImpact-iconCard-link-color, inherit); display: block\"\n            >${localizeUserString(this.configLang, data.nonprofit?.websiteLinkText) ||\n            strings[this.configLang].learnMore()}<span class=\"icon-card-link-arrow\">&nbsp;&rsaquo;</span>\n          </a>\n          ${data.impact?.goalCompletionText === \"\" ? html`<div class=\"icon-card-goal-completion\">&nbsp;</div>` : \"\"}\n        </div>\n      </div>\n    `;\n  };\n\n  private renderCards = ({ nonprofits }: { nonprofits: IAPIV3NonprofitImpact[] }) => {\n    return html`\n      <div class=\"beam-nonprofit-${this.cardStyle}-cards\" part=\"nonprofit-cards\">\n        ${nonprofits?.map(this.cardStyle === \"image\" ? this.renderImageCard : this.renderIconCard)}\n      </div>\n    `;\n  };\n\n  render() {\n    const { selectedFilter } = this;\n    const { data, error, loading } = this.impactDataController;\n    if (loading) {\n      return _loading();\n    }\n    if (error) {\n      if (this.debug) {\n        return _errorMessage({ error });\n      }\n      return \"\";\n    }\n    if (data == null) {\n      if (this.debug) {\n        return _errorMessage({ error: new BeamError(\"Missing data\") });\n      }\n      return \"\";\n    }\n    const { community: nonprofits } = data;\n    const filteredNonprofits = selectedFilter\n      ? nonprofits.filter((np) => np.filters?.includes(selectedFilter))\n      : nonprofits;\n    return html`\n      <style>\n        :host {\n          ${this.cssVariables.toCSS()}\n        }\n      </style>\n      <beam-partner-logos\n        part=\"logos\"\n        partnerLogoUrl=\"${data.chain.logoUrl}\"\n        partnerName=\"${data.chain.name}\"\n      ></beam-partner-logos>\n\n      ${this.renderFilterTabs({ nonprofits })} ${this.renderCards({ nonprofits: filteredNonprofits })}\n    `;\n  }\n\n  public get cssVariables() {\n    const defaults: Record<string, string> = {\n      \"--beam-fontFamily\": \"inherit\",\n      \"--beam-fontSize\": \"14px\",\n      \"--beam-lineHeight\": \"1\",\n      \"--beam-textColor\": \"inherit\",\n      \"--beam-backgroundColor\": \"inherit\",\n      ...partnerLogosConfigDefaults,\n      ...progressBarConfigDefaults,\n      \"--beam-CommunityImpact-filterTabs-textalign\": \"left\",\n      \"--beam-CommunityImpact-filterTabs-marginBottom\": \"20px\",\n      /* Image Card Styles */\n      \"--beam-CommunityImpact-imageCard-borderColor\": \"currentColor\",\n      \"--beam-CommunityImpact-imageCard-borderRadius\": \"0\",\n      \"--beam-CommunityImpact-imageCard-borderWidth\": \"1px\",\n      \"--beam-CommunityImpact-imageCard-backgroundColor\": \"inherit\",\n      \"--beam-CommunityImpact-imageCard-foregroundColor\": \"inherit\",\n      ...defineCustomText(\"--beam-CommunityImpact-filterTabs\", {\n        fontSize: \"16px\",\n        marginTop: \"10px\",\n        fontWeight: \"bold\",\n      }),\n      ...defineCustomText(\"--beam-CommunityImpact-imageCard-cause\", {\n        fontSize: \"14px\",\n        textTransform: \"uppercase\",\n        color: \"#fff\",\n      }),\n      ...defineCustomText(\"--beam-CommunityImpact-imageCard-name\", {\n        fontSize: \"22px\",\n        marginTop: \"0\",\n        color: \"#fff\",\n      }),\n      ...defineCustomText(\"--beam-CommunityImpact-imageCard-description\", {\n        marginTop: \"10px\",\n        lineHeight: \"1.3\",\n      }),\n      \"--beam-CommunityImpact-imageCard-link-color\": \"inherit\",\n      \"--beam-CommunityImpact-imageCard-linkArrow-display\": \"none\",\n      ...defineCustomText(\"--beam-CommunityImpact-imageCard-link\", {\n        fontSize: \"12px\",\n      }),\n      ...defineCustomText(\"--beam-CommunityImpact-imageCard-goalCompletion\", {\n        fontSize: \"12px\",\n      }),\n      \"--beam-CommunityImpact-imageCard-goalCompletion-fontStyle\": \"italic\",\n      \"--beam-CommunityImpact-imageCard-progress-marginTop\": \"10px\",\n      ...defineCustomText(\"--beam-CommunityImpact-imageCard-progressText\"),\n      \"--beam-CommunityImpact-imageCard-footer-marginTop\": \"10px\",\n      /* Icon Card Styles */\n      ...defineCustomText(\"--beam-CommunityImpact-iconCard-cause\", {\n        marginTop: \"10px\",\n      }),\n      ...defineCustomText(\"--beam-CommunityImpact-iconCard-name\", {\n        marginTop: \"5px\",\n        fontWeight: \"bold\",\n      }),\n      \"--beam-CommunityImpact-iconCard-progress-marginTop\": \"10px\",\n      ...defineCustomText(\"--beam-CommunityImpact-iconCard-progressText\"),\n      ...defineCustomText(\"--beam-CommunityImpact-iconCard-description\", {\n        marginTop: \"10px\",\n        lineHeight: \"1.3\",\n      }),\n      \"--beam-CommunityImpact-iconCard-description-textAlign\": \"left\",\n      ...defineCustomText(\"--beam-CommunityImpact-iconCard-goalCompletion\", {\n        marginTop: \"10px\",\n      }),\n      \"--beam-CommunityImpact-iconCard-link-color\": \"inherit\",\n      \"--beam-CommunityImpact-iconCard-linkArrow-display\": \"none\",\n      ...defineCustomText(\"--beam-CommunityImpact-iconCard-link\", {\n        marginTop: \"5px\",\n      }),\n    };\n\n    const cardCount = this.impactDataController.data?.community.length || 0;\n    const columnCount = cardCount === 3 ? 3 : this.cardStyle === \"icon\" ? 4 : 2;\n    defaults[\"--beam-CommunityImpact-columns\"] = columnCount.toString();\n    defaults[\"--beam-CommunityImpact-columns-minWidth\"] = this.cardStyle === \"image\" ? \"300px\" : \"200px\";\n\n    const remoteConfig = this.impactDataController?.data?.config?.web?.theme || {};\n\n    const config = { ...defaults, ...remoteConfig };\n\n    const serializable = Object.create({\n      toCSS() {\n        return _cssVariableMap(this as Record<string, string>);\n      },\n    });\n\n    return Object.assign(serializable, config);\n  }\n\n  static styles = [\n    cssReset,\n    css`\n      :host {\n        display: block;\n        font-family: var(--beam-fontFamily, inherit);\n        font-size: var(--beam-fontSize, inherit);\n        color: var(--beam-textColor, inherit);\n        background-color: var(--beam-backgroundColor, inherit);\n        line-height: var(--beam-lineHeight, 1);\n      }\n\n      .beam-filter-tabs {\n        ${useCustomText(\"--beam-CommunityImpact-filterTabs\")}\n        margin-bottom: var(--beam-CommunityImpact-filterTabs-marginBottom, 10px);\n        text-align: var(--beam-CommunityImpact-filterTabs-textalign, left);\n      }\n\n      .beam-nonprofit-image-cards,\n      .beam-nonprofit-icon-cards {\n        margin-top: 10px;\n      }\n\n      ${cssCardGrid({\n        gap: \"20px\",\n        className: \"beam-nonprofit-image-cards\",\n        columnCount: \"var(--beam-CommunityImpact-columns)\",\n        itemMinWidth: \"var(--beam-CommunityImpact-columns-minWidth)\",\n      })}\n\n      ${cssCardGrid({\n        gap: \"40px\",\n        className: \"beam-nonprofit-icon-cards\",\n        columnCount: \"var(--beam-CommunityImpact-columns)\",\n        itemMinWidth: \"var(--beam-CommunityImpact-columns-minWidth)\",\n      })}\n\n      /* Image Style Cards */\n\n      .image-card {\n        overflow-wrap: break-word;\n        border-color: var(--beam-CommunityImpact-imageCard-borderColor);\n        border-style: solid;\n        border-width: var(--beam-CommunityImpact-imageCard-borderWidth);\n        border-radius: var(--beam-CommunityImpact-imageCard-borderRadius);\n        overflow: hidden;\n        background-color: var(--beam-CommunityImpact-imageCard-backgroundColor);\n        color: var(--beam-CommunityImpact-imageCard-foregroundColor);\n      }\n\n      .image-card-image-box {\n        height: 200px;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n        padding: 0 24px 16px;\n        overflow-wrap: break-word;\n        background-color: #555;\n        background-blend-mode: overlay;\n        background-size: cover;\n        background-repeat: no-repeat;\n      }\n\n      .image-card-cause {\n        ${useCustomText(\"--beam-CommunityImpact-imageCard-cause\")}\n      }\n\n      .image-card-name {\n        ${useCustomText(\"--beam-CommunityImpact-imageCard-name\")}\n      }\n\n      .image-card-progress {\n        margin-top: var(--beam-CommunityImpact-imageCard-progress-marginTop);\n      }\n\n      .image-card-progressText {\n        ${useCustomText(\"--beam-CommunityImpact-imageCard-progressText\")}\n      }\n\n      .image-card-description {\n        ${useCustomText(\"--beam-CommunityImpact-imageCard-description\")}\n      }\n\n      .image-card-link {\n        ${useCustomText(\"--beam-CommunityImpact-imageCard-link\")}\n      }\n\n      .image-card-link-arrow {\n        display: var(--beam-CommunityImpact-imageCard-linkArrow-display, \"none\");\n      }\n\n      .image-card-goal-completion {\n        ${useCustomText(\"--beam-CommunityImpact-imageCard-goalCompletion\")}\n        font-style: var(--beam-CommunityImpact-imageCard-goalCompletion-fontStyle, italic);\n      }\n\n      .image-card-footer {\n        margin-top: var(--beam-CommunityImpact-imageCard-footer-marginTop);\n      }\n\n      /* Icon Style Cards */\n\n      .icon-card {\n        display: flex;\n        flex-direction: column;\n        justify-content: start;\n        align-items: center;\n      }\n\n      .icon-card-icon {\n        height: 50px;\n      }\n\n      .icon-card-cause {\n        ${useCustomText(\"--beam-CommunityImpact-iconCard-cause\")}\n      }\n\n      .icon-card-name {\n        ${useCustomText(\"--beam-CommunityImpact-iconCard-name\")}\n      }\n\n      .icon-card-progress {\n        margin-top: var(--beam-CommunityImpact-iconCard-progress-marginTop);\n      }\n\n      .icon-card-progressText {\n        ${useCustomText(\"--beam-CommunityImpact-iconCard-progressText\")}\n        margin-left: 10px;\n      }\n\n      .icon-card-description {\n        ${useCustomText(\"--beam-CommunityImpact-iconCard-description\")}\n        text-align: var(--beam-CommunityImpact-iconCard-description-textAlign, left);\n      }\n\n      .icon-card-link {\n        ${useCustomText(\"--beam-CommunityImpact-iconCard-link\")}\n      }\n\n      .icon-card-link-arrow {\n        display: var(--beam-CommunityImpact-iconCard-linkArrow-display, \"none\");\n      }\n\n      .icon-card-goal-completion {\n        ${useCustomText(\"--beam-CommunityImpact-iconCard-goalCompletion\")}\n        font-style: var(--beam-CommunityImpact-iconCard-goalCompletion-fontStyle, italic);\n      }\n\n      .icon-card-footer {\n        margin-top: var(--beam-CommunityImpact-iconCard-footer-marginTop);\n      }\n    `,\n  ];\n}\n\ndefineCustomElement(BeamCommunityImpact);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"beam-community-impact\": BeamCommunityImpact;\n  }\n}\n"],"names":["strings","times","x","I","c","b","p","a","i","n","e","BeamCommunityImpact","LitElement","DEFAULT_BASE_URL","enforceConfig","getImpact","AsyncController","data","html","localizeUserString","unsafeHTML","nonprofits","SUPPORTED_LANGUAGES","changedProperties","requireNewDataProps","prop","uniqueFilters","handleSeeAllFocus","handleFilterFocus","filter","styleMap","evt","selectedFilter","error","loading","_loading","_errorMessage","BeamError","filteredNonprofits","np","defaults","partnerLogosConfigDefaults","progressBarConfigDefaults","defineCustomText","columnCount","remoteConfig","config","_cssVariableMap","cssReset","css","useCustomText","cssCardGrid","__decorateClass","property","state","defineCustomElement"],"mappings":"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"}

package/dist/components/cumulative-impact.d.ts

@@ -0,0 +1,62 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import * as lit_html from 'lit-html';
+import * as lodash from 'lodash';
+import { T as TNumericId } from '../chunks/types-4zLXwf8o.esm.js';
+import { L as LANGUAGES } from '../chunks/types-aju0qrRe.esm.js';
+
+declare class AnimatedCounter extends LitElement {
+    finalValue: number;
+    duration: number;
+    scrollTarget?: string;
+    protected counter: number;
+    private intervalId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleCounterAnimateIfInView;
+    private animateCounter;
+    private observer;
+    private observeScrollTarget;
+    private unobserveScrollTarget;
+    get scrollTargetElement(): this | Element | null;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "animated-counter": AnimatedCounter;
+    }
+}
+
+type RequiredConfig = {
+    apiKey: string;
+    chainId: TNumericId;
+};
+declare class BeamCumulativeImpact extends LitElement {
+    static tagName: string;
+    apiKey?: RequiredConfig["apiKey"];
+    chainId?: RequiredConfig["chainId"];
+    baseUrl: string;
+    lang: LANGUAGES;
+    disableAnimation: boolean;
+    debug: boolean;
+    get configLang(): "en";
+    private getCumulativeImpactData;
+    private cumulativeImpactDataController;
+    impactRowRefs: HTMLElement[];
+    resizeElements: lodash.DebouncedFuncLeading<() => void>;
+    connectedCallback(): void;
+    updated(): void;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    render(): "" | lit_html.TemplateResult<1>;
+    private renderCumulativeImpact;
+    private renderCumulativeImpactRow;
+    get cssVariables(): any;
+    static styles: lit.CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "beam-cumulative-impact": BeamCumulativeImpact;
+    }
+}
+
+export { BeamCumulativeImpact };

package/dist/components/cumulative-impact.esm.js

@@ -0,0 +1,119 @@
+import{t as w,g as h,y as u,f as s,h as C,u as I}from"../chunks/lit-h1W25hjN.esm.js";import{d as y}from"../chunks/lodash-ZxBiuGue.esm.js";import{c as x,u as p,d as S,e as T,A as $,a as V,_ as b,i as f,b as d,f as D}from"../chunks/localize-e-mss8ya.esm.js";import{D as E,f as L}from"../chunks/routes-S9p8QYNm.esm.js";import{B}from"../chunks/beam-errors-l02WBee5.esm.js";import{i as k}from"../chunks/is-all-html-elements-SdSkxirh.esm.js";import"../chunks/logger-ad87ovol.esm.js";var A=Object.defineProperty,R=Object.getOwnPropertyDescriptor,v=(n,t,a,e)=>{for(var i=e>1?void 0:e?R(t,a):t,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=(e?r(t,a,i):r(i))||i);return e&&i&&A(t,a,i),i};class c extends h{constructor(){super(...arguments),this.finalValue=0,this.duration=1500,this.counter=0,this.intervalId=0,this.handleCounterAnimateIfInView=t=>{t.some(a=>a.isIntersecting)&&(this.animateCounter(),this.unobserveScrollTarget())},this.animateCounter=()=>{const t=41.666666666666664,a=t/this.duration*this.finalValue;this.intervalId=setInterval(()=>{const e=this.counter+a;if(e>=this.finalValue){this.counter=this.finalValue,clearInterval(this.intervalId);return}else this.counter=e},t)},this.observer=new IntersectionObserver(this.handleCounterAnimateIfInView,{threshold:.1}),this.observeScrollTarget=()=>{const t=this.scrollTargetElement;t&&this.observer.observe(t)},this.unobserveScrollTarget=()=>{const t=this.scrollTargetElement;t&&this.observer.unobserve(t)}}connectedCallback(){super.connectedCallback();const t=window.matchMedia("(prefers-reduced-motion: reduce)").matches;this.duration===0||t?this.counter=this.finalValue:this.observeScrollTarget()}disconnectedCallback(){super.disconnectedCallback(),this.unobserveScrollTarget(),clearInterval(this.intervalId)}get scrollTargetElement(){return this.scrollTarget?document.querySelector(this.scrollTarget):this}render(){return u`${Math.ceil(this.counter).toLocaleString()}`}}v([s({type:Number})],c.prototype,"finalValue",2),v([s({type:Number})],c.prototype,"duration",2),v([s({type:String})],c.prototype,"scrollTarget",2),v([w()],c.prototype,"counter",2),customElements.get("animated-counter")||customElements.define("animated-counter",c);const z=n=>{const t=n instanceof NodeList?Array.from(n):n;if(t.length===0||!k(t))return;const a=t.sort((i,o)=>{const r=getComputedStyle(i).getPropertyValue("width").replace("px",""),g=getComputedStyle(o).getPropertyValue("width").replace("px","");return parseInt(g)-parseInt(r)})[0],e=getComputedStyle(a).getPropertyValue("width");for(const i of t)getComputedStyle(i).getPropertyValue("width")!==e&&(i.style.width=e)},O={en:{cumulativeImpactTitle:()=>"What we've funded",cumulativeImpactDescription:()=>"Here's the impact that our community has made so far in partnership with Beam. Our impact is growing every day\u2014 scroll to check out the goals we're working toward together right now."}};var P=Object.defineProperty,M=Object.getOwnPropertyDescriptor,m=(n,t,a,e)=>{for(var i=e>1?void 0:e?M(t,a):t,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=(e?r(t,a,i):r(i))||i);return e&&i&&P(t,a,i),i};const U=1.5*1e3;class l extends h{constructor(){super(...arguments),this.baseUrl=E,this.lang="en",this.disableAnimation=!1,this.debug=!1,this.getCumulativeImpactData=async()=>(T(["apiKey","chainId"],this),await L({baseUrl:this.baseUrl,pathParams:{chainId:this.chainId},headers:{authorization:`Api-Key ${this.apiKey}`},queryParams:{version:"1.0.0",lang:this.configLang}})),this.cumulativeImpactDataController=new $(this,this.getCumulativeImpactData),this.resizeElements=y(()=>{z(this.impactRowRefs)},50,{maxWait:50,leading:!0})}get configLang(){return"en"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.resizeElements)}updated(){this.resizeElements()}willUpdate(t){const a=["chainId","baseUrl","lang"];for(const e of a)if(t.has(e)){this.cumulativeImpactDataController.exec();break}}render(){const{data:t,error:a,loading:e}=this.cumulativeImpactDataController;return e?V():a?this.debug?b({error:a}):"":t==null?this.debug?b({error:new B("Missing data")}):"":u`
+      <style>
+        :host {
+          ${this.cssVariables.toCSS()}
+        }
+      </style>
+      <div style="display: flex; flex-direction: column;" class="root">
+        <div
+          style="margin: 10px 0 0 0;"
+          tabindex="-1"
+          class="options"
+          part="options"
+          aria-labelledby="beam-RedeemTransaction-title"
+        >
+          ${this.renderCumulativeImpact(t)}
+        </div>
+      </div>
+    `}renderCumulativeImpact(t){const a=O[this.configLang],e=t.impacts?t.impacts?.map(r=>r.value||0):[],i=Math.max(...e),o=e.map(r=>U*Math.log(Math.max(r,1))/Math.log(i));return u`
+      <div class="main">
+        <div class="title" role="heading">
+          ${f(this.configLang,t?.config?.web?.title||"")||a.cumulativeImpactTitle()}
+        </div>
+        <p class="description">
+          ${f(this.configLang,t?.config?.web?.description||"")||a.cumulativeImpactDescription()}
+        </p>
+        <div class="impact-list">
+          ${t.impacts?.map((r,g)=>this.renderCumulativeImpactRow({impact:r,animationDuration:o[g]}))}
+        </div>
+      </div>
+    `}renderCumulativeImpactRow({impact:t,animationDuration:a}){const e=this.cumulativeImpactDataController.data?.config?.web.disableAnimation,i="impact-row-value-counter impact-row-value-floating-counter",o=e?0:a;return u`
+      <div class="impact-row">
+        <div class="impact-row-value-container">
+          <span class="impact-row-value-counter" style="visibility: hidden;" aria-hidden="true">
+            ${t.value.toLocaleString()}
+          </span>
+            <animated-counter
+              class="${i}"
+              finalValue=${t.value}
+              duration=${o}
+            ></animated-counter>
+          </span>
+        </div>
+        <div class="impact-row-description">${t.unit} ${t.summary}</div>
+      </div>
+    `}get cssVariables(){const t={"--beam-fontFamily":"inherit","--beam-fontSize":"16px","--beam-lineHeight":"1","--beam-textColor":"inherit",...d("--beam-CumulativeImpact-title",{fontSize:"32px"}),...d("--beam-CumulativeImpact-description",{marginTop:"16px",lineHeight:"1.3"}),"--beam-CumulativeImpact-impact-list-marginTop":"24px","--beam-CumulativeImpact-row-marginTop":"24px","--beam-CumulativeImpact-row-value-container-borderBottomWidth":"4px","--beam-CumulativeImpact-row-value-container-borderBottomColor":"currentColor","--beam-CumulativeImpact-row-value-container-paddingTop":"0","--beam-CumulativeImpact-row-value-container-paddingRight":"20px","--beam-CumulativeImpact-row-value-container-paddingBottom":"4px","--beam-CumulativeImpact-row-value-container-paddingLeft":"20px",...d("--beam-CumulativeImpact-row-value-counter",{color:"currentColor",fontSize:"24px",fontWeight:"normal"}),...d("--beam-CumulativeImpact-row-description",{color:"currentColor",fontSize:"16px",fontWeight:"normal",lineHeight:"1.3"}),"--beam-CumulativeImpact-row-description-paddingLeft":"24px","--beam-CumulativeImpact-row-description-paddingRight":"24px","--beam-CumulativeImpact-row-description-mobile-marginTop":"12px"},a=this.cumulativeImpactDataController.data?.config?.web?.theme||{},e={...t,...a};return Object.assign(Object.create({toCSS(){return D(this)}}),e)}}l.tagName="beam-cumulative-impact",l.styles=[x,C`
+      :host {
+        display: block;
+        font-family: var(--beam-fontFamily, inherit);
+        font-size: var(--beam-fontSize, inherit);
+        color: var(--beam-textColor, inherit);
+        background-color: var(--beam-backgroundColor, inherit);
+        line-height: var(--beam-lineHeight, 1);
+      }
+      .main {
+        text-align: left;
+      }
+      .title {
+        ${p("--beam-CumulativeImpact-title")}
+        text-align: inherit;
+      }
+      .description {
+        ${p("--beam-CumulativeImpact-description")}
+        text-align: inherit;
+      }
+      .impact-list {
+        display: flex;
+        flex-direction: column;
+        margin-top: var(--beam-CumulativeImpact-impact-list-marginTop);
+      }
+      .impact-row {
+        display: flex;
+        align-items: center;
+        margin-top: var(--beam-CumulativeImpact-row-marginTop);
+      }
+      .impact-row-value-container {
+        position: relative;
+        border-bottom-width: var(--beam-CumulativeImpact-row-value-container-borderBottomWidth);
+        border-bottom-color: var(--beam-CumulativeImpact-row-value-container-borderBottomColor);
+        border-bottom-style: solid;
+        padding-top: var(--beam-CumulativeImpact-row-value-container-paddingTop);
+        padding-right: var(--beam-CumulativeImpact-row-value-container-paddingRight);
+        padding-bottom: var(--beam-CumulativeImpact-row-value-container-paddingBottom);
+        padding-left: var(--beam-CumulativeImpact-row-value-container-paddingLeft);
+        text-align: center;
+        flex-shrink: 0;
+      }
+      .impact-row-value-counter {
+        ${p("--beam-CumulativeImpact-row-value-counter")}
+      }
+      .impact-row-value-floating-counter {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+      }
+      .impact-row-description {
+        ${p("--beam-CumulativeImpact-row-description")}
+        padding-left: var(--beam-CumulativeImpact-row-description-paddingLeft);
+        padding-right: var(--beam-CumulativeImpact-row-description-paddingRight);
+        /* match padding of value of counter for proper centering */
+        padding-bottom: var(--beam-CumulativeImpact-row-value-paddingBottom);
+        text-align: inherit;
+        flex-grow: 1;
+      }
+      @media (max-width: 500px) {
+        .main {
+          text-align: center;
+        }
+        .impact-row {
+          flex-direction: column;
+        }
+        .impact-row-description {
+          margin-top: var(--beam-CumulativeImpact-row-description-mobile-marginTop);
+          padding-bottom: 0;
+        }
+      }
+    `],m([s({type:String})],l.prototype,"apiKey",2),m([s({type:Number})],l.prototype,"chainId",2),m([s({type:String})],l.prototype,"baseUrl",2),m([s({type:String})],l.prototype,"lang",2),m([s({type:Boolean})],l.prototype,"disableAnimation",2),m([s({type:Boolean})],l.prototype,"debug",2),m([I(".impact-row-value-container")],l.prototype,"impactRowRefs",2),S(l);export{l as BeamCumulativeImpact};
+//# sourceMappingURL=cumulative-impact.esm.js.map

package/dist/components/cumulative-impact.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cumulative-impact.esm.js","sources":["../../src/shared/components/animated-counter/index.ts","../../src/shared/sync-element-widths.ts","../../src/components/cumulative-impact/strings.ts","../../src/components/cumulative-impact/index.ts"],"sourcesContent":["import { html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { state } from \"lit/decorators.js\";\n\nexport class AnimatedCounter extends LitElement {\n  @property({ type: Number }) finalValue = 0;\n  @property({ type: Number }) duration = 1500;\n  @property({ type: String }) scrollTarget?: string;\n\n  @state() protected counter = 0;\n  private intervalId = 0;\n\n  connectedCallback() {\n    super.connectedCallback();\n    const userPrefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    if (this.duration === 0 || userPrefersReducedMotion) {\n      this.counter = this.finalValue;\n    } else {\n      this.observeScrollTarget();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.unobserveScrollTarget();\n    clearInterval(this.intervalId);\n  }\n\n  private handleCounterAnimateIfInView: IntersectionObserverCallback = (entries) => {\n    if (entries.some((entry) => entry.isIntersecting)) {\n      this.animateCounter();\n      this.unobserveScrollTarget();\n    }\n  };\n\n  private animateCounter = () => {\n    const ANIMATION_FRAME_RATE = 24;\n    const MS_PER_FRAME = 1000 / ANIMATION_FRAME_RATE;\n    const INCREMENT_RATE_PER_FRAME = MS_PER_FRAME / this.duration;\n    const COUNTER_INCREMENT_PER_FRAME = INCREMENT_RATE_PER_FRAME * this.finalValue;\n\n    this.intervalId = setInterval(() => {\n      const result = this.counter + COUNTER_INCREMENT_PER_FRAME;\n      if (result >= this.finalValue) {\n        this.counter = this.finalValue;\n        clearInterval(this.intervalId);\n        return;\n      } else {\n        this.counter = result;\n      }\n    }, MS_PER_FRAME);\n  };\n\n  private observer = new IntersectionObserver(this.handleCounterAnimateIfInView, {\n    threshold: 0.1,\n  });\n\n  private observeScrollTarget = () => {\n    const target = this.scrollTargetElement;\n    target && this.observer.observe(target);\n  };\n\n  private unobserveScrollTarget = () => {\n    const target = this.scrollTargetElement;\n    target && this.observer.unobserve(target);\n  };\n\n  get scrollTargetElement(): this | Element | null {\n    if (this.scrollTarget) {\n      return document.querySelector(this.scrollTarget);\n    } else {\n      return this;\n    }\n  }\n\n  render() {\n    return html`${Math.ceil(this.counter).toLocaleString()}`;\n  }\n}\n\ncustomElements.get(\"animated-counter\") || customElements.define(\"animated-counter\", AnimatedCounter);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"animated-counter\": AnimatedCounter;\n  }\n}\n","import { isAllHtmlElements } from \"./is-all-html-elements\";\n\n/**\n * Synchronize widths of elements\n * @param {Array<HTMLElement|null>} elements - Elements to synchronize\n */\nexport const syncElementWidths = (elements: Array<HTMLElement | null> | NodeList) => {\n  const els = elements instanceof NodeList ? Array.from(elements) : elements;\n\n  if (els.length === 0 || !isAllHtmlElements(els)) {\n    return;\n  }\n\n  const widthSource = els.sort((a, b) => {\n    const widthA = getComputedStyle(a).getPropertyValue(\"width\").replace(\"px\", \"\");\n    const widthB = getComputedStyle(b).getPropertyValue(\"width\").replace(\"px\", \"\");\n    return parseInt(widthB) - parseInt(widthA);\n  })[0];\n\n  const syncedWidth = getComputedStyle(widthSource).getPropertyValue(\"width\");\n\n  for (const el of els) {\n    if (getComputedStyle(el).getPropertyValue(\"width\") !== syncedWidth) {\n      el.style[\"width\"] = syncedWidth;\n    }\n  }\n};\n","export const strings = {\n  en: {\n    cumulativeImpactTitle: () => `What we've funded`,\n    cumulativeImpactDescription: () =>\n      \"Here's the impact that our community has made so far in partnership with Beam. Our impact is growing every day— scroll to check out the goals we're working toward together right now.\",\n  },\n};\n","import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { queryAll } from \"lit/decorators/query-all.js\";\nimport debounce from \"lodash-es/debounce\";\nimport \"../../shared/components/animated-counter\";\nimport { cssReset } from \"../../shared/css-reset\";\nimport { defineCustomElement } from \"../../shared/defineCustomElement\";\nimport { _cssVariableMap } from \"../../shared/fragments/css-variable-map\";\nimport { DEFAULT_BASE_URL } from \"../../api-sdk/constants\";\nimport { TNumericId } from \"../../shared/types\";\nimport { LANGUAGES } from \"../../api-sdk/types\";\nimport { getCumulativeImpact } from \"../../api-sdk/v3/routes\";\nimport { enforceConfig } from \"../../shared/enforce-config\";\nimport { BeamError, MissingConfig } from \"../../shared/beam-errors\";\nimport { AsyncController } from \"../../shared/controllers/async-controller\";\nimport { _errorMessage } from \"../../shared/fragments/error-message-template\";\nimport { _loading } from \"../../shared/fragments/loading-template\";\nimport { syncElementWidths } from \"../../shared/sync-element-widths\";\nimport { localizeUserString } from \"../../shared/localize\";\nimport { defineCustomText, useCustomText } from \"../../shared/fragments/custom-text\";\nimport { strings } from \"./strings\";\n\ntype RequiredConfig = {\n  apiKey: string;\n  chainId: TNumericId;\n};\n\ntype IAPIV3CumulativeImpact = Awaited<ReturnType<typeof getCumulativeImpact>>;\n\nconst MAX_COUNTER_ANIMATION_DURATION = 1.5 * 1000;\n\nexport class BeamCumulativeImpact extends LitElement {\n  static tagName = \"beam-cumulative-impact\";\n\n  @property({ type: String }) public apiKey?: RequiredConfig[\"apiKey\"];\n\n  @property({ type: Number }) public chainId?: RequiredConfig[\"chainId\"];\n\n  @property({ type: String }) public baseUrl = DEFAULT_BASE_URL;\n\n  @property({ type: String }) public lang: LANGUAGES = \"en\";\n\n  @property({ type: Boolean }) public disableAnimation = false;\n\n  @property({ type: Boolean }) public debug = false;\n\n  // TODO - request and implement supported languages to enable localization\n  get configLang(): \"en\" {\n    // return SUPPORTED_LANGUAGES[this.lang] || \"en\";\n    return \"en\";\n  }\n\n  private getCumulativeImpactData = async () => {\n    if (!enforceConfig<RequiredConfig>([\"apiKey\", \"chainId\"], this)) {\n      throw new MissingConfig();\n    }\n    const res = await getCumulativeImpact({\n      baseUrl: this.baseUrl,\n      pathParams: {\n        chainId: this.chainId,\n      },\n      headers: {\n        authorization: `Api-Key ${this.apiKey}`,\n      },\n      queryParams: {\n        version: \"1.0.0\",\n        lang: this.configLang,\n      },\n    });\n\n    return res;\n  };\n\n  private cumulativeImpactDataController = new AsyncController<typeof this.getCumulativeImpactData>(\n    this,\n    this.getCumulativeImpactData\n  );\n\n  @queryAll(\".impact-row-value-container\")\n  impactRowRefs!: HTMLElement[];\n  resizeElements = debounce(\n    () => {\n      syncElementWidths(this.impactRowRefs);\n    },\n    50,\n    { maxWait: 50, leading: true }\n  );\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\"resize\", this.resizeElements);\n  }\n\n  updated(): void {\n    this.resizeElements();\n  }\n\n  willUpdate(changedProperties: Map<string, unknown>) {\n    // Reload nonprofit list on change of any of these props:\n    // Also fires on first load as props go from undefined => value\n    const requireNewDataProps = [\"chainId\", \"baseUrl\", \"lang\"];\n    for (const prop of requireNewDataProps) {\n      if (changedProperties.has(prop)) {\n        this.cumulativeImpactDataController.exec();\n        break;\n      }\n    }\n  }\n\n  render() {\n    const { data, error, loading } = this.cumulativeImpactDataController;\n    if (loading) {\n      return _loading();\n    }\n    if (error) {\n      if (this.debug) {\n        return _errorMessage({ error });\n      }\n      return \"\";\n    }\n    if (data == null) {\n      if (this.debug) {\n        return _errorMessage({ error: new BeamError(\"Missing data\") });\n      }\n      return \"\";\n    }\n\n    return html`\n      <style>\n        :host {\n          ${this.cssVariables.toCSS()}\n        }\n      </style>\n      <div style=\"display: flex; flex-direction: column;\" class=\"root\">\n        <div\n          style=\"margin: 10px 0 0 0;\"\n          tabindex=\"-1\"\n          class=\"options\"\n          part=\"options\"\n          aria-labelledby=\"beam-RedeemTransaction-title\"\n        >\n          ${this.renderCumulativeImpact(data)}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderCumulativeImpact(data: IAPIV3CumulativeImpact) {\n    const defaultStrings = strings[this.configLang];\n    const rawValues = data.impacts ? data.impacts?.map((impact) => impact.value || 0) : [];\n    const maxRawValue = Math.max(...rawValues);\n    const durations = rawValues.map(\n      (val) => (MAX_COUNTER_ANIMATION_DURATION * Math.log(Math.max(val, 1))) / Math.log(maxRawValue)\n    );\n    return html`\n      <div class=\"main\">\n        <div class=\"title\" role=\"heading\">\n          ${localizeUserString(this.configLang, data?.config?.web?.title || \"\") ||\n          defaultStrings.cumulativeImpactTitle()}\n        </div>\n        <p class=\"description\">\n          ${localizeUserString(this.configLang, data?.config?.web?.description || \"\") ||\n          defaultStrings.cumulativeImpactDescription()}\n        </p>\n        <div class=\"impact-list\">\n          ${data.impacts?.map((impact: any, idx: number) => {\n            return this.renderCumulativeImpactRow({ impact, animationDuration: durations[idx] });\n          })}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderCumulativeImpactRow({ impact, animationDuration }: { impact: any; animationDuration: number }) {\n    const disableAnimation = this.cumulativeImpactDataController.data?.config?.web.disableAnimation;\n    const floatingCounterClass = \"impact-row-value-counter impact-row-value-floating-counter\";\n    const duration = disableAnimation ? 0 : animationDuration;\n    /**\n     * because we set the width using JavaScript by forcing all impact-row-value-container elements\n     * to match the width of the widest sibling, we use a hidden span with the total preloaded to\n     * ensure that impact-row-value-container widths do not change as the animation runs.\n     */\n    return html`\n      <div class=\"impact-row\">\n        <div class=\"impact-row-value-container\">\n          <span class=\"impact-row-value-counter\" style=\"visibility: hidden;\" aria-hidden=\"true\">\n            ${impact.value.toLocaleString()}\n          </span>\n            <animated-counter\n              class=\"${floatingCounterClass}\"\n              finalValue=${impact.value}\n              duration=${duration}\n            ></animated-counter>\n          </span>\n        </div>\n        <div class=\"impact-row-description\">${impact.unit} ${impact.summary}</div>\n      </div>\n    `;\n  }\n\n  public get cssVariables() {\n    const defaults: Record<string, string> = {\n      \"--beam-fontFamily\": \"inherit\",\n      \"--beam-fontSize\": \"16px\",\n      \"--beam-lineHeight\": \"1\",\n      \"--beam-textColor\": \"inherit\",\n      // main\n      ...defineCustomText(\"--beam-CumulativeImpact-title\", {\n        fontSize: \"32px\",\n      }),\n      ...defineCustomText(\"--beam-CumulativeImpact-description\", {\n        marginTop: \"16px\",\n        lineHeight: \"1.3\",\n      }),\n      \"--beam-CumulativeImpact-impact-list-marginTop\": \"24px\",\n      \"--beam-CumulativeImpact-row-marginTop\": \"24px\",\n      // row value container\n      \"--beam-CumulativeImpact-row-value-container-borderBottomWidth\": \"4px\",\n      \"--beam-CumulativeImpact-row-value-container-borderBottomColor\": \"currentColor\",\n      \"--beam-CumulativeImpact-row-value-container-paddingTop\": \"0\",\n      \"--beam-CumulativeImpact-row-value-container-paddingRight\": \"20px\",\n      \"--beam-CumulativeImpact-row-value-container-paddingBottom\": \"4px\",\n      \"--beam-CumulativeImpact-row-value-container-paddingLeft\": \"20px\",\n      // row value counter\n      ...defineCustomText(\"--beam-CumulativeImpact-row-value-counter\", {\n        color: \"currentColor\",\n        fontSize: \"24px\",\n        fontWeight: \"normal\",\n      }),\n      // row description\n      ...defineCustomText(\"--beam-CumulativeImpact-row-description\", {\n        color: \"currentColor\",\n        fontSize: \"16px\",\n        fontWeight: \"normal\",\n        lineHeight: \"1.3\",\n      }),\n      \"--beam-CumulativeImpact-row-description-paddingLeft\": \"24px\",\n      \"--beam-CumulativeImpact-row-description-paddingRight\": \"24px\",\n      \"--beam-CumulativeImpact-row-description-mobile-marginTop\": \"12px\",\n    };\n\n    const remoteConfig = this.cumulativeImpactDataController.data?.config?.web?.theme || {};\n\n    const config = { ...defaults, ...remoteConfig };\n\n    const serializable = Object.create({\n      toCSS() {\n        return _cssVariableMap(this as Record<string, string>);\n      },\n    });\n\n    return Object.assign(serializable, config);\n  }\n\n  static styles = [\n    cssReset,\n    css`\n      :host {\n        display: block;\n        font-family: var(--beam-fontFamily, inherit);\n        font-size: var(--beam-fontSize, inherit);\n        color: var(--beam-textColor, inherit);\n        background-color: var(--beam-backgroundColor, inherit);\n        line-height: var(--beam-lineHeight, 1);\n      }\n      .main {\n        text-align: left;\n      }\n      .title {\n        ${useCustomText(\"--beam-CumulativeImpact-title\")}\n        text-align: inherit;\n      }\n      .description {\n        ${useCustomText(\"--beam-CumulativeImpact-description\")}\n        text-align: inherit;\n      }\n      .impact-list {\n        display: flex;\n        flex-direction: column;\n        margin-top: var(--beam-CumulativeImpact-impact-list-marginTop);\n      }\n      .impact-row {\n        display: flex;\n        align-items: center;\n        margin-top: var(--beam-CumulativeImpact-row-marginTop);\n      }\n      .impact-row-value-container {\n        position: relative;\n        border-bottom-width: var(--beam-CumulativeImpact-row-value-container-borderBottomWidth);\n        border-bottom-color: var(--beam-CumulativeImpact-row-value-container-borderBottomColor);\n        border-bottom-style: solid;\n        padding-top: var(--beam-CumulativeImpact-row-value-container-paddingTop);\n        padding-right: var(--beam-CumulativeImpact-row-value-container-paddingRight);\n        padding-bottom: var(--beam-CumulativeImpact-row-value-container-paddingBottom);\n        padding-left: var(--beam-CumulativeImpact-row-value-container-paddingLeft);\n        text-align: center;\n        flex-shrink: 0;\n      }\n      .impact-row-value-counter {\n        ${useCustomText(\"--beam-CumulativeImpact-row-value-counter\")}\n      }\n      .impact-row-value-floating-counter {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n      }\n      .impact-row-description {\n        ${useCustomText(\"--beam-CumulativeImpact-row-description\")}\n        padding-left: var(--beam-CumulativeImpact-row-description-paddingLeft);\n        padding-right: var(--beam-CumulativeImpact-row-description-paddingRight);\n        /* match padding of value of counter for proper centering */\n        padding-bottom: var(--beam-CumulativeImpact-row-value-paddingBottom);\n        text-align: inherit;\n        flex-grow: 1;\n      }\n      @media (max-width: 500px) {\n        .main {\n          text-align: center;\n        }\n        .impact-row {\n          flex-direction: column;\n        }\n        .impact-row-description {\n          margin-top: var(--beam-CumulativeImpact-row-description-mobile-marginTop);\n          padding-bottom: 0;\n        }\n      }\n    `,\n  ];\n}\n\ndefineCustomElement(BeamCumulativeImpact);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"beam-cumulative-impact\": BeamCumulativeImpact;\n  }\n}\n"],"names":["AnimatedCounter","LitElement","entries","entry","MS_PER_FRAME","COUNTER_INCREMENT_PER_FRAME","result","target","userPrefersReducedMotion","html","__decorateClass","property","state","syncElementWidths","elements","els","isAllHtmlElements","widthSource","a","b","widthA","widthB","syncedWidth","el","strings","f","r","s","m","t","i","e","o","MAX_COUNTER_ANIMATION_DURATION","BeamCumulativeImpact","DEFAULT_BASE_URL","enforceConfig","getCumulativeImpact","AsyncController","debounce","changedProperties","requireNewDataProps","prop","data","error","loading","_loading","_errorMessage","BeamError","defaultStrings","rawValues","impact","maxRawValue","durations","val","localizeUserString","idx","animationDuration","disableAnimation","floatingCounterClass","duration","defaults","defineCustomText","remoteConfig","config","_cssVariableMap","cssReset","css","useCustomText","queryAll","defineCustomElement"],"mappings":"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"}

package/dist/components/cumulative-impact.js

@@ -0,0 +1,119 @@
+import{t as w,g as h,y as u,f as s,h as C,u as I}from"../chunks/lit-h1W25hjN.esm.js";import{d as y}from"../chunks/lodash-ZxBiuGue.esm.js";import{c as x,u as p,d as S,e as T,A as $,a as V,_ as b,i as f,b as d,f as D}from"../chunks/localize-e-mss8ya.esm.js";import{D as E,f as L}from"../chunks/routes-S9p8QYNm.esm.js";import{B}from"../chunks/beam-errors-l02WBee5.esm.js";import{i as k}from"../chunks/is-all-html-elements-SdSkxirh.esm.js";import"../chunks/logger-ad87ovol.esm.js";var A=Object.defineProperty,R=Object.getOwnPropertyDescriptor,v=(n,t,a,e)=>{for(var i=e>1?void 0:e?R(t,a):t,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=(e?r(t,a,i):r(i))||i);return e&&i&&A(t,a,i),i};class c extends h{constructor(){super(...arguments),this.finalValue=0,this.duration=1500,this.counter=0,this.intervalId=0,this.handleCounterAnimateIfInView=t=>{t.some(a=>a.isIntersecting)&&(this.animateCounter(),this.unobserveScrollTarget())},this.animateCounter=()=>{const t=41.666666666666664,a=t/this.duration*this.finalValue;this.intervalId=setInterval(()=>{const e=this.counter+a;if(e>=this.finalValue){this.counter=this.finalValue,clearInterval(this.intervalId);return}else this.counter=e},t)},this.observer=new IntersectionObserver(this.handleCounterAnimateIfInView,{threshold:.1}),this.observeScrollTarget=()=>{const t=this.scrollTargetElement;t&&this.observer.observe(t)},this.unobserveScrollTarget=()=>{const t=this.scrollTargetElement;t&&this.observer.unobserve(t)}}connectedCallback(){super.connectedCallback();const t=window.matchMedia("(prefers-reduced-motion: reduce)").matches;this.duration===0||t?this.counter=this.finalValue:this.observeScrollTarget()}disconnectedCallback(){super.disconnectedCallback(),this.unobserveScrollTarget(),clearInterval(this.intervalId)}get scrollTargetElement(){return this.scrollTarget?document.querySelector(this.scrollTarget):this}render(){return u`${Math.ceil(this.counter).toLocaleString()}`}}v([s({type:Number})],c.prototype,"finalValue",2),v([s({type:Number})],c.prototype,"duration",2),v([s({type:String})],c.prototype,"scrollTarget",2),v([w()],c.prototype,"counter",2),customElements.get("animated-counter")||customElements.define("animated-counter",c);const z=n=>{const t=n instanceof NodeList?Array.from(n):n;if(t.length===0||!k(t))return;const a=t.sort((i,o)=>{const r=getComputedStyle(i).getPropertyValue("width").replace("px",""),g=getComputedStyle(o).getPropertyValue("width").replace("px","");return parseInt(g)-parseInt(r)})[0],e=getComputedStyle(a).getPropertyValue("width");for(const i of t)getComputedStyle(i).getPropertyValue("width")!==e&&(i.style.width=e)},O={en:{cumulativeImpactTitle:()=>"What we've funded",cumulativeImpactDescription:()=>"Here's the impact that our community has made so far in partnership with Beam. Our impact is growing every day\u2014 scroll to check out the goals we're working toward together right now."}};var P=Object.defineProperty,M=Object.getOwnPropertyDescriptor,m=(n,t,a,e)=>{for(var i=e>1?void 0:e?M(t,a):t,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=(e?r(t,a,i):r(i))||i);return e&&i&&P(t,a,i),i};const U=1.5*1e3;class l extends h{constructor(){super(...arguments),this.baseUrl=E,this.lang="en",this.disableAnimation=!1,this.debug=!1,this.getCumulativeImpactData=async()=>(T(["apiKey","chainId"],this),await L({baseUrl:this.baseUrl,pathParams:{chainId:this.chainId},headers:{authorization:`Api-Key ${this.apiKey}`},queryParams:{version:"1.0.0",lang:this.configLang}})),this.cumulativeImpactDataController=new $(this,this.getCumulativeImpactData),this.resizeElements=y(()=>{z(this.impactRowRefs)},50,{maxWait:50,leading:!0})}get configLang(){return"en"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.resizeElements)}updated(){this.resizeElements()}willUpdate(t){const a=["chainId","baseUrl","lang"];for(const e of a)if(t.has(e)){this.cumulativeImpactDataController.exec();break}}render(){const{data:t,error:a,loading:e}=this.cumulativeImpactDataController;return e?V():a?this.debug?b({error:a}):"":t==null?this.debug?b({error:new B("Missing data")}):"":u`
+      <style>
+        :host {
+          ${this.cssVariables.toCSS()}
+        }
+      </style>
+      <div style="display: flex; flex-direction: column;" class="root">
+        <div
+          style="margin: 10px 0 0 0;"
+          tabindex="-1"
+          class="options"
+          part="options"
+          aria-labelledby="beam-RedeemTransaction-title"
+        >
+          ${this.renderCumulativeImpact(t)}
+        </div>
+      </div>
+    `}renderCumulativeImpact(t){const a=O[this.configLang],e=t.impacts?t.impacts?.map(r=>r.value||0):[],i=Math.max(...e),o=e.map(r=>U*Math.log(Math.max(r,1))/Math.log(i));return u`
+      <div class="main">
+        <div class="title" role="heading">
+          ${f(this.configLang,t?.config?.web?.title||"")||a.cumulativeImpactTitle()}
+        </div>
+        <p class="description">
+          ${f(this.configLang,t?.config?.web?.description||"")||a.cumulativeImpactDescription()}
+        </p>
+        <div class="impact-list">
+          ${t.impacts?.map((r,g)=>this.renderCumulativeImpactRow({impact:r,animationDuration:o[g]}))}
+        </div>
+      </div>
+    `}renderCumulativeImpactRow({impact:t,animationDuration:a}){const e=this.cumulativeImpactDataController.data?.config?.web.disableAnimation,i="impact-row-value-counter impact-row-value-floating-counter",o=e?0:a;return u`
+      <div class="impact-row">
+        <div class="impact-row-value-container">
+          <span class="impact-row-value-counter" style="visibility: hidden;" aria-hidden="true">
+            ${t.value.toLocaleString()}
+          </span>
+            <animated-counter
+              class="${i}"
+              finalValue=${t.value}
+              duration=${o}
+            ></animated-counter>
+          </span>
+        </div>
+        <div class="impact-row-description">${t.unit} ${t.summary}</div>
+      </div>
+    `}get cssVariables(){const t={"--beam-fontFamily":"inherit","--beam-fontSize":"16px","--beam-lineHeight":"1","--beam-textColor":"inherit",...d("--beam-CumulativeImpact-title",{fontSize:"32px"}),...d("--beam-CumulativeImpact-description",{marginTop:"16px",lineHeight:"1.3"}),"--beam-CumulativeImpact-impact-list-marginTop":"24px","--beam-CumulativeImpact-row-marginTop":"24px","--beam-CumulativeImpact-row-value-container-borderBottomWidth":"4px","--beam-CumulativeImpact-row-value-container-borderBottomColor":"currentColor","--beam-CumulativeImpact-row-value-container-paddingTop":"0","--beam-CumulativeImpact-row-value-container-paddingRight":"20px","--beam-CumulativeImpact-row-value-container-paddingBottom":"4px","--beam-CumulativeImpact-row-value-container-paddingLeft":"20px",...d("--beam-CumulativeImpact-row-value-counter",{color:"currentColor",fontSize:"24px",fontWeight:"normal"}),...d("--beam-CumulativeImpact-row-description",{color:"currentColor",fontSize:"16px",fontWeight:"normal",lineHeight:"1.3"}),"--beam-CumulativeImpact-row-description-paddingLeft":"24px","--beam-CumulativeImpact-row-description-paddingRight":"24px","--beam-CumulativeImpact-row-description-mobile-marginTop":"12px"},a=this.cumulativeImpactDataController.data?.config?.web?.theme||{},e={...t,...a};return Object.assign(Object.create({toCSS(){return D(this)}}),e)}}l.tagName="beam-cumulative-impact",l.styles=[x,C`
+      :host {
+        display: block;
+        font-family: var(--beam-fontFamily, inherit);
+        font-size: var(--beam-fontSize, inherit);
+        color: var(--beam-textColor, inherit);
+        background-color: var(--beam-backgroundColor, inherit);
+        line-height: var(--beam-lineHeight, 1);
+      }
+      .main {
+        text-align: left;
+      }
+      .title {
+        ${p("--beam-CumulativeImpact-title")}
+        text-align: inherit;
+      }
+      .description {
+        ${p("--beam-CumulativeImpact-description")}
+        text-align: inherit;
+      }
+      .impact-list {
+        display: flex;
+        flex-direction: column;
+        margin-top: var(--beam-CumulativeImpact-impact-list-marginTop);
+      }
+      .impact-row {
+        display: flex;
+        align-items: center;
+        margin-top: var(--beam-CumulativeImpact-row-marginTop);
+      }
+      .impact-row-value-container {
+        position: relative;
+        border-bottom-width: var(--beam-CumulativeImpact-row-value-container-borderBottomWidth);
+        border-bottom-color: var(--beam-CumulativeImpact-row-value-container-borderBottomColor);
+        border-bottom-style: solid;
+        padding-top: var(--beam-CumulativeImpact-row-value-container-paddingTop);
+        padding-right: var(--beam-CumulativeImpact-row-value-container-paddingRight);
+        padding-bottom: var(--beam-CumulativeImpact-row-value-container-paddingBottom);
+        padding-left: var(--beam-CumulativeImpact-row-value-container-paddingLeft);
+        text-align: center;
+        flex-shrink: 0;
+      }
+      .impact-row-value-counter {
+        ${p("--beam-CumulativeImpact-row-value-counter")}
+      }
+      .impact-row-value-floating-counter {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+      }
+      .impact-row-description {
+        ${p("--beam-CumulativeImpact-row-description")}
+        padding-left: var(--beam-CumulativeImpact-row-description-paddingLeft);
+        padding-right: var(--beam-CumulativeImpact-row-description-paddingRight);
+        /* match padding of value of counter for proper centering */
+        padding-bottom: var(--beam-CumulativeImpact-row-value-paddingBottom);
+        text-align: inherit;
+        flex-grow: 1;
+      }
+      @media (max-width: 500px) {
+        .main {
+          text-align: center;
+        }
+        .impact-row {
+          flex-direction: column;
+        }
+        .impact-row-description {
+          margin-top: var(--beam-CumulativeImpact-row-description-mobile-marginTop);
+          padding-bottom: 0;
+        }
+      }
+    `],m([s({type:String})],l.prototype,"apiKey",2),m([s({type:Number})],l.prototype,"chainId",2),m([s({type:String})],l.prototype,"baseUrl",2),m([s({type:String})],l.prototype,"lang",2),m([s({type:Boolean})],l.prototype,"disableAnimation",2),m([s({type:Boolean})],l.prototype,"debug",2),m([I(".impact-row-value-container")],l.prototype,"impactRowRefs",2),S(l);export{l as BeamCumulativeImpact};
+//# sourceMappingURL=cumulative-impact.js.map

package/dist/components/cumulative-impact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cumulative-impact.js","sources":["../../src/shared/components/animated-counter/index.ts","../../src/shared/sync-element-widths.ts","../../src/components/cumulative-impact/strings.ts","../../src/components/cumulative-impact/index.ts"],"sourcesContent":["import { html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { state } from \"lit/decorators.js\";\n\nexport class AnimatedCounter extends LitElement {\n  @property({ type: Number }) finalValue = 0;\n  @property({ type: Number }) duration = 1500;\n  @property({ type: String }) scrollTarget?: string;\n\n  @state() protected counter = 0;\n  private intervalId = 0;\n\n  connectedCallback() {\n    super.connectedCallback();\n    const userPrefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    if (this.duration === 0 || userPrefersReducedMotion) {\n      this.counter = this.finalValue;\n    } else {\n      this.observeScrollTarget();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.unobserveScrollTarget();\n    clearInterval(this.intervalId);\n  }\n\n  private handleCounterAnimateIfInView: IntersectionObserverCallback = (entries) => {\n    if (entries.some((entry) => entry.isIntersecting)) {\n      this.animateCounter();\n      this.unobserveScrollTarget();\n    }\n  };\n\n  private animateCounter = () => {\n    const ANIMATION_FRAME_RATE = 24;\n    const MS_PER_FRAME = 1000 / ANIMATION_FRAME_RATE;\n    const INCREMENT_RATE_PER_FRAME = MS_PER_FRAME / this.duration;\n    const COUNTER_INCREMENT_PER_FRAME = INCREMENT_RATE_PER_FRAME * this.finalValue;\n\n    this.intervalId = setInterval(() => {\n      const result = this.counter + COUNTER_INCREMENT_PER_FRAME;\n      if (result >= this.finalValue) {\n        this.counter = this.finalValue;\n        clearInterval(this.intervalId);\n        return;\n      } else {\n        this.counter = result;\n      }\n    }, MS_PER_FRAME);\n  };\n\n  private observer = new IntersectionObserver(this.handleCounterAnimateIfInView, {\n    threshold: 0.1,\n  });\n\n  private observeScrollTarget = () => {\n    const target = this.scrollTargetElement;\n    target && this.observer.observe(target);\n  };\n\n  private unobserveScrollTarget = () => {\n    const target = this.scrollTargetElement;\n    target && this.observer.unobserve(target);\n  };\n\n  get scrollTargetElement(): this | Element | null {\n    if (this.scrollTarget) {\n      return document.querySelector(this.scrollTarget);\n    } else {\n      return this;\n    }\n  }\n\n  render() {\n    return html`${Math.ceil(this.counter).toLocaleString()}`;\n  }\n}\n\ncustomElements.get(\"animated-counter\") || customElements.define(\"animated-counter\", AnimatedCounter);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"animated-counter\": AnimatedCounter;\n  }\n}\n","import { isAllHtmlElements } from \"./is-all-html-elements\";\n\n/**\n * Synchronize widths of elements\n * @param {Array<HTMLElement|null>} elements - Elements to synchronize\n */\nexport const syncElementWidths = (elements: Array<HTMLElement | null> | NodeList) => {\n  const els = elements instanceof NodeList ? Array.from(elements) : elements;\n\n  if (els.length === 0 || !isAllHtmlElements(els)) {\n    return;\n  }\n\n  const widthSource = els.sort((a, b) => {\n    const widthA = getComputedStyle(a).getPropertyValue(\"width\").replace(\"px\", \"\");\n    const widthB = getComputedStyle(b).getPropertyValue(\"width\").replace(\"px\", \"\");\n    return parseInt(widthB) - parseInt(widthA);\n  })[0];\n\n  const syncedWidth = getComputedStyle(widthSource).getPropertyValue(\"width\");\n\n  for (const el of els) {\n    if (getComputedStyle(el).getPropertyValue(\"width\") !== syncedWidth) {\n      el.style[\"width\"] = syncedWidth;\n    }\n  }\n};\n","export const strings = {\n  en: {\n    cumulativeImpactTitle: () => `What we've funded`,\n    cumulativeImpactDescription: () =>\n      \"Here's the impact that our community has made so far in partnership with Beam. Our impact is growing every day— scroll to check out the goals we're working toward together right now.\",\n  },\n};\n","import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { queryAll } from \"lit/decorators/query-all.js\";\nimport debounce from \"lodash-es/debounce\";\nimport \"../../shared/components/animated-counter\";\nimport { cssReset } from \"../../shared/css-reset\";\nimport { defineCustomElement } from \"../../shared/defineCustomElement\";\nimport { _cssVariableMap } from \"../../shared/fragments/css-variable-map\";\nimport { DEFAULT_BASE_URL } from \"../../api-sdk/constants\";\nimport { TNumericId } from \"../../shared/types\";\nimport { LANGUAGES } from \"../../api-sdk/types\";\nimport { getCumulativeImpact } from \"../../api-sdk/v3/routes\";\nimport { enforceConfig } from \"../../shared/enforce-config\";\nimport { BeamError, MissingConfig } from \"../../shared/beam-errors\";\nimport { AsyncController } from \"../../shared/controllers/async-controller\";\nimport { _errorMessage } from \"../../shared/fragments/error-message-template\";\nimport { _loading } from \"../../shared/fragments/loading-template\";\nimport { syncElementWidths } from \"../../shared/sync-element-widths\";\nimport { localizeUserString } from \"../../shared/localize\";\nimport { defineCustomText, useCustomText } from \"../../shared/fragments/custom-text\";\nimport { strings } from \"./strings\";\n\ntype RequiredConfig = {\n  apiKey: string;\n  chainId: TNumericId;\n};\n\ntype IAPIV3CumulativeImpact = Awaited<ReturnType<typeof getCumulativeImpact>>;\n\nconst MAX_COUNTER_ANIMATION_DURATION = 1.5 * 1000;\n\nexport class BeamCumulativeImpact extends LitElement {\n  static tagName = \"beam-cumulative-impact\";\n\n  @property({ type: String }) public apiKey?: RequiredConfig[\"apiKey\"];\n\n  @property({ type: Number }) public chainId?: RequiredConfig[\"chainId\"];\n\n  @property({ type: String }) public baseUrl = DEFAULT_BASE_URL;\n\n  @property({ type: String }) public lang: LANGUAGES = \"en\";\n\n  @property({ type: Boolean }) public disableAnimation = false;\n\n  @property({ type: Boolean }) public debug = false;\n\n  // TODO - request and implement supported languages to enable localization\n  get configLang(): \"en\" {\n    // return SUPPORTED_LANGUAGES[this.lang] || \"en\";\n    return \"en\";\n  }\n\n  private getCumulativeImpactData = async () => {\n    if (!enforceConfig<RequiredConfig>([\"apiKey\", \"chainId\"], this)) {\n      throw new MissingConfig();\n    }\n    const res = await getCumulativeImpact({\n      baseUrl: this.baseUrl,\n      pathParams: {\n        chainId: this.chainId,\n      },\n      headers: {\n        authorization: `Api-Key ${this.apiKey}`,\n      },\n      queryParams: {\n        version: \"1.0.0\",\n        lang: this.configLang,\n      },\n    });\n\n    return res;\n  };\n\n  private cumulativeImpactDataController = new AsyncController<typeof this.getCumulativeImpactData>(\n    this,\n    this.getCumulativeImpactData\n  );\n\n  @queryAll(\".impact-row-value-container\")\n  impactRowRefs!: HTMLElement[];\n  resizeElements = debounce(\n    () => {\n      syncElementWidths(this.impactRowRefs);\n    },\n    50,\n    { maxWait: 50, leading: true }\n  );\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\"resize\", this.resizeElements);\n  }\n\n  updated(): void {\n    this.resizeElements();\n  }\n\n  willUpdate(changedProperties: Map<string, unknown>) {\n    // Reload nonprofit list on change of any of these props:\n    // Also fires on first load as props go from undefined => value\n    const requireNewDataProps = [\"chainId\", \"baseUrl\", \"lang\"];\n    for (const prop of requireNewDataProps) {\n      if (changedProperties.has(prop)) {\n        this.cumulativeImpactDataController.exec();\n        break;\n      }\n    }\n  }\n\n  render() {\n    const { data, error, loading } = this.cumulativeImpactDataController;\n    if (loading) {\n      return _loading();\n    }\n    if (error) {\n      if (this.debug) {\n        return _errorMessage({ error });\n      }\n      return \"\";\n    }\n    if (data == null) {\n      if (this.debug) {\n        return _errorMessage({ error: new BeamError(\"Missing data\") });\n      }\n      return \"\";\n    }\n\n    return html`\n      <style>\n        :host {\n          ${this.cssVariables.toCSS()}\n        }\n      </style>\n      <div style=\"display: flex; flex-direction: column;\" class=\"root\">\n        <div\n          style=\"margin: 10px 0 0 0;\"\n          tabindex=\"-1\"\n          class=\"options\"\n          part=\"options\"\n          aria-labelledby=\"beam-RedeemTransaction-title\"\n        >\n          ${this.renderCumulativeImpact(data)}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderCumulativeImpact(data: IAPIV3CumulativeImpact) {\n    const defaultStrings = strings[this.configLang];\n    const rawValues = data.impacts ? data.impacts?.map((impact) => impact.value || 0) : [];\n    const maxRawValue = Math.max(...rawValues);\n    const durations = rawValues.map(\n      (val) => (MAX_COUNTER_ANIMATION_DURATION * Math.log(Math.max(val, 1))) / Math.log(maxRawValue)\n    );\n    return html`\n      <div class=\"main\">\n        <div class=\"title\" role=\"heading\">\n          ${localizeUserString(this.configLang, data?.config?.web?.title || \"\") ||\n          defaultStrings.cumulativeImpactTitle()}\n        </div>\n        <p class=\"description\">\n          ${localizeUserString(this.configLang, data?.config?.web?.description || \"\") ||\n          defaultStrings.cumulativeImpactDescription()}\n        </p>\n        <div class=\"impact-list\">\n          ${data.impacts?.map((impact: any, idx: number) => {\n            return this.renderCumulativeImpactRow({ impact, animationDuration: durations[idx] });\n          })}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderCumulativeImpactRow({ impact, animationDuration }: { impact: any; animationDuration: number }) {\n    const disableAnimation = this.cumulativeImpactDataController.data?.config?.web.disableAnimation;\n    const floatingCounterClass = \"impact-row-value-counter impact-row-value-floating-counter\";\n    const duration = disableAnimation ? 0 : animationDuration;\n    /**\n     * because we set the width using JavaScript by forcing all impact-row-value-container elements\n     * to match the width of the widest sibling, we use a hidden span with the total preloaded to\n     * ensure that impact-row-value-container widths do not change as the animation runs.\n     */\n    return html`\n      <div class=\"impact-row\">\n        <div class=\"impact-row-value-container\">\n          <span class=\"impact-row-value-counter\" style=\"visibility: hidden;\" aria-hidden=\"true\">\n            ${impact.value.toLocaleString()}\n          </span>\n            <animated-counter\n              class=\"${floatingCounterClass}\"\n              finalValue=${impact.value}\n              duration=${duration}\n            ></animated-counter>\n          </span>\n        </div>\n        <div class=\"impact-row-description\">${impact.unit} ${impact.summary}</div>\n      </div>\n    `;\n  }\n\n  public get cssVariables() {\n    const defaults: Record<string, string> = {\n      \"--beam-fontFamily\": \"inherit\",\n      \"--beam-fontSize\": \"16px\",\n      \"--beam-lineHeight\": \"1\",\n      \"--beam-textColor\": \"inherit\",\n      // main\n      ...defineCustomText(\"--beam-CumulativeImpact-title\", {\n        fontSize: \"32px\",\n      }),\n      ...defineCustomText(\"--beam-CumulativeImpact-description\", {\n        marginTop: \"16px\",\n        lineHeight: \"1.3\",\n      }),\n      \"--beam-CumulativeImpact-impact-list-marginTop\": \"24px\",\n      \"--beam-CumulativeImpact-row-marginTop\": \"24px\",\n      // row value container\n      \"--beam-CumulativeImpact-row-value-container-borderBottomWidth\": \"4px\",\n      \"--beam-CumulativeImpact-row-value-container-borderBottomColor\": \"currentColor\",\n      \"--beam-CumulativeImpact-row-value-container-paddingTop\": \"0\",\n      \"--beam-CumulativeImpact-row-value-container-paddingRight\": \"20px\",\n      \"--beam-CumulativeImpact-row-value-container-paddingBottom\": \"4px\",\n      \"--beam-CumulativeImpact-row-value-container-paddingLeft\": \"20px\",\n      // row value counter\n      ...defineCustomText(\"--beam-CumulativeImpact-row-value-counter\", {\n        color: \"currentColor\",\n        fontSize: \"24px\",\n        fontWeight: \"normal\",\n      }),\n      // row description\n      ...defineCustomText(\"--beam-CumulativeImpact-row-description\", {\n        color: \"currentColor\",\n        fontSize: \"16px\",\n        fontWeight: \"normal\",\n        lineHeight: \"1.3\",\n      }),\n      \"--beam-CumulativeImpact-row-description-paddingLeft\": \"24px\",\n      \"--beam-CumulativeImpact-row-description-paddingRight\": \"24px\",\n      \"--beam-CumulativeImpact-row-description-mobile-marginTop\": \"12px\",\n    };\n\n    const remoteConfig = this.cumulativeImpactDataController.data?.config?.web?.theme || {};\n\n    const config = { ...defaults, ...remoteConfig };\n\n    const serializable = Object.create({\n      toCSS() {\n        return _cssVariableMap(this as Record<string, string>);\n      },\n    });\n\n    return Object.assign(serializable, config);\n  }\n\n  static styles = [\n    cssReset,\n    css`\n      :host {\n        display: block;\n        font-family: var(--beam-fontFamily, inherit);\n        font-size: var(--beam-fontSize, inherit);\n        color: var(--beam-textColor, inherit);\n        background-color: var(--beam-backgroundColor, inherit);\n        line-height: var(--beam-lineHeight, 1);\n      }\n      .main {\n        text-align: left;\n      }\n      .title {\n        ${useCustomText(\"--beam-CumulativeImpact-title\")}\n        text-align: inherit;\n      }\n      .description {\n        ${useCustomText(\"--beam-CumulativeImpact-description\")}\n        text-align: inherit;\n      }\n      .impact-list {\n        display: flex;\n        flex-direction: column;\n        margin-top: var(--beam-CumulativeImpact-impact-list-marginTop);\n      }\n      .impact-row {\n        display: flex;\n        align-items: center;\n        margin-top: var(--beam-CumulativeImpact-row-marginTop);\n      }\n      .impact-row-value-container {\n        position: relative;\n        border-bottom-width: var(--beam-CumulativeImpact-row-value-container-borderBottomWidth);\n        border-bottom-color: var(--beam-CumulativeImpact-row-value-container-borderBottomColor);\n        border-bottom-style: solid;\n        padding-top: var(--beam-CumulativeImpact-row-value-container-paddingTop);\n        padding-right: var(--beam-CumulativeImpact-row-value-container-paddingRight);\n        padding-bottom: var(--beam-CumulativeImpact-row-value-container-paddingBottom);\n        padding-left: var(--beam-CumulativeImpact-row-value-container-paddingLeft);\n        text-align: center;\n        flex-shrink: 0;\n      }\n      .impact-row-value-counter {\n        ${useCustomText(\"--beam-CumulativeImpact-row-value-counter\")}\n      }\n      .impact-row-value-floating-counter {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n      }\n      .impact-row-description {\n        ${useCustomText(\"--beam-CumulativeImpact-row-description\")}\n        padding-left: var(--beam-CumulativeImpact-row-description-paddingLeft);\n        padding-right: var(--beam-CumulativeImpact-row-description-paddingRight);\n        /* match padding of value of counter for proper centering */\n        padding-bottom: var(--beam-CumulativeImpact-row-value-paddingBottom);\n        text-align: inherit;\n        flex-grow: 1;\n      }\n      @media (max-width: 500px) {\n        .main {\n          text-align: center;\n        }\n        .impact-row {\n          flex-direction: column;\n        }\n        .impact-row-description {\n          margin-top: var(--beam-CumulativeImpact-row-description-mobile-marginTop);\n          padding-bottom: 0;\n        }\n      }\n    `,\n  ];\n}\n\ndefineCustomElement(BeamCumulativeImpact);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"beam-cumulative-impact\": BeamCumulativeImpact;\n  }\n}\n"],"names":["AnimatedCounter","LitElement","entries","entry","MS_PER_FRAME","COUNTER_INCREMENT_PER_FRAME","result","target","userPrefersReducedMotion","html","__decorateClass","property","state","syncElementWidths","elements","els","isAllHtmlElements","widthSource","a","b","widthA","widthB","syncedWidth","el","strings","f","r","s","m","t","i","e","o","MAX_COUNTER_ANIMATION_DURATION","BeamCumulativeImpact","DEFAULT_BASE_URL","enforceConfig","getCumulativeImpact","AsyncController","debounce","changedProperties","requireNewDataProps","prop","data","error","loading","_loading","_errorMessage","BeamError","defaultStrings","rawValues","impact","maxRawValue","durations","val","localizeUserString","idx","animationDuration","disableAnimation","floatingCounterClass","duration","defaults","defineCustomText","remoteConfig","config","_cssVariableMap","cssReset","css","useCustomText","queryAll","defineCustomElement"],"mappings":"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"}