npm - @internetarchive/donation-form - Versions diffs - 1.0.3-webdev-8114.2 → 1.0.3 - Mend

@internetarchive/donation-form 1.0.3-webdev-8114.2 → 1.0.3

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 (5) hide show

package/dist/src/form-elements/contact-form/contact-form.d.ts CHANGED Viewed

@@ -22,11 +22,20 @@ export declare class ContactForm extends LitElement {
     countryCodeAlpha2Field: HTMLSelectElement;
     errorMessage: HTMLDivElement;
     form: HTMLFormElement;
+    /** @keyof countries */
     selectedCountry: string;
     donorEmail: string;
     updated(changed: PropertyValues): void;
     reportValidity(): boolean;
+    private validateFormFields;
+    private validateForm;
     focus(): void;
+    private minTwoCharPattern;
+    private minTwoCharValidationMessage;
+    private streetAddressPattern;
+    private streetAddressValidationMessage;
+    private zipCodePattern;
+    private zipCodeValidationMessage;
     /** @inheritdoc */
     render(): TemplateResult;
     private get regionAndPostalCodeRequired();

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

@@ -9,11 +9,22 @@ import emailImg from '@internetarchive/icon-email/index.js';
 import localePinImg from '@internetarchive/icon-locale-pin/index.js';
 import userIcon from '@internetarchive/icon-user/index.js';
 import { countries } from './countries';
+import { msg } from '@lit/localize';
 let ContactForm = class ContactForm extends LitElement {
     constructor() {
         super(...arguments);
+        /** @keyof countries */
         this.selectedCountry = 'US';
         this.donorEmail = '';
+        // minimum two non-whitespace characters
+        this.minTwoCharPattern = '.*\\S{2,}.*';
+        this.minTwoCharValidationMessage = msg('Enter at least two characters');
+        // at least two non-whitespace characters with at least two characters in between them
+        this.streetAddressPattern = '.*?\\S.{2,}\\S.*?';
+        this.streetAddressValidationMessage = msg('Enter at least four characters');
+        // matches 12345 or 12345-6789 or 123456789
+        this.zipCodePattern = '^\\d{5}(-?\\d{4})?$';
+        this.zipCodeValidationMessage = msg('Enter a valid 5 or 9 digit zip/postal code');
     }
     updated(changed) {
         var _a;
@@ -22,25 +33,30 @@ let ContactForm = class ContactForm extends LitElement {
         }
     }
     reportValidity() {
-        const fieldBadgedInputs = [
-            [this.emailField, this.emailBadgedInput],
-            [this.firstNameField, this.firstNameBadgedInput],
-            [this.lastNameField, this.lastNameBadgedInput],
-            [this.regionField, this.regionBadgedInput],
-            [this.localityField, this.localityBadgedInput],
-            [this.streetAddressField, this.streetAddressBadgedInput],
-            [this.postalCodeField, this.postalBadgedInput],
+        this.validateFormFields();
+        return this.validateForm();
+    }
+    // validate each field and set the error state on the badged-inputs
+    validateFormFields() {
+        const fields = [
+            { badgedInput: this.emailBadgedInput, inputField: this.emailField },
+            { badgedInput: this.firstNameBadgedInput, inputField: this.firstNameField },
+            { badgedInput: this.lastNameBadgedInput, inputField: this.lastNameField },
+            { badgedInput: this.streetAddressBadgedInput, inputField: this.streetAddressField },
+            { badgedInput: this.extendedAddressBadgedInput, inputField: this.extendedAddressField },
+            { badgedInput: this.localityBadgedInput, inputField: this.localityField },
+            { badgedInput: this.regionBadgedInput, inputField: this.regionField },
+            { badgedInput: this.postalBadgedInput, inputField: this.postalCodeField },
         ];
-        let isValid = true;
-        fieldBadgedInputs.forEach(([inputElement, badgedInput]) => {
-            const fieldValid = inputElement.checkValidity();
-            isValid = isValid && fieldValid;
-            if (!fieldValid) {
-                badgedInput.error = true;
-            }
+        fields.forEach(({ badgedInput, inputField }) => {
+            badgedInput.error = !inputField.checkValidity();
         });
+    }
+    // validate the overall form and show error messages
+    validateForm() {
+        const isValid = this.form.reportValidity();
         if (!isValid) {
-            this.errorMessage.innerText = 'Please enter any missing or invalid contact information below';
+            this.errorMessage.innerText = msg('Please enter any missing or invalid contact information below');
         }
         else {
             this.errorMessage.innerText = '';
@@ -78,7 +94,8 @@ let ContactForm = class ContactForm extends LitElement {
             placeholder: 'First name',
             name: 'fname',
             required: true,
-            validationPattern: '.*\\S{2,}.*',
+            validationPattern: this.minTwoCharPattern,
+            validationMessage: this.minTwoCharValidationMessage,
             maxlength: 255,
             autocomplete: 'given-name',
             icon: userIcon,
@@ -91,7 +108,8 @@ let ContactForm = class ContactForm extends LitElement {
             name: 'lname',
             autocomplete: 'family-name',
             required: true,
-            validationPattern: '.*\\S{2,}.*',
+            validationPattern: this.minTwoCharPattern,
+            validationMessage: this.minTwoCharValidationMessage,
             maxlength: 255,
         })}
           </div>
@@ -105,7 +123,8 @@ let ContactForm = class ContactForm extends LitElement {
             autocomplete: 'address-line1',
             icon: localePinImg,
             name: 'street-address',
-            validationPattern: '.*?\\S.{2,}\\S.*?',
+            validationPattern: this.streetAddressPattern,
+            validationMessage: this.streetAddressValidationMessage,
         })}
           </div>
           <div class="row">
@@ -124,7 +143,8 @@ let ContactForm = class ContactForm extends LitElement {
             autocomplete: 'address-level2',
             required: true,
             name: 'locality',
-            validationPattern: '.*\\S{2,}.*',
+            validationPattern: this.minTwoCharPattern,
+            validationMessage: this.minTwoCharValidationMessage,
         })}
           </div>
           <div class="row">
@@ -134,7 +154,8 @@ let ContactForm = class ContactForm extends LitElement {
             autocomplete: 'address-level1',
             required: this.regionAndPostalCodeRequired,
             name: 'region',
-            validationPattern: '.*\\S{2,}.*',
+            validationPattern: this.minTwoCharPattern,
+            validationMessage: this.minTwoCharValidationMessage,
         })}
             ${this.generateInput({
             id: 'donation-contact-form-postal-code',
@@ -142,7 +163,8 @@ let ContactForm = class ContactForm extends LitElement {
             autocomplete: 'postal-code',
             required: this.regionAndPostalCodeRequired,
             name: 'postal',
-            validationPattern: '^\\d{5}(-?\\d{4})?$',
+            validationPattern: this.zipCodePattern,
+            validationMessage: this.zipCodeValidationMessage,
             iconSpaceOption: SpacerOption.CompressSpace,
         })}
           </div>
@@ -216,6 +238,7 @@ let ContactForm = class ContactForm extends LitElement {
           minlength=${ifDefined(options.minlength)}
           autocomplete=${(_d = options.autocomplete) !== null && _d !== void 0 ? _d : 'on'}
           pattern=${ifDefined(options.validationPattern)}
+          title=${ifDefined(options.validationMessage)}
           @focus=${this.inputFocused}
           ?required=${required}
         />

package/dist/src/form-elements/contact-form/contact-form.js.map CHANGED Viewed

	@@ -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 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"]}
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"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-form",
-  "version": "1.0.3-webdev-8114.2",
+  "version": "1.0.3",
   "description": "The Internet Archive Donation Form",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",
@@ -46,6 +46,7 @@
     "@internetarchive/lazy-loader-service": "^0.2.0",
     "@internetarchive/modal-manager": "^2.0.0",
     "@internetarchive/promised-singleton": "^0.2.1",
+    "@lit/localize": "^0.12.2",
     "currency.js": "^2.0.2",
     "lit": "^2.8.0",
     "nanoevents": "^9.1.0"

package/src/form-elements/contact-form/contact-form.ts CHANGED Viewed

@@ -17,6 +17,7 @@ import localePinImg from '@internetarchive/icon-locale-pin/index.js';
 import userIcon from '@internetarchive/icon-user/index.js';
 import { countries } from './countries';
+import { msg } from '@lit/localize';
 @customElement('contact-form')
 export class ContactForm extends LitElement {
@@ -51,6 +52,7 @@ export class ContactForm extends LitElement {
   @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;
   @query('form') form!: HTMLFormElement;
+  /** @keyof countries */
   @property({ type: String }) selectedCountry = 'US';
   @property({ type: String }) donorEmail = '';
@@ -62,27 +64,38 @@ export class ContactForm extends LitElement {
   }
   reportValidity(): boolean {
-    const fieldBadgedInputs: Array<[HTMLInputElement, BadgedInput]> = [
-      [this.emailField, this.emailBadgedInput],
-      [this.firstNameField, this.firstNameBadgedInput],
-      [this.lastNameField, this.lastNameBadgedInput],
-      [this.regionField, this.regionBadgedInput],
-      [this.localityField, this.localityBadgedInput],
-      [this.streetAddressField, this.streetAddressBadgedInput],
-      [this.postalCodeField, this.postalBadgedInput],
-    ];
+    this.validateFormFields();
+    return this.validateForm();
+  }
-    let isValid = true;
-    fieldBadgedInputs.forEach(([inputElement, badgedInput]) => {
-      const fieldValid = inputElement.checkValidity();
-      isValid = isValid && fieldValid;
-      if (!fieldValid) {
-        badgedInput.error = true;
-      }
+  // validate each field and set the error state on the badged-inputs
+  private validateFormFields(): void {
+    const fields: {
+      badgedInput: BadgedInput;
+      inputField: HTMLInputElement;
+    }[] = [
+      { badgedInput: this.emailBadgedInput, inputField: this.emailField },
+      { badgedInput: this.firstNameBadgedInput, inputField: this.firstNameField },
+      { badgedInput: this.lastNameBadgedInput, inputField: this.lastNameField },
+      { badgedInput: this.streetAddressBadgedInput, inputField: this.streetAddressField },
+      { badgedInput: this.extendedAddressBadgedInput, inputField: this.extendedAddressField },
+      { badgedInput: this.localityBadgedInput, inputField: this.localityField },
+      { badgedInput: this.regionBadgedInput, inputField: this.regionField },
+      { badgedInput: this.postalBadgedInput, inputField: this.postalCodeField },
+    ];
+    fields.forEach(({ badgedInput, inputField }) => {
+      badgedInput.error = !inputField.checkValidity();
     });
+  }
+  // validate the overall form and show error messages
+  private validateForm(): boolean {
+    const isValid = this.form.reportValidity();
     if (!isValid) {
-      this.errorMessage.innerText = 'Please enter any missing or invalid contact information below';
+      this.errorMessage.innerText = msg(
+        'Please enter any missing or invalid contact information below',
+      );
     } else {
       this.errorMessage.innerText = '';
     }
@@ -94,6 +107,18 @@ export class ContactForm extends LitElement {
     this.emailField.focus();
   }
+  // minimum two non-whitespace characters
+  private minTwoCharPattern = '.*\\S{2,}.*';
+  private minTwoCharValidationMessage = msg('Enter at least two characters');
+  // at least two non-whitespace characters with at least two characters in between them
+  private streetAddressPattern = '.*?\\S.{2,}\\S.*?';
+  private streetAddressValidationMessage = msg('Enter at least four characters');
+  // matches 12345 or 12345-6789 or 123456789
+  private zipCodePattern = '^\\d{5}(-?\\d{4})?$';
+  private zipCodeValidationMessage = msg('Enter a valid 5 or 9 digit zip/postal code');
   /** @inheritdoc */
   render(): TemplateResult {
     return html`
@@ -122,7 +147,8 @@ export class ContactForm extends LitElement {
               placeholder: 'First name',
               name: 'fname',
               required: true,
-              validationPattern: '.*\\S{2,}.*',
+              validationPattern: this.minTwoCharPattern,
+              validationMessage: this.minTwoCharValidationMessage,
               maxlength: 255,
               autocomplete: 'given-name',
               icon: userIcon,
@@ -135,7 +161,8 @@ export class ContactForm extends LitElement {
               name: 'lname',
               autocomplete: 'family-name',
               required: true,
-              validationPattern: '.*\\S{2,}.*',
+              validationPattern: this.minTwoCharPattern,
+              validationMessage: this.minTwoCharValidationMessage,
               maxlength: 255,
             })}
           </div>
@@ -149,7 +176,8 @@ export class ContactForm extends LitElement {
               autocomplete: 'address-line1',
               icon: localePinImg,
               name: 'street-address',
-              validationPattern: '.*?\\S.{2,}\\S.*?',
+              validationPattern: this.streetAddressPattern,
+              validationMessage: this.streetAddressValidationMessage,
             })}
           </div>
           <div class="row">
@@ -168,7 +196,8 @@ export class ContactForm extends LitElement {
               autocomplete: 'address-level2',
               required: true,
               name: 'locality',
-              validationPattern: '.*\\S{2,}.*',
+              validationPattern: this.minTwoCharPattern,
+              validationMessage: this.minTwoCharValidationMessage,
             })}
           </div>
           <div class="row">
@@ -178,7 +207,8 @@ export class ContactForm extends LitElement {
               autocomplete: 'address-level1',
               required: this.regionAndPostalCodeRequired,
               name: 'region',
-              validationPattern: '.*\\S{2,}.*',
+              validationPattern: this.minTwoCharPattern,
+              validationMessage: this.minTwoCharValidationMessage,
             })}
             ${this.generateInput({
               id: 'donation-contact-form-postal-code',
@@ -186,7 +216,8 @@ export class ContactForm extends LitElement {
               autocomplete: 'postal-code',
               required: this.regionAndPostalCodeRequired,
               name: 'postal',
-              validationPattern: '^\\d{5}(-?\\d{4})?$',
+              validationPattern: this.zipCodePattern,
+              validationMessage: this.zipCodeValidationMessage,
               iconSpaceOption: SpacerOption.CompressSpace,
             })}
           </div>
@@ -252,6 +283,7 @@ export class ContactForm extends LitElement {
     icon?: TemplateResult;
     iconSpaceOption?: SpacerOption;
     validationPattern?: string;
+    validationMessage?: string;
   }): TemplateResult {
     const required = options.required ?? true;
     const fieldType = options.fieldType ?? 'text';
@@ -276,6 +308,7 @@ export class ContactForm extends LitElement {
           minlength=${ifDefined(options.minlength)}
           autocomplete=${options.autocomplete ?? 'on'}
           pattern=${ifDefined(options.validationPattern)}
+          title=${ifDefined(options.validationMessage)}
           @focus=${this.inputFocused}
           ?required=${required}
         />