@justifi/webcomponents 4.19.3 → 4.20.0

package/dist/module/form-control-date2.js

@@ -14,12 +14,12 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             this.inputHandler(name, target.value);
             this.formControlInput.emit({ name, value: target.value });
         };
-        this.label = undefined;
         this.name = undefined;
+        this.label = undefined;
+        this.inputHandler = undefined;
+        this.defaultValue = undefined;
         this.helpText = undefined;
         this.errorText = undefined;
-        this.defaultValue = undefined;
-        this.inputHandler = undefined;
         this.disabled = undefined;
     }
     handleDefaultValueChange(newValue) {
@@ -32,18 +32,18 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         this.dateInput.value = value;
     }
     render() {
-        return (h(Host, { key: 'fa61a426a5a070d951fa425ae42a59add69a9d96', exportparts: "label,input,input-invalid" }, h("label", { key: 'e7679e6a66277a130414b59421b01d1f8e328cf2', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'b3fb4afd3181fec3eef3dfb851ab8965cb7bbfe7', type: "date", ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'dbc9ac76d75521a7d1ee5cc34393471521ffa1c2', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '0f9731278250bde69dd7dee9a7b44e339d919774', errorText: this.errorText, name: this.name })));
+        return (h(Host, { key: 'dfbfc1ea5d7139a1c1d30c7bd84b33a9c22604cf', exportparts: "label,input,input-invalid" }, h("label", { key: '99a01781ecd1421fa439ad08f77d3f750a55eaee', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'd8db68d8a62e0f982c3aa7d4bd3a5cf7c2681db3', type: "date", ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '1ee2ccdc1e409c5427e39efe2929b830960edce9', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '1db50cca364b4d059dac37243cf83bb4b11459cd', errorText: this.errorText, name: this.name })));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
     }; }
 }, [0, "form-control-date", {
-        "label": [1],
         "name": [1],
+        "label": [1],
+        "inputHandler": [16],
+        "defaultValue": [1, "default-value"],
         "helpText": [1, "help-text"],
         "errorText": [1, "error-text"],
-        "defaultValue": [1, "default-value"],
-        "inputHandler": [8, "input-handler"],
         "disabled": [4]
     }, undefined, {
         "defaultValue": ["handleDefaultValueChange"]

package/dist/module/form-control-select2.js

@@ -17,13 +17,13 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class SelectInput extends H
         this.updateInput = (newValue) => {
             this.selectElement.value = newValue;
         };
-        this.label = undefined;
         this.name = undefined;
+        this.label = undefined;
+        this.options = undefined;
+        this.inputHandler = undefined;
+        this.defaultValue = undefined;
         this.helpText = undefined;
         this.errorText = undefined;
-        this.defaultValue = undefined;
-        this.inputHandler = undefined;
-        this.options = undefined;
         this.disabled = undefined;
     }
     handleDefaultValueChange(newValue) {
@@ -34,19 +34,19 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class SelectInput extends H
     }
     render() {
         var _a;
-        return (h(Host, { key: '99449e3724103b12af7f2a4573831961074a484a', exportparts: "label,input,input-invalid" }, h("div", { key: 'd73e89d43da9968b687afece24794d9472fec6b5', class: "form-group d-flex flex-column" }, h("label", { key: '6964c55858fc3cf96a137e1061c7f66831105348', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: '5b1a09a607ad9638915f5e70f2164f6010020438', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h("form-control-help-text", { key: '62d862921d463c98e56888293c878624f7311548', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '0b1c4d4752965fb058208c72c7f1c3872d1e0561', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'e62a08c8ba656cc7e82c0f8f7facccc086fbafe7', exportparts: "label,input,input-invalid" }, h("div", { key: 'f9a4c428311f32f2585ca9259ba31909187b809d', class: "form-group d-flex flex-column" }, h("label", { key: '006a3bd7ae2874bf3fa24e2c053808e51b652d9a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: 'f0ac14e8b74c939b4928b9ce800118f660c90613', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h("form-control-help-text", { key: '3a60ff2a2af7668013baf2767d97095379b2d37e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '8c4049d16408f305b8bf1e8a49c91db56991a840', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
     }; }
 }, [0, "form-control-select", {
-        "label": [1],
         "name": [8],
+        "label": [1],
+        "options": [16],
+        "inputHandler": [16],
+        "defaultValue": [1, "default-value"],
         "helpText": [1, "help-text"],
         "errorText": [1, "error-text"],
-        "defaultValue": [1, "default-value"],
-        "inputHandler": [16],
-        "options": [16],
         "disabled": [4]
     }, undefined, {
         "defaultValue": ["handleDefaultValueChange"]

package/dist/module/form-control-text2.js

@@ -20,13 +20,13 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
                 inputElement.value = newValue || '';
             }
         };
-        this.label = undefined;
         this.name = undefined;
+        this.label = undefined;
+        this.inputHandler = undefined;
+        this.defaultValue = undefined;
         this.helpText = undefined;
         this.errorText = undefined;
-        this.defaultValue = undefined;
         this.maxLength = undefined;
-        this.inputHandler = undefined;
         this.keyDownHandler = undefined;
         this.disabled = undefined;
     }
@@ -37,20 +37,20 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '1194532f81831734543bad80860da14f8a5ad856', exportparts: "label,input,input-invalid" }, h("div", { key: '296538cf90b62f8041e21620aa06b4074f68b71a', class: "form-group d-flex flex-column" }, h("label", { key: '7c009ce96124e58f9657dba2565ef298225f10f7', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '4b33cb700aecf4d0a359366ba2e0d248c602d904', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '7a279d72bb262fcb044b5b0cc31703878ce9f444', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '00bea288a99f626806697a98b6dca3f3298dc0b3', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'fddfb4134747c8d8caf6594f5450e57fa4c2dc3e', exportparts: "label,input,input-invalid" }, h("div", { key: 'bbd0174fb56d911992907e0a2c453b9d1412b636', class: "form-group d-flex flex-column" }, h("label", { key: 'f5d9d3d6c4694d08d86963df37adbd1b334593b3', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'ae49e4c86782fd0901c1a0e8530981cf1b0b7c65', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '1e1bbc8d39e5caeca559515f72eb17ca9b3ab0b1', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '44c121cb0eb69840440e696e784c7a73689a42f2', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
     }; }
 }, [0, "form-control-text", {
-        "label": [1],
         "name": [8],
+        "label": [1],
+        "inputHandler": [16],
+        "defaultValue": [1, "default-value"],
         "helpText": [1, "help-text"],
         "errorText": [1, "error-text"],
-        "defaultValue": [1, "default-value"],
         "maxLength": [2, "max-length"],
-        "inputHandler": [16],
         "keyDownHandler": [16],
         "disabled": [4]
     }, undefined, {

package/dist/module/justifi-business-details.js

@@ -5,6 +5,7 @@ import { a as Business } from './Business.js';
 import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './ComponentError.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 import { J as JustifiAnalytics } from './Analytics.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$7 } from './additional-questions-details2.js';
 import { d as defineCustomElement$6 } from './business-details-core2.js';
 import { d as defineCustomElement$5 } from './generic-info-details2.js';
@@ -51,6 +52,7 @@ const BusinessDetails = /*@__PURE__*/ proxyCustomElement(class BusinessDetails e
         this.getBusiness = undefined;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetBusiness();
     }

package/dist/module/justifi-business-form.js

@@ -13,6 +13,7 @@ import { a as BusinessFormServerErrors, b as BusinessFormClickActions } from './
 import { a as Business } from './Business.js';
 import { J as JustifiAnalytics } from './Analytics.js';
 import { S as StyledHost } from './styled-host.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$e } from './form-alert2.js';
 import { d as defineCustomElement$d } from './form-control-date2.js';
 import { d as defineCustomElement$c } from './form-control-error-text2.js';
@@ -86,6 +87,7 @@ const BusinessForm = /*@__PURE__*/ proxyCustomElement(class BusinessForm extends
         this.errorMessage = undefined;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         const missingAuthTokenMessage = 'Warning: Missing auth-token. The form will not be functional without it.';
         const missingBusinessIdMessage = 'Warning: Missing business-id. The form requires an existing business-id to function.';
@@ -122,7 +124,7 @@ const BusinessForm = /*@__PURE__*/ proxyCustomElement(class BusinessForm extends
         this.instantiateBusiness(response.data);
     }
     render() {
-        return (h(StyledHost, { key: 'e388e1e7658969f0e5687102a62345e2790da97a', exportparts: "label,input,input-invalid" }, h("form", { key: 'c22a562e57539e982a071b1906e5bf0bcc249e7d', onSubmit: this.validateAndSubmit }, h("div", { key: '44243cd965b448f5be9058880aa2deb32f4ce8dc', class: "row gap-3" }, h("h1", { key: 'd666ed8ddacc8ac05d7f42c2f4824208b92cdb3f' }, this.title), h("form-alert", { key: 'b1d4025078c4373a789609f2e14d309f0ee280fe', text: this.errorMessage, hideAlert: this.hideErrors }), h("div", { key: 'cdc1d597a5dbf9581182de302a453e4ea98bb28f', class: "col-12 mb-4" }, h("justifi-business-core-info", { key: '2333164de020eadf54da91cabdcbeb87a2fd1b75', formController: this.formController })), h("div", { key: '74eafa5c419f6d6fe2eb3eeb8521e12175f7ee3a', class: "col-12 mb-4" }, h("justifi-legal-address-form", { key: '1e5a373f95a77bf3aba1a9f3538b3a2ac3dbf716', formController: this.formController })), h("div", { key: 'ec9f6195f3674b426722463341445f0ed1746178', class: "col-12 mb-4" }, h("justifi-additional-questions", { key: '0adbc60492f4ad71e3877c446376999418b7dc15', formController: this.formController })), h("div", { key: 'cdfb8d0d40e9f888afd9c23cd97d33d861d16f62', class: "col-12 mb-4" }, h("justifi-business-representative", { key: '4d03ec95b7c2918494c9970b3e6a5826d4d69a10', formController: this.formController })), h("div", { key: '0682dba469e57a938b175499312de5d5c4f55a69', class: "col-12 d-flex flex-row-reverse" }, h("button", { key: '64791e2742ee129787094c7123e87c4262735556', type: "submit", class: "btn btn-primary jfi-submit-button", disabled: this.disabledState, onClick: () => this.fireClickEvents({ name: BusinessFormClickActions.submit }) }, this.isLoading ? 'Loading...' : 'Submit'))))));
+        return (h(StyledHost, { key: '2f28b3e44c64d6ea1ac0d8584946927f6c9c3d05', exportparts: "label,input,input-invalid" }, h("form", { key: '5e57787b7dcd649c3523dc49d0a6946138643c7c', onSubmit: this.validateAndSubmit }, h("div", { key: '0ee6212aa6157ade79ab9b2ff5eb700549a8a916', class: "row gap-3" }, h("h1", { key: '84824314dd924cdab149c2b62b7e01b07dbf5d28' }, this.title), h("form-alert", { key: 'dca6d7ef6bcddd3090f44e5ccf9199bbd441dc87', text: this.errorMessage, hideAlert: this.hideErrors }), h("div", { key: 'a022912c284d63afbf9ce698b145d964d720b110', class: "col-12 mb-4" }, h("justifi-business-core-info", { key: 'be264b806255b790a166b8a3349d78845c6c8225', formController: this.formController })), h("div", { key: 'b3a52da227a71f941941f66b758f718cdc3b7800', class: "col-12 mb-4" }, h("justifi-legal-address-form", { key: '258dc5ebabc0e2dfaa8de28534238ef80a4f951d', formController: this.formController })), h("div", { key: '9dd5d30daf37d90a689333640cd1630000ee5e25', class: "col-12 mb-4" }, h("justifi-additional-questions", { key: 'aa1cdf3a39170fcefbd07afcce193ed36430dc5b', formController: this.formController })), h("div", { key: 'a8cd6655a6408bef11c9ad442ecae7a0b5e3c50d', class: "col-12 mb-4" }, h("justifi-business-representative", { key: '33db8cd22d22b694917332941b89b7535bd19201', formController: this.formController })), h("div", { key: '99d46400c8d46e5a3ca6747e5bae70bf5652a367', class: "col-12 d-flex flex-row-reverse" }, h("button", { key: '8b858727a11d5ec5f855c446f34da3c1d6253563', type: "submit", class: "btn btn-primary jfi-submit-button", disabled: this.disabledState, onClick: () => this.fireClickEvents({ name: BusinessFormClickActions.submit }) }, this.isLoading ? 'Loading...' : 'Submit'))))));
     }
     static get style() { return JustifiBusinessFormStyle0; }
 }, [1, "justifi-business-form", {

package/dist/module/justifi-checkout.js

@@ -7,6 +7,7 @@ import './Payment.js';
 import './Payout.js';
 import { c as config } from './config.js';
 import { J as JustifiAnalytics } from './Analytics.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$d } from './form-control-error-text2.js';
 import { d as defineCustomElement$c } from './form-control-help-text2.js';
 import { d as defineCustomElement$b } from './form-control-select2.js';
@@ -109,6 +110,7 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         this.errorMessage = '';
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetCheckout();
     }
@@ -143,11 +145,11 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         this.checkoutCoreRef.fillBillingForm(fields);
     }
     render() {
-        return (h("justifi-checkout-core", { key: 'd2f6bfed1be767edcf4ba21cddc503ff5efbec1a', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
+        return (h("justifi-checkout-core", { key: 'ea50f0df79dae86294ccfdf2ec523f0fb81433e4', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
                 if (el) {
                     this.checkoutCoreRef = el;
                 }
-            } }, h("div", { key: '45ac1bea74ca8ef7999211b51fe7791225d61f00', slot: "insurance" }, h("slot", { key: '13e051844cc7cb4aed98076ccd64954b2dd68228', name: "insurance" }))));
+            } }, h("div", { key: '301247cf7c916ba1c6c5464e3c2f0226d0f6f041', slot: "insurance" }, h("slot", { key: 'a75ff85e5a6d954e7c0d3c24abac518a2765f889', name: "insurance" }))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],

package/dist/module/justifi-gross-payment-chart.js

@@ -5,6 +5,7 @@ import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './Compone
 import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { J as JustifiAnalytics } from './Analytics.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$2 } from './gross-payment-chart-core2.js';
 
 class ReportsService {
@@ -59,6 +60,7 @@ const GrossPaymentChart = /*@__PURE__*/ proxyCustomElement(class GrossPaymentCha
         this.errorMessage = null;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetGrossPayment();
     }

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

@@ -7,6 +7,7 @@ import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './Compone
 import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { J as JustifiAnalytics } from './Analytics.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$3 } from './details.js';
 import { d as defineCustomElement$2 } from './payment-details-core2.js';
 
@@ -54,6 +55,7 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
         this.errorMessage = null;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetPaymentDetails();
     }

package/dist/module/justifi-payment-form.js

@@ -9,6 +9,7 @@ import { g as getErrorMessage } from './utils3.js';
 import { J as JustifiAnalytics } from './Analytics.js';
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$8 } from './form-control-error-text2.js';
 import { d as defineCustomElement$7 } from './form-control-help-text2.js';
 import { d as defineCustomElement$6 } from './form-control-select2.js';
@@ -39,6 +40,7 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
         this.selectedPaymentMethodType = PaymentMethodTypes.card;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         if (!this.validateProps()) {
             this.errorEvent.emit({
@@ -125,15 +127,15 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
         }
     }
     render() {
-        return (h(StyledHost, { key: '38bd6cca38d9068fa9277a8568a98f261a4cc616' }, h("form", { key: 'fec19f5e2f11934e6783124c4c437a2d3947f596', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '18001f78e03336d01de8473a57e3e228e9fce201', class: "col-12" }, h("justifi-payment-method-selector", { key: '260ac1ade3ccfe6baf518eb856bdf4d380025620', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: 'f6ade2336314e05f2bdce75df8577939efe33e3b', class: "col-12" }, h("justifi-payment-method-form", { key: 'ad8e5b121b8425175f7ac7f38ab24dfba1801a28', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
+        return (h(StyledHost, { key: 'f7d035a9ed8b16016493aa07a85a6b4d6d83b5f5' }, h("form", { key: 'fb9354b439332ef4ee67e915f27b60b9b744e6e2', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '303fbccf9beb30c1d822f0ac148128dfba9d158f', class: "col-12" }, h("justifi-payment-method-selector", { key: 'f71353d3f90ab50461a57ce3738ea853ca4d1cc3', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: 'd9024a406dcde487ff2bb7d34385da0a1be8aef5', class: "col-12" }, h("justifi-payment-method-form", { key: '010488c96f1b6b5af049b89151cea9ce61f263bb', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
                 if (el) {
                     this.paymentMethodFormRef = el;
                 }
-            } })), h("div", { key: '29f15f1cece3e07a569e514d08bf9996405699c6', class: "col-12" }, h("justifi-billing-form", { key: '9928924cc29bfa5c5e46ada294cb26da0c1d222b', legend: "Billing Info", ref: el => {
+            } })), h("div", { key: 'c8b41e9d6bc0d21db4bc1efa12852480ed4a0bbd', class: "col-12" }, h("justifi-billing-form", { key: '2226122296e6b9da8359b90fe563b6c4342c72f3', legend: "Billing Info", ref: el => {
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { key: 'c36583ab34bc105b506df27aec02898455855cec', name: 'insurance' }), h("div", { key: 'cc38292ae8a59bc6f4624a8535e8b7c93e6f3a35', class: "col-12" }, h(Button, { key: 'e5fe0f50ee2322ab2a199a6229015c9daa198cc0', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
+            } })), h("slot", { key: '5aa12164db0d1ac4570db49b7a1bc527d974a8ab', name: 'insurance' }), h("div", { key: '5b0ad786dcf96a4c83696b1e3d1cd09345313807', class: "col-12" }, h(Button, { key: 'b3a55eaf9403d33a0e0769ca2c6c42b086f4da9a', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
     }
     static get style() { return JustifiPaymentFormStyle0; }
 }, [1, "justifi-payment-form", {

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

@@ -5,6 +5,7 @@ import { m as makeGetBusiness, e as makePostProvisioning } from './payment-provi
 import { B as BusinessService } from './business.service.js';
 import { c as config } from './config.js';
 import { A as Api } from './Api.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$y } from './form-control-checkbox2.js';
 import { d as defineCustomElement$x } from './form-control-date2.js';
 import { d as defineCustomElement$w } from './form-control-error-text2.js';
@@ -66,6 +67,7 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
         this.initializeApi();
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeApi();
     }
@@ -95,7 +97,7 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
         }
     }
     render() {
-        return (h("justifi-payment-provisioning-core", { key: 'a93ee23fabf4bdeb381e924bfdf684ddd183075a', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
+        return (h("justifi-payment-provisioning-core", { key: '82b3601d3349a92bed1aa93e2a847039d7493c04', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],

package/dist/module/justifi-payments-list.js

@@ -7,11 +7,17 @@ import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './Compone
 import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { J as JustifiAnalytics } from './Analytics.js';
-import { d as defineCustomElement$6 } from './form-control-date2.js';
-import { d as defineCustomElement$5 } from './form-control-error-text2.js';
-import { d as defineCustomElement$4 } from './form-control-help-text2.js';
-import { d as defineCustomElement$3 } from './pagination-menu2.js';
-import { d as defineCustomElement$2 } from './payments-list-core2.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
+import { d as defineCustomElement$b } from './custom-popper2.js';
+import { d as defineCustomElement$a } from './form-control-date2.js';
+import { d as defineCustomElement$9 } from './form-control-error-text2.js';
+import { d as defineCustomElement$8 } from './form-control-help-text2.js';
+import { d as defineCustomElement$7 } from './form-control-select2.js';
+import { d as defineCustomElement$6 } from './form-control-text2.js';
+import { d as defineCustomElement$5 } from './pagination-menu2.js';
+import { d as defineCustomElement$4 } from './payments-list-core2.js';
+import { d as defineCustomElement$3 } from './payments-list-filters2.js';
+import { d as defineCustomElement$2 } from './table-filters-menu2.js';
 
 const makeGetPayments = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
@@ -58,6 +64,7 @@ const PaymentsList = /*@__PURE__*/ proxyCustomElement(class PaymentsList extends
         this.errorMessage = null;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetPayments();
     }
@@ -107,34 +114,59 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payments-list", "form-control-date", "form-control-error-text", "form-control-help-text", "pagination-menu", "payments-list-core"];
+    const components = ["justifi-payments-list", "custom-popper", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-select", "form-control-text", "pagination-menu", "payments-list-core", "payments-list-filters", "table-filters-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payments-list":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PaymentsList);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$a();
             }
             break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$9();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$8();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
             }
             break;
         case "pagination-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$5();
             }
             break;
         case "payments-list-core":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "payments-list-filters":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "table-filters-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/justifi-payout-details.js

@@ -7,6 +7,7 @@ import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './Compone
 import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { J as JustifiAnalytics } from './Analytics.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$3 } from './details.js';
 import { d as defineCustomElement$2 } from './payout-details-core2.js';
 
@@ -56,6 +57,7 @@ const PayoutDetails = /*@__PURE__*/ proxyCustomElement(class PayoutDetails exten
         this.errorMessage = null;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeServices();
     }

package/dist/module/justifi-payouts-list.js

@@ -8,6 +8,7 @@ import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './Compone
 import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { J as JustifiAnalytics } from './Analytics.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$6 } from './form-control-date2.js';
 import { d as defineCustomElement$5 } from './form-control-error-text2.js';
 import { d as defineCustomElement$4 } from './form-control-help-text2.js';
@@ -61,6 +62,7 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
         this.errorMessage = null;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeServices();
     }

package/dist/module/justifi-refund-form.js

@@ -100,7 +100,7 @@ const RefundForm = /*@__PURE__*/ proxyCustomElement(class RefundForm extends HTM
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'd0d0962eaecab749aa1eb124e86701a2fb4dfd53' }, h("h1", { key: 'cb3071d89c291b1664e551fcf2808a64569ba5eb' }, "Refund"), this.refundInfoText && (h("div", { key: '01a6f4567f882d2eec492ef6d98db7d04747ecb4', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '8ae5928aaf8ead35a7ad180a01bdde05ebec3d5f', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '425a7dfe9d8b886b55fd0878f3989373733c1758', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '5516d2ac500611d2410b9b4c2a4d0d15e417b2d1', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'b67a7c56f070a5a25d91aa0cc77755b27d420fdc', class: "form-group" }, h("form-control-monetary", { key: '76b6cfdf2b39674434f4d880333dd5d5f603f0b6', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: '5e581cdea69d2ce9dbad774214cd904923d199b3', class: "form-group" }, h("form-control-text", { key: '926ae888676a4089d3381bd4d650e6f84f6e206a', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: 'de5df506b7b64a69a16241f117bf9bea4fd79b57', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '92ad4d43677587c2c20dc03c6f03a6cf1f20ac12', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(StyledHost, { key: '317b405be6fae390e20b7bf8586aced9fdf5e246' }, h("h1", { key: 'e27cd7c30b74eae1be005dfd17cc4a33411024d1' }, "Refund"), this.refundInfoText && (h("div", { key: '00298ad8bd4a0c5e56d78e94f2b9da8b3ad065df', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: 'e32db4b03e42a6e8180b10e99a7a7de94e753850', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: 'd63e3a790338bd5c3ac9f304aaa01b65928bd34e', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: 'a5cb24ef9f8214e37398d4c2eb790f0c5ffb5a18', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'c8e24f30f8db93bef5e6b56d9eea5208aa768f94', class: "form-group" }, h("form-control-monetary", { key: 'a52701bc026714e8e0851eeff6c8458385f2f5da', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: 'e2ff04104c47d2852da925de074b1667dcc684f4', class: "form-group" }, h("form-control-text", { key: '8567d4f6082642919e2a132511af6eb9f393cd65', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '6634bfd2156b45f189c4c4b630983712bbc5baa4', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '1a0c80e5ee42673d09f9d7f9a36acc2f4ea52f8b', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
     }
     static get style() { return JustifiRefundFormStyle0; }
 }, [1, "justifi-refund-form", {

package/dist/module/justifi-season-interruption-insurance.js

@@ -7,6 +7,7 @@ import { c as config } from './config.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './ComponentError.js';
 import { J as JustifiAnalytics } from './Analytics.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$2 } from './season-interruption-insurance-core.js';
 
 class InsuranceService {
@@ -102,6 +103,7 @@ const SeasonInterruptionInsurance = /*@__PURE__*/ proxyCustomElement(class Seaso
         return this.seasonInterruptionCoreRef.validate();
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeServiceMethods();
     }
@@ -127,7 +129,7 @@ const SeasonInterruptionInsurance = /*@__PURE__*/ proxyCustomElement(class Seaso
         });
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: '256d45d39c5d297abb7f955229b0e0e9fbc9504a', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: '0ef99882f70c9886e8a5b49da5fe89dd4421067a', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
 }, [1, "justifi-season-interruption-insurance", {
         "authToken": [1, "auth-token"],

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "4.19.3";
+const version = "4.20.0";
 const description = "JustiFi Web Components";
 const collection = "dist/collection/collection-manifest.json";
 const main = "dist/index.cjs.js";
@@ -27,6 +27,7 @@ const scripts = {
 	"test:file": "stencil test --spec --watch --"
 };
 const dependencies = {
+	"@popperjs/core": "^2.11.8",
 	"@stencil/core": "^4.0.5",
 	"@stencil/store": "^2.0.8",
 	bootstrap: "^5.2.3",
@@ -35,6 +36,7 @@ const dependencies = {
 	"dinero.js": "^1.9.1",
 	"iframe-resizer": "^4.3.7",
 	imask: "^7.6.0",
+	lodash: "^4.17.21",
 	rxjs: "^7.8.1",
 	"ts-dedent": "^2.2.0",
 	uuid: "^9.0.0",