@justifi/webcomponents 4.7.3 → 4.7.5

package/dist/collection/components/business-form/business-form-stepped.js

@@ -5,11 +5,11 @@ import { Api } from "../../api";
 import { parseForPatching } from "./helpers";
 import { config } from "../../../config";
 const componentStepMapping = {
-  0: (formController) => h("justifi-business-generic-info", { formController: formController }),
-  1: (formController) => h("justifi-legal-address-form", { formController: formController }),
-  2: (formController) => h("justifi-additional-questions", { formController: formController }),
-  3: (formController) => h("justifi-business-representative", { formController: formController }),
-  4: (formController) => h("justifi-business-owners", { formController: formController })
+    0: (formController) => h("justifi-business-generic-info", { formController: formController }),
+    1: (formController) => h("justifi-legal-address-form", { formController: formController }),
+    2: (formController) => h("justifi-additional-questions", { formController: formController }),
+    3: (formController) => h("justifi-business-representative", { formController: formController }),
+    4: (formController) => h("justifi-business-owners", { formController: formController })
 };
 /**
  * @exportedPart label: Label for inputs
@@ -17,202 +17,202 @@ const componentStepMapping = {
  * @exportedPart input-invalid: Invalid state for inputfs
  */
 export class BusinessFormStepped {
-  constructor() {
-    this.authToken = undefined;
-    this.accountId = undefined;
-    this.businessId = undefined;
-    this.testMode = false;
-    this.isLoading = false;
-    this.currentStep = 0;
-    this.totalSteps = 4;
-    this.serverError = undefined;
-    this.sendData = this.sendData.bind(this);
-    this.fetchData = this.fetchData.bind(this);
-  }
-  componentWillLoad() {
-    if (!this.authToken) {
-      console.warn('Warning: Missing auth-token. The form will not be functional without it.');
-    }
-    this.formController = new FormController(businessFormSchema);
-    this.api = Api(this.authToken, config.proxyApiOrigin);
-    this.totalSteps = Object.keys(componentStepMapping).length - 1;
-    if (this.businessId) {
-      this.fetchData(this.businessId);
-    }
-    else {
-      this.formController.setInitialValues({
-        legal_address: {
-          country: 'US',
-        },
-      });
-    }
-  }
-  handleResponse(response, onSuccess) {
-    if (response.error) {
-      this.serverError = response.error.message;
-    }
-    else {
-      this.serverError = '';
-      this.businessId = response.data.id;
-      this.formController.setInitialValues(response.data);
-      onSuccess();
-    }
-  }
-  async sendData(onSuccess) {
-    // Stopgap solution to prevent sending data in storybook examples.
-    if (this.testMode) {
-      onSuccess();
-      return;
-    }
-    this.isLoading = true;
-    try {
-      const data = this.formController.values.getValue();
-      // Conditionally making either POST or PATCH request
-      if (this.businessId) {
-        const payload = parseForPatching(data);
-        const response = await this.api.patch(`entities/business/${this.businessId}`, JSON.stringify(payload), { account_id: this.accountId });
-        this.handleResponse(response, onSuccess);
-      }
-      else {
-        const response = await this.api.post('entities/business', JSON.stringify(data), { account_id: this.accountId });
-        this.handleResponse(response, onSuccess);
-      }
-    }
-    catch (error) {
-      console.error('Error sending data:', error);
-    }
-    finally {
-      this.isLoading = false;
-    }
-  }
-  async fetchData(businessId) {
-    this.isLoading = true;
-    try {
-      const response = await this.api.get(`entities/business/${businessId}`);
-      this.formController.setInitialValues(response.data);
-    }
-    catch (error) {
-      console.error('Error fetching data:', error);
-    }
-    finally {
-      this.isLoading = false;
-    }
-  }
-  validateAndSubmit(event) {
-    event.preventDefault();
-    this.formController.validateAndSubmit(this.sendData);
-  }
-  showPreviousStepButton() {
-    return this.currentStep > 0;
-  }
-  previousStepButtonOnClick() {
-    this.sendData(() => this.currentStep--);
-  }
-  showNextStepButton() {
-    return this.currentStep < this.totalSteps;
-  }
-  nextStepButtonOnClick() {
-    this.sendData(() => this.currentStep++);
-  }
-  showSubmitButton() {
-    return this.currentStep === this.totalSteps;
-  }
-  currentStepComponent() {
-    return componentStepMapping[this.currentStep](this.formController);
-  }
-  render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.serverError && (h("div", { class: "alert alert-danger", role: "alert" }, this.serverError)), h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.isLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(), disabled: this.isLoading }, "Next")), this.showSubmitButton() && (h("button", { type: "submit", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(), disabled: this.isLoading }, "Submit")))))));
-  }
-  static get is() { return "justifi-business-form-stepped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["business-form-stepped.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["business-form-stepped.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "authToken": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "auth-token",
-        "reflect": false
-      },
-      "accountId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "account-id",
-        "reflect": false
-      },
-      "businessId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "business-id",
-        "reflect": false
-      },
-      "testMode": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "test-mode",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isLoading": {},
-      "currentStep": {},
-      "totalSteps": {},
-      "serverError": {}
-    };
-  }
+    constructor() {
+        this.authToken = undefined;
+        this.accountId = undefined;
+        this.businessId = undefined;
+        this.testMode = false;
+        this.isLoading = false;
+        this.currentStep = 0;
+        this.totalSteps = 4;
+        this.serverError = undefined;
+        this.sendData = this.sendData.bind(this);
+        this.fetchData = this.fetchData.bind(this);
+    }
+    componentWillLoad() {
+        if (!this.authToken) {
+            console.warn('Warning: Missing auth-token. The form will not be functional without it.');
+        }
+        this.formController = new FormController(businessFormSchema);
+        this.api = Api(this.authToken, config.proxyApiOrigin);
+        this.totalSteps = Object.keys(componentStepMapping).length - 1;
+        if (this.businessId) {
+            this.fetchData(this.businessId);
+        }
+        else {
+            this.formController.setInitialValues({
+                legal_address: {
+                    country: 'US',
+                },
+            });
+        }
+    }
+    handleResponse(response, onSuccess) {
+        if (response.error) {
+            this.serverError = response.error.message;
+        }
+        else {
+            this.serverError = '';
+            this.businessId = response.data.id;
+            this.formController.setInitialValues(response.data);
+            onSuccess();
+        }
+    }
+    async sendData(onSuccess) {
+        // Stopgap solution to prevent sending data in storybook examples.
+        if (this.testMode) {
+            onSuccess();
+            return;
+        }
+        this.isLoading = true;
+        try {
+            const data = this.formController.values.getValue();
+            // Conditionally making either POST or PATCH request
+            if (this.businessId) {
+                const payload = parseForPatching(data);
+                const response = await this.api.patch(`entities/business/${this.businessId}`, JSON.stringify(payload), { account_id: this.accountId });
+                this.handleResponse(response, onSuccess);
+            }
+            else {
+                const response = await this.api.post('entities/business', JSON.stringify(data), { account_id: this.accountId });
+                this.handleResponse(response, onSuccess);
+            }
+        }
+        catch (error) {
+            console.error('Error sending data:', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async fetchData(businessId) {
+        this.isLoading = true;
+        try {
+            const response = await this.api.get(`entities/business/${businessId}`);
+            this.formController.setInitialValues(response.data);
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    validateAndSubmit(event) {
+        event.preventDefault();
+        this.formController.validateAndSubmit(this.sendData);
+    }
+    showPreviousStepButton() {
+        return this.currentStep > 0;
+    }
+    previousStepButtonOnClick() {
+        this.sendData(() => this.currentStep--);
+    }
+    showNextStepButton() {
+        return this.currentStep < this.totalSteps;
+    }
+    nextStepButtonOnClick() {
+        this.sendData(() => this.currentStep++);
+    }
+    showSubmitButton() {
+        return this.currentStep === this.totalSteps;
+    }
+    currentStepComponent() {
+        return componentStepMapping[this.currentStep](this.formController);
+    }
+    render() {
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.serverError && (h("div", { class: "alert alert-danger", role: "alert" }, this.serverError)), h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.isLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(), disabled: this.isLoading }, "Next")), this.showSubmitButton() && (h("button", { type: "submit", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(), disabled: this.isLoading }, "Submit")))))));
+    }
+    static get is() { return "justifi-business-form-stepped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["business-form-stepped.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["business-form-stepped.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "account-id",
+                "reflect": false
+            },
+            "businessId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "business-id",
+                "reflect": false
+            },
+            "testMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "test-mode",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "currentStep": {},
+            "totalSteps": {},
+            "serverError": {}
+        };
+    }
 }

package/dist/collection/components/business-form/business-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;
@@ -2438,7 +2442,7 @@ progress {
 }
 
 /*!
- * Bootstrap Utilities v5.3.1 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.3.2 (https://getbootstrap.com/)
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
@@ -2537,6 +2541,7 @@ progress {
   --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;
@@ -2608,6 +2613,8 @@ progress {
   --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;
@@ -3118,15 +3125,15 @@ progress {
 }
 
 .shadow {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  box-shadow: var(--bs-box-shadow) !important;
 }
 
 .shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+  box-shadow: var(--bs-box-shadow-sm) !important;
 }
 
 .shadow-lg {
-  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+  box-shadow: var(--bs-box-shadow-lg) !important;
 }
 
 .shadow-none {