@internetarchive/donation-form 0.5.18-alpha.1 → 0.5.18

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

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