@justifi/webcomponents 4.23.0 → 5.0.0-rc-1

package/dist/module/table-filters-menu2.js

@@ -1,8 +1,15 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { B as Button } from './button.js';
-import { h as hasFilters } from './utils3.js';
+import { R as dropdownMenu } from './parts.js';
 import { d as defineCustomElement$1 } from './custom-popper2.js';
 
+const hasFilters = (params) => {
+    const paginationKeys = ['after_cursor', 'before_cursor'];
+    const paramKeys = Object.keys(params);
+    const filterKeys = paramKeys.filter((paramKey) => !paginationKeys.includes(paramKey));
+    return !!filterKeys.length;
+};
+
 const TableFiltersMenu = /*@__PURE__*/ proxyCustomElement(class TableFiltersMenu extends HTMLElement {
     constructor() {
         super();
@@ -22,8 +29,11 @@ const TableFiltersMenu = /*@__PURE__*/ proxyCustomElement(class TableFiltersMenu
     hide() {
         this.menu.classList.remove('show');
     }
+    componentWillLoad() {
+        this.showClearButton = hasFilters(this.params);
+    }
     render() {
-        return (h("div", { key: 'de116fd5406fcc4feb36df24f8fc3162b39567e8', class: "d-flex gap-2" }, h("div", { key: '07c7d885acc4816d28e3c2653d5e4c9a7ea42108', class: "dropdown pb-3" }, h(Button, { key: '34cee2bf49991340c4291c5014d17bfa9c3593d8', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '19640a1ab19bdda14398c4a76392584c6bf1e6d9', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'a72ce2a8ab9fc317236128980bd4bc9be92faf2c', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '008b23e2dc775ec59247df27379780d1ccdd81eb' })))), h("div", { key: '5b60c0821e4cfe5395c6eca11957e18446039cd7' }, h(Button, { key: '56d032309bdff48f6501ae6be6344860d008f481', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'b50b85bc459e9f217a70c49505479944572b5daf', class: "d-flex gap-2" }, h("div", { key: 'eedc2d34795d42f10b1db7b7f163096f06b519ff', class: "dropdown pb-3" }, h(Button, { key: '97d365b9c8ac6e5f33fa98768ffa55b988c90a17', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: 'e0f52c3aeb555de14d1e999818468debc59a9fa7', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'bd83ec6ea2949b2313078431c91c711682c5ed53', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '08a53808fffd6f029ac83229fa86d13bacf39a7b' })))), h("div", { key: 'f28533474420ac5d80ba3ab6bb5e919ebf644779' }, h(Button, { key: 'cde26e935489d12a34758cf766bcb87296e0f5e8', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get watchers() { return {
         "params": ["watchParamsHandler"]

package/dist/module/terminals-list-core2.js

@@ -3,16 +3,11 @@ import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
-import { T as Table, a as TableLoadingState, b as TableEmptyState, c as TableErrorState } from './table.js';
-import { o as onFilterChange } from './utils3.js';
-import { d as defineCustomElement$8 } from './custom-popper2.js';
-import { d as defineCustomElement$7 } from './form-control-error-text2.js';
-import { d as defineCustomElement$6 } from './form-control-select2.js';
-import { d as defineCustomElement$5 } from './form-control-text2.js';
-import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$3 } from './pagination-menu2.js';
-import { d as defineCustomElement$2 } from './table-filters-menu2.js';
-import { d as defineCustomElement$1 } from './terminals-list-filters2.js';
+import { f as tableHeadCell, g as getAlternateTableCellPart, j as table, k as tableCell } from './parts.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types.js';
+import './details.js';
+import { o as onQueryParamsChange, q as queryParams } from './terminals-list-params-state.js';
+import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
 const MapTerminalStatusToBadge = (status) => {
     switch (status) {
@@ -27,47 +22,38 @@ const MapTerminalStatusToBadge = (status) => {
 
 const defaultColumnsKeys = 'nickname,provider_id,status';
 const terminalTableColumns = {
-    nickname: () => (h("th", { part: "table-head-cell", scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
-    provider_id: () => (h("th", { part: "table-head-cell", scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
-    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
-    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each terminal" }, "Status")),
+    nickname: () => (h("th", { part: tableHeadCell, scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
+    provider_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
+    sub_account_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each terminal" }, "Status")),
 };
 const terminalTableCells = {
-    nickname: (value) => (h("td", { part: "table-cell" }, value)),
-    provider_id: (value) => (h("td", { part: "table-cell" }, value)),
-    sub_account_name: (value) => (h("td", { part: "table-cell" }, value)),
-    status: (value) => (h("td", { part: "table-cell", innerHTML: MapTerminalStatusToBadge(value) })),
+    nickname: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    provider_id: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    sub_account_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapTerminalStatusToBadge(value) })),
 };
 
 const TerminalsListCore = /*@__PURE__*/ proxyCustomElement(class TerminalsListCore extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.rowClicked = createEvent(this, "terminal-row-clicked", 7);
+        this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.handleClickPrevious = (beforeCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.after_cursor;
-            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
         };
         this.handleClickNext = (afterCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.before_cursor;
-            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
         };
         this.rowClickHandler = (e) => {
             const clickedTerminalID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedTerminalID)
                 return;
-            this.rowClicked.emit(this.terminals.find((terminal) => terminal.id === clickedTerminalID));
-        };
-        this.setParamsOnChange = (name, value) => {
-            let newParams = { [name]: value };
-            this.params = onFilterChange(newParams, this.params);
-        };
-        this.clearParams = () => {
-            this.errorMessage = '';
-            this.params = {};
+            const terminalData = this.terminals.find((terminal) => terminal.id === clickedTerminalID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: terminalData });
         };
         this.getTerminals = undefined;
         this.getSubAccounts = undefined;
@@ -78,21 +64,28 @@ const TerminalsListCore = /*@__PURE__*/ proxyCustomElement(class TerminalsListCo
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = {};
+        this.pagingParams = {};
     }
     updateOnPropChange() {
-        this.fetchTerminals();
+        this.fetchData();
     }
     componentWillLoad() {
         this.terminalsTable = new Table(this.terminals, this.columns, terminalTableColumns, terminalTableCells);
         if (this.getTerminals && this.getSubAccounts) {
-            this.fetchTerminals();
+            this.fetchData();
         }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
-    fetchTerminals() {
+    fetchData() {
         this.loading = true;
         this.getTerminals({
-            params: this.params,
+            params: this.requestParams,
             onSuccess: async ({ terminals, pagingInfo }) => {
                 this.terminals = terminals;
                 this.paging = pagingInfo;
@@ -139,6 +132,10 @@ const TerminalsListCore = /*@__PURE__*/ proxyCustomElement(class TerminalsListCo
             },
         });
     }
+    get requestParams() {
+        const combinedParams = Object.assign(Object.assign({}, queryParams), this.pagingParams);
+        return combinedParams;
+    }
     get subAccountParams() {
         let accountIdNumbers = this.terminals.map((terminal) => terminal.account_id);
         let uniqueAccountIds = [...new Set(accountIdNumbers)];
@@ -158,10 +155,11 @@ const TerminalsListCore = /*@__PURE__*/ proxyCustomElement(class TerminalsListCo
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'd022a41666a6483bcb405bfe477b7eba1e5ca5dd' }, h("terminals-list-filters", { key: 'cb0d38d4b51c5cb9482c1f567dce4462bf12a055', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '82cbf05382d9ecaf0d01c4e0b5f61618b1442690', class: "table-wrapper" }, h("table", { key: '5c8bd36b6523cf56542b016e3195188781b2cb03', class: "table table-hover" }, h("thead", { key: 'f35d86ae84f673437e0fc51ad3e26b1839153590', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '7727a4e30dddd62d6dc3c405c7ca505f91a71643', class: "table-light text-nowrap", part: "table-head-row" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '4e0ee2053a33622037e7961ec289036e52632e3f', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '96cb647d4f5c2e4a1ecb33be46b868e1318762ca', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '062aeeb69a149b2f15e49c81bb3bd16a6d5a5dfd', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '750a04c3ecb53271b3affced7e9245733c64bd57', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (h("tfoot", { key: '19edc599b2ccd6212c03045b754fe251335fa665', class: "sticky-bottom" }, h("tr", { key: 'dd793c33355dd6b0448e327a62b3cc08a0d09bad', class: "table-light align-middle" }, h("td", { key: '0b142d2c1b658e1bb084741fa461d7f350c3449c', part: "pagination-bar", colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '757d9ba17e1a768aa0bcf573a2d02b455bac3df3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: 'a293f76edb152df4636282a1bdb64526743ba62b' }, h("div", { key: '91c87549f3da243bcbc5e8c3f30690b4f3568312', class: "table-wrapper" }, h("table", { key: 'b8666ef07d7cddecfd576520004cb9ae369816d0', class: "table table-hover", part: table }, h("thead", { key: '82f882e9c8ad8cb8b86fdd8054b2db202f31aee6', class: "table-head sticky-top" }, h("tr", { key: 'db96b27008b1cdfb394f7480d163ba98a564e654', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: 'afe168ca0facd25953f8e23c82ee40b37ff56418', class: "table-body" }, h(TableLoadingState, { key: 'fa4a276edaa35687efd922d987b51248670aad4c', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a7450b6fc3b6e659c46c57c4bb1e06c8102da809', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '89894e4c62d1ec4b4d10f1ca8fd50098e655dcf1', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'ba93ff43a8562b4e77b48a0a026d75d9f84e5249', class: "sticky-bottom" }, h("tr", { key: 'bd75b89450eec1db55c7e92b2e79eab559605bba', class: "table-light align-middle" }, h("td", { key: 'b27b8a0bbe6c2d38393684752809d5e909948567', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '959649b1f3c8099c5b929543557823eccd3e9dd9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
-        "params": ["updateOnPropChange"],
+        "queryParams": ["updateOnPropChange"],
+        "pagingParams": ["updateOnPropChange"],
         "getTerminals": ["updateOnPropChange"],
         "getSubAccounts": ["updateOnPropChange"],
         "columns": ["updateOnPropChange"]
@@ -176,9 +174,10 @@ const TerminalsListCore = /*@__PURE__*/ proxyCustomElement(class TerminalsListCo
         "loading": [32],
         "errorMessage": [32],
         "paging": [32],
-        "params": [32]
+        "pagingParams": [32]
     }, undefined, {
-        "params": ["updateOnPropChange"],
+        "queryParams": ["updateOnPropChange"],
+        "pagingParams": ["updateOnPropChange"],
         "getTerminals": ["updateOnPropChange"],
         "getSubAccounts": ["updateOnPropChange"],
         "columns": ["updateOnPropChange"]
@@ -187,49 +186,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["terminals-list-core", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "pagination-menu", "table-filters-menu", "terminals-list-filters"];
+    const components = ["terminals-list-core", "pagination-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "terminals-list-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TerminalsListCore);
             }
             break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "form-control-error-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
         case "pagination-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "table-filters-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "terminals-list-filters":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/terminals-list-params-state.js

@@ -0,0 +1,10 @@
+import { c as createStore } from './index2.js';
+
+const initialState = {};
+const terminalsListQueryParams = createStore(() => initialState);
+const { state: queryParams, on: onQueryParamsChange } = terminalsListQueryParams;
+const clearParams = () => {
+    terminalsListQueryParams.reset();
+};
+
+export { clearParams as c, onQueryParamsChange as o, queryParams as q };

package/dist/module/utils.js

@@ -1,27 +1,22 @@
 import { h } from '@stencil/core/internal/client';
+import { t as text, h as heading2, a as heading1 } from './parts.js';
 
-const LoadingState = () => (h("main", { part: "detail-loading-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } },
-    h("div", { part: "detail-loading-spinner", class: "spinner-border spinner-border-sm", role: "status" },
-        h("span", { class: "visually-hidden" }, "Loading..."))));
-const ErrorState = (errorMessage) => (h("main", { part: "detail-empty-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } },
-    h("div", null, errorMessage)));
-const DetailSectionTitle = (props) => [
-    h("h5", { part: "detail-section-title", class: "mt-4" }, props.sectionTitle),
-    h("hr", null),
-];
+const ErrorState = (errorMessage) => (h("main", { class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } },
+    h("p", { part: text }, errorMessage)));
+const DetailSectionTitle = (props) => (h("h2", { part: heading2, class: "mt-4 fs-5 border-bottom pb-3" }, props.sectionTitle));
 const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-table-row gap-2" },
-    h("span", { part: "detail-section-item-title", class: "fw-bold d-table-cell px-2" }, title),
-    h("span", { part: "detail-section-item-data", class: "flex-1 d-table-cell px-2 text-wrap", innerHTML: value }))) : null;
-const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { part: "detail-head-info-item", class: `d-flex flex-column ${classes}` },
-    h("span", { part: "detail-head-info-item-title", class: "fw-bold border-1 border-bottom ps-2 pe-2" }, title),
-    h("span", { part: "detail-head-info-item-data", class: "pt-2 ps-2 pe-2" }, value)));
-const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, part: "detail-head", class: "p-2" },
+    h("span", { class: "fw-bold d-table-cell px-2", part: text }, title),
+    h("span", { class: "flex-1 d-table-cell px-2 text-wrap", part: text, innerHTML: value }))) : null;
+const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { class: `d-flex flex-column ${classes}` },
+    h("span", { class: "fw-bold border-1 border-bottom ps-2 pe-2", part: heading2 }, title),
+    h("span", { class: "pt-2 ps-2 pe-2", part: text }, value)));
+const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, class: "p-2" },
     h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" },
-        h("h1", { class: "m-0", part: "detail-title" }, title),
+        h("h1", { class: "m-0", part: heading1 }, title),
         badge),
-    h("div", { part: "detail-head-info", class: "d-flex flex-row align-items-top" }, children)));
+    h("div", { class: "d-flex flex-row align-items-top", part: text }, children)));
 const CodeBlock = ({ metadata }) => metadata && Object.keys(metadata).length ? (h("div", { class: 'mt-4' },
-    h("pre", { part: "detail-metadata", class: "p-2", "aria-label": "metadata content" },
+    h("pre", { class: "p-2", "aria-label": "metadata content" },
         h("code", null, JSON.stringify(metadata, null, 2))))) : null;
 
-export { CodeBlock as C, DetailSectionTitle as D, ErrorState as E, LoadingState as L, DetailItem as a, EntityHeadInfo as b, EntityHeadInfoItem as c };
+export { CodeBlock as C, DetailSectionTitle as D, ErrorState as E, DetailItem as a, EntityHeadInfo as b, EntityHeadInfoItem as c };

package/dist/module/utils2.js

@@ -3924,7 +3924,9 @@ const convertToLocal = (dateString, options) => {
     if (!dateString)
         return '';
     const dateObj = new Date(dateString);
-    const localDate = new Date(dateObj.toLocaleString('en-US', { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone }));
+    const localDate = new Date(dateObj.toLocaleString('en-US', {
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    }));
     if (showDisplayDate) {
         return format(localDate, 'MMM d, yyyy');
     }
@@ -3935,7 +3937,7 @@ const convertToLocal = (dateString, options) => {
         return format(localDate, 'h:mmaaa');
     }
     else if (showInputDateTime) {
-        return format(localDate, 'yyyy-MM-dd\'T\'HH:mm');
+        return format(localDate, "yyyy-MM-dd'T'HH:mm");
     }
 };
 // String Manipulation
@@ -3959,31 +3961,30 @@ function isEmptyObject(obj) {
 const isInRange = (num, min, max) => {
     return num >= min && num <= max;
 };
-// Font Loading
-async function loadFontsOnParent() {
-    const parent = document.body;
-    const fontsToLoad = extractComputedFontsToLoad();
-    if (!parent || !fontsToLoad) {
-        return null;
-    }
-    // Construct the font URL
-    const fontHref = `https://fonts.googleapis.com/css2?family=${fontsToLoad}&display=swap`;
-    // Check if a link element with the same href already exists
-    const existingFontLink = Array.from(document.querySelectorAll('link')).find((link) => link.href === fontHref);
-    // If the font link already exists, there's no need to append a new one
-    if (existingFontLink) {
-        return;
-    }
-    // This approach is needed to load the font in a parent of the component
-    const fonts = document.createElement('link');
-    fonts.rel = 'stylesheet';
-    fonts.href = fontHref;
-    parent.append(fonts);
-}
-function extractComputedFontsToLoad() {
-    var _a;
-    const computedStyles = getComputedStyle(document.body);
-    return (((_a = computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.getPropertyValue('--jfi-load-google-font')) === null || _a === void 0 ? void 0 : _a.trim().replace(/'|"/g, '').replace(' ', '+')) || null);
-}
-
-export { formatDate as a, formatTime as b, formatCurrency as c, formatDisplayDate as d, isInRange as e, formatMediumDate as f, formatTimeSeconds as g, snakeToCamel as h, isEmptyObject as i, convertToLocal as j, convertToUTC as k, loadFontsOnParent as l, snakeCaseToHumanReadable as s };
+function removeAttribute(htmlString, attribute) {
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlString;
+    const elementsWithStyle = tempDiv.querySelectorAll(`[${attribute}]`);
+    elementsWithStyle.forEach((element) => {
+        element.removeAttribute(attribute);
+    });
+    return tempDiv.innerHTML;
+}
+function addAttribute(htmlString, tagName, attribute, value) {
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlString;
+    const elements = tempDiv.getElementsByTagName(tagName);
+    Array.from(elements).forEach((element) => {
+        element.setAttribute(attribute, value);
+    });
+    return tempDiv.innerHTML;
+}
+function processHTML(htmlString, functions) {
+    let processedHTML = htmlString;
+    functions.forEach((func) => {
+        processedHTML = func(processedHTML);
+    });
+    return processedHTML;
+}
+
+export { formatDate as a, formatTime as b, formatCurrency as c, formatDisplayDate as d, isInRange as e, formatMediumDate as f, formatTimeSeconds as g, snakeToCamel as h, isEmptyObject as i, convertToLocal as j, convertToUTC as k, addAttribute as l, processHTML as p, removeAttribute as r, snakeCaseToHumanReadable as s };

package/dist/module/utils3.js

@@ -1,33 +1,28 @@
-function composeQueryParams(values) {
-    const queryParams = values.map((value) => {
-        if (value === values[0]) {
-            return (value = `?${value}`);
-        }
-        else {
-            return (value = `&${value}`);
-        }
-    });
-    return queryParams.join('');
-}
-const onFilterChange = (newFilters, params) => {
-    let newParams = Object.assign({}, params);
-    delete newParams.before_cursor;
-    delete newParams.after_cursor;
-    Object.keys(newFilters).forEach((key) => {
-        if (newFilters[key].length) {
-            newParams[key] = newFilters[key];
-        }
-        else {
-            delete newParams[key];
-        }
-    });
-    return newParams;
+import { C as ComponentErrorCodes } from './ComponentError.js';
+
+// Errors on [capital]/config/locales/en.yml
+// Add more errors as needed
+const API_ERRORS = {
+    NOT_AUTHENTICATED: 'not_authenticated',
+    INVALID_PARAMETER: 'invalid_parameter',
+};
+
+const getErrorMessage = (error) => {
+    if (typeof error === 'string') {
+        return error;
+    }
+    return error.message;
 };
-const hasFilters = (params) => {
-    const paginationKeys = ['after_cursor', 'before_cursor'];
-    const paramKeys = Object.keys(params);
-    const filterKeys = paramKeys.filter((paramKey) => !paginationKeys.includes(paramKey));
-    return !!filterKeys.length;
+const getErrorCode = (code) => {
+    switch (code) {
+        case API_ERRORS.NOT_AUTHENTICATED:
+            return ComponentErrorCodes.NOT_AUTHENTICATED;
+        case API_ERRORS.INVALID_PARAMETER:
+            return ComponentErrorCodes.INVALID_PARAMETER;
+        // add more cases as needed
+        default:
+            return ComponentErrorCodes.FETCH_ERROR;
+    }
 };
 
-export { composeQueryParams as c, hasFilters as h, onFilterChange as o };
+export { getErrorCode as a, getErrorMessage as g };

package/dist/module/utils4.js

@@ -1,28 +1,27 @@
-import { C as ComponentErrorCodes } from './ComponentError.js';
-
-// Errors on [capital]/config/locales/en.yml
-// Add more errors as needed
-const API_ERRORS = {
-    NOT_AUTHENTICATED: 'not_authenticated',
-    INVALID_PARAMETER: 'invalid_parameter',
-};
-
-const getErrorMessage = (error) => {
-    if (typeof error === 'string') {
-        return error;
+const numberOnlyHandler = (e) => {
+    var _a;
+    const specialKeys = ['Backspace', 'Tab', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Delete'];
+    // Check if the key is a special key
+    if (e instanceof KeyboardEvent && specialKeys.includes(e.key)) {
+        return;
     }
-    return error.message;
-};
-const getErrorCode = (code) => {
-    switch (code) {
-        case API_ERRORS.NOT_AUTHENTICATED:
-            return ComponentErrorCodes.NOT_AUTHENTICATED;
-        case API_ERRORS.INVALID_PARAMETER:
-            return ComponentErrorCodes.INVALID_PARAMETER;
-        // add more cases as needed
-        default:
-            return ComponentErrorCodes.FETCH_ERROR;
+    // Allow Ctrl+V / Command+V for pasting
+    const isPaste = e instanceof KeyboardEvent && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v';
+    if (isPaste) {
+        return;
+    }
+    // Handle paste event
+    if (e instanceof ClipboardEvent) {
+        const clipboardData = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
+        if (clipboardData && !/^\d+$/.test(clipboardData)) {
+            e.preventDefault();
+        }
+        return;
+    }
+    // Prevent default action if the key is not a digit
+    if (e instanceof KeyboardEvent && !/^\d$/.test(e.key)) {
+        e.preventDefault();
     }
 };
 
-export { getErrorCode as a, getErrorMessage as g };
+export { numberOnlyHandler as n };

package/dist/types/api/Business.d.ts

@@ -1,6 +1,10 @@
 import { Identity } from './Identity';
 import { IDocument } from './Document';
 import { IBankAccount } from './BankAccount';
+export declare enum BusinessFormServerErrors {
+    fetchData = "Error retrieving business data",
+    patchData = "Error updating business data"
+}
 export declare enum BusinessClassification {
     sole_proprietor = "sole_proprietor",
     partnership = "partnership",

package/dist/types/api/Checkout.d.ts

@@ -148,10 +148,8 @@ export type ICheckoutCompleteResponse = IApiResponse<{
 export type ILoadedEventResponse = {
     checkout_status: ICheckoutStatus;
 };
-export interface ICheckoutsParams {
+export interface CheckoutsQueryParams {
     status?: ICheckoutStatus;
     payment_mode?: ICheckoutPaymentMode;
-    after_cursor?: string;
-    before_cursor?: string;
 }
 export {};

package/dist/types/api/ComponentError.d.ts

@@ -14,9 +14,3 @@ export declare enum ComponentErrorSeverity {
     WARNING = "warning",
     ERROR = "error"
 }
-export interface ComponentError {
-    errorCode: ComponentErrorCodes;
-    message: string;
-    severity?: ComponentErrorSeverity;
-    data?: any;
-}

package/dist/types/api/ComponentEvents.d.ts

@@ -0,0 +1,23 @@
+import { BusinessFormClickActions, BusinessFormStep } from "../components/business-forms/utils/event-types";
+import { DisputeManagementClickActions, DisputeResponseFormStep } from "../components/dispute-management/event-types";
+import { TableClickActions } from "../ui-components/table/event-types";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "./ComponentError";
+export interface ComponentClickEvent {
+    name: BusinessFormClickActions | DisputeManagementClickActions | TableClickActions;
+    data?: any;
+}
+export interface ComponentSubmitEvent {
+    response: any;
+    metadata?: any;
+}
+export interface ComponentFormStepCompleteEvent {
+    formStep: BusinessFormStep | DisputeResponseFormStep;
+    response?: any;
+    metadata?: any;
+}
+export interface ComponentErrorEvent {
+    errorCode: ComponentErrorCodes;
+    message: string;
+    severity?: ComponentErrorSeverity;
+    data?: any;
+}

package/dist/types/api/Dispute.d.ts

@@ -0,0 +1,76 @@
+export declare enum DisputeStatus {
+    won = "won",
+    lost = "lost",
+    underReview = "under_review",
+    needsResponse = "needs_response"
+}
+export interface IDispute {
+    id: string;
+    amount: number;
+    currency: string;
+    payment_id: string;
+    reason: string;
+    due_date: string;
+    status: DisputeStatus;
+    metadata: any;
+    created_at: string;
+    updated_at: string;
+    dispute_response?: IDisputeResponse;
+}
+export declare class Dispute implements IDispute {
+    id: string;
+    amount: number;
+    currency: string;
+    payment_id: string;
+    reason: string;
+    due_date: string;
+    status: DisputeStatus;
+    metadata: any;
+    created_at: string;
+    updated_at: string;
+    dispute_response?: DisputeResponse;
+    get needsResponse(): boolean;
+    get underReview(): boolean;
+    get won(): boolean;
+    get lost(): boolean;
+    constructor(dispute: IDispute);
+}
+export interface IDisputeResponse {
+    additional_statement: string;
+    cancellation_policy_disclosure: string;
+    cancellation_rebuttal: string;
+    customer_billing_address: string;
+    customer_email_address: string;
+    customer_name: string;
+    customer_purchase_ip_address: string;
+    duplicate_charge_explanation: string;
+    product_description: string;
+    refund_policy_disclosure: string;
+    refund_refusal_explanation: string;
+    service_date: string;
+    shipping_address: string;
+    shipping_carrier: string;
+    shipping_date: string;
+    shipping_tracking_number: string;
+    duplicate_charge_original_payment_id: string;
+}
+export declare class DisputeResponse implements IDisputeResponse {
+    additional_statement: string;
+    cancellation_policy_disclosure: string;
+    cancellation_rebuttal: string;
+    customer_billing_address: string;
+    customer_email_address: string;
+    customer_name: string;
+    customer_purchase_ip_address: string;
+    duplicate_charge_explanation: string;
+    product_description: string;
+    refund_policy_disclosure: string;
+    refund_refusal_explanation: string;
+    service_date: string;
+    shipping_address: string;
+    shipping_carrier: string;
+    shipping_date: string;
+    shipping_tracking_number: string;
+    duplicate_charge_original_payment_id: string;
+    constructor(response: IDisputeResponse);
+}