npm - @justifi/webcomponents - Versions diffs - 4.7.4 → 4.7.5 - Mend

@justifi/webcomponents 4.7.4 → 4.7.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (644) hide show

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.js CHANGED Viewed

@@ -3,151 +3,151 @@ import { Api, PaymentBalanceTransaction, pagingDefaults, } from "../../api";
 import { formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable, } from "../../utils/utils";
 import { config } from "../../../config";
 export class PaymentBalanceTransactions {
-  constructor() {
-    this.handleClickPrevious = (beforeCursor) => {
-      const newParams = Object.assign({}, this.params);
-      delete newParams.after_cursor;
-      this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
-    };
-    this.handleClickNext = (afterCursor) => {
-      const newParams = Object.assign({}, this.params);
-      delete newParams.before_cursor;
-      this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
-    };
-    this.accountId = undefined;
-    this.authToken = undefined;
-    this.paymentId = undefined;
-    this.balanceTransactions = [];
-    this.loading = true;
-    this.errorMessage = undefined;
-    this.paging = pagingDefaults;
-    this.params = undefined;
-  }
-  updateOnPropChange() {
-    this.fetchData();
-  }
-  connectedCallback() {
-    this.fetchData();
-  }
-  async fetchData() {
-    this.loading = true;
-    if (!this.accountId || !this.paymentId) {
-      this.errorMessage = 'Missing required props: accountId or paymentId';
-      this.loading = false;
-      return;
+    constructor() {
+        this.handleClickPrevious = (beforeCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.after_cursor;
+            this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
+        };
+        this.handleClickNext = (afterCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.before_cursor;
+            this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
+        };
+        this.accountId = undefined;
+        this.authToken = undefined;
+        this.paymentId = undefined;
+        this.balanceTransactions = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = undefined;
     }
-    const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;
-    const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint, this.params);
-    if (!response.error) {
-      this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
-      this.balanceTransactions = response.data.map(dataItem => new PaymentBalanceTransaction(dataItem));
+    updateOnPropChange() {
+        this.fetchData();
     }
-    else {
-      this.errorMessage =
-        typeof response.error === 'string'
-          ? response.error
-          : response.error.message;
+    connectedCallback() {
+        this.fetchData();
+    }
+    async fetchData() {
+        this.loading = true;
+        if (!this.accountId || !this.paymentId) {
+            this.errorMessage = 'Missing required props: accountId or paymentId';
+            this.loading = false;
+            return;
+        }
+        const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;
+        const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint, this.params);
+        if (!response.error) {
+            this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
+            this.balanceTransactions = response.data.map(dataItem => new PaymentBalanceTransaction(dataItem));
+        }
+        else {
+            this.errorMessage =
+                typeof response.error === 'string'
+                    ? response.error
+                    : response.error.message;
+        }
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, null, h("justifi-table", { columnData: [
+                ['Processed On', 'The date each transaction occurred'],
+                ['Type', 'The type of each transaction'],
+                ['ID', 'The unique identifier of each transaction'],
+                ['Amout', 'The dollar amount of each transaction'],
+                [
+                    'Balance',
+                    'The running total amount of this payment that belongs to you',
+                ],
+            ], entityId: this.balanceTransactions.map(transaction => transaction.id), rowData: this.balanceTransactions.map(balanceTransaction => [
+                h("div", null, h("div", null, formatDate(balanceTransaction.created_at)), h("div", null, formatTime(balanceTransaction.created_at))),
+                snakeCaseToHumanReadable(balanceTransaction.payment_balance_txn_type),
+                balanceTransaction.payment_id,
+                formatCurrency(balanceTransaction.amount),
+                formatCurrency(balanceTransaction.balance),
+            ]), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+    }
+    static get is() { return "justifi-payment-balance-transactions"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payment-balance-transactions.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payment-balance-transactions.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "account-id",
+                "reflect": false
+            },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "paymentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-id",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "balanceTransactions": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "params": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "params",
+                "methodName": "updateOnPropChange"
+            }];
     }
-    this.loading = false;
-  }
-  render() {
-    return (h(Host, null, h("justifi-table", { columnData: [
-        ['Processed On', 'The date each transaction occurred'],
-        ['Type', 'The type of each transaction'],
-        ['ID', 'The unique identifier of each transaction'],
-        ['Amout', 'The dollar amount of each transaction'],
-        [
-          'Balance',
-          'The running total amount of this payment that belongs to you',
-        ],
-      ], entityId: this.balanceTransactions.map(transaction => transaction.id), rowData: this.balanceTransactions.map(balanceTransaction => [
-        h("div", null, h("div", null, formatDate(balanceTransaction.created_at)), h("div", null, formatTime(balanceTransaction.created_at))),
-        snakeCaseToHumanReadable(balanceTransaction.payment_balance_txn_type),
-        balanceTransaction.payment_id,
-        formatCurrency(balanceTransaction.amount),
-        formatCurrency(balanceTransaction.balance),
-      ]), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
-  }
-  static get is() { return "justifi-payment-balance-transactions"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["payment-balance-transactions.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["payment-balance-transactions.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "accountId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "account-id",
-        "reflect": false
-      },
-      "authToken": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "auth-token",
-        "reflect": false
-      },
-      "paymentId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "payment-id",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "balanceTransactions": {},
-      "loading": {},
-      "errorMessage": {},
-      "paging": {},
-      "params": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "params",
-        "methodName": "updateOnPropChange"
-      }];
-  }
 }

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.stories.js CHANGED Viewed

@@ -1,18 +1,18 @@
 import { config } from "../../../config";
 export default {
-  title: 'dev/Components/PaymentBalanceTransactions',
-  component: 'justifi-payment-balance-transactions',
-  parameters: {},
+    title: 'dev/Components/PaymentBalanceTransactions',
+    component: 'justifi-payment-balance-transactions',
+    parameters: {},
 };
 class PaymentBalanceTransactionsArgs {
-  constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
-    this['payment-id'] = args['payment-id'] || config.examplePaymentId;
-    this['account-id'] = args['account-id'] || config.exampleAccountId;
-  }
+    constructor(args) {
+        this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
+        this['payment-id'] = args['payment-id'] || config.examplePaymentId;
+        this['account-id'] = args['account-id'] || config.exampleAccountId;
+    }
 }
 const Template = (args) => {
-  return `
+    return `
     <justifi-payment-balance-transactions
       data-testid="justifi-payment-balance-transactions"
       auth-token="${args['auth-token']}"
@@ -26,7 +26,7 @@ Basic.args = new PaymentBalanceTransactionsArgs({});
 export const Styled = Template.bind({});
 Styled.args = new PaymentBalanceTransactionsArgs({});
 Styled.decorators = [
-  Story => `
+    Story => `
     ${Story()}
   `,
 ];

package/dist/collection/components/payment-details/payment-details.css CHANGED Viewed

@@ -93,6 +93,7 @@
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -164,6 +165,8 @@
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -712,6 +715,7 @@ small {
 mark {
   padding: 0.1875em;
+  color: var(--bs-highlight-color);
   background-color: var(--bs-highlight-bg);
 }
@@ -978,16 +982,16 @@ progress {
   --bs-table-bg-type: initial;
   --bs-table-color-state: initial;
   --bs-table-bg-state: initial;
-  --bs-table-color: var(--bs-body-color);
+  --bs-table-color: var(--bs-emphasis-color);
   --bs-table-bg: var(--bs-body-bg);
   --bs-table-border-color: var(--bs-border-color);
   --bs-table-accent-bg: transparent;
-  --bs-table-striped-color: var(--bs-body-color);
-  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
-  --bs-table-active-color: var(--bs-body-color);
-  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
-  --bs-table-hover-color: var(--bs-body-color);
-  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
+  --bs-table-striped-color: var(--bs-emphasis-color);
+  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
+  --bs-table-active-color: var(--bs-emphasis-color);
+  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
+  --bs-table-hover-color: var(--bs-emphasis-color);
+  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
   width: 100%;
   margin-bottom: 1rem;
   vertical-align: top;
@@ -1056,7 +1060,7 @@ progress {
 .table-primary {
   --bs-table-color: #000;
   --bs-table-bg: #cfe2ff;
-  --bs-table-border-color: #bacbe6;
+  --bs-table-border-color: #a6b5cc;
   --bs-table-striped-bg: #c5d7f2;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #bacbe6;
@@ -1070,7 +1074,7 @@ progress {
 .table-secondary {
   --bs-table-color: #000;
   --bs-table-bg: #e2e3e5;
-  --bs-table-border-color: #cbccce;
+  --bs-table-border-color: #b5b6b7;
   --bs-table-striped-bg: #d7d8da;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #cbccce;
@@ -1084,7 +1088,7 @@ progress {
 .table-success {
   --bs-table-color: #000;
   --bs-table-bg: #d1e7dd;
-  --bs-table-border-color: #bcd0c7;
+  --bs-table-border-color: #a7b9b1;
   --bs-table-striped-bg: #c7dbd2;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #bcd0c7;
@@ -1098,7 +1102,7 @@ progress {
 .table-info {
   --bs-table-color: #000;
   --bs-table-bg: #cff4fc;
-  --bs-table-border-color: #badce3;
+  --bs-table-border-color: #a6c3ca;
   --bs-table-striped-bg: #c5e8ef;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #badce3;
@@ -1112,7 +1116,7 @@ progress {
 .table-warning {
   --bs-table-color: #000;
   --bs-table-bg: #fff3cd;
-  --bs-table-border-color: #e6dbb9;
+  --bs-table-border-color: #ccc2a4;
   --bs-table-striped-bg: #f2e7c3;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #e6dbb9;
@@ -1126,7 +1130,7 @@ progress {
 .table-danger {
   --bs-table-color: #000;
   --bs-table-bg: #f8d7da;
-  --bs-table-border-color: #dfc2c4;
+  --bs-table-border-color: #c6acae;
   --bs-table-striped-bg: #eccccf;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #dfc2c4;
@@ -1140,7 +1144,7 @@ progress {
 .table-light {
   --bs-table-color: #000;
   --bs-table-bg: #f8f9fa;
-  --bs-table-border-color: #dfe0e1;
+  --bs-table-border-color: #c6c7c8;
   --bs-table-striped-bg: #ecedee;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #dfe0e1;
@@ -1154,7 +1158,7 @@ progress {
 .table-dark {
   --bs-table-color: #fff;
   --bs-table-bg: #212529;
-  --bs-table-border-color: #373b3e;
+  --bs-table-border-color: #4d5154;
   --bs-table-striped-bg: #2c3034;
   --bs-table-striped-color: #fff;
   --bs-table-active-bg: #373b3e;
@@ -1659,7 +1663,7 @@ progress {
 .row-cols-3 > * {
   flex: 0 0 auto;
-  width: 33.3333333333%;
+  width: 33.33333333%;
 }
 .row-cols-4 > * {
@@ -1674,7 +1678,7 @@ progress {
 .row-cols-6 > * {
   flex: 0 0 auto;
-  width: 16.6666666667%;
+  width: 16.66666667%;
 }
 .col-auto {
@@ -1864,7 +1868,7 @@ progress {
   }
   .row-cols-sm-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-sm-4 > * {
     flex: 0 0 auto;
@@ -1876,7 +1880,7 @@ progress {
   }
   .row-cols-sm-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-sm-auto {
     flex: 0 0 auto;
@@ -2033,7 +2037,7 @@ progress {
   }
   .row-cols-md-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-md-4 > * {
     flex: 0 0 auto;
@@ -2045,7 +2049,7 @@ progress {
   }
   .row-cols-md-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-md-auto {
     flex: 0 0 auto;
@@ -2202,7 +2206,7 @@ progress {
   }
   .row-cols-lg-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-lg-4 > * {
     flex: 0 0 auto;
@@ -2214,7 +2218,7 @@ progress {
   }
   .row-cols-lg-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-lg-auto {
     flex: 0 0 auto;
@@ -2371,7 +2375,7 @@ progress {
   }
   .row-cols-xl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xl-4 > * {
     flex: 0 0 auto;
@@ -2383,7 +2387,7 @@ progress {
   }
   .row-cols-xl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xl-auto {
     flex: 0 0 auto;
@@ -2540,7 +2544,7 @@ progress {
   }
   .row-cols-xxl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xxl-4 > * {
     flex: 0 0 auto;
@@ -2552,7 +2556,7 @@ progress {
   }
   .row-cols-xxl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xxl-auto {
     flex: 0 0 auto;
@@ -2692,7 +2696,7 @@ progress {
   }
 }
 /*!
- * Bootstrap Utilities v5.3.1 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.3.2 (https://getbootstrap.com/)
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
@@ -2791,6 +2795,7 @@ progress {
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -2862,6 +2867,8 @@ progress {
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -3372,15 +3379,15 @@ progress {
 }
 .shadow {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  box-shadow: var(--bs-box-shadow) !important;
 }
 .shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+  box-shadow: var(--bs-box-shadow-sm) !important;
 }
 .shadow-lg {
-  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+  box-shadow: var(--bs-box-shadow-lg) !important;
 }
 .shadow-none {