@justifi/webcomponents 4.17.0 → 4.18.0

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

@@ -1,8 +1,9 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import BillingFormSchema from "./billing-form-schema";
 import StateOptions from "../../utils/state-options";
 import { FormController } from "../form/form";
 import { numberOnlyHandler } from "../form/utils";
+import StyledHost from "../../utils/styled-host/styled-host";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -39,13 +40,13 @@ export class BillingForm {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: '3e0954b4babb893c7409e91fcb18184298bc0b65', exportparts: "label,input,input-invalid" }, h("form", { key: 'fb71a434643015867f88d0efce59d31c3c7429c6' }, h("fieldset", { key: 'd24b2ab37867192046a27d5a4ff697474c4bf3da' }, this.legend && h("legend", { key: '67232ddf644cdc43c314f0dd5c3d25cf2fa70457' }, this.legend), h("div", { key: 'cedc173c4b65caf38fa43db6e82784cd10389dbb', class: "row gy-3" }, h("div", { key: '29bb833c0d6ab0a382422970df82538d22d4faee', class: "col-12" }, h("form-control-text", { key: '5b1dd1dc7020ee795c8676a59888c66fbaa10729', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'c04e342634d5eca451f98a043b3aa57d06a141cd', class: "col-12" }, h("form-control-text", { key: '61407ae0370b96357c671a6db9f3a689db5df222', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: '7dbf877e690936a53d2e11075a0904ae66854e6a', class: "col-12" }, h("form-control-text", { key: 'e13552aad0d46d7edf88c28c4348b0b401107b10', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: 'c5be293a5559cbfa2e0c5425fb6ec0ec798c2af8', class: "col-12" }, h("form-control-text", { key: 'd6c6502bb828ab30598bb8f528d53a1431069dd5', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: 'ec50b1ba2b7b2b687d9e6ad3c1c7af89d0dc6f74', class: "col-12" }, h("form-control-select", { key: '275e63c9b8b8b743c27d6053c36a2c14a57754fc', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '4bfb86b74779742bb6816ed923ac06d28da142b2', class: "col-12" }, h("form-control-text", { key: 'a901279bda8599a14d4c440998f0d8da48b28252', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler })))))));
+        return (h(StyledHost, { key: '8104e81c71bc567bfa5e0375cd33e9faca89d011', exportparts: "label,input,input-invalid" }, h("form", { key: 'c6cc67debae73514e2615f95c2bf864b912a73cb' }, h("fieldset", { key: '9a7c04e44a7428748dad4c303e69a138ddb9101d' }, this.legend && h("legend", { key: '7aff51cff0b829134b99179d05c8184ee434258e' }, this.legend), h("div", { key: '53ed47c893e7f8348a0ab1f637175e7b456e1992', class: "row gy-3" }, h("div", { key: '4b93bf1abd9be0735560cd2db646be68fc1a6916', class: "col-12" }, h("form-control-text", { key: '18f7be54e35cac629a0122b7ff040e424b39dcea', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '5358865082c4158083f0232441255622f339105a', class: "col-12" }, h("form-control-text", { key: '8ba417bede5bde2c6d7a99869caab780e0887b9b', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'ffadcbe419b78f4e96283c3366141e20e2f157d3', class: "col-12" }, h("form-control-text", { key: '14ca2064c4651405c443d75961c8937d7136a95d', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '52cd79784b86d18cc35c80ae5f4006e8e25337f7', class: "col-12" }, h("form-control-text", { key: '741129396330fb3d7e40143391ab3422d648c997', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: 'ec80e7986f8189d4a08df9924d9cbecab512ae3d', class: "col-12" }, h("form-control-select", { key: '0cea8474f7f72ebb2591f48bd85ea4e008f65d94', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '59935a8aaf2b91df9e33c284132ca1372591d797', class: "col-12" }, h("form-control-text", { key: '9316b7c2aec054c251eb9eba7641f239b43f3714', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler })))))));
     }
     static get is() { return "justifi-billing-form"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["billing-form.scss"]
+            "$": ["billing-form.css"]
         };
     }
     static get styleUrls() {

package/dist/collection/components/business-details/additional-questions-details/additional-questions-details.js

@@ -20,15 +20,14 @@ export class AdditionalQuestionsDetails {
         return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Additional Questions" }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Business Revenue", value: (_a = this.additionalQuestions.business_revenue) === null || _a === void 0 ? void 0 : _a.toString() }), h(DetailItem, { title: "Business Payment Volume", value: (_b = this.additionalQuestions.business_payment_volume) === null || _b === void 0 ? void 0 : _b.toString() }))))));
     }
     static get is() { return "additional-questions-details"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["additional-questions-details.scss"]
+            "$": ["../shared-business-details.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["additional-questions-details.css"]
+            "$": ["../shared-business-details.css"]
         };
     }
     static get properties() {

package/dist/collection/components/business-details/business-details-core.js

@@ -1,5 +1,6 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { ErrorState, LoadingState } from "../details/utils";
+import StyledHost from "../../utils/styled-host/styled-host";
 var RENDER_STATES;
 (function (RENDER_STATES) {
     RENDER_STATES["LOADING"] = "loading";
@@ -38,24 +39,14 @@ export class BusinessDetailsCore {
     }
     render() {
         if (this.renderState === RENDER_STATES.LOADING) {
-            return h(Host, null, LoadingState());
+            return h(StyledHost, null, LoadingState());
         }
         if (this.renderState === RENDER_STATES.ERROR) {
-            return h(Host, null, ErrorState(this.errorMessage));
+            return h(StyledHost, null, ErrorState(this.errorMessage));
         }
-        return (h(Host, null, h("generic-info-details", { business: this.business }), h("legal-address-details", { legalAddress: this.business.legal_address }), h("representative-details", { representative: this.business.representative }), h("owner-details", { owners: this.business.owners }), h("additional-questions-details", { additionalQuestions: this.business.additional_questions })));
+        return (h(StyledHost, null, h("generic-info-details", { business: this.business }), h("legal-address-details", { legalAddress: this.business.legal_address }), h("representative-details", { representative: this.business.representative }), h("owner-details", { owners: this.business.owners }), h("additional-questions-details", { additionalQuestions: this.business.additional_questions })));
     }
     static get is() { return "business-details-core"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["business-details.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["business-details.css"]
-        };
-    }
     static get properties() {
         return {
             "getBusiness": {

package/dist/collection/components/business-details/generic-info-details/generic-info-details.js

@@ -12,15 +12,14 @@ export class GenericInfoDetails {
         return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Business Generic Info Details" }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Legal Name", value: (_a = this.business) === null || _a === void 0 ? void 0 : _a.legal_name }), h(DetailItem, { title: "Doing Business As (DBA)", value: (_b = this.business) === null || _b === void 0 ? void 0 : _b.doing_business_as }), h(DetailItem, { title: "Business Classification", value: snakeCaseToHumanReadable((_c = this.business) === null || _c === void 0 ? void 0 : _c.classification) }), h(DetailItem, { title: "Industry", value: (_d = this.business) === null || _d === void 0 ? void 0 : _d.industry })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Tax ID", value: (_e = this.business) === null || _e === void 0 ? void 0 : _e.tax_id }), h(DetailItem, { title: "Website URL", value: (_f = this.business) === null || _f === void 0 ? void 0 : _f.website_url }), h(DetailItem, { title: "Email Address", value: (_g = this.business) === null || _g === void 0 ? void 0 : _g.email }), h(DetailItem, { title: "Phone Number", value: (_h = this.business) === null || _h === void 0 ? void 0 : _h.phone }))))));
     }
     static get is() { return "generic-info-details"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["generic-info-details.scss"]
+            "$": ["../shared-business-details.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["generic-info-details.css"]
+            "$": ["../shared-business-details.css"]
         };
     }
     static get properties() {

package/dist/collection/components/business-details/legal-address-details/legal-address-details.js

@@ -12,15 +12,14 @@ export class LegalAddressDetails {
         return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Business Legal Address Details" }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Country", value: (_a = this.legalAddress) === null || _a === void 0 ? void 0 : _a.country }), h(DetailItem, { title: "Legal Address", value: (_b = this.legalAddress) === null || _b === void 0 ? void 0 : _b.line1 }), h(DetailItem, { title: "Address Line 2", value: (_c = this.legalAddress) === null || _c === void 0 ? void 0 : _c.line2 })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "City", value: (_d = this.legalAddress) === null || _d === void 0 ? void 0 : _d.city }), h(DetailItem, { title: "State", value: (_e = this.legalAddress) === null || _e === void 0 ? void 0 : _e.state }), h(DetailItem, { title: "Postal Code", value: (_g = (_f = this.legalAddress) === null || _f === void 0 ? void 0 : _f.postal_code) === null || _g === void 0 ? void 0 : _g.toString() }))))));
     }
     static get is() { return "legal-address-details"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["legal-address-details.scss"]
+            "$": ["../shared-business-details.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["legal-address-details.css"]
+            "$": ["../shared-business-details.css"]
         };
     }
     static get properties() {

package/dist/collection/components/business-details/owner-details/owner-details.js

@@ -18,15 +18,14 @@ export class OwnerDetails {
         }))));
     }
     static get is() { return "owner-details"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["owner-details.scss"]
+            "$": ["../shared-business-details.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["owner-details.css"]
+            "$": ["../shared-business-details.css"]
         };
     }
     static get properties() {

package/dist/collection/components/business-details/representative-details/representative-details.js

@@ -20,15 +20,14 @@ export class JustifiRepresentativeDetails {
         return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Representative Details" }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), h(DetailItem, { title: "Address", value: (_d = (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d.line1 }), h(DetailItem, { title: "Created At", value: ((_e = this.representative) === null || _e === void 0 ? void 0 : _e.created_at) && formatMediumDate((_f = this.representative) === null || _f === void 0 ? void 0 : _f.created_at) })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_g = this.representative) === null || _g === void 0 ? void 0 : _g.title }), h(DetailItem, { title: "Is Owner?", value: (_h = this.representative) === null || _h === void 0 ? void 0 : _h.is_owner.toString() }), h(DetailItem, { title: "Date Of Birth", value: this.representative && formatMediumDate(new Date(Number((_j = this.representative) === null || _j === void 0 ? void 0 : _j.dob_year), Number((_k = this.representative) === null || _k === void 0 ? void 0 : _k.dob_month) - 1, Number((_l = this.representative) === null || _l === void 0 ? void 0 : _l.dob_day))) }), h(DetailItem, { title: "Email", value: (_m = this.representative) === null || _m === void 0 ? void 0 : _m.email }), h(DetailItem, { title: "Phone", value: (_o = this.representative) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: "Updated At", value: this.representative && formatMediumDate((_p = this.representative) === null || _p === void 0 ? void 0 : _p.updated_at) }))))));
     }
     static get is() { return "representative-details"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["representative-details.scss"]
+            "$": ["../shared-business-details.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["representative-details.css"]
+            "$": ["../shared-business-details.css"]
         };
     }
     static get properties() {

package/dist/collection/components/business-details/shared-business-details.css

@@ -0,0 +1,3 @@
+.flex-1 {
+  flex: 1;
+}