@internetarchive/elements 1.1.3-l10n-demo.0 → 1.1.3-webdev-9107.0

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

@@ -1,497 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,26 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}