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

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

@@ -0,0 +1,483 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { customElement } from '../../../../util/custom-element.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { msg } from '@lit/localize';
+import { BillingInfo, CustomerInfo, DonorContactInfo, } from '../../models/donor-contact-info.js';
+import { SpacerOption, } from '../ia-donation-badged-input.js';
+import '../ia-donation-badged-input.js';
+import { countries } from './countries.js';
+/**
+ * The donor's name, email and billing address.
+ *
+ * This renders into the light DOM, not a shadow root: browser autofill
+ * doesn't reach into shadow DOM, and autofill matters a lot on a donation
+ * form. So its styles are a `<style>` block with every selector prefixed by
+ * the tag name, and its field ids are unique across the page.
+ */
+let IADonationContactForm = class IADonationContactForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** A key of `countries`. US addresses require a state and a zip code. */
+        this.selectedCountry = 'US';
+        /** Pre-fills the email field, for a logged-in donor */
+        this.donorEmail = '';
+        /** At least two non-whitespace characters */
+        this.minTwoCharPattern = '.*\\S{2,}.*';
+        this.minTwoCharValidationMessage = msg('Enter at least two characters');
+        /** At least two non-whitespace characters with at least two characters between them */
+        this.streetAddressPattern = '.*?\\S.{2,}\\S.*?';
+        this.streetAddressValidationMessage = msg('Enter at least four characters');
+        /** 12345, 12345-6789 or 123456789 */
+        this.usZipCodePattern = '^\\d{5}(-?\\d{4})?$';
+        this.usZipCodeValidationMessage = msg('Enter a valid 5 or 9 digit zip/postal code');
+    }
+    updated(changed) {
+        if (changed.has('donorEmail')) {
+            this.emailField.value = this.donorEmail ?? '';
+        }
+    }
+    /** Validates every field, marks the bad ones, and shows the browser's messages. */
+    reportValidity() {
+        this.validateFormFields();
+        return this.validateForm();
+    }
+    validateFormFields() {
+        const fields = [
+            { badgedInput: this.emailBadgedInput, inputField: this.emailField },
+            {
+                badgedInput: this.firstNameBadgedInput,
+                inputField: this.firstNameField,
+            },
+            { badgedInput: this.lastNameBadgedInput, inputField: this.lastNameField },
+            {
+                badgedInput: this.streetAddressBadgedInput,
+                inputField: this.streetAddressField,
+            },
+            { badgedInput: this.localityBadgedInput, inputField: this.localityField },
+            { badgedInput: this.regionBadgedInput, inputField: this.regionField },
+            { badgedInput: this.postalBadgedInput, inputField: this.postalCodeField },
+        ];
+        fields.forEach(({ badgedInput, inputField }) => {
+            badgedInput.error = !inputField.checkValidity();
+        });
+    }
+    validateForm() {
+        const isValid = this.form.reportValidity();
+        this.errorMessage.textContent = isValid
+            ? ''
+            : msg('Please enter any missing or invalid contact information below');
+        return isValid;
+    }
+    focus() {
+        this.emailField.focus();
+    }
+    render() {
+        return html `
+      <div id="donation-contact-form-error-message"></div>
+      <form>
+        <div class="row">
+          ${this.generateInput({
+            id: 'donation-contact-form-email',
+            label: msg('Email'),
+            required: true,
+            fieldType: 'email',
+            name: 'email',
+            autocomplete: 'email',
+            minlength: 5,
+            maxlength: 255,
+        })}
+        </div>
+
+        <div class="row">
+          ${this.generateInput({
+            id: 'donation-contact-form-first-name',
+            label: msg('First name'),
+            name: 'fname',
+            required: true,
+            validationPattern: this.minTwoCharPattern,
+            validationMessage: this.minTwoCharValidationMessage,
+            maxlength: 255,
+            autocomplete: 'given-name',
+        })}
+          ${this.generateInput({
+            id: 'donation-contact-form-last-name',
+            label: msg('Last name'),
+            name: 'lname',
+            autocomplete: 'family-name',
+            required: true,
+            validationPattern: this.minTwoCharPattern,
+            validationMessage: this.minTwoCharValidationMessage,
+            maxlength: 255,
+        })}
+        </div>
+
+        <div class="row">
+          ${this.generateInput({
+            id: 'donation-contact-form-street-address',
+            label: msg('Address'),
+            required: true,
+            autocomplete: 'address-line1',
+            name: 'street-address',
+            validationPattern: this.streetAddressPattern,
+            validationMessage: this.streetAddressValidationMessage,
+        })}
+        </div>
+        <div class="row">
+          ${this.generateInput({
+            id: 'donation-contact-form-locality',
+            label: msg('City'),
+            autocomplete: 'address-level2',
+            required: true,
+            name: 'locality',
+            validationPattern: this.minTwoCharPattern,
+            validationMessage: this.minTwoCharValidationMessage,
+        })}
+        </div>
+        <div class="row">${this.countrySelectorTemplate}</div>
+        <div class="row region-postal-row">
+          ${this.generateInput({
+            id: 'donation-contact-form-region',
+            label: msg('State / Province'),
+            autocomplete: 'address-level1',
+            required: this.regionAndPostalCodeRequired,
+            name: 'region',
+            validationPattern: this.regionAndPostalCodeRequired
+                ? this.minTwoCharPattern
+                : undefined,
+            validationMessage: this.regionAndPostalCodeRequired
+                ? this.minTwoCharValidationMessage
+                : undefined,
+        })}
+          ${this.generateInput({
+            id: 'donation-contact-form-postal-code',
+            label: msg('Zip / Postal Code'),
+            autocomplete: 'postal-code',
+            required: this.regionAndPostalCodeRequired,
+            name: 'postal',
+            validationPattern: this.regionAndPostalCodeRequired
+                ? this.usZipCodePattern
+                : undefined,
+            validationMessage: this.regionAndPostalCodeRequired
+                ? this.usZipCodeValidationMessage
+                : undefined,
+        })}
+        </div>
+      </form>
+      ${this.getStyles}
+    `;
+    }
+    get regionAndPostalCodeRequired() {
+        return this.selectedCountry === 'US';
+    }
+    get countrySelectorTemplate() {
+        return html `
+      <div class="field">
+        <label
+          for="donation-contact-form-countryCodeAlpha2"
+          class="field-label"
+        >
+          ${msg('Country')}<span class="required-asterisk"> *</span>
+        </label>
+        <ia-donation-badged-input
+          .iconSpaceOption=${SpacerOption.CompressSpace}
+        >
+          <select
+            id="donation-contact-form-countryCodeAlpha2"
+            name="country"
+            autocomplete="country"
+            @change=${(e) => {
+            const newValue = e.target.value;
+            if (countries[newValue])
+                this.selectedCountry = newValue;
+        }}
+          >
+            ${Object.keys(countries).map((key) => {
+            const name = countries[key];
+            return html `
+                <option value=${key} ?selected=${key === this.selectedCountry}>
+                  ${name}
+                </option>
+              `;
+        })}
+          </select>
+        </ia-donation-badged-input>
+      </div>
+    `;
+    }
+    /** Light DOM, so browser autofill can reach the fields */
+    createRenderRoot() {
+        return this;
+    }
+    /** Clears the error state once the donor comes back to a field */
+    inputFocused(e) {
+        this.errorMessage.textContent = '';
+        const input = e.target;
+        const badgedInput = this.querySelector(`ia-donation-badged-input.${input.id}`);
+        if (badgedInput)
+            badgedInput.error = false;
+    }
+    generateInput(options) {
+        const required = options.required ?? true;
+        const fieldType = options.fieldType ?? 'text';
+        return html `
+      <div class="field ${options.id}">
+        <label for=${options.id} class="field-label">
+          ${options.label}${required
+            ? html `<span class="required-asterisk"> *</span>`
+            : nothing}
+        </label>
+        <ia-donation-badged-input
+          class=${options.id}
+          .iconSpaceOption=${SpacerOption.CompressSpace}
+          .requiredIndicatorSpaceOption=${SpacerOption.CompressSpace}
+        >
+          <input
+            type=${fieldType}
+            id=${options.id}
+            class="donation-contact-form-input"
+            name=${options.name}
+            maxlength=${ifDefined(options.maxlength)}
+            minlength=${ifDefined(options.minlength)}
+            autocomplete=${options.autocomplete ?? 'on'}
+            pattern=${ifDefined(options.validationPattern)}
+            title=${ifDefined(options.validationMessage)}
+            @focus=${this.inputFocused}
+            ?required=${required}
+          />
+        </ia-donation-badged-input>
+      </div>
+    `;
+    }
+    get donorContactInfo() {
+        return new DonorContactInfo({
+            billing: this.billingInfo,
+            customer: this.contactInfo,
+        });
+    }
+    get billingInfo() {
+        return new BillingInfo({
+            streetAddress: this.streetAddressField.value,
+            locality: this.localityField.value,
+            region: this.regionField.value,
+            postalCode: this.postalCodeField.value,
+            countryCodeAlpha2: this.countryCodeAlpha2Field.value,
+        });
+    }
+    get contactInfo() {
+        return new CustomerInfo({
+            email: this.emailField.value,
+            firstName: this.firstNameField.value,
+            lastName: this.lastNameField.value,
+        });
+    }
+    /**
+     * 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() {
+        const noIconSpacerWidth = css `var(--ia-donation-badged-input-no-icon-spacer-width, calc(var(--donation-contact-base-font-size--) * 3))`;
+        return html `
+      <style>
+        ia-donation-contact-form {
+          --donation-contact-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          --donation-contact-row-gap--: var(
+            --ia-donation-field-row-gap,
+            calc(var(--donation-contact-base-font-size--) * 0.5)
+          );
+          --donation-contact-field-font-family--: var(
+            --ia-theme-base-font-family,
+            'Helvetica Neue',
+            Helvetica,
+            Arial,
+            sans-serif
+          );
+          --donation-contact-field-font-size--: var(
+            --ia-donation-contact-field-font-size,
+            calc(var(--donation-contact-base-font-size--) * 1.4)
+          );
+          --donation-contact-field-font-color--: var(
+            --ia-donation-form-input-font-color,
+            #2c2c2c
+          );
+          --donation-contact-label-font-family--: var(
+            --ia-donation-field-label-font-family,
+            var(--donation-contact-field-font-family--)
+          );
+          --donation-contact-label-font-size--: var(
+            --ia-donation-field-label-font-size,
+            calc(var(--donation-contact-base-font-size--) * 1.4)
+          );
+          --donation-contact-label-color--: var(
+            --ia-donation-field-label-color,
+            #2c2c2c
+          );
+          --donation-contact-label-margin-bottom--: var(
+            --ia-donation-field-label-margin-bottom,
+            calc(var(--donation-contact-base-font-size--) * 0.5)
+          );
+          --donation-contact-required-color--: var(
+            --ia-donation-badged-input-required-color,
+            var(--ia-theme-color-danger, #e51c23)
+          );
+          --donation-contact-error-color--: var(
+            --ia-theme-color-danger,
+            #e51c23
+          );
+          --donation-contact-no-icon-field-width--: calc(
+            100% - ${noIconSpacerWidth}
+          );
+        }
+
+        /*
+          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 siblings. All labels share
+          row line 1 and all inputs share row line 2, each sized to the tallest
+          content on its line.
+        */
+        ia-donation-contact-form .row {
+          display: grid;
+          grid-auto-flow: column;
+          grid-auto-columns: 1fr;
+          grid-template-rows: auto auto;
+          column-gap: var(--donation-contact-row-gap--);
+        }
+
+        /*
+          State / Province gives up room to Zip / Postal Code so the
+          "Zip / Postal Code *" label stays on one line.
+        */
+        ia-donation-contact-form .row.region-postal-row {
+          grid-template-columns:
+            calc(60% - var(--donation-contact-base-font-size--) * 3)
+            calc(40% + var(--donation-contact-base-font-size--) * 3);
+        }
+
+        ia-donation-contact-form .row + .row {
+          margin-top: var(--donation-contact-row-gap--);
+        }
+
+        ia-donation-contact-form .field {
+          display: contents;
+        }
+
+        ia-donation-contact-form .field-label {
+          display: block;
+          font-family: var(--donation-contact-label-font-family--);
+          font-size: var(--donation-contact-label-font-size--);
+          font-weight: bold;
+          color: var(--donation-contact-label-color--);
+          margin-bottom: var(--donation-contact-label-margin-bottom--);
+        }
+
+        ia-donation-contact-form .required-asterisk {
+          color: var(--donation-contact-required-color--);
+        }
+
+        ia-donation-contact-form
+          ia-donation-badged-input.donation-contact-form-region,
+        ia-donation-contact-form
+          ia-donation-badged-input.donation-contact-form-postal-code {
+          width: 100%;
+        }
+
+        ia-donation-contact-form #donation-contact-form-error-message {
+          color: var(--donation-contact-error-color--);
+          font-size: calc(var(--donation-contact-base-font-size--) * 1.4);
+          margin-bottom: calc(var(--donation-contact-base-font-size--) * 0.6);
+        }
+
+        ia-donation-contact-form .donation-contact-form-input {
+          width: var(--donation-contact-no-icon-field-width--);
+          border: 0;
+          outline: 0;
+          background: transparent;
+          font-weight: bold;
+          color: var(--donation-contact-field-font-color--);
+          font-size: var(--donation-contact-field-font-size--);
+          padding: 0;
+          font-family: var(--donation-contact-field-font-family--);
+        }
+
+        ia-donation-contact-form #donation-contact-form-countryCodeAlpha2 {
+          width: var(--donation-contact-no-icon-field-width--);
+          height: 100%;
+          box-sizing: border-box;
+          font-weight: bold;
+          font-size: var(--donation-contact-field-font-size--);
+          color: var(--donation-contact-field-font-color--);
+          font-family: var(--donation-contact-field-font-family--);
+          border: 0;
+          background: #fff;
+        }
+      </style>
+    `;
+    }
+};
+__decorate([
+    query('ia-donation-badged-input.donation-contact-form-email')
+], IADonationContactForm.prototype, "emailBadgedInput", void 0);
+__decorate([
+    query('#donation-contact-form-email')
+], IADonationContactForm.prototype, "emailField", void 0);
+__decorate([
+    query('ia-donation-badged-input.donation-contact-form-first-name')
+], IADonationContactForm.prototype, "firstNameBadgedInput", void 0);
+__decorate([
+    query('#donation-contact-form-first-name')
+], IADonationContactForm.prototype, "firstNameField", void 0);
+__decorate([
+    query('ia-donation-badged-input.donation-contact-form-last-name')
+], IADonationContactForm.prototype, "lastNameBadgedInput", void 0);
+__decorate([
+    query('#donation-contact-form-last-name')
+], IADonationContactForm.prototype, "lastNameField", void 0);
+__decorate([
+    query('ia-donation-badged-input.donation-contact-form-postal-code')
+], IADonationContactForm.prototype, "postalBadgedInput", void 0);
+__decorate([
+    query('#donation-contact-form-postal-code')
+], IADonationContactForm.prototype, "postalCodeField", void 0);
+__decorate([
+    query('ia-donation-badged-input.donation-contact-form-street-address')
+], IADonationContactForm.prototype, "streetAddressBadgedInput", void 0);
+__decorate([
+    query('#donation-contact-form-street-address')
+], IADonationContactForm.prototype, "streetAddressField", void 0);
+__decorate([
+    query('ia-donation-badged-input.donation-contact-form-locality')
+], IADonationContactForm.prototype, "localityBadgedInput", void 0);
+__decorate([
+    query('#donation-contact-form-locality')
+], IADonationContactForm.prototype, "localityField", void 0);
+__decorate([
+    query('ia-donation-badged-input.donation-contact-form-region')
+], IADonationContactForm.prototype, "regionBadgedInput", void 0);
+__decorate([
+    query('#donation-contact-form-region')
+], IADonationContactForm.prototype, "regionField", void 0);
+__decorate([
+    query('#donation-contact-form-countryCodeAlpha2')
+], IADonationContactForm.prototype, "countryCodeAlpha2Field", void 0);
+__decorate([
+    query('#donation-contact-form-error-message')
+], IADonationContactForm.prototype, "errorMessage", void 0);
+__decorate([
+    query('form')
+], IADonationContactForm.prototype, "form", void 0);
+__decorate([
+    property({ type: String })
+], IADonationContactForm.prototype, "selectedCountry", void 0);
+__decorate([
+    property({ type: String })
+], IADonationContactForm.prototype, "donorEmail", void 0);
+IADonationContactForm = __decorate([
+    customElement('ia-donation-contact-form')
+], IADonationContactForm);
+export { IADonationContactForm };
+//# sourceMappingURL=ia-donation-contact-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-contact-form.js","sourceRoot":"","sources":["../../../../../../src/elements/ia-donation-form/form-elements/contact-form/ia-donation-contact-form.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\n\nimport {\n  BillingInfo,\n  CustomerInfo,\n  DonorContactInfo,\n} from '../../models/donor-contact-info';\nimport {\n  SpacerOption,\n  type IADonationBadgedInput,\n} from '../ia-donation-badged-input';\nimport '../ia-donation-badged-input';\nimport type { AutoCompleteFieldOptions } from './autocomplete-field-options';\nimport { countries } from './countries';\n\n/**\n * The donor's name, email and billing address.\n *\n * This renders into the light DOM, not a shadow root: browser autofill\n * doesn't reach into shadow DOM, and autofill matters a lot on a donation\n * form. So its styles are a `<style>` block with every selector prefixed by\n * the tag name, and its field ids are unique across the page.\n */\n@customElement('ia-donation-contact-form')\nexport class IADonationContactForm extends LitElement {\n  @query('ia-donation-badged-input.donation-contact-form-email')\n  emailBadgedInput!: IADonationBadgedInput;\n  @query('#donation-contact-form-email') emailField!: HTMLInputElement;\n\n  @query('ia-donation-badged-input.donation-contact-form-first-name')\n  firstNameBadgedInput!: IADonationBadgedInput;\n  @query('#donation-contact-form-first-name') firstNameField!: HTMLInputElement;\n\n  @query('ia-donation-badged-input.donation-contact-form-last-name')\n  lastNameBadgedInput!: IADonationBadgedInput;\n  @query('#donation-contact-form-last-name') lastNameField!: HTMLInputElement;\n\n  @query('ia-donation-badged-input.donation-contact-form-postal-code')\n  postalBadgedInput!: IADonationBadgedInput;\n  @query('#donation-contact-form-postal-code')\n  postalCodeField!: HTMLInputElement;\n\n  @query('ia-donation-badged-input.donation-contact-form-street-address')\n  streetAddressBadgedInput!: IADonationBadgedInput;\n  @query('#donation-contact-form-street-address')\n  streetAddressField!: HTMLInputElement;\n\n  @query('ia-donation-badged-input.donation-contact-form-locality')\n  localityBadgedInput!: IADonationBadgedInput;\n  @query('#donation-contact-form-locality') localityField!: HTMLInputElement;\n\n  @query('ia-donation-badged-input.donation-contact-form-region')\n  regionBadgedInput!: IADonationBadgedInput;\n  @query('#donation-contact-form-region') regionField!: HTMLInputElement;\n\n  @query('#donation-contact-form-countryCodeAlpha2')\n  countryCodeAlpha2Field!: HTMLSelectElement;\n\n  @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;\n  @query('form') form!: HTMLFormElement;\n\n  /** A key of `countries`. US addresses require a state and a zip code. */\n  @property({ type: String }) selectedCountry = 'US';\n\n  /** Pre-fills the email field, for a logged-in donor */\n  @property({ type: String }) donorEmail = '';\n\n  updated(changed: PropertyValues): void {\n    if (changed.has('donorEmail')) {\n      this.emailField.value = this.donorEmail ?? '';\n    }\n  }\n\n  /** Validates every field, marks the bad ones, and shows the browser's messages. */\n  reportValidity(): boolean {\n    this.validateFormFields();\n    return this.validateForm();\n  }\n\n  private validateFormFields(): void {\n    const fields: {\n      badgedInput: IADonationBadgedInput;\n      inputField: HTMLInputElement;\n    }[] = [\n      { badgedInput: this.emailBadgedInput, inputField: this.emailField },\n      {\n        badgedInput: this.firstNameBadgedInput,\n        inputField: this.firstNameField,\n      },\n      { badgedInput: this.lastNameBadgedInput, inputField: this.lastNameField },\n      {\n        badgedInput: this.streetAddressBadgedInput,\n        inputField: this.streetAddressField,\n      },\n      { badgedInput: this.localityBadgedInput, inputField: this.localityField },\n      { badgedInput: this.regionBadgedInput, inputField: this.regionField },\n      { badgedInput: this.postalBadgedInput, inputField: this.postalCodeField },\n    ];\n    fields.forEach(({ badgedInput, inputField }) => {\n      badgedInput.error = !inputField.checkValidity();\n    });\n  }\n\n  private validateForm(): boolean {\n    const isValid = this.form.reportValidity();\n\n    this.errorMessage.textContent = isValid\n      ? ''\n      : msg('Please enter any missing or invalid contact information below');\n\n    return isValid;\n  }\n\n  focus(): void {\n    this.emailField.focus();\n  }\n\n  /** At least two non-whitespace characters */\n  private minTwoCharPattern = '.*\\\\S{2,}.*';\n  private minTwoCharValidationMessage = msg('Enter at least two characters');\n\n  /** At least two non-whitespace characters with at least two characters between them */\n  private streetAddressPattern = '.*?\\\\S.{2,}\\\\S.*?';\n  private streetAddressValidationMessage = msg(\n    'Enter at least four characters',\n  );\n\n  /** 12345, 12345-6789 or 123456789 */\n  private usZipCodePattern = '^\\\\d{5}(-?\\\\d{4})?$';\n  private usZipCodeValidationMessage = msg(\n    'Enter a valid 5 or 9 digit zip/postal code',\n  );\n\n  render(): TemplateResult {\n    return html`\n      <div id=\"donation-contact-form-error-message\"></div>\n      <form>\n        <div class=\"row\">\n          ${this.generateInput({\n            id: 'donation-contact-form-email',\n            label: msg('Email'),\n            required: true,\n            fieldType: 'email',\n            name: 'email',\n            autocomplete: 'email',\n            minlength: 5,\n            maxlength: 255,\n          })}\n        </div>\n\n        <div class=\"row\">\n          ${this.generateInput({\n            id: 'donation-contact-form-first-name',\n            label: msg('First name'),\n            name: 'fname',\n            required: true,\n            validationPattern: this.minTwoCharPattern,\n            validationMessage: this.minTwoCharValidationMessage,\n            maxlength: 255,\n            autocomplete: 'given-name',\n          })}\n          ${this.generateInput({\n            id: 'donation-contact-form-last-name',\n            label: msg('Last name'),\n            name: 'lname',\n            autocomplete: 'family-name',\n            required: true,\n            validationPattern: this.minTwoCharPattern,\n            validationMessage: this.minTwoCharValidationMessage,\n            maxlength: 255,\n          })}\n        </div>\n\n        <div class=\"row\">\n          ${this.generateInput({\n            id: 'donation-contact-form-street-address',\n            label: msg('Address'),\n            required: true,\n            autocomplete: 'address-line1',\n            name: 'street-address',\n            validationPattern: this.streetAddressPattern,\n            validationMessage: this.streetAddressValidationMessage,\n          })}\n        </div>\n        <div class=\"row\">\n          ${this.generateInput({\n            id: 'donation-contact-form-locality',\n            label: msg('City'),\n            autocomplete: 'address-level2',\n            required: true,\n            name: 'locality',\n            validationPattern: this.minTwoCharPattern,\n            validationMessage: this.minTwoCharValidationMessage,\n          })}\n        </div>\n        <div class=\"row\">${this.countrySelectorTemplate}</div>\n        <div class=\"row region-postal-row\">\n          ${this.generateInput({\n            id: 'donation-contact-form-region',\n            label: msg('State / Province'),\n            autocomplete: 'address-level1',\n            required: this.regionAndPostalCodeRequired,\n            name: 'region',\n            validationPattern: this.regionAndPostalCodeRequired\n              ? this.minTwoCharPattern\n              : undefined,\n            validationMessage: this.regionAndPostalCodeRequired\n              ? this.minTwoCharValidationMessage\n              : undefined,\n          })}\n          ${this.generateInput({\n            id: 'donation-contact-form-postal-code',\n            label: msg('Zip / Postal Code'),\n            autocomplete: 'postal-code',\n            required: this.regionAndPostalCodeRequired,\n            name: 'postal',\n            validationPattern: this.regionAndPostalCodeRequired\n              ? this.usZipCodePattern\n              : undefined,\n            validationMessage: this.regionAndPostalCodeRequired\n              ? this.usZipCodeValidationMessage\n              : undefined,\n          })}\n        </div>\n      </form>\n      ${this.getStyles}\n    `;\n  }\n\n  private get regionAndPostalCodeRequired(): boolean {\n    return this.selectedCountry === 'US';\n  }\n\n  private get countrySelectorTemplate(): TemplateResult {\n    return html`\n      <div class=\"field\">\n        <label\n          for=\"donation-contact-form-countryCodeAlpha2\"\n          class=\"field-label\"\n        >\n          ${msg('Country')}<span class=\"required-asterisk\"> *</span>\n        </label>\n        <ia-donation-badged-input\n          .iconSpaceOption=${SpacerOption.CompressSpace}\n        >\n          <select\n            id=\"donation-contact-form-countryCodeAlpha2\"\n            name=\"country\"\n            autocomplete=\"country\"\n            @change=${(e: Event) => {\n              const newValue = (e.target as HTMLSelectElement).value;\n              if (countries[newValue]) this.selectedCountry = newValue;\n            }}\n          >\n            ${Object.keys(countries).map((key) => {\n              const name = countries[key];\n              return html`\n                <option value=${key} ?selected=${key === this.selectedCountry}>\n                  ${name}\n                </option>\n              `;\n            })}\n          </select>\n        </ia-donation-badged-input>\n      </div>\n    `;\n  }\n\n  /** Light DOM, so browser autofill can reach the fields */\n  createRenderRoot(): this {\n    return this;\n  }\n\n  /** Clears the error state once the donor comes back to a field */\n  private inputFocused(e: FocusEvent): void {\n    this.errorMessage.textContent = '';\n    const input = e.target as HTMLInputElement;\n    const badgedInput = this.querySelector<IADonationBadgedInput>(\n      `ia-donation-badged-input.${input.id}`,\n    );\n    if (badgedInput) badgedInput.error = false;\n  }\n\n  private generateInput(options: {\n    id: string;\n    label: string;\n    required?: boolean;\n    fieldType?: 'text' | 'email';\n    autocomplete?: AutoCompleteFieldOptions;\n    minlength?: number;\n    maxlength?: number;\n    name: string;\n    validationPattern?: string;\n    validationMessage?: string;\n  }): TemplateResult {\n    const required = options.required ?? true;\n    const fieldType = options.fieldType ?? 'text';\n\n    return html`\n      <div class=\"field ${options.id}\">\n        <label for=${options.id} class=\"field-label\">\n          ${options.label}${required\n            ? html`<span class=\"required-asterisk\"> *</span>`\n            : nothing}\n        </label>\n        <ia-donation-badged-input\n          class=${options.id}\n          .iconSpaceOption=${SpacerOption.CompressSpace}\n          .requiredIndicatorSpaceOption=${SpacerOption.CompressSpace}\n        >\n          <input\n            type=${fieldType}\n            id=${options.id}\n            class=\"donation-contact-form-input\"\n            name=${options.name}\n            maxlength=${ifDefined(options.maxlength)}\n            minlength=${ifDefined(options.minlength)}\n            autocomplete=${options.autocomplete ?? 'on'}\n            pattern=${ifDefined(options.validationPattern)}\n            title=${ifDefined(options.validationMessage)}\n            @focus=${this.inputFocused}\n            ?required=${required}\n          />\n        </ia-donation-badged-input>\n      </div>\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    return new BillingInfo({\n      streetAddress: this.streetAddressField.value,\n      locality: this.localityField.value,\n      region: this.regionField.value,\n      postalCode: this.postalCodeField.value,\n      countryCodeAlpha2: this.countryCodeAlpha2Field.value,\n    });\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   * 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    const noIconSpacerWidth = css`var(--ia-donation-badged-input-no-icon-spacer-width, calc(var(--donation-contact-base-font-size--) * 3))`;\n\n    return html`\n      <style>\n        ia-donation-contact-form {\n          --donation-contact-base-font-size--: var(\n            --ia-donation-form-base-font-size,\n            10px\n          );\n          --donation-contact-row-gap--: var(\n            --ia-donation-field-row-gap,\n            calc(var(--donation-contact-base-font-size--) * 0.5)\n          );\n          --donation-contact-field-font-family--: var(\n            --ia-theme-base-font-family,\n            'Helvetica Neue',\n            Helvetica,\n            Arial,\n            sans-serif\n          );\n          --donation-contact-field-font-size--: var(\n            --ia-donation-contact-field-font-size,\n            calc(var(--donation-contact-base-font-size--) * 1.4)\n          );\n          --donation-contact-field-font-color--: var(\n            --ia-donation-form-input-font-color,\n            #2c2c2c\n          );\n          --donation-contact-label-font-family--: var(\n            --ia-donation-field-label-font-family,\n            var(--donation-contact-field-font-family--)\n          );\n          --donation-contact-label-font-size--: var(\n            --ia-donation-field-label-font-size,\n            calc(var(--donation-contact-base-font-size--) * 1.4)\n          );\n          --donation-contact-label-color--: var(\n            --ia-donation-field-label-color,\n            #2c2c2c\n          );\n          --donation-contact-label-margin-bottom--: var(\n            --ia-donation-field-label-margin-bottom,\n            calc(var(--donation-contact-base-font-size--) * 0.5)\n          );\n          --donation-contact-required-color--: var(\n            --ia-donation-badged-input-required-color,\n            var(--ia-theme-color-danger, #e51c23)\n          );\n          --donation-contact-error-color--: var(\n            --ia-theme-color-danger,\n            #e51c23\n          );\n          --donation-contact-no-icon-field-width--: calc(\n            100% - ${noIconSpacerWidth}\n          );\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 siblings. All labels share\n          row line 1 and all inputs share row line 2, each sized to the tallest\n          content on its line.\n        */\n        ia-donation-contact-form .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-contact-row-gap--);\n        }\n\n        /*\n          State / Province gives up room to Zip / Postal Code so the\n          \"Zip / Postal Code *\" label stays on one line.\n        */\n        ia-donation-contact-form .row.region-postal-row {\n          grid-template-columns:\n            calc(60% - var(--donation-contact-base-font-size--) * 3)\n            calc(40% + var(--donation-contact-base-font-size--) * 3);\n        }\n\n        ia-donation-contact-form .row + .row {\n          margin-top: var(--donation-contact-row-gap--);\n        }\n\n        ia-donation-contact-form .field {\n          display: contents;\n        }\n\n        ia-donation-contact-form .field-label {\n          display: block;\n          font-family: var(--donation-contact-label-font-family--);\n          font-size: var(--donation-contact-label-font-size--);\n          font-weight: bold;\n          color: var(--donation-contact-label-color--);\n          margin-bottom: var(--donation-contact-label-margin-bottom--);\n        }\n\n        ia-donation-contact-form .required-asterisk {\n          color: var(--donation-contact-required-color--);\n        }\n\n        ia-donation-contact-form\n          ia-donation-badged-input.donation-contact-form-region,\n        ia-donation-contact-form\n          ia-donation-badged-input.donation-contact-form-postal-code {\n          width: 100%;\n        }\n\n        ia-donation-contact-form #donation-contact-form-error-message {\n          color: var(--donation-contact-error-color--);\n          font-size: calc(var(--donation-contact-base-font-size--) * 1.4);\n          margin-bottom: calc(var(--donation-contact-base-font-size--) * 0.6);\n        }\n\n        ia-donation-contact-form .donation-contact-form-input {\n          width: var(--donation-contact-no-icon-field-width--);\n          border: 0;\n          outline: 0;\n          background: transparent;\n          font-weight: bold;\n          color: var(--donation-contact-field-font-color--);\n          font-size: var(--donation-contact-field-font-size--);\n          padding: 0;\n          font-family: var(--donation-contact-field-font-family--);\n        }\n\n        ia-donation-contact-form #donation-contact-form-countryCodeAlpha2 {\n          width: var(--donation-contact-no-icon-field-width--);\n          height: 100%;\n          box-sizing: border-box;\n          font-weight: bold;\n          font-size: var(--donation-contact-field-font-size--);\n          color: var(--donation-contact-field-font-color--);\n          font-family: var(--donation-contact-field-font-family--);\n          border: 0;\n          background: #fff;\n        }\n      </style>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,26 @@
+import { LitElement, type CSSResultGroup, type TemplateResult } from 'lit';
+/** Whether a hidden icon or required marker keeps its space, so neighbouring fields still line up. */
+export declare const SpacerOption: {
+    readonly LeaveSpace: "leave-space";
+    readonly CompressSpace: "compress-space";
+};
+export type SpacerOption = (typeof SpacerOption)[keyof typeof SpacerOption];
+/**
+ * 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.
+ */
+export declare class IADonationBadgedInput extends LitElement {
+    error: boolean;
+    icon?: TemplateResult;
+    required: boolean;
+    /** When there's no icon, whether its column stays or collapses */
+    iconSpaceOption: SpacerOption;
+    /** When the field isn't required, whether the marker's space stays or collapses */
+    requiredIndicatorSpaceOption: SpacerOption;
+    render(): TemplateResult;
+    private get errorClass();
+    private get iconSpaceOptionClass();
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-donation-badged-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-badged-input.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/form-elements/ia-donation-badged-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,sGAAsG;AACtG,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE5E;;;;GAIG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACtB,KAAK,UAAS;IAEf,IAAI,CAAC,EAAE,cAAc,CAAC;IAErB,QAAQ,UAAS;IAE9C,kEAAkE;IACtC,eAAe,EAAE,YAAY,CAC/B;IAE1B,mFAAmF;IACvD,4BAA4B,EAAE,YAAY,CAC5C;IAE1B,MAAM,IAAI,cAAc;IAexB,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,oBAAoB,GAI/B;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CA8FlC;CACF"}