@justifi/webcomponents 4.6.3 → 4.7.0-rc.0

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

@@ -0,0 +1,49 @@
+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"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=subaccount-terms-details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subaccount-terms-details.js","sourceRoot":"","sources":["../../../../../src/components/subaccount-details/subaccount-terms-details/subaccount-terms-details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAOhE,MAAM,OAAO,sBAAsB;;;;EAGjC,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI;MACH,EAAC,aAAa,IAAC,YAAY,EAAC,sBAAsB;QAChD,WAAK,KAAK,EAAC,UAAU;UACnB,WAAK,KAAK,EAAC,iBAAiB;YAC1B,EAAC,UAAU,IACT,KAAK,EAAC,IAAI,EACV,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,EAAE,GACpB;YACF,EAAC,UAAU,IACT,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,0CAAE,QAAQ,EAAE,GACtC;YACF,EAAC,UAAU,IACT,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,GAC5B,CACE,CACF,CACQ,CACX,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { Terms } from '../../../api/SubAccount';\nimport { DetailItem, DetailSection } from '../../details/utils';\n\n@Component({\n  tag: 'subaccount-terms-details',\n  styleUrl: 'subaccount-terms-details.scss',\n  shadow: true,\n})\nexport class SubaccountTermsDetails {\n  @Prop() data: Terms\n\n  render() {\n    return (\n      <Host>\n        <DetailSection sectionTitle='Terms and Conditions'>\n          <div class=\"row gy-3\">\n            <div class=\"col-12 col-md-6\">\n              <DetailItem\n                title=\"IP\"\n                value={this.data?.ip}\n              />\n              <DetailItem\n                title=\"Accepted?\"\n                value={this.data?.accepted?.toString()}\n              />\n              <DetailItem\n                title=\"User Agent\"\n                value={this.data?.user_agent}\n              />\n            </div>\n          </div>\n        </DetailSection>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+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(`
+      <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;">
+           <div>
+             Can not fetch any data without an AccountID and an AuthToken
+           </div>
+         </main>
+       </mock:shadow-root>
+      </justifi-subaccount-details>
+    `);
+  });
+});
+//# sourceMappingURL=subaccount-details.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subaccount-details.spec.js","sourceRoot":"","sources":["../../../../../src/components/subaccount-details/test/subaccount-details.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;IACtE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,2DAA2D;KAClE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SubaccountDetails } from '../subaccount-details';\n\ndescribe('subaccount-details', () => {\n  it('fails to render if there is no account id or authtoken', async () => {\n    const page = await newSpecPage({\n      components: [SubaccountDetails],\n      html: `<justifi-subaccount-details></justifi-subaccount-details>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <justifi-subaccount-details>\n        <mock:shadow-root>\n          <main class=\"d-flex justify-content-center p-4 text-center\" part=\"detail-empty-state\" style=\"font-size: 1.2rem;\">\n           <div>\n             Can not fetch any data without an AccountID and an AuthToken\n           </div>\n         </main>\n       </mock:shadow-root>\n      </justifi-subaccount-details>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,179 @@
+import { Host, h } from "@stencil/core";
+import { SubAccount } from "../../api/SubAccount";
+import { MapSubAccountStatusToBadge } from "../../utils/utils";
+import { Api, pagingDefaults } from "../../api";
+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;
+    }
+    this.loading = true;
+    const api = Api(this.authToken, process.env.PRIVATE_API_ORIGIN);
+    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;
+    }
+    else {
+      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    }
+    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>${subaccount.dateString}</div>
+                    <div>${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"
+      }];
+  }
+}
+//# sourceMappingURL=subaccounts-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subaccounts-list.js","sourceRoot":"","sources":["../../../../src/components/subaccounts-list/subaccounts-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { SubAccount } from '../../api/SubAccount';\nimport { MapSubAccountStatusToBadge } from '../../utils/utils';\nimport { Api, IApiResponseCollection, PagingInfo, pagingDefaults } from '../../api';\n\n@Component({\n  tag: 'justifi-subaccounts-list',\n  styleUrl: 'subaccounts-list.css',\n  shadow: true,\n})\nexport class SubaccountsList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() subaccounts: SubAccount[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @State() params: any;\n  @Event({\n    eventName: 'subaccount-row-clicked',\n    bubbles: true,\n  }) rowClicked: EventEmitter<SubAccount>;\n\n\n  @Watch('accountId')\n  @Watch('authToken')\n  @Watch('params')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  handleClickPrevious = (beforeCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.after_cursor;\n    this.params = ({ ...newParams, before_cursor: beforeCursor });\n  };\n\n  handleClickNext = (afterCursor: string) => {\n    const newParams: any = { ...this.params };\n    delete newParams.before_cursor;\n    this.params = ({ ...newParams, after_cursor: afterCursor });\n  };\n\n  async fetchData(): Promise<void> {\n    if (!this.accountId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const api = Api(this.authToken, process.env.PRIVATE_API_ORIGIN);\n    const endpoint = `account/${this.accountId}/seller_accounts`;\n\n\n    const response: IApiResponseCollection<SubAccount[]> = await api.get(endpoint, this.params);\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n      const data = response?.data.map(dataItem => new SubAccount(dataItem));\n      this.subaccounts = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          rowClickHandler={e => {\n            const clickSubAccountId = e.target.closest('tr').dataset.rowEntityId;\n            if (!clickSubAccountId) { return }\n            this.rowClicked.emit(this.subaccounts.find((subaccount) => subaccount.id === clickSubAccountId));\n          }}\n          entityId={this.subaccounts.map((subaccount) => subaccount.id)}\n          columnData={[\n            ['Created On', 'The date and time each sub account was created'],\n            ['Name', 'The name provided for each sub account'],\n            ['Account\t', 'The unique live or test account ID for each sub account'],\n            ['Card Rate\t', 'The rate that determines the fees charged per payment, when paid by card'],\n            ['ACH Rate\t', 'The rate that determines the fees charged per payment, when paid by eCheck'],\n            ['Status', 'The onboarding status of each sub account']\n          ]}\n          rowData={\n            this.subaccounts.map((subaccount) => (\n              [\n                {\n                  type: 'head',\n                  value: `\n                    <div>${subaccount.dateString}</div>\n                    <div>${subaccount.timeString}</div>\n                  `,\n                },\n                subaccount.name,\n                subaccount.id,\n                subaccount.cardRate,\n                subaccount.achRate,\n                {\n                  type: 'inner',\n                  value: MapSubAccountStatusToBadge(subaccount.status)\n                }\n              ]\n            ))\n          }\n          loading={this.loading}\n          error-message={this.errorMessage}\n          params={this.params}\n          paging={{\n            ...this.paging,\n            handleClickNext: this.handleClickNext,\n            handleClickPrevious: this.handleClickPrevious\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,69 @@
+export default {
+  title: 'dev/Components/SubaccountsList',
+  component: 'justifi-subaccounts-list',
+  parameters: {},
+  decorators: [
+    (Story) => `
+      ${Story()}
+      <script>
+        window.addEventListener('subaccount-row-clicked', (e) => {
+          console.log(e);
+        })
+      </script>
+    `
+  ]
+};
+class SubaccountsListArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || process.env.PRIVATE_AUTH_TOKEN;
+    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PLATFORM_ACCOUNT_ID;
+  }
+}
+const Template = (args) => {
+  return (`
+    <justifi-subaccounts-list
+      data-testid="justifi-subaccounts-list"
+      auth-token="${args['auth-token']}"
+      account-id="${args['account-id']}"
+    />
+  `);
+};
+export const Basic = Template.bind({});
+Basic.args = new SubaccountsListArgs({});
+export const Styled = Template.bind({});
+Styled.args = new SubaccountsListArgs({});
+Styled.decorators = [
+  (Story) => `
+    ${Story()}
+    <style>
+      justifi-subaccounts-list::part(table-head-cell) {
+        background-color: #F4F4F6;
+      }
+      justifi-subaccounts-list::part(pagination-bar) {
+        background-color: #F4F4F6;
+      }
+      justifi-subaccounts-list::part(arrow) {
+        --bs-btn-disabled-bg: #212529;
+        --bs-btn-disabled-border-color: #212529;
+        --bs-btn-bg: #212529;
+        --bs-btn-border-color: #212529;
+        --bs-btn-hover-bg: #fccc32;
+        --bs-btn-hover-border-color: #fccc32;
+      }
+      justifi-subaccounts-list::part(error-state) {
+        color: red;
+        background-color: #EEEEF5;
+      }
+      justifi-subaccounts-list::part(loading-state-cell) {
+        background-color: #EEEEF5;
+      }
+      justifi-subaccounts-list::part(table-row) {
+        background-color: #EEEEF5;
+      }
+      justifi-subaccounts-list::part(table-row-even) {
+        background-color: #F4F4F6;
+      }
+    </style>
+  `
+];
+//# sourceMappingURL=subaccounts-list.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subaccounts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/subaccounts-list/subaccounts-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,gCAAgC;EACvC,SAAS,EAAE,0BAA0B;EACrC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB;EAIvB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;IAC1E,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC;EACrF,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAyB,EAAE,EAAE;EAC7C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,mBAAmB,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,mBAAmB,CAAC,EAAE,CAAC,CAAC;AAC1C,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["export default {\n  title: 'dev/Components/SubaccountsList',\n  component: 'justifi-subaccounts-list',\n  parameters: {},\n  decorators: [\n    (Story) => `\n      ${Story()}\n      <script>\n        window.addEventListener('subaccount-row-clicked', (e) => {\n          console.log(e);\n        })\n      </script>\n    `\n  ]\n};\n\nclass SubaccountsListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || process.env.PRIVATE_AUTH_TOKEN;\n    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PLATFORM_ACCOUNT_ID;\n  }\n}\n\nconst Template = (args: SubaccountsListArgs) => {\n  return (`\n    <justifi-subaccounts-list\n      data-testid=\"justifi-subaccounts-list\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new SubaccountsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new SubaccountsListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-subaccounts-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-subaccounts-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-subaccounts-list::part(arrow) {\n        --bs-btn-disabled-bg: #212529;\n        --bs-btn-disabled-border-color: #212529;\n        --bs-btn-bg: #212529;\n        --bs-btn-border-color: #212529;\n        --bs-btn-hover-bg: #fccc32;\n        --bs-btn-hover-border-color: #fccc32;\n      }\n      justifi-subaccounts-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-subaccounts-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-subaccounts-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-subaccounts-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n"]}

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

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('subaccounts-list', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<justifi-subaccounts-list></justifi-subaccounts-list>');
+    const element = await page.find('justifi-subaccounts-list');
+    expect(element).toHaveClass('hydrated');
+  });
+});
+//# sourceMappingURL=subaccounts-list.e2e.js.map

package/dist/collection/components/subaccounts-list/test/subaccounts-list.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subaccounts-list.e2e.js","sourceRoot":"","sources":["../../../../../src/components/subaccounts-list/test/subaccounts-list.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,uDAAuD,CAAC,CAAC;IAE/E,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC5D,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('subaccounts-list', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<justifi-subaccounts-list></justifi-subaccounts-list>');\n\n    const element = await page.find('justifi-subaccounts-list');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

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

@@ -0,0 +1,34 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SubaccountsList } from "../subaccounts-list";
+describe('subaccounts-list', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SubaccountsList],
+      html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <justifi-subaccounts-list>
+        <mock:shadow-root>
+          <justifi-table error-message="Can not fetch any data without an AccountID and an AuthToken">
+        </mock:shadow-root>
+      </justifi-subaccounts-list>
+    `);
+  });
+  it('stops loading', async () => {
+    const page = await newSpecPage({
+      components: [SubaccountsList],
+      html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,
+    });
+    const loading = page.root.__shadowRoot.querySelector('.loading-state');
+    expect(loading).toEqual(null);
+  });
+  it('renders an error when not given proper auth data', async () => {
+    const page = await newSpecPage({
+      components: [SubaccountsList],
+      html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,
+    });
+    const error = page.root.__shadowRoot.querySelector('.error-state');
+    expect(error).toBeDefined();
+  });
+});
+//# sourceMappingURL=subaccounts-list.spec.js.map

package/dist/collection/components/subaccounts-list/test/subaccounts-list.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subaccounts-list.spec.js","sourceRoot":"","sources":["../../../../../src/components/subaccounts-list/test/subaccounts-list.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,uDAAuD;KAC9D,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,uDAAuD;KAC9D,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAEvE,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;EAChC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;IAChE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,uDAAuD;KAC9D,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAEnE,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;EAC9B,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SubaccountsList } from '../subaccounts-list';\n\ndescribe('subaccounts-list', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SubaccountsList],\n      html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-subaccounts-list>\n        <mock:shadow-root>\n          <justifi-table error-message=\"Can not fetch any data without an AccountID and an AuthToken\">\n        </mock:shadow-root>\n      </justifi-subaccounts-list>\n    `);\n  });\n\n  it('stops loading', async () => {\n    const page = await newSpecPage({\n      components: [SubaccountsList],\n      html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,\n    });\n\n    const loading = page.root.__shadowRoot.querySelector('.loading-state');\n\n    expect(loading).toEqual(null);\n  });\n\n  it('renders an error when not given proper auth data', async () => {\n    const page = await newSpecPage({\n      components: [SubaccountsList],\n      html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,\n    });\n\n    const error = page.root.__shadowRoot.querySelector('.error-state');\n\n    expect(error).toBeDefined();\n  });\n\n});\n"]}

package/dist/collection/components/table/table.js

@@ -1,6 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { pagingDefaults } from "../table/table-utils";
-const ExtendedPagingDefaults = Object.assign(Object.assign({}, pagingDefaults), { onPrev: () => { }, onNext: () => { } });
+import { ExtendedPagingDefaults } from "../../api/Pagination";
 export class Table {
   constructor() {
     this.emptyState = () => {
@@ -15,20 +14,12 @@ export class Table {
       var _a;
       return (h("tr", null, h("td", { class: "loading-state", part: "loading-state-cell", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, h("div", { part: "loading-state-spinner", class: "spinner-border", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")))));
     };
-    this.paginationBar = () => {
-      return (h("nav", { "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { class: "pagination m-0" }, h("li", { onClick: (e) => {
-          e.preventDefault();
-          this.paging.onPrev();
-        }, part: `previous-button${this.paging.has_previous ? '' : ' button-disabled'}`, class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { href: "#", class: "page-link" }, h("span", { class: "me-1", part: "arrow arrow-left" }, "\u00AB"), h("span", { part: "previous-button-text" }, "Previous"))), h("li", { onClick: (e) => {
-          e.preventDefault();
-          this.paging.onNext();
-        }, part: `${this.paging.has_next ? '' : ' button-disabled'}`, class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { href: "#", class: "page-link" }, h("span", { part: "next-button-text" }, "Next"), h("span", { class: "ms-1", part: "arrow arrow-right" }, "\u00BB"))))));
-    };
     this.loading = true;
     this.errorMessage = '';
     this.rowData = [];
     this.columnData = undefined;
     this.paging = ExtendedPagingDefaults;
+    this.params = {};
     this.entityId = undefined;
     this.rowClickHandler = undefined;
   }
@@ -48,7 +39,7 @@ export class Table {
                   : h("th", { scope: "row", part: "table-cell" }, h("td", { part: "table-cell", innerHTML: dataEntry.value })));
               })));
             })), this.paging &&
-        h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: (_c = this.columnData) === null || _c === void 0 ? void 0 : _c.length }, this.paginationBar()))))
+        h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: (_c = this.columnData) === null || _c === void 0 ? void 0 : _c.length }, h("pagination-menu", { paging: this.paging, params: this.params })))))
       :
         h("div", { "data-test-id": "empty-error-state" }, "Column data is required")));
   }
@@ -179,6 +170,30 @@ export class Table {
         },
         "defaultValue": "ExtendedPagingDefaults"
       },
+      "params": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "TableProps['params']",
+          "resolved": "any",
+          "references": {
+            "TableProps": {
+              "location": "local",
+              "path": "/home/runner/work/web-component-library/web-component-library/stencil-library/src/components/table/table.tsx",
+              "id": "src/components/table/table.tsx::TableProps"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "params",
+        "reflect": false,
+        "defaultValue": "{}"
+      },
       "entityId": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { PagingInfo, pagingDefaults } from '../table/table-utils';\n\ninterface ExtendedPagingInfo extends PagingInfo {\n  onPrev: () => void;\n  onNext: () => void;\n}\n\nconst ExtendedPagingDefaults: ExtendedPagingInfo = {\n  ...pagingDefaults,\n  onPrev: () => {},\n  onNext: () => {},\n}\n\nexport interface TableProps {\n  loading: boolean;\n  errorMessage: string;\n  columnData: (string|string[])[];\n  rowData: any[];\n  paging: ExtendedPagingInfo;\n}\n\n@Component({\n  tag: 'justifi-table',\n  styleUrl: './table.scss',\n  shadow: true,\n})\n\nexport class Table {\n  @Prop() loading: TableProps['loading'] = true;\n  @Prop() errorMessage: TableProps['errorMessage'] = '';\n  @Prop() rowData: TableProps['rowData'] = [];\n  @Prop() columnData!: TableProps['columnData'];\n  @Prop() paging: TableProps['paging'] = ExtendedPagingDefaults;\n  @Prop() entityId: string[];\n  @Prop() rowClickHandler: (e: any) => any;\n\n  showEmptyState() {\n    return this.rowData ? this.rowData.length < 1 : true;\n  }\n\n  emptyState = () => (\n    <tr>\n      <td class=\"empty-state\" part=\"empty-state\" colSpan={this.columnData?.length} style={{ textAlign: 'center' }}>No payments to show</td>\n    </tr>\n  );\n\n  errorState = () => (\n    <tr>\n      <td class=\"error-state\" part=\"error-state\" colSpan={this.columnData?.length} style={{ textAlign: 'center' }}>\n        An unexpected error occurred: {this.errorMessage}\n      </td>\n    </tr>\n  );\n\n  loadingState = () => (\n    <tr>\n      <td class=\"loading-state\" part=\"loading-state-cell\" colSpan={this.columnData?.length} style={{ textAlign: 'center' }}>\n        <div part=\"loading-state-spinner\" class=\"spinner-border\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n      </td>\n    </tr>\n  );\n\n  paginationBar = () => {\n    return (\n      <nav aria-label=\"Table pagination\" class=\"d-flex justify-content-end gap-3\">\n        <ul class=\"pagination m-0\">\n          <li\n            onClick={(e) => {\n              e.preventDefault();\n              this.paging.onPrev();\n            }}\n            part={`previous-button${this.paging.has_previous ? '' : ' button-disabled'}`}\n            class={`page-item ${this.paging.has_previous ? '' : ' disabled'}`}\n          >\n            <a href=\"#\" class=\"page-link\">\n              <span class=\"me-1\" part=\"arrow arrow-left\">&laquo;</span>\n              <span part=\"previous-button-text\">Previous</span>\n            </a>\n          </li>\n          <li\n            onClick={(e) => {\n              e.preventDefault();\n              this.paging.onNext();\n            }}\n            part={`${this.paging.has_next ? '' : ' button-disabled'}`}\n            class={`page-item ${this.paging.has_next ? '' : ' disabled'}`}\n          >\n            <a href=\"#\" class=\"page-link\">\n              <span part=\"next-button-text\">Next</span>\n              <span class=\"ms-1\" part=\"arrow arrow-right\">&raquo;</span>\n            </a>\n          </li>\n        </ul>\n      </nav>\n    )\n  };\n\n  render() {\n    return (\n      <Host exportparts=\"\n        table-head,table-head-row,table-head-cell,table-body,table-row,table-row-even,\n        table-row-odd,table-cell,loading-state-cell,loading-state-spinner,error-state,\n        empty-state,pagination-bar,arrow,arrow-left,arrow-right,button-disabled,\n        previous-button-text,next-button-text\n      \">\n        {this.columnData ?\n        <table class=\"table table-hover\">\n          <thead class=\"table-head sticky-top\" part=\"table-head\">\n            <tr class=\"table-light\" part='table-head-row'>\n              {\n                this.columnData?.map((column) =>\n                  <th part=\"table-head-cell\" scope=\"col\" title={Array.isArray(column) ? column[1] : ''}>\n                    {!Array.isArray(column) ? column : column[0]}\n                  </th>\n                )\n              }\n            </tr>\n          </thead>\n          <tbody class=\"table-body\" part='table-body'>\n            {\n              this.loading ? this.loadingState() :\n              this.errorMessage ? this.errorState() :\n              this.showEmptyState() ? this.emptyState() :\n              this.rowData?.map((data, index) => {\n                return (\n                <tr\n                  data-row-entity-id={this.entityId[index]}\n                  onClick={e => this.rowClickHandler ? this.rowClickHandler(e) : null}\n                  part={`table-row${index%2 ? ' table-row-even' : ' table-row-odd'}`}\n                >\n                  {\n                    data.map((dataEntry: any) =>\n                      { return (\n                          !dataEntry?.type\n                          ? <td part=\"table-cell\">{dataEntry}</td>\n                          : <th scope=\"row\" part=\"table-cell\">\n                              <td part=\"table-cell\" innerHTML={dataEntry.value}></td>\n                            </th>\n                        )\n                      }\n                    )\n                  }\n                </tr>\n                )\n              })\n            }\n          </tbody>\n          {this.paging &&\n            <tfoot class=\"sticky-bottom\">\n              <tr class=\"table-light align-middle\">\n                <td part=\"pagination-bar\" colSpan={this.columnData?.length}>\n                  {this.paginationBar()}\n                </td>\n              </tr>\n            </tfoot>\n          }\n        </table>\n        :\n        <div data-test-id=\"empty-error-state\">Column data is required</div>}\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { ExtendedPagingDefaults, ExtendedPagingInfo } from '../../api/Pagination';\n\nexport interface TableProps {\n  loading: boolean;\n  errorMessage: string;\n  columnData: (string|string[])[];\n  rowData: any[];\n  paging: ExtendedPagingInfo;\n  params: any\n}\n\n@Component({\n  tag: 'justifi-table',\n  styleUrl: './table.scss',\n  shadow: true,\n})\n\nexport class Table {\n  @Prop() loading: TableProps['loading'] = true;\n  @Prop() errorMessage: TableProps['errorMessage'] = '';\n  @Prop() rowData: TableProps['rowData'] = [];\n  @Prop() columnData!: TableProps['columnData'];\n  @Prop() paging: TableProps['paging'] = ExtendedPagingDefaults;\n  @Prop() params: TableProps['params'] = {};\n  @Prop() entityId: string[];\n  @Prop() rowClickHandler: (e: any) => any;\n\n  showEmptyState() {\n    return this.rowData ? this.rowData.length < 1 : true;\n  }\n\n  emptyState = () => (\n    <tr>\n      <td class=\"empty-state\" part=\"empty-state\" colSpan={this.columnData?.length} style={{ textAlign: 'center' }}>No payments to show</td>\n    </tr>\n  );\n\n  errorState = () => (\n    <tr>\n      <td class=\"error-state\" part=\"error-state\" colSpan={this.columnData?.length} style={{ textAlign: 'center' }}>\n        An unexpected error occurred: {this.errorMessage}\n      </td>\n    </tr>\n  );\n\n  loadingState = () => (\n    <tr>\n      <td class=\"loading-state\" part=\"loading-state-cell\" colSpan={this.columnData?.length} style={{ textAlign: 'center' }}>\n        <div part=\"loading-state-spinner\" class=\"spinner-border\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n      </td>\n    </tr>\n  );\n\n  render() {\n    return (\n      <Host exportparts=\"\n        table-head,table-head-row,table-head-cell,table-body,table-row,table-row-even,\n        table-row-odd,table-cell,loading-state-cell,loading-state-spinner,error-state,\n        empty-state,pagination-bar,arrow,arrow-left,arrow-right,button-disabled,\n        previous-button-text,next-button-text\n      \">\n        {this.columnData ?\n        <table class=\"table table-hover\">\n          <thead class=\"table-head sticky-top\" part=\"table-head\">\n            <tr class=\"table-light\" part='table-head-row'>\n              {\n                this.columnData?.map((column) =>\n                  <th part=\"table-head-cell\" scope=\"col\" title={Array.isArray(column) ? column[1] : ''}>\n                    {!Array.isArray(column) ? column : column[0]}\n                  </th>\n                )\n              }\n            </tr>\n          </thead>\n          <tbody class=\"table-body\" part='table-body'>\n            {\n              this.loading ? this.loadingState() :\n              this.errorMessage ? this.errorState() :\n              this.showEmptyState() ? this.emptyState() :\n              this.rowData?.map((data, index) => {\n                return (\n                <tr\n                  data-row-entity-id={this.entityId[index]}\n                  onClick={e => this.rowClickHandler ? this.rowClickHandler(e) : null}\n                  part={`table-row${index%2 ? ' table-row-even' : ' table-row-odd'}`}\n                >\n                  {\n                    data.map((dataEntry: any) =>\n                      { return (\n                          !dataEntry?.type\n                          ? <td part=\"table-cell\">{dataEntry}</td>\n                          : <th scope=\"row\" part=\"table-cell\">\n                              <td part=\"table-cell\" innerHTML={dataEntry.value}></td>\n                            </th>\n                        )\n                      }\n                    )\n                  }\n                </tr>\n                )\n              })\n            }\n          </tbody>\n          {this.paging &&\n            <tfoot class=\"sticky-bottom\">\n              <tr class=\"table-light align-middle\">\n                <td part=\"pagination-bar\" colSpan={this.columnData?.length}>\n                  <pagination-menu paging={this.paging} params={this.params} />\n                </td>\n              </tr>\n            </tfoot>\n          }\n        </table>\n        :\n        <div data-test-id=\"empty-error-state\">Column data is required</div>}\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/table/test/table.spec.js

@@ -36,8 +36,8 @@ describe('justifi-table', () => {
       end_cursor: '',
       has_previous: false,
       has_next: false,
-      onPrev: () => { },
-      onNext: () => { }
+      handleClickNext: () => { },
+      handleClickPrevious: () => { }
     };
     const page = await newSpecPage({
       components: [Table],

package/dist/collection/components/table/test/table.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.spec.js","sourceRoot":"","sources":["../../../../../src/components/table/test/table.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { Table } from '../table';\n\ndescribe('justifi-table', () => {\n  it('does not render properly without columnData', async () => {\n    const page = await newSpecPage({\n      components: [Table],\n      html: `<justifi-table></justifi-table>`,\n    });\n\n    const error = page.root.shadowRoot.querySelector('[data-test-id=\"empty-error-state\"]');\n    expect(error).toBeTruthy();\n  });\n\n  it('stops loading', async () => {\n    const page = await newSpecPage({\n      components: [Table],\n      template: () => <justifi-table columnData={['test', 'test']} loading={false} />\n    });\n\n    const loading = page.root.shadowRoot.querySelector('.loading-state');\n\n    expect(loading).toBeNull();\n  });\n\n  it('renders the state and displays error message passed', async () => {\n    const ERROR_TEXT = 'error-123';\n    const page = await newSpecPage({\n      components: [Table],\n      template: () => <justifi-table columnData={['test', 'test']} loading={false} errorMessage={ERROR_TEXT} />\n    });\n\n    const error = page.root.shadowRoot.querySelector('.error-state');\n    expect(error).not.toBeNull();\n\n    const errorText = error.innerHTML;\n    expect(errorText).toBe(`An unexpected error occurred: ${ERROR_TEXT}`);\n  });\n\n  it('renders the pagination bar when pagination is passed', async () => {\n    const PAG = {\n      amount: 25,\n      start_cursor: '',\n      end_cursor: '',\n      has_previous: false,\n      has_next: false,\n      onPrev: () => {},\n      onNext: () => {}\n    };\n    const page = await newSpecPage({\n      components: [Table],\n      template: () => <justifi-table columnData={['test', 'test']} loading={false} paging={PAG} />\n    });\n\n    const error = page.root.shadowRoot.querySelector('[part=\"pagination-bar\"]');\n    expect(error).not.toBeNull();\n  });\n\n  it('has an ID for each row', async () => {\n    const page = await newSpecPage({\n      components: [Table],\n      template: () => <justifi-table entityId={['123']} rowData={[['test']]} columnData={['test', 'test']} loading={false} />\n    });\n\n    const row: HTMLElement = page.root.shadowRoot.querySelector('[data-row-entity-id]');\n    expect(row).not.toBeNull();\n    expect(row.dataset.rowEntityId).toBe('123');\n  });\n});\n"]}
+{"version":3,"file":"table.spec.js","sourceRoot":"","sources":["../../../../../src/components/table/test/table.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { Table } from '../table';\n\ndescribe('justifi-table', () => {\n  it('does not render properly without columnData', async () => {\n    const page = await newSpecPage({\n      components: [Table],\n      html: `<justifi-table></justifi-table>`,\n    });\n\n    const error = page.root.shadowRoot.querySelector('[data-test-id=\"empty-error-state\"]');\n    expect(error).toBeTruthy();\n  });\n\n  it('stops loading', async () => {\n    const page = await newSpecPage({\n      components: [Table],\n      template: () => <justifi-table columnData={['test', 'test']} loading={false} />\n    });\n\n    const loading = page.root.shadowRoot.querySelector('.loading-state');\n\n    expect(loading).toBeNull();\n  });\n\n  it('renders the state and displays error message passed', async () => {\n    const ERROR_TEXT = 'error-123';\n    const page = await newSpecPage({\n      components: [Table],\n      template: () => <justifi-table columnData={['test', 'test']} loading={false} errorMessage={ERROR_TEXT} />\n    });\n\n    const error = page.root.shadowRoot.querySelector('.error-state');\n    expect(error).not.toBeNull();\n\n    const errorText = error.innerHTML;\n    expect(errorText).toBe(`An unexpected error occurred: ${ERROR_TEXT}`);\n  });\n\n  it('renders the pagination bar when pagination is passed', async () => {\n    const PAG = {\n      amount: 25,\n      start_cursor: '',\n      end_cursor: '',\n      has_previous: false,\n      has_next: false,\n      handleClickNext: () => {},\n      handleClickPrevious: () => {}\n    };\n    const page = await newSpecPage({\n      components: [Table],\n      template: () => <justifi-table columnData={['test', 'test']} loading={false} paging={PAG} />\n    });\n\n    const error = page.root.shadowRoot.querySelector('[part=\"pagination-bar\"]');\n    expect(error).not.toBeNull();\n  });\n\n  it('has an ID for each row', async () => {\n    const page = await newSpecPage({\n      components: [Table],\n      template: () => <justifi-table entityId={['123']} rowData={[['test']]} columnData={['test', 'test']} loading={false} />\n    });\n\n    const row: HTMLElement = page.root.shadowRoot.querySelector('[data-row-entity-id]');\n    expect(row).not.toBeNull();\n    expect(row.dataset.rowEntityId).toBe('123');\n  });\n});\n"]}