@justifi/webcomponents 4.7.3 → 4.7.5

package/dist/collection/components/billing-form/billing-form-schema.js

@@ -1,11 +1,11 @@
 import { object, string } from "yup";
 export const RegExZip = /^\d{5}/;
 const BillingFormSchema = object({
-  name: string().required('Enter name'),
-  address_line1: string().required('Enter street address'),
-  address_line2: string(),
-  address_city: string().required('Enter city'),
-  address_state: string().required('Choose state'),
-  address_postal_code: string().required('Enter ZIP').matches(RegExZip, 'Enter a valid ZIP').min(5, 'Enter a valid ZIP'),
+    name: string().required('Enter name'),
+    address_line1: string().required('Enter street address'),
+    address_line2: string(),
+    address_city: string().required('Enter city'),
+    address_state: string().required('Choose state'),
+    address_postal_code: string().required('Enter ZIP').matches(RegExZip, 'Enter a valid ZIP').min(5, 'Enter a valid ZIP'),
 });
 export default BillingFormSchema;

package/dist/collection/components/billing-form/billing-form.css

@@ -93,6 +93,7 @@
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -164,6 +165,8 @@
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -712,6 +715,7 @@ small {
 
 mark {
   padding: 0.1875em;
+  color: var(--bs-highlight-color);
   background-color: var(--bs-highlight-bg);
 }
 
@@ -1021,7 +1025,7 @@ progress {
 
 .row-cols-3 > * {
   flex: 0 0 auto;
-  width: 33.3333333333%;
+  width: 33.33333333%;
 }
 
 .row-cols-4 > * {
@@ -1036,7 +1040,7 @@ progress {
 
 .row-cols-6 > * {
   flex: 0 0 auto;
-  width: 16.6666666667%;
+  width: 16.66666667%;
 }
 
 .col-auto {
@@ -1226,7 +1230,7 @@ progress {
   }
   .row-cols-sm-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-sm-4 > * {
     flex: 0 0 auto;
@@ -1238,7 +1242,7 @@ progress {
   }
   .row-cols-sm-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-sm-auto {
     flex: 0 0 auto;
@@ -1395,7 +1399,7 @@ progress {
   }
   .row-cols-md-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-md-4 > * {
     flex: 0 0 auto;
@@ -1407,7 +1411,7 @@ progress {
   }
   .row-cols-md-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-md-auto {
     flex: 0 0 auto;
@@ -1564,7 +1568,7 @@ progress {
   }
   .row-cols-lg-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-lg-4 > * {
     flex: 0 0 auto;
@@ -1576,7 +1580,7 @@ progress {
   }
   .row-cols-lg-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-lg-auto {
     flex: 0 0 auto;
@@ -1733,7 +1737,7 @@ progress {
   }
   .row-cols-xl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xl-4 > * {
     flex: 0 0 auto;
@@ -1745,7 +1749,7 @@ progress {
   }
   .row-cols-xl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xl-auto {
     flex: 0 0 auto;
@@ -1902,7 +1906,7 @@ progress {
   }
   .row-cols-xxl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xxl-4 > * {
     flex: 0 0 auto;
@@ -1914,7 +1918,7 @@ progress {
   }
   .row-cols-xxl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xxl-auto {
     flex: 0 0 auto;

package/dist/collection/components/billing-form/billing-form.js

@@ -7,190 +7,188 @@ import StateOptions from "./state-options";
  * @exportedPart input-invalid: Invalid state for inputs
  */
 export class BillingForm {
-  constructor() {
-    this.legendBlock = (h("legend", null, this.legend));
-    this.legend = undefined;
-    this.billingFields = {
-      name: '',
-      address_line1: '',
-      address_line2: '',
-      address_city: '',
-      address_state: '',
-      address_postal_code: '',
-    };
-    this.billingFieldsErrors = {};
-  }
-  setFormValue(event) {
-    const data = event.detail;
-    const billingFieldsClone = Object.assign({}, this.billingFields);
-    if (data.name) {
-      billingFieldsClone[data.name] = data.value;
-      this.billingFields = billingFieldsClone;
+    constructor() {
+        this.legendBlock = (h("legend", null, this.legend));
+        this.legend = undefined;
+        this.billingFields = {
+            name: '',
+            address_line1: '',
+            address_line2: '',
+            address_city: '',
+            address_state: '',
+            address_postal_code: '',
+        };
+        this.billingFieldsErrors = {};
     }
-  }
-  /**
-   * Method for filling the form with provided data
-   * @argument {BillingFormFields} fields - The fields to fill the form with
-   */
-  async fill(fields) {
-    this.billingFields = Object.assign({}, fields);
-  }
-  /**
-   * Run validation on the form
-   */
-  async validate() {
-    const newErrors = {};
-    let isValid = true;
-    try {
-      await BillingFormSchema.validate(this.billingFields, { abortEarly: false });
+    setFormValue(event) {
+        const data = event.detail;
+        const billingFieldsClone = Object.assign({}, this.billingFields);
+        if (data.name) {
+            billingFieldsClone[data.name] = data.value;
+            this.billingFields = billingFieldsClone;
+        }
     }
-    catch (err) {
-      isValid = false;
-      err.inner.map((item) => {
-        newErrors[item.path] = item.message;
-      });
+    /**
+     * Method for filling the form with provided data
+     * @argument {BillingFormFields} fields - The fields to fill the form with
+     */
+    async fill(fields) {
+        this.billingFields = Object.assign({}, fields);
     }
-    this.billingFieldsErrors = newErrors;
-    return { isValid: isValid };
-  }
-  /**
-   * Returns the values of the form as an object
-   * @returns {Promise<BillingFormFields>} The values of the form
-   */
-  async getValues() {
-    return this.billingFields;
-  }
-  render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, this.legend && this.legendBlock, h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("text-input", { name: "name", label: "Full Name", defaultValue: this.billingFields.name, error: this.billingFieldsErrors.name })), h("div", { class: "col-12" }, h("text-input", { name: "address_line1", label: "Street Address", defaultValue: this.billingFields.address_line1, error: this.billingFieldsErrors.address_line1 })), h("div", { class: "col-12" }, h("text-input", { name: "address_line2", label: "Apartment, Suite, etc. (optional)", defaultValue: this.billingFields.address_line2, error: this.billingFieldsErrors.address_line2 })), h("div", { class: "col-12" }, h("text-input", { name: "address_city", label: "City", defaultValue: this.billingFields.address_city, error: this.billingFieldsErrors.address_city })), h("div", { class: "col-12" }, h("select-input", { name: "address_state", label: "State", options: StateOptions, defaultValue: this.billingFields.address_state, error: this.billingFieldsErrors.address_state })), h("div", { class: "col-12" }, h("text-input", { name: "address_postal_code", label: "ZIP", defaultValue: this.billingFields.address_postal_code, error: this.billingFieldsErrors.address_postal_code }))))));
-  }
-  static get is() { return "justifi-billing-form"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["billing-form.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["billing-form.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "legend": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(Optional) A label for the form."
-        },
-        "attribute": "legend",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "billingFields": {},
-      "billingFieldsErrors": {}
-    };
-  }
-  static get methods() {
-    return {
-      "fill": {
-        "complexType": {
-          "signature": "(fields: BillingFormFields) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "argument",
-                  "text": "fields - The fields to fill the form with"
-                }],
-              "text": "- The fields to fill the form with"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "BillingFormFields": {
-              "location": "import",
-              "path": "./billing-form-schema",
-              "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Method for filling the form with provided data",
-          "tags": [{
-              "name": "argument",
-              "text": "fields - The fields to fill the form with"
-            }]
+    /**
+     * Run validation on the form
+     */
+    async validate() {
+        const newErrors = {};
+        let isValid = true;
+        try {
+            await BillingFormSchema.validate(this.billingFields, { abortEarly: false });
         }
-      },
-      "validate": {
-        "complexType": {
-          "signature": "() => Promise<{ isValid: boolean; }>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "ValidationError": {
-              "location": "import",
-              "path": "yup",
-              "id": "../node_modules/yup/index.d.ts::ValidationError"
-            }
-          },
-          "return": "Promise<{ isValid: boolean; }>"
-        },
-        "docs": {
-          "text": "Run validation on the form",
-          "tags": []
+        catch (err) {
+            isValid = false;
+            err.inner.map((item) => {
+                newErrors[item.path] = item.message;
+            });
         }
-      },
-      "getValues": {
-        "complexType": {
-          "signature": "() => Promise<BillingFormFields>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        this.billingFieldsErrors = newErrors;
+        return { isValid: isValid };
+    }
+    /**
+     * Returns the values of the form as an object
+     * @returns {Promise<BillingFormFields>} The values of the form
+     */
+    async getValues() {
+        return this.billingFields;
+    }
+    render() {
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, this.legend && this.legendBlock, h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("text-input", { name: "name", label: "Full Name", defaultValue: this.billingFields.name, error: this.billingFieldsErrors.name })), h("div", { class: "col-12" }, h("text-input", { name: "address_line1", label: "Street Address", defaultValue: this.billingFields.address_line1, error: this.billingFieldsErrors.address_line1 })), h("div", { class: "col-12" }, h("text-input", { name: "address_line2", label: "Apartment, Suite, etc. (optional)", defaultValue: this.billingFields.address_line2, error: this.billingFieldsErrors.address_line2 })), h("div", { class: "col-12" }, h("text-input", { name: "address_city", label: "City", defaultValue: this.billingFields.address_city, error: this.billingFieldsErrors.address_city })), h("div", { class: "col-12" }, h("select-input", { name: "address_state", label: "State", options: StateOptions, defaultValue: this.billingFields.address_state, error: this.billingFieldsErrors.address_state })), h("div", { class: "col-12" }, h("text-input", { name: "address_postal_code", label: "ZIP", defaultValue: this.billingFields.address_postal_code, error: this.billingFieldsErrors.address_postal_code }))))));
+    }
+    static get is() { return "justifi-billing-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["billing-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["billing-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "legend": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "(Optional) A label for the form."
+                },
+                "attribute": "legend",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "billingFields": {},
+            "billingFieldsErrors": {}
+        };
+    }
+    static get methods() {
+        return {
+            "fill": {
+                "complexType": {
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "BillingFormFields",
+                            "docs": "- The fields to fill the form with"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "./billing-form-schema",
+                            "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method for filling the form with provided data",
+                    "tags": [{
+                            "name": "argument",
+                            "text": "fields - The fields to fill the form with"
+                        }]
+                }
             },
-            "BillingFormFields": {
-              "location": "import",
-              "path": "./billing-form-schema",
-              "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<{ isValid: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ValidationError": {
+                            "location": "import",
+                            "path": "yup",
+                            "id": "../../node_modules/.pnpm/yup@1.3.3/node_modules/yup/index.d.ts::ValidationError"
+                        }
+                    },
+                    "return": "Promise<{ isValid: boolean; }>"
+                },
+                "docs": {
+                    "text": "Run validation on the form",
+                    "tags": []
+                }
+            },
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "./billing-form-schema",
+                            "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "Returns the values of the form as an object",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The values of the form"
+                        }]
+                }
             }
-          },
-          "return": "Promise<BillingFormFields>"
-        },
-        "docs": {
-          "text": "Returns the values of the form as an object",
-          "tags": [{
-              "name": "returns",
-              "text": "The values of the form"
-            }]
-        }
-      }
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "fieldReceivedInput",
-        "method": "setFormValue",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "fieldReceivedInput",
+                "method": "setFormValue",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }