@justifi/webcomponents 4.7.4 → 4.7.6

package/dist/collection/components/subaccount-details/subaccount-terms-details/subaccount-terms-details.css

@@ -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);
 }
 
@@ -974,7 +978,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)
  */
@@ -1073,6 +1077,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;
@@ -1144,6 +1149,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;
@@ -1654,15 +1661,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 {
@@ -6304,7 +6311,7 @@ progress {
 
 .row-cols-3 > * {
   flex: 0 0 auto;
-  width: 33.3333333333%;
+  width: 33.33333333%;
 }
 
 .row-cols-4 > * {
@@ -6319,7 +6326,7 @@ progress {
 
 .row-cols-6 > * {
   flex: 0 0 auto;
-  width: 16.6666666667%;
+  width: 16.66666667%;
 }
 
 .col-auto {
@@ -6509,7 +6516,7 @@ progress {
   }
   .row-cols-sm-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-sm-4 > * {
     flex: 0 0 auto;
@@ -6521,7 +6528,7 @@ progress {
   }
   .row-cols-sm-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-sm-auto {
     flex: 0 0 auto;
@@ -6678,7 +6685,7 @@ progress {
   }
   .row-cols-md-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-md-4 > * {
     flex: 0 0 auto;
@@ -6690,7 +6697,7 @@ progress {
   }
   .row-cols-md-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-md-auto {
     flex: 0 0 auto;
@@ -6847,7 +6854,7 @@ progress {
   }
   .row-cols-lg-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-lg-4 > * {
     flex: 0 0 auto;
@@ -6859,7 +6866,7 @@ progress {
   }
   .row-cols-lg-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-lg-auto {
     flex: 0 0 auto;
@@ -7016,7 +7023,7 @@ progress {
   }
   .row-cols-xl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xl-4 > * {
     flex: 0 0 auto;
@@ -7028,7 +7035,7 @@ progress {
   }
   .row-cols-xl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xl-auto {
     flex: 0 0 auto;
@@ -7185,7 +7192,7 @@ progress {
   }
   .row-cols-xxl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xxl-4 > * {
     flex: 0 0 auto;
@@ -7197,7 +7204,7 @@ progress {
   }
   .row-cols-xxl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xxl-auto {
     flex: 0 0 auto;

package/dist/collection/components/subaccount-details/subaccount-terms-details/subaccount-terms-details.js

@@ -1,48 +1,48 @@
 import { Host, h } from "@stencil/core";
 import { DetailItem, DetailSection } from "../../details/utils";
 export class SubaccountTermsDetails {
-  constructor() {
-    this.data = undefined;
-  }
-  render() {
-    var _a, _b, _c, _d;
-    return (h(Host, null, h(DetailSection, { sectionTitle: 'Terms and Conditions' }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "IP", value: (_a = this.data) === null || _a === void 0 ? void 0 : _a.ip }), h(DetailItem, { title: "Accepted?", value: (_c = (_b = this.data) === null || _b === void 0 ? void 0 : _b.accepted) === null || _c === void 0 ? void 0 : _c.toString() }), h(DetailItem, { title: "User Agent", value: (_d = this.data) === null || _d === void 0 ? void 0 : _d.user_agent }))))));
-  }
-  static get is() { return "subaccount-terms-details"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["subaccount-terms-details.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["subaccount-terms-details.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "data": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Terms",
-          "resolved": "Terms",
-          "references": {
-            "Terms": {
-              "location": "import",
-              "path": "../../../api/SubAccount",
-              "id": "src/api/SubAccount.ts::Terms"
+    constructor() {
+        this.data = undefined;
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h(Host, null, h(DetailSection, { sectionTitle: 'Terms and Conditions' }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "IP", value: (_a = this.data) === null || _a === void 0 ? void 0 : _a.ip }), h(DetailItem, { title: "Accepted?", value: (_c = (_b = this.data) === null || _b === void 0 ? void 0 : _b.accepted) === null || _c === void 0 ? void 0 : _c.toString() }), h(DetailItem, { title: "User Agent", value: (_d = this.data) === null || _d === void 0 ? void 0 : _d.user_agent }))))));
+    }
+    static get is() { return "subaccount-terms-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["subaccount-terms-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["subaccount-terms-details.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Terms",
+                    "resolved": "Terms",
+                    "references": {
+                        "Terms": {
+                            "location": "import",
+                            "path": "../../../api/SubAccount",
+                            "id": "src/api/SubAccount.ts::Terms"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      }
-    };
-  }
+        };
+    }
 }

package/dist/collection/components/subaccount-details/test/subaccount-details.spec.js

@@ -1,12 +1,12 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SubaccountDetails } from "../subaccount-details";
 describe('subaccount-details', () => {
-  it('fails to render if there is no account id or authtoken', async () => {
-    const page = await newSpecPage({
-      components: [SubaccountDetails],
-      html: `<justifi-subaccount-details></justifi-subaccount-details>`,
-    });
-    expect(page.root).toEqualHtml(`
+    it('fails to render if there is no account id or authtoken', async () => {
+        const page = await newSpecPage({
+            components: [SubaccountDetails],
+            html: `<justifi-subaccount-details></justifi-subaccount-details>`,
+        });
+        expect(page.root).toEqualHtml(`
       <justifi-subaccount-details>
         <mock:shadow-root>
           <main class="d-flex justify-content-center p-4 text-center" part="detail-empty-state" style="font-size: 1.2rem;">
@@ -17,5 +17,5 @@ describe('subaccount-details', () => {
        </mock:shadow-root>
       </justifi-subaccount-details>
     `);
-  });
+    });
 });

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

@@ -4,176 +4,176 @@ import { MapSubAccountStatusToBadge } from "../../utils/utils";
 import { Api, pagingDefaults } from "../../api";
 import { config } from "../../../config";
 export class SubaccountsList {
-  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.subaccounts = [];
-    this.loading = true;
-    this.errorMessage = undefined;
-    this.paging = pagingDefaults;
-    this.params = undefined;
-  }
-  updateOnPropChange() {
-    this.fetchData();
-  }
-  connectedCallback() {
-    this.fetchData();
-  }
-  async fetchData() {
-    if (!this.accountId || !this.authToken) {
-      this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
-      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.subaccounts = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = undefined;
     }
-    this.loading = true;
-    const api = Api(this.authToken, config.privateApiOrigin);
-    const endpoint = `account/${this.accountId}/seller_accounts`;
-    const response = await api.get(endpoint, this.params);
-    if (!response.error) {
-      this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
-      const data = response === null || response === void 0 ? void 0 : response.data.map(dataItem => new SubAccount(dataItem));
-      this.subaccounts = data;
+    updateOnPropChange() {
+        this.fetchData();
     }
-    else {
-      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    connectedCallback() {
+        this.fetchData();
     }
-    this.loading = false;
-  }
-  render() {
-    return (h(Host, null, h("justifi-table", { rowClickHandler: e => {
-        const clickSubAccountId = e.target.closest('tr').dataset.rowEntityId;
-        if (!clickSubAccountId) {
-          return;
+    async fetchData() {
+        if (!this.accountId || !this.authToken) {
+            this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
+            this.loading = false;
+            return;
         }
-        this.rowClicked.emit(this.subaccounts.find((subaccount) => subaccount.id === clickSubAccountId));
-      }, entityId: this.subaccounts.map((subaccount) => subaccount.id), columnData: [
-        ['Created On', 'The date and time each sub account was created'],
-        ['Name', 'The name provided for each sub account'],
-        ['Account	', 'The unique live or test account ID for each sub account'],
-        ['Card Rate	', 'The rate that determines the fees charged per payment, when paid by card'],
-        ['ACH Rate	', 'The rate that determines the fees charged per payment, when paid by eCheck'],
-        ['Status', 'The onboarding status of each sub account']
-      ], rowData: this.subaccounts.map((subaccount) => ([
-        {
-          type: 'head',
-          value: `
-                    <div>${subaccount.dateString}</div>
-                    <div>${subaccount.timeString}</div>
-                  `,
-        },
-        subaccount.name,
-        subaccount.id,
-        subaccount.cardRate,
-        subaccount.achRate,
-        {
-          type: 'inner',
-          value: MapSubAccountStatusToBadge(subaccount.status)
+        this.loading = true;
+        const api = Api(this.authToken, config.privateApiOrigin);
+        const endpoint = `account/${this.accountId}/seller_accounts`;
+        const response = await api.get(endpoint, this.params);
+        if (!response.error) {
+            this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
+            const data = response === null || response === void 0 ? void 0 : response.data.map(dataItem => new SubAccount(dataItem));
+            this.subaccounts = data;
         }
-      ])), 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-subaccounts-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["subaccounts-list.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["subaccounts-list.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
-      }
-    };
-  }
-  static get states() {
-    return {
-      "subaccounts": {},
-      "loading": {},
-      "errorMessage": {},
-      "paging": {},
-      "params": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "rowClicked",
-        "name": "subaccount-row-clicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "SubAccount",
-          "resolved": "SubAccount",
-          "references": {
-            "SubAccount": {
-              "location": "import",
-              "path": "../../api/SubAccount",
-              "id": "src/api/SubAccount.ts::SubAccount"
-            }
-          }
+        else {
+            this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "accountId",
-        "methodName": "updateOnPropChange"
-      }, {
-        "propName": "authToken",
-        "methodName": "updateOnPropChange"
-      }, {
-        "propName": "params",
-        "methodName": "updateOnPropChange"
-      }];
-  }
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, null, h("justifi-table", { rowClickHandler: e => {
+                const clickSubAccountId = e.target.closest('tr').dataset.rowEntityId;
+                if (!clickSubAccountId) {
+                    return;
+                }
+                this.rowClicked.emit(this.subaccounts.find((subaccount) => subaccount.id === clickSubAccountId));
+            }, entityId: this.subaccounts.map((subaccount) => subaccount.id), columnData: [
+                ['Created On', 'The date and time each sub account was created'],
+                ['Name', 'The name provided for each sub account'],
+                ['Account	', 'The unique live or test account ID for each sub account'],
+                ['Card Rate	', 'The rate that determines the fees charged per payment, when paid by card'],
+                ['ACH Rate	', 'The rate that determines the fees charged per payment, when paid by eCheck'],
+                ['Status', 'The onboarding status of each sub account']
+            ], rowData: this.subaccounts.map((subaccount) => ([
+                {
+                    type: 'head',
+                    value: `
+                    <div class='fw-bold'>${subaccount.dateString}</div>
+                    <div class='fw-bold'>${subaccount.timeString}</div>
+                  `,
+                },
+                subaccount.name,
+                subaccount.id,
+                subaccount.cardRate,
+                subaccount.achRate,
+                {
+                    type: 'inner',
+                    value: MapSubAccountStatusToBadge(subaccount.status)
+                }
+            ])), 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-subaccounts-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["subaccounts-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["subaccounts-list.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
+            }
+        };
+    }
+    static get states() {
+        return {
+            "subaccounts": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "params": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rowClicked",
+                "name": "subaccount-row-clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SubAccount",
+                    "resolved": "SubAccount",
+                    "references": {
+                        "SubAccount": {
+                            "location": "import",
+                            "path": "../../api/SubAccount",
+                            "id": "src/api/SubAccount.ts::SubAccount"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "accountId",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "authToken",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "params",
+                "methodName": "updateOnPropChange"
+            }];
+    }
 }

package/dist/collection/components/subaccounts-list/subaccounts-list.stories.js

@@ -1,10 +1,10 @@
 import { config } from "../../../config";
 export default {
-  title: 'dev/Components/SubaccountsList',
-  component: 'justifi-subaccounts-list',
-  parameters: {},
-  decorators: [
-    (Story) => `
+    title: 'dev/Components/SubaccountsList',
+    component: 'justifi-subaccounts-list',
+    parameters: {},
+    decorators: [
+        (Story) => `
       ${Story()}
       <script>
         window.addEventListener('subaccount-row-clicked', (e) => {
@@ -12,16 +12,16 @@ export default {
         })
       </script>
     `
-  ]
+    ]
 };
 class SubaccountsListArgs {
-  constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.privateAuthToken;
-    this['account-id'] = args['account-id'] || '';
-  }
+    constructor(args) {
+        this['auth-token'] = args['auth-token'] || config.privateAuthToken;
+        this['account-id'] = args['account-id'] || '';
+    }
 }
 const Template = (args) => {
-  return (`
+    return (`
     <justifi-subaccounts-list
       data-testid="justifi-subaccounts-list"
       auth-token="${args['auth-token']}"
@@ -34,7 +34,7 @@ Basic.args = new SubaccountsListArgs({});
 export const Styled = Template.bind({});
 Styled.args = new SubaccountsListArgs({});
 Styled.decorators = [
-  (Story) => `
+    (Story) => `
     ${Story()}
     <style>
       justifi-subaccounts-list::part(table-head-cell) {