@internetarchive/elements 1.1.2 → 1.1.3-l10n-demo.0

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-payment-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-payment-selector.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-payment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type CSSResultGroup,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport type { PaymentProvidersInterface } from '../braintree/payment-providers-interface';\nimport { applePayLogo, googlePayLogo, paypalLogo, venmoLogo } from '../icons';\n\n/** A provider button starts hidden-but-reserved, then shows or disappears once its availability is known. */\nconst PaymentButtonMode = {\n  Loading: 'loading',\n  Available: 'available',\n  Unavailable: 'unavailable',\n} as const;\n\ntype PaymentButtonMode =\n  (typeof PaymentButtonMode)[keyof typeof PaymentButtonMode];\n\ntype PaymentMode = 'apple' | 'google' | 'venmo' | 'cc' | 'paypal';\n\n/**\n * The row of payment method buttons. Each provider button asks its handler\n * whether the browser supports it and hides itself if not. Once one is picked\n * the others collapse behind a \"Change payment method\" button.\n *\n * The real PayPal button is slotted in from the light DOM (it can't live in\n * a shadow root); the local PayPal button sits over it to catch clicks while\n * the donation amount is invalid.\n */\n@customElement('ia-donation-payment-selector')\n@localized()\nexport class IADonationPaymentSelector extends LitElement {\n  @property({ type: Boolean }) donationInfoValid = true;\n\n  @property({ type: Object }) paymentProviders?: PaymentProvidersInterface;\n\n  @state() private applePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @state() private googlePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @state() private venmoMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @state() private payPalMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @state() private paymentModeSelected?: PaymentMode;\n\n  render(): TemplateResult {\n    const paymentSelectedCss = this.paymentModeSelected\n      ? 'payment-selected'\n      : '';\n    return html`\n      <div\n        class=\"payment-container ${this.donationInfoValid\n          ? 'donation-info-valid'\n          : 'donation-info-invalid'} ${paymentSelectedCss}\"\n      >\n        <div class=\"payment-provider-container\">\n          <button\n            class=\"applepay provider-button ${this.applePayMode} ${this\n              .paymentModeSelected === 'apple'\n              ? 'selected'\n              : ''}\"\n            aria-label=${msg('Pay with Apple Pay')}\n            @click=${(e: Event) => {\n              this.paymentModeSelected = 'apple';\n              this.applePaySelected(e);\n            }}\n          >\n            <div class=\"payment-image\">${applePayLogo}</div>\n          </button>\n\n          <button\n            class=\"googlepay provider-button ${this.googlePayMode} ${this\n              .paymentModeSelected === 'google'\n              ? 'selected'\n              : ''}\"\n            aria-label=${msg('Pay with Google Pay')}\n            @click=${() => {\n              this.paymentModeSelected = 'google';\n              this.googlePaySelected();\n            }}\n          >\n            <div class=\"payment-image\">${googlePayLogo}</div>\n          </button>\n\n          <button\n            class=\"venmo provider-button ${this.venmoMode} ${this\n              .paymentModeSelected === 'venmo'\n              ? 'selected'\n              : ''}\"\n            aria-label=${msg('Pay with Venmo')}\n            @click=${() => {\n              this.paymentModeSelected = 'venmo';\n              this.venmoSelected();\n            }}\n          >\n            <div class=\"payment-image\">${venmoLogo}</div>\n          </button>\n\n          <div\n            class=\"paypal-container provider-button ${this.payPalMode} ${this\n              .paymentModeSelected === 'paypal'\n              ? 'selected'\n              : ''}\"\n          >\n            <div class=\"payment-image\">\n              <button\n                class=\"paypal-local-button\"\n                aria-label=${msg('Pay with PayPal')}\n                @click=${() => {\n                  this.paymentModeSelected = 'paypal';\n                  this.localPaypalButtonClicked();\n                }}\n              >\n                ${paypalLogo}\n              </button>\n              <slot name=\"paypal-button\"></slot>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"credit-card-container\">\n          <button\n            @click=${() => {\n              this.paymentModeSelected = 'cc';\n              this.creditCardSelected();\n            }}\n            class=\"button-style credit-card-button ${this\n              .paymentModeSelected === 'cc'\n              ? 'selected'\n              : ''}\"\n          >\n            <div class=\"cc-title\">${msg('Credit Card')}</div>\n            <div class=\"cc-background\"></div>\n          </button>\n        </div>\n      </div>\n\n      ${this.paymentModeSelected\n        ? html`\n            <button\n              id=\"change-payment-method\"\n              @click=${() => {\n                this.paymentModeSelected = undefined;\n                this.dispatchEvent(new Event('resetPaymentMethod'));\n                this.setButtonVisibility();\n              }}\n            >\n              ${msg('Change payment method')}\n            </button>\n          `\n        : nothing}\n    `;\n  }\n\n  firstUpdated(): void {\n    this.dispatchEvent(new Event('firstUpdated'));\n  }\n\n  updated(changed: PropertyValues): void {\n    if (changed.has('paymentProviders')) {\n      this.setButtonVisibility();\n    }\n  }\n\n  showPaypalButton(): void {\n    this.payPalMode = PaymentButtonMode.Available;\n  }\n\n  /** Asks each provider whether this browser can use it, and shows or hides its button. */\n  private async setButtonVisibility(): Promise<void> {\n    const providers = this.paymentProviders;\n    if (!providers) return;\n\n    const mode = (supported: boolean): PaymentButtonMode =>\n      supported ? PaymentButtonMode.Available : PaymentButtonMode.Unavailable;\n\n    providers.venmoHandler\n      .get()\n      .then(async (handler) => {\n        if (!handler) return false;\n        return handler.isBrowserSupported();\n      })\n      .then((supported) => {\n        this.venmoMode = mode(supported);\n      })\n      .catch((reason) => {\n        console.error('venmo unavailable', reason);\n        this.venmoMode = PaymentButtonMode.Unavailable;\n      });\n\n    providers.applePayHandler\n      .get()\n      .then((handler) => handler.isAvailable())\n      .then((supported) => {\n        this.applePayMode = mode(supported);\n      })\n      .catch((reason) => {\n        console.error('apple pay unavailable', reason);\n        this.applePayMode = PaymentButtonMode.Unavailable;\n      });\n\n    providers.googlePayHandler\n      .get()\n      .then((handler) => handler.isBrowserSupported())\n      .then((supported) => {\n        this.googlePayMode = mode(supported);\n      })\n      .catch((reason) => {\n        console.error('google pay unavailable', reason);\n        this.googlePayMode = PaymentButtonMode.Unavailable;\n      });\n  }\n\n  private googlePaySelected(): void {\n    this.dispatchEvent(new Event('googlePaySelected'));\n  }\n\n  private applePaySelected(e: Event): void {\n    this.dispatchEvent(\n      new CustomEvent('applePaySelected', { detail: { originalEvent: e } }),\n    );\n  }\n\n  private venmoSelected(): void {\n    this.dispatchEvent(new Event('venmoSelected'));\n  }\n\n  private creditCardSelected(): void {\n    this.dispatchEvent(new Event('creditCardSelected'));\n  }\n\n  private localPaypalButtonClicked(): void {\n    this.dispatchEvent(new Event('paypalBlockerSelected'));\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --donation-selector-base-font-size--: var(\n            --ia-donation-form-base-font-size,\n            10px\n          );\n          --donation-selector-button-width--: var(\n            --ia-donation-payment-button-width,\n            calc(var(--donation-selector-base-font-size--) * 5)\n          );\n          --donation-selector-button-height--: var(\n            --ia-donation-payment-button-height,\n            calc(var(--donation-selector-base-font-size--) * 3.2)\n          );\n          --donation-selector-cc-font-size--: var(\n            --ia-donation-credit-card-font-size,\n            calc(var(--donation-selector-base-font-size--) * 1.8)\n          );\n          --donation-selector-cc-font-color--: var(\n            --ia-donation-credit-card-button-font-color,\n            var(--mid-gray)\n          );\n          --donation-selector-cc-color--: var(\n            --ia-donation-credit-card-button-color,\n            var(--true-white)\n          );\n        }\n\n        button {\n          color: inherit;\n          font-family: inherit;\n        }\n\n        .payment-container {\n          width: 100%;\n        }\n\n        .payment-provider-container {\n          display: grid;\n          grid-template-columns: 1fr 1fr 1fr 1fr;\n          grid-gap: var(--donation-selector-base-font-size--);\n          margin-bottom: var(--donation-selector-base-font-size--);\n          max-width: calc(var(--donation-selector-base-font-size--) * 23);\n        }\n\n        .provider-button {\n          border: 0;\n          padding: 0;\n          background: none;\n          cursor: pointer;\n          width: var(--donation-selector-button-width--);\n          height: var(--donation-selector-button-height--);\n        }\n\n        .provider-button.unavailable {\n          display: none;\n        }\n\n        .provider-button.loading {\n          border: 1px solid #ddd;\n          border-radius: 2px;\n          /* Accounts for the border that goes away once the provider loads, so the layout doesn't shift */\n          margin-bottom: -2px;\n        }\n\n        .provider-button.loading .payment-image {\n          display: none;\n        }\n\n        .payment-image,\n        .brand-logo {\n          width: 100%;\n          height: 100%;\n        }\n\n        .brand-logo {\n          display: block;\n          object-fit: contain;\n        }\n\n        .paypal-local-button {\n          position: absolute;\n          border: 0;\n          padding: 0;\n          background: none;\n          cursor: pointer;\n          width: var(--donation-selector-button-width--);\n          height: var(--donation-selector-button-height--);\n        }\n\n        .donation-info-valid .paypal-local-button {\n          z-index: 0;\n        }\n\n        .donation-info-invalid .paypal-local-button {\n          z-index: 250;\n        }\n\n        .credit-card-button {\n          color: var(--donation-selector-cc-font-color--);\n          background-color: var(--donation-selector-cc-color--);\n          border: 1px solid var(--mid-gray);\n          border-radius: 4px;\n          cursor: pointer;\n          margin: 0;\n          padding: calc(var(--donation-selector-base-font-size--) * 0.7)\n            var(--donation-selector-base-font-size--);\n          width: 100%;\n        }\n\n        .credit-card-button .cc-background {\n          height: calc(var(--donation-selector-base-font-size--) * 2.4);\n          width: 100%;\n          background-repeat: no-repeat;\n          background-image: url(https://archive.org/images/cc_logos.png);\n          background-position: 50% 50%;\n          background-size: contain;\n        }\n\n        .credit-card-button .cc-title {\n          font-size: var(--donation-selector-cc-font-size--);\n          font-weight: 700;\n          margin-bottom: var(--padding-sm);\n        }\n\n        button#change-payment-method {\n          margin-top: 10px;\n          background: var(--true-white);\n          border: 1px solid;\n          border-radius: 3px;\n          padding: 5px;\n          cursor: pointer;\n        }\n\n        .payment-selected .provider-button:not(.selected),\n        .payment-selected .credit-card-button:not(.selected) {\n          display: none;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-section.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, type CSSResultGroup, type TemplateResult } from 'lit';
+/** Whether the numbered badge shows, hides, or hides but keeps its column. */
+export declare const DonationSectionBadgeMode: {
+    readonly HideBadge: "hidebadge";
+    readonly ShowBadge: "showbadge";
+    readonly HideBadgeLeaveSpacing: "hidebadgeleavespacing";
+};
+export type DonationSectionBadgeMode = (typeof DonationSectionBadgeMode)[keyof typeof DonationSectionBadgeMode];
+/**
+ * One step of the donation form: a round numbered badge, an optional
+ * headline, and whatever content is slotted in.
+ */
+export declare class IADonationSection extends LitElement {
+    /** What goes in the badge, usually the step number. */
+    sectionBadge: string;
+    headline?: string;
+    badgeMode: DonationSectionBadgeMode;
+    render(): TemplateResult;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-donation-section.d.ts.map

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-section.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-section.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,8EAA8E;AAC9E,eAAO,MAAM,wBAAwB;;;;CAI3B,CAAC;AAEX,MAAM,MAAM,wBAAwB,GAClC,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,OAAO,wBAAwB,CAAC,CAAC;AAE3E;;;GAGG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,uDAAuD;IAC3B,YAAY,SAAO;IAEnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,SAAS,EAAE,wBAAwB,CAC1B;IAErC,MAAM,IAAI,cAAc;IAkBxB,MAAM,KAAK,MAAM,IAAI,cAAc,CA+HlC;CACF"}

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-section.js

@@ -0,0 +1,182 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../../util/custom-element.js';
+import themeStyles from '../../../themes/theme-styles.js';
+/** Whether the numbered badge shows, hides, or hides but keeps its column. */
+export const DonationSectionBadgeMode = {
+    HideBadge: 'hidebadge',
+    ShowBadge: 'showbadge',
+    HideBadgeLeaveSpacing: 'hidebadgeleavespacing',
+};
+/**
+ * One step of the donation form: a round numbered badge, an optional
+ * headline, and whatever content is slotted in.
+ */
+let IADonationSection = class IADonationSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** What goes in the badge, usually the step number. */
+        this.sectionBadge = '0';
+        this.badgeMode = DonationSectionBadgeMode.ShowBadge;
+    }
+    render() {
+        return html `
+      <div class="container ${this.badgeMode}">
+        <div class="badge-container">
+          <div class="badge">${this.sectionBadge}</div>
+        </div>
+        <div class="content-container">
+          ${this.headline
+            ? html `<div class="title">${this.headline}</div>`
+            : nothing}
+          <div class="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          /*
+           * The donation form was built for a 10px root font size. Sizing off
+           * this base instead keeps the section self-contained, so it looks the
+           * same whatever the page's root size is. Override it to rescale
+           * everything.
+           */
+          --donation-section-base-font-size--: var(
+            --ia-donation-section-base-font-size,
+            10px
+          );
+
+          --donation-section-badge-transition--: var(
+            --ia-donation-section-badge-transition,
+            0.25s ease-out
+          );
+          --donation-section-badge-margin--: var(
+            --ia-donation-section-badge-margin,
+            var(--donation-section-base-font-size--)
+          );
+          --donation-section-badge-background-color--: var(
+            --ia-donation-section-badge-background-color,
+            var(--mid-gray)
+          );
+          --donation-section-badge-radius--: var(
+            --ia-donation-section-badge-radius,
+            calc(var(--donation-section-base-font-size--) * 1.2)
+          );
+          --donation-section-badge-width--: calc(
+            var(--donation-section-badge-radius--) * 2
+          );
+          --donation-section-badge-font-size--: var(
+            --ia-donation-section-badge-font-size,
+            calc(var(--donation-section-base-font-size--) * 1.8)
+          );
+          --donation-section-badge-font-weight--: var(
+            --ia-donation-section-badge-font-weight,
+            bold
+          );
+          --donation-section-badge-font-color--: var(
+            --ia-donation-section-badge-font-color,
+            var(--true-white)
+          );
+          --donation-section-title-font-size--: var(
+            --ia-donation-section-title-font-size,
+            calc(var(--donation-section-base-font-size--) * 1.8)
+          );
+          --donation-section-title-font-weight--: var(
+            --ia-donation-section-title-font-weight,
+            bold
+          );
+          --donation-section-background-color--: var(
+            --ia-donation-section-background-color,
+            transparent
+          );
+          --donation-section-text-color--: var(--primary-text-color);
+
+          display: block;
+          background-color: var(--donation-section-background-color--);
+          color: var(--donation-section-text-color--);
+        }
+
+        .container {
+          position: relative;
+          padding: var(--padding-sm);
+        }
+
+        .content-container {
+          position: relative;
+          left: calc(
+            var(--donation-section-badge-width--) +
+              var(--donation-section-badge-margin--)
+          );
+          width: calc(
+            100% -
+              (
+                var(--donation-section-badge-width--) +
+                  var(--donation-section-badge-margin--)
+              )
+          );
+          transition: var(--donation-section-badge-transition--);
+          z-index: 1;
+        }
+
+        .hidebadge .content-container {
+          left: 0;
+          width: 100%;
+        }
+
+        .hidebadge .badge-container {
+          display: none;
+        }
+
+        .hidebadgeleavespacing .badge {
+          display: none;
+        }
+
+        .badge-container {
+          position: absolute;
+          width: var(--donation-section-badge-width--);
+        }
+
+        .badge {
+          background-color: var(--donation-section-badge-background-color--);
+          color: var(--donation-section-badge-font-color--);
+          width: var(--donation-section-badge-width--);
+          height: var(--donation-section-badge-width--);
+          border-radius: var(--donation-section-badge-radius--);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-weight: var(--donation-section-badge-font-weight--);
+          font-size: var(--donation-section-badge-font-size--);
+        }
+
+        .title {
+          line-height: var(--donation-section-badge-width--);
+          margin-bottom: var(--padding-sm);
+          font-size: var(--donation-section-title-font-size--);
+          font-weight: var(--donation-section-title-font-weight--);
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IADonationSection.prototype, "sectionBadge", void 0);
+__decorate([
+    property({ type: String })
+], IADonationSection.prototype, "headline", void 0);
+__decorate([
+    property({ type: String })
+], IADonationSection.prototype, "badgeMode", void 0);
+IADonationSection = __decorate([
+    customElement('ia-donation-section')
+], IADonationSection);
+export { IADonationSection };
+//# sourceMappingURL=ia-donation-section.js.map

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-section.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-section.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,OAAO,GAGR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,8EAA8E;AAC9E,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,WAAW;IACtB,qBAAqB,EAAE,uBAAuB;CACtC,CAAC;AAKX;;;GAGG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QACL,uDAAuD;QAC3B,iBAAY,GAAG,GAAG,CAAC;QAInB,cAAS,GACnC,wBAAwB,CAAC,SAAS,CAAC;IAoJvC,CAAC;IAlJC,MAAM;QACJ,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,SAAS;;+BAEb,IAAI,CAAC,YAAY;;;YAGpC,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,QAAQ,QAAQ;YACjD,CAAC,CAAC,OAAO;;;;;;KAMhB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA0HF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAzJ6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACU;AAP1B,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA2J7B","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/** Whether the numbered badge shows, hides, or hides but keeps its column. */\nexport const DonationSectionBadgeMode = {\n  HideBadge: 'hidebadge',\n  ShowBadge: 'showbadge',\n  HideBadgeLeaveSpacing: 'hidebadgeleavespacing',\n} as const;\n\nexport type DonationSectionBadgeMode =\n  (typeof DonationSectionBadgeMode)[keyof typeof DonationSectionBadgeMode];\n\n/**\n * One step of the donation form: a round numbered badge, an optional\n * headline, and whatever content is slotted in.\n */\n@customElement('ia-donation-section')\nexport class IADonationSection extends LitElement {\n  /** What goes in the badge, usually the step number. */\n  @property({ type: String }) sectionBadge = '0';\n\n  @property({ type: String }) headline?: string;\n\n  @property({ type: String }) badgeMode: DonationSectionBadgeMode =\n    DonationSectionBadgeMode.ShowBadge;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"container ${this.badgeMode}\">\n        <div class=\"badge-container\">\n          <div class=\"badge\">${this.sectionBadge}</div>\n        </div>\n        <div class=\"content-container\">\n          ${this.headline\n            ? html`<div class=\"title\">${this.headline}</div>`\n            : nothing}\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          /*\n           * The donation form was built for a 10px root font size. Sizing off\n           * this base instead keeps the section self-contained, so it looks the\n           * same whatever the page's root size is. Override it to rescale\n           * everything.\n           */\n          --donation-section-base-font-size--: var(\n            --ia-donation-section-base-font-size,\n            10px\n          );\n\n          --donation-section-badge-transition--: var(\n            --ia-donation-section-badge-transition,\n            0.25s ease-out\n          );\n          --donation-section-badge-margin--: var(\n            --ia-donation-section-badge-margin,\n            var(--donation-section-base-font-size--)\n          );\n          --donation-section-badge-background-color--: var(\n            --ia-donation-section-badge-background-color,\n            var(--mid-gray)\n          );\n          --donation-section-badge-radius--: var(\n            --ia-donation-section-badge-radius,\n            calc(var(--donation-section-base-font-size--) * 1.2)\n          );\n          --donation-section-badge-width--: calc(\n            var(--donation-section-badge-radius--) * 2\n          );\n          --donation-section-badge-font-size--: var(\n            --ia-donation-section-badge-font-size,\n            calc(var(--donation-section-base-font-size--) * 1.8)\n          );\n          --donation-section-badge-font-weight--: var(\n            --ia-donation-section-badge-font-weight,\n            bold\n          );\n          --donation-section-badge-font-color--: var(\n            --ia-donation-section-badge-font-color,\n            var(--true-white)\n          );\n          --donation-section-title-font-size--: var(\n            --ia-donation-section-title-font-size,\n            calc(var(--donation-section-base-font-size--) * 1.8)\n          );\n          --donation-section-title-font-weight--: var(\n            --ia-donation-section-title-font-weight,\n            bold\n          );\n          --donation-section-background-color--: var(\n            --ia-donation-section-background-color,\n            transparent\n          );\n          --donation-section-text-color--: var(--primary-text-color);\n\n          display: block;\n          background-color: var(--donation-section-background-color--);\n          color: var(--donation-section-text-color--);\n        }\n\n        .container {\n          position: relative;\n          padding: var(--padding-sm);\n        }\n\n        .content-container {\n          position: relative;\n          left: calc(\n            var(--donation-section-badge-width--) +\n              var(--donation-section-badge-margin--)\n          );\n          width: calc(\n            100% -\n              (\n                var(--donation-section-badge-width--) +\n                  var(--donation-section-badge-margin--)\n              )\n          );\n          transition: var(--donation-section-badge-transition--);\n          z-index: 1;\n        }\n\n        .hidebadge .content-container {\n          left: 0;\n          width: 100%;\n        }\n\n        .hidebadge .badge-container {\n          display: none;\n        }\n\n        .hidebadgeleavespacing .badge {\n          display: none;\n        }\n\n        .badge-container {\n          position: absolute;\n          width: var(--donation-section-badge-width--);\n        }\n\n        .badge {\n          background-color: var(--donation-section-badge-background-color--);\n          color: var(--donation-section-badge-font-color--);\n          width: var(--donation-section-badge-width--);\n          height: var(--donation-section-badge-width--);\n          border-radius: var(--donation-section-badge-radius--);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-weight: var(--donation-section-badge-font-weight--);\n          font-size: var(--donation-section-badge-font-size--);\n        }\n\n        .title {\n          line-height: var(--donation-section-badge-width--);\n          margin-bottom: var(--padding-sm);\n          font-size: var(--donation-section-title-font-size--);\n          font-weight: var(--donation-section-title-font-weight--);\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-summary.d.ts

@@ -0,0 +1,11 @@
+import { LitElement, type CSSResultGroup, type TemplateResult } from 'lit';
+import type { DonationPaymentInfo } from '../models/donation-payment-info.js';
+/** The collapsed view of the chosen donation, with a button to go back and edit it. */
+export declare class IADonationSummary extends LitElement {
+    donationInfo?: DonationPaymentInfo;
+    render(): TemplateResult;
+    get displayTitle(): string;
+    private editClicked;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-donation-summary.d.ts.map

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-summary.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-summary.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAG3E,uFAAuF;AACvF,qBAEa,iBAAkB,SAAQ,UAAU;IACnB,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAE/D,MAAM,IAAI,cAAc;IAOxB,IAAI,YAAY,IAAI,MAAM,CAazB;IAED,OAAO,CAAC,WAAW;IAInB,MAAM,KAAK,MAAM,IAAI,cAAc,CAkBlC;CACF"}

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-summary.js

@@ -0,0 +1,60 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../../util/custom-element.js';
+import { localized, msg, str } from '@lit/localize';
+import currency from 'currency.js';
+import themeStyles from '../../../themes/theme-styles.js';
+import { DonationType } from '../models/donation-type.js';
+/** The collapsed view of the chosen donation, with a button to go back and edit it. */
+let IADonationSummary = class IADonationSummary extends LitElement {
+    render() {
+        return html `
+      <h1>${this.displayTitle}</h1>
+      <button @click=${this.editClicked}>${msg('Edit this amount')}</button>
+    `;
+    }
+    get displayTitle() {
+        if (!this.donationInfo) {
+            return '';
+        }
+        const amount = this.donationInfo.amount;
+        // Whole dollars don't need the cents
+        const precision = amount === Math.round(amount) ? 0 : 2;
+        const displayAmount = currency(amount, { symbol: '$', precision }).format();
+        return this.donationInfo.donationType === DonationType.Monthly
+            ? msg(str `${displayAmount} Monthly Donation`)
+            : msg(str `${displayAmount} Donation`);
+    }
+    editClicked() {
+        this.dispatchEvent(new Event('editClicked'));
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          display: flex;
+          justify-content: center;
+          align-content: center;
+        }
+
+        button {
+          border: 0;
+          background: none;
+          color: var(--link-color);
+          cursor: pointer;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], IADonationSummary.prototype, "donationInfo", void 0);
+IADonationSummary = __decorate([
+    customElement('ia-donation-summary'),
+    localized()
+], IADonationSummary);
+export { IADonationSummary };
+//# sourceMappingURL=ia-donation-summary.js.map

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-summary.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-summary.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,uFAAuF;AAGhF,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAG/C,MAAM;QACJ,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,YAAY;uBACN,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC,kBAAkB,CAAC;KAC7D,CAAC;IACJ,CAAC;IAED,IAAI,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QACxC,qCAAqC;QACrC,MAAM,SAAS,GAAG,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxD,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAE5E,OAAO,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO;YAC5D,CAAC,CAAC,GAAG,CAAC,GAAG,CAAA,GAAG,aAAa,mBAAmB,CAAC;YAC7C,CAAC,CAAC,GAAG,CAAC,GAAG,CAAA,GAAG,aAAa,WAAW,CAAC,CAAC;IAC1C,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;OAaF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA/C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAoC;AADpD,iBAAiB;IAF7B,aAAa,CAAC,qBAAqB,CAAC;IACpC,SAAS,EAAE;GACC,iBAAiB,CAgD7B","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg, str } from '@lit/localize';\nimport currency from 'currency.js';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport type { DonationPaymentInfo } from '../models/donation-payment-info';\nimport { DonationType } from '../models/donation-type';\n\n/** The collapsed view of the chosen donation, with a button to go back and edit it. */\n@customElement('ia-donation-summary')\n@localized()\nexport class IADonationSummary extends LitElement {\n  @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n  render(): TemplateResult {\n    return html`\n      <h1>${this.displayTitle}</h1>\n      <button @click=${this.editClicked}>${msg('Edit this amount')}</button>\n    `;\n  }\n\n  get displayTitle(): string {\n    if (!this.donationInfo) {\n      return '';\n    }\n\n    const amount = this.donationInfo.amount;\n    // Whole dollars don't need the cents\n    const precision = amount === Math.round(amount) ? 0 : 2;\n    const displayAmount = currency(amount, { symbol: '$', precision }).format();\n\n    return this.donationInfo.donationType === DonationType.Monthly\n      ? msg(str`${displayAmount} Monthly Donation`)\n      : msg(str`${displayAmount} Donation`);\n  }\n\n  private editClicked(): void {\n    this.dispatchEvent(new Event('editClicked'));\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          display: flex;\n          justify-content: center;\n          align-content: center;\n        }\n\n        button {\n          border: 0;\n          background: none;\n          color: var(--link-color);\n          cursor: pointer;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-total-amount.d.ts

@@ -0,0 +1,10 @@
+import { LitElement, type CSSResultGroup, type TemplateResult } from 'lit';
+import type { DonationPaymentInfo } from '../models/donation-payment-info.js';
+/** The "Total: $X" line under the amount picker, with "/month" for monthly gifts. */
+export declare class IADonationTotalAmount extends LitElement {
+    donationInfo?: DonationPaymentInfo;
+    render(): TemplateResult;
+    private get totalLine();
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-donation-total-amount.d.ts.map

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-total-amount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-total-amount.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-total-amount.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAG3E,qFAAqF;AACrF,qBAEa,qBAAsB,SAAQ,UAAU;IACvB,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAE/D,MAAM,IAAI,cAAc;IAOxB,OAAO,KAAK,SAAS,GAMpB;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAyClC;CACF"}

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-total-amount.js

@@ -0,0 +1,76 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../../util/custom-element.js';
+import { localized, msg, str } from '@lit/localize';
+import currency from 'currency.js';
+import themeStyles from '../../../themes/theme-styles.js';
+import { DonationType } from '../models/donation-type.js';
+/** The "Total: $X" line under the amount picker, with "/month" for monthly gifts. */
+let IADonationTotalAmount = class IADonationTotalAmount extends LitElement {
+    render() {
+        return html `
+      <div class="top-line"></div>
+      <div class="total-line">${this.totalLine}</div>
+    `;
+    }
+    get totalLine() {
+        if (!this.donationInfo)
+            return '';
+        const amount = currency(this.donationInfo.total, { symbol: '$' }).format();
+        return this.donationInfo.donationType === DonationType.Monthly
+            ? msg(str `Total: ${amount}/month`)
+            : msg(str `Total: ${amount}`);
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --donation-total-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          --donation-total-line-color--: var(
+            --ia-donation-total-amount-line-color,
+            var(--mid-gray)
+          );
+          --donation-total-line-thickness--: var(
+            --ia-donation-total-amount-line-thickness,
+            2px
+          );
+          --donation-total-vertical-spacing--: var(
+            --ia-donation-total-amount-vertical-spacing,
+            var(--padding-sm)
+          );
+          --donation-total-font-size--: var(
+            --ia-donation-total-amount-font-size,
+            calc(var(--donation-total-base-font-size--) * 2.6)
+          );
+        }
+
+        .top-line {
+          width: 100%;
+          height: var(--donation-total-line-thickness--);
+          background-color: var(--donation-total-line-color--);
+        }
+
+        .total-line {
+          font-size: var(--donation-total-font-size--);
+          font-weight: bold;
+          text-align: center;
+          margin-top: var(--donation-total-vertical-spacing--);
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], IADonationTotalAmount.prototype, "donationInfo", void 0);
+IADonationTotalAmount = __decorate([
+    customElement('ia-donation-total-amount'),
+    localized()
+], IADonationTotalAmount);
+export { IADonationTotalAmount };
+//# sourceMappingURL=ia-donation-total-amount.js.map

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-total-amount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-total-amount.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-total-amount.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,qFAAqF;AAG9E,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAGnD,MAAM;QACJ,OAAO,IAAI,CAAA;;gCAEiB,IAAI,CAAC,SAAS;KACzC,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,OAAO,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO;YAC5D,CAAC,CAAC,GAAG,CAAC,GAAG,CAAA,UAAU,MAAM,QAAQ,CAAC;YAClC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAA,UAAU,MAAM,EAAE,CAAC,CAAC;IACjC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA3D6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAoC;AADpD,qBAAqB;IAFjC,aAAa,CAAC,0BAA0B,CAAC;IACzC,SAAS,EAAE;GACC,qBAAqB,CA4DjC","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg, str } from '@lit/localize';\nimport currency from 'currency.js';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport type { DonationPaymentInfo } from '../models/donation-payment-info';\nimport { DonationType } from '../models/donation-type';\n\n/** The \"Total: $X\" line under the amount picker, with \"/month\" for monthly gifts. */\n@customElement('ia-donation-total-amount')\n@localized()\nexport class IADonationTotalAmount extends LitElement {\n  @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"top-line\"></div>\n      <div class=\"total-line\">${this.totalLine}</div>\n    `;\n  }\n\n  private get totalLine(): string {\n    if (!this.donationInfo) return '';\n    const amount = currency(this.donationInfo.total, { symbol: '$' }).format();\n    return this.donationInfo.donationType === DonationType.Monthly\n      ? msg(str`Total: ${amount}/month`)\n      : msg(str`Total: ${amount}`);\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --donation-total-base-font-size--: var(\n            --ia-donation-form-base-font-size,\n            10px\n          );\n          --donation-total-line-color--: var(\n            --ia-donation-total-amount-line-color,\n            var(--mid-gray)\n          );\n          --donation-total-line-thickness--: var(\n            --ia-donation-total-amount-line-thickness,\n            2px\n          );\n          --donation-total-vertical-spacing--: var(\n            --ia-donation-total-amount-vertical-spacing,\n            var(--padding-sm)\n          );\n          --donation-total-font-size--: var(\n            --ia-donation-total-amount-font-size,\n            calc(var(--donation-total-base-font-size--) * 2.6)\n          );\n        }\n\n        .top-line {\n          width: 100%;\n          height: var(--donation-total-line-thickness--);\n          background-color: var(--donation-total-line-color--);\n        }\n\n        .total-line {\n          font-size: var(--donation-total-font-size--);\n          font-weight: bold;\n          text-align: center;\n          margin-top: var(--donation-total-vertical-spacing--);\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/ia-donation-form-controller.d.ts

@@ -0,0 +1,114 @@
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import { type LazyLoaderServiceInterface } from '@internetarchive/lazy-loader-service';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
+import type { BraintreeEndpointManagerInterface, BraintreeManagerInterface } from './braintree/braintree-manager-interface.js';
+import type { HostingEnvironment } from './braintree/hosting-environment.js';
+import { type PaymentClientsInterface } from './braintree/payment-clients.js';
+import { type PaymentFlowHandlersInterface } from './flow-handlers/payment-flow-handlers.js';
+import { EditDonationAmountSelectionLayout, EditDonationFrequencySelectionMode } from './form-elements/ia-donation-edit-donation.js';
+import { DonationPaymentInfo } from './models/donation-payment-info.js';
+import { DonationType } from './models/donation-type.js';
+import type { UpsellModalCTAMode } from './modals/ia-donation-upsell-modal-content.js';
+import { type RecaptchaManagerInterface } from './recaptcha-manager.js';
+import './form-elements/contact-form/ia-donation-contact-form.js';
+import './form-elements/ia-donation-badged-input.js';
+import './ia-donation-form.js';
+/**
+ * Wires the donation form to everything around it: Braintree and the payment
+ * libraries, the modal manager, recaptcha, and analytics. Give it the
+ * environment, tokens and an endpoint manager and it builds the rest.
+ *
+ * It renders into the light DOM, because Braintree's hosted fields, the
+ * PayPal button and recaptcha all refuse to work inside a shadow root. Those
+ * are rendered here and slotted into `<ia-donation-form>`.
+ */
+export declare class IADonationFormController extends LitElement {
+    environment?: HostingEnvironment;
+    braintreeAuthToken?: string;
+    recaptchaSiteKey?: string;
+    venmoProfileId?: string;
+    googlePayMerchantId?: string;
+    analyticsCategory: string;
+    amountOptions: number[];
+    donationInfo: DonationPaymentInfo;
+    amountSelectionLayout: EditDonationAmountSelectionLayout;
+    frequencySelectionMode: EditDonationFrequencySelectionMode;
+    referrer?: string;
+    loggedInUser?: string;
+    origin?: string;
+    donorEmail: string;
+    endpointManager?: BraintreeEndpointManagerInterface;
+    analyticsHandler?: AnalyticsManagerInterface;
+    modalManager?: ModalManagerInterface;
+    /** The element recaptcha renders its (invisible) widget into. Must be in the light DOM. */
+    recaptchaElement?: HTMLElement;
+    braintreeManager?: BraintreeManagerInterface;
+    recaptchaManager?: RecaptchaManagerInterface;
+    paymentFlowHandlers?: PaymentFlowHandlersInterface;
+    paymentClients?: PaymentClientsInterface;
+    /** The clients this element built itself, so it knows when it may rebuild them */
+    private defaultPaymentClients?;
+    lazyLoaderService: LazyLoaderServiceInterface;
+    private donationForm;
+    private braintreeNumberInput;
+    private braintreeCVVInput;
+    private braintreeExpirationDateInput;
+    private braintreeErrorMessage;
+    private contactForm?;
+    updated(changedProperties: PropertyValues): void;
+    /** Developer convenience: show the confirmation step without a payment. */
+    showConfirmationStepDev(options: {
+        donationType: DonationType;
+        amount: number;
+        currencyType: string;
+        cancelDonationCB: () => void;
+        confirmDonationCB: () => void;
+    }): Promise<void>;
+    /** Developer convenience: show the upsell modal without a payment. */
+    showUpsellModalDev(options: {
+        oneTimeAmount: number;
+        ctaMode?: UpsellModalCTAMode;
+        yesSelected?: (amount: number) => void;
+        noSelected?: () => void;
+        amountChanged?: (amount: number) => void;
+        userClosedModalCallback?: () => void;
+    }): Promise<void>;
+    private setupBraintreeManager;
+    private recaptchaManagerSetup;
+    private setupRecaptchaManager;
+    firstUpdated(): void;
+    /**
+     * The donate page links carry the starting configuration in the query
+     * string: `amt`, `contrib_type`, `coverFees`, `dollarAmounts`,
+     * `amountLayout` and `frequencyMode`.
+     */
+    private configureFromQueryParams;
+    private setupPaymentFlowHandlers;
+    private get hostedFieldConfig();
+    render(): TemplateResult;
+    /** Light DOM, for the payment libraries that can't render into a shadow root */
+    createRenderRoot(): this;
+    private donationInfoChanged;
+    private trackViewedEvent;
+    private paymentProviderSelected;
+    private paymentFlowConfirmed;
+    private paymentFlowStarted;
+    private paymentFlowCancelled;
+    private paymentFlowError;
+    private removeSpaces;
+    /** A sampled event in this form's category */
+    private logEvent;
+    /** An unsampled event in the `DonationFlow` category */
+    private logDonationFlowEvent;
+    /**
+     * The element renders into the light DOM, so instead of a `styles` block
+     * it writes its own `<style>` tag, scoped to its container class.
+     *
+     * The `--ia-donation-form-*` variables set here are the consumer-facing
+     * theming for the whole form; they fan out to the sections, the amount
+     * picker and the payment buttons.
+     */
+    private get getStyles();
+}
+//# sourceMappingURL=ia-donation-form-controller.d.ts.map

package/dist/src/elements/ia-donation-form/ia-donation-form-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-form-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-donation-form/ia-donation-form-controller.ts"],"names":[],"mappings":"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"}