@internetarchive/donation-form 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/src/form-elements/contact-form/contact-form.d.ts +2 -2
  2. package/dist/src/form-elements/contact-form/contact-form.js +14 -6
  3. package/dist/src/form-elements/contact-form/contact-form.js.map +1 -1
  4. package/dist/test/tests/form-elements/contact-form.test.js +16 -0
  5. package/dist/test/tests/form-elements/contact-form.test.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/form-elements/contact-form/contact-form.ts +14 -6
package/dist/src/form-elements/contact-form/contact-form.d.ts CHANGED
@@ -34,8 +34,8 @@ export declare class ContactForm extends LitElement {
34
34
  private minTwoCharValidationMessage;
35
35
  private streetAddressPattern;
36
36
  private streetAddressValidationMessage;
37
- private zipCodePattern;
38
- private zipCodeValidationMessage;
37
+ private usZipCodePattern;
38
+ private usZipCodeValidationMessage;
39
39
  /** @inheritdoc */
40
40
  render(): TemplateResult;
41
41
  private get regionAndPostalCodeRequired();
package/dist/src/form-elements/contact-form/contact-form.js CHANGED
@@ -23,8 +23,8 @@ let ContactForm = class ContactForm extends LitElement {
23
23
  this.streetAddressPattern = '.*?\\S.{2,}\\S.*?';
24
24
  this.streetAddressValidationMessage = msg('Enter at least four characters');
25
25
  // matches 12345 or 12345-6789 or 123456789
26
- this.zipCodePattern = '^\\d{5}(-?\\d{4})?$';
27
- this.zipCodeValidationMessage = msg('Enter a valid 5 or 9 digit zip/postal code');
26
+ this.usZipCodePattern = '^\\d{5}(-?\\d{4})?$';
27
+ this.usZipCodeValidationMessage = msg('Enter a valid 5 or 9 digit zip/postal code');
28
28
  }
29
29
  updated(changed) {
30
30
  var _a;
@@ -154,8 +154,12 @@ let ContactForm = class ContactForm extends LitElement {
154
154
  autocomplete: 'address-level1',
155
155
  required: this.regionAndPostalCodeRequired,
156
156
  name: 'region',
157
- validationPattern: this.minTwoCharPattern,
158
- validationMessage: this.minTwoCharValidationMessage,
157
+ validationPattern: this.regionAndPostalCodeRequired
158
+ ? this.minTwoCharPattern
159
+ : undefined,
160
+ validationMessage: this.regionAndPostalCodeRequired
161
+ ? this.minTwoCharValidationMessage
162
+ : undefined,
159
163
  })}
160
164
  ${this.generateInput({
161
165
  id: 'donation-contact-form-postal-code',
@@ -163,8 +167,12 @@ let ContactForm = class ContactForm extends LitElement {
163
167
  autocomplete: 'postal-code',
164
168
  required: this.regionAndPostalCodeRequired,
165
169
  name: 'postal',
166
- validationPattern: this.zipCodePattern,
167
- validationMessage: this.zipCodeValidationMessage,
170
+ validationPattern: this.regionAndPostalCodeRequired
171
+ ? this.usZipCodePattern
172
+ : undefined,
173
+ validationMessage: this.regionAndPostalCodeRequired
174
+ ? this.usZipCodeValidationMessage
175
+ : undefined,
168
176
  iconSpaceOption: SpacerOption.CompressSpace,
169
177
  })}
170
178
  </div>
package/dist/src/form-elements/contact-form/contact-form.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"contact-form.js","sourceRoot":"","sources":["../../../../src/form-elements/contact-form/contact-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n BillingInfo,\n CustomerInfo,\n DonorContactInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { AutoCompleteFieldOptions } from './autocomplete-field-options';\nimport { SpacerOption } from '../badged-input';\nimport { BadgedInput } from '../badged-input';\nimport '../badged-input';\n\nimport emailImg from '@internetarchive/icon-email/index.js';\nimport localePinImg from '@internetarchive/icon-locale-pin/index.js';\nimport userIcon from '@internetarchive/icon-user/index.js';\n\nimport { countries } from './countries';\nimport { msg } from '@lit/localize';\n\n@customElement('contact-form')\nexport class ContactForm extends LitElement {\n @query('badged-input.donation-contact-form-email') emailBadgedInput!: BadgedInput;\n @query('#donation-contact-form-email') emailField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-first-name') firstNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-first-name') firstNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-last-name') lastNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-last-name') lastNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-postal-code') postalBadgedInput!: BadgedInput;\n @query('#donation-contact-form-postal-code') postalCodeField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-street-address')\n streetAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-street-address') streetAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-extended-address')\n extendedAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-extended-address') extendedAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-locality') localityBadgedInput!: BadgedInput;\n @query('#donation-contact-form-locality') localityField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-region') regionBadgedInput!: BadgedInput;\n @query('#donation-contact-form-region') regionField!: HTMLInputElement;\n\n @query('#donation-contact-form-countryCodeAlpha2') countryCodeAlpha2Field!: HTMLSelectElement;\n\n @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;\n @query('form') form!: HTMLFormElement;\n\n /** @keyof countries */\n @property({ type: String }) selectedCountry = 'US';\n\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 reportValidity(): boolean {\n this.validateFormFields();\n return this.validateForm();\n }\n\n // validate each field and set the error state on the badged-inputs\n private validateFormFields(): void {\n const fields: {\n badgedInput: BadgedInput;\n inputField: HTMLInputElement;\n }[] = [\n { badgedInput: this.emailBadgedInput, inputField: this.emailField },\n { badgedInput: this.firstNameBadgedInput, inputField: this.firstNameField },\n { badgedInput: this.lastNameBadgedInput, inputField: this.lastNameField },\n { badgedInput: this.streetAddressBadgedInput, inputField: this.streetAddressField },\n { badgedInput: this.extendedAddressBadgedInput, inputField: this.extendedAddressField },\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 // validate the overall form and show error messages\n private validateForm(): boolean {\n const isValid = this.form.reportValidity();\n\n if (!isValid) {\n this.errorMessage.innerText = msg(\n 'Please enter any missing or invalid contact information below',\n );\n } else {\n this.errorMessage.innerText = '';\n }\n\n return isValid;\n }\n\n focus(): void {\n this.emailField.focus();\n }\n\n // minimum two non-whitespace characters\n private minTwoCharPattern = '.*\\\\S{2,}.*';\n private minTwoCharValidationMessage = msg('Enter at least two characters');\n\n // at least two non-whitespace characters with at least two characters in between them\n private streetAddressPattern = '.*?\\\\S.{2,}\\\\S.*?';\n private streetAddressValidationMessage = msg('Enter at least four characters');\n\n // matches 12345 or 12345-6789 or 123456789\n private zipCodePattern = '^\\\\d{5}(-?\\\\d{4})?$';\n private zipCodeValidationMessage = msg('Enter a valid 5 or 9 digit zip/postal code');\n\n /** @inheritdoc */\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: 'Email',\n required: true,\n fieldType: 'email',\n name: 'email',\n autocomplete: 'email',\n minlength: 5,\n maxlength: 255,\n icon: emailImg,\n })}\n </div>\n </fieldset>\n\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-first-name',\n placeholder: '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: '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: 'Address Line 1',\n required: true,\n autocomplete: 'address-line1',\n icon: localePinImg,\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: '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: '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: 'State / Province',\n autocomplete: 'address-level1',\n required: this.regionAndPostalCodeRequired,\n name: 'region',\n validationPattern: this.minTwoCharPattern,\n validationMessage: this.minTwoCharValidationMessage,\n })}\n ${this.generateInput({\n id: 'donation-contact-form-postal-code',\n placeholder: 'Zip / Postal',\n autocomplete: 'postal-code',\n required: this.regionAndPostalCodeRequired,\n name: 'postal',\n validationPattern: this.zipCodePattern,\n validationMessage: this.zipCodeValidationMessage,\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 <badged-input>\n <select\n id=\"donation-contact-form-countryCodeAlpha2\"\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}>${name}</option>\n `;\n })}\n </select>\n </badged-input>\n `;\n }\n\n /** @inheritdoc */\n createRenderRoot(): this {\n // Render template without shadow DOM. Note that shadow DOM features like\n // encapsulated CSS and slots are unavailable.\n // Form autofill does not work properly in the shadow DOM\n // so we need our form fields in the light DOM\n return this;\n }\n\n // reset the error state when the user focuses the input\n private inputFocused(e: KeyboardEvent): void {\n this.errorMessage.innerText = '';\n const input = e.target as HTMLInputElement;\n const inputIdentifier = input.id;\n const badgedInput = this.querySelector(`badged-input.${inputIdentifier}`) as BadgedInput;\n 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 <badged-input\n class=${options.id}\n .icon=${options.icon}\n .iconSpaceOption=${iconOption}\n ?required=${options.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 aria-label=${options.placeholder}\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 </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 const billingInfo = 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 return billingInfo;\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 * This is not the normal LitElement styles block.\n *\n * This element uses the clear DOM instead of the shadow DOM so it can't use\n * the shadowRoot's isolated styling. This is a bit of a workaround to keep all of\n * the styling local by writing out our own <style> tag and just be careful about\n * the selectors since they will leak outside of this component.\n *\n * @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ContactForm\n */\n private get getStyles(): TemplateResult {\n const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 3rem)`;\n const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 5rem)`;\n\n const fieldSetSpacing = css`var(--fieldSetSpacing, 1rem)`;\n const fieldFontFamily = css`var(--fontFamily, \"Helvetica Neue\", Helvetica, Arial, sans-serif)`;\n const fieldFontSize = css`var(--contactFieldFontSize, 1.6rem)`;\n const fieldFontColor = css`var(--inputFieldFontColor, #333)`;\n\n const iconFieldWidth = css`calc(100% - ${iconSpacerWidth})`;\n const noIconFieldWidth = css`calc(100% - ${noIconSpacerWidth})`;\n\n return html`\n <style>\n /*\n **NOTE**\n This element is in the lightDOM so be sure to prefix all styles\n with \"contact-form\" so styles don't leak.\n */\n contact-form fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: ${fieldSetSpacing};\n background-color: white;\n }\n\n /* These 1px and 0 margins in the next few selectors are to account for the\n double outlines caused by the fields being right next to each other */\n contact-form .row {\n display: flex;\n margin: -1px 0 0 0;\n }\n\n contact-form fieldset .row:first-child {\n margin-top: 0;\n }\n\n contact-form badged-input.donation-contact-form-region {\n width: 60%;\n }\n\n contact-form badged-input.donation-contact-form-postal-code {\n width: 40%;\n }\n\n contact-form #donation-contact-form-region {\n width: ${iconFieldWidth};\n }\n\n contact-form #donation-contact-form-postal-code {\n width: ${noIconFieldWidth};\n }\n\n contact-form #donation-contact-form-error-message {\n color: red;\n font-size: 1.4rem;\n margin-bottom: 0.6rem;\n }\n\n contact-form #donation-contact-form-last-name {\n width: ${noIconFieldWidth};\n }\n\n /* only show for screen readers */\n contact-form label {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n\n contact-form .donation-contact-form-input {\n width: ${iconFieldWidth};\n border: 0;\n outline: 0;\n background: transparent;\n font-weight: bold;\n color: ${fieldFontColor};\n font-size: ${fieldFontSize};\n padding: 0;\n font-family: ${fieldFontFamily};\n }\n\n contact-form .donation-contact-form-input::placeholder {\n color: revert;\n }\n\n contact-form #donation-contact-form-countryCodeAlpha2 {\n width: calc(100%);\n height: 100%;\n box-sizing: border-box;\n font-weight: bold;\n font-size: ${fieldFontSize};\n font-family: ${fieldFontFamily};\n border: 0;\n background: #fff;\n }\n </style>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"contact-form.js","sourceRoot":"","sources":["../../../../src/form-elements/contact-form/contact-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EACL,WAAW,EACX,YAAY,EACZ,gBAAgB,GACjB,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,iBAAiB,CAAC;AAEzB,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,YAAY,MAAM,2CAA2C,CAAC;AACrE,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAG7B,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAgCL,uBAAuB;QACK,oBAAe,GAAG,IAAI,CAAC;QAEvB,eAAU,GAAG,EAAE,CAAC;QAoD5C,wCAAwC;QAChC,sBAAiB,GAAG,aAAa,CAAC;QAClC,gCAA2B,GAAG,GAAG,CAAC,+BAA+B,CAAC,CAAC;QAE3E,sFAAsF;QAC9E,yBAAoB,GAAG,mBAAmB,CAAC;QAC3C,mCAA8B,GAAG,GAAG,CAAC,gCAAgC,CAAC,CAAC;QAE/E,2CAA2C;QACnC,qBAAgB,GAAG,qBAAqB,CAAC;QACzC,+BAA0B,GAAG,GAAG,CAAC,4CAA4C,CAAC,CAAC;IA8VzF,CAAC;IA1ZC,OAAO,CAAC,OAAuB;;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,UAAU,mCAAI,EAAE,CAAC;QAChD,CAAC;IACH,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;IAC7B,CAAC;IAED,mEAAmE;IAC3D,kBAAkB;QACxB,MAAM,MAAM,GAGN;YACJ,EAAE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE;YACnE,EAAE,WAAW,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,EAAE,IAAI,CAAC,cAAc,EAAE;YAC3E,EAAE,WAAW,EAAE,IAAI,CAAC,mBAAmB,EAAE,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE;YACzE,EAAE,WAAW,EAAE,IAAI,CAAC,wBAAwB,EAAE,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE;YACnF,EAAE,WAAW,EAAE,IAAI,CAAC,0BAA0B,EAAE,UAAU,EAAE,IAAI,CAAC,oBAAoB,EAAE;YACvF,EAAE,WAAW,EAAE,IAAI,CAAC,mBAAmB,EAAE,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE;YACzE,EAAE,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE;YACrE,EAAE,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,EAAE,IAAI,CAAC,eAAe,EAAE;SAC1E,CAAC;QACF,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,EAAE;YAC7C,WAAW,CAAC,KAAK,GAAG,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oDAAoD;IAC5C,YAAY;QAClB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;QAE3C,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,CAAC,SAAS,GAAG,GAAG,CAC/B,+DAA+D,CAChE,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,CAAC,SAAS,GAAG,EAAE,CAAC;QACnC,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC;IAcD,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;cAKD,IAAI,CAAC,aAAa,CAAC;YACnB,EAAE,EAAE,6BAA6B;YACjC,WAAW,EAAE,OAAO;YACpB,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,OAAO;YAClB,IAAI,EAAE,OAAO;YACb,YAAY,EAAE,OAAO;YACrB,SAAS,EAAE,CAAC;YACZ,SAAS,EAAE,GAAG;YACd,IAAI,EAAE,QAAQ;SACf,CAAC;;;;;;cAMA,IAAI,CAAC,aAAa,CAAC;YACnB,EAAE,EAAE,kCAAkC;YACtC,WAAW,EAAE,YAAY;YACzB,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,IAAI;YACd,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;YACzC,iBAAiB,EAAE,IAAI,CAAC,2BAA2B;YACnD,SAAS,EAAE,GAAG;YACd,YAAY,EAAE,YAAY;YAC1B,IAAI,EAAE,QAAQ;SACf,CAAC;;;cAGA,IAAI,CAAC,aAAa,CAAC;YACnB,EAAE,EAAE,iCAAiC;YACrC,WAAW,EAAE,WAAW;YACxB,IAAI,EAAE,OAAO;YACb,YAAY,EAAE,aAAa;YAC3B,QAAQ,EAAE,IAAI;YACd,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;YACzC,iBAAiB,EAAE,IAAI,CAAC,2BAA2B;YACnD,SAAS,EAAE,GAAG;SACf,CAAC;;;;;cAKA,IAAI,CAAC,aAAa,CAAC;YACnB,EAAE,EAAE,sCAAsC;YAC1C,WAAW,EAAE,gBAAgB;YAC7B,QAAQ,EAAE,IAAI;YACd,YAAY,EAAE,eAAe;YAC7B,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,gBAAgB;YACtB,iBAAiB,EAAE,IAAI,CAAC,oBAAoB;YAC5C,iBAAiB,EAAE,IAAI,CAAC,8BAA8B;SACvD,CAAC;;;cAGA,IAAI,CAAC,aAAa,CAAC;YACnB,EAAE,EAAE,wCAAwC;YAC5C,WAAW,EAAE,2BAA2B;YACxC,YAAY,EAAE,eAAe;YAC7B,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,kBAAkB;SACzB,CAAC;;;cAGA,IAAI,CAAC,aAAa,CAAC;YACnB,EAAE,EAAE,gCAAgC;YACpC,WAAW,EAAE,MAAM;YACnB,YAAY,EAAE,gBAAgB;YAC9B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,UAAU;YAChB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;YACzC,iBAAiB,EAAE,IAAI,CAAC,2BAA2B;SACpD,CAAC;;;cAGA,IAAI,CAAC,aAAa,CAAC;YACnB,EAAE,EAAE,8BAA8B;YAClC,WAAW,EAAE,kBAAkB;YAC/B,YAAY,EAAE,gBAAgB;YAC9B,QAAQ,EAAE,IAAI,CAAC,2BAA2B;YAC1C,IAAI,EAAE,QAAQ;YACd,iBAAiB,EAAE,IAAI,CAAC,2BAA2B;gBACjD,CAAC,CAAC,IAAI,CAAC,iBAAiB;gBACxB,CAAC,CAAC,SAAS;YACb,iBAAiB,EAAE,IAAI,CAAC,2BAA2B;gBACjD,CAAC,CAAC,IAAI,CAAC,2BAA2B;gBAClC,CAAC,CAAC,SAAS;SACd,CAAC;cACA,IAAI,CAAC,aAAa,CAAC;YACnB,EAAE,EAAE,mCAAmC;YACvC,WAAW,EAAE,cAAc;YAC3B,YAAY,EAAE,aAAa;YAC3B,QAAQ,EAAE,IAAI,CAAC,2BAA2B;YAC1C,IAAI,EAAE,QAAQ;YACd,iBAAiB,EAAE,IAAI,CAAC,2BAA2B;gBACjD,CAAC,CAAC,IAAI,CAAC,gBAAgB;gBACvB,CAAC,CAAC,SAAS;YACb,iBAAiB,EAAE,IAAI,CAAC,2BAA2B;gBACjD,CAAC,CAAC,IAAI,CAAC,0BAA0B;gBACjC,CAAC,CAAC,SAAS;YACb,eAAe,EAAE,YAAY,CAAC,aAAa;SAC5C,CAAC;;6BAEe,IAAI,CAAC,uBAAuB;;;QAGjD,IAAI,CAAC,SAAS;KACjB,CAAC;IACJ,CAAC;IAED,IAAY,2BAA2B;QACrC,OAAO,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC;IACvC,CAAC;IAED,IAAY,uBAAuB;QACjC,OAAO,IAAI,CAAA;;;;oBAIK,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,QAAQ,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;YACvD,IAAI,SAAS,CAAC,QAAQ,CAAC;gBAAE,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;QAC3D,CAAC;;YAEC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YACjC,MAAM,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;YAC5B,OAAO,IAAI,CAAA;8BACO,GAAG,cAAc,GAAG,KAAK,IAAI,CAAC,eAAe,IAAI,IAAI;aACtE,CAAC;QACJ,CAAC,CAAC;;;KAGP,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,gBAAgB;QACd,yEAAyE;QACzE,8CAA8C;QAC9C,yDAAyD;QACzD,8CAA8C;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,wDAAwD;IAChD,YAAY,CAAC,CAAgB;QACnC,IAAI,CAAC,YAAY,CAAC,SAAS,GAAG,EAAE,CAAC;QACjC,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,MAAM,eAAe,GAAG,KAAK,CAAC,EAAE,CAAC;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,eAAe,EAAE,CAAgB,CAAC;QACzF,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;IAC5B,CAAC;IAEO,aAAa,CAAC,OAarB;;QACC,MAAM,QAAQ,GAAG,MAAA,OAAO,CAAC,QAAQ,mCAAI,IAAI,CAAC;QAC1C,MAAM,SAAS,GAAG,MAAA,OAAO,CAAC,SAAS,mCAAI,MAAM,CAAC;QAC9C,MAAM,UAAU,GAAG,MAAA,OAAO,CAAC,eAAe,mCAAI,YAAY,CAAC,UAAU,CAAC;QAEtE,OAAO,IAAI,CAAA;;gBAEC,OAAO,CAAC,EAAE;gBACV,OAAO,CAAC,IAAI;2BACD,UAAU;oBACjB,OAAO,CAAC,QAAQ;;qBAEf,OAAO,CAAC,EAAE,IAAI,OAAO,CAAC,WAAW;;iBAErC,SAAS;eACX,OAAO,CAAC,EAAE;;iBAER,OAAO,CAAC,IAAI;uBACN,OAAO,CAAC,WAAW;wBAClB,OAAO,CAAC,WAAW;sBACrB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;sBAC5B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;yBACzB,MAAA,OAAO,CAAC,YAAY,mCAAI,IAAI;oBACjC,SAAS,CAAC,OAAO,CAAC,iBAAiB,CAAC;kBACtC,SAAS,CAAC,OAAO,CAAC,iBAAiB,CAAC;mBACnC,IAAI,CAAC,YAAY;sBACd,QAAQ;;;KAGzB,CAAC;IACJ,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,gBAAgB,CAAC;YAC1B,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;IACL,CAAC;IAED,IAAI,WAAW;QACb,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,aAAa,EAAE,IAAI,CAAC,kBAAkB,CAAC,KAAK;YAC5C,eAAe,EAAE,IAAI,CAAC,oBAAoB,CAAC,KAAK;YAChD,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK;YAClC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK;YAC9B,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK;YACtC,iBAAiB,EAAE,IAAI,CAAC,sBAAsB,CAAC,KAAK;SACrD,CAAC,CAAC;QACH,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,YAAY,CAAC;YACtB,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;YAC5B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK;YACpC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK;SACnC,CAAC,CAAC;IACL,CAAC;IAED;;;;;;;;;;;;OAYG;IACH,IAAY,SAAS;QACnB,MAAM,iBAAiB,GAAG,GAAG,CAAA,2CAA2C,CAAC;QACzE,MAAM,eAAe,GAAG,GAAG,CAAA,yCAAyC,CAAC;QAErE,MAAM,eAAe,GAAG,GAAG,CAAA,8BAA8B,CAAC;QAC1D,MAAM,eAAe,GAAG,GAAG,CAAA,mEAAmE,CAAC;QAC/F,MAAM,aAAa,GAAG,GAAG,CAAA,qCAAqC,CAAC;QAC/D,MAAM,cAAc,GAAG,GAAG,CAAA,kCAAkC,CAAC;QAE7D,MAAM,cAAc,GAAG,GAAG,CAAA,eAAe,eAAe,GAAG,CAAC;QAC5D,MAAM,gBAAgB,GAAG,GAAG,CAAA,eAAe,iBAAiB,GAAG,CAAC;QAEhE,OAAO,IAAI,CAAA;;;;;;;;;;;2BAWY,eAAe;;;;;;;;;;;;;;;;;;;;;;;;mBAwBvB,cAAc;;;;mBAId,gBAAgB;;;;;;;;;;mBAUhB,gBAAgB;;;;;;;;;;;;;;mBAchB,cAAc;;;;;mBAKd,cAAc;uBACV,aAAa;;yBAEX,eAAe;;;;;;;;;;;;uBAYjB,aAAa;yBACX,eAAe;;;;;KAKnC,CAAC;IACJ,CAAC;CACF,CAAA;AA9boD;IAAlD,KAAK,CAAC,0CAA0C,CAAC;qDAAgC;AAC3C;IAAtC,KAAK,CAAC,8BAA8B,CAAC;+CAA+B;AAEb;IAAvD,KAAK,CAAC,+CAA+C,CAAC;yDAAoC;AAC/C;IAA3C,KAAK,CAAC,mCAAmC,CAAC;mDAAmC;AAEvB;IAAtD,KAAK,CAAC,8CAA8C,CAAC;wDAAmC;AAC9C;IAA1C,KAAK,CAAC,kCAAkC,CAAC;kDAAkC;AAEnB;IAAxD,KAAK,CAAC,gDAAgD,CAAC;sDAAiC;AAC5C;IAA5C,KAAK,CAAC,oCAAoC,CAAC;oDAAoC;AAGhF;IADC,KAAK,CAAC,mDAAmD,CAAC;6DACpB;AACS;IAA/C,KAAK,CAAC,uCAAuC,CAAC;uDAAuC;AAGtF;IADC,KAAK,CAAC,qDAAqD,CAAC;+DACpB;AACS;IAAjD,KAAK,CAAC,yCAAyC,CAAC;yDAAyC;AAEpC;IAArD,KAAK,CAAC,6CAA6C,CAAC;wDAAmC;AAC9C;IAAzC,KAAK,CAAC,iCAAiC,CAAC;kDAAkC;AAEvB;IAAnD,KAAK,CAAC,2CAA2C,CAAC;sDAAiC;AAC5C;IAAvC,KAAK,CAAC,+BAA+B,CAAC;gDAAgC;AAEpB;IAAlD,KAAK,CAAC,0CAA0C,CAAC;2DAA4C;AAE/C;IAA9C,KAAK,CAAC,sCAAsC,CAAC;iDAA+B;AAC9D;IAAd,KAAK,CAAC,MAAM,CAAC;yCAAwB;AAGV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAiB;AAnCjC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA+bvB","sourcesContent":["import { LitElement, html, css, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n BillingInfo,\n CustomerInfo,\n DonorContactInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { AutoCompleteFieldOptions } from './autocomplete-field-options';\nimport { SpacerOption } from '../badged-input';\nimport { BadgedInput } from '../badged-input';\nimport '../badged-input';\n\nimport emailImg from '@internetarchive/icon-email/index.js';\nimport localePinImg from '@internetarchive/icon-locale-pin/index.js';\nimport userIcon from '@internetarchive/icon-user/index.js';\n\nimport { countries } from './countries';\nimport { msg } from '@lit/localize';\n\n@customElement('contact-form')\nexport class ContactForm extends LitElement {\n @query('badged-input.donation-contact-form-email') emailBadgedInput!: BadgedInput;\n @query('#donation-contact-form-email') emailField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-first-name') firstNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-first-name') firstNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-last-name') lastNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-last-name') lastNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-postal-code') postalBadgedInput!: BadgedInput;\n @query('#donation-contact-form-postal-code') postalCodeField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-street-address')\n streetAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-street-address') streetAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-extended-address')\n extendedAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-extended-address') extendedAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-locality') localityBadgedInput!: BadgedInput;\n @query('#donation-contact-form-locality') localityField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-region') regionBadgedInput!: BadgedInput;\n @query('#donation-contact-form-region') regionField!: HTMLInputElement;\n\n @query('#donation-contact-form-countryCodeAlpha2') countryCodeAlpha2Field!: HTMLSelectElement;\n\n @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;\n @query('form') form!: HTMLFormElement;\n\n /** @keyof countries */\n @property({ type: String }) selectedCountry = 'US';\n\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 reportValidity(): boolean {\n this.validateFormFields();\n return this.validateForm();\n }\n\n // validate each field and set the error state on the badged-inputs\n private validateFormFields(): void {\n const fields: {\n badgedInput: BadgedInput;\n inputField: HTMLInputElement;\n }[] = [\n { badgedInput: this.emailBadgedInput, inputField: this.emailField },\n { badgedInput: this.firstNameBadgedInput, inputField: this.firstNameField },\n { badgedInput: this.lastNameBadgedInput, inputField: this.lastNameField },\n { badgedInput: this.streetAddressBadgedInput, inputField: this.streetAddressField },\n { badgedInput: this.extendedAddressBadgedInput, inputField: this.extendedAddressField },\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 // validate the overall form and show error messages\n private validateForm(): boolean {\n const isValid = this.form.reportValidity();\n\n if (!isValid) {\n this.errorMessage.innerText = msg(\n 'Please enter any missing or invalid contact information below',\n );\n } else {\n this.errorMessage.innerText = '';\n }\n\n return isValid;\n }\n\n focus(): void {\n this.emailField.focus();\n }\n\n // minimum two non-whitespace characters\n private minTwoCharPattern = '.*\\\\S{2,}.*';\n private minTwoCharValidationMessage = msg('Enter at least two characters');\n\n // at least two non-whitespace characters with at least two characters in between them\n private streetAddressPattern = '.*?\\\\S.{2,}\\\\S.*?';\n private streetAddressValidationMessage = msg('Enter at least four characters');\n\n // matches 12345 or 12345-6789 or 123456789\n private usZipCodePattern = '^\\\\d{5}(-?\\\\d{4})?$';\n private usZipCodeValidationMessage = msg('Enter a valid 5 or 9 digit zip/postal code');\n\n /** @inheritdoc */\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: 'Email',\n required: true,\n fieldType: 'email',\n name: 'email',\n autocomplete: 'email',\n minlength: 5,\n maxlength: 255,\n icon: emailImg,\n })}\n </div>\n </fieldset>\n\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-first-name',\n placeholder: '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: '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: 'Address Line 1',\n required: true,\n autocomplete: 'address-line1',\n icon: localePinImg,\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: '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: '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: '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: '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 <badged-input>\n <select\n id=\"donation-contact-form-countryCodeAlpha2\"\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}>${name}</option>\n `;\n })}\n </select>\n </badged-input>\n `;\n }\n\n /** @inheritdoc */\n createRenderRoot(): this {\n // Render template without shadow DOM. Note that shadow DOM features like\n // encapsulated CSS and slots are unavailable.\n // Form autofill does not work properly in the shadow DOM\n // so we need our form fields in the light DOM\n return this;\n }\n\n // reset the error state when the user focuses the input\n private inputFocused(e: KeyboardEvent): void {\n this.errorMessage.innerText = '';\n const input = e.target as HTMLInputElement;\n const inputIdentifier = input.id;\n const badgedInput = this.querySelector(`badged-input.${inputIdentifier}`) as BadgedInput;\n 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 <badged-input\n class=${options.id}\n .icon=${options.icon}\n .iconSpaceOption=${iconOption}\n ?required=${options.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 aria-label=${options.placeholder}\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 </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 const billingInfo = 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 return billingInfo;\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 * This is not the normal LitElement styles block.\n *\n * This element uses the clear DOM instead of the shadow DOM so it can't use\n * the shadowRoot's isolated styling. This is a bit of a workaround to keep all of\n * the styling local by writing out our own <style> tag and just be careful about\n * the selectors since they will leak outside of this component.\n *\n * @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ContactForm\n */\n private get getStyles(): TemplateResult {\n const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 3rem)`;\n const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 5rem)`;\n\n const fieldSetSpacing = css`var(--fieldSetSpacing, 1rem)`;\n const fieldFontFamily = css`var(--fontFamily, \"Helvetica Neue\", Helvetica, Arial, sans-serif)`;\n const fieldFontSize = css`var(--contactFieldFontSize, 1.6rem)`;\n const fieldFontColor = css`var(--inputFieldFontColor, #333)`;\n\n const iconFieldWidth = css`calc(100% - ${iconSpacerWidth})`;\n const noIconFieldWidth = css`calc(100% - ${noIconSpacerWidth})`;\n\n return html`\n <style>\n /*\n **NOTE**\n This element is in the lightDOM so be sure to prefix all styles\n with \"contact-form\" so styles don't leak.\n */\n contact-form fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: ${fieldSetSpacing};\n background-color: white;\n }\n\n /* These 1px and 0 margins in the next few selectors are to account for the\n double outlines caused by the fields being right next to each other */\n contact-form .row {\n display: flex;\n margin: -1px 0 0 0;\n }\n\n contact-form fieldset .row:first-child {\n margin-top: 0;\n }\n\n contact-form badged-input.donation-contact-form-region {\n width: 60%;\n }\n\n contact-form badged-input.donation-contact-form-postal-code {\n width: 40%;\n }\n\n contact-form #donation-contact-form-region {\n width: ${iconFieldWidth};\n }\n\n contact-form #donation-contact-form-postal-code {\n width: ${noIconFieldWidth};\n }\n\n contact-form #donation-contact-form-error-message {\n color: red;\n font-size: 1.4rem;\n margin-bottom: 0.6rem;\n }\n\n contact-form #donation-contact-form-last-name {\n width: ${noIconFieldWidth};\n }\n\n /* only show for screen readers */\n contact-form label {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n\n contact-form .donation-contact-form-input {\n width: ${iconFieldWidth};\n border: 0;\n outline: 0;\n background: transparent;\n font-weight: bold;\n color: ${fieldFontColor};\n font-size: ${fieldFontSize};\n padding: 0;\n font-family: ${fieldFontFamily};\n }\n\n contact-form .donation-contact-form-input::placeholder {\n color: revert;\n }\n\n contact-form #donation-contact-form-countryCodeAlpha2 {\n width: calc(100%);\n height: 100%;\n box-sizing: border-box;\n font-weight: bold;\n font-size: ${fieldFontSize};\n font-family: ${fieldFontFamily};\n border: 0;\n background: #fff;\n }\n </style>\n `;\n }\n}\n"]}
package/dist/test/tests/form-elements/contact-form.test.js CHANGED
@@ -66,6 +66,22 @@ describe('ContactForm', () => {
66
66
  expect(regionInput.required).to.be.false;
67
67
  expect(postalCodeInput.required).to.be.false;
68
68
  }));
69
+ it('only validates zip code pattern for US addresses', () => __awaiter(void 0, void 0, void 0, function* () {
70
+ const el = (yield fixture(html `<contact-form></contact-form>`));
71
+ const postalCodeInput = el.querySelector('#donation-contact-form-postal-code');
72
+ // Test for US
73
+ el.selectedCountry = 'US';
74
+ yield elementUpdated(el);
75
+ postalCodeInput.value = '1234'; // Invalid US zip
76
+ yield elementUpdated(el);
77
+ expect(postalCodeInput.checkValidity()).to.be.false;
78
+ // Test for CA
79
+ el.selectedCountry = 'CA';
80
+ yield elementUpdated(el);
81
+ postalCodeInput.value = '1234'; // Should be valid since pattern is not applied
82
+ yield elementUpdated(el);
83
+ expect(postalCodeInput.checkValidity()).to.be.true;
84
+ }));
69
85
  });
70
86
  describe('postal code validation pattern', () => {
71
87
  it('validates US postal codes correctly', () => __awaiter(void 0, void 0, void 0, function* () {
package/dist/test/tests/form-elements/contact-form.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"contact-form.test.js","sourceRoot":"","sources":["../../../../test/tests/form-elements/contact-form.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, elementUpdated, expect } from '@open-wc/testing';\nimport { html } from 'lit';\nimport '../../../src/form-elements/contact-form/contact-form';\nimport type { ContactForm } from '../../../src/form-elements/contact-form/contact-form';\n\ndescribe('ContactForm', () => {\n it('validates required fields', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const firstNameInput = el.querySelector(\n '#donation-contact-form-first-name',\n ) as HTMLInputElement;\n const lastNameInput = el.querySelector('#donation-contact-form-last-name') as HTMLInputElement;\n const emailInput = el.querySelector('#donation-contact-form-email') as HTMLInputElement;\n\n firstNameInput.value = ' ';\n lastNameInput.value = ' ';\n emailInput.value = '';\n\n expect(firstNameInput.checkValidity()).to.be.false;\n expect(lastNameInput.checkValidity()).to.be.false;\n expect(emailInput.checkValidity()).to.be.false;\n\n firstNameInput.value = 'John';\n lastNameInput.value = 'Doe';\n emailInput.value = 'john.doe@example.com';\n await elementUpdated(el);\n\n expect(firstNameInput.checkValidity()).to.be.true;\n expect(lastNameInput.checkValidity()).to.be.true;\n expect(emailInput.checkValidity()).to.be.true;\n });\n\n it('requires minimum number of characters for first and last name', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const firstNameInput = el.querySelector(\n '#donation-contact-form-first-name',\n ) as HTMLInputElement;\n const lastNameInput = el.querySelector('#donation-contact-form-last-name') as HTMLInputElement;\n firstNameInput.value = 'A';\n lastNameInput.value = 'B';\n await elementUpdated(el);\n expect(firstNameInput.checkValidity()).to.be.false;\n expect(lastNameInput.checkValidity()).to.be.false;\n });\n\n it('requires email by default', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const emailInput = el.querySelector('#donation-contact-form-email') as HTMLInputElement;\n expect(emailInput.required).to.be.true;\n });\n\n it('street address requires minimum number of characters', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const streetAddressInput = el.querySelector(\n '#donation-contact-form-street-address',\n ) as HTMLInputElement;\n streetAddressInput.value = '1 b';\n await elementUpdated(el);\n expect(streetAddressInput.checkValidity()).to.be.false;\n streetAddressInput.value = '1 st';\n await elementUpdated(el);\n expect(streetAddressInput.checkValidity()).to.be.true;\n });\n\n describe('region and postal code requirements', () => {\n it('state and postal code required for US address', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n el.selectedCountry = 'US';\n await elementUpdated(el);\n const regionInput = el.querySelector('#donation-contact-form-region') as HTMLInputElement;\n const postalCodeInput = el.querySelector(\n '#donation-contact-form-postal-code',\n ) as HTMLInputElement;\n expect(regionInput.required).to.be.true;\n expect(postalCodeInput.required).to.be.true;\n });\n\n it('state and postal code optional for non-US address', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n el.selectedCountry = 'CA';\n await elementUpdated(el);\n const regionInput = el.querySelector('#donation-contact-form-region') as HTMLInputElement;\n const postalCodeInput = el.querySelector(\n '#donation-contact-form-postal-code',\n ) as HTMLInputElement;\n expect(regionInput.required).to.be.false;\n expect(postalCodeInput.required).to.be.false;\n });\n });\n\n describe('postal code validation pattern', () => {\n it('validates US postal codes correctly', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n el.selectedCountry = 'US';\n await elementUpdated(el);\n const postalCodeInput = el.querySelector(\n '#donation-contact-form-postal-code',\n ) as HTMLInputElement;\n\n const validPostalCodes = ['12345', '12345-6789', '123456789'];\n const invalidPostalCodes = ['1234', '123456', '1234A', 'ABCDE', '12345-678'];\n\n for (const code of validPostalCodes) {\n postalCodeInput.value = code;\n await elementUpdated(el);\n expect(postalCodeInput.checkValidity(), `Expected ${code} to be valid`).to.be.true;\n }\n\n for (const code of invalidPostalCodes) {\n postalCodeInput.value = code;\n await elementUpdated(el);\n expect(postalCodeInput.checkValidity(), `Expected ${code} to be invalid`).to.be.false;\n }\n });\n });\n\n describe('country selector', () => {\n it('defaults selectedCountry to US', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n expect(el.selectedCountry).to.equal('US');\n });\n\n it('dropdown updates selectedCountry property', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const countrySelect = el.querySelector(\n '#donation-contact-form-countryCodeAlpha2',\n ) as HTMLSelectElement;\n countrySelect.value = 'CA';\n countrySelect.dispatchEvent(new Event('change'));\n await elementUpdated(el);\n expect(el.selectedCountry).to.equal('CA');\n });\n\n it('does not update selectedCountry property for invalid country code', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const countrySelect = el.querySelector(\n '#donation-contact-form-countryCodeAlpha2',\n ) as HTMLSelectElement;\n const initialCountry = el.selectedCountry;\n countrySelect.value = 'XX'; // Invalid country code\n countrySelect.dispatchEvent(new Event('change'));\n await elementUpdated(el);\n expect(el.selectedCountry).to.equal(initialCountry);\n });\n });\n\n describe('reportValidity()', () => {\n it('returns false if required fields are empty and shows validation messages', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const firstNameInput = el.querySelector(\n '#donation-contact-form-first-name',\n ) as HTMLInputElement;\n const lastNameInput = el.querySelector(\n '#donation-contact-form-last-name',\n ) as HTMLInputElement;\n const emailInput = el.querySelector('#donation-contact-form-email') as HTMLInputElement;\n\n firstNameInput.value = '';\n lastNameInput.value = '';\n emailInput.value = '';\n\n const validityResult = el.reportValidity();\n\n expect(validityResult).to.be.false;\n expect(firstNameInput.validationMessage).to.not.equal('');\n expect(lastNameInput.validationMessage).to.not.equal('');\n expect(emailInput.validationMessage).to.not.equal('');\n });\n\n it('returns true if all required fields are filled correctly', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const firstNameInput = el.querySelector(\n '#donation-contact-form-first-name',\n ) as HTMLInputElement;\n const lastNameInput = el.querySelector(\n '#donation-contact-form-last-name',\n ) as HTMLInputElement;\n const emailInput = el.querySelector('#donation-contact-form-email') as HTMLInputElement;\n const streetAddressInput = el.querySelector(\n '#donation-contact-form-street-address',\n ) as HTMLInputElement;\n const cityInput = el.querySelector('#donation-contact-form-locality') as HTMLInputElement;\n const regionInput = el.querySelector('#donation-contact-form-region') as HTMLInputElement;\n const postalCodeInput = el.querySelector(\n '#donation-contact-form-postal-code',\n ) as HTMLInputElement;\n\n streetAddressInput.value = '123 Main St';\n cityInput.value = 'Anytown';\n regionInput.value = 'CA';\n postalCodeInput.value = '12345';\n\n firstNameInput.value = 'John';\n lastNameInput.value = 'Doe';\n emailInput.value = 'john.doe@example.com';\n\n const validityResult = el.reportValidity();\n\n expect(validityResult).to.be.true;\n expect(firstNameInput.validationMessage).to.equal('');\n expect(lastNameInput.validationMessage).to.equal('');\n expect(emailInput.validationMessage).to.equal('');\n });\n });\n});\n"]}
1
+ {"version":3,"file":"contact-form.test.js","sourceRoot":"","sources":["../../../../test/tests/form-elements/contact-form.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, elementUpdated, expect } from '@open-wc/testing';\nimport { html } from 'lit';\nimport '../../../src/form-elements/contact-form/contact-form';\nimport type { ContactForm } from '../../../src/form-elements/contact-form/contact-form';\n\ndescribe('ContactForm', () => {\n it('validates required fields', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const firstNameInput = el.querySelector(\n '#donation-contact-form-first-name',\n ) as HTMLInputElement;\n const lastNameInput = el.querySelector('#donation-contact-form-last-name') as HTMLInputElement;\n const emailInput = el.querySelector('#donation-contact-form-email') as HTMLInputElement;\n\n firstNameInput.value = ' ';\n lastNameInput.value = ' ';\n emailInput.value = '';\n\n expect(firstNameInput.checkValidity()).to.be.false;\n expect(lastNameInput.checkValidity()).to.be.false;\n expect(emailInput.checkValidity()).to.be.false;\n\n firstNameInput.value = 'John';\n lastNameInput.value = 'Doe';\n emailInput.value = 'john.doe@example.com';\n await elementUpdated(el);\n\n expect(firstNameInput.checkValidity()).to.be.true;\n expect(lastNameInput.checkValidity()).to.be.true;\n expect(emailInput.checkValidity()).to.be.true;\n });\n\n it('requires minimum number of characters for first and last name', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const firstNameInput = el.querySelector(\n '#donation-contact-form-first-name',\n ) as HTMLInputElement;\n const lastNameInput = el.querySelector('#donation-contact-form-last-name') as HTMLInputElement;\n firstNameInput.value = 'A';\n lastNameInput.value = 'B';\n await elementUpdated(el);\n expect(firstNameInput.checkValidity()).to.be.false;\n expect(lastNameInput.checkValidity()).to.be.false;\n });\n\n it('requires email by default', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const emailInput = el.querySelector('#donation-contact-form-email') as HTMLInputElement;\n expect(emailInput.required).to.be.true;\n });\n\n it('street address requires minimum number of characters', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const streetAddressInput = el.querySelector(\n '#donation-contact-form-street-address',\n ) as HTMLInputElement;\n streetAddressInput.value = '1 b';\n await elementUpdated(el);\n expect(streetAddressInput.checkValidity()).to.be.false;\n streetAddressInput.value = '1 st';\n await elementUpdated(el);\n expect(streetAddressInput.checkValidity()).to.be.true;\n });\n\n describe('region and postal code requirements', () => {\n it('state and postal code required for US address', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n el.selectedCountry = 'US';\n await elementUpdated(el);\n const regionInput = el.querySelector('#donation-contact-form-region') as HTMLInputElement;\n const postalCodeInput = el.querySelector(\n '#donation-contact-form-postal-code',\n ) as HTMLInputElement;\n expect(regionInput.required).to.be.true;\n expect(postalCodeInput.required).to.be.true;\n });\n\n it('state and postal code optional for non-US address', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n el.selectedCountry = 'CA';\n await elementUpdated(el);\n const regionInput = el.querySelector('#donation-contact-form-region') as HTMLInputElement;\n const postalCodeInput = el.querySelector(\n '#donation-contact-form-postal-code',\n ) as HTMLInputElement;\n expect(regionInput.required).to.be.false;\n expect(postalCodeInput.required).to.be.false;\n });\n\n it('only validates zip code pattern for US addresses', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const postalCodeInput = el.querySelector(\n '#donation-contact-form-postal-code',\n ) as HTMLInputElement;\n\n // Test for US\n el.selectedCountry = 'US';\n await elementUpdated(el);\n postalCodeInput.value = '1234'; // Invalid US zip\n await elementUpdated(el);\n expect(postalCodeInput.checkValidity()).to.be.false;\n\n // Test for CA\n el.selectedCountry = 'CA';\n await elementUpdated(el);\n postalCodeInput.value = '1234'; // Should be valid since pattern is not applied\n await elementUpdated(el);\n expect(postalCodeInput.checkValidity()).to.be.true;\n });\n });\n\n describe('postal code validation pattern', () => {\n it('validates US postal codes correctly', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n el.selectedCountry = 'US';\n await elementUpdated(el);\n const postalCodeInput = el.querySelector(\n '#donation-contact-form-postal-code',\n ) as HTMLInputElement;\n\n const validPostalCodes = ['12345', '12345-6789', '123456789'];\n const invalidPostalCodes = ['1234', '123456', '1234A', 'ABCDE', '12345-678'];\n\n for (const code of validPostalCodes) {\n postalCodeInput.value = code;\n await elementUpdated(el);\n expect(postalCodeInput.checkValidity(), `Expected ${code} to be valid`).to.be.true;\n }\n\n for (const code of invalidPostalCodes) {\n postalCodeInput.value = code;\n await elementUpdated(el);\n expect(postalCodeInput.checkValidity(), `Expected ${code} to be invalid`).to.be.false;\n }\n });\n });\n\n describe('country selector', () => {\n it('defaults selectedCountry to US', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n expect(el.selectedCountry).to.equal('US');\n });\n\n it('dropdown updates selectedCountry property', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const countrySelect = el.querySelector(\n '#donation-contact-form-countryCodeAlpha2',\n ) as HTMLSelectElement;\n countrySelect.value = 'CA';\n countrySelect.dispatchEvent(new Event('change'));\n await elementUpdated(el);\n expect(el.selectedCountry).to.equal('CA');\n });\n\n it('does not update selectedCountry property for invalid country code', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const countrySelect = el.querySelector(\n '#donation-contact-form-countryCodeAlpha2',\n ) as HTMLSelectElement;\n const initialCountry = el.selectedCountry;\n countrySelect.value = 'XX'; // Invalid country code\n countrySelect.dispatchEvent(new Event('change'));\n await elementUpdated(el);\n expect(el.selectedCountry).to.equal(initialCountry);\n });\n });\n\n describe('reportValidity()', () => {\n it('returns false if required fields are empty and shows validation messages', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const firstNameInput = el.querySelector(\n '#donation-contact-form-first-name',\n ) as HTMLInputElement;\n const lastNameInput = el.querySelector(\n '#donation-contact-form-last-name',\n ) as HTMLInputElement;\n const emailInput = el.querySelector('#donation-contact-form-email') as HTMLInputElement;\n\n firstNameInput.value = '';\n lastNameInput.value = '';\n emailInput.value = '';\n\n const validityResult = el.reportValidity();\n\n expect(validityResult).to.be.false;\n expect(firstNameInput.validationMessage).to.not.equal('');\n expect(lastNameInput.validationMessage).to.not.equal('');\n expect(emailInput.validationMessage).to.not.equal('');\n });\n\n it('returns true if all required fields are filled correctly', async () => {\n const el = (await fixture(html`<contact-form></contact-form>`)) as ContactForm;\n const firstNameInput = el.querySelector(\n '#donation-contact-form-first-name',\n ) as HTMLInputElement;\n const lastNameInput = el.querySelector(\n '#donation-contact-form-last-name',\n ) as HTMLInputElement;\n const emailInput = el.querySelector('#donation-contact-form-email') as HTMLInputElement;\n const streetAddressInput = el.querySelector(\n '#donation-contact-form-street-address',\n ) as HTMLInputElement;\n const cityInput = el.querySelector('#donation-contact-form-locality') as HTMLInputElement;\n const regionInput = el.querySelector('#donation-contact-form-region') as HTMLInputElement;\n const postalCodeInput = el.querySelector(\n '#donation-contact-form-postal-code',\n ) as HTMLInputElement;\n\n streetAddressInput.value = '123 Main St';\n cityInput.value = 'Anytown';\n regionInput.value = 'CA';\n postalCodeInput.value = '12345';\n\n firstNameInput.value = 'John';\n lastNameInput.value = 'Doe';\n emailInput.value = 'john.doe@example.com';\n\n const validityResult = el.reportValidity();\n\n expect(validityResult).to.be.true;\n expect(firstNameInput.validationMessage).to.equal('');\n expect(lastNameInput.validationMessage).to.equal('');\n expect(emailInput.validationMessage).to.equal('');\n });\n });\n});\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/donation-form",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "The Internet Archive Donation Form",
5
5
  "license": "AGPL-3.0-only",
6
6
  "main": "dist/index.js",
package/src/form-elements/contact-form/contact-form.ts CHANGED
@@ -116,8 +116,8 @@ export class ContactForm extends LitElement {
116
116
  private streetAddressValidationMessage = msg('Enter at least four characters');
117
117
 
118
118
  // matches 12345 or 12345-6789 or 123456789
119
- private zipCodePattern = '^\\d{5}(-?\\d{4})?$';
120
- private zipCodeValidationMessage = msg('Enter a valid 5 or 9 digit zip/postal code');
119
+ private usZipCodePattern = '^\\d{5}(-?\\d{4})?$';
120
+ private usZipCodeValidationMessage = msg('Enter a valid 5 or 9 digit zip/postal code');
121
121
 
122
122
  /** @inheritdoc */
123
123
  render(): TemplateResult {
@@ -207,8 +207,12 @@ export class ContactForm extends LitElement {
207
207
  autocomplete: 'address-level1',
208
208
  required: this.regionAndPostalCodeRequired,
209
209
  name: 'region',
210
- validationPattern: this.minTwoCharPattern,
211
- validationMessage: this.minTwoCharValidationMessage,
210
+ validationPattern: this.regionAndPostalCodeRequired
211
+ ? this.minTwoCharPattern
212
+ : undefined,
213
+ validationMessage: this.regionAndPostalCodeRequired
214
+ ? this.minTwoCharValidationMessage
215
+ : undefined,
212
216
  })}
213
217
  ${this.generateInput({
214
218
  id: 'donation-contact-form-postal-code',
@@ -216,8 +220,12 @@ export class ContactForm extends LitElement {
216
220
  autocomplete: 'postal-code',
217
221
  required: this.regionAndPostalCodeRequired,
218
222
  name: 'postal',
219
- validationPattern: this.zipCodePattern,
220
- validationMessage: this.zipCodeValidationMessage,
223
+ validationPattern: this.regionAndPostalCodeRequired
224
+ ? this.usZipCodePattern
225
+ : undefined,
226
+ validationMessage: this.regionAndPostalCodeRequired
227
+ ? this.usZipCodeValidationMessage
228
+ : undefined,
221
229
  iconSpaceOption: SpacerOption.CompressSpace,
222
230
  })}
223
231
  </div>