@internetarchive/donation-form 1.0.3-webdev-8114.0 → 1.0.3-webdev-8114.1

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 (6) hide show
  1. package/dist/src/form-elements/contact-form/contact-form.js +1 -4
  2. package/dist/src/form-elements/contact-form/contact-form.js.map +1 -1
  3. package/dist/test/tests/form-elements/contact-form.test.js +20 -0
  4. package/dist/test/tests/form-elements/contact-form.test.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/form-elements/contact-form/contact-form.ts +1 -4
package/dist/src/form-elements/contact-form/contact-form.js CHANGED
@@ -142,10 +142,7 @@ let ContactForm = class ContactForm extends LitElement {
142
142
  autocomplete: 'postal-code',
143
143
  required: this.regionAndPostalCodeRequired,
144
144
  name: 'postal',
145
- minlength: 5,
146
- maxlength: 9,
147
- // must start with a character, then may contain spaces
148
- validationPattern: '[a-zA-Z\\-\\d]+[a-zA-Z\\-\\d\\s]*',
145
+ validationPattern: '^\\d{5}(-\\d{4})?$',
149
146
  iconSpaceOption: SpacerOption.CompressSpace,
150
147
  })}
151
148
  </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';\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 @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 const fieldBadgedInputs: Array<[HTMLInputElement, BadgedInput]> = [\n [this.emailField, this.emailBadgedInput],\n [this.firstNameField, this.firstNameBadgedInput],\n [this.lastNameField, this.lastNameBadgedInput],\n [this.regionField, this.regionBadgedInput],\n [this.localityField, this.localityBadgedInput],\n [this.streetAddressField, this.streetAddressBadgedInput],\n [this.postalCodeField, this.postalBadgedInput],\n ];\n\n let isValid = true;\n fieldBadgedInputs.forEach(([inputElement, badgedInput]) => {\n const fieldValid = inputElement.checkValidity();\n isValid = isValid && fieldValid;\n if (!fieldValid) {\n badgedInput.error = true;\n }\n });\n\n if (!isValid) {\n this.errorMessage.innerText = 'Please enter any missing or invalid contact information below';\n } else {\n this.errorMessage.innerText = '';\n }\n\n return isValid;\n }\n\n focus(): void {\n this.emailField.focus();\n }\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: '.*\\\\S{2,}.*',\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: '.*\\\\S{2,}.*',\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: '.*?\\\\S.{2,}\\\\S.*?',\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: '.*\\\\S{2,}.*',\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: '.*\\\\S{2,}.*',\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 minlength: 5,\n maxlength: 9,\n // must start with a character, then may contain spaces\n validationPattern: '[a-zA-Z\\\\-\\\\d]+[a-zA-Z\\\\-\\\\d\\\\s]*',\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 }): 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 @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":"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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';\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 @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 const fieldBadgedInputs: Array<[HTMLInputElement, BadgedInput]> = [\n [this.emailField, this.emailBadgedInput],\n [this.firstNameField, this.firstNameBadgedInput],\n [this.lastNameField, this.lastNameBadgedInput],\n [this.regionField, this.regionBadgedInput],\n [this.localityField, this.localityBadgedInput],\n [this.streetAddressField, this.streetAddressBadgedInput],\n [this.postalCodeField, this.postalBadgedInput],\n ];\n\n let isValid = true;\n fieldBadgedInputs.forEach(([inputElement, badgedInput]) => {\n const fieldValid = inputElement.checkValidity();\n isValid = isValid && fieldValid;\n if (!fieldValid) {\n badgedInput.error = true;\n }\n });\n\n if (!isValid) {\n this.errorMessage.innerText = 'Please enter any missing or invalid contact information below';\n } else {\n this.errorMessage.innerText = '';\n }\n\n return isValid;\n }\n\n focus(): void {\n this.emailField.focus();\n }\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: '.*\\\\S{2,}.*',\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: '.*\\\\S{2,}.*',\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: '.*?\\\\S.{2,}\\\\S.*?',\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: '.*\\\\S{2,}.*',\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: '.*\\\\S{2,}.*',\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: '^\\\\d{5}(-\\\\d{4})?$',\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 }): 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 @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
@@ -67,6 +67,26 @@ describe('ContactForm', () => {
67
67
  expect(postalCodeInput.required).to.be.false;
68
68
  }));
69
69
  });
70
+ describe('postal code validation pattern', () => {
71
+ it('validates US postal codes correctly', () => __awaiter(void 0, void 0, void 0, function* () {
72
+ const el = (yield fixture(html `<contact-form></contact-form>`));
73
+ el.selectedCountry = 'US';
74
+ yield elementUpdated(el);
75
+ const postalCodeInput = el.querySelector('#donation-contact-form-postal-code');
76
+ const validPostalCodes = ['12345', '12345-6789'];
77
+ const invalidPostalCodes = ['1234', '123456', '1234A', 'ABCDE', '12345-678'];
78
+ for (const code of validPostalCodes) {
79
+ postalCodeInput.value = code;
80
+ yield elementUpdated(el);
81
+ expect(postalCodeInput.checkValidity(), `Expected ${code} to be valid`).to.be.true;
82
+ }
83
+ for (const code of invalidPostalCodes) {
84
+ postalCodeInput.value = code;
85
+ yield elementUpdated(el);
86
+ expect(postalCodeInput.checkValidity(), `Expected ${code} to be invalid`).to.be.false;
87
+ }
88
+ }));
89
+ });
70
90
  describe('country selector', () => {
71
91
  it('defaults selectedCountry to US', () => __awaiter(void 0, void 0, void 0, function* () {
72
92
  const el = (yield fixture(html `<contact-form></contact-form>`));
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('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\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'];\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-webdev-8114.0",
3
+ "version": "1.0.3-webdev-8114.1",
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
@@ -186,10 +186,7 @@ export class ContactForm extends LitElement {
186
186
  autocomplete: 'postal-code',
187
187
  required: this.regionAndPostalCodeRequired,
188
188
  name: 'postal',
189
- minlength: 5,
190
- maxlength: 9,
191
- // must start with a character, then may contain spaces
192
- validationPattern: '[a-zA-Z\\-\\d]+[a-zA-Z\\-\\d\\s]*',
189
+ validationPattern: '^\\d{5}(-\\d{4})?$',
193
190
  iconSpaceOption: SpacerOption.CompressSpace,
194
191
  })}
195
192
  </div>