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

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

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

package/dist/src/form-elements/contact-form/countries.d.ts

@@ -1,3 +1,3 @@
-export declare const countries: {
-    [key: string]: string;
-};
+export declare const countries: {
+    [key: string]: string;
+};

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

@@ -1,253 +1,253 @@
-export const countries = {
-    AF: 'Afghanistan',
-    AX: 'Aland Islands',
-    AL: 'Albania',
-    DZ: 'Algeria',
-    AS: 'American Samoa',
-    AD: 'Andorra',
-    AO: 'Angola',
-    AI: 'Anguilla',
-    AQ: 'Antarctica',
-    AG: 'Antigua and Barbuda',
-    AR: 'Argentina',
-    AM: 'Armenia',
-    AW: 'Aruba',
-    AU: 'Australia',
-    AT: 'Austria',
-    AZ: 'Azerbaijan',
-    BS: 'Bahamas',
-    BH: 'Bahrain',
-    BD: 'Bangladesh',
-    BB: 'Barbados',
-    BY: 'Belarus',
-    BE: 'Belgium',
-    BZ: 'Belize',
-    BJ: 'Benin',
-    BM: 'Bermuda',
-    BT: 'Bhutan',
-    BO: 'Bolivia',
-    BQ: 'Bonaire, Saint Eustatius and Saba ',
-    BA: 'Bosnia and Herzegovina',
-    BW: 'Botswana',
-    BV: 'Bouvet Island',
-    BR: 'Brazil',
-    IO: 'British Indian Ocean Territory',
-    VG: 'British Virgin Islands',
-    BN: 'Brunei',
-    BG: 'Bulgaria',
-    BF: 'Burkina Faso',
-    BI: 'Burundi',
-    KH: 'Cambodia',
-    CM: 'Cameroon',
-    CA: 'Canada',
-    CV: 'Cape Verde',
-    KY: 'Cayman Islands',
-    CF: 'Central African Republic',
-    TD: 'Chad',
-    CL: 'Chile',
-    CN: 'China',
-    CX: 'Christmas Island',
-    CC: 'Cocos Islands',
-    CO: 'Colombia',
-    KM: 'Comoros',
-    CK: 'Cook Islands',
-    CR: 'Costa Rica',
-    HR: 'Croatia',
-    CU: 'Cuba',
-    CW: 'Curacao',
-    CY: 'Cyprus',
-    CZ: 'Czech Republic',
-    CD: 'Democratic Republic of the Congo',
-    DK: 'Denmark',
-    DJ: 'Djibouti',
-    DM: 'Dominica',
-    DO: 'Dominican Republic',
-    TL: 'East Timor',
-    EC: 'Ecuador',
-    EG: 'Egypt',
-    SV: 'El Salvador',
-    GQ: 'Equatorial Guinea',
-    ER: 'Eritrea',
-    EE: 'Estonia',
-    ET: 'Ethiopia',
-    FK: 'Falkland Islands',
-    FO: 'Faroe Islands',
-    FJ: 'Fiji',
-    FI: 'Finland',
-    FR: 'France',
-    GF: 'French Guiana',
-    PF: 'French Polynesia',
-    TF: 'French Southern Territories',
-    GA: 'Gabon',
-    GM: 'Gambia',
-    GE: 'Georgia',
-    DE: 'Germany',
-    GH: 'Ghana',
-    GI: 'Gibraltar',
-    GR: 'Greece',
-    GL: 'Greenland',
-    GD: 'Grenada',
-    GP: 'Guadeloupe',
-    GU: 'Guam',
-    GT: 'Guatemala',
-    GG: 'Guernsey',
-    GN: 'Guinea',
-    GW: 'Guinea-Bissau',
-    GY: 'Guyana',
-    HT: 'Haiti',
-    HM: 'Heard Island and McDonald Islands',
-    HN: 'Honduras',
-    HK: 'Hong Kong',
-    HU: 'Hungary',
-    IS: 'Iceland',
-    IN: 'India',
-    ID: 'Indonesia',
-    IR: 'Iran',
-    IQ: 'Iraq',
-    IE: 'Ireland',
-    IM: 'Isle of Man',
-    IL: 'Israel',
-    IT: 'Italy',
-    CI: 'Ivory Coast',
-    JM: 'Jamaica',
-    JP: 'Japan',
-    JE: 'Jersey',
-    JO: 'Jordan',
-    KZ: 'Kazakhstan',
-    KE: 'Kenya',
-    KI: 'Kiribati',
-    XK: 'Kosovo',
-    KW: 'Kuwait',
-    KG: 'Kyrgyzstan',
-    LA: 'Laos',
-    LV: 'Latvia',
-    LB: 'Lebanon',
-    LS: 'Lesotho',
-    LR: 'Liberia',
-    LY: 'Libya',
-    LI: 'Liechtenstein',
-    LT: 'Lithuania',
-    LU: 'Luxembourg',
-    MO: 'Macao',
-    MK: 'Macedonia',
-    MG: 'Madagascar',
-    MW: 'Malawi',
-    MY: 'Malaysia',
-    MV: 'Maldives',
-    ML: 'Mali',
-    MT: 'Malta',
-    MH: 'Marshall Islands',
-    MQ: 'Martinique',
-    MR: 'Mauritania',
-    MU: 'Mauritius',
-    YT: 'Mayotte',
-    MX: 'Mexico',
-    FM: 'Micronesia',
-    MD: 'Moldova',
-    MC: 'Monaco',
-    MN: 'Mongolia',
-    ME: 'Montenegro',
-    MS: 'Montserrat',
-    MA: 'Morocco',
-    MZ: 'Mozambique',
-    MM: 'Myanmar',
-    NA: 'Namibia',
-    NR: 'Nauru',
-    NP: 'Nepal',
-    NL: 'Netherlands',
-    NC: 'New Caledonia',
-    NZ: 'New Zealand',
-    NI: 'Nicaragua',
-    NE: 'Niger',
-    NG: 'Nigeria',
-    NU: 'Niue',
-    NF: 'Norfolk Island',
-    KP: 'North Korea',
-    MP: 'Northern Mariana Islands',
-    NO: 'Norway',
-    OM: 'Oman',
-    PK: 'Pakistan',
-    PW: 'Palau',
-    PS: 'Palestinian Territory',
-    PA: 'Panama',
-    PG: 'Papua New Guinea',
-    PY: 'Paraguay',
-    PE: 'Peru',
-    PH: 'Philippines',
-    PN: 'Pitcairn',
-    PL: 'Poland',
-    PT: 'Portugal',
-    PR: 'Puerto Rico',
-    QA: 'Qatar',
-    CG: 'Republic of the Congo',
-    RE: 'Reunion',
-    RO: 'Romania',
-    RU: 'Russia',
-    RW: 'Rwanda',
-    BL: 'Saint Barthelemy',
-    SH: 'Saint Helena',
-    KN: 'Saint Kitts and Nevis',
-    LC: 'Saint Lucia',
-    MF: 'Saint Martin',
-    PM: 'Saint Pierre and Miquelon',
-    VC: 'Saint Vincent and the Grenadines',
-    WS: 'Samoa',
-    SM: 'San Marino',
-    ST: 'Sao Tome and Principe',
-    SA: 'Saudi Arabia',
-    SN: 'Senegal',
-    RS: 'Serbia',
-    SC: 'Seychelles',
-    SL: 'Sierra Leone',
-    SG: 'Singapore',
-    SX: 'Sint Maarten',
-    SK: 'Slovakia',
-    SI: 'Slovenia',
-    SB: 'Solomon Islands',
-    SO: 'Somalia',
-    ZA: 'South Africa',
-    GS: 'South Georgia and the South Sandwich Islands',
-    KR: 'South Korea',
-    SS: 'South Sudan',
-    ES: 'Spain',
-    LK: 'Sri Lanka',
-    SD: 'Sudan',
-    SR: 'Suriname',
-    SJ: 'Svalbard and Jan Mayen',
-    SZ: 'Swaziland',
-    SE: 'Sweden',
-    CH: 'Switzerland',
-    SY: 'Syria',
-    TW: 'Taiwan',
-    TJ: 'Tajikistan',
-    TZ: 'Tanzania',
-    TH: 'Thailand',
-    TG: 'Togo',
-    TK: 'Tokelau',
-    TO: 'Tonga',
-    TT: 'Trinidad and Tobago',
-    TN: 'Tunisia',
-    TR: 'Turkey',
-    TM: 'Turkmenistan',
-    TC: 'Turks and Caicos Islands',
-    TV: 'Tuvalu',
-    VI: 'U.S. Virgin Islands',
-    UG: 'Uganda',
-    UA: 'Ukraine',
-    AE: 'United Arab Emirates',
-    GB: 'United Kingdom',
-    UM: 'United States Minor Outlying Islands',
-    US: 'United States',
-    UY: 'Uruguay',
-    UZ: 'Uzbekistan',
-    VU: 'Vanuatu',
-    VA: 'Vatican',
-    VE: 'Venezuela',
-    VN: 'Vietnam',
-    WF: 'Wallis and Futuna',
-    EH: 'Western Sahara',
-    YE: 'Yemen',
-    ZM: 'Zambia',
-    ZW: 'Zimbabwe',
-};
+export const countries = {
+    AF: 'Afghanistan',
+    AX: 'Aland Islands',
+    AL: 'Albania',
+    DZ: 'Algeria',
+    AS: 'American Samoa',
+    AD: 'Andorra',
+    AO: 'Angola',
+    AI: 'Anguilla',
+    AQ: 'Antarctica',
+    AG: 'Antigua and Barbuda',
+    AR: 'Argentina',
+    AM: 'Armenia',
+    AW: 'Aruba',
+    AU: 'Australia',
+    AT: 'Austria',
+    AZ: 'Azerbaijan',
+    BS: 'Bahamas',
+    BH: 'Bahrain',
+    BD: 'Bangladesh',
+    BB: 'Barbados',
+    BY: 'Belarus',
+    BE: 'Belgium',
+    BZ: 'Belize',
+    BJ: 'Benin',
+    BM: 'Bermuda',
+    BT: 'Bhutan',
+    BO: 'Bolivia',
+    BQ: 'Bonaire, Saint Eustatius and Saba ',
+    BA: 'Bosnia and Herzegovina',
+    BW: 'Botswana',
+    BV: 'Bouvet Island',
+    BR: 'Brazil',
+    IO: 'British Indian Ocean Territory',
+    VG: 'British Virgin Islands',
+    BN: 'Brunei',
+    BG: 'Bulgaria',
+    BF: 'Burkina Faso',
+    BI: 'Burundi',
+    KH: 'Cambodia',
+    CM: 'Cameroon',
+    CA: 'Canada',
+    CV: 'Cape Verde',
+    KY: 'Cayman Islands',
+    CF: 'Central African Republic',
+    TD: 'Chad',
+    CL: 'Chile',
+    CN: 'China',
+    CX: 'Christmas Island',
+    CC: 'Cocos Islands',
+    CO: 'Colombia',
+    KM: 'Comoros',
+    CK: 'Cook Islands',
+    CR: 'Costa Rica',
+    HR: 'Croatia',
+    CU: 'Cuba',
+    CW: 'Curacao',
+    CY: 'Cyprus',
+    CZ: 'Czech Republic',
+    CD: 'Democratic Republic of the Congo',
+    DK: 'Denmark',
+    DJ: 'Djibouti',
+    DM: 'Dominica',
+    DO: 'Dominican Republic',
+    TL: 'East Timor',
+    EC: 'Ecuador',
+    EG: 'Egypt',
+    SV: 'El Salvador',
+    GQ: 'Equatorial Guinea',
+    ER: 'Eritrea',
+    EE: 'Estonia',
+    ET: 'Ethiopia',
+    FK: 'Falkland Islands',
+    FO: 'Faroe Islands',
+    FJ: 'Fiji',
+    FI: 'Finland',
+    FR: 'France',
+    GF: 'French Guiana',
+    PF: 'French Polynesia',
+    TF: 'French Southern Territories',
+    GA: 'Gabon',
+    GM: 'Gambia',
+    GE: 'Georgia',
+    DE: 'Germany',
+    GH: 'Ghana',
+    GI: 'Gibraltar',
+    GR: 'Greece',
+    GL: 'Greenland',
+    GD: 'Grenada',
+    GP: 'Guadeloupe',
+    GU: 'Guam',
+    GT: 'Guatemala',
+    GG: 'Guernsey',
+    GN: 'Guinea',
+    GW: 'Guinea-Bissau',
+    GY: 'Guyana',
+    HT: 'Haiti',
+    HM: 'Heard Island and McDonald Islands',
+    HN: 'Honduras',
+    HK: 'Hong Kong',
+    HU: 'Hungary',
+    IS: 'Iceland',
+    IN: 'India',
+    ID: 'Indonesia',
+    IR: 'Iran',
+    IQ: 'Iraq',
+    IE: 'Ireland',
+    IM: 'Isle of Man',
+    IL: 'Israel',
+    IT: 'Italy',
+    CI: 'Ivory Coast',
+    JM: 'Jamaica',
+    JP: 'Japan',
+    JE: 'Jersey',
+    JO: 'Jordan',
+    KZ: 'Kazakhstan',
+    KE: 'Kenya',
+    KI: 'Kiribati',
+    XK: 'Kosovo',
+    KW: 'Kuwait',
+    KG: 'Kyrgyzstan',
+    LA: 'Laos',
+    LV: 'Latvia',
+    LB: 'Lebanon',
+    LS: 'Lesotho',
+    LR: 'Liberia',
+    LY: 'Libya',
+    LI: 'Liechtenstein',
+    LT: 'Lithuania',
+    LU: 'Luxembourg',
+    MO: 'Macao',
+    MK: 'Macedonia',
+    MG: 'Madagascar',
+    MW: 'Malawi',
+    MY: 'Malaysia',
+    MV: 'Maldives',
+    ML: 'Mali',
+    MT: 'Malta',
+    MH: 'Marshall Islands',
+    MQ: 'Martinique',
+    MR: 'Mauritania',
+    MU: 'Mauritius',
+    YT: 'Mayotte',
+    MX: 'Mexico',
+    FM: 'Micronesia',
+    MD: 'Moldova',
+    MC: 'Monaco',
+    MN: 'Mongolia',
+    ME: 'Montenegro',
+    MS: 'Montserrat',
+    MA: 'Morocco',
+    MZ: 'Mozambique',
+    MM: 'Myanmar',
+    NA: 'Namibia',
+    NR: 'Nauru',
+    NP: 'Nepal',
+    NL: 'Netherlands',
+    NC: 'New Caledonia',
+    NZ: 'New Zealand',
+    NI: 'Nicaragua',
+    NE: 'Niger',
+    NG: 'Nigeria',
+    NU: 'Niue',
+    NF: 'Norfolk Island',
+    KP: 'North Korea',
+    MP: 'Northern Mariana Islands',
+    NO: 'Norway',
+    OM: 'Oman',
+    PK: 'Pakistan',
+    PW: 'Palau',
+    PS: 'Palestinian Territory',
+    PA: 'Panama',
+    PG: 'Papua New Guinea',
+    PY: 'Paraguay',
+    PE: 'Peru',
+    PH: 'Philippines',
+    PN: 'Pitcairn',
+    PL: 'Poland',
+    PT: 'Portugal',
+    PR: 'Puerto Rico',
+    QA: 'Qatar',
+    CG: 'Republic of the Congo',
+    RE: 'Reunion',
+    RO: 'Romania',
+    RU: 'Russia',
+    RW: 'Rwanda',
+    BL: 'Saint Barthelemy',
+    SH: 'Saint Helena',
+    KN: 'Saint Kitts and Nevis',
+    LC: 'Saint Lucia',
+    MF: 'Saint Martin',
+    PM: 'Saint Pierre and Miquelon',
+    VC: 'Saint Vincent and the Grenadines',
+    WS: 'Samoa',
+    SM: 'San Marino',
+    ST: 'Sao Tome and Principe',
+    SA: 'Saudi Arabia',
+    SN: 'Senegal',
+    RS: 'Serbia',
+    SC: 'Seychelles',
+    SL: 'Sierra Leone',
+    SG: 'Singapore',
+    SX: 'Sint Maarten',
+    SK: 'Slovakia',
+    SI: 'Slovenia',
+    SB: 'Solomon Islands',
+    SO: 'Somalia',
+    ZA: 'South Africa',
+    GS: 'South Georgia and the South Sandwich Islands',
+    KR: 'South Korea',
+    SS: 'South Sudan',
+    ES: 'Spain',
+    LK: 'Sri Lanka',
+    SD: 'Sudan',
+    SR: 'Suriname',
+    SJ: 'Svalbard and Jan Mayen',
+    SZ: 'Swaziland',
+    SE: 'Sweden',
+    CH: 'Switzerland',
+    SY: 'Syria',
+    TW: 'Taiwan',
+    TJ: 'Tajikistan',
+    TZ: 'Tanzania',
+    TH: 'Thailand',
+    TG: 'Togo',
+    TK: 'Tokelau',
+    TO: 'Tonga',
+    TT: 'Trinidad and Tobago',
+    TN: 'Tunisia',
+    TR: 'Turkey',
+    TM: 'Turkmenistan',
+    TC: 'Turks and Caicos Islands',
+    TV: 'Tuvalu',
+    VI: 'U.S. Virgin Islands',
+    UG: 'Uganda',
+    UA: 'Ukraine',
+    AE: 'United Arab Emirates',
+    GB: 'United Kingdom',
+    UM: 'United States Minor Outlying Islands',
+    US: 'United States',
+    UY: 'Uruguay',
+    UZ: 'Uzbekistan',
+    VU: 'Vanuatu',
+    VA: 'Vatican',
+    VE: 'Venezuela',
+    VN: 'Vietnam',
+    WF: 'Wallis and Futuna',
+    EH: 'Western Sahara',
+    YE: 'Yemen',
+    ZM: 'Zambia',
+    ZW: 'Zimbabwe',
+};
 //# sourceMappingURL=countries.js.map