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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-edit-donation.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-edit-donation.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, query, state } 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 { CurrencyValidator } from '../currency-validator';\nimport {\n  DonationPaymentInfo,\n  defaultDonationAmounts,\n  defaultSelectedDonationInfo,\n} from '../models/donation-payment-info';\nimport { DonationType } from '../models/donation-type';\nimport { DonationSectionBadgeMode } from './ia-donation-section';\nimport './ia-donation-section';\n\n/** Whether the numbered step badges show on the sections. */\nexport const EditDonationStepNumberMode = {\n  HideNumbers: 'hidenumbers',\n  ShowNumbers: 'shownumbers',\n} as const;\n\nexport type EditDonationStepNumberMode =\n  (typeof EditDonationStepNumberMode)[keyof typeof EditDonationStepNumberMode];\n\n/** The radio button groups in the form. */\nexport const EditDonationSelectionGroup = {\n  DonationType: 'donationType',\n  Amount: 'amount',\n} as const;\n\nexport type EditDonationSelectionGroup =\n  (typeof EditDonationSelectionGroup)[keyof typeof EditDonationSelectionGroup];\n\n/** The outcome of validating an amount. Sent in the `editDonationError` event. */\nexport const EditDonationInfoStatus = {\n  ValidDonationAmount: 'valid_donation_amount',\n  InvalidDonationAmount: 'invalid_donation_amount',\n  DonationTooHigh: 'donation_too_high',\n  DonationTooLow: 'donation_too_low',\n} as const;\n\nexport type EditDonationInfoStatus =\n  (typeof EditDonationInfoStatus)[keyof typeof EditDonationInfoStatus];\n\n/** How the one-time / monthly choice is presented. */\nexport const EditDonationFrequencySelectionMode = {\n  Button: 'button',\n  Checkbox: 'checkbox',\n  Hide: 'hide',\n} as const;\n\nexport type EditDonationFrequencySelectionMode =\n  (typeof EditDonationFrequencySelectionMode)[keyof typeof EditDonationFrequencySelectionMode];\n\n/** Whether the amount buttons wrap onto several lines or stay on one. */\nexport const EditDonationAmountSelectionLayout = {\n  SingleLine: 'single-line',\n  MultiLine: 'multi-line',\n} as const;\n\nexport type EditDonationAmountSelectionLayout =\n  (typeof EditDonationAmountSelectionLayout)[keyof typeof EditDonationAmountSelectionLayout];\n\n/**\n * The part of the donation form where the donor picks a frequency, an amount\n * (preset or custom) and whether to cover the processing fee. Fires\n * `donationInfoChanged` with the new `DonationPaymentInfo` on every change\n * and `editDonationError` when a custom amount is out of range.\n *\n * The petabox donation banner uses this on its own, without the rest of the\n * form.\n */\n@customElement('ia-donation-edit-donation')\n@localized()\nexport class IADonationEditDonation extends LitElement {\n  @property({ type: Object })\n  donationInfo: DonationPaymentInfo = defaultSelectedDonationInfo;\n\n  @property({ type: String })\n  stepNumberMode: EditDonationStepNumberMode =\n    EditDonationStepNumberMode.ShowNumbers;\n\n  /**\n   * A convenience for setting the selected amount from plain HTML. When\n   * present it wins over `donationInfo`.\n   */\n  @property({ type: Number }) defaultSelectedAmount?: number;\n\n  @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n  @property({ type: String })\n  amountSelectionLayout: EditDonationAmountSelectionLayout =\n    EditDonationAmountSelectionLayout.MultiLine;\n\n  @property({ type: String, reflect: true })\n  frequencySelectionMode: EditDonationFrequencySelectionMode =\n    EditDonationFrequencySelectionMode.Button;\n\n  @property({ type: String, reflect: true }) customAmountMode:\n    | 'display'\n    | 'hide' = 'display';\n\n  @property({ type: String, reflect: true }) coverFeesCheckboxMode:\n    | 'display'\n    | 'hide' = 'display';\n\n  /** `slot` renders the `edit-donation-amount-title` slot in place of the default headline. */\n  @property({ type: String, reflect: true }) amountTitleDisplayMode:\n    | 'default'\n    | 'slot' = 'default';\n\n  @state() private error?: TemplateResult;\n\n  @state() private customAmountSelected = false;\n\n  @query('#custom-amount-button') private customAmountButton!: HTMLInputElement;\n\n  @query('#custom-amount-input') private customAmountInput!: HTMLInputElement;\n\n  private currencyValidator: CurrencyValidator = new CurrencyValidator();\n\n  render(): TemplateResult {\n    const amountTitle =\n      this.amountTitleDisplayMode === 'default'\n        ? msg('Choose an amount (USD)')\n        : '';\n    return html`\n      ${this.frequencySelectionMode ===\n      EditDonationFrequencySelectionMode.Button\n        ? this.frequencyButtonsTemplate\n        : nothing}\n\n      <ia-donation-section\n        sectionBadge=\"${this.amountSelectionSectionNumber}\"\n        headline=${amountTitle}\n        badgeMode=${this.formSectionNumberMode}\n      >\n        ${this.amountTitleDisplayMode === 'slot'\n          ? html`<slot name=\"edit-donation-amount-title\"></slot>`\n          : nothing}\n        <ul class=\"amount-selector\">\n          ${this.presetAmountsTemplate}\n          ${this.customAmountMode === 'display'\n            ? html`<li class=\"custom-amount\">${this.customAmountTemplate}</li>`\n            : nothing}\n        </ul>\n\n        <div class=\"errors\">${this.error}</div>\n\n        ${this.coverFeesCheckboxMode === 'display'\n          ? html`<div class=\"checkbox-options\">\n              ${this.coverFeesCheckboxTemplate}\n              ${this.frequencySelectionMode ===\n              EditDonationFrequencySelectionMode.Checkbox\n                ? this.frequencyCheckboxTemplate\n                : nothing}\n            </div>`\n          : nothing}\n      </ia-donation-section>\n    `;\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('customAmountSelected')) {\n      if (this.customAmountButton) {\n        this.customAmountButton.checked = this.customAmountSelected;\n      }\n    }\n    if (changedProperties.has('amountOptions')) {\n      this.customAmountSelected = false;\n      this.updateSelectedDonationInfo();\n      this.setupAmountColumnsLayoutConfig();\n    }\n    if (changedProperties.has('amountSelectionLayout')) {\n      this.setupAmountColumnsLayoutConfig();\n    }\n    if (changedProperties.has('donationInfo')) {\n      this.updateSelectedDonationInfo();\n    }\n    if (\n      changedProperties.has('defaultSelectedAmount') &&\n      this.defaultSelectedAmount !== undefined\n    ) {\n      this.customAmountSelected = false;\n      this.donationInfo = new DonationPaymentInfo({\n        donationType: this.donationInfo.donationType,\n        amount: this.defaultSelectedAmount,\n        coverFees: this.donationInfo.coverFees,\n      });\n    }\n  }\n\n  private get frequencyButtonsTemplate(): TemplateResult {\n    return html`\n      <ia-donation-section\n        sectionBadge=\"1\"\n        headline=${msg('Choose a frequency')}\n        badgeMode=${this.formSectionNumberMode}\n      >\n        <ul class=\"frequency-selector\">\n          ${this.frequencyTemplate}\n        </ul>\n      </ia-donation-section>\n    `;\n  }\n\n  private get frequencyCheckboxTemplate(): TemplateResult {\n    return html`\n      <div class=\"checkbox-option-container\">\n        <input\n          type=\"checkbox\"\n          id=\"make-this-monthly\"\n          @input=${this.monthlyCheckboxChecked}\n          .checked=${this.donationInfo.donationType === DonationType.Monthly}\n          tabindex=\"0\"\n        />\n        <label for=\"make-this-monthly\">${msg('Make this monthly')}</label>\n      </div>\n    `;\n  }\n\n  private get coverFeesCheckboxTemplate(): TemplateResult {\n    return html`\n      <div class=\"checkbox-option-container\">\n        <input\n          type=\"checkbox\"\n          id=\"cover-fees\"\n          @input=${this.coverFeesChecked}\n          .checked=${this.donationInfo.coverFees}\n          tabindex=\"0\"\n        />\n        <label for=\"cover-fees\">${this.coverFeesText}</label>\n      </div>\n    `;\n  }\n\n  /** The amount step is 2 when the frequency buttons come first, otherwise 1. */\n  private get amountSelectionSectionNumber(): number {\n    return this.frequencySelectionMode ===\n      EditDonationFrequencySelectionMode.Button\n      ? 2\n      : 1;\n  }\n\n  private get formSectionNumberMode(): DonationSectionBadgeMode {\n    switch (this.stepNumberMode) {\n      case EditDonationStepNumberMode.ShowNumbers:\n        return DonationSectionBadgeMode.ShowBadge;\n      case EditDonationStepNumberMode.HideNumbers:\n        return DonationSectionBadgeMode.HideBadge;\n    }\n  }\n\n  /**\n   * Picks the amount grid's column count, and how many columns the custom\n   * amount field spans, from how many preset amounts there are.\n   */\n  private setupAmountColumnsLayoutConfig(): void {\n    const minimalView =\n      this.customAmountMode === 'hide' &&\n      this.coverFeesCheckboxMode === 'hide' &&\n      this.frequencySelectionMode === EditDonationFrequencySelectionMode.Hide;\n    const amountCount = this.amountOptions.length;\n    let columnCount = 5;\n    let customAmountSpan = 3;\n    switch (amountCount) {\n      case 7:\n        columnCount = 5;\n        customAmountSpan = 3;\n        break;\n      case 6:\n        columnCount = 4;\n        customAmountSpan = 2;\n        break;\n      case 5:\n        columnCount = 4;\n        customAmountSpan = 3;\n        break;\n      case 4:\n        if (minimalView) {\n          columnCount = 4;\n          customAmountSpan = 0;\n          break;\n        }\n        columnCount = 3;\n        customAmountSpan = 2;\n        break;\n      case 3:\n        columnCount = 2;\n        customAmountSpan = 1;\n        break;\n    }\n\n    if (\n      this.amountSelectionLayout ===\n      EditDonationAmountSelectionLayout.SingleLine\n    ) {\n      columnCount = amountCount + 3;\n      customAmountSpan = 3;\n    }\n\n    this.style.setProperty(\n      '--ia-donation-edit-amount-column-count',\n      `${columnCount}`,\n    );\n    this.style.setProperty(\n      '--ia-donation-edit-custom-amount-col-span',\n      `${customAmountSpan}`,\n    );\n  }\n\n  /**\n   * Syncs the radios and the custom field with `donationInfo`. A preset\n   * amount checks its radio and clears the custom field; anything else\n   * selects the custom field and formats the amount into it.\n   */\n  private updateSelectedDonationInfo(): void {\n    // Keep the custom amount selected while the donor is typing in it, even\n    // if the value matches a preset, so the selection doesn't jump to the\n    // preset radio mid-keystroke.\n    // With the custom field hidden both sides would be null, so guard on it\n    // existing first.\n    const typingInCustomAmount =\n      !!this.customAmountInput &&\n      this.shadowRoot?.activeElement === this.customAmountInput;\n    if (\n      !this.isCustomAmount &&\n      !(this.customAmountSelected && typingInCustomAmount)\n    ) {\n      const radioButton = this.shadowRoot?.querySelector<HTMLInputElement>(\n        `input[type=\"radio\"][name=\"${EditDonationSelectionGroup.Amount}\"][value=\"${this.donationInfo.amount}\"]`,\n      );\n      if (radioButton) radioButton.checked = true;\n      this.customAmountSelected = false;\n      this.error = undefined;\n      if (this.customAmountInput) {\n        this.customAmountInput.value = '';\n      }\n    } else {\n      this.customAmountSelected = true;\n      // Leave the field alone while it has focus, the donor may be typing\n      if (!typingInCustomAmount && this.customAmountInput) {\n        this.customAmountInput.value = this.customAmountDisplayValue;\n        const donationInfoStatus = this.getDonationInfoStatus(\n          this.donationInfo.amount,\n        );\n        this.handleDonationInfoStatus(donationInfoStatus);\n      }\n    }\n  }\n\n  private get coverFeesText(): string {\n    const feeAmountString = currency(this.donationInfo.fee, {\n      symbol: '$',\n    }).format();\n\n    return msg(str`I'll generously add ${feeAmountString} to cover fees.`);\n  }\n\n  /**\n   * Formats a dollar amount without cents when it's a whole number and with\n   * them when it isn't: `$5` and `$5.50`.\n   */\n  private formatShortenedAmount(dollars: number): string {\n    const precision = dollars % 1 === 0 ? 0 : 2;\n    return currency(dollars, { symbol: '$', precision }).format();\n  }\n\n  private get frequencyTemplate(): TemplateResult {\n    return html`\n      <li>\n        ${this.getRadioButton({\n          group: EditDonationSelectionGroup.DonationType,\n          value: DonationType.OneTime,\n          displayText: msg('One time'),\n          checked: this.donationInfo.donationType === DonationType.OneTime,\n        })}\n      </li>\n\n      <li>\n        ${this.getRadioButton({\n          group: EditDonationSelectionGroup.DonationType,\n          value: DonationType.Monthly,\n          displayText: msg('Monthly'),\n          checked: this.donationInfo.donationType === DonationType.Monthly,\n        })}\n      </li>\n    `;\n  }\n\n  private get presetAmountsTemplate(): TemplateResult {\n    return html`\n      ${this.amountOptions.map((amount) => {\n        const checked =\n          !this.customAmountSelected && amount === this.donationInfo.amount;\n\n        return html`\n          <li>\n            ${this.getRadioButton({\n              group: EditDonationSelectionGroup.Amount,\n              value: `${amount}`,\n              displayText: this.formatShortenedAmount(amount),\n              checked,\n            })}\n          </li>\n        `;\n      })}\n    `;\n  }\n\n  private getRadioButton(options: {\n    group: EditDonationSelectionGroup;\n    value: string;\n    displayText: string;\n    checked: boolean;\n  }): TemplateResult {\n    const radioId = `${options.group}-${options.value}-option`;\n    return html`\n      <div class=\"selection-button\">\n        <input\n          type=\"radio\"\n          name=${options.group}\n          value=${options.value}\n          id=${radioId}\n          tabindex=\"0\"\n          .checked=${options.checked}\n          @change=${this.radioSelected}\n          @click=${(e: Event): void => {\n            // `change` doesn't fire when the checked radio is clicked again,\n            // so re-selecting the current amount is caught here. It matters\n            // after a custom amount, which unchecks the presets visually.\n            const isAmountSelection =\n              options.group === EditDonationSelectionGroup.Amount;\n            if (isAmountSelection) {\n              const isSameValue =\n                parseFloat(options.value) === this.donationInfo.amount;\n              if (isSameValue) {\n                this.radioSelected(e);\n              }\n            }\n          }}\n        />\n        <label for=${radioId}>${options.displayText}</label>\n      </div>\n    `;\n  }\n\n  private get isCustomAmount(): boolean {\n    return !this.amountOptions.includes(this.donationInfo.amount);\n  }\n\n  private get customAmountDisplayValue(): string {\n    if (!this.isCustomAmount) return '';\n    return currency(this.donationInfo.amount, { symbol: '' }).format();\n  }\n\n  private get customAmountTemplate(): TemplateResult {\n    return html`\n      <div class=\"selection-button\">\n        <input\n          type=\"radio\"\n          name=${EditDonationSelectionGroup.Amount}\n          value=\"custom\"\n          id=\"custom-amount-button\"\n          tabindex=\"0\"\n          @change=${this.customRadioSelected}\n        />\n\n        <label for=\"custom-amount-button\">\n          <span class=\"custom-amount-text\">${msg('Custom: $')}</span\n          ><input\n            type=\"text\"\n            id=\"custom-amount-input\"\n            tabindex=\"-1\"\n            aria-label=${msg('Custom amount in dollars')}\n            value=${this.customAmountDisplayValue}\n            @input=${this.customAmountChanged}\n            @keydown=${this.currencyValidator.keydown}\n            @focus=${this.customAmountFocused}\n            @blur=${this.customAmountBlurred}\n          />\n        </label>\n      </div>\n    `;\n  }\n\n  private customRadioSelected(): void {\n    this.customAmountInput.focus();\n  }\n\n  private customAmountFocused(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    this.customAmountSelected = true;\n    this.handleCustomAmountInput(target.value);\n  }\n\n  /**\n   * Once focus leaves the custom field the mid-keystroke protection is over,\n   * so the UI re-syncs with `donationInfo`: a typed amount equal to a preset\n   * moves to that preset, anything else gets re-formatted in place.\n   */\n  private customAmountBlurred(): void {\n    this.updateSelectedDonationInfo();\n  }\n\n  private coverFeesChecked(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    this.updateDonationInfo({ coverFees: target.checked });\n  }\n\n  private customAmountChanged(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    this.customAmountSelected = true;\n    this.handleCustomAmountInput(target.value);\n  }\n\n  private handleCustomAmountInput(value: string): void {\n    const amount = parseFloat(value);\n    if (isNaN(amount)) {\n      this.dispatchEditDonationError(\n        EditDonationInfoStatus.InvalidDonationAmount,\n      );\n    } else {\n      this.amountChanged(amount);\n    }\n  }\n\n  private handleDonationInfoStatus(status: EditDonationInfoStatus): void {\n    switch (status) {\n      case EditDonationInfoStatus.ValidDonationAmount:\n        this.error = undefined;\n        break;\n      case EditDonationInfoStatus.DonationTooHigh:\n        this.error = msg(html`\n          To make a donation of $10,000 or more, please contact our philanthropy\n          department at\n          <a href=\"mailto:donations@archive.org\">donations@archive.org</a>\n        `);\n        this.dispatchEditDonationError(status);\n        break;\n      case EditDonationInfoStatus.DonationTooLow:\n        if (this.customAmountInput.value.length > 0) {\n          this.error = html`${msg('Please select an amount (minimum $1)')}`;\n        }\n        this.dispatchEditDonationError(status);\n        break;\n      case EditDonationInfoStatus.InvalidDonationAmount:\n        this.error = html`${msg('Please enter a valid donation amount')}`;\n        this.dispatchEditDonationError(status);\n        break;\n    }\n  }\n\n  private amountChanged(amount: number): void {\n    const donationInfoStatus = this.getDonationInfoStatus(amount);\n    this.handleDonationInfoStatus(donationInfoStatus);\n\n    // Only a valid amount makes it into the donation info\n    if (donationInfoStatus === EditDonationInfoStatus.ValidDonationAmount) {\n      this.updateDonationInfo({ amount });\n    }\n  }\n\n  private getDonationInfoStatus(amount: number): EditDonationInfoStatus {\n    if (isNaN(amount)) {\n      return EditDonationInfoStatus.InvalidDonationAmount;\n    }\n\n    if (amount >= 10000) {\n      return EditDonationInfoStatus.DonationTooHigh;\n    }\n\n    if (amount < 1) {\n      return EditDonationInfoStatus.DonationTooLow;\n    }\n\n    return EditDonationInfoStatus.ValidDonationAmount;\n  }\n\n  private radioSelected(e: Event): void {\n    const radioButton = e.target as HTMLInputElement;\n    const group = radioButton.name as EditDonationSelectionGroup;\n    const { value } = radioButton;\n\n    switch (group) {\n      case EditDonationSelectionGroup.Amount:\n        this.presetAmountChanged(parseFloat(value));\n        break;\n      case EditDonationSelectionGroup.DonationType:\n        this.updateDonationInfo({ donationType: value as DonationType });\n        break;\n      default:\n        break;\n    }\n  }\n\n  private monthlyCheckboxChecked(e: Event): void {\n    const isChecked = (e.target as HTMLInputElement).checked;\n    const donationType = isChecked\n      ? DonationType.Monthly\n      : DonationType.OneTime;\n    this.updateDonationInfo({ donationType });\n  }\n\n  private dispatchEditDonationError(error: EditDonationInfoStatus): void {\n    const event = new CustomEvent('editDonationError', {\n      detail: { error },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private presetAmountChanged(amount: number): void {\n    this.error = undefined;\n    this.customAmountSelected = false;\n    if (this.customAmountInput) {\n      this.customAmountInput.value = '';\n    }\n    this.updateDonationInfo({ amount });\n  }\n\n  private updateDonationInfo(options: {\n    donationType?: DonationType;\n    amount?: number;\n    coverFees?: boolean;\n  }): void {\n    const newDonationInfo = new DonationPaymentInfo({\n      donationType: options.donationType ?? this.donationInfo.donationType,\n      amount: options.amount ?? this.donationInfo.amount,\n      coverFees: options.coverFees ?? this.donationInfo.coverFees,\n    });\n\n    this.donationInfo = newDonationInfo;\n\n    const event = new CustomEvent('donationInfoChanged', {\n      detail: { donationInfo: newDonationInfo },\n    });\n    this.dispatchEvent(event);\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 keeps the element self-contained, so it looks the same\n           * whatever the page's root size is. Override it to rescale\n           * everything, sections included.\n           */\n          --donation-edit-base-font-size--: var(\n            --ia-donation-edit-base-font-size,\n            10px\n          );\n\n          --donation-edit-button-border-color--: var(\n            --ia-donation-edit-button-border-color,\n            var(--mid-gray)\n          );\n          --donation-edit-button-grid-gap--: var(\n            --ia-donation-edit-button-grid-gap,\n            var(--donation-edit-base-font-size--)\n          );\n          --donation-edit-button-font-size--: var(\n            --ia-donation-edit-button-font-size,\n            calc(var(--donation-edit-base-font-size--) * 1.6)\n          );\n          --donation-edit-button-font-color--: var(\n            --ia-donation-edit-button-font-color,\n            #000\n          );\n          --donation-edit-button-selected-font-color--: var(\n            --ia-donation-edit-button-selected-font-color,\n            #000\n          );\n          --donation-edit-button-selected-color--: var(\n            --ia-donation-edit-button-selected-color,\n            #f9bf3b\n          );\n          --donation-edit-button-focused-outline-color--: var(\n            --ia-donation-edit-button-focused-outline-color,\n            #7fb3f9\n          );\n          --donation-edit-button-color--: var(\n            --ia-donation-edit-button-color,\n            var(--true-white)\n          );\n          --donation-edit-cover-fees-font-size--: var(\n            --ia-donation-edit-cover-fees-font-size,\n            calc(var(--donation-edit-base-font-size--) * 1.2)\n          );\n          --donation-edit-cover-fees-font-weight--: var(\n            --ia-donation-edit-cover-fees-font-weight,\n            bold\n          );\n          --donation-edit-custom-amount-width--: var(\n            --ia-donation-edit-custom-amount-width,\n            calc(var(--donation-edit-base-font-size--) * 4)\n          );\n          --donation-edit-input-font-color--: var(\n            --ia-donation-edit-input-font-color,\n            var(--mid-gray)\n          );\n          --donation-edit-input-border--: var(\n            --ia-donation-edit-input-border,\n            1px solid #d9d9d9\n          );\n          /* These two are set on the host by the element itself, from the number of amounts */\n          --donation-edit-amount-column-count--: var(\n            --ia-donation-edit-amount-column-count,\n            5\n          );\n          --donation-edit-custom-amount-col-span--: var(\n            --ia-donation-edit-custom-amount-col-span,\n            3\n          );\n          --donation-edit-error-color--: var(--color-danger);\n\n          /* Passed through to the sections */\n          --ia-donation-section-base-font-size: var(\n            --donation-edit-base-font-size--\n          );\n          --ia-donation-section-background-color: var(\n            --ia-donation-edit-background-color,\n            transparent\n          );\n          --ia-donation-section-badge-background-color: var(\n            --ia-donation-edit-badge-background-color,\n            var(--mid-gray)\n          );\n          --ia-donation-section-badge-font-color: var(\n            --ia-donation-edit-badge-font-color,\n            var(--true-white)\n          );\n        }\n\n        .errors {\n          color: var(--donation-edit-error-color--);\n          font-size: calc(var(--donation-edit-base-font-size--) * 1.4);\n          margin-top: var(--padding-sm);\n        }\n\n        ul {\n          list-style: none;\n          margin: 0;\n          padding: 0;\n          display: grid;\n          grid-gap: var(--donation-edit-button-grid-gap--);\n        }\n\n        li {\n          margin: 0;\n          padding: 0;\n          display: inline-block;\n        }\n\n        .frequency-selector {\n          grid-template-columns: repeat(2, 1fr);\n        }\n\n        .amount-selector {\n          grid-template-columns: repeat(\n            var(--donation-edit-amount-column-count--),\n            1fr\n          );\n        }\n\n        .custom-amount {\n          grid-column: span var(--donation-edit-custom-amount-col-span--);\n        }\n\n        .selection-button {\n          height: calc(var(--donation-edit-base-font-size--) * 3);\n        }\n\n        .selection-button label {\n          padding: 0 calc(var(--donation-edit-base-font-size--) * 0.3);\n          display: flex;\n          cursor: pointer;\n          text-align: center;\n          font-size: var(--donation-edit-button-font-size--);\n          font-weight: bold;\n          border: 1px solid var(--donation-edit-button-border-color--);\n          border-radius: 5px;\n          height: 100%;\n          justify-content: center;\n          align-items: center;\n        }\n\n        label[for='custom-amount-button'] {\n          padding: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .custom-amount-text {\n          white-space: nowrap;\n          margin-right: var(--padding-sm);\n        }\n\n        input[type='radio'] {\n          opacity: 0;\n          width: 0;\n          height: 0;\n          position: absolute;\n        }\n\n        input[type='radio'] + label {\n          color: var(--donation-edit-button-font-color--);\n          background-color: var(--donation-edit-button-color--);\n        }\n\n        input[type='radio']:checked + label {\n          color: var(--donation-edit-button-selected-font-color--);\n          background-color: var(--donation-edit-button-selected-color--);\n        }\n\n        input[type='radio']:focus + label {\n          outline: 2px solid var(--donation-edit-button-focused-outline-color--);\n        }\n\n        .checkbox-options {\n          margin-top: var(--donation-edit-base-font-size--);\n        }\n\n        .checkbox-option-container {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .checkbox-option-container input {\n          width: calc(var(--donation-edit-base-font-size--) * 2);\n        }\n\n        .checkbox-option-container label {\n          font-size: var(--donation-edit-cover-fees-font-size--);\n          font-weight: var(--donation-edit-cover-fees-font-weight--);\n          flex: 1;\n        }\n\n        #custom-amount-input {\n          width: var(--donation-edit-custom-amount-width--);\n          font-size: var(--donation-edit-button-font-size--);\n          font-weight: bold;\n          color: var(--donation-edit-input-font-color--);\n          padding: calc(var(--donation-edit-base-font-size--) * 0.1);\n          border: var(--donation-edit-input-border--);\n          appearance: none;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -0,0 +1,31 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { type DonationPaymentInfo } from '../models/donation-payment-info.js';
+import { EditDonationAmountSelectionLayout, EditDonationFrequencySelectionMode } from './ia-donation-edit-donation.js';
+import './ia-donation-edit-donation.js';
+import './ia-donation-summary.js';
+/** Whether the top of the form shows the editable amount picker or the collapsed summary. */
+export declare const DonationHeaderMode: {
+    readonly Summary: "summary";
+    readonly Edit: "edit";
+};
+export type DonationHeaderMode = (typeof DonationHeaderMode)[keyof typeof DonationHeaderMode];
+/**
+ * The top of the donation form: the frequency and amount picker, or a
+ * one-line summary of the choice with an edit button. Relays the picker's
+ * events upward.
+ */
+export declare class IADonationHeader extends LitElement {
+    donationInfo?: DonationPaymentInfo;
+    mode: DonationHeaderMode;
+    amountOptions: number[];
+    amountSelectionLayout: EditDonationAmountSelectionLayout;
+    frequencySelectionMode: EditDonationFrequencySelectionMode;
+    render(): TemplateResult;
+    private get editDonationTemplate();
+    private get donationSummaryTemplate();
+    private donationInfoChanged;
+    private editDonationError;
+    private summaryEditClicked;
+    private showSummaryClicked;
+}
+//# sourceMappingURL=ia-donation-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-header.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,iCAAiC,EACjC,kCAAkC,EACnC,MAAM,6BAA6B,CAAC;AACrC,OAAO,6BAA6B,CAAC;AACrC,OAAO,uBAAuB,CAAC;AAE/B,6FAA6F;AAC7F,eAAO,MAAM,kBAAkB;;;CAGrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAC5B,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAC;AAE/D;;;;GAIG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAClB,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC,IAAI,EAAE,kBAAkB,CAC1B;IAEC,aAAa,EAAE,MAAM,EAAE,CAA0B;IAG5E,qBAAqB,EAAE,iCAAiC,CACV;IAG9C,sBAAsB,EAAE,kCAAkC,CACd;IAE5C,MAAM,IAAI,cAAc;IASxB,OAAO,KAAK,oBAAoB,GAa/B;IAED,OAAO,KAAK,uBAAuB,GAQlC;IAED,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,kBAAkB;CAG3B"}

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

@@ -0,0 +1,93 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../../util/custom-element.js';
+import { defaultDonationAmounts, } from '../models/donation-payment-info.js';
+import { EditDonationAmountSelectionLayout, EditDonationFrequencySelectionMode, } from './ia-donation-edit-donation.js';
+import './ia-donation-edit-donation.js';
+import './ia-donation-summary.js';
+/** Whether the top of the form shows the editable amount picker or the collapsed summary. */
+export const DonationHeaderMode = {
+    Summary: 'summary',
+    Edit: 'edit',
+};
+/**
+ * The top of the donation form: the frequency and amount picker, or a
+ * one-line summary of the choice with an edit button. Relays the picker's
+ * events upward.
+ */
+let IADonationHeader = class IADonationHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.mode = DonationHeaderMode.Edit;
+        this.amountOptions = defaultDonationAmounts;
+        this.amountSelectionLayout = EditDonationAmountSelectionLayout.MultiLine;
+        this.frequencySelectionMode = EditDonationFrequencySelectionMode.Button;
+    }
+    render() {
+        switch (this.mode) {
+            case DonationHeaderMode.Summary:
+                return this.donationSummaryTemplate;
+            case DonationHeaderMode.Edit:
+                return this.editDonationTemplate;
+        }
+    }
+    get editDonationTemplate() {
+        return html `
+      <ia-donation-edit-donation
+        .donationInfo=${this.donationInfo}
+        .amountOptions=${this.amountOptions}
+        .amountSelectionLayout=${this.amountSelectionLayout}
+        .frequencySelectionMode=${this.frequencySelectionMode}
+        @donationInfoChanged=${this.donationInfoChanged}
+        @showSummaryClicked=${this.showSummaryClicked}
+        @editDonationError=${this.editDonationError}
+      >
+      </ia-donation-edit-donation>
+    `;
+    }
+    get donationSummaryTemplate() {
+        return html `
+      <ia-donation-summary
+        .donationInfo=${this.donationInfo}
+        @editClicked=${this.summaryEditClicked}
+      >
+      </ia-donation-summary>
+    `;
+    }
+    donationInfoChanged(e) {
+        this.donationInfo = e.detail.donationInfo;
+        this.dispatchEvent(new CustomEvent('donationInfoChanged', {
+            detail: { donationInfo: this.donationInfo },
+        }));
+    }
+    editDonationError(e) {
+        this.dispatchEvent(new CustomEvent('editDonationError', { detail: e.detail }));
+    }
+    summaryEditClicked() {
+        this.mode = DonationHeaderMode.Edit;
+    }
+    showSummaryClicked() {
+        this.mode = DonationHeaderMode.Summary;
+    }
+};
+__decorate([
+    property({ type: Object })
+], IADonationHeader.prototype, "donationInfo", void 0);
+__decorate([
+    property({ type: String })
+], IADonationHeader.prototype, "mode", void 0);
+__decorate([
+    property({ type: Array })
+], IADonationHeader.prototype, "amountOptions", void 0);
+__decorate([
+    property({ type: String })
+], IADonationHeader.prototype, "amountSelectionLayout", void 0);
+__decorate([
+    property({ type: String })
+], IADonationHeader.prototype, "frequencySelectionMode", void 0);
+IADonationHeader = __decorate([
+    customElement('ia-donation-header')
+], IADonationHeader);
+export { IADonationHeader };
+//# sourceMappingURL=ia-donation-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-header.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EACL,sBAAsB,GAEvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,iCAAiC,EACjC,kCAAkC,GACnC,MAAM,6BAA6B,CAAC;AACrC,OAAO,6BAA6B,CAAC;AACrC,OAAO,uBAAuB,CAAC;AAE/B,6FAA6F;AAC7F,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;CACJ,CAAC;AAKX;;;;GAIG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAGuB,SAAI,GAC9B,kBAAkB,CAAC,IAAI,CAAC;QAEC,kBAAa,GAAa,sBAAsB,CAAC;QAG5E,0BAAqB,GACnB,iCAAiC,CAAC,SAAS,CAAC;QAG9C,2BAAsB,GACpB,kCAAkC,CAAC,MAAM,CAAC;IA0D9C,CAAC;IAxDC,MAAM;QACJ,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,kBAAkB,CAAC,OAAO;gBAC7B,OAAO,IAAI,CAAC,uBAAuB,CAAC;YACtC,KAAK,kBAAkB,CAAC,IAAI;gBAC1B,OAAO,IAAI,CAAC,oBAAoB,CAAC;QACrC,CAAC;IACH,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;;wBAES,IAAI,CAAC,YAAY;yBAChB,IAAI,CAAC,aAAa;iCACV,IAAI,CAAC,qBAAqB;kCACzB,IAAI,CAAC,sBAAsB;+BAC9B,IAAI,CAAC,mBAAmB;8BACzB,IAAI,CAAC,kBAAkB;6BACxB,IAAI,CAAC,iBAAiB;;;KAG9C,CAAC;IACJ,CAAC;IAED,IAAY,uBAAuB;QACjC,OAAO,IAAI,CAAA;;wBAES,IAAI,CAAC,YAAY;uBAClB,IAAI,CAAC,kBAAkB;;;KAGzC,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,CAAc;QACxC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,YAAmC,CAAC;QACjE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;YACrC,MAAM,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE;SAC5C,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,CAAc;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAC3D,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC;IACtC,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAC,OAAO,CAAC;IACzC,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACD;AAEC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uDAAkD;AAG5E;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAEmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAEiB;AAdjC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAwE5B","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport {\n  defaultDonationAmounts,\n  type DonationPaymentInfo,\n} from '../models/donation-payment-info';\nimport {\n  EditDonationAmountSelectionLayout,\n  EditDonationFrequencySelectionMode,\n} from './ia-donation-edit-donation';\nimport './ia-donation-edit-donation';\nimport './ia-donation-summary';\n\n/** Whether the top of the form shows the editable amount picker or the collapsed summary. */\nexport const DonationHeaderMode = {\n  Summary: 'summary',\n  Edit: 'edit',\n} as const;\n\nexport type DonationHeaderMode =\n  (typeof DonationHeaderMode)[keyof typeof DonationHeaderMode];\n\n/**\n * The top of the donation form: the frequency and amount picker, or a\n * one-line summary of the choice with an edit button. Relays the picker's\n * events upward.\n */\n@customElement('ia-donation-header')\nexport class IADonationHeader extends LitElement {\n  @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n  @property({ type: String }) mode: DonationHeaderMode =\n    DonationHeaderMode.Edit;\n\n  @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n  @property({ type: String })\n  amountSelectionLayout: EditDonationAmountSelectionLayout =\n    EditDonationAmountSelectionLayout.MultiLine;\n\n  @property({ type: String })\n  frequencySelectionMode: EditDonationFrequencySelectionMode =\n    EditDonationFrequencySelectionMode.Button;\n\n  render(): TemplateResult {\n    switch (this.mode) {\n      case DonationHeaderMode.Summary:\n        return this.donationSummaryTemplate;\n      case DonationHeaderMode.Edit:\n        return this.editDonationTemplate;\n    }\n  }\n\n  private get editDonationTemplate(): TemplateResult {\n    return html`\n      <ia-donation-edit-donation\n        .donationInfo=${this.donationInfo}\n        .amountOptions=${this.amountOptions}\n        .amountSelectionLayout=${this.amountSelectionLayout}\n        .frequencySelectionMode=${this.frequencySelectionMode}\n        @donationInfoChanged=${this.donationInfoChanged}\n        @showSummaryClicked=${this.showSummaryClicked}\n        @editDonationError=${this.editDonationError}\n      >\n      </ia-donation-edit-donation>\n    `;\n  }\n\n  private get donationSummaryTemplate(): TemplateResult {\n    return html`\n      <ia-donation-summary\n        .donationInfo=${this.donationInfo}\n        @editClicked=${this.summaryEditClicked}\n      >\n      </ia-donation-summary>\n    `;\n  }\n\n  private donationInfoChanged(e: CustomEvent): void {\n    this.donationInfo = e.detail.donationInfo as DonationPaymentInfo;\n    this.dispatchEvent(\n      new CustomEvent('donationInfoChanged', {\n        detail: { donationInfo: this.donationInfo },\n      }),\n    );\n  }\n\n  private editDonationError(e: CustomEvent): void {\n    this.dispatchEvent(\n      new CustomEvent('editDonationError', { detail: e.detail }),\n    );\n  }\n\n  private summaryEditClicked(): void {\n    this.mode = DonationHeaderMode.Edit;\n  }\n\n  private showSummaryClicked(): void {\n    this.mode = DonationHeaderMode.Summary;\n  }\n}\n"]}

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

@@ -0,0 +1,33 @@
+import { LitElement, type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import type { PaymentProvidersInterface } from '../braintree/payment-providers-interface.js';
+/**
+ * The row of payment method buttons. Each provider button asks its handler
+ * whether the browser supports it and hides itself if not. Once one is picked
+ * the others collapse behind a "Change payment method" button.
+ *
+ * The real PayPal button is slotted in from the light DOM (it can't live in
+ * a shadow root); the local PayPal button sits over it to catch clicks while
+ * the donation amount is invalid.
+ */
+export declare class IADonationPaymentSelector extends LitElement {
+    donationInfoValid: boolean;
+    paymentProviders?: PaymentProvidersInterface;
+    private applePayMode;
+    private googlePayMode;
+    private venmoMode;
+    private payPalMode;
+    private paymentModeSelected?;
+    render(): TemplateResult;
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    showPaypalButton(): void;
+    /** Asks each provider whether this browser can use it, and shows or hides its button. */
+    private setButtonVisibility;
+    private googlePaySelected;
+    private applePaySelected;
+    private venmoSelected;
+    private creditCardSelected;
+    private localPaypalButtonClicked;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-donation-payment-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-payment-selector.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-payment-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AAe1F;;;;;;;;GAQG;AACH,qBAEa,yBAA0B,SAAQ,UAAU;IAC1B,iBAAiB,UAAQ;IAE1B,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAEhE,OAAO,CAAC,YAAY,CAAgD;IAEpE,OAAO,CAAC,aAAa,CAAgD;IAErE,OAAO,CAAC,SAAS,CAAgD;IAEjE,OAAO,CAAC,UAAU,CAAgD;IAElE,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAEnD,MAAM,IAAI,cAAc;IA6GxB,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,gBAAgB,IAAI,IAAI;IAIxB,yFAAyF;YAC3E,mBAAmB;IA4CjC,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,wBAAwB;IAIhC,MAAM,KAAK,MAAM,IAAI,cAAc,CA+IlC;CACF"}

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

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