@internetarchive/elements 1.1.7-webdev-9378.0 → 1.1.7-webdev-9054.1

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-badged-input.js

@@ -0,0 +1,163 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../../util/custom-element.js';
+import themeStyles from '../../../themes/theme-styles.js';
+/** Whether a hidden icon or required marker keeps its space, so neighbouring fields still line up. */
+export const SpacerOption = {
+    LeaveSpace: 'leave-space',
+    CompressSpace: 'compress-space',
+};
+/**
+ * A bordered field wrapper with an icon on the left and a required marker,
+ * which turns red on error. The field itself is slotted in, so it works for
+ * plain inputs, selects and Braintree's hosted field containers alike.
+ */
+let IADonationBadgedInput = class IADonationBadgedInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.error = false;
+        this.required = false;
+        /** When there's no icon, whether its column stays or collapses */
+        this.iconSpaceOption = SpacerOption.LeaveSpace;
+        /** When the field isn't required, whether the marker's space stays or collapses */
+        this.requiredIndicatorSpaceOption = SpacerOption.LeaveSpace;
+    }
+    render() {
+        return html `
+      <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}
+        </div>
+
+        <slot></slot>
+      </div>
+    `;
+    }
+    get errorClass() {
+        return this.error ? 'error' : '';
+    }
+    get iconSpaceOptionClass() {
+        return this.iconSpaceOption === SpacerOption.CompressSpace
+            ? 'compress-space'
+            : '';
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --donation-badged-input-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          --donation-badged-input-border--: var(
+            --ia-donation-form-input-border,
+            1px solid #d9d9d9
+          );
+          --donation-badged-input-error-color--: var(
+            --ia-donation-badged-input-error-color,
+            var(--color-danger)
+          );
+          --donation-badged-input-icon-size--: var(
+            --ia-donation-badged-input-icon-size,
+            calc(var(--donation-badged-input-base-font-size--) * 2)
+          );
+          --donation-badged-input-icon-color--: var(
+            --ia-donation-badged-input-icon-color,
+            #2c2c2c
+          );
+          --donation-badged-input-icon-spacer-width--: var(
+            --ia-donation-badged-input-icon-spacer-width,
+            calc(var(--donation-badged-input-base-font-size--) * 3)
+          );
+          --donation-badged-input-no-icon-spacer-width--: var(
+            --ia-donation-badged-input-no-icon-spacer-width,
+            var(--donation-badged-input-base-font-size--)
+          );
+          --donation-badged-input-height--: var(
+            --ia-donation-badged-input-height,
+            calc(var(--donation-badged-input-base-font-size--) * 3)
+          );
+          --donation-badged-input-required-color--: var(
+            --ia-donation-badged-input-required-color,
+            var(--color-danger)
+          );
+          --donation-badged-input-required-margin--: var(
+            --ia-donation-badged-input-required-margin,
+            0 0.25rem 0 0
+          );
+          --donation-badged-input-required-font-size--: var(
+            --ia-donation-badged-input-required-font-size,
+            calc(var(--donation-badged-input-base-font-size--) * 2)
+          );
+        }
+
+        .input-wrapper {
+          border: var(--donation-badged-input-border--);
+          height: var(--donation-badged-input-height--);
+          display: flex;
+          align-items: center;
+        }
+
+        .input-wrapper.error {
+          box-shadow: inset 0px 0px 0px 1px
+            var(--donation-badged-input-error-color--);
+          border-color: var(--donation-badged-input-error-color--);
+        }
+
+        .input-wrapper.compress-space .icon-container {
+          width: var(--donation-badged-input-no-icon-spacer-width--);
+        }
+
+        .icon-container {
+          width: var(--donation-badged-input-icon-spacer-width--);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        }
+
+        /* Masked glyphs take their shape from the mask and their colour from here */
+        .icon-container .ia-icon {
+          width: var(--donation-badged-input-icon-size--);
+          height: var(--donation-badged-input-icon-size--);
+          background-color: var(--donation-badged-input-icon-color--);
+        }
+
+        .required-indicator {
+          color: var(--donation-badged-input-required-color--);
+          font-size: var(--donation-badged-input-required-font-size--);
+          margin: var(--donation-badged-input-required-margin--);
+        }
+
+        .required-indicator.leave-space {
+          width: 0.5em;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], IADonationBadgedInput.prototype, "error", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationBadgedInput.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], IADonationBadgedInput.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], IADonationBadgedInput.prototype, "iconSpaceOption", void 0);
+__decorate([
+    property({ type: String })
+], IADonationBadgedInput.prototype, "requiredIndicatorSpaceOption", void 0);
+IADonationBadgedInput = __decorate([
+    customElement('ia-donation-badged-input')
+], IADonationBadgedInput);
+export { IADonationBadgedInput };
+//# sourceMappingURL=ia-donation-badged-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-badged-input.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-badged-input.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,OAAO,GAGR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,sGAAsG;AACtG,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,aAAa;IACzB,aAAa,EAAE,gBAAgB;CACvB,CAAC;AAIX;;;;GAIG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QACwB,UAAK,GAAG,KAAK,CAAC;QAId,aAAQ,GAAG,KAAK,CAAC;QAE9C,kEAAkE;QACtC,oBAAe,GACzC,YAAY,CAAC,UAAU,CAAC;QAE1B,mFAAmF;QACvD,iCAA4B,GACtD,YAAY,CAAC,UAAU,CAAC;IA0H5B,CAAC;IAxHC,MAAM;QACJ,OAAO,IAAI,CAAA;;+BAEgB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,oBAAoB;;sCAErC,IAAI,CAAC,IAAI;yCACN,IAAI,CAAC,4BAA4B;YAC9D,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,CAAC,OAAO;;;;;KAKxC,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;YACxD,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyFF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAtI8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAAe;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAkB;AAGlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DACD;AAGE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2EACD;AAbf,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAuIjC","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/** Whether a hidden icon or required marker keeps its space, so neighbouring fields still line up. */\nexport const SpacerOption = {\n  LeaveSpace: 'leave-space',\n  CompressSpace: 'compress-space',\n} as const;\n\nexport type SpacerOption = (typeof SpacerOption)[keyof typeof SpacerOption];\n\n/**\n * A bordered field wrapper with an icon on the left and a required marker,\n * which turns red on error. The field itself is slotted in, so it works for\n * plain inputs, selects and Braintree's hosted field containers alike.\n */\n@customElement('ia-donation-badged-input')\nexport class IADonationBadgedInput extends LitElement {\n  @property({ type: Boolean }) error = false;\n\n  @property({ type: Object }) icon?: TemplateResult;\n\n  @property({ type: Boolean }) required = false;\n\n  /** When there's no icon, whether its column stays or collapses */\n  @property({ type: String }) iconSpaceOption: SpacerOption =\n    SpacerOption.LeaveSpace;\n\n  /** When the field isn't required, whether the marker's space stays or collapses */\n  @property({ type: String }) requiredIndicatorSpaceOption: SpacerOption =\n    SpacerOption.LeaveSpace;\n\n  render(): TemplateResult {\n    return html`\n      <div\n        class=\"input-wrapper ${this.errorClass} ${this.iconSpaceOptionClass}\"\n      >\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\n      ? 'compress-space'\n      : '';\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --donation-badged-input-base-font-size--: var(\n            --ia-donation-form-base-font-size,\n            10px\n          );\n          --donation-badged-input-border--: var(\n            --ia-donation-form-input-border,\n            1px solid #d9d9d9\n          );\n          --donation-badged-input-error-color--: var(\n            --ia-donation-badged-input-error-color,\n            var(--color-danger)\n          );\n          --donation-badged-input-icon-size--: var(\n            --ia-donation-badged-input-icon-size,\n            calc(var(--donation-badged-input-base-font-size--) * 2)\n          );\n          --donation-badged-input-icon-color--: var(\n            --ia-donation-badged-input-icon-color,\n            #2c2c2c\n          );\n          --donation-badged-input-icon-spacer-width--: var(\n            --ia-donation-badged-input-icon-spacer-width,\n            calc(var(--donation-badged-input-base-font-size--) * 3)\n          );\n          --donation-badged-input-no-icon-spacer-width--: var(\n            --ia-donation-badged-input-no-icon-spacer-width,\n            var(--donation-badged-input-base-font-size--)\n          );\n          --donation-badged-input-height--: var(\n            --ia-donation-badged-input-height,\n            calc(var(--donation-badged-input-base-font-size--) * 3)\n          );\n          --donation-badged-input-required-color--: var(\n            --ia-donation-badged-input-required-color,\n            var(--color-danger)\n          );\n          --donation-badged-input-required-margin--: var(\n            --ia-donation-badged-input-required-margin,\n            0 0.25rem 0 0\n          );\n          --donation-badged-input-required-font-size--: var(\n            --ia-donation-badged-input-required-font-size,\n            calc(var(--donation-badged-input-base-font-size--) * 2)\n          );\n        }\n\n        .input-wrapper {\n          border: var(--donation-badged-input-border--);\n          height: var(--donation-badged-input-height--);\n          display: flex;\n          align-items: center;\n        }\n\n        .input-wrapper.error {\n          box-shadow: inset 0px 0px 0px 1px\n            var(--donation-badged-input-error-color--);\n          border-color: var(--donation-badged-input-error-color--);\n        }\n\n        .input-wrapper.compress-space .icon-container {\n          width: var(--donation-badged-input-no-icon-spacer-width--);\n        }\n\n        .icon-container {\n          width: var(--donation-badged-input-icon-spacer-width--);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-shrink: 0;\n        }\n\n        /* Masked glyphs take their shape from the mask and their colour from here */\n        .icon-container .ia-icon {\n          width: var(--donation-badged-input-icon-size--);\n          height: var(--donation-badged-input-icon-size--);\n          background-color: var(--donation-badged-input-icon-color--);\n        }\n\n        .required-indicator {\n          color: var(--donation-badged-input-required-color--);\n          font-size: var(--donation-badged-input-required-font-size--);\n          margin: var(--donation-badged-input-required-margin--);\n        }\n\n        .required-indicator.leave-space {\n          width: 0.5em;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-credit-card-fields.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { type HostedFieldContainerInterface } from '../braintree/payment-providers/credit-card/hosted-field-container.js';
+import './ia-donation-badged-input.js';
+/**
+ * The Braintree hosted fields (card number, expiration, CVC) and their error
+ * message. It owns the containers Braintree renders into, the way
+ * `ia-donation-contact-form` owns its inputs.
+ *
+ * Braintree renders each real `<input>` inside a cross-origin iframe, so a
+ * `<label for>` can't point at it and the visible labels are text only. No
+ * placeholders are configured on the hosted fields either, so the label is
+ * the only text a donor sees.
+ *
+ * This renders into the light DOM, since Braintree's hosted fields don't work
+ * inside a shadow root. Its styles are a `<style>` block with every selector
+ * prefixed by the tag name.
+ */
+export declare class IADonationCreditCardFields extends LitElement {
+    private numberField;
+    private expirationField;
+    private cvvField;
+    private errorMessageField;
+    get hostedFieldContainer(): HostedFieldContainerInterface;
+    render(): TemplateResult;
+    /** Light DOM, so Braintree can render its hosted fields */
+    createRenderRoot(): this;
+    /**
+     * The element renders into the light DOM, so instead of a `styles` block
+     * it writes its own `<style>` tag, with every selector prefixed by the tag
+     * name so nothing leaks onto the rest of the page.
+     */
+    private get getStyles();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ia-donation-credit-card-fields': IADonationCreditCardFields;
+    }
+}
+//# sourceMappingURL=ia-donation-credit-card-fields.d.ts.map

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-credit-card-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-credit-card-fields.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-credit-card-fields.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D,OAAO,EAEL,KAAK,6BAA6B,EACnC,MAAM,mEAAmE,CAAC;AAG3E,OAAO,4BAA4B,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,qBACa,0BAA2B,SAAQ,UAAU;IACxB,OAAO,CAAC,WAAW,CAAkB;IAErC,OAAO,CAAC,eAAe,CAAkB;IAEhD,OAAO,CAAC,QAAQ,CAAkB;IAExB,OAAO,CAAC,iBAAiB,CAAkB;IAE9E,IAAI,oBAAoB,IAAI,6BAA6B,CAOxD;IAED,MAAM,IAAI,cAAc;IAmDxB,2DAA2D;IAC3D,gBAAgB,IAAI,IAAI;IAIxB;;;;OAIG;IACH,OAAO,KAAK,SAAS,GAsGpB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gCAAgC,EAAE,0BAA0B,CAAC;KAC9D;CACF"}

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-credit-card-fields.js

@@ -0,0 +1,212 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { query } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { customElement } from '../../../util/custom-element.js';
+import { HostedFieldContainer, } from '../braintree/payment-providers/credit-card/hosted-field-container.js';
+import { calendarIcon, creditCardIcon, lockIcon } from '../icons.js';
+import { SpacerOption } from './ia-donation-badged-input.js';
+import './ia-donation-badged-input.js';
+/**
+ * The Braintree hosted fields (card number, expiration, CVC) and their error
+ * message. It owns the containers Braintree renders into, the way
+ * `ia-donation-contact-form` owns its inputs.
+ *
+ * Braintree renders each real `<input>` inside a cross-origin iframe, so a
+ * `<label for>` can't point at it and the visible labels are text only. No
+ * placeholders are configured on the hosted fields either, so the label is
+ * the only text a donor sees.
+ *
+ * This renders into the light DOM, since Braintree's hosted fields don't work
+ * inside a shadow root. Its styles are a `<style>` block with every selector
+ * prefixed by the tag name.
+ */
+let IADonationCreditCardFields = class IADonationCreditCardFields extends LitElement {
+    get hostedFieldContainer() {
+        return new HostedFieldContainer({
+            number: this.numberField,
+            cvv: this.cvvField,
+            expirationDate: this.expirationField,
+            errorContainer: this.errorMessageField,
+        });
+    }
+    render() {
+        return html `
+      <div id="braintree-error-message"></div>
+      <div class="braintree-row">
+        <div class="field">
+          <span class="field-label"
+            >${msg('Card Number')}<span class="required-asterisk">
+              *</span
+            ></span
+          >
+          <ia-donation-badged-input
+            .icon=${creditCardIcon}
+            .requiredIndicatorSpaceOption=${SpacerOption.CompressSpace}
+            class="creditcard"
+          >
+            <div class="braintree-input" id="braintree-creditcard"></div>
+          </ia-donation-badged-input>
+        </div>
+      </div>
+      <div class="braintree-row expiration-cvv-row">
+        <div class="field">
+          <span class="field-label"
+            >${msg('Expiration (MM / YY)')}<span class="required-asterisk">
+              *</span
+            ></span
+          >
+          <ia-donation-badged-input
+            .icon=${calendarIcon}
+            .requiredIndicatorSpaceOption=${SpacerOption.CompressSpace}
+            class="expiration"
+          >
+            <div class="braintree-input" id="braintree-expiration"></div>
+          </ia-donation-badged-input>
+        </div>
+        <div class="field">
+          <span class="field-label"
+            >${msg('CVC')}<span class="required-asterisk"> *</span></span
+          >
+          <ia-donation-badged-input
+            .icon=${lockIcon}
+            .requiredIndicatorSpaceOption=${SpacerOption.CompressSpace}
+            class="cvv"
+          >
+            <div class="braintree-input" id="braintree-cvv"></div>
+          </ia-donation-badged-input>
+        </div>
+      </div>
+      ${this.getStyles}
+    `;
+    }
+    /** Light DOM, so Braintree can render its hosted fields */
+    createRenderRoot() {
+        return this;
+    }
+    /**
+     * The element renders into the light DOM, so instead of a `styles` block
+     * it writes its own `<style>` tag, with every selector prefixed by the tag
+     * name so nothing leaks onto the rest of the page.
+     */
+    get getStyles() {
+        return html `
+      <style>
+        ia-donation-credit-card-fields {
+          --donation-card-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          --donation-card-label-font-family--: var(
+            --ia-donation-field-label-font-family,
+            var(
+              --ia-theme-base-font-family,
+              'Helvetica Neue',
+              Helvetica,
+              Arial,
+              sans-serif
+            )
+          );
+          --donation-card-label-font-size--: var(
+            --ia-donation-field-label-font-size,
+            calc(var(--donation-card-base-font-size--) * 1.4)
+          );
+          --donation-card-label-color--: var(
+            --ia-donation-field-label-color,
+            #2c2c2c
+          );
+          --donation-card-label-margin-bottom--: var(
+            --ia-donation-field-label-margin-bottom,
+            calc(var(--donation-card-base-font-size--) * 0.5)
+          );
+          --donation-card-row-gap--: var(
+            --ia-donation-field-row-gap,
+            calc(var(--donation-card-base-font-size--) * 0.5)
+          );
+          --donation-card-required-color--: var(
+            --ia-donation-badged-input-required-color,
+            var(--ia-theme-color-danger, #e51c23)
+          );
+          --donation-card-error-color--: var(--ia-theme-color-danger, #e51c23);
+        }
+
+        ia-donation-credit-card-fields .field-label {
+          display: block;
+          font-family: var(--donation-card-label-font-family--);
+          font-size: var(--donation-card-label-font-size--);
+          font-weight: bold;
+          color: var(--donation-card-label-color--);
+          margin-bottom: var(--donation-card-label-margin-bottom--);
+        }
+
+        ia-donation-credit-card-fields .required-asterisk {
+          color: var(--donation-card-required-color--);
+        }
+
+        /*
+          A grid, so a label that wraps to two lines in one column doesn't push
+          that column's input out of line with its sibling. Both labels share
+          row line 1 and both inputs share row line 2.
+        */
+        ia-donation-credit-card-fields .braintree-row {
+          display: grid;
+          grid-auto-flow: column;
+          grid-auto-columns: 1fr;
+          grid-template-rows: auto auto;
+          column-gap: var(--donation-card-row-gap--);
+        }
+
+        /*
+          The expiration column is wider than the CVC column so its
+          "Expiration (MM / YY)" label stays on one line. CVC's label has
+          room to spare.
+        */
+        ia-donation-credit-card-fields .braintree-row.expiration-cvv-row {
+          grid-template-columns:
+            calc(50% + var(--donation-card-base-font-size--) * 2.5)
+            calc(50% - var(--donation-card-base-font-size--) * 2.5);
+        }
+
+        ia-donation-credit-card-fields .braintree-row + .braintree-row {
+          margin-top: var(--donation-card-row-gap--);
+        }
+
+        ia-donation-credit-card-fields .field {
+          display: contents;
+        }
+
+        ia-donation-credit-card-fields ia-donation-badged-input {
+          width: 100%;
+        }
+
+        ia-donation-credit-card-fields .braintree-input {
+          width: 100%;
+          height: 100%;
+        }
+
+        ia-donation-credit-card-fields #braintree-error-message {
+          color: var(--donation-card-error-color--);
+          font-size: calc(var(--donation-card-base-font-size--) * 1.4);
+          margin-bottom: calc(var(--donation-card-base-font-size--) * 0.6);
+        }
+      </style>
+    `;
+    }
+};
+__decorate([
+    query('#braintree-creditcard')
+], IADonationCreditCardFields.prototype, "numberField", void 0);
+__decorate([
+    query('#braintree-expiration')
+], IADonationCreditCardFields.prototype, "expirationField", void 0);
+__decorate([
+    query('#braintree-cvv')
+], IADonationCreditCardFields.prototype, "cvvField", void 0);
+__decorate([
+    query('#braintree-error-message')
+], IADonationCreditCardFields.prototype, "errorMessageField", void 0);
+IADonationCreditCardFields = __decorate([
+    customElement('ia-donation-credit-card-fields')
+], IADonationCreditCardFields);
+export { IADonationCreditCardFields };
+//# sourceMappingURL=ia-donation-credit-card-fields.js.map

package/dist/src/elements/ia-donation-form/form-elements/ia-donation-credit-card-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-credit-card-fields.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-credit-card-fields.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EACL,oBAAoB,GAErB,MAAM,mEAAmE,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,4BAA4B,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AAEI,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IASxD,IAAI,oBAAoB;QACtB,OAAO,IAAI,oBAAoB,CAAC;YAC9B,MAAM,EAAE,IAAI,CAAC,WAAW;YACxB,GAAG,EAAE,IAAI,CAAC,QAAQ;YAClB,cAAc,EAAE,IAAI,CAAC,eAAe;YACpC,cAAc,EAAE,IAAI,CAAC,iBAAiB;SACvC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;eAKA,GAAG,CAAC,aAAa,CAAC;;;;;oBAKb,cAAc;4CACU,YAAY,CAAC,aAAa;;;;;;;;;;eAUvD,GAAG,CAAC,sBAAsB,CAAC;;;;;oBAKtB,YAAY;4CACY,YAAY,CAAC,aAAa;;;;;;;;eAQvD,GAAG,CAAC,KAAK,CAAC;;;oBAGL,QAAQ;4CACgB,YAAY,CAAC,aAAa;;;;;;;QAO9D,IAAI,CAAC,SAAS;KACjB,CAAC;IACJ,CAAC;IAED,2DAA2D;IAC3D,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,IAAY,SAAS;QACnB,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoGV,CAAC;IACJ,CAAC;CACF,CAAA;AArLyC;IAAvC,KAAK,CAAC,uBAAuB,CAAC;+DAAsC;AAE7B;IAAvC,KAAK,CAAC,uBAAuB,CAAC;mEAA0C;AAExC;IAAhC,KAAK,CAAC,gBAAgB,CAAC;4DAAmC;AAEhB;IAA1C,KAAK,CAAC,0BAA0B,CAAC;qEAA4C;AAPnE,0BAA0B;IADtC,aAAa,CAAC,gCAAgC,CAAC;GACnC,0BAA0B,CAsLtC","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { query } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\n\nimport { customElement } from '@src/util/custom-element';\n\nimport {\n  HostedFieldContainer,\n  type HostedFieldContainerInterface,\n} from '../braintree/payment-providers/credit-card/hosted-field-container';\nimport { calendarIcon, creditCardIcon, lockIcon } from '../icons';\nimport { SpacerOption } from './ia-donation-badged-input';\nimport './ia-donation-badged-input';\n\n/**\n * The Braintree hosted fields (card number, expiration, CVC) and their error\n * message. It owns the containers Braintree renders into, the way\n * `ia-donation-contact-form` owns its inputs.\n *\n * Braintree renders each real `<input>` inside a cross-origin iframe, so a\n * `<label for>` can't point at it and the visible labels are text only. No\n * placeholders are configured on the hosted fields either, so the label is\n * the only text a donor sees.\n *\n * This renders into the light DOM, since Braintree's hosted fields don't work\n * inside a shadow root. Its styles are a `<style>` block with every selector\n * prefixed by the tag name.\n */\n@customElement('ia-donation-credit-card-fields')\nexport class IADonationCreditCardFields extends LitElement {\n  @query('#braintree-creditcard') private numberField!: HTMLDivElement;\n\n  @query('#braintree-expiration') private expirationField!: HTMLDivElement;\n\n  @query('#braintree-cvv') private cvvField!: HTMLDivElement;\n\n  @query('#braintree-error-message') private errorMessageField!: HTMLDivElement;\n\n  get hostedFieldContainer(): HostedFieldContainerInterface {\n    return new HostedFieldContainer({\n      number: this.numberField,\n      cvv: this.cvvField,\n      expirationDate: this.expirationField,\n      errorContainer: this.errorMessageField,\n    });\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div id=\"braintree-error-message\"></div>\n      <div class=\"braintree-row\">\n        <div class=\"field\">\n          <span class=\"field-label\"\n            >${msg('Card Number')}<span class=\"required-asterisk\">\n              *</span\n            ></span\n          >\n          <ia-donation-badged-input\n            .icon=${creditCardIcon}\n            .requiredIndicatorSpaceOption=${SpacerOption.CompressSpace}\n            class=\"creditcard\"\n          >\n            <div class=\"braintree-input\" id=\"braintree-creditcard\"></div>\n          </ia-donation-badged-input>\n        </div>\n      </div>\n      <div class=\"braintree-row expiration-cvv-row\">\n        <div class=\"field\">\n          <span class=\"field-label\"\n            >${msg('Expiration (MM / YY)')}<span class=\"required-asterisk\">\n              *</span\n            ></span\n          >\n          <ia-donation-badged-input\n            .icon=${calendarIcon}\n            .requiredIndicatorSpaceOption=${SpacerOption.CompressSpace}\n            class=\"expiration\"\n          >\n            <div class=\"braintree-input\" id=\"braintree-expiration\"></div>\n          </ia-donation-badged-input>\n        </div>\n        <div class=\"field\">\n          <span class=\"field-label\"\n            >${msg('CVC')}<span class=\"required-asterisk\"> *</span></span\n          >\n          <ia-donation-badged-input\n            .icon=${lockIcon}\n            .requiredIndicatorSpaceOption=${SpacerOption.CompressSpace}\n            class=\"cvv\"\n          >\n            <div class=\"braintree-input\" id=\"braintree-cvv\"></div>\n          </ia-donation-badged-input>\n        </div>\n      </div>\n      ${this.getStyles}\n    `;\n  }\n\n  /** Light DOM, so Braintree can render its hosted fields */\n  createRenderRoot(): this {\n    return this;\n  }\n\n  /**\n   * The element renders into the light DOM, so instead of a `styles` block\n   * it writes its own `<style>` tag, with every selector prefixed by the tag\n   * name so nothing leaks onto the rest of the page.\n   */\n  private get getStyles(): TemplateResult {\n    return html`\n      <style>\n        ia-donation-credit-card-fields {\n          --donation-card-base-font-size--: var(\n            --ia-donation-form-base-font-size,\n            10px\n          );\n          --donation-card-label-font-family--: var(\n            --ia-donation-field-label-font-family,\n            var(\n              --ia-theme-base-font-family,\n              'Helvetica Neue',\n              Helvetica,\n              Arial,\n              sans-serif\n            )\n          );\n          --donation-card-label-font-size--: var(\n            --ia-donation-field-label-font-size,\n            calc(var(--donation-card-base-font-size--) * 1.4)\n          );\n          --donation-card-label-color--: var(\n            --ia-donation-field-label-color,\n            #2c2c2c\n          );\n          --donation-card-label-margin-bottom--: var(\n            --ia-donation-field-label-margin-bottom,\n            calc(var(--donation-card-base-font-size--) * 0.5)\n          );\n          --donation-card-row-gap--: var(\n            --ia-donation-field-row-gap,\n            calc(var(--donation-card-base-font-size--) * 0.5)\n          );\n          --donation-card-required-color--: var(\n            --ia-donation-badged-input-required-color,\n            var(--ia-theme-color-danger, #e51c23)\n          );\n          --donation-card-error-color--: var(--ia-theme-color-danger, #e51c23);\n        }\n\n        ia-donation-credit-card-fields .field-label {\n          display: block;\n          font-family: var(--donation-card-label-font-family--);\n          font-size: var(--donation-card-label-font-size--);\n          font-weight: bold;\n          color: var(--donation-card-label-color--);\n          margin-bottom: var(--donation-card-label-margin-bottom--);\n        }\n\n        ia-donation-credit-card-fields .required-asterisk {\n          color: var(--donation-card-required-color--);\n        }\n\n        /*\n          A grid, so a label that wraps to two lines in one column doesn't push\n          that column's input out of line with its sibling. Both labels share\n          row line 1 and both inputs share row line 2.\n        */\n        ia-donation-credit-card-fields .braintree-row {\n          display: grid;\n          grid-auto-flow: column;\n          grid-auto-columns: 1fr;\n          grid-template-rows: auto auto;\n          column-gap: var(--donation-card-row-gap--);\n        }\n\n        /*\n          The expiration column is wider than the CVC column so its\n          \"Expiration (MM / YY)\" label stays on one line. CVC's label has\n          room to spare.\n        */\n        ia-donation-credit-card-fields .braintree-row.expiration-cvv-row {\n          grid-template-columns:\n            calc(50% + var(--donation-card-base-font-size--) * 2.5)\n            calc(50% - var(--donation-card-base-font-size--) * 2.5);\n        }\n\n        ia-donation-credit-card-fields .braintree-row + .braintree-row {\n          margin-top: var(--donation-card-row-gap--);\n        }\n\n        ia-donation-credit-card-fields .field {\n          display: contents;\n        }\n\n        ia-donation-credit-card-fields ia-donation-badged-input {\n          width: 100%;\n        }\n\n        ia-donation-credit-card-fields .braintree-input {\n          width: 100%;\n          height: 100%;\n        }\n\n        ia-donation-credit-card-fields #braintree-error-message {\n          color: var(--donation-card-error-color--);\n          font-size: calc(var(--donation-card-base-font-size--) * 1.4);\n          margin-bottom: calc(var(--donation-card-base-font-size--) * 0.6);\n        }\n      </style>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ia-donation-credit-card-fields': IADonationCreditCardFields;\n  }\n}\n"]}

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

@@ -0,0 +1,118 @@
+import { LitElement, type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { DonationPaymentInfo } from '../models/donation-payment-info.js';
+import './ia-donation-section.js';
+/** Whether the numbered step badges show on the sections. */
+export declare const EditDonationStepNumberMode: {
+    readonly HideNumbers: "hidenumbers";
+    readonly ShowNumbers: "shownumbers";
+};
+export type EditDonationStepNumberMode = (typeof EditDonationStepNumberMode)[keyof typeof EditDonationStepNumberMode];
+/** The radio button groups in the form. */
+export declare const EditDonationSelectionGroup: {
+    readonly DonationType: "donationType";
+    readonly Amount: "amount";
+};
+export type EditDonationSelectionGroup = (typeof EditDonationSelectionGroup)[keyof typeof EditDonationSelectionGroup];
+/** The outcome of validating an amount. Sent in the `editDonationError` event. */
+export declare const EditDonationInfoStatus: {
+    readonly ValidDonationAmount: "valid_donation_amount";
+    readonly InvalidDonationAmount: "invalid_donation_amount";
+    readonly DonationTooHigh: "donation_too_high";
+    readonly DonationTooLow: "donation_too_low";
+};
+export type EditDonationInfoStatus = (typeof EditDonationInfoStatus)[keyof typeof EditDonationInfoStatus];
+/** How the one-time / monthly choice is presented. */
+export declare const EditDonationFrequencySelectionMode: {
+    readonly Button: "button";
+    readonly Checkbox: "checkbox";
+    readonly Hide: "hide";
+};
+export type EditDonationFrequencySelectionMode = (typeof EditDonationFrequencySelectionMode)[keyof typeof EditDonationFrequencySelectionMode];
+/** Whether the amount buttons wrap onto several lines or stay on one. */
+export declare const EditDonationAmountSelectionLayout: {
+    readonly SingleLine: "single-line";
+    readonly MultiLine: "multi-line";
+};
+export type EditDonationAmountSelectionLayout = (typeof EditDonationAmountSelectionLayout)[keyof typeof EditDonationAmountSelectionLayout];
+/**
+ * The part of the donation form where the donor picks a frequency, an amount
+ * (preset or custom) and whether to cover the processing fee. Fires
+ * `donationInfoChanged` with the new `DonationPaymentInfo` on every change
+ * and `editDonationError` when a custom amount is out of range.
+ *
+ * The petabox donation banner uses this on its own, without the rest of the
+ * form.
+ */
+export declare class IADonationEditDonation extends LitElement {
+    donationInfo: DonationPaymentInfo;
+    stepNumberMode: EditDonationStepNumberMode;
+    /**
+     * A convenience for setting the selected amount from plain HTML. When
+     * present it wins over `donationInfo`.
+     */
+    defaultSelectedAmount?: number;
+    amountOptions: number[];
+    amountSelectionLayout: EditDonationAmountSelectionLayout;
+    frequencySelectionMode: EditDonationFrequencySelectionMode;
+    customAmountMode: 'display' | 'hide';
+    coverFeesCheckboxMode: 'display' | 'hide';
+    /** `slot` renders the `edit-donation-amount-title` slot in place of the default headline. */
+    amountTitleDisplayMode: 'default' | 'slot';
+    private error?;
+    private customAmountSelected;
+    private customAmountButton;
+    private customAmountInput;
+    private currencyValidator;
+    render(): TemplateResult;
+    updated(changedProperties: PropertyValues): void;
+    private get frequencyButtonsTemplate();
+    private get frequencyCheckboxTemplate();
+    private get coverFeesCheckboxTemplate();
+    /** The amount step is 2 when the frequency buttons come first, otherwise 1. */
+    private get amountSelectionSectionNumber();
+    private get formSectionNumberMode();
+    /**
+     * Picks the amount grid's column count, and how many columns the custom
+     * amount field spans, from how many preset amounts there are.
+     */
+    private setupAmountColumnsLayoutConfig;
+    /**
+     * Syncs the radios and the custom field with `donationInfo`. A preset
+     * amount checks its radio and clears the custom field; anything else
+     * selects the custom field and formats the amount into it.
+     */
+    private updateSelectedDonationInfo;
+    private get coverFeesText();
+    /**
+     * Formats a dollar amount without cents when it's a whole number and with
+     * them when it isn't: `$5` and `$5.50`.
+     */
+    private formatShortenedAmount;
+    private get frequencyTemplate();
+    private get presetAmountsTemplate();
+    private getRadioButton;
+    private get isCustomAmount();
+    private get customAmountDisplayValue();
+    private get customAmountTemplate();
+    private customRadioSelected;
+    private customAmountFocused;
+    /**
+     * Once focus leaves the custom field the mid-keystroke protection is over,
+     * so the UI re-syncs with `donationInfo`: a typed amount equal to a preset
+     * moves to that preset, anything else gets re-formatted in place.
+     */
+    private customAmountBlurred;
+    private coverFeesChecked;
+    private customAmountChanged;
+    private handleCustomAmountInput;
+    private handleDonationInfoStatus;
+    private amountChanged;
+    private getDonationInfoStatus;
+    private radioSelected;
+    private monthlyCheckboxChecked;
+    private dispatchEditDonationError;
+    private presetAmountChanged;
+    private updateDonationInfo;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-donation-edit-donation.d.ts.map

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

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