@justifi/webcomponents 4.22.0 → 4.22.1

package/dist/cjs/{Analytics-9db96975.js → Analytics-0d90fa0d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const _package = require('./package-41c8f38c.js');
+const _package = require('./package-596f102c.js');
 const config = require('./config-05767cba.js');
 const Api = require('./Api-f5280a80.js');
 

package/dist/cjs/{check-pkg-version-23a1cabd.js → check-pkg-version-fafb21ae.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const _package = require('./package-41c8f38c.js');
+const _package = require('./package-596f102c.js');
 
 const latestVersion = async (packageName) => {
     const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');

package/dist/cjs/checkouts-list-core.cjs.entry.js

@@ -7,49 +7,11 @@ require('./Checkout-a528241d.js');
 const Pagination = require('./Pagination-0da8f095.js');
 require('./Payment-04a842f4.js');
 require('./SubAccount-cc95a4a0.js');
-const utils$1 = require('./utils-f8a6962c.js');
+const utils = require('./utils-f8a6962c.js');
 const tableLoadingState = require('./table-loading-state-8b406852.js');
-const utils = require('./utils-3d84442d.js');
-const table = require('./table-bb114e2f.js');
-
-const MapCheckoutStatusToBadge = (status) => {
-    switch (status) {
-        case 'created':
-            return "<span class='badge bg-primary' title='The checkout has been created'>Created</span>";
-        case 'completed':
-            return "<span class='badge bg-success' title='The checkout has been completed'>Completed</span>";
-        case 'attempted':
-            return "<span class='badge bg-secondary' title='The checkout has been attempted'>Attempted</span>";
-        case 'expired':
-            return "<span class='badge bg-danger' title='The checkout has expired'>Expired</span>";
-    }
-};
-
-const defaultColumnsKeys = 'created_at,payment_amount,payment_description,payment_mode,status';
-const checkoutTableColumns = {
-    created_at: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The date each checkout occurred" }, "Processed On")),
-    payment_amount: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each checkout" }, "Payment Amount")),
-    payment_description: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The description of each checkout" }, "Payment Description")),
-    sub_account_name: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the checkout" }, "Sub Account")),
-    payment_mode: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The payment mode of each checkout" }, "Payment Mode")),
-    status: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The current status of each checkout" }, "Status")),
-};
-const checkoutTableCells = {
-    created_at: (value) => (index.h("th", null,
-        index.h("div", { class: "fw-bold" },
-            utils.formatDate(value),
-            " "),
-        index.h("div", { class: "fw-bold" },
-            utils.formatTime(value),
-            " "))),
-    payment_amount: (value) => (index.h("td", null,
-        utils.formatCurrency(value, true, true),
-        " ")),
-    payment_description: (value) => (index.h("td", null, value)),
-    sub_account_name: (value) => (index.h("td", null, value)),
-    payment_mode: (value) => (index.h("td", null, value)),
-    status: (value) => (index.h("td", { innerHTML: MapCheckoutStatusToBadge(value) })),
-};
+const checkoutsTable = require('./checkouts-table-24c065ff.js');
+const table = require('./table-20e9a053.js');
+require('./utils-3d84442d.js');
 
 const CheckoutsListCore = class {
     constructor(hostRef) {
@@ -74,7 +36,7 @@ const CheckoutsListCore = class {
         };
         this.setParamsOnChange = (name, value) => {
             let newParams = { [name]: value };
-            this.params = utils$1.onFilterChange(newParams, this.params);
+            this.params = utils.onFilterChange(newParams, this.params);
         };
         this.clearParams = () => {
             this.errorMessage = '';
@@ -82,9 +44,9 @@ const CheckoutsListCore = class {
         };
         this.getCheckouts = undefined;
         this.getSubAccounts = undefined;
-        this.columns = defaultColumnsKeys;
+        this.columns = undefined;
         this.checkouts = [];
-        this.checkoutsTable = new table.Table([], this.columns, checkoutTableColumns, checkoutTableCells);
+        this.checkoutsTable = undefined;
         this.subAccounts = [];
         this.loading = true;
         this.errorMessage = undefined;
@@ -95,6 +57,7 @@ const CheckoutsListCore = class {
         this.fetchCheckouts();
     }
     componentWillLoad() {
+        this.checkoutsTable = new table.Table(this.checkouts, this.columns, checkoutsTable.checkoutTableColumns, checkoutsTable.checkoutTableCells);
         if (this.getCheckouts && this.getSubAccounts) {
             this.fetchCheckouts();
         }
@@ -106,7 +69,7 @@ const CheckoutsListCore = class {
             onSuccess: async ({ checkouts, pagingInfo }) => {
                 this.checkouts = checkouts;
                 this.paging = pagingInfo;
-                this.checkoutsTable = new table.Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
+                this.checkoutsTable.collectionData = this.checkouts;
                 const shouldFetchSubAccounts = this.checkoutsTable.columnKeys.includes('sub_account_name');
                 if (shouldFetchSubAccounts) {
                     await this.fetchSubAccounts();
@@ -168,7 +131,7 @@ const CheckoutsListCore = class {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (index.h("div", { key: '2734f704620a60a5bedc46e3e41ab758af3fcb33' }, index.h("checkouts-list-filters", { key: '88ec654a9e15b976c47baee51ebed8c4bd8f11d7', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), index.h("div", { key: '929ce2e4dbee2b6aad94705b90b33527ef88f324', class: "table-wrapper" }, index.h("table", { key: '734d75f3f6d0189ce21560a89e9bc28628188798', class: "table table-hover" }, index.h("thead", { key: '6b1bba45aaa29b741cf3422902bf1d63cb89fe9a', class: "table-head sticky-top", part: "table-head" }, index.h("tr", { key: '54f3e19d0d8b1414e9c0df4a6b9cd59516eb0e2e', class: "table-light text-nowrap", part: "table-head-row" }, this.checkoutsTable.columnData.map((column) => column))), index.h("tbody", { key: '7454d36c6595e8341c0405833a919c56cd09fa3d', class: "table-body", part: "table-body" }, index.h(tableLoadingState.TableLoadingState, { key: 'b6fc81a9293727005f0a13afbf518e57efeb8469', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), index.h(tableLoadingState.TableEmptyState, { key: 'ce449e05b1c0643f8a2157f44f2f2af16ee08f8c', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), index.h(tableLoadingState.TableErrorState, { key: '89d0b6d1c4eb966fe0195cfe6e854a7cca10c7ed', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index$1) => (index.h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler, part: `table-row ${index$1 % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (index.h("tfoot", { key: 'ac6bb6d3cf02abc3f386a7d6bf92927f4a0ad244', class: "sticky-bottom" }, index.h("tr", { key: '352544ebda3e9a899fcb640b350fd60c55b97d17', class: "table-light align-middle" }, index.h("td", { key: '2dfc279e5e94bb1c0ea75670eb6584ff39a98f4a', part: "pagination-bar", colSpan: this.checkoutsTable.columnData.length }, index.h("pagination-menu", { key: 'a8ba0fd21c0dd9be75662b62db78980a74d5fbc6', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (index.h("div", { key: '8d2c1fd960b2b3a66f3a1bf648b75576ad2e8857' }, index.h("checkouts-list-filters", { key: '18ba9bf560499112f71a690da751c8e3c4d345a7', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), index.h("div", { key: '12cf6ee2912ac6a9518634ebd470dac5f7623aff', class: "table-wrapper" }, index.h("table", { key: '1ea2c118d7efb620dc1f39db55a510a8a473cb31', class: "table table-hover" }, index.h("thead", { key: '5e334a090be56c82b11ae7584bdf4014cc8743c7', class: "table-head sticky-top", part: "table-head" }, index.h("tr", { key: '233137a8b4e30bac28ded78010199bfecd0ac4e7', class: "table-light text-nowrap", part: "table-head-row" }, this.checkoutsTable.columnData.map((column) => column))), index.h("tbody", { key: 'd4ed9d4bf3ac17d4dc7294b875734e02996c7444', class: "table-body", part: "table-body" }, index.h(tableLoadingState.TableLoadingState, { key: 'a7afbb627c768139af4244da5c12fae493dceafb', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), index.h(tableLoadingState.TableEmptyState, { key: '802c43c8da770bca9a249a88d115901e9b14e102', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), index.h(tableLoadingState.TableErrorState, { key: 'f1cd197cf7d1d5d81868a5abfafa40df762ca3c8', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index$1) => (index.h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler, part: `table-row ${index$1 % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (index.h("tfoot", { key: 'f0c367854322c341515bc481159101e9659117c7', class: "sticky-bottom" }, index.h("tr", { key: '88bc665c23665eddc4c88d27acc8c8f1cb39e277', class: "table-light align-middle" }, index.h("td", { key: '8be265c9b43033cfd3e2c4b3f12ac6d6c104e53d', part: "pagination-bar", colSpan: this.checkoutsTable.columnData.length }, index.h("pagination-menu", { key: '6abdb6091b78e58ec71ac6bf66f278ed9b6542fb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get watchers() { return {
         "params": ["updateOnPropChange"],

package/dist/cjs/checkouts-table-24c065ff.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const index = require('./index-fb499e95.js');
+const utils = require('./utils-3d84442d.js');
+
+const MapCheckoutStatusToBadge = (status) => {
+    switch (status) {
+        case 'created':
+            return "<span class='badge bg-primary' title='The checkout has been created'>Created</span>";
+        case 'completed':
+            return "<span class='badge bg-success' title='The checkout has been completed'>Completed</span>";
+        case 'attempted':
+            return "<span class='badge bg-secondary' title='The checkout has been attempted'>Attempted</span>";
+        case 'expired':
+            return "<span class='badge bg-danger' title='The checkout has expired'>Expired</span>";
+    }
+};
+
+const defaultColumnsKeys = 'created_at,payment_amount,payment_description,payment_mode,status';
+const checkoutTableColumns = {
+    created_at: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The date each checkout occurred" }, "Processed On")),
+    payment_amount: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each checkout" }, "Payment Amount")),
+    payment_description: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The description of each checkout" }, "Payment Description")),
+    sub_account_name: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the checkout" }, "Sub Account")),
+    payment_mode: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The payment mode of each checkout" }, "Payment Mode")),
+    status: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The current status of each checkout" }, "Status")),
+};
+const checkoutTableCells = {
+    created_at: (value) => (index.h("th", null,
+        index.h("div", { class: "fw-bold" },
+            utils.formatDate(value),
+            " "),
+        index.h("div", { class: "fw-bold" },
+            utils.formatTime(value),
+            " "))),
+    payment_amount: (value) => (index.h("td", null,
+        utils.formatCurrency(value, true, true),
+        " ")),
+    payment_description: (value) => (index.h("td", null, value)),
+    sub_account_name: (value) => (index.h("td", null, value)),
+    payment_mode: (value) => (index.h("td", null, value)),
+    status: (value) => (index.h("td", { innerHTML: MapCheckoutStatusToBadge(value) })),
+};
+
+exports.checkoutTableCells = checkoutTableCells;
+exports.checkoutTableColumns = checkoutTableColumns;
+exports.defaultColumnsKeys = defaultColumnsKeys;

package/dist/cjs/justifi-bank-account-form.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fb499e95.js');
 const config = require('./config-05767cba.js');
-const Analytics = require('./Analytics-9db96975.js');
-require('./package-41c8f38c.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+require('./package-596f102c.js');
 require('./Api-f5280a80.js');
 
 const BankAccountForm = class {

package/dist/cjs/justifi-billing-form_2.cjs.entry.js

@@ -8,7 +8,7 @@ const schemaValidations = require('./schema-validations-184a4356.js');
 const stateOptions = require('./state-options-4fbcb48a.js');
 const utils = require('./utils-bc03ca40.js');
 const styledHost = require('./styled-host-1adf46c3.js');
-const _package = require('./package-41c8f38c.js');
+const _package = require('./package-596f102c.js');
 const utils$1 = require('./utils-3d84442d.js');
 require('./business-form-options-5db0bd5e.js');
 require('./Business-aa799fec.js');

package/dist/cjs/justifi-business-details.cjs.entry.js

@@ -8,13 +8,13 @@ const business_service = require('./business.service-7faffa0b.js');
 const Business = require('./Business-aa799fec.js');
 const ComponentError = require('./ComponentError-233ac749.js');
 const utils = require('./utils-7a478c37.js');
-const Analytics = require('./Analytics-9db96975.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
 require('./config-05767cba.js');
 require('./Api-f5280a80.js');
 require('./helpers-602962eb.js');
 require('./state-options-4fbcb48a.js');
-require('./package-41c8f38c.js');
+require('./package-596f102c.js');
 
 const makeGetBusiness = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
     var _a;

package/dist/cjs/justifi-business-form.cjs.entry.js

@@ -14,14 +14,14 @@ require('./SubAccount-cc95a4a0.js');
 const config = require('./config-05767cba.js');
 const businessFormTypes = require('./business-form-types-719b7f52.js');
 const Business = require('./Business-aa799fec.js');
-const Analytics = require('./Analytics-9db96975.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
 const styledHost = require('./styled-host-1adf46c3.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
 require('./schema-validations-184a4356.js');
 require('./state-options-4fbcb48a.js');
 require('./business-form-options-5db0bd5e.js');
 require('./helpers-602962eb.js');
-require('./package-41c8f38c.js');
+require('./package-596f102c.js');
 
 const businessFormSchema = index_esm.create$3(Object.assign(Object.assign({}, businessAdditionalQuestionsSchema.businessCoreInfoSchema().fields), { legal_address: businessIdentitySchema.addressSchema(), additional_questions: businessAdditionalQuestionsSchema.additionalQuestionsSchema(), representative: businessIdentitySchema.identitySchema('representative') }));
 

package/dist/cjs/justifi-card-form.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fb499e95.js');
 const config = require('./config-05767cba.js');
-const Analytics = require('./Analytics-9db96975.js');
-require('./package-41c8f38c.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+require('./package-596f102c.js');
 require('./Api-f5280a80.js');
 
 const CardForm = class {

package/dist/cjs/justifi-checkout.cjs.entry.js

@@ -6,15 +6,15 @@ const index = require('./index-fb499e95.js');
 const ComponentError = require('./ComponentError-233ac749.js');
 const utils = require('./utils-7a478c37.js');
 const checkout_service = require('./checkout.service-160f3a9c.js');
-const Analytics = require('./Analytics-9db96975.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
 require('./config-05767cba.js');
 require('./Api-f5280a80.js');
 require('./Checkout-a528241d.js');
 require('./Pagination-0da8f095.js');
 require('./Payment-04a842f4.js');
 require('./SubAccount-cc95a4a0.js');
-require('./package-41c8f38c.js');
+require('./package-596f102c.js');
 
 const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
     var _a;

package/dist/cjs/justifi-checkouts-list.cjs.entry.js

@@ -9,15 +9,17 @@ require('./Payment-04a842f4.js');
 require('./SubAccount-cc95a4a0.js');
 const ComponentError = require('./ComponentError-233ac749.js');
 const utils = require('./utils-7a478c37.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
 const config = require('./config-05767cba.js');
-const Analytics = require('./Analytics-9db96975.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
 const checkout_service = require('./checkout.service-160f3a9c.js');
 const getSubaccounts = require('./get-subaccounts-8f7a930f.js');
 const styledHost = require('./styled-host-1adf46c3.js');
 const exportedParts = require('./exported-parts-a994d693.js');
-require('./package-41c8f38c.js');
+const checkoutsTable = require('./checkouts-table-24c065ff.js');
+require('./package-596f102c.js');
 require('./Api-f5280a80.js');
+require('./utils-3d84442d.js');
 
 const makeGetCheckouts = ({ accountId, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
@@ -62,7 +64,7 @@ const CheckoutsList = class {
         this.accountId = undefined;
         this.authToken = undefined;
         this.apiOrigin = config.config.proxyApiOrigin;
-        this.columns = undefined;
+        this.columns = checkoutsTable.defaultColumnsKeys;
     }
     componentWillLoad() {
         checkPkgVersion.checkPkgVersion();
@@ -108,7 +110,7 @@ const CheckoutsList = class {
         }
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '42ff5c1cff57b185200aa0c31f4fdb44b3401c91', exportparts: exportedParts.tableExportedParts }, index.h("checkouts-list-core", { key: '55565a5f61c671bae9554c7d9ecab044c7bb987c', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (index.h(styledHost.StyledHost, { key: '6e6faed5df0fcdc48018650867672c5d325d1934', exportparts: exportedParts.tableExportedParts }, index.h("checkouts-list-core", { key: '92ceb10f7bd76864629ed0990a7f34fab76ce517', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/cjs/justifi-gross-payment-chart.cjs.entry.js

@@ -8,9 +8,9 @@ const Api = require('./Api-f5280a80.js');
 const ComponentError = require('./ComponentError-233ac749.js');
 const utils = require('./utils-7a478c37.js');
 const utils$1 = require('./utils-189dc30d.js');
-const Analytics = require('./Analytics-9db96975.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
-require('./package-41c8f38c.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
+require('./package-596f102c.js');
 
 class ReportsService {
     async fetchGrossVolumeChartData(accountId, authToken) {

package/dist/cjs/justifi-payment-details.cjs.entry.js

@@ -11,11 +11,11 @@ require('./SubAccount-cc95a4a0.js');
 const ComponentError = require('./ComponentError-233ac749.js');
 const utils = require('./utils-7a478c37.js');
 const utils$1 = require('./utils-189dc30d.js');
-const Analytics = require('./Analytics-9db96975.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
 require('./Api-f5280a80.js');
 require('./config-05767cba.js');
-require('./package-41c8f38c.js');
+require('./package-596f102c.js');
 
 const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
     var _a;

package/dist/cjs/justifi-payment-form.cjs.entry.js

@@ -11,11 +11,11 @@ const utils = require('./utils-3d84442d.js');
 const config = require('./config-05767cba.js');
 const ComponentError = require('./ComponentError-233ac749.js');
 const utils$1 = require('./utils-7a478c37.js');
-const Analytics = require('./Analytics-9db96975.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
 const button = require('./button-3f400a66.js');
 const styledHost = require('./styled-host-1adf46c3.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
-require('./package-41c8f38c.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
+require('./package-596f102c.js');
 require('./Api-f5280a80.js');
 
 const paymentFormCss = ":host{display:block}justifi-payment-method-form{display:block;margin-left:calc(var(--jfi-layout-padding) * -1);margin-right:calc(var(--jfi-layout-padding) * -1)}*::part(label){color:var(--jfi-form-label-color);font-family:var(--jfi-form-label-font-family);font-weight:var(--jfi-form-label-font-weight);font-size:var(--jfi-form-label-font-size);margin:var(--jfi-form-label-margin)}*::part(input){font-family:var(--jfi-layout-font-family);background-color:var(--jfi-form-control-background-color);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-radius:var(--jfi-form-control-border-radius);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);font-size:var(--jfi-form-control-font-size);font-weight:var(--jfi-form-control-font-weight);line-height:var(--jfi-form-control-line-height);margin:var(--jfi-form-control-margin);padding:var(--jfi-form-control-padding)}*::part(input):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}.jfi-submit-button{font-family:var(--jfi-layout-font-family);color:var(--jfi-submit-button-color);background-color:var(--jfi-submit-button-background-color);border-color:var(--jfi-submit-button-border-color);padding:var(--jfi-submit-button-padding);font-size:var(--jfi-submit-button-font-size);border-radius:var(--jfi-submit-button-border-radius);width:var(--jfi-submit-button-width);box-shadow:var(--jfi-submit-button-box-shadow)}.jfi-submit-button:hover{color:var(--jfi-submit-button-color-hover);background-color:var(--jfi-submit-button-background-color-hover);border-color:var(--jfi-submit-button-border-color-hover)}.jfi-submit-button:focus{color:var(--jfi-submit-button-color-focus);background-color:var(--jfi-submit-button-background-color-focus);border-color:var(--jfi-submit-button-border-color-focus)}.btn.jfi-submit-button:active{color:var(--jfi-submit-button-color-active);background-color:var(--jfi-submit-button-background-color-active);border-color:var(--jfi-submit-button-border-color-active)}.btn.jfi-submit-button-loading{min-width:75px;color:var(--jfi-submit-button-color-loading);background-color:var(--jfi-submit-button-background-color-loading);border-color:var(--jfi-submit-button-border-color-loading)}.btn.jfi-submit-button-loading .spinner-border{border-top-color:var(--jfi-submit-button-color-loading);border-bottom-color:var(--jfi-submit-button-color-loading);border-left-color:var(--jfi-submit-button-color-loading)}";

package/dist/cjs/justifi-payment-provisioning.cjs.entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fb499e95.js');
-const Analytics = require('./Analytics-9db96975.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
 const ComponentError = require('./ComponentError-233ac749.js');
 const paymentProvisioningActions = require('./payment-provisioning-actions-06466dda.js');
 const business_service = require('./business.service-7faffa0b.js');
 const config = require('./config-05767cba.js');
 const Api = require('./Api-f5280a80.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
-require('./package-41c8f38c.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
+require('./package-596f102c.js');
 require('./utils-7a478c37.js');
 
 class ProvisionService {

package/dist/cjs/justifi-payments-list.cjs.entry.js

@@ -10,13 +10,13 @@ const Payment = require('./Payment-04a842f4.js');
 require('./SubAccount-cc95a4a0.js');
 const ComponentError = require('./ComponentError-233ac749.js');
 const utils = require('./utils-7a478c37.js');
-const Analytics = require('./Analytics-9db96975.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
 const config = require('./config-05767cba.js');
 const styledHost = require('./styled-host-1adf46c3.js');
 const exportedParts = require('./exported-parts-a994d693.js');
 require('./Api-f5280a80.js');
-require('./package-41c8f38c.js');
+require('./package-596f102c.js');
 
 const makeGetPayments = ({ id, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;

package/dist/cjs/justifi-payout-details.cjs.entry.js

@@ -11,11 +11,11 @@ const SubAccount = require('./SubAccount-cc95a4a0.js');
 const ComponentError = require('./ComponentError-233ac749.js');
 const utils = require('./utils-7a478c37.js');
 const utils$1 = require('./utils-189dc30d.js');
-const Analytics = require('./Analytics-9db96975.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
 require('./Api-f5280a80.js');
 require('./config-05767cba.js');
-require('./package-41c8f38c.js');
+require('./package-596f102c.js');
 
 const makeGetPayoutDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
     var _a;

package/dist/cjs/justifi-payouts-list.cjs.entry.js

@@ -11,12 +11,12 @@ require('./Payment-04a842f4.js');
 const SubAccount = require('./SubAccount-cc95a4a0.js');
 const ComponentError = require('./ComponentError-233ac749.js');
 const utils = require('./utils-7a478c37.js');
-const Analytics = require('./Analytics-9db96975.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
 const styledHost = require('./styled-host-1adf46c3.js');
 require('./Api-f5280a80.js');
 require('./config-05767cba.js');
-require('./package-41c8f38c.js');
+require('./package-596f102c.js');
 
 const makeGetPayouts = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;

package/dist/cjs/justifi-season-interruption-insurance.cjs.entry.js

@@ -11,9 +11,9 @@ require('./SubAccount-cc95a4a0.js');
 const config = require('./config-05767cba.js');
 const utils = require('./utils-7a478c37.js');
 const ComponentError = require('./ComponentError-233ac749.js');
-const Analytics = require('./Analytics-9db96975.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
-require('./package-41c8f38c.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
+require('./package-596f102c.js');
 
 class InsuranceService {
     async fetchQuote(authToken, payload) {

package/dist/cjs/justifi-terminals-list.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fb499e95.js');
 const ComponentError = require('./ComponentError-233ac749.js');
-const Analytics = require('./Analytics-9db96975.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
 const config = require('./config-05767cba.js');
 const Api = require('./Api-f5280a80.js');
 require('./Checkout-a528241d.js');
@@ -16,7 +16,8 @@ const utils = require('./utils-7a478c37.js');
 const getSubaccounts = require('./get-subaccounts-8f7a930f.js');
 const styledHost = require('./styled-host-1adf46c3.js');
 const exportedParts = require('./exported-parts-a994d693.js');
-require('./package-41c8f38c.js');
+const terminalsTable = require('./terminals-table-99a7b87b.js');
+require('./package-596f102c.js');
 
 class TerminalService {
     async fetchTerminals(accountId, authToken, params, apiOrigin) {
@@ -80,7 +81,7 @@ const TerminalsList = class {
         this.accountId = undefined;
         this.authToken = undefined;
         this.apiOrigin = config.config.proxyApiOrigin;
-        this.columns = undefined;
+        this.columns = terminalsTable.defaultColumnsKeys;
     }
     componentWillLoad() {
         checkPkgVersion.checkPkgVersion();
@@ -126,7 +127,7 @@ const TerminalsList = class {
         }
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: 'b150133d9e787d0a4f32d92d9fb26df50391e632', exportparts: exportedParts.tableExportedParts }, index.h("terminals-list-core", { key: '59302d93d0a308c34aacabf7e5a006099eaff2d6', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (index.h(styledHost.StyledHost, { key: '8ffe95f21b5ef8c1c15fc0e22a9c824cff758ee6', exportparts: exportedParts.tableExportedParts }, index.h("terminals-list-core", { key: 'a550f1f85b84f6cc06bd93b5e5a9ec726b72b46c', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/cjs/justifi-tokenize-payment-method.cjs.entry.js

@@ -6,9 +6,9 @@ const index = require('./index-fb499e95.js');
 const button = require('./button-3f400a66.js');
 const styledHost = require('./styled-host-1adf46c3.js');
 const ComponentError = require('./ComponentError-233ac749.js');
-const checkPkgVersion = require('./check-pkg-version-23a1cabd.js');
-const Analytics = require('./Analytics-9db96975.js');
-require('./package-41c8f38c.js');
+const checkPkgVersion = require('./check-pkg-version-fafb21ae.js');
+const Analytics = require('./Analytics-0d90fa0d.js');
+require('./package-596f102c.js');
 require('./config-05767cba.js');
 require('./Api-f5280a80.js');
 

package/dist/cjs/{package-41c8f38c.js → package-596f102c.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "@justifi/webcomponents";
-const version = "4.22.0";
+const version = "4.22.1";
 const description = "JustiFi Web Components";
 const collection = "dist/collection/collection-manifest.json";
 const main = "dist/index.cjs.js";

package/dist/cjs/{table-bb114e2f.js → table-20e9a053.js}

@@ -9,6 +9,9 @@ class Table {
             return this.columnKeys.map((key) => this.tableCells[key](checkout[key]));
         });
     }
+    set collectionData(collection) {
+        this.collection = collection;
+    }
     constructor(collection, columns, tableColumns, tableCells) {
         this.columnKeys = columns.split(',');
         this.collection = collection;

package/dist/cjs/terminals-list-core.cjs.entry.js

@@ -9,32 +9,8 @@ require('./Payment-04a842f4.js');
 require('./SubAccount-cc95a4a0.js');
 const tableLoadingState = require('./table-loading-state-8b406852.js');
 const utils = require('./utils-f8a6962c.js');
-const table = require('./table-bb114e2f.js');
-
-const MapTerminalStatusToBadge = (status) => {
-    switch (status) {
-        case 'connected':
-            return "<span class='badge bg-success' title='This terminal is connected.'>Connected</span>";
-        case 'disconnected':
-            return "<span class='badge bg-danger' title='This terminal is disconnected.'>Disconnected</span>";
-        case 'unknown':
-            return "<span class='badge bg-secondary' title='The status of this terminal is unknown'>Unknown</span>";
-    }
-};
-
-const defaultColumnsKeys = 'nickname,provider_id,status';
-const terminalTableColumns = {
-    nickname: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
-    provider_id: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
-    sub_account_name: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
-    status: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The current status of each terminal" }, "Status")),
-};
-const terminalTableCells = {
-    nickname: (value) => (index.h("td", null, value)),
-    provider_id: (value) => (index.h("td", null, value)),
-    sub_account_name: (value) => (index.h("td", null, value)),
-    status: (value) => (index.h("td", { innerHTML: MapTerminalStatusToBadge(value) })),
-};
+const terminalsTable = require('./terminals-table-99a7b87b.js');
+const table = require('./table-20e9a053.js');
 
 const TerminalsListCore = class {
     constructor(hostRef) {
@@ -67,9 +43,9 @@ const TerminalsListCore = class {
         };
         this.getTerminals = undefined;
         this.getSubAccounts = undefined;
-        this.columns = defaultColumnsKeys;
+        this.columns = undefined;
         this.terminals = [];
-        this.terminalsTable = new table.Table([], this.columns, terminalTableColumns, terminalTableCells);
+        this.terminalsTable = undefined;
         this.subAccounts = [];
         this.loading = true;
         this.errorMessage = undefined;
@@ -80,6 +56,7 @@ const TerminalsListCore = class {
         this.fetchTerminals();
     }
     componentWillLoad() {
+        this.terminalsTable = new table.Table(this.terminals, this.columns, terminalsTable.terminalTableColumns, terminalsTable.terminalTableCells);
         if (this.getTerminals && this.getSubAccounts) {
             this.fetchTerminals();
         }
@@ -91,7 +68,7 @@ const TerminalsListCore = class {
             onSuccess: async ({ terminals, pagingInfo }) => {
                 this.terminals = terminals;
                 this.paging = pagingInfo;
-                this.terminalsTable = new table.Table(this.terminals, this.columns, terminalTableColumns, terminalTableCells);
+                this.terminalsTable.collectionData = this.terminals;
                 const shouldFetchSubAccounts = this.terminalsTable.columnKeys.includes('sub_account_name');
                 if (shouldFetchSubAccounts) {
                     await this.fetchSubAccounts();
@@ -153,7 +130,7 @@ const TerminalsListCore = class {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (index.h("div", { key: 'd6bd09387fc558286f09cc98e7b5423a57410440' }, index.h("terminals-list-filters", { key: '27f3b5ca45bad96695364e96f0c047db8465f061', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), index.h("div", { key: '693ef5e9383ad2d4433a79872d51a922f1bb0cbb', class: "table-wrapper" }, index.h("table", { key: 'd6779ca5094593e21ddee4f0b236b0fa94c7cfe5', class: "table table-hover" }, index.h("thead", { key: '5b7524c86b32d61d2b087c9ace5673276a6525e2', class: "table-head sticky-top", part: "table-head" }, index.h("tr", { key: '6f3f3f560f5eaa38a700aacf850c01ce7224c617', class: "table-light text-nowrap", part: "table-head-row" }, this.terminalsTable.columnData.map((column) => column))), index.h("tbody", { key: 'd65612fc80a216dbbce686e1e5cdd06bc7c934ad', class: "table-body", part: "table-body" }, index.h(tableLoadingState.TableLoadingState, { key: '9ffbafb5105380d685e9cad76b627afe96c8e724', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), index.h(tableLoadingState.TableEmptyState, { key: '692c6cb35da2c9057bbac4e5d8e7536017ef1694', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), index.h(tableLoadingState.TableErrorState, { key: '5072ca0cb9f9ca3d77fc394c935cc1ae473b8864', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index$1) => (index.h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler, part: `table-row ${index$1 % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (index.h("tfoot", { key: 'b043af164be76a5bdbaf53e5a0563f48049925b0', class: "sticky-bottom" }, index.h("tr", { key: '2fed67d847e113c371213643c07a79208701c1e5', class: "table-light align-middle" }, index.h("td", { key: 'b3fac5af2d92a8ea93daefd24310ed5b45d32764', part: "pagination-bar", colSpan: this.terminalsTable.columnData.length }, index.h("pagination-menu", { key: '4e5a82670a7aa1fee01b71fbc20b65824300a07f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (index.h("div", { key: '7f8bc3f39c1250281c2f2ad6fe081fc71bb20e79' }, index.h("terminals-list-filters", { key: 'd1184427fc74d970bd69d56a00d0ef4b7672516b', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), index.h("div", { key: '582e37429a153cd17bf3c7ebb16e7330c774f986', class: "table-wrapper" }, index.h("table", { key: '1c03b2ddc8ca2da6b1f2147113f7832b3f27ec1d', class: "table table-hover" }, index.h("thead", { key: '811d48219cc04256f4a37854504252ff53392bd9', class: "table-head sticky-top", part: "table-head" }, index.h("tr", { key: 'fafa54ac3abba993dcf38ca2e47f248031226041', class: "table-light text-nowrap", part: "table-head-row" }, this.terminalsTable.columnData.map((column) => column))), index.h("tbody", { key: '8c9072bf6ebb7f720f1fad0faa47c72c8ed84dd2', class: "table-body", part: "table-body" }, index.h(tableLoadingState.TableLoadingState, { key: 'abddb3ce09e39245c0455893f09e54cc631b26bf', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), index.h(tableLoadingState.TableEmptyState, { key: '166a461ee8aaf7405fc0a2b12cd17e1e1e9553f3', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), index.h(tableLoadingState.TableErrorState, { key: '969bbfcce66b6bcee4dadabe465eaef37022d13b', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index$1) => (index.h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler, part: `table-row ${index$1 % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (index.h("tfoot", { key: 'c63268c11facddaa44452c58743ad9c03f492898', class: "sticky-bottom" }, index.h("tr", { key: '0e247f8968ad4ed7e8c001354b1c29d5bf7976aa', class: "table-light align-middle" }, index.h("td", { key: '51c5157453d911f5bf370ba2ac6a556dd1592f24', part: "pagination-bar", colSpan: this.terminalsTable.columnData.length }, index.h("pagination-menu", { key: '3a3ba65f31099125e9c01bc9c8c001c6437ed720', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get watchers() { return {
         "params": ["updateOnPropChange"],