@internetarchive/donation-form 1.0.3-alpha-webdev7960.1 → 1.0.3-webdev-8114.0

package/dist/src/form-elements/badged-input.js

@@ -30,15 +30,15 @@ let BadgedInput = class BadgedInput extends LitElement {
     }
     /** @inheritdoc */
     render() {
-        return html `
-      <div class="input-wrapper ${this.errorClass} ${this.iconSpaceOptionClass}">
-        <div class="icon-container">${this.icon}</div>
-        <div class="required-indicator ${this.requiredIndicatorSpaceOption}">
-          ${this.required ? html ` * ` : nothing}
-        </div>
-
-        <slot></slot>
-      </div>
+        return html `
+      <div class="input-wrapper ${this.errorClass} ${this.iconSpaceOptionClass}">
+        <div class="icon-container">${this.icon}</div>
+        <div class="required-indicator ${this.requiredIndicatorSpaceOption}">
+          ${this.required ? html ` * ` : nothing}
+        </div>
+
+        <slot></slot>
+      </div>
     `;
     }
     get errorClass() {
@@ -58,44 +58,44 @@ let BadgedInput = class BadgedInput extends LitElement {
         const requiredIndicatorColor = css `var(--badgedInputRequiredIndicatorColor, red)`;
         const requiredIndicatorMargin = css `var(--badgedInputRequiredIndicatorMargin, 0 0.25rem 0 0)`;
         const requiredIndicatorFontSize = css `var(--badgedInputRequiredIndicatorFontSize, 2rem)`;
-        return css `
-      .input-wrapper {
-        border: ${borderCss};
-        height: ${fieldHeight};
-        display: flex;
-        align-items: center;
-      }
-
-      .input-wrapper.error {
-        box-shadow: inset 0px 0px 0px 1px ${errorColorCss};
-        border-color: ${errorColorCss};
-      }
-
-      .input-wrapper.compress-space .icon-container {
-        width: ${noIconSpacerWidth};
-      }
-
-      .icon-container {
-        width: ${iconSpacerWidth};
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-      }
-
-      .icon-container svg {
-        height: ${iconSize};
-      }
-
-      .required-indicator {
-        color: ${requiredIndicatorColor};
-        font-size: ${requiredIndicatorFontSize};
-        margin: ${requiredIndicatorMargin};
-      }
-
-      .required-indicator.leave-space {
-        width: 0.5em;
-      }
+        return css `
+      .input-wrapper {
+        border: ${borderCss};
+        height: ${fieldHeight};
+        display: flex;
+        align-items: center;
+      }
+
+      .input-wrapper.error {
+        box-shadow: inset 0px 0px 0px 1px ${errorColorCss};
+        border-color: ${errorColorCss};
+      }
+
+      .input-wrapper.compress-space .icon-container {
+        width: ${noIconSpacerWidth};
+      }
+
+      .icon-container {
+        width: ${iconSpacerWidth};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .icon-container svg {
+        height: ${iconSize};
+      }
+
+      .required-indicator {
+        color: ${requiredIndicatorColor};
+        font-size: ${requiredIndicatorFontSize};
+        margin: ${requiredIndicatorMargin};
+      }
+
+      .required-indicator.leave-space {
+        width: 0.5em;
+      }
     `;
     }
 };

package/dist/src/form-elements/badged-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"badged-input.js","sourceRoot":"","sources":["../../../src/form-elements/badged-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,OAAO,EAAE,MAAM,KAAK,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,0CAA0B,CAAA;IAC1B,gDAAgC,CAAA;AAClC,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAGM,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACwB,UAAK,GAAG,KAAK,CAAC;QAId,aAAQ,GAAG,KAAK,CAAC;QAE9C;;;;;WAKG;QACyB,oBAAe,GAAiB,YAAY,CAAC,UAAU,CAAC;QAEpF;;;;;;;WAOG;QACyB,iCAA4B,GAAiB,YAAY,CAAC,UAAU,CAAC;IA4EnG,CAAC;IA1EC,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,oBAAoB;sCACxC,IAAI,CAAC,IAAI;yCACN,IAAI,CAAC,4BAA4B;YAC9D,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,KAAK,CAAC,CAAC,CAAC,OAAO;;;;;KAK1C,CAAC;IACJ,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAC,eAAe,KAAK,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACrF,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,SAAS,GAAG,GAAG,CAAA,uCAAuC,CAAC;QAC7D,MAAM,aAAa,GAAG,GAAG,CAAA,yCAAyC,CAAC;QACnE,MAAM,QAAQ,GAAG,GAAG,CAAA,oCAAoC,CAAC;QACzD,MAAM,eAAe,GAAG,GAAG,CAAA,yCAAyC,CAAC;QACrE,MAAM,iBAAiB,GAAG,GAAG,CAAA,2CAA2C,CAAC;QACzE,MAAM,WAAW,GAAG,GAAG,CAAA,gCAAgC,CAAC;QACxD,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,uBAAuB,GAAG,GAAG,CAAA,0DAA0D,CAAC;QAC9F,MAAM,yBAAyB,GAAG,GAAG,CAAA,mDAAmD,CAAC;QAEzF,OAAO,GAAG,CAAA;;kBAEI,SAAS;kBACT,WAAW;;;;;;4CAMe,aAAa;wBACjC,aAAa;;;;iBAIpB,iBAAiB;;;;iBAIjB,eAAe;;;;;;;;kBAQd,QAAQ;;;;iBAIT,sBAAsB;qBAClB,yBAAyB;kBAC5B,uBAAuB;;;;;;KAMpC,CAAC;IACJ,CAAC;CACF,CAAA;AAlG8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAe;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAQlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAyD;AAUxD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAsE;AAvBtF,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmGvB","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nexport enum SpacerOption {\r\n  LeaveSpace = 'leave-space',\r\n  CompressSpace = 'compress-space',\r\n}\r\n\r\n@customElement('badged-input')\r\nexport class BadgedInput extends LitElement {\r\n  @property({ type: Boolean }) error = false;\r\n\r\n  @property({ type: Object }) icon?: TemplateResult;\r\n\r\n  @property({ type: Boolean }) required = false;\r\n\r\n  /**\r\n   * If the icon is hidden, should the space remain or be compressed\r\n   *\r\n   * @type {SpacerOption}\r\n   * @memberof BadgedInput\r\n   */\r\n  @property({ type: String }) iconSpaceOption: SpacerOption = SpacerOption.LeaveSpace;\r\n\r\n  /**\r\n   * When the required indicator is hidden, should the spacing remain\r\n   *\r\n   * This is useful for aligning many fields where some may not be required\r\n   *\r\n   * @type {SpacerOption}\r\n   * @memberof BadgedInput\r\n   */\r\n  @property({ type: String }) requiredIndicatorSpaceOption: SpacerOption = SpacerOption.LeaveSpace;\r\n\r\n  /** @inheritdoc */\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div class=\"input-wrapper ${this.errorClass} ${this.iconSpaceOptionClass}\">\r\n        <div class=\"icon-container\">${this.icon}</div>\r\n        <div class=\"required-indicator ${this.requiredIndicatorSpaceOption}\">\r\n          ${this.required ? html` * ` : nothing}\r\n        </div>\r\n\r\n        <slot></slot>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get errorClass(): string {\r\n    return this.error ? 'error' : '';\r\n  }\r\n\r\n  private get iconSpaceOptionClass(): string {\r\n    return this.iconSpaceOption === SpacerOption.CompressSpace ? 'compress-space' : '';\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  static get styles(): CSSResult {\r\n    const borderCss = css`var(--inputBorder, 1px solid #d9d9d9)`;\r\n    const errorColorCss = css`var(--badgedInputBorderErrorColor, red)`;\r\n    const iconSize = css`var(--badgedInputIconSize, 1.4rem)`;\r\n    const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 3rem)`;\r\n    const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 1rem)`;\r\n    const fieldHeight = css`var(--badgedInputHeight, 3rem)`;\r\n    const requiredIndicatorColor = css`var(--badgedInputRequiredIndicatorColor, red)`;\r\n    const requiredIndicatorMargin = css`var(--badgedInputRequiredIndicatorMargin, 0 0.25rem 0 0)`;\r\n    const requiredIndicatorFontSize = css`var(--badgedInputRequiredIndicatorFontSize, 2rem)`;\r\n\r\n    return css`\r\n      .input-wrapper {\r\n        border: ${borderCss};\r\n        height: ${fieldHeight};\r\n        display: flex;\r\n        align-items: center;\r\n      }\r\n\r\n      .input-wrapper.error {\r\n        box-shadow: inset 0px 0px 0px 1px ${errorColorCss};\r\n        border-color: ${errorColorCss};\r\n      }\r\n\r\n      .input-wrapper.compress-space .icon-container {\r\n        width: ${noIconSpacerWidth};\r\n      }\r\n\r\n      .icon-container {\r\n        width: ${iconSpacerWidth};\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-shrink: 0;\r\n      }\r\n\r\n      .icon-container svg {\r\n        height: ${iconSize};\r\n      }\r\n\r\n      .required-indicator {\r\n        color: ${requiredIndicatorColor};\r\n        font-size: ${requiredIndicatorFontSize};\r\n        margin: ${requiredIndicatorMargin};\r\n      }\r\n\r\n      .required-indicator.leave-space {\r\n        width: 0.5em;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"badged-input.js","sourceRoot":"","sources":["../../../src/form-elements/badged-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,OAAO,EAAE,MAAM,KAAK,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,0CAA0B,CAAA;IAC1B,gDAAgC,CAAA;AAClC,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAGM,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACwB,UAAK,GAAG,KAAK,CAAC;QAId,aAAQ,GAAG,KAAK,CAAC;QAE9C;;;;;WAKG;QACyB,oBAAe,GAAiB,YAAY,CAAC,UAAU,CAAC;QAEpF;;;;;;;WAOG;QACyB,iCAA4B,GAAiB,YAAY,CAAC,UAAU,CAAC;IA4EnG,CAAC;IA1EC,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,oBAAoB;sCACxC,IAAI,CAAC,IAAI;yCACN,IAAI,CAAC,4BAA4B;YAC9D,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,KAAK,CAAC,CAAC,CAAC,OAAO;;;;;KAK1C,CAAC;IACJ,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAC,eAAe,KAAK,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACrF,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,SAAS,GAAG,GAAG,CAAA,uCAAuC,CAAC;QAC7D,MAAM,aAAa,GAAG,GAAG,CAAA,yCAAyC,CAAC;QACnE,MAAM,QAAQ,GAAG,GAAG,CAAA,oCAAoC,CAAC;QACzD,MAAM,eAAe,GAAG,GAAG,CAAA,yCAAyC,CAAC;QACrE,MAAM,iBAAiB,GAAG,GAAG,CAAA,2CAA2C,CAAC;QACzE,MAAM,WAAW,GAAG,GAAG,CAAA,gCAAgC,CAAC;QACxD,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,uBAAuB,GAAG,GAAG,CAAA,0DAA0D,CAAC;QAC9F,MAAM,yBAAyB,GAAG,GAAG,CAAA,mDAAmD,CAAC;QAEzF,OAAO,GAAG,CAAA;;kBAEI,SAAS;kBACT,WAAW;;;;;;4CAMe,aAAa;wBACjC,aAAa;;;;iBAIpB,iBAAiB;;;;iBAIjB,eAAe;;;;;;;;kBAQd,QAAQ;;;;iBAIT,sBAAsB;qBAClB,yBAAyB;kBAC5B,uBAAuB;;;;;;KAMpC,CAAC;IACJ,CAAC;CACF,CAAA;AAlG8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAe;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAQlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAyD;AAUxD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAsE;AAvBtF,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmGvB","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport enum SpacerOption {\n  LeaveSpace = 'leave-space',\n  CompressSpace = 'compress-space',\n}\n\n@customElement('badged-input')\nexport class BadgedInput extends LitElement {\n  @property({ type: Boolean }) error = false;\n\n  @property({ type: Object }) icon?: TemplateResult;\n\n  @property({ type: Boolean }) required = false;\n\n  /**\n   * If the icon is hidden, should the space remain or be compressed\n   *\n   * @type {SpacerOption}\n   * @memberof BadgedInput\n   */\n  @property({ type: String }) iconSpaceOption: SpacerOption = SpacerOption.LeaveSpace;\n\n  /**\n   * When the required indicator is hidden, should the spacing remain\n   *\n   * This is useful for aligning many fields where some may not be required\n   *\n   * @type {SpacerOption}\n   * @memberof BadgedInput\n   */\n  @property({ type: String }) requiredIndicatorSpaceOption: SpacerOption = SpacerOption.LeaveSpace;\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"input-wrapper ${this.errorClass} ${this.iconSpaceOptionClass}\">\n        <div class=\"icon-container\">${this.icon}</div>\n        <div class=\"required-indicator ${this.requiredIndicatorSpaceOption}\">\n          ${this.required ? html` * ` : nothing}\n        </div>\n\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  private get errorClass(): string {\n    return this.error ? 'error' : '';\n  }\n\n  private get iconSpaceOptionClass(): string {\n    return this.iconSpaceOption === SpacerOption.CompressSpace ? 'compress-space' : '';\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const borderCss = css`var(--inputBorder, 1px solid #d9d9d9)`;\n    const errorColorCss = css`var(--badgedInputBorderErrorColor, red)`;\n    const iconSize = css`var(--badgedInputIconSize, 1.4rem)`;\n    const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 3rem)`;\n    const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 1rem)`;\n    const fieldHeight = css`var(--badgedInputHeight, 3rem)`;\n    const requiredIndicatorColor = css`var(--badgedInputRequiredIndicatorColor, red)`;\n    const requiredIndicatorMargin = css`var(--badgedInputRequiredIndicatorMargin, 0 0.25rem 0 0)`;\n    const requiredIndicatorFontSize = css`var(--badgedInputRequiredIndicatorFontSize, 2rem)`;\n\n    return css`\n      .input-wrapper {\n        border: ${borderCss};\n        height: ${fieldHeight};\n        display: flex;\n        align-items: center;\n      }\n\n      .input-wrapper.error {\n        box-shadow: inset 0px 0px 0px 1px ${errorColorCss};\n        border-color: ${errorColorCss};\n      }\n\n      .input-wrapper.compress-space .icon-container {\n        width: ${noIconSpacerWidth};\n      }\n\n      .icon-container {\n        width: ${iconSpacerWidth};\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n      }\n\n      .icon-container svg {\n        height: ${iconSize};\n      }\n\n      .required-indicator {\n        color: ${requiredIndicatorColor};\n        font-size: ${requiredIndicatorFontSize};\n        margin: ${requiredIndicatorMargin};\n      }\n\n      .required-indicator.leave-space {\n        width: 0.5em;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/form-elements/contact-form/autocomplete-field-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-field-options.js","sourceRoot":"","sources":["../../../../src/form-elements/contact-form/autocomplete-field-options.ts"],"names":[],"mappings":"","sourcesContent":["export type AutoCompleteFieldOptions =\r\n  | 'on'\r\n  | 'off'\r\n  | 'additional-name'\r\n  | 'address-level1'\r\n  | 'address-level2'\r\n  | 'address-level3'\r\n  | 'address-level4'\r\n  | 'address-line1'\r\n  | 'address-line2'\r\n  | 'address-line3'\r\n  | 'bday'\r\n  | 'bday-year'\r\n  | 'bday-day'\r\n  | 'bday-month'\r\n  | 'billing'\r\n  | 'cc-additional-name'\r\n  | 'cc-csc'\r\n  | 'cc-exp'\r\n  | 'cc-exp-month'\r\n  | 'cc-exp-year'\r\n  | 'cc-family-name'\r\n  | 'cc-given-name'\r\n  | 'cc-name'\r\n  | 'cc-number'\r\n  | 'cc-type'\r\n  | 'country'\r\n  | 'country-name'\r\n  | 'current-password'\r\n  | 'email'\r\n  | 'family-name'\r\n  | 'fax'\r\n  | 'given-name'\r\n  | 'home'\r\n  | 'honorific-prefix'\r\n  | 'honorific-suffix'\r\n  | 'impp'\r\n  | 'language'\r\n  | 'mobile'\r\n  | 'name'\r\n  | 'new-password'\r\n  | 'nickname'\r\n  | 'organization'\r\n  | 'organization-title'\r\n  | 'pager'\r\n  | 'photo'\r\n  | 'postal-code'\r\n  | 'sex'\r\n  | 'shipping'\r\n  | 'street-address'\r\n  | 'tel-area-code'\r\n  | 'tel'\r\n  | 'tel-country-code'\r\n  | 'tel-extension'\r\n  | 'tel-local'\r\n  | 'tel-local-prefix'\r\n  | 'tel-local-suffix'\r\n  | 'tel-national'\r\n  | 'transaction-amount'\r\n  | 'transaction-currency'\r\n  | 'url'\r\n  | 'username'\r\n  | 'work';\r\n"]}
+{"version":3,"file":"autocomplete-field-options.js","sourceRoot":"","sources":["../../../../src/form-elements/contact-form/autocomplete-field-options.ts"],"names":[],"mappings":"","sourcesContent":["export type AutoCompleteFieldOptions =\n  | 'on'\n  | 'off'\n  | 'additional-name'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday'\n  | 'bday-year'\n  | 'bday-day'\n  | 'bday-month'\n  | 'billing'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country'\n  | 'country-name'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'fax'\n  | 'given-name'\n  | 'home'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'mobile'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'organization'\n  | 'organization-title'\n  | 'pager'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'shipping'\n  | 'street-address'\n  | 'tel-area-code'\n  | 'tel'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-local-prefix'\n  | 'tel-local-suffix'\n  | 'tel-national'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'\n  | 'work';\n"]}

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

@@ -22,7 +22,6 @@ export declare class ContactForm extends LitElement {
     countryCodeAlpha2Field: HTMLSelectElement;
     errorMessage: HTMLDivElement;
     form: HTMLFormElement;
-    /** @keyof countries */
     selectedCountry: string;
     donorEmail: string;
     updated(changed: PropertyValues): void;
@@ -30,6 +29,7 @@ export declare class ContactForm extends LitElement {
     focus(): void;
     /** @inheritdoc */
     render(): TemplateResult;
+    private get regionAndPostalCodeRequired();
     private get countrySelectorTemplate();
     /** @inheritdoc */
     createRenderRoot(): this;

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

@@ -12,7 +12,6 @@ import { countries } from './countries';
 let ContactForm = class ContactForm extends LitElement {
     constructor() {
         super(...arguments);
-        /** @keyof countries */
         this.selectedCountry = 'US';
         this.donorEmail = '';
     }
@@ -41,7 +40,7 @@ let ContactForm = class ContactForm extends LitElement {
             }
         });
         if (!isValid) {
-            this.errorMessage.innerText = 'Please enter any missing contact information below';
+            this.errorMessage.innerText = 'Please enter any missing or invalid contact information below';
         }
         else {
             this.errorMessage.innerText = '';
@@ -53,11 +52,11 @@ let ContactForm = class ContactForm extends LitElement {
     }
     /** @inheritdoc */
     render() {
-        return html `
-      <div id="donation-contact-form-error-message"></div>
-      <form>
-        <fieldset>
-          <div class="row">
+        return html `
+      <div id="donation-contact-form-error-message"></div>
+      <form>
+        <fieldset>
+          <div class="row">
             ${this.generateInput({
             id: 'donation-contact-form-email',
             placeholder: 'Email',
@@ -65,37 +64,40 @@ let ContactForm = class ContactForm extends LitElement {
             fieldType: 'email',
             name: 'email',
             autocomplete: 'email',
+            minlength: 5,
             maxlength: 255,
             icon: emailImg,
-        })}
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <div class="row">
+        })}
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <div class="row">
             ${this.generateInput({
             id: 'donation-contact-form-first-name',
             placeholder: 'First name',
             name: 'fname',
             required: true,
+            validationPattern: '.*\\S{2,}.*',
             maxlength: 255,
             autocomplete: 'given-name',
             icon: userIcon,
-        })}
-          </div>
-          <div class="row">
+        })}
+          </div>
+          <div class="row">
             ${this.generateInput({
             id: 'donation-contact-form-last-name',
             placeholder: 'Last name',
             name: 'lname',
             autocomplete: 'family-name',
             required: true,
+            validationPattern: '.*\\S{2,}.*',
             maxlength: 255,
-        })}
-          </div>
-        </fieldset>
-        <fieldset>
-          <div class="row">
+        })}
+          </div>
+        </fieldset>
+        <fieldset>
+          <div class="row">
             ${this.generateInput({
             id: 'donation-contact-form-street-address',
             placeholder: 'Address Line 1',
@@ -103,86 +105,78 @@ let ContactForm = class ContactForm extends LitElement {
             autocomplete: 'address-line1',
             icon: localePinImg,
             name: 'street-address',
-        })}
-          </div>
-          <div class="row">
+            validationPattern: '.*?\\S.{2,}\\S.*?',
+        })}
+          </div>
+          <div class="row">
             ${this.generateInput({
             id: 'donation-contact-form-extended-address',
             placeholder: 'Address Line 2 (optional)',
             autocomplete: 'address-line2',
             required: false,
             name: 'extended-address',
-        })}
-          </div>
-          <div class="row">
+        })}
+          </div>
+          <div class="row">
             ${this.generateInput({
             id: 'donation-contact-form-locality',
             placeholder: 'City',
             autocomplete: 'address-level2',
             required: true,
             name: 'locality',
-        })}
-          </div>
-          <div class="row">
+            validationPattern: '.*\\S{2,}.*',
+        })}
+          </div>
+          <div class="row">
             ${this.generateInput({
             id: 'donation-contact-form-region',
             placeholder: 'State / Province',
             autocomplete: 'address-level1',
-            required: true,
+            required: this.regionAndPostalCodeRequired,
             name: 'region',
-        })}
+            validationPattern: '.*\\S{2,}.*',
+        })}
             ${this.generateInput({
             id: 'donation-contact-form-postal-code',
             placeholder: 'Zip / Postal',
             autocomplete: 'postal-code',
-            required: true,
+            required: this.regionAndPostalCodeRequired,
             name: 'postal',
+            minlength: 5,
             maxlength: 9,
             // must start with a character, then may contain spaces
             validationPattern: '[a-zA-Z\\-\\d]+[a-zA-Z\\-\\d\\s]*',
             iconSpaceOption: SpacerOption.CompressSpace,
-        })}
-          </div>
-          <div class="row">${this.countrySelectorTemplate}</div>
-        </fieldset>
-      </form>
-      ${this.getStyles}
+        })}
+          </div>
+          <div class="row">${this.countrySelectorTemplate}</div>
+        </fieldset>
+      </form>
+      ${this.getStyles}
     `;
     }
+    get regionAndPostalCodeRequired() {
+        return this.selectedCountry === 'US';
+    }
     get countrySelectorTemplate() {
-        return html `
-      <badged-input>
-        <select
-          id="donation-contact-form-countryCodeAlpha2"
+        return html `
+      <badged-input>
+        <select
+          id="donation-contact-form-countryCodeAlpha2"
           @change=${(e) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            const currCountry = this.selectedCountry;
-            this.selectedCountry = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.value)
-                ? (_b = e.target) === null || _b === void 0 ? void 0 : _b.value
-                : currCountry;
-            // update required visual cue on region/state/province & postal code fields
-            if (this.selectedCountry === 'US') {
-                (_c = this.postalBadgedInput) === null || _c === void 0 ? void 0 : _c.setAttribute('required', '');
-                (_d = this.postalCodeField) === null || _d === void 0 ? void 0 : _d.setAttribute('required', '');
-                (_e = this.regionBadgedInput) === null || _e === void 0 ? void 0 : _e.setAttribute('required', '');
-                (_f = this.regionField) === null || _f === void 0 ? void 0 : _f.setAttribute('required', '');
-            }
-            else {
-                (_g = this.postalBadgedInput) === null || _g === void 0 ? void 0 : _g.removeAttribute('required');
-                (_h = this.postalCodeField) === null || _h === void 0 ? void 0 : _h.removeAttribute('required');
-                (_j = this.regionBadgedInput) === null || _j === void 0 ? void 0 : _j.removeAttribute('required');
-                (_k = this.regionField) === null || _k === void 0 ? void 0 : _k.removeAttribute('required');
-            }
-        }}
-        >
+            const newValue = e.target.value;
+            if (countries[newValue])
+                this.selectedCountry = newValue;
+        }}
+        >
           ${Object.keys(countries).map(key => {
             const name = countries[key];
-            return html `
-              <option value=${key} ?selected=${key === this.selectedCountry}>${name}</option>
+            return html `
+              <option value=${key} ?selected=${key === this.selectedCountry}>${name}</option>
             `;
-        })}
-        </select>
-      </badged-input>
+        })}
+        </select>
+      </badged-input>
     `;
     }
     /** @inheritdoc */
@@ -206,28 +200,29 @@ let ContactForm = class ContactForm extends LitElement {
         const required = (_a = options.required) !== null && _a !== void 0 ? _a : true;
         const fieldType = (_b = options.fieldType) !== null && _b !== void 0 ? _b : 'text';
         const iconOption = (_c = options.iconSpaceOption) !== null && _c !== void 0 ? _c : SpacerOption.LeaveSpace;
-        return html `
-      <badged-input
-        class=${options.id}
-        .icon=${options.icon}
-        .iconSpaceOption=${iconOption}
-        ?required=${options.required}
-      >
-        <label for=${options.id}>${options.placeholder}</label>
-        <input
-          type=${fieldType}
-          id=${options.id}
-          class="donation-contact-form-input"
-          name=${options.name}
-          aria-label=${options.placeholder}
-          placeholder=${options.placeholder}
-          maxlength=${ifDefined(options.maxlength)}
-          autocomplete=${(_d = options.autocomplete) !== null && _d !== void 0 ? _d : 'on'}
-          pattern=${ifDefined(options.validationPattern)}
-          @focus=${this.inputFocused}
-          ?required=${required}
-        />
-      </badged-input>
+        return html `
+      <badged-input
+        class=${options.id}
+        .icon=${options.icon}
+        .iconSpaceOption=${iconOption}
+        ?required=${options.required}
+      >
+        <label for=${options.id}>${options.placeholder}</label>
+        <input
+          type=${fieldType}
+          id=${options.id}
+          class="donation-contact-form-input"
+          name=${options.name}
+          aria-label=${options.placeholder}
+          placeholder=${options.placeholder}
+          maxlength=${ifDefined(options.maxlength)}
+          minlength=${ifDefined(options.minlength)}
+          autocomplete=${(_d = options.autocomplete) !== null && _d !== void 0 ? _d : 'on'}
+          pattern=${ifDefined(options.validationPattern)}
+          @focus=${this.inputFocused}
+          ?required=${required}
+        />
+      </badged-input>
     `;
     }
     get donorContactInfo() {
@@ -276,95 +271,95 @@ let ContactForm = class ContactForm extends LitElement {
         const fieldFontColor = css `var(--inputFieldFontColor, #333)`;
         const iconFieldWidth = css `calc(100% - ${iconSpacerWidth})`;
         const noIconFieldWidth = css `calc(100% - ${noIconSpacerWidth})`;
-        return html `
-      <style>
-        /*
-          **NOTE**
-          This element is in the lightDOM so be sure to prefix all styles
-          with "contact-form" so styles don't leak.
-         */
-        contact-form fieldset {
-          border: 0;
-          padding: 0;
-          margin: 0;
-          margin-bottom: ${fieldSetSpacing};
-          background-color: white;
-        }
-
-        /* These 1px and 0 margins in the next few selectors are to account for the
-        double outlines caused by the fields being right next to each other */
-        contact-form .row {
-          display: flex;
-          margin: -1px 0 0 0;
-        }
-
-        contact-form fieldset .row:first-child {
-          margin-top: 0;
-        }
-
-        contact-form badged-input.donation-contact-form-region {
-          width: 60%;
-        }
-
-        contact-form badged-input.donation-contact-form-postal-code {
-          width: 40%;
-        }
-
-        contact-form #donation-contact-form-region {
-          width: ${iconFieldWidth};
-        }
-
-        contact-form #donation-contact-form-postal-code {
-          width: ${noIconFieldWidth};
-        }
-
-        contact-form #donation-contact-form-error-message {
-          color: red;
-          font-size: 1.4rem;
-          margin-bottom: 0.6rem;
-        }
-
-        contact-form #donation-contact-form-last-name {
-          width: ${noIconFieldWidth};
-        }
-
-        /* only show for screen readers */
-        contact-form label {
-          position: absolute;
-          left: -10000px;
-          top: auto;
-          width: 1px;
-          height: 1px;
-          overflow: hidden;
-        }
-
-        contact-form .donation-contact-form-input {
-          width: ${iconFieldWidth};
-          border: 0;
-          outline: 0;
-          background: transparent;
-          font-weight: bold;
-          color: ${fieldFontColor};
-          font-size: ${fieldFontSize};
-          padding: 0;
-          font-family: ${fieldFontFamily};
-        }
-
-        contact-form .donation-contact-form-input::placeholder {
-          color: revert;
-        }
-
-        contact-form #donation-contact-form-countryCodeAlpha2 {
-          width: calc(100%);
-          height: 100%;
-          box-sizing: border-box;
-          font-weight: bold;
-          font-size: ${fieldFontSize};
-          font-family: ${fieldFontFamily};
-          border: 0;
-          background: #fff;
-        }
-      </style>
+        return html `
+      <style>
+        /*
+          **NOTE**
+          This element is in the lightDOM so be sure to prefix all styles
+          with "contact-form" so styles don't leak.
+         */
+        contact-form fieldset {
+          border: 0;
+          padding: 0;
+          margin: 0;
+          margin-bottom: ${fieldSetSpacing};
+          background-color: white;
+        }
+
+        /* These 1px and 0 margins in the next few selectors are to account for the
+        double outlines caused by the fields being right next to each other */
+        contact-form .row {
+          display: flex;
+          margin: -1px 0 0 0;
+        }
+
+        contact-form fieldset .row:first-child {
+          margin-top: 0;
+        }
+
+        contact-form badged-input.donation-contact-form-region {
+          width: 60%;
+        }
+
+        contact-form badged-input.donation-contact-form-postal-code {
+          width: 40%;
+        }
+
+        contact-form #donation-contact-form-region {
+          width: ${iconFieldWidth};
+        }
+
+        contact-form #donation-contact-form-postal-code {
+          width: ${noIconFieldWidth};
+        }
+
+        contact-form #donation-contact-form-error-message {
+          color: red;
+          font-size: 1.4rem;
+          margin-bottom: 0.6rem;
+        }
+
+        contact-form #donation-contact-form-last-name {
+          width: ${noIconFieldWidth};
+        }
+
+        /* only show for screen readers */
+        contact-form label {
+          position: absolute;
+          left: -10000px;
+          top: auto;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+        }
+
+        contact-form .donation-contact-form-input {
+          width: ${iconFieldWidth};
+          border: 0;
+          outline: 0;
+          background: transparent;
+          font-weight: bold;
+          color: ${fieldFontColor};
+          font-size: ${fieldFontSize};
+          padding: 0;
+          font-family: ${fieldFontFamily};
+        }
+
+        contact-form .donation-contact-form-input::placeholder {
+          color: revert;
+        }
+
+        contact-form #donation-contact-form-countryCodeAlpha2 {
+          width: calc(100%);
+          height: 100%;
+          box-sizing: border-box;
+          font-weight: bold;
+          font-size: ${fieldFontSize};
+          font-family: ${fieldFontFamily};
+          border: 0;
+          background: #fff;
+        }
+      </style>
     `;
     }
 };