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

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

@@ -0,0 +1,497 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, } 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 { localized, msg } from '@lit/localize';
+import { emailIcon, localePinIcon, userIcon } from '../../icons.js';
+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,}.*';
+        /** At least two non-whitespace characters with at least two characters between them */
+        this.streetAddressPattern = '.*?\\S.{2,}\\S.*?';
+        /** 12345, 12345-6789 or 123456789 */
+        this.usZipCodePattern = '^\\d{5}(-?\\d{4})?$';
+    }
+    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.extendedAddressBadgedInput,
+                inputField: this.extendedAddressField,
+            },
+            { 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();
+    }
+    get minTwoCharValidationMessage() {
+        return msg('Enter at least two characters');
+    }
+    get streetAddressValidationMessage() {
+        return msg('Enter at least four characters');
+    }
+    get usZipCodeValidationMessage() {
+        return msg('Enter a valid 5 or 9 digit zip/postal code');
+    }
+    render() {
+        return html `
+      <div id="donation-contact-form-error-message"></div>
+      <form>
+        <fieldset>
+          <div class="row">
+            ${this.generateInput({
+            id: 'donation-contact-form-email',
+            placeholder: msg('Email'),
+            required: true,
+            fieldType: 'email',
+            name: 'email',
+            autocomplete: 'email',
+            minlength: 5,
+            maxlength: 255,
+            icon: emailIcon,
+        })}
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <div class="row">
+            ${this.generateInput({
+            id: 'donation-contact-form-first-name',
+            placeholder: msg('First name'),
+            name: 'fname',
+            required: true,
+            validationPattern: this.minTwoCharPattern,
+            validationMessage: this.minTwoCharValidationMessage,
+            maxlength: 255,
+            autocomplete: 'given-name',
+            icon: userIcon,
+        })}
+          </div>
+          <div class="row">
+            ${this.generateInput({
+            id: 'donation-contact-form-last-name',
+            placeholder: msg('Last name'),
+            name: 'lname',
+            autocomplete: 'family-name',
+            required: true,
+            validationPattern: this.minTwoCharPattern,
+            validationMessage: this.minTwoCharValidationMessage,
+            maxlength: 255,
+        })}
+          </div>
+        </fieldset>
+        <fieldset>
+          <div class="row">
+            ${this.generateInput({
+            id: 'donation-contact-form-street-address',
+            placeholder: msg('Address Line 1'),
+            required: true,
+            autocomplete: 'address-line1',
+            icon: localePinIcon,
+            name: 'street-address',
+            validationPattern: this.streetAddressPattern,
+            validationMessage: this.streetAddressValidationMessage,
+        })}
+          </div>
+          <div class="row">
+            ${this.generateInput({
+            id: 'donation-contact-form-extended-address',
+            placeholder: msg('Address Line 2 (optional)'),
+            autocomplete: 'address-line2',
+            required: false,
+            name: 'extended-address',
+        })}
+          </div>
+          <div class="row">
+            ${this.generateInput({
+            id: 'donation-contact-form-locality',
+            placeholder: msg('City'),
+            autocomplete: 'address-level2',
+            required: true,
+            name: 'locality',
+            validationPattern: this.minTwoCharPattern,
+            validationMessage: this.minTwoCharValidationMessage,
+        })}
+          </div>
+          <div class="row">
+            ${this.generateInput({
+            id: 'donation-contact-form-region',
+            placeholder: 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',
+            placeholder: msg('Zip / Postal'),
+            autocomplete: 'postal-code',
+            required: this.regionAndPostalCodeRequired,
+            name: 'postal',
+            validationPattern: this.regionAndPostalCodeRequired
+                ? this.usZipCodePattern
+                : undefined,
+            validationMessage: this.regionAndPostalCodeRequired
+                ? this.usZipCodeValidationMessage
+                : undefined,
+            iconSpaceOption: SpacerOption.CompressSpace,
+        })}
+          </div>
+          <div class="row">${this.countrySelectorTemplate}</div>
+        </fieldset>
+      </form>
+      ${this.getStyles}
+    `;
+    }
+    get regionAndPostalCodeRequired() {
+        return this.selectedCountry === 'US';
+    }
+    get countrySelectorTemplate() {
+        return html `
+      <ia-donation-badged-input>
+        <label for="donation-contact-form-countryCodeAlpha2">
+          ${msg('Country')}
+        </label>
+        <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>
+    `;
+    }
+    /** 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';
+        const iconOption = options.iconSpaceOption ?? SpacerOption.LeaveSpace;
+        return html `
+      <ia-donation-badged-input
+        class=${options.id}
+        .icon=${options.icon}
+        .iconSpaceOption=${iconOption}
+        ?required=${required}
+      >
+        <label for=${options.id}>${options.placeholder}</label>
+        <input
+          type=${fieldType}
+          id=${options.id}
+          class="donation-contact-form-input"
+          name=${options.name}
+          placeholder=${options.placeholder}
+          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>
+    `;
+    }
+    get donorContactInfo() {
+        return new DonorContactInfo({
+            billing: this.billingInfo,
+            customer: this.contactInfo,
+        });
+    }
+    get billingInfo() {
+        return new BillingInfo({
+            streetAddress: this.streetAddressField.value,
+            extendedAddress: this.extendedAddressField.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))`;
+        const iconSpacerWidth = css `var(--ia-donation-badged-input-icon-spacer-width, calc(var(--donation-contact-base-font-size--) * 5))`;
+        return html `
+      <style>
+        ia-donation-contact-form {
+          --donation-contact-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          --donation-contact-fieldset-spacing--: var(
+            --ia-donation-contact-fieldset-spacing,
+            var(--donation-contact-base-font-size--)
+          );
+          --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.6)
+          );
+          --donation-contact-field-font-color--: var(
+            --ia-donation-form-input-font-color,
+            #333
+          );
+          --donation-contact-error-color--: var(
+            --ia-theme-color-danger,
+            #e51c23
+          );
+          --donation-contact-icon-field-width--: calc(
+            100% - ${iconSpacerWidth}
+          );
+          --donation-contact-no-icon-field-width--: calc(
+            100% - ${noIconSpacerWidth}
+          );
+        }
+
+        ia-donation-contact-form fieldset {
+          border: 0;
+          padding: 0;
+          margin: 0;
+          margin-bottom: var(--donation-contact-fieldset-spacing--);
+          background-color: white;
+        }
+
+        /* The negative margins fold the doubled borders where fields touch */
+        ia-donation-contact-form .row {
+          display: flex;
+          margin: -1px 0 0 0;
+        }
+
+        ia-donation-contact-form fieldset .row:first-child {
+          margin-top: 0;
+        }
+
+        ia-donation-contact-form
+          ia-donation-badged-input.donation-contact-form-region {
+          width: 60%;
+        }
+
+        ia-donation-contact-form
+          ia-donation-badged-input.donation-contact-form-postal-code {
+          width: 40%;
+        }
+
+        ia-donation-contact-form #donation-contact-form-region {
+          width: var(--donation-contact-icon-field-width--);
+        }
+
+        ia-donation-contact-form #donation-contact-form-postal-code {
+          width: var(--donation-contact-no-icon-field-width--);
+        }
+
+        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-last-name {
+          width: var(--donation-contact-no-icon-field-width--);
+        }
+
+        /* The labels are for screen readers, the placeholders carry the visible text */
+        ia-donation-contact-form label {
+          position: absolute;
+          left: -10000px;
+          top: auto;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+        }
+
+        ia-donation-contact-form .donation-contact-form-input {
+          width: var(--donation-contact-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-input::placeholder {
+          color: revert;
+        }
+
+        ia-donation-contact-form #donation-contact-form-countryCodeAlpha2 {
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          font-weight: bold;
+          font-size: var(--donation-contact-field-font-size--);
+          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-extended-address')
+], IADonationContactForm.prototype, "extendedAddressBadgedInput", void 0);
+__decorate([
+    query('#donation-contact-form-extended-address')
+], IADonationContactForm.prototype, "extendedAddressField", 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'),
+    localized()
+], 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  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 { localized, msg } from '@lit/localize';\n\nimport { emailIcon, localePinIcon, userIcon } from '../../icons';\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')\n@localized()\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-extended-address')\n  extendedAddressBadgedInput!: IADonationBadgedInput;\n  @query('#donation-contact-form-extended-address')\n  extendedAddressField!: 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      {\n        badgedInput: this.extendedAddressBadgedInput,\n        inputField: this.extendedAddressField,\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 get minTwoCharValidationMessage(): string {\n    return msg('Enter at least two characters');\n  }\n\n  /** At least two non-whitespace characters with at least two characters between them */\n  private streetAddressPattern = '.*?\\\\S.{2,}\\\\S.*?';\n  private get streetAddressValidationMessage(): string {\n    return msg('Enter at least four characters');\n  }\n\n  /** 12345, 12345-6789 or 123456789 */\n  private usZipCodePattern = '^\\\\d{5}(-?\\\\d{4})?$';\n  private get usZipCodeValidationMessage(): string {\n    return msg('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        <fieldset>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-email',\n              placeholder: msg('Email'),\n              required: true,\n              fieldType: 'email',\n              name: 'email',\n              autocomplete: 'email',\n              minlength: 5,\n              maxlength: 255,\n              icon: emailIcon,\n            })}\n          </div>\n        </fieldset>\n\n        <fieldset>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-first-name',\n              placeholder: 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              icon: userIcon,\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-last-name',\n              placeholder: 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        </fieldset>\n        <fieldset>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-street-address',\n              placeholder: msg('Address Line 1'),\n              required: true,\n              autocomplete: 'address-line1',\n              icon: localePinIcon,\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-extended-address',\n              placeholder: msg('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: 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\">\n            ${this.generateInput({\n              id: 'donation-contact-form-region',\n              placeholder: 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              placeholder: msg('Zip / Postal'),\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              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 regionAndPostalCodeRequired(): boolean {\n    return this.selectedCountry === 'US';\n  }\n\n  private get countrySelectorTemplate(): TemplateResult {\n    return html`\n      <ia-donation-badged-input>\n        <label for=\"donation-contact-form-countryCodeAlpha2\">\n          ${msg('Country')}\n        </label>\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    `;\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    placeholder: string;\n    required?: boolean;\n    fieldType?: 'text' | 'email';\n    autocomplete?: AutoCompleteFieldOptions;\n    minlength?: number;\n    maxlength?: number;\n    name: string;\n    icon?: TemplateResult;\n    iconSpaceOption?: SpacerOption;\n    validationPattern?: string;\n    validationMessage?: 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      <ia-donation-badged-input\n        class=${options.id}\n        .icon=${options.icon}\n        .iconSpaceOption=${iconOption}\n        ?required=${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          placeholder=${options.placeholder}\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    `;\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      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  }\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    const iconSpacerWidth = css`var(--ia-donation-badged-input-icon-spacer-width, calc(var(--donation-contact-base-font-size--) * 5))`;\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-fieldset-spacing--: var(\n            --ia-donation-contact-fieldset-spacing,\n            var(--donation-contact-base-font-size--)\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.6)\n          );\n          --donation-contact-field-font-color--: var(\n            --ia-donation-form-input-font-color,\n            #333\n          );\n          --donation-contact-error-color--: var(\n            --ia-theme-color-danger,\n            #e51c23\n          );\n          --donation-contact-icon-field-width--: calc(\n            100% - ${iconSpacerWidth}\n          );\n          --donation-contact-no-icon-field-width--: calc(\n            100% - ${noIconSpacerWidth}\n          );\n        }\n\n        ia-donation-contact-form fieldset {\n          border: 0;\n          padding: 0;\n          margin: 0;\n          margin-bottom: var(--donation-contact-fieldset-spacing--);\n          background-color: white;\n        }\n\n        /* The negative margins fold the doubled borders where fields touch */\n        ia-donation-contact-form .row {\n          display: flex;\n          margin: -1px 0 0 0;\n        }\n\n        ia-donation-contact-form fieldset .row:first-child {\n          margin-top: 0;\n        }\n\n        ia-donation-contact-form\n          ia-donation-badged-input.donation-contact-form-region {\n          width: 60%;\n        }\n\n        ia-donation-contact-form\n          ia-donation-badged-input.donation-contact-form-postal-code {\n          width: 40%;\n        }\n\n        ia-donation-contact-form #donation-contact-form-region {\n          width: var(--donation-contact-icon-field-width--);\n        }\n\n        ia-donation-contact-form #donation-contact-form-postal-code {\n          width: var(--donation-contact-no-icon-field-width--);\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-last-name {\n          width: var(--donation-contact-no-icon-field-width--);\n        }\n\n        /* The labels are for screen readers, the placeholders carry the visible text */\n        ia-donation-contact-form label {\n          position: absolute;\n          left: -10000px;\n          top: auto;\n          width: 1px;\n          height: 1px;\n          overflow: hidden;\n        }\n\n        ia-donation-contact-form .donation-contact-form-input {\n          width: var(--donation-contact-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-input::placeholder {\n          color: revert;\n        }\n\n        ia-donation-contact-form #donation-contact-form-countryCodeAlpha2 {\n          width: 100%;\n          height: 100%;\n          box-sizing: border-box;\n          font-weight: bold;\n          font-size: var(--donation-contact-field-font-size--);\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"}