@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/module/owner-form-core2.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { F as FormController } from './form.js';
 import { O as Owner } from './Business.js';
-import { c as BusinessFormClickActions } from './business-form-types.js';
 import { i as identitySchema } from './business-identity-schema.js';
 import { B as Button } from './button.js';
-import { d as defineCustomElement$9 } from './custom-popper2.js';
-import { d as defineCustomElement$8 } from './form-control-date2.js';
-import { d as defineCustomElement$7 } from './form-control-error-text2.js';
+import { O as heading3 } from './parts.js';
+import './details.js';
+import { a as BusinessFormClickActions } from './event-types2.js';
+import { d as defineCustomElement$8 } from './custom-popper2.js';
+import { d as defineCustomElement$7 } from './form-control-date2.js';
 import { d as defineCustomElement$6 } from './form-control-number-masked2.js';
 import { d as defineCustomElement$5 } from './form-control-select2.js';
 import { d as defineCustomElement$4 } from './form-control-text2.js';
@@ -21,11 +22,10 @@ const BusinessOwnerFormCore = /*@__PURE__*/ proxyCustomElement(class BusinessOwn
     constructor() {
         super();
         this.__registerHost();
-        this.submitted = createEvent(this, "submitted", 7);
-        this.ownerSubmitted = createEvent(this, "ownerSubmitted", 7);
         this.clickEvent = createEvent(this, "click-event", 7);
-        this.formLoading = createEvent(this, "formLoading", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.formLoading = createEvent(this, "formLoading", 7);
+        this.ownerSubmitted = createEvent(this, "ownerSubmitted", 7);
         this.getData = () => {
             this.isLoading = true;
             this.getOwner({
@@ -49,16 +49,11 @@ const BusinessOwnerFormCore = /*@__PURE__*/ proxyCustomElement(class BusinessOwn
                     this.patchOwner({
                         payload: this.payload,
                         onSuccess: (response) => {
-                            this.submitted.emit({
-                                data: response,
-                                metadata: { ownerID: response.data.id }
-                            });
                             this.ownerSubmitted.emit({ id: response.data.id });
                             this.instantiateOwner(response.data);
                             resolve(true);
                         },
                         onError: ({ error, code, severity }) => {
-                            this.submitted.emit({ data: { error } });
                             this.errorEvent.emit({
                                 message: error,
                                 errorCode: code,
@@ -73,16 +68,11 @@ const BusinessOwnerFormCore = /*@__PURE__*/ proxyCustomElement(class BusinessOwn
                     this.postOwner({
                         payload: this.payload,
                         onSuccess: (response) => {
-                            this.submitted.emit({
-                                data: response,
-                                metadata: { ownerID: response.data.id }
-                            });
                             this.ownerSubmitted.emit({ id: response.data.id });
                             this.instantiateOwner(response.data);
                             resolve(true);
                         },
                         onError: ({ error, code, severity }) => {
-                            this.submitted.emit({ data: { error } });
                             this.errorEvent.emit({
                                 message: error,
                                 errorCode: code,
@@ -180,7 +170,7 @@ const BusinessOwnerFormCore = /*@__PURE__*/ proxyCustomElement(class BusinessOwn
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
     }
     render() {
-        return (h("form", { key: 'd7ab875b1efd58b9d17e40789eb43454d5601f47', onSubmit: this.validateAndSubmit }, h("fieldset", { key: '144871e2128c17ea843d3d0dc2c7b5dd51057107' }, h("legend", { key: 'b9a2229e0cb1220c2b848f56f512816253d98e36', class: "fw-semibold fs-5" }, this.formTitle), h("br", { key: 'd95786bee5d4640f970bfccea626a6d0bc7fb4a6' }), h("div", { key: 'f74c1b45eda698ca786214c2d30342ead9c820f0', class: "row gy-3" }, h("owner-form-inputs", { key: 'bc6a213dc74e1f30c7c18f65a31e1aaa9130746a', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }), h("div", { key: 'e7536fc512a652bde416259b7f6177e5957b893f', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: '61c88e81e942f2e324b24b2634fe365863a2f23f', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: 'c280f92cf606abbc1ba30bef331407af7db9cb19', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: '10658eebfb37c21186b7a5d36e60db5daa9f26f6' }))));
+        return (h("form", { key: '58cbb6a1f804dc14fc3d3c873b733353b01d9365', onSubmit: this.validateAndSubmit }, h("fieldset", { key: '23cb93fab96a2d1a3a372057a93f8a5e3b5e886b' }, h("legend", { key: '06f0a9595c675d7f2f708741ef292018ad2b98e7', class: "fw-semibold fs-5", part: heading3 }, this.formTitle), h("br", { key: 'cdde6f04d559cc83bf50282feab27e2917889b74' }), h("div", { key: '25fd59a4755a4344ed0d6c116de79c95db8660df', class: "row gy-3" }, h("owner-form-inputs", { key: 'f839d830b204439f88594b0a16cce37286fe3e0b', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }), h("div", { key: '5dad56a053aa7ad0c04869374769965eba872247', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: '22342bc0f6a5978a94927aa9edddb9979309e647', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: 'ef3d494677011f095d199e736043e3c02a855f2b', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: 'd2d503eabc8b633ec84cabeacfe04c3802689604' }))));
     }
     static get watchers() { return {
         "isLoading": ["loadingWatcher"]
@@ -210,7 +200,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["owner-form-core", "custom-popper", "form-control-date", "form-control-error-text", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form", "owner-form-inputs"];
+    const components = ["owner-form-core", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "owner-form-core":
             if (!customElements.get(tagName)) {
@@ -218,16 +208,11 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/module/owner-form-inputs2.js

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { P as PHONE_MASKS, S as SSN_MASK } from './form-input-masks.js';
 import { u as updateFormValues, a as updateAddressFormValues, b as updateDateOfBirthFormValues } from './input-handlers.js';
-import { d as defineCustomElement$8 } from './custom-popper2.js';
-import { d as defineCustomElement$7 } from './form-control-date2.js';
-import { d as defineCustomElement$6 } from './form-control-error-text2.js';
+import { d as defineCustomElement$7 } from './custom-popper2.js';
+import { d as defineCustomElement$6 } from './form-control-date2.js';
 import { d as defineCustomElement$5 } from './form-control-number-masked2.js';
 import { d as defineCustomElement$4 } from './form-control-select2.js';
 import { d as defineCustomElement$3 } from './form-control-text2.js';
@@ -25,7 +24,7 @@ const BusinessOwnerFormInputs = /*@__PURE__*/ proxyCustomElement(class BusinessO
         this.formController = undefined;
     }
     render() {
-        return (h("div", { key: '00c4e99a70bdeac642774796bb6a983ad926b86d', class: "row gy-3" }, h("div", { key: '457ba67f652e7ec33909764667b76b25c0c01f75', class: "col-12 col-md-8" }, h("form-control-text", { key: '33293c6a0fc131c1db2d498f2ea8774cb9689b8e', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '07be686fa8f43b04bd3a925e969ecede1286e651', class: "col-12 col-md-4" }, h("form-control-text", { key: 'c89285d508e0d809332f529edef3e6d3a68c4993', name: "title", label: "Title", defaultValue: this.ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '76af9226fb138b2698c254ba26749b5d372ee14d', class: "col-12 col-md-6" }, h("form-control-text", { key: '37f334b0ee260501fd99845b6196a94c56fd16da', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '3750f6f86d1bc3c3a1796a06ef4119ee188f2b56', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '283f5179e64378a7a07a654d28511558de03ca68', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '48186c6dfe8cd2a27de92db9970953e1e99340f2', class: "col-12 col-md-4" }, h("form-control-date", { key: '6d90d43875feefd24477279232a21b4ac7a7b7bc', name: "dob_full", label: "Birth Date", defaultValue: this.ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '19b1a6fd0dd52d3d5f52cf764ff429bd26ba8cdd', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '5a7ea47c254967f0d3d546ac9949dfa3d670bc25', name: "identification_number", label: "SSN", defaultValue: this.ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: '59c4fcb4186d488497d66479fced70bf2dc24d89', class: "col-12" }, h("justifi-identity-address-form", { key: 'faff7bb194f9c2c2ff80193db18ab0030f34fc09', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))));
+        return (h("div", { key: '6604b31d64967fbabb85189c72d7d78d98d2c8c8', class: "row gy-3" }, h("div", { key: '7b52874d08593e28ac8e2369534d3697f07128c3', class: "col-12 col-md-8" }, h("form-control-text", { key: '080456fae1d1f024d3e82be43939922fb19f6ef9', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'e0e431c1d7d6716bc368eb1fa06b80d0576a05ee', class: "col-12 col-md-4" }, h("form-control-text", { key: '9134c2a32853cfa00edb42a2db30a85943e0c3f5', name: "title", label: "Title", defaultValue: this.ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: 'b129332c1547d43a2d2e09f19940e3a5a1df988a', class: "col-12 col-md-6" }, h("form-control-text", { key: '1e56b33c0c12898bdb0dd121fa832869deca9a2b', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '0a551a3d5f820e1f0146ee2603b687559756b80b', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '26c8366c9a8c93e69e8396ae1bb8d2478cc9eb81', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'e9416e635eceb13bee1cd259bad100cb165b9e74', class: "col-12 col-md-4" }, h("form-control-date", { key: '9a69bdc97c104169bdc742c341105a208b9a815a', name: "dob_full", label: "Birth Date", defaultValue: this.ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '9dedc8f023a3e6cc47835fc3a749f427c29bbee4', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: 'f1bedfe4d166ed0453a1814a5f02f7912da1e699', name: "identification_number", label: "SSN", defaultValue: this.ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: '32b1cd3be64345be08b27297478ab654d9201b8b', class: "col-12" }, h("justifi-identity-address-form", { key: 'e3292e32b13c290081989a562e22454f1bfe4f83', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))));
     }
     ;
 }, [0, "owner-form-inputs", {
@@ -37,7 +36,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["owner-form-inputs", "custom-popper", "form-control-date", "form-control-error-text", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form"];
+    const components = ["owner-form-inputs", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "owner-form-inputs":
             if (!customElements.get(tagName)) {
@@ -45,16 +44,11 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/module/owner-form.js

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { b as makeGetIdentity, c as makePatchIdentity, d as makePostIdentity } from './payment-provisioning-actions.js';
 import { I as IdentityService } from './business.service.js';
-import { d as defineCustomElement$a } from './custom-popper2.js';
-import { d as defineCustomElement$9 } from './form-control-date2.js';
-import { d as defineCustomElement$8 } from './form-control-error-text2.js';
+import { d as defineCustomElement$9 } from './custom-popper2.js';
+import { d as defineCustomElement$8 } from './form-control-date2.js';
 import { d as defineCustomElement$7 } from './form-control-number-masked2.js';
 import { d as defineCustomElement$6 } from './form-control-select2.js';
 import { d as defineCustomElement$5 } from './form-control-text2.js';
@@ -60,7 +59,7 @@ const BusinessOwnerForm = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerFo
         });
     }
     render() {
-        return (h("owner-form-core", { key: '332d1e77d01886f13aba09b32b2d5f2199131619', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, ref: ref => this.coreComponent = ref }));
+        return (h("owner-form-core", { key: '994ef390ec2423419aa777656a49d9087ef61e72', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, ref: ref => this.coreComponent = ref }));
     }
 }, [0, "justifi-owner-form", {
         "authToken": [1, "auth-token"],
@@ -81,7 +80,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-owner-form", "custom-popper", "form-control-date", "form-control-error-text", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-owner-form", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-owner-form":
             if (!customElements.get(tagName)) {
@@ -89,16 +88,11 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "4.23.1";
+const version = "5.0.0-rc-2";
 const description = "JustiFi Web Components";
 const collection = "dist/collection/collection-manifest.json";
 const main = "dist/index.cjs.js";

package/dist/module/pagination-menu2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { E as ExtendedPagingDefaults } from './Pagination.js';
+import { o as buttonLink, p as buttonDisabled } from './parts.js';
 
 const PaginationMenu = /*@__PURE__*/ proxyCustomElement(class PaginationMenu extends HTMLElement {
     constructor() {
@@ -9,13 +10,13 @@ const PaginationMenu = /*@__PURE__*/ proxyCustomElement(class PaginationMenu ext
         this.params = {};
     }
     render() {
-        return (h(Host, { key: '645df5028861aa714a814f908ccace8dcd0986f8', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '6cb86ce01c625db9c31204f63258570f8a5d0a0f', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '7ffb5771a1c51553d64735721b937e53c699949d', class: "pagination m-0" }, h("li", { key: 'b439c2f7fe81ccdfa29670a6fc04715681ed5ab3', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'dc59152e834a3076f09304f6fcd0195058ebefec', href: "#", class: "page-link", onClick: (e) => {
+        return (h(Host, { key: '7a4cfcfa7d9329e8d4026cd6bdc15c3251f004d6' }, h("nav", { key: '203b5ffeb3f4a167aa9448ac6075fd7a1ac15ef7', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: 'e302f939560131ade67b0f9d4135fa04ff485d09', class: "pagination m-0" }, h("li", { key: 'b3e2ba7b66e5de597a3233ee036d4d1ef2930689', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: '1f358b34fbaa7f140c1ee15ef6ee8d6f9b87407f', href: "#", class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickPrevious(this.paging.start_cursor);
-            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'fc640fb9ae2ca672bfed89d23c5641cb346c673d', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: 'fb6fcd31ebd4d194b37f53a071537133b8c4d369', part: "page-button-text" }, "Previous"))), h("li", { key: 'b10e12ec7bc4a89cd897e868ec7b303c62599cd3', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '51f91eb7cfef91dcbcfd9f11522213308bf717b5', href: "#", class: "page-link", onClick: (e) => {
+            }, part: this.paging.has_previous ? buttonLink : buttonDisabled }, h("span", { key: 'daffe0c0ffb7265cd769bbf27fef42c37e86300d', class: "me-1" }, "\u00AB"), h("span", { key: '2c42b74352aa7a79ac6bc231cdd828b7a62f5083' }, "Previous"))), h("li", { key: '2707ab481b124351479dbc5e4b270a60f8e0cb9e', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: 'f97ea7a812ba9b0066cd5e75ab45bff152708b63', href: "#", class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickNext(this.paging.end_cursor);
-            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: 'd89f50a44dead676d19b8862a92ba636947fe6b1', part: "page-button-text" }, "Next"), h("span", { key: 'f5dd2ddddef86931d935df56101f1fed8118e4f6', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
+            }, part: this.paging.has_next ? buttonLink : buttonDisabled }, h("span", { key: 'a850314028161b5a04618ffc5515603ea7203a0a' }, "Next"), h("span", { key: '643097228302500411ca0c4a932d8067074a15d2', class: "ms-1" }, "\u00BB")))))));
     }
 }, [0, "pagination-menu", {
         "paging": [16],

package/dist/module/parts.js

@@ -0,0 +1,72 @@
+// Basic
+const color = 'color';
+const fontFamily = 'font-family';
+const backgroundColor = 'background-color';
+// Typography
+const text = `text ${color} ${fontFamily}`;
+const textDanger = `text-danger ${text}`;
+const heading = `heading ${text}`;
+const heading1 = `heading-1 ${heading}`;
+const heading2 = `heading-2 ${heading}`;
+const heading3 = `heading-3 ${heading}`;
+const heading4 = `heading-4 ${heading}`;
+const heading5 = `heading-5 ${heading}`;
+// Button
+const button = `button ${text}`;
+const buttonPrimary = `button-primary ${button}`;
+const buttonSecondary = `button-secondary ${button}`;
+const buttonLink = `button-link ${button}`;
+const buttonLoading = `button-loading`;
+const buttonDisabled = `button-disabled ${button}`;
+// Input
+const label = `label ${text}`;
+const input = `input ${text} ${backgroundColor}`;
+const inputGroup = `input-group ${input}`;
+const inputInvalid = `input-invalid ${input}`;
+const inputDisabled = `input-disabled ${input}`;
+const inputFocused = `input-focused ${input}`;
+const inputInvalidAndFocused = `input-invalid-and-focused ${input}`;
+const inputRadio = `input-radio`;
+const inputRadioFocused = `input-radio-focused ${inputRadio}`;
+const inputRadioChecked = `input-radio-checked ${inputRadio}`;
+const inputRadioCheckedFocused = `input-radio-checked-focused ${inputRadio}`;
+const inputRadioInvalid = `input-radio-invalid ${inputRadio}`;
+const inputCheckbox = `input-checkbox ${backgroundColor}`;
+const inputCheckboxInvalid = `input-checkbox-invalid ${inputCheckbox}`;
+const inputCheckboxFocused = `input-checkbox-focused ${inputCheckbox}`;
+const inputCheckboxChecked = `input-checkbox-checked ${inputCheckbox}`;
+const inputCheckboxCheckedFocused = `input-checkbox-checked-focused ${inputCheckbox}`;
+// Alert
+const alert = `alert ${text}`;
+const alertDanger = `alert-danger ${alert}`;
+// Tooltip
+const tooltip = `tooltip ${text}`;
+const tooltipIcon = `tooltip-icon ${text}`;
+const tooltipInner = `tooltip-inner ${text}`;
+// Card
+const card = `card ${text} ${backgroundColor}`;
+// Table
+const table = `table ${text} ${backgroundColor}`;
+const tableCell = `table-cell ${text} ${backgroundColor}`;
+const tableHeadCell = `table-head-cell ${tableCell} ${text} ${backgroundColor}`;
+const tableCellEven = `table-cell-even ${tableCell} ${text} ${backgroundColor}`;
+const tableCellOdd = `table-cell-odd ${tableCell} ${text} ${backgroundColor}`;
+const getAlternateTableCellPart = (index) => index % 2 ? tableCellEven : tableCellOdd;
+const tableEmpty = `table-empty ${text} ${backgroundColor}`;
+const tableError = `table-error ${text} ${backgroundColor}`;
+// Loading spinner
+const loadingSpinner = `loading-spinner`;
+// Badge
+const badge = `badge ${text}`;
+// Dropdown-menu
+const dropdownMenu = `dropdown-menu ${text}`;
+// Radio List Item
+const radioListItem = `radio-list-item ${text}`;
+// Skeleton
+const skeleton = `skeleton`;
+// Component specific
+// This allows the billing form to be hidden, for example
+// ::part(billing-form) { display: none; }
+const billingForm = `billing-form`;
+
+export { tooltipIcon as A, tooltip as B, tooltipInner as C, inputGroup as D, inputRadioInvalid as E, inputRadioCheckedFocused as F, inputRadioChecked as G, inputRadioFocused as H, inputRadio as I, heading5 as J, card as K, buttonLoading as L, buttonPrimary as M, buttonSecondary as N, heading3 as O, billingForm as P, radioListItem as Q, dropdownMenu as R, heading4 as S, badge as T, heading1 as a, inputInvalid as b, inputFocused as c, input as d, textDanger as e, tableHeadCell as f, getAlternateTableCellPart as g, heading2 as h, inputInvalidAndFocused as i, table as j, tableCell as k, label as l, tableEmpty as m, tableError as n, buttonLink as o, buttonDisabled as p, loadingSpinner as q, alertDanger as r, skeleton as s, text as t, inputCheckboxInvalid as u, inputCheckboxCheckedFocused as v, inputCheckboxFocused as w, inputCheckboxChecked as x, inputCheckbox as y, inputDisabled as z };

package/dist/module/payment-details-core2.js

@@ -1,9 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as formatCurrency, a as formatDate, b as formatTime, s as snakeCaseToHumanReadable } from './utils2.js';
-import { L as LoadingState, E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.js';
+import { E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.js';
+import { T as badge } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
-import { M as MapPaymentStatusToBadge } from './payments-status.js';
+import { S as Spinner } from './spinner.js';
 import { d as defineCustomElement$1 } from './details.js';
+import { M as MapPaymentStatusToBadge } from './payments-status.js';
 
 const PaymentDetailsCore = /*@__PURE__*/ proxyCustomElement(class PaymentDetailsCore extends HTMLElement {
     constructor() {
@@ -44,14 +46,14 @@ const PaymentDetailsCore = /*@__PURE__*/ proxyCustomElement(class PaymentDetails
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '85c684ff2f417380042e5245e3e6546874a75e72' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: 'a1afa8ca107867f4d48a6069d8df08942e7cb4b2', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'c7e93e52c041808c816768cfd56c2e035410bea3', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '2dba396e28b3daa61b722ffe32d98c3065ed2e18', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '9c0417863d9b0ba186c7547d41b02372c9ab3d54', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '7a7e31453894d70671b0f001b30aa74c72380308', title: "ID", value: this.payment.id })), h("div", { key: 'd6b72faca6ce471ce914ff5184e6cc2419a2ef84', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'c794e7f7a4ac3fc3442fea20ba6aaf00ca1b52fd', sectionTitle: "Details" }), h("div", { key: '5f34cd707d0f7ca2ed3c0dbd2abc2fc1c5f9ee4c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f64631d74fb728487477e61d99f93b72ccf03b45', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7e751f1c2e62ea45fbdb910b4bfb10f2c30e923a', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1a536d5e027c98aeabd44cbb83f8f38322c37a95', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'a1739f90e3d8cc1724b556168c86e392d1ef84fa', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '0a1f7b910421fe8568c5bbb6a70732f392486370', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '6c45ac2b6e0e84fbdd9e9f6fa26764a351c2495f', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '6571a1faf8daf4079187ccf37603cdec6e7f7602', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1b343529481cf7143855513e44428cf3188b8326', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'd0ff8578503733c6b580131aed9d3f284e7ab3e8', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'c0ec143f86d9c817380efa58cea2a48476df77d8', sectionTitle: "Payment Method" }),
-            h("div", { key: '278b6ef36cf15e9037b4ec94846fc8215b766f61', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dcbf3d1747b9e84cb10430ee595806381cac21bd', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '0c4f1701aa28272e93d2f13251da5261f90e83cc', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'f8f90a838143fde661a612c5d880ffc98eb468a2', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '37a455f5451973c3388dd8cf0841320564f9f034', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '156c2b789d28d1ae7b5e4c912c99f29681a2f7ef', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '7550877e5bc7bf30d0964d496b07c39f57ea23c7' }, this.loading && h(Spinner, { key: '320d191ef2cbd736158382f693bd4e1b2676a850' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'cc147622d2821fb3070d3acb17dabbe0d6acb44e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '102fbe95740cfcbeed7d79c500841e4e69644c1b', slot: "head-info", badge: h("span", { slot: 'badge', part: badge, innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '1f6b55ebbc0abb37ced9cda26b193a779f7ba4a9', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cb64b263862128ef00b4923cdfd986ee63d40670', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '4a245ba3ad052ef015d7c5c2abb8d05051e0784a', title: "ID", value: this.payment.id })), h("div", { key: '9721335ed8558618cae9685f83c68e2eff8dfb8b', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '8c460e5675898d68ceb335a56da05b459b81b112', sectionTitle: "Details" }), h("div", { key: '1094ca8b231926460913bbabd9c9816e04d5bb1f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'e9640bbcf361dbeead436eea32a69fa962e34663', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'ffa1411af9d4d78dbeaedcf7c12ce7d7c1e6eb53', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'c5843ff4773b7a2be2afdd659226dd46096f585d', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '8ec788ae9ed769f6af4f32882d72d10877d1de30', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: 'ddd659af132d2628b8187d81ea72fc604e7ea7a8', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '15cb99e66dfc876d65aa8d446564f873aef1ef8a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '499a906f13648cd49a3bf92ccadcc01f0fb430f6', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '75ab13ff4c06f0f58dec6c0fcaad692d6d03b68b', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'aeb538897b387e4811d35dde9fb19a5813c1c049', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '4c8aa277b28bb1ffaf5fbada3a35f284ee2fabb2', sectionTitle: "Payment Method" }),
+            h("div", { key: 'ce52033a650a4f5db13e5c3cdf97191bcb3539b1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '168e45e35fc2e11adbf6881b17ebfd36d0a54a71', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '38af59143d2961cdc29b03e46af06b720dad3c8e', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '07518b2789187d2ae0b3f5edc6510a4b44798154', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '724207946a3e0b1b1cfe00bf0e77bfcd2f8c5982', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '34deb890ddf58566794fcb451d4d422d31f3f8b7', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '4f5e2cc8141a336e4e9181cee653fda1bf38ecf7', sectionTitle: "Payment Method" }),
-            h("div", { key: '402ae401e93231e6369f9bb76ac48805d7d28f09', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ef33c8d86b6ae69ae94cce998ef9d120b20e66d1', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'db745f865358ab8f8537cc491d6d7ce021e7db29', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9a15f1c0990145a0ebbbf4ebab04c7b8be3f447b', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'dad1476170af5c5cb51a7fbd9329bbe969c51e3e', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: 'fbfc61ca6adb02cca215e1dda51eca1de03023ea', sectionTitle: 'Metadata' }), h("div", { key: '7018390fa3a2304a936999a0c7ceb04d3bd7fed5', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '4ec963eedfb62ab1d038d3f50b4c7199e4954623', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: 'fbc24139e24a3d72624db86e30d0ce7b602cafe1', sectionTitle: "Payment Method" }),
+            h("div", { key: 'cba8888ffd57b95d82ab307f5de83c61f16a75b8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '5d7bbf52c0b06be00bdca98df4926dfa5c7ee25f', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '19f2450384c28970a69a13aa623a0360c7818f46', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'c81914830e67c477c2407112e74afaa127c406c2', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '5c8581983f368d84d6d9044d49ea2cab923b6615', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: 'c8ed7c6c2480365d7fec6c388103aeb1c3622c44', sectionTitle: 'Metadata' }), h("div", { key: 'cca65ed21900b912ea4a22b2e852d0c46946efd1', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'c96c267005a5ee26064d7cd6c03768f83442dfc6', metadata: this.payment.metadata })))))));
     }
     static get watchers() { return {
         "getPaymentDetails": ["updateOnPropChange"]

package/dist/module/payment-method-options.js

@@ -2,23 +2,22 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as config } from './config.js';
 import { P as PaymentMethodTypes } from './Payment.js';
 import { d as defineCustomElement$2, P as PaymentMethodOption } from './saved-payment-method.js';
-import { d as defineCustomElement$b } from './custom-popper2.js';
-import { d as defineCustomElement$a } from './form-control-error-text2.js';
-import { d as defineCustomElement$9 } from './form-control-select2.js';
-import { d as defineCustomElement$8 } from './form-control-text2.js';
-import { d as defineCustomElement$7 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$6 } from './billing-form.js';
-import { d as defineCustomElement$5 } from './new-payment-method.js';
-import { d as defineCustomElement$4 } from './payment-method-form.js';
+import { d as defineCustomElement$g } from './bank-account-form2.js';
+import { d as defineCustomElement$f } from './card-form2.js';
+import { d as defineCustomElement$e } from './custom-popper2.js';
+import { d as defineCustomElement$d } from './form-control-checkbox2.js';
+import { d as defineCustomElement$c } from './form-control-help-text3.js';
+import { d as defineCustomElement$b } from './form-control-radio2.js';
+import { d as defineCustomElement$a } from './form-control-select2.js';
+import { d as defineCustomElement$9 } from './form-control-text2.js';
+import { d as defineCustomElement$8 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$7 } from './hidden-input2.js';
+import { d as defineCustomElement$6 } from './iframe-input2.js';
+import { d as defineCustomElement$5 } from './billing-form.js';
+import { d as defineCustomElement$4 } from './new-payment-method.js';
 import { d as defineCustomElement$3 } from './save-new-payment-method.js';
 import { d as defineCustomElement$1 } from './sezzle-payment-method.js';
 
-const paymentMethodOptionsCss = ":host{display:block}.payment-method-header{cursor:pointer;color:var(--jfi-radio-button-group-color);background-color:var(--jfi-radio-button-group-background-color);border-bottom:var(--jfi-radio-button-group-divider)}.payment-method-header:hover{color:var(--jfi-radio-button-group-color-hover);background-color:var(--jfi-radio-button-group-background-color-hover)}";
-const JustifiPaymentMethodOptionsStyle0 = paymentMethodOptionsCss;
-
-const formCheckInputCss = ".form-check-input,label{cursor:pointer}.form-check-input{background-color:var(--jfi-radio-button-background-color);border-color:var(--jfi-radio-button-border-color)}.form-check-input:checked,.form-check-input:checked:focus{background-color:var(--jfi-radio-button-background-color-selected);border-color:var(--jfi-radio-button-border-color-selected)}.form-check-input:focus{border-color:var(--jfi-radio-button-border-color-focus);box-shadow:var(--jfi-radio-button-box-shadow-focus)}";
-const JustifiPaymentMethodOptionsStyle1 = formCheckInputCss;
-
 const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMethodOptions extends HTMLElement {
     constructor() {
         super();
@@ -79,7 +78,7 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
     }
     render() {
         var _a;
-        return (h(Host, { key: '56916dc3ddab28b5518c917d980bc757169a814b' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '3ab3caf94332163f031ecebe101d45c35e1416bd' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
@@ -110,7 +109,6 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
     static get watchers() { return {
         "savedPaymentMethods": ["paymentMethodsChanged"]
     }; }
-    static get style() { return JustifiPaymentMethodOptionsStyle0 + JustifiPaymentMethodOptionsStyle1; }
 }, [0, "justifi-payment-method-options", {
         "showCard": [4, "show-card"],
         "showAch": [4, "show-ach"],
@@ -135,49 +133,74 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-method-options", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-billing-form", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
+    const components = ["justifi-payment-method-options", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form", "justifi-new-payment-method", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-method-options":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PaymentMethodOptions);
             }
             break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
         case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "form-control-radio":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "form-control-tooltip":
+        case "hidden-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-billing-form":
+        case "iframe-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "justifi-new-payment-method":
+        case "justifi-billing-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "justifi-payment-method-form":
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/module/payment-provisioning-actions.js

@@ -1,5 +1,5 @@
 import { a as ComponentErrorSeverity } from './ComponentError.js';
-import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 
 // Entity API Actions
 const makeGetBusiness = ({ authToken, businessId, service }) => async ({ onSuccess, onError, final = () => { } }) => {