npm - @internetarchive/donation-form - Versions diffs - 0.5.20 → 0.5.21-a2 - Mend

@internetarchive/donation-form 0.5.20 → 0.5.21-a2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

package/dist/src/donation-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"donation-form.js","sourceRoot":"","sources":["../../src/donation-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport lockImg from '@internetarchive/icon-lock';\n\n// we have to import the registered component independently from the definition below\n// because inside each of these files, we're registering the custom element inside\n// these files and by simply importing the class name, you lose that behavior\n// See https://github.com/microsoft/TypeScript/issues/9191 for more discussion\nimport './form-elements/payment-selector';\nimport './form-elements/header/donation-form-header';\n\nimport { DonationFormHeader } from './form-elements/header/donation-form-header';\nimport { PaymentSelector } from './form-elements/payment-selector';\n\nimport { BraintreeManagerInterface } from './braintree-manager/braintree-interfaces';\n\nimport {\n DonationRequest,\n DonationPaymentInfo,\n PaymentProvider,\n DonorContactInfo,\n DonationType,\n defaultDonationAmounts,\n} from '@internetarchive/donation-form-data-models';\n\nimport { PaymentFlowHandlersInterface } from './payment-flow-handlers/payment-flow-handlers';\n\nimport {\n EditDonationAmountSelectionLayout,\n EditDonationFrequencySelectionMode,\n} from '@internetarchive/donation-form-edit-donation';\n\nimport '@internetarchive/donation-form-section';\nimport {\n DonationFormSection,\n DonationFormSectionBadgeMode,\n} from '@internetarchive/donation-form-section';\nimport { UpsellModalCTAMode } from './modals/upsell-modal-content';\nimport { ContactForm } from './form-elements/contact-form/contact-form';\nimport './form-elements/total-amount';\n\n@customElement('donation-form')\nexport class DonationForm extends LitElement {\n @property({ type: Object }) braintreeManager: BraintreeManagerInterface \| undefined;\n\n @property({ type: Object }) paymentFlowHandlers: PaymentFlowHandlersInterface \| undefined;\n\n @property({ type: Object }) donationRequest: DonationRequest \| undefined;\n\n @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n @property({ type: Object }) contactForm?: ContactForm;\n\n @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n @property({ type: String }) amountSelectionLayout: EditDonationAmountSelectionLayout =\n EditDonationAmountSelectionLayout.MultiLine;\n\n @property({ type: String }) frequencySelectionMode: EditDonationFrequencySelectionMode =\n EditDonationFrequencySelectionMode.Button;\n\n @property({ type: Boolean }) private creditCardVisible = false;\n\n @property({ type: Boolean }) private contactFormVisible = false;\n\n @property({ type: Boolean }) private donationInfoValid = true;\n\n @property({ type: String }) private selectedPaymentProvider?: PaymentProvider;\n\n @query('#contactFormSection') contactFormSection?: DonationFormSection;\n\n @query('donation-form-header') donationFormHeader!: DonationFormHeader;\n\n @query('payment-selector') paymentSelector!: PaymentSelector;\n\n private paypalButtonNeedsRender = true;\n\n /** @inheritdoc /\n render(): TemplateResult {\n return html`\n <donation-form-header\n .amountOptions=${this.amountOptions}\n .amountSelectionLayout=${this.amountSelectionLayout}\n .frequencySelectionMode=${this.frequencySelectionMode}\n @donationInfoChanged=${this.donationInfoChanged}\n @editDonationError=${this.editDonationError}\n >\n </donation-form-header>\n\n <donation-form-section\n .badgeMode=${DonationFormSectionBadgeMode.HideBadgeLeaveSpacing}\n id=\"total-amount-section\"\n >\n <donation-form-total-amount .donationInfo=${this.donationInfo}>\n </donation-form-total-amount>\n </donation-form-section>\n\n <donation-form-section\n .sectionBadge=${this.paymentSelectorNumberingStart}\n headline=\"Choose a payment method\"\n >\n <payment-selector\n .paymentProviders=${this.braintreeManager?.paymentProviders}\n @firstUpdated=${this.paymentSelectorFirstUpdated}\n @creditCardSelected=${this.creditCardSelected}\n @venmoSelected=${this.venmoSelected}\n @applePaySelected=${this.applePaySelected}\n @googlePaySelected=${this.googlePaySelected}\n @paypalBlockerSelected=${this.paypalBlockerSelected}\n tabindex=\"0\"\n >\n <slot name=\"paypal-button\" slot=\"paypal-button\"></slot>\n </payment-selector>\n </donation-form-section>\n\n <div class=\"contact-form-section ${this.contactFormVisible ? '' : 'hidden'}\">\n ${this.contactFormSectionTemplate}\n </div>\n <slot name=\"recaptcha\"></slot>\n `;\n }\n\n async showConfirmationModalDev(options: {\n donationType: DonationType;\n amount: number;\n currencyType: string;\n cancelDonationCB: Function;\n confirmDonationCB: Function;\n }): Promise<void> {\n this.paymentFlowHandlers?.showConfirmationStepModal(options);\n }\n\n /\n This is a developer convenience method that allows us to show the upsell modal without going\n * through the purchasing flow. If it's showing the PayPal button, it will trigger\n * the PayPal button render\n \n @param {{\n * oneTimeAmount: number;\n * ctaMode?: UpsellModalCTAMode;\n * yesSelected?: (amount: number) => void;\n * noSelected?: () => void;\n * amountChanged?: (amount: number) => void;\n * userClosedModalCallback?: () => void;\n * }} options\n * @returns {Promise<void>}\n * @memberof DonationForm\n /\n async showUpsellModalDev(options: {\n oneTimeAmount: number;\n ctaMode?: UpsellModalCTAMode;\n yesSelected?: (amount: number) => void;\n noSelected?: () => void;\n amountChanged?: (amount: number) => void;\n userClosedModalCallback?: () => void;\n }): Promise<void> {\n this.paymentFlowHandlers?.showUpsellModal(options);\n\n if (options.ctaMode === UpsellModalCTAMode.PayPalUpsellSlot) {\n const handler = await this.braintreeManager?.paymentProviders.paypalHandler.get();\n const donationInfo = new DonationPaymentInfo({\n amount: options.oneTimeAmount,\n donationType: DonationType.OneTime,\n coverFees: false,\n });\n handler?.renderPayPalButton({\n selector: '#paypal-upsell-button',\n style: {\n color: 'blue' as paypal.ButtonColorOption,\n label: 'paypal' as paypal.ButtonLabelOption,\n shape: 'rect' as paypal.ButtonShapeOption,\n size: 'responsive' as paypal.ButtonSizeOption,\n tagline: false,\n },\n donationInfo: donationInfo,\n });\n }\n }\n\n get contactFormSectionTemplate(): TemplateResult {\n return html`\n <donation-form-section\n .sectionBadge=${this.paymentSelectorNumberingStart + 1}\n headline=\"Enter payment information\"\n id=\"contactFormSection\"\n >\n <slot name=\"contact-form\"></slot>\n <div class=\"credit-card-fields\" class=\"${this.creditCardVisible ? '' : 'hidden'}\">\n <slot name=\"braintree-hosted-fields\"></slot>\n </div>\n </donation-form-section>\n\n <donation-form-section .sectionBadge=${this.paymentSelectorNumberingStart + 2}>\n <slot name=\"recaptcha\"></slot>\n <button id=\"donate-button\" @click=${this.donateClicked}>\n Donate\n </button>\n\n <div class=\"secure-process-note\">\n ${lockImg} Your payment will be securely processed\n </div>\n </donation-form-section>\n `;\n }\n\n /\n Where to start the numbering of the payment selector\n \n - If we show the frequency selector in button mode, it becomes section 1, which makes\n * the amount selection section 2, and the payment selector section 3.\n * - If we show the frequency selector in checkbox mode, it is no longer section 1. The amount\n * selector becomes section 1 and the payment selector becomes section 2.\n \n Visually:\n \n Button Mode:\n * 1. Frequency selector\n * 2. Amount selector\n * 3. Payment selector\n * 4. Contact info\n * 5. Donate button\n \n Checkbox Mode:\n * 1. Amount selector (including the monthly checkbox)\n * 2. Payment selector <-- changes from 3 to 2\n * 3. Contact info <-- changes from 4 to 3\n * 4. Donate button <-- changes from 5 to 4\n \n @readonly\n * @private\n * @type {number}\n * @memberof DonationForm\n /\n private get paymentSelectorNumberingStart(): number {\n return this.frequencySelectionMode === EditDonationFrequencySelectionMode.Button ? 3 : 2;\n }\n\n private editDonationError(): void {\n this.donationInfoValid = false;\n }\n\n private paymentSelectorFirstUpdated(): void {\n if (this.paymentFlowHandlers?.paypalHandler) {\n this.renderPayPalButtonIfNeeded();\n }\n }\n\n private applePaySelected(e: CustomEvent): void {\n this.selectedPaymentProvider = PaymentProvider.ApplePay;\n this.contactFormVisible = false;\n this.creditCardVisible = false;\n\n if (!this.donationInfoValid) {\n this.showInvalidDonationInfoAlert();\n return;\n }\n\n const originalEvent = e.detail.originalEvent;\n this.donationInfo &&\n this.paymentFlowHandlers?.applePayHandler?.paymentInitiated(this.donationInfo, originalEvent);\n this.emitPaymentFlowStartedEvent();\n }\n\n private googlePaySelected(): void {\n this.selectedPaymentProvider = PaymentProvider.GooglePay;\n this.contactFormVisible = false;\n this.creditCardVisible = false;\n\n if (!this.donationInfoValid) {\n this.showInvalidDonationInfoAlert();\n } else {\n this.donationInfo &&\n this.paymentFlowHandlers?.googlePayHandler?.paymentInitiated(this.donationInfo);\n this.emitPaymentFlowStartedEvent();\n }\n }\n\n private async creditCardSelected(): Promise<void> {\n if (!this.donationInfoValid) {\n this.showInvalidDonationInfoAlert();\n return;\n }\n this.selectedPaymentProvider = PaymentProvider.CreditCard;\n this.contactFormVisible = true;\n this.creditCardVisible = true;\n this.focusContactForm();\n }\n\n private async venmoSelected(): Promise<void> {\n if (!this.donationInfoValid) {\n this.showInvalidDonationInfoAlert();\n return;\n }\n this.selectedPaymentProvider = PaymentProvider.Venmo;\n this.contactFormVisible = true;\n this.creditCardVisible = false;\n this.focusContactForm();\n }\n\n private paypalBlockerSelected(): void {\n this.contactFormVisible = false;\n this.creditCardVisible = false;\n this.showInvalidDonationInfoAlert();\n }\n\n private async focusContactForm(): Promise<void> {\n await this.updateComplete;\n if (this.contactFormSection) {\n this.contactForm?.focus();\n }\n }\n\n private async donateClicked(): Promise<void> {\n if (!this.contactForm) {\n alert('Please enter contact info.');\n return;\n }\n if (!this.donationInfoValid \|\| !this.donationInfo) {\n this.showInvalidDonationInfoAlert();\n return;\n }\n\n const contactInfo = this.contactForm.donorContactInfo;\n\n switch (this.selectedPaymentProvider) {\n case PaymentProvider.CreditCard:\n this.handleCreditCardDonationFlow(contactInfo, this.donationInfo);\n break;\n case PaymentProvider.Venmo:\n this.handleVenmoDonationFlow(contactInfo, this.donationInfo);\n break;\n }\n }\n\n private async handleCreditCardDonationFlow(\n contactInfo: DonorContactInfo,\n donationInfo: DonationPaymentInfo,\n ): Promise<void> {\n const creditCardFlowHandler = this.paymentFlowHandlers?.creditCardHandler;\n const creditCardHandler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n creditCardHandler?.hideErrorMessage();\n const valid = this.contactForm?.reportValidity();\n const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();\n\n if (!valid \|\| hostedFieldsResponse === undefined) {\n return;\n }\n\n this.emitPaymentFlowStartedEvent();\n creditCardFlowHandler?.paymentInitiated(hostedFieldsResponse, donationInfo, contactInfo);\n }\n\n private async handleVenmoDonationFlow(\n contactInfo: DonorContactInfo,\n donationInfo: DonationPaymentInfo,\n ): Promise<void> {\n const valid = this.contactForm?.reportValidity();\n if (!valid) {\n return;\n }\n this.paymentFlowHandlers?.venmoHandler?.paymentInitiated(contactInfo, donationInfo);\n }\n\n private emitPaymentFlowStartedEvent(): void {\n if (!this.selectedPaymentProvider) {\n return;\n }\n const event = new CustomEvent('paymentFlowStarted', {\n detail: { paymentProvider: this.selectedPaymentProvider },\n });\n this.dispatchEvent(event);\n }\n\n private emitPaymentFlowConfirmedEvent(): void {\n if (!this.selectedPaymentProvider) {\n return;\n }\n const event = new CustomEvent('paymentFlowConfirmed', {\n detail: { paymentProvider: this.selectedPaymentProvider },\n });\n this.dispatchEvent(event);\n }\n\n private emitPaymentFlowCancelledEvent(): void {\n if (!this.selectedPaymentProvider) {\n return;\n }\n const event = new CustomEvent('paymentFlowCancelled', {\n detail: { paymentProvider: this.selectedPaymentProvider },\n });\n this.dispatchEvent(event);\n }\n\n private emitPaymentFlowErrorEvent(error?: string): void {\n if (!this.selectedPaymentProvider) {\n return;\n }\n const event = new CustomEvent('paymentFlowError', {\n detail: { paymentProvider: this.selectedPaymentProvider, error: error },\n });\n this.dispatchEvent(event);\n }\n\n private showInvalidDonationInfoAlert(): void {\n alert('Please enter a valid donation amount.');\n }\n\n private async renderPayPalButtonIfNeeded(): Promise<void> {\n if (!this.paypalButtonNeedsRender) {\n return;\n }\n this.paypalButtonNeedsRender = false;\n this.donationInfo &&\n (await this.paymentFlowHandlers?.paypalHandler?.renderPayPalButton(this.donationInfo));\n this.paymentSelector.showPaypalButton();\n }\n\n updated(changedProperties: PropertyValues): void {\n if (changedProperties.has('donationInfo') && this.donationInfo) {\n // The PayPal button has a standalone datasource since we don't initiate the payment\n // through code so it has to have the donation info ready when the user taps the button.\n this.paymentFlowHandlers?.paypalHandler?.updateDonationInfo(this.donationInfo);\n this.donationFormHeader.donationInfo = this.donationInfo;\n }\n\n if (\n (changedProperties.has('paymentFlowHandlers') \|\| changedProperties.has('donationInfo')) &&\n this.donationInfo &&\n this.paymentFlowHandlers\n ) {\n this.setupFlowHandlers();\n }\n\n if (changedProperties.has('donationInfoValid')) {\n this.paymentSelector.donationInfoValid = this.donationInfoValid;\n }\n\n if (changedProperties.has('selectedPaymentProvider')) {\n const event = new CustomEvent('paymentProviderSelected', {\n detail: {\n paymentProvider: this.selectedPaymentProvider,\n previousPaymentProvider: changedProperties.get('selectedPaymentProvider'),\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private flowHandlersConfigured = false;\n\n private setupFlowHandlers(): void {\n if (this.flowHandlersConfigured) {\n return;\n }\n this.flowHandlersConfigured = true;\n this.bindFlowListenerEvents();\n this.renderPayPalButtonIfNeeded();\n this.donationInfo &&\n this.paymentFlowHandlers?.paypalHandler?.updateDonationInfo(this.donationInfo);\n }\n\n private flowHandlerListenersBound = false;\n\n private bindFlowListenerEvents(): void {\n if (this.flowHandlerListenersBound) {\n return;\n }\n this.flowHandlerListenersBound = true;\n\n this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentStarted', () => {\n this.selectedPaymentProvider = PaymentProvider.PayPal;\n this.emitPaymentFlowStartedEvent();\n });\n this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentConfirmed', () => {\n this.selectedPaymentProvider = PaymentProvider.PayPal;\n this.emitPaymentFlowConfirmedEvent();\n });\n this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentCancelled', () => {\n this.selectedPaymentProvider = PaymentProvider.PayPal;\n this.emitPaymentFlowCancelledEvent();\n });\n this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentError', (datasource, error) => {\n this.selectedPaymentProvider = PaymentProvider.PayPal;\n this.emitPaymentFlowErrorEvent(error);\n });\n\n this.paymentFlowHandlers?.googlePayHandler?.on('paymentCancelled', () => {\n this.selectedPaymentProvider = PaymentProvider.GooglePay;\n this.emitPaymentFlowCancelledEvent();\n });\n }\n\n private donationInfoChanged(e: CustomEvent): void {\n const donationInfo: DonationPaymentInfo = e.detail.donationInfo;\n this.donationInfo = new DonationPaymentInfo({\n amount: donationInfo.amount,\n donationType: donationInfo.donationType,\n coverFees: donationInfo.coverFees,\n });\n this.donationInfoValid = true;\n const event = new CustomEvent('donationInfoChanged', { detail: { donationInfo } });\n this.dispatchEvent(event);\n }\n\n /* @inheritdoc */\n static get styles(): CSSResult {\n const donateButtonFontSize = css`var(--donateButtonFontSize, 2.6rem)`;\n const donateButtonHeight = css`var(--donateButtonHeight, 4rem)`;\n const donateButtonColor = css`var(--donateButtonColor, rgba(49, 164, 129, 1))`;\n const donateButtonTextColor = css`var(--donateButtonTextColor, #fff)`;\n const donateButtonHoverColor = css`var(--donateButtonHoverColor, rgba(39, 131, 103, 1))`;\n const totalAmountTopMargin = css`var(--donateTotalAmountTopMargin, 1.5rem)`;\n const totalAmountBottomMargin = css`var(--donateTotalAmountBottomMargin, 1.2rem)`;\n\n return css`\n h1 {\n margin: 0;\n padding: 0;\n }\n\n .hidden {\n display: none;\n }\n\n .secure-process-note {\n margin-top: 0.5em;\n font-size: 0.75em;\n text-align: center;\n }\n\n .secure-process-note svg {\n width: 1.2rem;\n height: 1.5rem;\n vertical-align: bottom;\n }\n\n #donate-button {\n width: 100%;\n appearance: none;\n -webkit-appearance: none;\n font-size: ${donateButtonFontSize};\n font-weight: bold;\n text-align: center;\n color: ${donateButtonTextColor};\n cursor: pointer;\n border: none;\n border-radius: 5px;\n background-color: ${donateButtonColor};\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n height: ${donateButtonHeight};\n }\n\n #donate-button:hover {\n background-color: ${donateButtonHoverColor};\n }\n\n #total-amount-section {\n display: block;\n margin-top: ${totalAmountTopMargin};\n margin-bottom: ${totalAmountBottomMargin};\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"donation-form.js","sourceRoot":"","sources":["../../src/donation-form.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/ban-types /\nimport { LitElement, html, css, CSSResult, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport lockImg from '@internetarchive/icon-lock/index.js';\n\n// we have to import the registered component independently from the definition below\n// because inside each of these files, we're registering the custom element inside\n// these files and by simply importing the class name, you lose that behavior\n// See https://github.com/microsoft/TypeScript/issues/9191 for more discussion\nimport './form-elements/payment-selector';\nimport './form-elements/header/donation-form-header';\n\nimport { DonationFormHeader } from './form-elements/header/donation-form-header';\nimport { PaymentSelector } from './form-elements/payment-selector';\n\nimport { BraintreeManagerInterface } from './braintree-manager/braintree-interfaces';\n\nimport {\n DonationRequest,\n DonationPaymentInfo,\n PaymentProvider,\n DonorContactInfo,\n DonationType,\n defaultDonationAmounts,\n} from '@internetarchive/donation-form-data-models';\n\nimport { PaymentFlowHandlersInterface } from './payment-flow-handlers/payment-flow-handlers';\n\nimport {\n EditDonationAmountSelectionLayout,\n EditDonationFrequencySelectionMode,\n} from '@internetarchive/donation-form-edit-donation';\n\nimport '@internetarchive/donation-form-section';\nimport {\n DonationFormSection,\n DonationFormSectionBadgeMode,\n} from '@internetarchive/donation-form-section';\nimport { UpsellModalCTAMode } from './modals/upsell-modal-content';\nimport { ContactForm } from './form-elements/contact-form/contact-form';\nimport './form-elements/total-amount';\n\n@customElement('donation-form')\nexport class DonationForm extends LitElement {\n @property({ type: Object }) braintreeManager: BraintreeManagerInterface \| undefined;\n\n @property({ type: Object }) paymentFlowHandlers: PaymentFlowHandlersInterface \| undefined;\n\n @property({ type: Object }) donationRequest: DonationRequest \| undefined;\n\n @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n @property({ type: Object }) contactForm?: ContactForm;\n\n @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n @property({ type: String }) amountSelectionLayout: EditDonationAmountSelectionLayout =\n EditDonationAmountSelectionLayout.MultiLine;\n\n @property({ type: String }) frequencySelectionMode: EditDonationFrequencySelectionMode =\n EditDonationFrequencySelectionMode.Button;\n\n @property({ type: Boolean }) private creditCardVisible = false;\n\n @property({ type: Boolean }) private contactFormVisible = false;\n\n @property({ type: Boolean }) private donationInfoValid = true;\n\n @property({ type: String }) private selectedPaymentProvider?: PaymentProvider;\n\n @query('#contactFormSection') contactFormSection?: DonationFormSection;\n\n @query('donation-form-header') donationFormHeader!: DonationFormHeader;\n\n @query('payment-selector') paymentSelector!: PaymentSelector;\n\n private paypalButtonNeedsRender = true;\n\n /* @inheritdoc /\n render(): TemplateResult {\n return html`\n <donation-form-header\n .amountOptions=${this.amountOptions}\n .amountSelectionLayout=${this.amountSelectionLayout}\n .frequencySelectionMode=${this.frequencySelectionMode}\n @donationInfoChanged=${this.donationInfoChanged}\n @editDonationError=${this.editDonationError}\n >\n </donation-form-header>\n\n <donation-form-section\n .badgeMode=${DonationFormSectionBadgeMode.HideBadgeLeaveSpacing}\n id=\"total-amount-section\"\n >\n <donation-form-total-amount .donationInfo=${this.donationInfo}>\n </donation-form-total-amount>\n </donation-form-section>\n\n <donation-form-section\n .sectionBadge=${this.paymentSelectorNumberingStart}\n headline=\"Choose a payment method\"\n >\n <payment-selector\n .paymentProviders=${this.braintreeManager?.paymentProviders}\n @firstUpdated=${this.paymentSelectorFirstUpdated}\n @creditCardSelected=${this.creditCardSelected}\n @venmoSelected=${this.venmoSelected}\n @applePaySelected=${this.applePaySelected}\n @googlePaySelected=${this.googlePaySelected}\n @paypalBlockerSelected=${this.paypalBlockerSelected}\n tabindex=\"0\"\n >\n <slot name=\"paypal-button\" slot=\"paypal-button\"></slot>\n </payment-selector>\n </donation-form-section>\n\n <div class=\"contact-form-section ${this.contactFormVisible ? '' : 'hidden'}\">\n ${this.contactFormSectionTemplate}\n </div>\n <slot name=\"recaptcha\"></slot>\n `;\n }\n\n async showConfirmationModalDev(options: {\n donationType: DonationType;\n amount: number;\n currencyType: string;\n cancelDonationCB: Function;\n confirmDonationCB: Function;\n }): Promise<void> {\n this.paymentFlowHandlers?.showConfirmationStepModal(options);\n }\n\n /\n This is a developer convenience method that allows us to show the upsell modal without going\n * through the purchasing flow. If it's showing the PayPal button, it will trigger\n * the PayPal button render\n \n @param {{\n * oneTimeAmount: number;\n * ctaMode?: UpsellModalCTAMode;\n * yesSelected?: (amount: number) => void;\n * noSelected?: () => void;\n * amountChanged?: (amount: number) => void;\n * userClosedModalCallback?: () => void;\n * }} options\n * @returns {Promise<void>}\n * @memberof DonationForm\n /\n async showUpsellModalDev(options: {\n oneTimeAmount: number;\n ctaMode?: UpsellModalCTAMode;\n yesSelected?: (amount: number) => void;\n noSelected?: () => void;\n amountChanged?: (amount: number) => void;\n userClosedModalCallback?: () => void;\n }): Promise<void> {\n this.paymentFlowHandlers?.showUpsellModal(options);\n\n if (options.ctaMode === UpsellModalCTAMode.PayPalUpsellSlot) {\n const handler = await this.braintreeManager?.paymentProviders.paypalHandler.get();\n const donationInfo = new DonationPaymentInfo({\n amount: options.oneTimeAmount,\n donationType: DonationType.OneTime,\n coverFees: false,\n });\n handler?.renderPayPalButton({\n selector: '#paypal-upsell-button',\n style: {\n color: 'blue' as paypal.ButtonColorOption,\n label: 'paypal' as paypal.ButtonLabelOption,\n shape: 'rect' as paypal.ButtonShapeOption,\n size: 'responsive' as paypal.ButtonSizeOption,\n tagline: false,\n },\n donationInfo: donationInfo,\n });\n }\n }\n\n get contactFormSectionTemplate(): TemplateResult {\n return html`\n <donation-form-section\n .sectionBadge=${this.paymentSelectorNumberingStart + 1}\n headline=\"Enter payment information\"\n id=\"contactFormSection\"\n >\n <slot name=\"contact-form\"></slot>\n <div class=\"credit-card-fields\" class=\"${this.creditCardVisible ? '' : 'hidden'}\">\n <slot name=\"braintree-hosted-fields\"></slot>\n </div>\n </donation-form-section>\n\n <donation-form-section .sectionBadge=${this.paymentSelectorNumberingStart + 2}>\n <slot name=\"recaptcha\"></slot>\n <button id=\"donate-button\" @click=${this.donateClicked}>Donate</button>\n\n <div class=\"secure-process-note\">${lockImg} Your payment will be securely processed</div>\n </donation-form-section>\n `;\n }\n\n /\n Where to start the numbering of the payment selector\n \n - If we show the frequency selector in button mode, it becomes section 1, which makes\n * the amount selection section 2, and the payment selector section 3.\n * - If we show the frequency selector in checkbox mode, it is no longer section 1. The amount\n * selector becomes section 1 and the payment selector becomes section 2.\n \n Visually:\n \n Button Mode:\n * 1. Frequency selector\n * 2. Amount selector\n * 3. Payment selector\n * 4. Contact info\n * 5. Donate button\n \n Checkbox Mode:\n * 1. Amount selector (including the monthly checkbox)\n * 2. Payment selector <-- changes from 3 to 2\n * 3. Contact info <-- changes from 4 to 3\n * 4. Donate button <-- changes from 5 to 4\n \n @readonly\n * @private\n * @type {number}\n * @memberof DonationForm\n /\n private get paymentSelectorNumberingStart(): number {\n return this.frequencySelectionMode === EditDonationFrequencySelectionMode.Button ? 3 : 2;\n }\n\n private editDonationError(): void {\n this.donationInfoValid = false;\n }\n\n private paymentSelectorFirstUpdated(): void {\n if (this.paymentFlowHandlers?.paypalHandler) {\n this.renderPayPalButtonIfNeeded();\n }\n }\n\n private applePaySelected(e: CustomEvent): void {\n this.selectedPaymentProvider = PaymentProvider.ApplePay;\n this.contactFormVisible = false;\n this.creditCardVisible = false;\n\n if (!this.donationInfoValid) {\n this.showInvalidDonationInfoAlert();\n return;\n }\n\n const originalEvent = e.detail.originalEvent;\n this.donationInfo &&\n this.paymentFlowHandlers?.applePayHandler?.paymentInitiated(this.donationInfo, originalEvent);\n this.emitPaymentFlowStartedEvent();\n }\n\n private googlePaySelected(): void {\n this.selectedPaymentProvider = PaymentProvider.GooglePay;\n this.contactFormVisible = false;\n this.creditCardVisible = false;\n\n if (!this.donationInfoValid) {\n this.showInvalidDonationInfoAlert();\n } else {\n this.donationInfo &&\n this.paymentFlowHandlers?.googlePayHandler?.paymentInitiated(this.donationInfo);\n this.emitPaymentFlowStartedEvent();\n }\n }\n\n private async creditCardSelected(): Promise<void> {\n if (!this.donationInfoValid) {\n this.showInvalidDonationInfoAlert();\n return;\n }\n this.selectedPaymentProvider = PaymentProvider.CreditCard;\n this.contactFormVisible = true;\n this.creditCardVisible = true;\n this.focusContactForm();\n }\n\n private async venmoSelected(): Promise<void> {\n if (!this.donationInfoValid) {\n this.showInvalidDonationInfoAlert();\n return;\n }\n this.selectedPaymentProvider = PaymentProvider.Venmo;\n this.contactFormVisible = true;\n this.creditCardVisible = false;\n this.focusContactForm();\n }\n\n private paypalBlockerSelected(): void {\n this.contactFormVisible = false;\n this.creditCardVisible = false;\n this.showInvalidDonationInfoAlert();\n }\n\n private async focusContactForm(): Promise<void> {\n await this.updateComplete;\n if (this.contactFormSection) {\n this.contactForm?.focus();\n }\n }\n\n private async donateClicked(): Promise<void> {\n if (!this.contactForm) {\n alert('Please enter contact info.');\n return;\n }\n if (!this.donationInfoValid \|\| !this.donationInfo) {\n this.showInvalidDonationInfoAlert();\n return;\n }\n\n const contactInfo = this.contactForm.donorContactInfo;\n\n switch (this.selectedPaymentProvider) {\n case PaymentProvider.CreditCard:\n this.handleCreditCardDonationFlow(contactInfo, this.donationInfo);\n break;\n case PaymentProvider.Venmo:\n this.handleVenmoDonationFlow(contactInfo, this.donationInfo);\n break;\n }\n }\n\n private async handleCreditCardDonationFlow(\n contactInfo: DonorContactInfo,\n donationInfo: DonationPaymentInfo,\n ): Promise<void> {\n const creditCardFlowHandler = this.paymentFlowHandlers?.creditCardHandler;\n const creditCardHandler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n creditCardHandler?.hideErrorMessage();\n const valid = this.contactForm?.reportValidity();\n const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();\n\n if (!valid \|\| hostedFieldsResponse === undefined) {\n return;\n }\n\n this.emitPaymentFlowStartedEvent();\n creditCardFlowHandler?.paymentInitiated(hostedFieldsResponse, donationInfo, contactInfo);\n }\n\n private async handleVenmoDonationFlow(\n contactInfo: DonorContactInfo,\n donationInfo: DonationPaymentInfo,\n ): Promise<void> {\n const valid = this.contactForm?.reportValidity();\n if (!valid) {\n return;\n }\n this.paymentFlowHandlers?.venmoHandler?.paymentInitiated(contactInfo, donationInfo);\n }\n\n private emitPaymentFlowStartedEvent(): void {\n if (!this.selectedPaymentProvider) {\n return;\n }\n const event = new CustomEvent('paymentFlowStarted', {\n detail: { paymentProvider: this.selectedPaymentProvider },\n });\n this.dispatchEvent(event);\n }\n\n private emitPaymentFlowConfirmedEvent(): void {\n if (!this.selectedPaymentProvider) {\n return;\n }\n const event = new CustomEvent('paymentFlowConfirmed', {\n detail: { paymentProvider: this.selectedPaymentProvider },\n });\n this.dispatchEvent(event);\n }\n\n private emitPaymentFlowCancelledEvent(): void {\n if (!this.selectedPaymentProvider) {\n return;\n }\n const event = new CustomEvent('paymentFlowCancelled', {\n detail: { paymentProvider: this.selectedPaymentProvider },\n });\n this.dispatchEvent(event);\n }\n\n private emitPaymentFlowErrorEvent(error?: string): void {\n if (!this.selectedPaymentProvider) {\n return;\n }\n const event = new CustomEvent('paymentFlowError', {\n detail: { paymentProvider: this.selectedPaymentProvider, error: error },\n });\n this.dispatchEvent(event);\n }\n\n private showInvalidDonationInfoAlert(): void {\n alert('Please enter a valid donation amount.');\n }\n\n private async renderPayPalButtonIfNeeded(): Promise<void> {\n if (!this.paypalButtonNeedsRender) {\n return;\n }\n this.paypalButtonNeedsRender = false;\n this.donationInfo &&\n (await this.paymentFlowHandlers?.paypalHandler?.renderPayPalButton(this.donationInfo));\n this.paymentSelector.showPaypalButton();\n }\n\n updated(changedProperties: PropertyValues): void {\n if (changedProperties.has('donationInfo') && this.donationInfo) {\n // The PayPal button has a standalone datasource since we don't initiate the payment\n // through code so it has to have the donation info ready when the user taps the button.\n this.paymentFlowHandlers?.paypalHandler?.updateDonationInfo(this.donationInfo);\n this.donationFormHeader.donationInfo = this.donationInfo;\n }\n\n if (\n (changedProperties.has('paymentFlowHandlers') \|\| changedProperties.has('donationInfo')) &&\n this.donationInfo &&\n this.paymentFlowHandlers\n ) {\n this.setupFlowHandlers();\n }\n\n if (changedProperties.has('donationInfoValid')) {\n this.paymentSelector.donationInfoValid = this.donationInfoValid;\n }\n\n if (changedProperties.has('selectedPaymentProvider')) {\n const event = new CustomEvent('paymentProviderSelected', {\n detail: {\n paymentProvider: this.selectedPaymentProvider,\n previousPaymentProvider: changedProperties.get('selectedPaymentProvider'),\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private flowHandlersConfigured = false;\n\n private setupFlowHandlers(): void {\n if (this.flowHandlersConfigured) {\n return;\n }\n this.flowHandlersConfigured = true;\n this.bindFlowListenerEvents();\n this.renderPayPalButtonIfNeeded();\n this.donationInfo &&\n this.paymentFlowHandlers?.paypalHandler?.updateDonationInfo(this.donationInfo);\n }\n\n private flowHandlerListenersBound = false;\n\n private bindFlowListenerEvents(): void {\n if (this.flowHandlerListenersBound) {\n return;\n }\n this.flowHandlerListenersBound = true;\n\n this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentStarted', () => {\n this.selectedPaymentProvider = PaymentProvider.PayPal;\n this.emitPaymentFlowStartedEvent();\n });\n this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentConfirmed', () => {\n this.selectedPaymentProvider = PaymentProvider.PayPal;\n this.emitPaymentFlowConfirmedEvent();\n });\n this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentCancelled', () => {\n this.selectedPaymentProvider = PaymentProvider.PayPal;\n this.emitPaymentFlowCancelledEvent();\n });\n this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentError', (datasource, error) => {\n this.selectedPaymentProvider = PaymentProvider.PayPal;\n this.emitPaymentFlowErrorEvent(error);\n });\n\n this.paymentFlowHandlers?.googlePayHandler?.on('paymentCancelled', () => {\n this.selectedPaymentProvider = PaymentProvider.GooglePay;\n this.emitPaymentFlowCancelledEvent();\n });\n }\n\n private donationInfoChanged(e: CustomEvent): void {\n const donationInfo: DonationPaymentInfo = e.detail.donationInfo;\n this.donationInfo = new DonationPaymentInfo({\n amount: donationInfo.amount,\n donationType: donationInfo.donationType,\n coverFees: donationInfo.coverFees,\n });\n this.donationInfoValid = true;\n const event = new CustomEvent('donationInfoChanged', { detail: { donationInfo } });\n this.dispatchEvent(event);\n }\n\n /* @inheritdoc */\n static get styles(): CSSResult {\n const donateButtonFontSize = css`var(--donateButtonFontSize, 2.6rem)`;\n const donateButtonHeight = css`var(--donateButtonHeight, 4rem)`;\n const donateButtonColor = css`var(--donateButtonColor, rgba(49, 164, 129, 1))`;\n const donateButtonTextColor = css`var(--donateButtonTextColor, #fff)`;\n const donateButtonHoverColor = css`var(--donateButtonHoverColor, rgba(39, 131, 103, 1))`;\n const totalAmountTopMargin = css`var(--donateTotalAmountTopMargin, 1.5rem)`;\n const totalAmountBottomMargin = css`var(--donateTotalAmountBottomMargin, 1.2rem)`;\n\n return css`\n h1 {\n margin: 0;\n padding: 0;\n }\n\n .hidden {\n display: none;\n }\n\n .secure-process-note {\n margin-top: 0.5em;\n font-size: 0.75em;\n text-align: center;\n }\n\n .secure-process-note svg {\n width: 1.2rem;\n height: 1.5rem;\n vertical-align: bottom;\n }\n\n #donate-button {\n width: 100%;\n appearance: none;\n -webkit-appearance: none;\n font-size: ${donateButtonFontSize};\n font-weight: bold;\n text-align: center;\n color: ${donateButtonTextColor};\n cursor: pointer;\n border: none;\n border-radius: 5px;\n background-color: ${donateButtonColor};\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n height: ${donateButtonHeight};\n }\n\n #donate-button:hover {\n background-color: ${donateButtonHoverColor};\n }\n\n #total-amount-section {\n display: block;\n margin-top: ${totalAmountTopMargin};\n margin-bottom: ${totalAmountBottomMargin};\n }\n `;\n }\n}\n"]}

package/dist/src/form-elements/badged-input.js CHANGED Viewed

@@ -34,11 +34,7 @@ let BadgedInput = class BadgedInput extends LitElement {
       <div class="input-wrapper ${this.errorClass} ${this.iconSpaceOptionClass}">
         <div class="icon-container">${this.icon}</div>
         <div class="required-indicator ${this.requiredIndicatorSpaceOption}">
-          ${this.required
-            ? html `
-                *
-              `
-            : nothing}
+          ${this.required ? html ` * ` : nothing}
         </div>
         <slot></slot>

package/dist/src/form-elements/badged-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badged-input.js","sourceRoot":"","sources":["../../../src/form-elements/badged-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,OAAO,EAAE,MAAM,KAAK,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,0CAA0B,CAAA;IAC1B,gDAAgC,CAAA;AAClC,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;~~AAGD~~,~~IAAa~~,WAAW,~~GAAxB~~,~~MAAa~~,WAAY,SAAQ,UAAU;~~IAA3C~~;;~~QAC+B~~,UAAK,GAAG,KAAK,CAAC;QAId,aAAQ,GAAG,KAAK,CAAC;QAE9C;;;;;WAKG;QACyB,oBAAe,GAAiB,YAAY,CAAC,UAAU,CAAC;QAEpF;;;;;;;WAOG;QACyB,iCAA4B,GAAiB,YAAY,CAAC,UAAU,CAAC;~~IAgFnG~~,CAAC;~~IA9EC~~,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,oBAAoB;sCACxC,IAAI,CAAC,IAAI;yCACN,IAAI,CAAC,4BAA4B;YAC9D,IAAI,CAAC,QAAQ~~;YACb~~,CAAC,CAAC,IAAI,CAAA~~;;eAEH;YACH~~,CAAC,CAAC,OAAO;;;;;~~KAKhB~~,CAAC;IACJ,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAC,eAAe,KAAK,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACrF,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,SAAS,GAAG,GAAG,CAAA,uCAAuC,CAAC;QAC7D,MAAM,aAAa,GAAG,GAAG,CAAA,yCAAyC,CAAC;QACnE,MAAM,QAAQ,GAAG,GAAG,CAAA,oCAAoC,CAAC;QACzD,MAAM,eAAe,GAAG,GAAG,CAAA,yCAAyC,CAAC;QACrE,MAAM,iBAAiB,GAAG,GAAG,CAAA,2CAA2C,CAAC;QACzE,MAAM,WAAW,GAAG,GAAG,CAAA,gCAAgC,CAAC;QACxD,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,uBAAuB,GAAG,GAAG,CAAA,0DAA0D,CAAC;QAC9F,MAAM,yBAAyB,GAAG,GAAG,CAAA,mDAAmD,CAAC;QAEzF,OAAO,GAAG,CAAA;;kBAEI,SAAS;kBACT,WAAW;;;;;;4CAMe,aAAa;wBACjC,aAAa;;;;iBAIpB,iBAAiB;;;;iBAIjB,eAAe;;;;;;;;kBAQd,QAAQ;;;;iBAIT,sBAAsB;qBAClB,yBAAyB;kBAC5B,uBAAuB;;;;;;KAMpC,CAAC;IACJ,CAAC;CACF,CAAA;~~AAtG8B~~;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAe;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAQlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAyD;AAUxD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAsE;AAvBtF,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,~~CAuGvB~~;~~SAvGY~~,WAAW","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport enum SpacerOption {\n LeaveSpace = 'leave-space',\n CompressSpace = 'compress-space',\n}\n\n@customElement('badged-input')\nexport class BadgedInput extends LitElement {\n @property({ type: Boolean }) error = false;\n\n @property({ type: Object }) icon?: TemplateResult;\n\n @property({ type: Boolean }) required = false;\n\n /*\n If the icon is hidden, should the space remain or be compressed\n \n @type {SpacerOption}\n * @memberof BadgedInput\n /\n @property({ type: String }) iconSpaceOption: SpacerOption = SpacerOption.LeaveSpace;\n\n /\n When the required indicator is hidden, should the spacing remain\n \n This is useful for aligning many fields where some may not be required\n \n @type {SpacerOption}\n * @memberof BadgedInput\n /\n @property({ type: String }) requiredIndicatorSpaceOption: SpacerOption = SpacerOption.LeaveSpace;\n\n /* @inheritdoc /\n render(): TemplateResult {\n return html`\n <div class=\"input-wrapper ${this.errorClass} ${this.iconSpaceOptionClass}\">\n <div class=\"icon-container\">${this.icon}</div>\n <div class=\"required-indicator ${this.requiredIndicatorSpaceOption}\">\n ${this.required\n ? html~~`\n \n `\n~~ : nothing}\n </div>\n\n <slot></slot>\n </div>\n `;\n }\n\n private get errorClass(): string {\n return this.error ? 'error' : '';\n }\n\n private get iconSpaceOptionClass(): string {\n return this.iconSpaceOption === SpacerOption.CompressSpace ? 'compress-space' : '';\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const borderCss = css`var(--inputBorder, 1px solid #d9d9d9)`;\n const errorColorCss = css`var(--badgedInputBorderErrorColor, red)`;\n const iconSize = css`var(--badgedInputIconSize, 1.4rem)`;\n const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 3rem)`;\n const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 1rem)`;\n const fieldHeight = css`var(--badgedInputHeight, 3rem)`;\n const requiredIndicatorColor = css`var(--badgedInputRequiredIndicatorColor, red)`;\n const requiredIndicatorMargin = css`var(--badgedInputRequiredIndicatorMargin, 0 0.25rem 0 0)`;\n const requiredIndicatorFontSize = css`var(--badgedInputRequiredIndicatorFontSize, 2rem)`;\n\n return css`\n .input-wrapper {\n border: ${borderCss};\n height: ${fieldHeight};\n display: flex;\n align-items: center;\n }\n\n .input-wrapper.error {\n box-shadow: inset 0px 0px 0px 1px ${errorColorCss};\n border-color: ${errorColorCss};\n }\n\n .input-wrapper.compress-space .icon-container {\n width: ${noIconSpacerWidth};\n }\n\n .icon-container {\n width: ${iconSpacerWidth};\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .icon-container svg {\n height: ${iconSize};\n }\n\n .required-indicator {\n color: ${requiredIndicatorColor};\n font-size: ${requiredIndicatorFontSize};\n margin: ${requiredIndicatorMargin};\n }\n\n .required-indicator.leave-space {\n width: 0.5em;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"badged-input.js","sourceRoot":"","sources":["../../../src/form-elements/badged-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,OAAO,EAAE,MAAM,KAAK,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,0CAA0B,CAAA;IAC1B,gDAAgC,CAAA;AAClC,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAGM,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACwB,UAAK,GAAG,KAAK,CAAC;QAId,aAAQ,GAAG,KAAK,CAAC;QAE9C;;;;;WAKG;QACyB,oBAAe,GAAiB,YAAY,CAAC,UAAU,CAAC;QAEpF;;;;;;;WAOG;QACyB,iCAA4B,GAAiB,YAAY,CAAC,UAAU,CAAC;IA4EnG,CAAC;IA1EC,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,oBAAoB;sCACxC,IAAI,CAAC,IAAI;yCACN,IAAI,CAAC,4BAA4B;YAC9D,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,KAAK,CAAC,CAAC,CAAC,OAAO;;;;;KAK1C,CAAC;IACJ,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAC,eAAe,KAAK,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACrF,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,SAAS,GAAG,GAAG,CAAA,uCAAuC,CAAC;QAC7D,MAAM,aAAa,GAAG,GAAG,CAAA,yCAAyC,CAAC;QACnE,MAAM,QAAQ,GAAG,GAAG,CAAA,oCAAoC,CAAC;QACzD,MAAM,eAAe,GAAG,GAAG,CAAA,yCAAyC,CAAC;QACrE,MAAM,iBAAiB,GAAG,GAAG,CAAA,2CAA2C,CAAC;QACzE,MAAM,WAAW,GAAG,GAAG,CAAA,gCAAgC,CAAC;QACxD,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,uBAAuB,GAAG,GAAG,CAAA,0DAA0D,CAAC;QAC9F,MAAM,yBAAyB,GAAG,GAAG,CAAA,mDAAmD,CAAC;QAEzF,OAAO,GAAG,CAAA;;kBAEI,SAAS;kBACT,WAAW;;;;;;4CAMe,aAAa;wBACjC,aAAa;;;;iBAIpB,iBAAiB;;;;iBAIjB,eAAe;;;;;;;;kBAQd,QAAQ;;;;iBAIT,sBAAsB;qBAClB,yBAAyB;kBAC5B,uBAAuB;;;;;;KAMpC,CAAC;IACJ,CAAC;CACF,CAAA;AAlG8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAe;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAQlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAyD;AAUxD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAsE;AAvBtF,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmGvB;SAnGY,WAAW","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport enum SpacerOption {\n LeaveSpace = 'leave-space',\n CompressSpace = 'compress-space',\n}\n\n@customElement('badged-input')\nexport class BadgedInput extends LitElement {\n @property({ type: Boolean }) error = false;\n\n @property({ type: Object }) icon?: TemplateResult;\n\n @property({ type: Boolean }) required = false;\n\n /*\n If the icon is hidden, should the space remain or be compressed\n \n @type {SpacerOption}\n * @memberof BadgedInput\n /\n @property({ type: String }) iconSpaceOption: SpacerOption = SpacerOption.LeaveSpace;\n\n /\n When the required indicator is hidden, should the spacing remain\n \n This is useful for aligning many fields where some may not be required\n \n @type {SpacerOption}\n * @memberof BadgedInput\n /\n @property({ type: String }) requiredIndicatorSpaceOption: SpacerOption = SpacerOption.LeaveSpace;\n\n /* @inheritdoc /\n render(): TemplateResult {\n return html`\n <div class=\"input-wrapper ${this.errorClass} ${this.iconSpaceOptionClass}\">\n <div class=\"icon-container\">${this.icon}</div>\n <div class=\"required-indicator ${this.requiredIndicatorSpaceOption}\">\n ${this.required ? html` ` : nothing}\n </div>\n\n <slot></slot>\n </div>\n `;\n }\n\n private get errorClass(): string {\n return this.error ? 'error' : '';\n }\n\n private get iconSpaceOptionClass(): string {\n return this.iconSpaceOption === SpacerOption.CompressSpace ? 'compress-space' : '';\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const borderCss = css`var(--inputBorder, 1px solid #d9d9d9)`;\n const errorColorCss = css`var(--badgedInputBorderErrorColor, red)`;\n const iconSize = css`var(--badgedInputIconSize, 1.4rem)`;\n const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 3rem)`;\n const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 1rem)`;\n const fieldHeight = css`var(--badgedInputHeight, 3rem)`;\n const requiredIndicatorColor = css`var(--badgedInputRequiredIndicatorColor, red)`;\n const requiredIndicatorMargin = css`var(--badgedInputRequiredIndicatorMargin, 0 0.25rem 0 0)`;\n const requiredIndicatorFontSize = css`var(--badgedInputRequiredIndicatorFontSize, 2rem)`;\n\n return css`\n .input-wrapper {\n border: ${borderCss};\n height: ${fieldHeight};\n display: flex;\n align-items: center;\n }\n\n .input-wrapper.error {\n box-shadow: inset 0px 0px 0px 1px ${errorColorCss};\n border-color: ${errorColorCss};\n }\n\n .input-wrapper.compress-space .icon-container {\n width: ${noIconSpacerWidth};\n }\n\n .icon-container {\n width: ${iconSpacerWidth};\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .icon-container svg {\n height: ${iconSize};\n }\n\n .required-indicator {\n color: ${requiredIndicatorColor};\n font-size: ${requiredIndicatorFontSize};\n margin: ${requiredIndicatorMargin};\n }\n\n .required-indicator.leave-space {\n width: 0.5em;\n }\n `;\n }\n}\n"]}

package/dist/src/form-elements/contact-form/autocomplete-field-options.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export ~~declare~~ type AutoCompleteFieldOptions = 'on' \| 'off' \| 'additional-name' \| 'address-level1' \| 'address-level2' \| 'address-level3' \| 'address-level4' \| 'address-line1' \| 'address-line2' \| 'address-line3' \| 'bday' \| 'bday-year' \| 'bday-day' \| 'bday-month' \| 'billing' \| 'cc-additional-name' \| 'cc-csc' \| 'cc-exp' \| 'cc-exp-month' \| 'cc-exp-year' \| 'cc-family-name' \| 'cc-given-name' \| 'cc-name' \| 'cc-number' \| 'cc-type' \| 'country' \| 'country-name' \| 'current-password' \| 'email' \| 'family-name' \| 'fax' \| 'given-name' \| 'home' \| 'honorific-prefix' \| 'honorific-suffix' \| 'impp' \| 'language' \| 'mobile' \| 'name' \| 'new-password' \| 'nickname' \| 'organization' \| 'organization-title' \| 'pager' \| 'photo' \| 'postal-code' \| 'sex' \| 'shipping' \| 'street-address' \| 'tel-area-code' \| 'tel' \| 'tel-country-code' \| 'tel-extension' \| 'tel-local' \| 'tel-local-prefix' \| 'tel-local-suffix' \| 'tel-national' \| 'transaction-amount' \| 'transaction-currency' \| 'url' \| 'username' \| 'work';
1	+ export type AutoCompleteFieldOptions = 'on' \| 'off' \| 'additional-name' \| 'address-level1' \| 'address-level2' \| 'address-level3' \| 'address-level4' \| 'address-line1' \| 'address-line2' \| 'address-line3' \| 'bday' \| 'bday-year' \| 'bday-day' \| 'bday-month' \| 'billing' \| 'cc-additional-name' \| 'cc-csc' \| 'cc-exp' \| 'cc-exp-month' \| 'cc-exp-year' \| 'cc-family-name' \| 'cc-given-name' \| 'cc-name' \| 'cc-number' \| 'cc-type' \| 'country' \| 'country-name' \| 'current-password' \| 'email' \| 'family-name' \| 'fax' \| 'given-name' \| 'home' \| 'honorific-prefix' \| 'honorific-suffix' \| 'impp' \| 'language' \| 'mobile' \| 'name' \| 'new-password' \| 'nickname' \| 'organization' \| 'organization-title' \| 'pager' \| 'photo' \| 'postal-code' \| 'sex' \| 'shipping' \| 'street-address' \| 'tel-area-code' \| 'tel' \| 'tel-country-code' \| 'tel-extension' \| 'tel-local' \| 'tel-local-prefix' \| 'tel-local-suffix' \| 'tel-national' \| 'transaction-amount' \| 'transaction-currency' \| 'url' \| 'username' \| 'work';

package/dist/src/form-elements/contact-form/autocomplete-field-options.js CHANGED Viewed

	@@ -1 +1,2 @@
1	+ export {};
1 2	//# sourceMappingURL=autocomplete-field-options.js.map

package/dist/src/form-elements/contact-form/contact-form.js CHANGED Viewed

@@ -5,9 +5,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { BillingInfo, CustomerInfo, DonorContactInfo, } from '@internetarchive/donation-form-data-models';
 import { SpacerOption } from '../badged-input';
 import '../badged-input';
-import emailImg from '@internetarchive/icon-email';
-import localePinImg from '@internetarchive/icon-locale-pin';
-import userIcon from '@internetarchive/icon-user';
+import emailImg from '@internetarchive/icon-email/index.js';
+import localePinImg from '@internetarchive/icon-locale-pin/index.js';
+import userIcon from '@internetarchive/icon-user/index.js';
 import { countries } from './countries';
 let ContactForm = class ContactForm extends LitElement {
     constructor() {
@@ -136,9 +136,7 @@ let ContactForm = class ContactForm extends LitElement {
             iconSpaceOption: SpacerOption.CompressSpace,
         })}
           </div>
-          <div class="row">
-            ${this.countrySelectorTemplate}
-          </div>
+          <div class="row">${this.countrySelectorTemplate}</div>
         </fieldset>
       </form>
       ${this.getStyles}
@@ -147,11 +145,14 @@ let ContactForm = class ContactForm extends LitElement {
     get countrySelectorTemplate() {
         return html `
       <badged-input>
-        <select id="donation-contact-form-countryCodeAlpha2"
-        @change=${(e) => {
+        <select
+          id="donation-contact-form-countryCodeAlpha2"
+          @change=${(e) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             const currCountry = this.selectedCountry;
-            this.selectedCountry = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.value) ? (_b = e.target) === null || _b === void 0 ? void 0 : _b.value : currCountry;
+            this.selectedCountry = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.value)
+                ? (_b = e.target) === null || _b === void 0 ? void 0 : _b.value
+                : currCountry;
             // update required visual cue on region/state/province & postal code fields
             if (this.selectedCountry === 'US') {
                 (_c = this.postalBadgedInput) === null || _c === void 0 ? void 0 : _c.setAttribute('required', '');
@@ -165,7 +166,8 @@ let ContactForm = class ContactForm extends LitElement {
                 (_j = this.regionBadgedInput) === null || _j === void 0 ? void 0 : _j.removeAttribute('required');
                 (_k = this.regionField) === null || _k === void 0 ? void 0 : _k.removeAttribute('required');
             }
-        }}>
+        }}
+        >
           ${Object.keys(countries).map(key => {
             const name = countries[key];
             return html `

package/dist/src/form-elements/contact-form/contact-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"contact-form.js","sourceRoot":"","sources":["../../../../src/form-elements/contact-form/contact-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n BillingInfo,\n CustomerInfo,\n DonorContactInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { AutoCompleteFieldOptions } from './autocomplete-field-options';\nimport { SpacerOption } from '../badged-input';\nimport { BadgedInput } from '../badged-input';\nimport '../badged-input';\n\nimport emailImg from '@internetarchive/icon-email';\nimport localePinImg from '@internetarchive/icon-locale-pin';\nimport userIcon from '@internetarchive/icon-user';\n\nimport { countries } from './countries';\n\n@customElement('contact-form')\nexport class ContactForm extends LitElement {\n @query('badged-input.donation-contact-form-email') emailBadgedInput!: BadgedInput;\n @query('#donation-contact-form-email') emailField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-first-name') firstNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-first-name') firstNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-last-name') lastNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-last-name') lastNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-postal-code') postalBadgedInput!: BadgedInput;\n @query('#donation-contact-form-postal-code') postalCodeField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-street-address')\n streetAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-street-address') streetAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-extended-address')\n extendedAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-extended-address') extendedAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-locality') localityBadgedInput!: BadgedInput;\n @query('#donation-contact-form-locality') localityField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-region') regionBadgedInput!: BadgedInput;\n @query('#donation-contact-form-region') regionField!: HTMLInputElement;\n\n @query('#donation-contact-form-countryCodeAlpha2') countryCodeAlpha2Field!: HTMLSelectElement;\n\n @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;\n @query('form') form!: HTMLFormElement;\n\n /** @keyof countries /\n @property({ type: String }) selectedCountry = 'US';\n\n reportValidity(): boolean {\n const fieldBadgedInputs: Array<[HTMLInputElement, BadgedInput]> = [\n [this.emailField, this.emailBadgedInput],\n [this.firstNameField, this.firstNameBadgedInput],\n [this.lastNameField, this.lastNameBadgedInput],\n [this.regionField, this.regionBadgedInput],\n [this.localityField, this.localityBadgedInput],\n [this.streetAddressField, this.streetAddressBadgedInput],\n [this.postalCodeField, this.postalBadgedInput],\n ];\n\n let isValid = true;\n fieldBadgedInputs.forEach(([inputElement, badgedInput]) => {\n const fieldValid = inputElement.checkValidity();\n isValid = isValid && fieldValid;\n if (!fieldValid) {\n badgedInput.error = true;\n }\n });\n\n if (!isValid) {\n this.errorMessage.innerText = 'Please enter any missing contact information below';\n } else {\n this.errorMessage.innerText = '';\n }\n\n return isValid;\n }\n\n focus(): void {\n this.emailField.focus();\n }\n\n /* @inheritdoc /\n render(): TemplateResult {\n return html`\n <div id=\"donation-contact-form-error-message\"></div>\n <form>\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-email',\n placeholder: 'Email',\n required: true,\n fieldType: 'email',\n name: 'email',\n autocomplete: 'email',\n maxlength: 255,\n icon: emailImg,\n })}\n </div>\n </fieldset>\n\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-first-name',\n placeholder: 'First name',\n name: 'fname',\n required: true,\n maxlength: 255,\n autocomplete: 'given-name',\n icon: userIcon,\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-last-name',\n placeholder: 'Last name',\n name: 'lname',\n autocomplete: 'family-name',\n required: true,\n maxlength: 255,\n })}\n </div>\n </fieldset>\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-street-address',\n placeholder: 'Address Line 1',\n required: true,\n autocomplete: 'address-line1',\n icon: localePinImg,\n name: 'street-address',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-extended-address',\n placeholder: 'Address Line 2 (optional)',\n autocomplete: 'address-line2',\n required: false,\n name: 'extended-address',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-locality',\n placeholder: 'City',\n autocomplete: 'address-level2',\n required: true,\n name: 'locality',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-region',\n placeholder: 'State / Province',\n autocomplete: 'address-level1',\n required: true,\n name: 'region',\n })}\n ${this.generateInput({\n id: 'donation-contact-form-postal-code',\n placeholder: 'Zip / Postal',\n autocomplete: 'postal-code',\n required: true,\n name: 'postal',\n maxlength: 9,\n // must start with a character, then may contain spaces\n validationPattern: '[a-zA-Z\\\\-\\\\d]+[a-zA-Z\\\\-\\\\d\\\\s]',\n iconSpaceOption: SpacerOption.CompressSpace,\n })}\n </div>\n <div class=\"row\">\n ${this.countrySelectorTemplate}\n </div>\n </fieldset>\n </form>\n ${this.getStyles}\n `;\n }\n\n private get countrySelectorTemplate(): TemplateResult {\n return html`\n <badged-input>\n <select id=\"donation-contact-form-countryCodeAlpha2\"\n @change=${(e: Event) => {\n const currCountry = this.selectedCountry;\n this.selectedCountry = (e.target as HTMLInputElement)?.value ? (e.target as HTMLInputElement)?.value as string : currCountry;\n // update required visual cue on region/state/province & postal code fields\n if (this.selectedCountry === 'US') {\n this.postalBadgedInput?.setAttribute('required', '');\n this.postalCodeField?.setAttribute('required', '');\n this.regionBadgedInput?.setAttribute('required', '');\n this.regionField?.setAttribute('required', '');\n } else {\n this.postalBadgedInput?.removeAttribute('required');\n this.postalCodeField?.removeAttribute('required');\n this.regionBadgedInput?.removeAttribute('required');\n this.regionField?.removeAttribute('required');\n }\n }}>\n ${Object.keys(countries).map(key => {\n const name = countries[key];\n return html`\n <option value=${key} ?selected=${key === this.selectedCountry}>${name}</option>\n `;\n })}\n </select>\n </badged-input>\n `;\n }\n\n /** @inheritdoc /\n createRenderRoot(): this {\n // Render template without shadow DOM. Note that shadow DOM features like\n // encapsulated CSS and slots are unavailable.\n // Form autofill does not work properly in the shadow DOM\n // so we need our form fields in the light DOM\n return this;\n }\n\n // reset the error state when the user focuses the input\n private inputFocused(e: KeyboardEvent): void {\n this.errorMessage.innerText = '';\n const input = e.target as HTMLInputElement;\n const inputIdentifier = input.id;\n const badgedInput = this.querySelector(`badged-input.${inputIdentifier}`) as BadgedInput;\n badgedInput.error = false;\n }\n\n private generateInput(options: {\n id: string;\n placeholder: string;\n required?: boolean;\n fieldType?: 'text' \| 'email';\n autocomplete?: AutoCompleteFieldOptions;\n maxlength?: number;\n name: string;\n icon?: TemplateResult;\n iconSpaceOption?: SpacerOption;\n validationPattern?: string;\n }): TemplateResult {\n const required = options.required ?? true;\n const fieldType = options.fieldType ?? 'text';\n const iconOption = options.iconSpaceOption ?? SpacerOption.LeaveSpace;\n\n return html`\n <badged-input\n class=${options.id}\n .icon=${options.icon}\n .iconSpaceOption=${iconOption}\n ?required=${options.required}\n >\n <label for=${options.id}>${options.placeholder}</label>\n <input\n type=${fieldType}\n id=${options.id}\n class=\"donation-contact-form-input\"\n name=${options.name}\n aria-label=${options.placeholder}\n placeholder=${options.placeholder}\n maxlength=${ifDefined(options.maxlength)}\n autocomplete=${options.autocomplete ?? 'on'}\n pattern=${ifDefined(options.validationPattern)}\n @focus=${this.inputFocused}\n ?required=${required}\n />\n </badged-input>\n `;\n }\n\n get donorContactInfo(): DonorContactInfo {\n return new DonorContactInfo({\n billing: this.billingInfo,\n customer: this.contactInfo,\n });\n }\n\n get billingInfo(): BillingInfo {\n const billingInfo = new BillingInfo({\n streetAddress: this.streetAddressField.value,\n extendedAddress: this.extendedAddressField.value,\n locality: this.localityField.value,\n region: this.regionField.value,\n postalCode: this.postalCodeField.value,\n countryCodeAlpha2: this.countryCodeAlpha2Field.value,\n });\n return billingInfo;\n }\n\n get contactInfo(): CustomerInfo {\n return new CustomerInfo({\n email: this.emailField.value,\n firstName: this.firstNameField.value,\n lastName: this.lastNameField.value,\n });\n }\n\n /\n This is not the normal LitElement styles block.\n \n This element uses the clear DOM instead of the shadow DOM so it can't use\n * the shadowRoot's isolated styling. This is a bit of a workaround to keep all of\n * the styling local by writing out our own <style> tag and just be careful about\n * the selectors since they will leak outside of this component.\n \n @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ContactForm\n /\n private get getStyles(): TemplateResult {\n const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 3rem)`;\n const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 5rem)`;\n\n const fieldSetSpacing = css`var(--fieldSetSpacing, 1rem)`;\n const fieldFontFamily = css`var(--fontFamily, \"Helvetica Neue\", Helvetica, Arial, sans-serif)`;\n const fieldFontSize = css`var(--contactFieldFontSize, 1.6rem)`;\n const fieldFontColor = css`var(--inputFieldFontColor, #333)`;\n\n const iconFieldWidth = css`calc(100% - ${iconSpacerWidth})`;\n const noIconFieldWidth = css`calc(100% - ${noIconSpacerWidth})`;\n\n return html`\n <style>\n /\n NOTE\n This element is in the lightDOM so be sure to prefix all styles\n with \"contact-form\" so styles don't leak.\n /\n contact-form fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: ${fieldSetSpacing};\n background-color: white;\n }\n\n / These 1px and 0 margins in the next few selectors are to account for the\n double outlines caused by the fields being right next to each other /\n contact-form .row {\n display: flex;\n margin: -1px 0 0 0;\n }\n\n contact-form fieldset .row:first-child {\n margin-top: 0;\n }\n\n contact-form badged-input.donation-contact-form-region {\n width: 60%;\n }\n\n contact-form badged-input.donation-contact-form-postal-code {\n width: 40%;\n }\n\n contact-form #donation-contact-form-region {\n width: ${iconFieldWidth};\n }\n\n contact-form #donation-contact-form-postal-code {\n width: ${noIconFieldWidth};\n }\n\n contact-form #donation-contact-form-error-message {\n color: red;\n font-size: 1.4rem;\n margin-bottom: 0.6rem;\n }\n\n contact-form #donation-contact-form-last-name {\n width: ${noIconFieldWidth};\n }\n\n / only show for screen readers */\n contact-form label {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n\n contact-form .donation-contact-form-input {\n width: ${iconFieldWidth};\n border: 0;\n outline: 0;\n background: transparent;\n font-weight: bold;\n color: ${fieldFontColor};\n font-size: ${fieldFontSize};\n padding: 0;\n font-family: ${fieldFontFamily};\n }\n\n contact-form .donation-contact-form-input::placeholder {\n color: revert;\n }\n\n contact-form #donation-contact-form-countryCodeAlpha2 {\n width: ${iconFieldWidth};\n height: 100%;\n box-sizing: border-box;\n font-weight: bold;\n font-size: ${fieldFontSize};\n font-family: ${fieldFontFamily};\n border: 0;\n background: #fff;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n </style>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"contact-form.js","sourceRoot":"","sources":["../../../../src/form-elements/contact-form/contact-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n BillingInfo,\n CustomerInfo,\n DonorContactInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { AutoCompleteFieldOptions } from './autocomplete-field-options';\nimport { SpacerOption } from '../badged-input';\nimport { BadgedInput } from '../badged-input';\nimport '../badged-input';\n\nimport emailImg from '@internetarchive/icon-email/index.js';\nimport localePinImg from '@internetarchive/icon-locale-pin/index.js';\nimport userIcon from '@internetarchive/icon-user/index.js';\n\nimport { countries } from './countries';\n\n@customElement('contact-form')\nexport class ContactForm extends LitElement {\n @query('badged-input.donation-contact-form-email') emailBadgedInput!: BadgedInput;\n @query('#donation-contact-form-email') emailField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-first-name') firstNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-first-name') firstNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-last-name') lastNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-last-name') lastNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-postal-code') postalBadgedInput!: BadgedInput;\n @query('#donation-contact-form-postal-code') postalCodeField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-street-address')\n streetAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-street-address') streetAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-extended-address')\n extendedAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-extended-address') extendedAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-locality') localityBadgedInput!: BadgedInput;\n @query('#donation-contact-form-locality') localityField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-region') regionBadgedInput!: BadgedInput;\n @query('#donation-contact-form-region') regionField!: HTMLInputElement;\n\n @query('#donation-contact-form-countryCodeAlpha2') countryCodeAlpha2Field!: HTMLSelectElement;\n\n @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;\n @query('form') form!: HTMLFormElement;\n\n /** @keyof countries /\n @property({ type: String }) selectedCountry = 'US';\n\n reportValidity(): boolean {\n const fieldBadgedInputs: Array<[HTMLInputElement, BadgedInput]> = [\n [this.emailField, this.emailBadgedInput],\n [this.firstNameField, this.firstNameBadgedInput],\n [this.lastNameField, this.lastNameBadgedInput],\n [this.regionField, this.regionBadgedInput],\n [this.localityField, this.localityBadgedInput],\n [this.streetAddressField, this.streetAddressBadgedInput],\n [this.postalCodeField, this.postalBadgedInput],\n ];\n\n let isValid = true;\n fieldBadgedInputs.forEach(([inputElement, badgedInput]) => {\n const fieldValid = inputElement.checkValidity();\n isValid = isValid && fieldValid;\n if (!fieldValid) {\n badgedInput.error = true;\n }\n });\n\n if (!isValid) {\n this.errorMessage.innerText = 'Please enter any missing contact information below';\n } else {\n this.errorMessage.innerText = '';\n }\n\n return isValid;\n }\n\n focus(): void {\n this.emailField.focus();\n }\n\n /* @inheritdoc /\n render(): TemplateResult {\n return html`\n <div id=\"donation-contact-form-error-message\"></div>\n <form>\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-email',\n placeholder: 'Email',\n required: true,\n fieldType: 'email',\n name: 'email',\n autocomplete: 'email',\n maxlength: 255,\n icon: emailImg,\n })}\n </div>\n </fieldset>\n\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-first-name',\n placeholder: 'First name',\n name: 'fname',\n required: true,\n maxlength: 255,\n autocomplete: 'given-name',\n icon: userIcon,\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-last-name',\n placeholder: 'Last name',\n name: 'lname',\n autocomplete: 'family-name',\n required: true,\n maxlength: 255,\n })}\n </div>\n </fieldset>\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-street-address',\n placeholder: 'Address Line 1',\n required: true,\n autocomplete: 'address-line1',\n icon: localePinImg,\n name: 'street-address',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-extended-address',\n placeholder: 'Address Line 2 (optional)',\n autocomplete: 'address-line2',\n required: false,\n name: 'extended-address',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-locality',\n placeholder: 'City',\n autocomplete: 'address-level2',\n required: true,\n name: 'locality',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-region',\n placeholder: 'State / Province',\n autocomplete: 'address-level1',\n required: true,\n name: 'region',\n })}\n ${this.generateInput({\n id: 'donation-contact-form-postal-code',\n placeholder: 'Zip / Postal',\n autocomplete: 'postal-code',\n required: true,\n name: 'postal',\n maxlength: 9,\n // must start with a character, then may contain spaces\n validationPattern: '[a-zA-Z\\\\-\\\\d]+[a-zA-Z\\\\-\\\\d\\\\s]',\n iconSpaceOption: SpacerOption.CompressSpace,\n })}\n </div>\n <div class=\"row\">${this.countrySelectorTemplate}</div>\n </fieldset>\n </form>\n ${this.getStyles}\n `;\n }\n\n private get countrySelectorTemplate(): TemplateResult {\n return html`\n <badged-input>\n <select\n id=\"donation-contact-form-countryCodeAlpha2\"\n @change=${(e: Event) => {\n const currCountry = this.selectedCountry;\n this.selectedCountry = (e.target as HTMLInputElement)?.value\n ? ((e.target as HTMLInputElement)?.value as string)\n : currCountry;\n // update required visual cue on region/state/province & postal code fields\n if (this.selectedCountry === 'US') {\n this.postalBadgedInput?.setAttribute('required', '');\n this.postalCodeField?.setAttribute('required', '');\n this.regionBadgedInput?.setAttribute('required', '');\n this.regionField?.setAttribute('required', '');\n } else {\n this.postalBadgedInput?.removeAttribute('required');\n this.postalCodeField?.removeAttribute('required');\n this.regionBadgedInput?.removeAttribute('required');\n this.regionField?.removeAttribute('required');\n }\n }}\n >\n ${Object.keys(countries).map(key => {\n const name = countries[key];\n return html`\n <option value=${key} ?selected=${key === this.selectedCountry}>${name}</option>\n `;\n })}\n </select>\n </badged-input>\n `;\n }\n\n /** @inheritdoc /\n createRenderRoot(): this {\n // Render template without shadow DOM. Note that shadow DOM features like\n // encapsulated CSS and slots are unavailable.\n // Form autofill does not work properly in the shadow DOM\n // so we need our form fields in the light DOM\n return this;\n }\n\n // reset the error state when the user focuses the input\n private inputFocused(e: KeyboardEvent): void {\n this.errorMessage.innerText = '';\n const input = e.target as HTMLInputElement;\n const inputIdentifier = input.id;\n const badgedInput = this.querySelector(`badged-input.${inputIdentifier}`) as BadgedInput;\n badgedInput.error = false;\n }\n\n private generateInput(options: {\n id: string;\n placeholder: string;\n required?: boolean;\n fieldType?: 'text' \| 'email';\n autocomplete?: AutoCompleteFieldOptions;\n maxlength?: number;\n name: string;\n icon?: TemplateResult;\n iconSpaceOption?: SpacerOption;\n validationPattern?: string;\n }): TemplateResult {\n const required = options.required ?? true;\n const fieldType = options.fieldType ?? 'text';\n const iconOption = options.iconSpaceOption ?? SpacerOption.LeaveSpace;\n\n return html`\n <badged-input\n class=${options.id}\n .icon=${options.icon}\n .iconSpaceOption=${iconOption}\n ?required=${options.required}\n >\n <label for=${options.id}>${options.placeholder}</label>\n <input\n type=${fieldType}\n id=${options.id}\n class=\"donation-contact-form-input\"\n name=${options.name}\n aria-label=${options.placeholder}\n placeholder=${options.placeholder}\n maxlength=${ifDefined(options.maxlength)}\n autocomplete=${options.autocomplete ?? 'on'}\n pattern=${ifDefined(options.validationPattern)}\n @focus=${this.inputFocused}\n ?required=${required}\n />\n </badged-input>\n `;\n }\n\n get donorContactInfo(): DonorContactInfo {\n return new DonorContactInfo({\n billing: this.billingInfo,\n customer: this.contactInfo,\n });\n }\n\n get billingInfo(): BillingInfo {\n const billingInfo = new BillingInfo({\n streetAddress: this.streetAddressField.value,\n extendedAddress: this.extendedAddressField.value,\n locality: this.localityField.value,\n region: this.regionField.value,\n postalCode: this.postalCodeField.value,\n countryCodeAlpha2: this.countryCodeAlpha2Field.value,\n });\n return billingInfo;\n }\n\n get contactInfo(): CustomerInfo {\n return new CustomerInfo({\n email: this.emailField.value,\n firstName: this.firstNameField.value,\n lastName: this.lastNameField.value,\n });\n }\n\n /\n This is not the normal LitElement styles block.\n \n This element uses the clear DOM instead of the shadow DOM so it can't use\n * the shadowRoot's isolated styling. This is a bit of a workaround to keep all of\n * the styling local by writing out our own <style> tag and just be careful about\n * the selectors since they will leak outside of this component.\n \n @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ContactForm\n /\n private get getStyles(): TemplateResult {\n const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 3rem)`;\n const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 5rem)`;\n\n const fieldSetSpacing = css`var(--fieldSetSpacing, 1rem)`;\n const fieldFontFamily = css`var(--fontFamily, \"Helvetica Neue\", Helvetica, Arial, sans-serif)`;\n const fieldFontSize = css`var(--contactFieldFontSize, 1.6rem)`;\n const fieldFontColor = css`var(--inputFieldFontColor, #333)`;\n\n const iconFieldWidth = css`calc(100% - ${iconSpacerWidth})`;\n const noIconFieldWidth = css`calc(100% - ${noIconSpacerWidth})`;\n\n return html`\n <style>\n /\n NOTE\n This element is in the lightDOM so be sure to prefix all styles\n with \"contact-form\" so styles don't leak.\n /\n contact-form fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: ${fieldSetSpacing};\n background-color: white;\n }\n\n / These 1px and 0 margins in the next few selectors are to account for the\n double outlines caused by the fields being right next to each other /\n contact-form .row {\n display: flex;\n margin: -1px 0 0 0;\n }\n\n contact-form fieldset .row:first-child {\n margin-top: 0;\n }\n\n contact-form badged-input.donation-contact-form-region {\n width: 60%;\n }\n\n contact-form badged-input.donation-contact-form-postal-code {\n width: 40%;\n }\n\n contact-form #donation-contact-form-region {\n width: ${iconFieldWidth};\n }\n\n contact-form #donation-contact-form-postal-code {\n width: ${noIconFieldWidth};\n }\n\n contact-form #donation-contact-form-error-message {\n color: red;\n font-size: 1.4rem;\n margin-bottom: 0.6rem;\n }\n\n contact-form #donation-contact-form-last-name {\n width: ${noIconFieldWidth};\n }\n\n / only show for screen readers */\n contact-form label {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n\n contact-form .donation-contact-form-input {\n width: ${iconFieldWidth};\n border: 0;\n outline: 0;\n background: transparent;\n font-weight: bold;\n color: ${fieldFontColor};\n font-size: ${fieldFontSize};\n padding: 0;\n font-family: ${fieldFontFamily};\n }\n\n contact-form .donation-contact-form-input::placeholder {\n color: revert;\n }\n\n contact-form #donation-contact-form-countryCodeAlpha2 {\n width: ${iconFieldWidth};\n height: 100%;\n box-sizing: border-box;\n font-weight: bold;\n font-size: ${fieldFontSize};\n font-family: ${fieldFontFamily};\n border: 0;\n background: #fff;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n </style>\n `;\n }\n}\n"]}

package/dist/src/form-elements/header/donation-form-header.js CHANGED Viewed

@@ -19,9 +19,7 @@ let DonationFormHeader = class DonationFormHeader extends LitElement {
     }
     /** @inheritdoc */
     render() {
-        return html `
-      ${this.currentTemplate}
-    `;
+        return html ` ${this.currentTemplate} `;
     }
     get currentTemplate() {
         switch (this.mode) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"donation-form-header.js","sourceRoot":"","sources":["../../../../src/form-elements/header/donation-form-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EACL,sBAAsB,GAEvB,MAAM,4CAA4C,CAAC;AAEpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,EAEL,iCAAiC,EACjC,kCAAkC,GACnC,MAAM,8CAA8C,CAAC;AAEtD,MAAM,CAAN,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAChC,6CAAmB,CAAA;IACnB,uCAAa,CAAA;AACf,CAAC,EAHW,sBAAsB,KAAtB,sBAAsB,QAGjC;~~AAGD~~,~~IAAa~~,kBAAkB,~~GAA/B~~,~~MAAa~~,kBAAmB,SAAQ,UAAU;~~IAAlD~~;;~~QAG8B~~,SAAI,GAA2B,sBAAsB,CAAC,IAAI,CAAC;QAE5D,kBAAa,GAAa,sBAAsB,CAAC;QAEhD,0BAAqB,GAC/C,iCAAiC,CAAC,SAAS,CAAC;QAElB,2BAAsB,GAChD,kCAAkC,CAAC,MAAM,CAAC;~~IAmE9C~~,CAAC;~~IA/DC~~,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA~~;QACP~~,IAAI,CAAC,eAAe~~;KACvB~~,CAAC;~~IACJ~~,CAAC;IAED,IAAY,eAAe;QACzB,QAAQ,IAAI,CAAC,IAAI,EAAE;YACjB,KAAK,sBAAsB,CAAC,OAAO;gBACjC,OAAO,IAAI,CAAC,uBAAuB,CAAC;YACtC,KAAK,sBAAsB,CAAC,IAAI;gBAC9B,OAAO,IAAI,CAAC,oBAAoB,CAAC;SACpC;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;wCACyB,IAAI,CAAC,YAAY,iBAAiB,IAAI,CAAC,kBAAkB;;KAE5F,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,CAAc;QACxC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,YAAmC,CAAC;QACjE,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,qBAAqB,EAAE;YACnD,MAAM,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE;SAC5C,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,iBAAiB,CAAC,CAAc;QACtC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QACzE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,GAAG,sBAAsB,CAAC,IAAI,CAAC;IAC1C,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,GAAG,sBAAsB,CAAC,OAAO,CAAC;IAC7C,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA,EAAE,CAAC;IACf,CAAC;CACF,CAAA;~~AA7E6B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA4D;AAE5D;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yDAAkD;AAEhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEACmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEACiB;AAEpB;IAAvB,KAAK,CAAC,eAAe,CAAC;wDAAyC;AAbrD,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,~~CA8E9B~~;~~SA9EY~~,kBAAkB","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport {\n defaultDonationAmounts,\n DonationPaymentInfo,\n} from '@internetarchive/donation-form-data-models';\n\nimport '@internetarchive/donation-form-edit-donation';\nimport {\n DonationFormEditDonation,\n EditDonationAmountSelectionLayout,\n EditDonationFrequencySelectionMode,\n} from '@internetarchive/donation-form-edit-donation';\n\nexport enum DonationFormHeaderMode {\n Summary = 'summary',\n Edit = 'edit',\n}\n\n@customElement('donation-form-header')\nexport class DonationFormHeader extends LitElement {\n @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n @property({ type: String }) mode: DonationFormHeaderMode = DonationFormHeaderMode.Edit;\n\n @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n @property({ type: String }) amountSelectionLayout: EditDonationAmountSelectionLayout =\n EditDonationAmountSelectionLayout.MultiLine;\n\n @property({ type: String }) frequencySelectionMode: EditDonationFrequencySelectionMode =\n EditDonationFrequencySelectionMode.Button;\n\n @query('edit-donation') editDonation?: DonationFormEditDonation;\n\n /** @inheritdoc /\n render(): TemplateResult {\n return html~~`\n~~ ${this.currentTemplate}\n `;\n }\n\n private get currentTemplate(): TemplateResult {\n switch (this.mode) {\n case DonationFormHeaderMode.Summary:\n return this.donationSummaryTemplate;\n case DonationFormHeaderMode.Edit:\n return this.editDonationTemplate;\n }\n }\n\n private get editDonationTemplate(): TemplateResult {\n return html`\n <donation-form-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 </donation-form-edit-donation>\n `;\n }\n\n private get donationSummaryTemplate(): TemplateResult {\n return html`\n <donation-summary .donationInfo=${this.donationInfo} @editClicked=${this.summaryEditClicked}>\n </donation-summary>\n `;\n }\n\n private donationInfoChanged(e: CustomEvent): void {\n this.donationInfo = e.detail.donationInfo as DonationPaymentInfo;\n const event = new CustomEvent('donationInfoChanged', {\n detail: { donationInfo: this.donationInfo },\n });\n this.dispatchEvent(event);\n }\n\n private editDonationError(e: CustomEvent): void {\n const event = new CustomEvent('editDonationError', { detail: e.detail });\n this.dispatchEvent(event);\n }\n\n private summaryEditClicked(): void {\n this.mode = DonationFormHeaderMode.Edit;\n }\n\n private showSummaryClicked(): void {\n this.mode = DonationFormHeaderMode.Summary;\n }\n\n /* @inheritdoc */\n static get styles(): CSSResult {\n return css``;\n }\n}\n"]}
1	+ {"version":3,"file":"donation-form-header.js","sourceRoot":"","sources":["../../../../src/form-elements/header/donation-form-header.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport {\n defaultDonationAmounts,\n DonationPaymentInfo,\n} from '@internetarchive/donation-form-data-models';\n\nimport '@internetarchive/donation-form-edit-donation';\nimport {\n DonationFormEditDonation,\n EditDonationAmountSelectionLayout,\n EditDonationFrequencySelectionMode,\n} from '@internetarchive/donation-form-edit-donation';\n\nexport enum DonationFormHeaderMode {\n Summary = 'summary',\n Edit = 'edit',\n}\n\n@customElement('donation-form-header')\nexport class DonationFormHeader extends LitElement {\n @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n @property({ type: String }) mode: DonationFormHeaderMode = DonationFormHeaderMode.Edit;\n\n @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n @property({ type: String }) amountSelectionLayout: EditDonationAmountSelectionLayout =\n EditDonationAmountSelectionLayout.MultiLine;\n\n @property({ type: String }) frequencySelectionMode: EditDonationFrequencySelectionMode =\n EditDonationFrequencySelectionMode.Button;\n\n @query('edit-donation') editDonation?: DonationFormEditDonation;\n\n /** @inheritdoc /\n render(): TemplateResult {\n return html` ${this.currentTemplate} `;\n }\n\n private get currentTemplate(): TemplateResult {\n switch (this.mode) {\n case DonationFormHeaderMode.Summary:\n return this.donationSummaryTemplate;\n case DonationFormHeaderMode.Edit:\n return this.editDonationTemplate;\n }\n }\n\n private get editDonationTemplate(): TemplateResult {\n return html`\n <donation-form-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 </donation-form-edit-donation>\n `;\n }\n\n private get donationSummaryTemplate(): TemplateResult {\n return html`\n <donation-summary .donationInfo=${this.donationInfo} @editClicked=${this.summaryEditClicked}>\n </donation-summary>\n `;\n }\n\n private donationInfoChanged(e: CustomEvent): void {\n this.donationInfo = e.detail.donationInfo as DonationPaymentInfo;\n const event = new CustomEvent('donationInfoChanged', {\n detail: { donationInfo: this.donationInfo },\n });\n this.dispatchEvent(event);\n }\n\n private editDonationError(e: CustomEvent): void {\n const event = new CustomEvent('editDonationError', { detail: e.detail });\n this.dispatchEvent(event);\n }\n\n private summaryEditClicked(): void {\n this.mode = DonationFormHeaderMode.Edit;\n }\n\n private showSummaryClicked(): void {\n this.mode = DonationFormHeaderMode.Summary;\n }\n\n /* @inheritdoc */\n static get styles(): CSSResult {\n return css``;\n }\n}\n"]}

package/dist/src/form-elements/header/donation-summary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"donation-summary.js","sourceRoot":"","sources":["../../../../src/form-elements/header/donation-summary.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAuB,MAAM,4CAA4C,CAAC;~~AAG/F~~,~~IAAa~~,eAAe,~~GAA5B~~,~~MAAa~~,eAAgB,SAAQ,UAAU;IAG7C,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,YAAY;uBACN,IAAI,CAAC,WAAW;KAClC,CAAC;IACJ,CAAC;IAED,IAAI,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO,EAAE,CAAC;SACX;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/F,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QACxC,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,mCAAmC;QACnC,IAAI,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YACjC,SAAS,GAAG,CAAC,CAAC;SACf;QAED,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;YACvD,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,SAAS;SACrB,CAAC,CAAC,MAAM,EAAE,CAAC;QAEZ,OAAO,GAAG,aAAa,IAAI,aAAa,WAAW,CAAC;IACtD,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;IAC/C,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;KAYT,CAAC;IACJ,CAAC;CACF,CAAA;AAnD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAoC;AADpD,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CAoD3B;SApDY,eAAe","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport currency from 'currency.js';\n\nimport { DonationType, DonationPaymentInfo } from '@internetarchive/donation-form-data-models';\n\n@customElement('donation-summary')\nexport class DonationSummary extends LitElement {\n @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n /** @inheritdoc /\n render(): TemplateResult {\n return html`\n <h1>${this.displayTitle}</h1>\n <button @click=${this.editClicked}>Edit this amount</button>\n `;\n }\n\n get displayTitle(): string {\n if (!this.donationInfo) {\n return '';\n }\n\n const monthlyString = this.donationInfo.donationType === DonationType.Monthly ? 'Monthly' : '';\n const amount = this.donationInfo.amount;\n let precision = 2;\n // whole number, don't use decimals\n if (amount === Math.round(amount)) {\n precision = 0;\n }\n\n const displayAmount = currency(this.donationInfo.amount, {\n symbol: '$',\n precision: precision,\n }).format();\n\n return `${displayAmount} ${monthlyString} Donation`;\n }\n\n private editClicked(): void {\n this.dispatchEvent(new Event('editClicked'));\n }\n\n /* @inheritdoc */\n static get styles(): CSSResult {\n return 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: blue;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"donation-summary.js","sourceRoot":"","sources":["../../../../src/form-elements/header/donation-summary.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAuB,MAAM,4CAA4C,CAAC;AAGxF,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAG7C,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,YAAY;uBACN,IAAI,CAAC,WAAW;KAClC,CAAC;IACJ,CAAC;IAED,IAAI,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO,EAAE,CAAC;SACX;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/F,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QACxC,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,mCAAmC;QACnC,IAAI,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YACjC,SAAS,GAAG,CAAC,CAAC;SACf;QAED,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;YACvD,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,SAAS;SACrB,CAAC,CAAC,MAAM,EAAE,CAAC;QAEZ,OAAO,GAAG,aAAa,IAAI,aAAa,WAAW,CAAC;IACtD,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;IAC/C,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;KAYT,CAAC;IACJ,CAAC;CACF,CAAA;AAnD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAoC;AADpD,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CAoD3B;SApDY,eAAe","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport currency from 'currency.js';\n\nimport { DonationType, DonationPaymentInfo } from '@internetarchive/donation-form-data-models';\n\n@customElement('donation-summary')\nexport class DonationSummary extends LitElement {\n @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n /** @inheritdoc /\n render(): TemplateResult {\n return html`\n <h1>${this.displayTitle}</h1>\n <button @click=${this.editClicked}>Edit this amount</button>\n `;\n }\n\n get displayTitle(): string {\n if (!this.donationInfo) {\n return '';\n }\n\n const monthlyString = this.donationInfo.donationType === DonationType.Monthly ? 'Monthly' : '';\n const amount = this.donationInfo.amount;\n let precision = 2;\n // whole number, don't use decimals\n if (amount === Math.round(amount)) {\n precision = 0;\n }\n\n const displayAmount = currency(this.donationInfo.amount, {\n symbol: '$',\n precision: precision,\n }).format();\n\n return `${displayAmount} ${monthlyString} Donation`;\n }\n\n private editClicked(): void {\n this.dispatchEvent(new Event('editClicked'));\n }\n\n /* @inheritdoc */\n static get styles(): CSSResult {\n return 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: blue;\n }\n `;\n }\n}\n"]}

package/dist/src/form-elements/payment-selector.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { __awaiter, __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import applePayButtonImage from '@internetarchive/icon-applepay';
-import googlePayButtonImage from '@internetarchive/icon-googlepay';
-import paypalButtonImage from '@internetarchive/icon-paypal';
-import venmoButtonImage from '@internetarchive/icon-venmo';
+import applePayButtonImage from '@internetarchive/icon-applepay/index.js';
+import googlePayButtonImage from '@internetarchive/icon-googlepay/index.js';
+import paypalButtonImage from '@internetarchive/icon-paypal/index.js';
+import venmoButtonImage from '@internetarchive/icon-venmo/index.js';
 var PaymentButtonMode;
 (function (PaymentButtonMode) {
     PaymentButtonMode["Loading"] = "loading";

package/dist/src/form-elements/payment-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"payment-selector.js","sourceRoot":"","sources":["../../../src/form-elements/payment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport applePayButtonImage from '@internetarchive/icon-applepay';\nimport googlePayButtonImage from '@internetarchive/icon-googlepay';\nimport paypalButtonImage from '@internetarchive/icon-paypal';\nimport venmoButtonImage from '@internetarchive/icon-venmo';\nimport { PaymentProvidersInterface } from '../braintree-manager/payment-providers-interface';\n\nenum PaymentButtonMode {\n Loading = 'loading',\n Available = 'available',\n Unavailable = 'unavailable',\n}\n\n@customElement('payment-selector')\nexport class PaymentSelector extends LitElement {\n @property({ type: Boolean }) donationInfoValid = true;\n\n @property({ type: Object }) paymentProviders?: PaymentProvidersInterface;\n\n @property({ type: String }) private applePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private googlePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private venmoMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private payPalMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n /** @inheritdoc /\n render(): TemplateResult {\n return html`\n <div\n class=\"payment-container ${this.donationInfoValid\n ? 'donation-info-valid'\n : 'donation-info-invalid'}\n \"\n >\n <div class=\"payment-provider-container\">\n <button\n class=\"applepay provider-button ${this.applePayMode}\"\n @click=${this.applePaySelected}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${applePayButtonImage}</div>\n </button>\n\n <button\n class=\"googlepay provider-button ${this.googlePayMode}\"\n @click=${this.googlePaySelected}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${googlePayButtonImage}</div>\n </button>\n\n <button\n class=\"venmo provider-button ${this.venmoMode}\"\n @click=${this.venmoSelected}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${venmoButtonImage}</div>\n </button>\n\n <div class=\"paypal-container provider-button ${this.payPalMode}\" tabindex=\"0\">\n <div class=\"payment-image\">\n <div class=\"paypal-local-button\" @click=${this.localPaypalButtonClicked}>\n ${paypalButtonImage}\n </div>\n <slot name=\"paypal-button\"></slot>\n </div>\n </div>\n </div>\n\n <div class=\"credit-card-container\">\n <button\n @click=${this.creditCardSelected}\n class=\"button-style credit-card-button\"\n tabindex=\"0\"\n >\n <div class=\"cc-title\">Credit Card</div>\n <div class=\"cc-background\"></div>\n </button>\n </div>\n </div>\n `;\n }\n\n /* @inheritdoc /\n firstUpdated(): void {\n this.dispatchEvent(new Event('firstUpdated'));\n }\n\n /* @inheritdoc /\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 private async setButtonVisibility(): Promise<void> {\n this.paymentProviders?.venmoHandler\n .get()\n .then(handler => {\n if (!handler) {\n this.venmoMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isBrowserSupported()\n .then(supported => {\n this.venmoMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading venmo', reason);\n this.venmoMode = PaymentButtonMode.Unavailable;\n });\n })\n .catch(reason => {\n console.error('venmo unavailable', reason);\n this.venmoMode = PaymentButtonMode.Unavailable;\n });\n\n this.paymentProviders?.applePayHandler\n .get()\n .then(handler => {\n if (!handler) {\n console.error('applePayHandler unavailable');\n this.applePayMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isAvailable()\n .then(supported => {\n this.applePayMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading applepay', reason);\n this.applePayMode = PaymentButtonMode.Unavailable;\n });\n })\n .catch(reason => {\n console.error('apple pay unavailable', reason);\n this.applePayMode = PaymentButtonMode.Unavailable;\n });\n\n this.paymentProviders?.googlePayHandler\n .get()\n .then(handler => {\n if (!handler) {\n console.error('google pay handler unavailable');\n this.googlePayMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isBrowserSupported()\n .then(supported => {\n this.googlePayMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading googlepay', reason);\n this.googlePayMode = PaymentButtonMode.Unavailable;\n });\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 const event = new CustomEvent('applePaySelected', { detail: { originalEvent: e } });\n this.dispatchEvent(event);\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 /* @inheritdoc /\n static get styles(): CSSResult {\n const paymentButtonWidthCss = css`var(--paymentButtonWidth, 5rem)`;\n const paymentButtonHeightCss = css`var(--paymentButtonHeight, 3.2rem)`;\n const creditCardFontSizeCss = css`var(--creditCardFontSize, 1.8rem)`;\n\n return css`\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: 1rem;\n margin-bottom: 1rem;\n max-width: 23rem;\n }\n\n .provider-button {\n border: 0;\n padding: 0;\n background: none;\n cursor: pointer;\n width: ${paymentButtonWidthCss};\n height: ${paymentButtonHeightCss};\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 / account for the borders that don't exist once the provider loads, otherwise the layout shifts */\n margin-bottom: -2px;\n }\n\n .provider-button.loading .payment-image {\n display: none;\n }\n\n .paypal-local-button {\n position: absolute;\n width: ${paymentButtonWidthCss};\n height: ${paymentButtonHeightCss};\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(--ccButtonFontColor, #333);\n background-color: var(--ccButtonColor, white);\n border: 1px solid #333;\n border-radius: 4px;\n cursor: pointer;\n margin: 0;\n padding: 0.7rem 1rem;\n width: 100%;\n }\n\n .credit-card-button .cc-background {\n height: 2.4rem;\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: ${creditCardFontSizeCss};\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"payment-selector.js","sourceRoot":"","sources":["../../../src/form-elements/payment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport applePayButtonImage from '@internetarchive/icon-applepay/index.js';\nimport googlePayButtonImage from '@internetarchive/icon-googlepay/index.js';\nimport paypalButtonImage from '@internetarchive/icon-paypal/index.js';\nimport venmoButtonImage from '@internetarchive/icon-venmo/index.js';\nimport { PaymentProvidersInterface } from '../braintree-manager/payment-providers-interface';\n\nenum PaymentButtonMode {\n Loading = 'loading',\n Available = 'available',\n Unavailable = 'unavailable',\n}\n\n@customElement('payment-selector')\nexport class PaymentSelector extends LitElement {\n @property({ type: Boolean }) donationInfoValid = true;\n\n @property({ type: Object }) paymentProviders?: PaymentProvidersInterface;\n\n @property({ type: String }) private applePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private googlePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private venmoMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private payPalMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n /** @inheritdoc /\n render(): TemplateResult {\n return html`\n <div\n class=\"payment-container ${this.donationInfoValid\n ? 'donation-info-valid'\n : 'donation-info-invalid'}\n \"\n >\n <div class=\"payment-provider-container\">\n <button\n class=\"applepay provider-button ${this.applePayMode}\"\n @click=${this.applePaySelected}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${applePayButtonImage}</div>\n </button>\n\n <button\n class=\"googlepay provider-button ${this.googlePayMode}\"\n @click=${this.googlePaySelected}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${googlePayButtonImage}</div>\n </button>\n\n <button\n class=\"venmo provider-button ${this.venmoMode}\"\n @click=${this.venmoSelected}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${venmoButtonImage}</div>\n </button>\n\n <div class=\"paypal-container provider-button ${this.payPalMode}\" tabindex=\"0\">\n <div class=\"payment-image\">\n <div class=\"paypal-local-button\" @click=${this.localPaypalButtonClicked}>\n ${paypalButtonImage}\n </div>\n <slot name=\"paypal-button\"></slot>\n </div>\n </div>\n </div>\n\n <div class=\"credit-card-container\">\n <button\n @click=${this.creditCardSelected}\n class=\"button-style credit-card-button\"\n tabindex=\"0\"\n >\n <div class=\"cc-title\">Credit Card</div>\n <div class=\"cc-background\"></div>\n </button>\n </div>\n </div>\n `;\n }\n\n /* @inheritdoc /\n firstUpdated(): void {\n this.dispatchEvent(new Event('firstUpdated'));\n }\n\n /* @inheritdoc /\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 private async setButtonVisibility(): Promise<void> {\n this.paymentProviders?.venmoHandler\n .get()\n .then(handler => {\n if (!handler) {\n this.venmoMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isBrowserSupported()\n .then(supported => {\n this.venmoMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading venmo', reason);\n this.venmoMode = PaymentButtonMode.Unavailable;\n });\n })\n .catch(reason => {\n console.error('venmo unavailable', reason);\n this.venmoMode = PaymentButtonMode.Unavailable;\n });\n\n this.paymentProviders?.applePayHandler\n .get()\n .then(handler => {\n if (!handler) {\n console.error('applePayHandler unavailable');\n this.applePayMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isAvailable()\n .then(supported => {\n this.applePayMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading applepay', reason);\n this.applePayMode = PaymentButtonMode.Unavailable;\n });\n })\n .catch(reason => {\n console.error('apple pay unavailable', reason);\n this.applePayMode = PaymentButtonMode.Unavailable;\n });\n\n this.paymentProviders?.googlePayHandler\n .get()\n .then(handler => {\n if (!handler) {\n console.error('google pay handler unavailable');\n this.googlePayMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isBrowserSupported()\n .then(supported => {\n this.googlePayMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading googlepay', reason);\n this.googlePayMode = PaymentButtonMode.Unavailable;\n });\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 const event = new CustomEvent('applePaySelected', { detail: { originalEvent: e } });\n this.dispatchEvent(event);\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 /* @inheritdoc /\n static get styles(): CSSResult {\n const paymentButtonWidthCss = css`var(--paymentButtonWidth, 5rem)`;\n const paymentButtonHeightCss = css`var(--paymentButtonHeight, 3.2rem)`;\n const creditCardFontSizeCss = css`var(--creditCardFontSize, 1.8rem)`;\n\n return css`\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: 1rem;\n margin-bottom: 1rem;\n max-width: 23rem;\n }\n\n .provider-button {\n border: 0;\n padding: 0;\n background: none;\n cursor: pointer;\n width: ${paymentButtonWidthCss};\n height: ${paymentButtonHeightCss};\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 / account for the borders that don't exist once the provider loads, otherwise the layout shifts */\n margin-bottom: -2px;\n }\n\n .provider-button.loading .payment-image {\n display: none;\n }\n\n .paypal-local-button {\n position: absolute;\n width: ${paymentButtonWidthCss};\n height: ${paymentButtonHeightCss};\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(--ccButtonFontColor, #333);\n background-color: var(--ccButtonColor, white);\n border: 1px solid #333;\n border-radius: 4px;\n cursor: pointer;\n margin: 0;\n padding: 0.7rem 1rem;\n width: 100%;\n }\n\n .credit-card-button .cc-background {\n height: 2.4rem;\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: ${creditCardFontSizeCss};\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n `;\n }\n}\n"]}

package/dist/src/form-elements/total-amount.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"total-amount.js","sourceRoot":"","sources":["../../../src/form-elements/total-amount.ts"],"names":[],"mappings":";AAAA,OAAO,EAAuB,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC/F,OAAO,EAAE,GAAG,EAAa,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,QAAQ,MAAM,aAAa,CAAC;~~AAGnC~~,~~IAAa~~,WAAW,~~GAAxB~~,~~MAAa~~,WAAY,SAAQ,UAAU;IAIzC,MAAM;QACJ,OAAO,IAAI,CAAA;;uCAEwB,IAAI,CAAC,WAAW;KAClD,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;QAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QACxF,OAAO,GAAG,MAAM,GAAG,OAAO,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,SAAS,GAAG,GAAG,CAAA,mCAAmC,CAAC;QACzD,MAAM,aAAa,GAAG,GAAG,CAAA,sCAAsC,CAAC;QAChE,MAAM,0BAA0B,GAAG,GAAG,CAAA,2CAA2C,CAAC;QAClF,MAAM,mBAAmB,GAAG,GAAG,CAAA,oCAAoC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;kBAGI,aAAa;4BACH,SAAS;;;;qBAIhB,mBAAmB;;;sBAGlB,0BAA0B;;KAE3C,CAAC;IACJ,CAAC;CACF,CAAA;AArCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACQ;AAFxB,WAAW;IADvB,aAAa,CAAC,4BAA4B,CAAC;GAC/B,WAAW,CAuCvB;SAvCY,WAAW","sourcesContent":["import { DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';\nimport { css, CSSResult, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport currency from 'currency.js';\n\n@customElement('donation-form-total-amount')\nexport class TotalAmount extends LitElement {\n @property({ type: Object })\n donationInfo?: DonationPaymentInfo;\n\n render(): TemplateResult {\n return html`\n <div class=\"top-line\"></div>\n <div class=\"total-line\">Total: ${this.totalAmount}</div>\n `;\n }\n\n private get totalAmount(): string \| undefined {\n if (!this.donationInfo) return;\n const amount = currency(this.donationInfo.total, { symbol: '$' }).format();\n const monthly = this.donationInfo.donationType === DonationType.Monthly ? '/month' : '';\n return `${amount}${monthly}`;\n }\n\n static get styles(): CSSResult {\n const lineColor = css`var(--totalAmountLineColor, #333)`;\n const lineThickness = css`var(--totalAmountLineThickness, 2px)`;\n const totalAmountVerticalSpacing = css`var(--totalAmountVerticalSpacing, 0.5rem)`;\n const totalAmountFontSize = css`var(--totalAmountFontSize, 2.6rem)`;\n\n return css`\n .top-line {\n width: 100%;\n height: ${lineThickness};\n background-color: ${lineColor};\n }\n\n .total-line {\n font-size: ${totalAmountFontSize};\n font-weight: bold;\n text-align: center;\n margin-top: ${totalAmountVerticalSpacing};\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"total-amount.js","sourceRoot":"","sources":["../../../src/form-elements/total-amount.ts"],"names":[],"mappings":";AAAA,OAAO,EAAuB,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC/F,OAAO,EAAE,GAAG,EAAa,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAG5B,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAIzC,MAAM;QACJ,OAAO,IAAI,CAAA;;uCAEwB,IAAI,CAAC,WAAW;KAClD,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;QAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QACxF,OAAO,GAAG,MAAM,GAAG,OAAO,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,SAAS,GAAG,GAAG,CAAA,mCAAmC,CAAC;QACzD,MAAM,aAAa,GAAG,GAAG,CAAA,sCAAsC,CAAC;QAChE,MAAM,0BAA0B,GAAG,GAAG,CAAA,2CAA2C,CAAC;QAClF,MAAM,mBAAmB,GAAG,GAAG,CAAA,oCAAoC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;kBAGI,aAAa;4BACH,SAAS;;;;qBAIhB,mBAAmB;;;sBAGlB,0BAA0B;;KAE3C,CAAC;IACJ,CAAC;CACF,CAAA;AArCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACQ;AAFxB,WAAW;IADvB,aAAa,CAAC,4BAA4B,CAAC;GAC/B,WAAW,CAuCvB;SAvCY,WAAW","sourcesContent":["import { DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';\nimport { css, CSSResult, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport currency from 'currency.js';\n\n@customElement('donation-form-total-amount')\nexport class TotalAmount extends LitElement {\n @property({ type: Object })\n donationInfo?: DonationPaymentInfo;\n\n render(): TemplateResult {\n return html`\n <div class=\"top-line\"></div>\n <div class=\"total-line\">Total: ${this.totalAmount}</div>\n `;\n }\n\n private get totalAmount(): string \| undefined {\n if (!this.donationInfo) return;\n const amount = currency(this.donationInfo.total, { symbol: '$' }).format();\n const monthly = this.donationInfo.donationType === DonationType.Monthly ? '/month' : '';\n return `${amount}${monthly}`;\n }\n\n static get styles(): CSSResult {\n const lineColor = css`var(--totalAmountLineColor, #333)`;\n const lineThickness = css`var(--totalAmountLineThickness, 2px)`;\n const totalAmountVerticalSpacing = css`var(--totalAmountVerticalSpacing, 0.5rem)`;\n const totalAmountFontSize = css`var(--totalAmountFontSize, 2.6rem)`;\n\n return css`\n .top-line {\n width: 100%;\n height: ${lineThickness};\n background-color: ${lineColor};\n }\n\n .total-line {\n font-size: ${totalAmountFontSize};\n font-weight: bold;\n text-align: center;\n margin-top: ${totalAmountVerticalSpacing};\n }\n `;\n }\n}\n"]}

package/dist/src/modals/confirm-donation-modal-content.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
 /* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/ban-types */
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { DonationType } from '@internetarchive/donation-form-data-models';
@@ -26,12 +27,19 @@ let ConfirmDonationContent = class ConfirmDonationContent extends LitElement {
     get confirmationText() {
         const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
         return html `
-    <p>You are about to make a <b>${this.donationType}</b> donation of <b>${amount} ${this.currencyType}</b> to the Internet Archive.</p>
+      <p>
+        You are about to make a <b>${this.donationType}</b> donation of
+        <b>${amount} ${this.currencyType}</b> to the Internet Archive.
+      </p>
     `;
     }
     get confirmUpsellText() {
         const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
-        return html `<p>You are about to begin making <b>monthly</b> donations of <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring contribution will be next month.)</p>`;
+        return html `<p>
+      You are about to begin making <b>monthly</b> donations of
+      <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring
+      contribution will be next month.)
+    </p>`;
     }
     confirm() {
         this === null || this === void 0 ? void 0 : this.confirmDonation();
@@ -40,7 +48,9 @@ let ConfirmDonationContent = class ConfirmDonationContent extends LitElement {
         this === null || this === void 0 ? void 0 : this.cancelDonation();
     }
     get confirmCTA() {
-        return this.donationType === DonationType.Upsell ? 'Start monthly donation' : 'Complete donation';
+        return this.donationType === DonationType.Upsell
+            ? 'Start monthly donation'
+            : 'Complete donation';
     }
     /** @inheritdoc */
     render() {