@justifi/webcomponents 6.7.2 → 6.8.0

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

@@ -64,9 +64,9 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'bce8893748b454d55c8d2651f0decaf24f9d23f0' }, this.loading && h(PayoutDetailsLoading, { key: '6779860e9708f71da7466911a23e4b6bae082f33' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'bc148d8ac046381a625f1ca46061f2d1038cd962', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '08a12c76478d3c877b27cbc778e8d8946bfd4f61', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'eed2fc60701ee7a63316fc107071ce1b0f8a7887', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '47256f8c5220bd891e015b66deeeada1d8686896', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '55768b182ed868f01ecc13a17760ba3e50be406c', title: "ID", value: this.payout.id }), h("div", { key: '3a3eb255b1dc769c48123b0290d2e326beb05486', class: "m-4" }, h(Button, { key: 'ad8109745fb5266e908ce46b7997880679eef419', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'dd04956b57d3fc8f8a2ab04e3773cedbdc609e7e', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'ad19ec1078837f472f09adafc6de1bb285774a57', sectionTitle: "Details" }), h("div", { key: '2abbe66f3c1fb693d108e625b224d2abd2c79856', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: 'bedfc199018c36d5f5e2bc397be7145486e88b06', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '0abebcb95d22281fd711e282e91e0a946a8aa9d9', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'a65008e3edc341a951e68335d6302258cb0423c0', title: "Payout Method", value: this.formatMethod(this.payout.delivery_method) }), h(DetailItem, { key: '62284db58bb08fa8ec78380d226c551c1c40aa5c', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '657392699e94a0ca8a7f114c0b94bb7fe2a863fd', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'dd553173a96aa066585c42e274b5397ce32f12c8', sectionTitle: "Account" }), h("div", { key: 'a078180c0e26466aa95b7e627b3f0ae0157f88fd', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '8fc8379e47bea1c18e39ec526587eebc11a63233', title: "ID", value: this.payout.account_id, onClick: this.enableRecordClick ? () => this.handleRecordClick(this.payout.account_id) : undefined }), h(DetailItem, { key: '9caec1c44313a19192a025968ff2055e9871cd2c', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f3e0eec504eff9831aea0258d136224c5331b77e', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'd9f4e1cf8ceec76af0992e4774d098120af1ecd7', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '5cab1bcc2be4c60412ef3f7263ac700a4b0a127b', title: "Account Number", value: `**** ${this.payout.bank_account.account_number_last4}` })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: 'ad8a029e6f19bb586b6f124160bc565a07ef7515', sectionTitle: 'Metadata' }),
-            h("div", { key: '2ad3cb860977116929da7b475787c90e0202e7ad', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'ceab82b2cab61a721af79a62b7e4fe0f6c2035e6', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: '7a7191c999fb793ad3afdd44710438f6c80ab48c' }, this.loading && h(PayoutDetailsLoading, { key: '4197820f0b0280a2018aaf686e4a5e12fa4ab81e' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '43386641b5113e274e2f9fd803711e0db58712bb', errorMessage: this.errorMessage }, h(EntityHeadInfo, { key: '5b2d5bf456105e4fe28d13caa31d44032ffd884c', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'd2603ef693702274d127b3dca97628581805fa1b', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cee7afc04d1b2e8a618e659da5c021d1a6ad2fdd', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '65d1d3048b6e6e98e257cd4c3f459605ae4a5f68', title: "ID", value: this.payout.id }), h("div", { key: '90541e64b6c783152dd1588f541515e745e5af4e', class: "m-4" }, h(Button, { key: 'db9385003966ad389b5369114828c26a50a4b91c', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '69dc3456c3899ec06011559bc94196f2e0eb57a8', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '3f791e25a054482ae9185a1b1c82c842e863602b', sectionTitle: "Details" }), h("div", { key: '3f19d1040a6d19fdbacc506d1417d02bdb5a1620', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: 'e31c16a5f89bea5df800b420cafcb243c851bbe2', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'f49cc91db6d80d830e75cb71f103af7d979629de', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '992df68f14fdeb4bc6944fb72d557fc8af6d6e6e', title: "Payout Method", value: this.formatMethod(this.payout.delivery_method) }), h(DetailItem, { key: '8c5a9fde79b9e7fd2956d4645affd43e9d895ad9', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '97da8d2a9fb16ecd45afc3b4d576e5ae0fcc8413', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '67f7192019b347c0aa8a74ff7ab748dbd5f3aec8', sectionTitle: "Account" }), h("div", { key: 'af8a5d77cca9e9e3c8ac75eb215a7fde9ea8a963', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '36c30de2523d36233bda5276683472d2729cd93c', title: "ID", value: this.payout.account_id, onClick: this.enableRecordClick ? () => this.handleRecordClick(this.payout.account_id) : undefined }), h(DetailItem, { key: '3004ac18c5946efcda4959d1e2ca396c102c95ba', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '846ed7737a61eff783024906e91d004b32ac99b2', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '16e4c9b098db8c86e8612aba9d0316e691a187a1', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '55164cdc8fc1ddbcbd10f706979e8b2e6e9bcbcf', title: "Account Number", value: `**** ${this.payout.bank_account.account_number_last4}` })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: 'c38ba6b9b270d60bfc681f84a87bdcfffbde5b9c', sectionTitle: 'Metadata' }),
+            h("div", { key: '301869facf7d4596ed08d40906f0720123f42644', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'e404d80ff5b40de0de2ca086b9e381b70d9f821b', metadata: this.payout.metadata }))
         ])))));
     }
     static get is() { return "payout-details-core"; }
@@ -85,7 +85,7 @@ export class PayoutDetailsCore {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -107,7 +107,7 @@ export class PayoutDetailsCore {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/payout-details/payout-details.js

@@ -67,7 +67,7 @@ export class PayoutDetails {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -86,7 +86,7 @@ export class PayoutDetails {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/payout-transactions-list/payout-transactions-list.js

@@ -95,7 +95,7 @@ export class PayoutTransactionsList {
         return Object.assign({ payout_id: this.payoutId, limit: '15' }, this.pagingParams);
     }
     render() {
-        return (h(StyledHost, { key: '8c59c0783d3d77d1e4101ee52cf1df932f35c436' }, h(TableWrapper, { key: 'c1c05be0dc6e1aff5874777f57c961e65d484463' }, h(TableComponent, { key: '3ac2ed7f128d96443ba47a33628012c380ee3cc8' }, h(TableHead, { key: '01ad306c5c2336ef70b6de8df8afe11e4aaea853' }, h(TableHeadRow, { key: 'e7df4606ff90f549c6909ce62869be064cf65e44' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '01e49a1b4a04028c133079aee90a1ab75c69debf' }, h(TableLoadingState, { key: '73ff57f00ad0b36bc20ce25c191f2a59b9412984', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '43deaa2102856c17bdc990847e4246b5cba33aa4', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: 'c0096e0dd83a313e54df516a4959172edb2bf9a2', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '0c337d21c169b74123afe93432bb70059d7c20f4' }, h(TableFootRow, { key: '736325de92a1462dea67950c2a15a54906894bab' }, h(TableFootCell, { key: 'd71681536976869a146417945d461da154d7364b', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '2f3d4d05a5522c0ac4314ee15f5083bc919e0164', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '0a993aa9157e9ea6f75a4c745dd2751ab22d0623' }, h(TableWrapper, { key: '56a300b72bb39bf9aa4d9829f1634e5a48b71b15' }, h(TableComponent, { key: '7d3f9fc3159ea7568bd2904ed74a5d90198eecb7' }, h(TableHead, { key: '106703b0ed82206aca0b18a1217fbdad9316cca0' }, h(TableHeadRow, { key: '3d01490dc673358566747dd3aac4c61d1f8681f9' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: 'a1bf3cc192ef3434ff4626390f33361a984e276f' }, h(TableLoadingState, { key: 'edaf059907492b9911bfe11f6ae476711db7200f', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'b75807ecc951d0e62993b905246c3e58d676bb7c', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '7d759684cb4f42733028e734479ba2000495dcee', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'a657e7edf27d011926e2228b7a55ba6fb05f9dff' }, h(TableFootRow, { key: 'c1c592833f527432b53d42cca3a70637065b1918' }, h(TableFootCell, { key: 'b4dba89aa35e7632a9442ad3e804cdd3946377f7', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '935a7f48b344774fb6058de565a135ae70deb80e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-payout-transactions-list"; }
     static get encapsulation() { return "shadow"; }
@@ -109,7 +109,7 @@ export class PayoutTransactionsList {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -128,7 +128,7 @@ export class PayoutTransactionsList {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/payouts-list/payouts-list-core.js

@@ -135,7 +135,7 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '6a34e51911f4d507268a59e15a34f9c5d935989e' }, h(TableComponent, { key: '3936b7e479f3d7a2f8fadbc7db2a36124141044c' }, h(TableHead, { key: 'c537d591e4c03a7c5f5afa4bde930eb67093809e' }, h(TableHeadRow, { key: 'e3b2ea0a122d22893e657ebb13c198f6d1c7b47b' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '3491e95b3c95e010635949ba07c5602eb7ae7d6c' }, h(TableLoadingState, { key: '87bf5cfb79b9546f0b70c3f681671c8baccf1253', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '587ab70585ce504cb63d27652707fa1d28ec5ec1', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '26cb66316044265b486390ae1d05a253f90911e1', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '5120d2473b31550907e1bdc0b4fff3084c8d3aed' }, h(TableFootRow, { key: '81a989720c8eb9439a959c7100956f33487cbeee' }, h(TableFootCell, { key: 'b3357b46b1f11e75b4c73c6de6d5c121b1c6710b', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '73d8bedbb95826a43746b9ab08322c28e40a7f5d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '106115f5b509ac388b3c9fcafd5e0134d24eabc1' }, h(TableComponent, { key: '4d193726de80df14bb301afd62bfac3d89f8f731' }, h(TableHead, { key: 'a4d8c4999914cd32ad0489da5bc1ff4df86d244f' }, h(TableHeadRow, { key: '4a04850c9c4cdd51e982fd42f1e52c8a7df73b3b' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'f28c5a7025eb3b46d90533de90fd2bc1cfe579cc' }, h(TableLoadingState, { key: '35aa368d7767266d4e510dfb834c505702e3c2cc', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '291cf0d9ab6027f80399eb1ef7febe5dfdabb83a', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'b474ebbd3e107ceb206071ab86bcb13abc0cc93b', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '10c5bd014ea446529d6e0a0a4fd7b6afd755a7b6' }, h(TableFootRow, { key: '067c3b4eb307ce47f95435e7c1a3f8c767311be8' }, h(TableFootCell, { key: '1afeba1dabdb38698372ca4d1ec6e0b4acad5429', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'fb8d3b9b964a702ea9fc6185bcf9c4f6916b497e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {
@@ -153,7 +153,7 @@ export class PayoutsListCore {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -175,7 +175,7 @@ export class PayoutsListCore {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -197,7 +197,7 @@ export class PayoutsListCore {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -214,7 +214,7 @@ export class PayoutsListCore {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/payouts-list/payouts-list-filters.js

@@ -26,8 +26,8 @@ export class PayoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '7f37e9cde5eab98ae5e0ebda4fda8ac005791582' }, h("table-filters-menu", { key: '001f50ef209ca65ae239bec69fec1ed1be2d1536', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: '21b4b97154ff4db17147ae8978477581920735dc', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '743396fc70115e61e0e77f76adc67a31a2a2cbc8', class: "p-2" }, h("form-control-date", { key: '24f18be15d2b566c2807abfe8b4eb2800318c51a', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: '89bb4799afb2d1be13989cf63448a799bf547201', class: "p-2" }, h("form-control-date", { key: '04d707521a42f397839a5159b0211a4569f5bd80', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
+        return (h(StyledHost, { key: '4058d69f87431a4060160bc14912998ea14670dc' }, h("table-filters-menu", { key: '406371a2c3c552e6973da18b0e59a022a7c1ac99', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: '3d77e00351223fc512062193a19ab874a3c8799e', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '8be6000e3aa3de82e73ebb0133131c2f836def64', class: "p-2" }, h("form-control-date", { key: 'e6c5c50c8a5890573159c6de1955f33762f183b8', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: '14c666a50387a2f58ea7a4871ef846eadf044e3a', class: "p-2" }, h("form-control-date", { key: 'ee56b0ca27c7d8f8562b23862d5aaebb3d4b3188', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDate: true }), disabled: !!this.createdBefore, part: createdBeforePayoutsListFilterParam }))))));
     }
     static get is() { return "justifi-payouts-list-filters"; }

package/dist/collection/components/payouts-list/payouts-list.js

@@ -64,7 +64,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '767b8a3f2407435d86766c1ea947f406246a001d' }, h("payouts-list-core", { key: '4e579cf8e2049033bc554319178b42511b164573', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '6a09a5c6f984ef09efd981f4417f097b88b71c14' }, h("payouts-list-core", { key: 'be9428e2616abddc62d0c3a1fb1202e399eead26', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -78,7 +78,7 @@ export class PayoutsList {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -97,7 +97,7 @@ export class PayoutsList {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/refund-payment/refund-payment.js

@@ -188,7 +188,7 @@ export class RefundPayment {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -207,7 +207,7 @@ export class RefundPayment {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -226,7 +226,7 @@ export class RefundPayment {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/terminal-orders-list/terminal-orders-list-core.js

@@ -81,7 +81,7 @@ export class TerminalOrdersListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'f4b0c2f36eae458a64d22414c1dd186324997710' }, h(TableComponent, { key: 'df2e3ca2bd333e6d1d8a9ebdc5a6ebd6ff1e39bf' }, h(TableHead, { key: '53dad354d406dc32acbef9a91998d39d011e3e49' }, h(TableHeadRow, { key: 'efd2ed2cac91229e49dd94a918d84adaece80795' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: '6d03c18481a802a6e95147a0d1e18fb0d7f88f51' }, h(TableLoadingState, { key: 'a07b5fe8086d006ba9b30eb1132699b327feee5f', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '62eea598812372209f82bdfb062eb84e089bb8cb', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '4ba4c76d959932caa38a42b3add0cfe36049a067', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'ba3336a12b83890e5b044f73f512c6340cdc75ce' }, h(TableFootRow, { key: 'e717fecb8311d3ac8958cb90b0eeb82e47774509' }, h(TableFootCell, { key: '3d337b1724912d11fb1c94d6f43fd8cd98759d33', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: 'e55efb324a7e7504a100dadb5c3876b13f260e65', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '16b8cbed46d81e200397d090b65857f10f3f01bf' }, h(TableComponent, { key: '00377e36fd7d3e3af13484b7dbf906c57bc9e714' }, h(TableHead, { key: '57a312c426869647d363e96b91ac08dca661108a' }, h(TableHeadRow, { key: '4edcccaee3ec5952e12d223929fedd72beff7bf9' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: 'c4869d497817b42bceab3bd59ce44ff40c63d9ea' }, h(TableLoadingState, { key: '50c04fad28ef405bc2c7c3912df16aedcce12e8a', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '0f61a1c0a2ad76624e33e49576a40a63a4d40e4c', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '3f1b86578fe953bb72073e8e152b082a966e087a', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '7b9f3e41ba45e782a69c26454c8d1d5dec4e72bc' }, h(TableFootRow, { key: 'e5466b4cea1f8a493dbcd00299d34ca2731de491' }, h(TableFootCell, { key: '3e46926f681efba70db6f0eddac1c6ecf92b996e', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: 'e250421fcf3c13bd8293faab52c75c7dc06aad1e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "terminal-orders-list-core"; }
     static get properties() {
@@ -99,7 +99,7 @@ export class TerminalOrdersListCore {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -116,7 +116,7 @@ export class TerminalOrdersListCore {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/terminal-orders-list/terminal-orders-list-filters.js

@@ -47,8 +47,8 @@ export class TerminalOrdersListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '70418a386030b340813ba6b4015cec977c7ed542' }, h("table-filters-menu", { key: '7ba680b0cc5cccc8fd8de210e8e9bed4b99b8790', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: '2c4da0d02234051d3b48724d359f5c74c913bbf7', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'ad35b10dba39d2acf44eb078cf616d73815a258c', class: "p-2" }, h("form-control-select", { key: '9674d6da3301cd66562effa5aa062b004db4715c', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status || '', disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: 'f94a308a3af71a8982ce120f2a3a532431473dcb', class: "p-2" }, h("form-control-select", { key: '295de18dd0af6229fff627cb3236dfdb1635b693', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type || '', disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: 'eb9b7a1fe7454722b38c9bb989b4f702bf7ae8af', class: "p-2" }, h("form-control-date", { key: '9d616f29de5b6dfb32abba8249d21986ba7ba4e8', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalOrdersListFilterParam })), h("div", { key: 'f1e6fbb2147d0ec7e446dcef704c2f347ed21efa', class: "p-2" }, h("form-control-date", { key: 'c49dc4cff66936c2a943771658f57200c825a168', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '4530e57f1df87b7879ab5b3d51c64e814083cc39' }, h("table-filters-menu", { key: '541be463a6ac04afb5f46305035e78766746390a', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: '5273439008474a436974c44984568650d156aa56', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '1a6f3539862e84a09179f9605741500099e016e5', class: "p-2" }, h("form-control-select", { key: '19147dc7a9126af8c527748c3c52f520af142ee6', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status || '', disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: '045c240f339d4d040abc83eeba0d73881fe5e08f', class: "p-2" }, h("form-control-select", { key: '82ac38962821a54c2ad08342ad0855b9b68cc442', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type || '', disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: '96339b17f9944e4e99be02a25b32c57229f9820b', class: "p-2" }, h("form-control-date", { key: 'bcf00a60785ad359688a7ac82c02cd268bcf9b21', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalOrdersListFilterParam })), h("div", { key: 'be6dc7a779331570f2aed0d563662dd696941640', class: "p-2" }, h("form-control-date", { key: 'a63294437da6d31b670c01dbc471ae454ecac100', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforeTerminalOrdersListFilterParam }))))));
     }
     static get is() { return "justifi-terminal-orders-list-filters"; }

package/dist/collection/components/terminal-orders-list/terminal-orders-list.js

@@ -43,7 +43,7 @@ export class TerminalOrdersList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'ff51026cc99afbe51442832292c46053ad0c538a' }, h("terminal-orders-list-core", { key: 'c99fe72d7ab55b4560b4af08b1152cec7a8d663b', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '17a9377febcbca64657924ae5d1445794fdb523f' }, h("terminal-orders-list-core", { key: '3a32beb7e9d119b92cdc8cf130ab4fea1ceb8ef6', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminal-orders-list"; }
     static get encapsulation() { return "shadow"; }
@@ -57,7 +57,7 @@ export class TerminalOrdersList {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -76,7 +76,7 @@ export class TerminalOrdersList {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/terminals-list/terminals-list-core.js

@@ -118,7 +118,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '47a3ae5348a5ca8d0994043e1c17605c123dee97' }, h(TableComponent, { key: 'cf0e28bb98f00d52d546bb84c045d596ff5def31' }, h(TableHead, { key: '06a0c7685a42b513c5f1bf913e2d783630e946f3' }, h(TableHeadRow, { key: '0559e0bf9ee49cba9a769d91cbe6af5197ff6b45' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '66c4756ef6c6eec274c77fc48c958c0611895cbd' }, h(TableLoadingState, { key: '7ad0e2e15fe356bd5b22f75843915b7decf3a1c1', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '4191da227f556b4d9ae55533261ab1f1eaf17c9a', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '2d6f63bb346c5d76f4966bc45899e6f380bf3283', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '025a109c2fca7d00292f94507cb21ce40d6ab5fc' }, h(TableFootRow, { key: '7563a33f3b02210687e376f237bab6cc708626be' }, h(TableFootCell, { key: 'bbdbc7913fc93e76425db5b972645efed56652a1', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '7b0ccb15636e02cb8181e973637f56e9dd09fb2f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'ef0bd2935c30d3065d6895e9ea3d017a7b0e2a47' }, h(TableComponent, { key: '6a092c9fa2c2fe41fbf225cf9f91bbcfa33d9ebc' }, h(TableHead, { key: '3a39f78023e7190c1536333dae2b4eebc976ccd2' }, h(TableHeadRow, { key: 'c0dc5c27bc1cbbfd96478e7cec4a22a1cd7e425f' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: 'b674c0d5d96d9499eb562c349b1a46978373acb3' }, h(TableLoadingState, { key: '768dead47d904ba69b8deb4954ac78f9b59e2780', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '3455ac4471dc72f09163b9e02098e279933807ea', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '11738c367700be7f17c2f181fdccf63423ebb42e', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'e77a039ab5c1cdf9277aa1c1c45651e88f9dc8d0' }, h(TableFootRow, { key: 'b72612350c482c8d3cba4e30a30bed44209ffa33' }, h(TableFootCell, { key: 'e28fec03032f29ec5be4dae9af2592dfd57adcd4', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '3b253351477c3ac1c6b664acefb0eddb6b5467bf', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "terminals-list-core"; }
     static get properties() {
@@ -136,7 +136,7 @@ export class TerminalsListCore {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -158,7 +158,7 @@ export class TerminalsListCore {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -175,7 +175,7 @@ export class TerminalsListCore {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/terminals-list/terminals-list-filters.js

@@ -36,7 +36,7 @@ export class TerminalsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '7c585aa8a485f4149ae02c4140e31095410dd9c8' }, h("table-filters-menu", { key: 'e1c2942e51ebf395887121618daef8ca18d2dd40', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: 'f74518d5d7ad56059eb6c0ab02a3616e16c1550c', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'ae16ebe09430d29a8ca2c46dbb3d05feec008989', class: "p-2" }, h("form-control-text", { key: '9d7fc72298a0f7fa1b7fa342bcaa0e345a1bfd88', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: 'adc78c533b4ff9ba0c8ae3ea5b6704953633c6fc', class: "p-2" }, h("form-control-text", { key: '4ef8c16fcdce029b2701deed5638cbbad89746b5', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: 'd27c793b20fc5ff8b6ec8a08457e9cd6e9640604', class: "p-2" }, h("form-control-select", { key: '850a1b21e667fe1e1ec79051909d153a7a19c5cb', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: '146cbb4a0639065d7723a263949eedc218d34b63' }, h("table-filters-menu", { key: '1b8e6fb88510892460f2abc033ce789873e242ab', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '23fbd301095d1b64e93d0fef917685b93f1217a9', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'c6b956c17ee92cc991cb6adc5011e8039e210f6b', class: "p-2" }, h("form-control-text", { key: 'fc3df51433901eb7a499941e3ef525401c7cd5ca', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '390b8a12e9a381cdf4747562ee4d7607255df3ce', class: "p-2" }, h("form-control-text", { key: '92305b137d07d2ee8a351019599bb000d7d32cdd', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: '3197e7bf6a95621246281898d3e6d66625c30646', class: "p-2" }, h("form-control-select", { key: '92dc3fb1ef44a0e9d9a455c5fa7a6fe5ee075395', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
     }
     static get is() { return "justifi-terminals-list-filters"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/terminals-list/terminals-list.js

@@ -61,7 +61,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '9bf1797fc21c7fdf2b58aedab5819513338e714b' }, h("terminals-list-core", { key: '46c5f5cc5a436d47e4813207cce07d28a4f20ef7', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '77cb67def2cb91b1fbf00059d13a255eae014b12' }, h("terminals-list-core", { key: '697cafa1c343e20f36dff0404209c4832fa6a2ff', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminals-list"; }
     static get encapsulation() { return "shadow"; }
@@ -75,7 +75,7 @@ export class TerminalsList {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -94,7 +94,7 @@ export class TerminalsList {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

package/dist/collection/components/tokenize-payment-method/internal-tokenize-payment-method.js

@@ -247,7 +247,7 @@ export class InternalTokenizePaymentMethod {
         return paymentMethodType === PAYMENT_METHODS.NEW_CARD ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (h(StyledHost, { key: '8017b0fe2b0e3045a097e30aadf6a54ed2c32e62' }, h("form", { key: 'c7b0ac690a66cfb693d28e7d0eabc93817de4659' }, h("fieldset", { key: 'fb29e26a4100985595c420024d2a5ff48c79043b' }, h("div", { key: '589f51297059afda2e385281dcfeafd67fbd2268', class: "row gy-3" }, h("div", { key: 'bf067015fb3ff24e08501899e370f92dda774c2e', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: '28872ca9239e2f85cb83ad8e6f27dc10f84da151', class: "col-12" }, h("justifi-button", { key: '1be3f46e34b42e69d065384dd195d7fdc09a0560', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (h(StyledHost, { key: 'ffe62ce1bf31ab84080d3a4c158db3b537aea2fb' }, h("form", { key: '26d7942c4d88a758e03627a6042892a4dcb0a306' }, h("fieldset", { key: 'b789b31bad42d4c6912103abe653205165e44e8d' }, h("div", { key: '2e0fe382eb8a0018692ca9da2c911229ed981f0d', class: "row gy-3" }, h("div", { key: '3120e6ddd56b184f2530a1e8c1bb28f2c0f70579', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: '9de5bfc72cce2818aba19408ee835d0762d1e777', class: "col-12" }, h("justifi-button", { key: '5bd8cfb66fd34cc6773342175ae22771a095fcab', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
     static get is() { return "internal-tokenize-payment-method"; }
     static get properties() {

package/dist/collection/components/tokenize-payment-method/tokenize-payment-method.js

@@ -13,7 +13,7 @@ export class TokenizePaymentMethod {
         return this.tokenizePaymentMethodRef.validate();
     }
     render() {
-        return (h("internal-tokenize-payment-method", { key: 'ccbe4443b3e88f221eb828cae14450c5ea8dc172', ref: (el) => this.tokenizePaymentMethodRef = el, authToken: this.authToken, accountId: this.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: this.hideSubmitButton, paymentMethodGroupId: this.paymentMethodGroupId }));
+        return (h("internal-tokenize-payment-method", { key: '4e91adfed65e01e1d2810f7c4a57b4c1fec5c364', ref: (el) => this.tokenizePaymentMethodRef = el, authToken: this.authToken, accountId: this.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: this.hideSubmitButton, paymentMethodGroupId: this.paymentMethodGroupId }));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -5,38 +5,66 @@ export class CustomPopper {
         this.placement = 'bottom';
         this.offset = [0, 10];
         this.strategy = 'absolute';
-        this.trigger = 'click'; // 'click', 'hover', 'focus'
+        this.trigger = 'click';
         this.isOpen = false;
+        this.initialized = false;
+        this.boundHandlers = {
+            show: null,
+            hide: null,
+            handleClick: null,
+        };
+    }
+    onAnchorRefChange(newValue) {
+        if (newValue && this.popperContentRef && !this.initialized) {
+            this.initPopper();
+        }
     }
     componentDidLoad() {
+        if (this.anchorRef && this.popperContentRef) {
+            this.initPopper();
+        }
+    }
+    initPopper() {
+        if (this.initialized)
+            return;
+        this.initialized = true;
+        // Store bound references
+        this.boundHandlers.show = this.show.bind(this);
+        this.boundHandlers.hide = this.hide.bind(this);
+        this.boundHandlers.handleClick = this.handleClick.bind(this);
         this.popperInstance = createPopper(this.anchorRef, this.popperContentRef, this.popperOptions);
         if (this.trigger === 'click') {
-            window.addEventListener('click', this.handleClick.bind(this));
+            window.addEventListener('click', this.boundHandlers.handleClick);
         }
         else if (this.trigger === 'hover') {
-            this.anchorRef.addEventListener('mouseenter', this.show.bind(this));
-            this.anchorRef.addEventListener('mouseleave', this.hide.bind(this));
-            this.popperContentRef.addEventListener('mouseenter', this.show.bind(this));
-            this.popperContentRef.addEventListener('mouseleave', this.hide.bind(this));
+            this.anchorRef.addEventListener('mouseenter', this.boundHandlers.show);
+            this.anchorRef.addEventListener('mouseleave', this.boundHandlers.hide);
+            this.popperContentRef.addEventListener('mouseenter', this.boundHandlers.show);
+            this.popperContentRef.addEventListener('mouseleave', this.boundHandlers.hide);
         }
         else if (this.trigger === 'focus') {
-            this.anchorRef.addEventListener('focus', this.show.bind(this));
-            this.anchorRef.addEventListener('blur', this.hide.bind(this));
+            this.anchorRef.addEventListener('focus', this.boundHandlers.show);
+            this.anchorRef.addEventListener('blur', this.boundHandlers.hide);
         }
     }
     disconnectedCallback() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!this.initialized)
+            return;
+        // Clean up popper instance
+        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
         if (this.trigger === 'click') {
-            window.removeEventListener('click', this.handleClick.bind(this));
+            window.removeEventListener('click', this.boundHandlers.handleClick);
         }
         else if (this.trigger === 'hover') {
-            this.anchorRef.removeEventListener('mouseenter', this.show.bind(this));
-            this.anchorRef.removeEventListener('mouseleave', this.hide.bind(this));
-            this.popperContentRef.removeEventListener('mouseenter', this.show.bind(this));
-            this.popperContentRef.removeEventListener('mouseleave', this.hide.bind(this));
+            (_b = this.anchorRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.boundHandlers.show);
+            (_c = this.anchorRef) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.boundHandlers.hide);
+            (_d = this.popperContentRef) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.boundHandlers.show);
+            (_e = this.popperContentRef) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.boundHandlers.hide);
         }
         else if (this.trigger === 'focus') {
-            this.anchorRef.removeEventListener('focus', this.show.bind(this));
-            this.anchorRef.removeEventListener('blur', this.hide.bind(this));
+            (_f = this.anchorRef) === null || _f === void 0 ? void 0 : _f.removeEventListener('focus', this.boundHandlers.show);
+            (_g = this.anchorRef) === null || _g === void 0 ? void 0 : _g.removeEventListener('blur', this.boundHandlers.hide);
         }
     }
     handleClick(event) {
@@ -80,7 +108,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: 'c3ff01a53b15d4678dcbd58e97606885a510a880' }, h("style", { key: 'f239956643a0f5463303992aa2466e37988a124d' }, `
+        return (h("div", { key: '2d57f47cc668826c2a72d70d3a0404837398a646' }, h("style", { key: '6d02bdb47dd36a529d2e8ae3f2b4adad6c8cdf88' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +116,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '7b710736c1ffe73559ef53d9f1525c22785cde2e', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '116be40554b590b382ea7002f5c442d010059b48' }))));
+          `), h("div", { key: 'fdcb769c70b92532427e09fdaa5bbdffc59c8ac3', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '1cdd517d323181dee0f2a345406d07432889ee21' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {
@@ -249,4 +277,10 @@ export class CustomPopper {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "anchorRef",
+                "methodName": "onAnchorRefChange"
+            }];
+    }
 }

package/dist/collection/ui-components/details/details.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { ErrorState } from "./utils";
 export class Details {
     render() {
-        return (h("div", { key: '3c1c4e729711c6676c176a5a04228ec7ebb7acfa' }, this.errorMessage ?
+        return (h("div", { key: '77d9c172a85e392d3c21d7d789dd2c264858f571' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));
@@ -18,7 +18,7 @@ export class Details {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],