@justifi/webcomponents 4.7.4 → 4.7.6

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

@@ -1,230 +1,223 @@
 import { Host, h } from "@stencil/core";
 import { ExtendedPagingDefaults } from "../../api/Pagination";
 import { tableExportedParts } from "./exported-parts";
+import { EmptyState, ErrorState, LoadingState } from "./utils";
 export class Table {
-  constructor() {
-    this.emptyState = () => {
-      var _a;
-      return (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, "No results")));
-    };
-    this.errorState = () => {
-      var _a;
-      return (h("tr", null, h("td", { class: "error-state", part: "error-state", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, "An unexpected error occurred: ", this.errorMessage)));
-    };
-    this.loadingState = () => {
-      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.loading = true;
-    this.errorMessage = '';
-    this.rowData = [];
-    this.columnData = undefined;
-    this.paging = ExtendedPagingDefaults;
-    this.params = {};
-    this.entityId = undefined;
-    this.rowClickHandler = undefined;
-  }
-  showEmptyState() {
-    return this.rowData ? this.rowData.length < 1 : true;
-  }
-  render() {
-    var _a, _b, _c;
-    return (h(Host, { exportparts: tableExportedParts }, this.columnData ?
-      h("div", { class: "table-wrapper" }, h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light text-nowrap", part: 'table-head-row' }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0])))), h("tbody", { class: "table-body", part: 'table-body' }, this.loading ? this.loadingState() :
-        this.errorMessage ? this.errorState() :
-          this.showEmptyState() ? this.emptyState() :
-            (_b = this.rowData) === null || _b === void 0 ? void 0 : _b.map((data, index) => {
-              return (h("tr", { "data-row-entity-id": this.entityId[index], onClick: e => this.rowClickHandler ? this.rowClickHandler(e) : null, part: `table-row${index % 2 ? ' table-row-even' : ' table-row-odd'}` }, data.map((dataEntry) => {
-                return (!(dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type)
-                  ? h("td", { part: "table-cell" }, dataEntry)
-                  : 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 }, h("pagination-menu", { paging: this.paging, params: this.params }))))))
-      :
-        h("div", { "data-test-id": "empty-error-state" }, "Column data is required")));
-  }
-  static get is() { return "justifi-table"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["./table.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["table.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "TableProps['loading']",
-          "resolved": "boolean",
-          "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"
+    constructor() {
+        this.loading = true;
+        this.errorMessage = '';
+        this.rowData = [];
+        this.columnData = undefined;
+        this.paging = ExtendedPagingDefaults;
+        this.params = {};
+        this.entityId = undefined;
+        this.rowClickHandler = undefined;
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState;
+    }
+    render() {
+        var _a, _b;
+        return (h(Host, { exportparts: tableExportedParts }, h("div", { class: "table-wrapper" }, h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light text-nowrap", part: 'table-head-row' }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0])))), h("tbody", { class: "table-body", part: 'table-body' }, this.loading && LoadingState(this.columnData.length), this.showEmptyState && EmptyState(this.columnData.length), this.showErrorState && ErrorState(this.columnData.length, this.errorMessage), this.showRowData && (this.rowData.map((data, index) => {
+            return (h("tr", { "data-row-entity-id": this.entityId[index], onClick: e => this.rowClickHandler ? this.rowClickHandler(e) : null, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => {
+                let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
+                if (nestedHtml) {
+                    return (h("td", { part: "table-cell", innerHTML: dataEntry.value }));
+                }
+                else {
+                    return (h("td", { part: "table-cell" }, dataEntry));
+                }
+            })));
+        }))), this.paging &&
+            h("tfoot", { class: "sticky-bottom" }, h("tr", { class: "table-light align-middle" }, h("td", { part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { paging: this.paging, params: this.params }))))))));
+    }
+    static get is() { return "justifi-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableProps['loading']",
+                    "resolved": "boolean",
+                    "references": {
+                        "TableProps": {
+                            "location": "local",
+                            "path": "/home/runner/work/web-component-library/web-component-library/packages/webcomponents/src/components/table/table.tsx",
+                            "id": "src/components/table/table.tsx::TableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableProps['errorMessage']",
+                    "resolved": "string",
+                    "references": {
+                        "TableProps": {
+                            "location": "local",
+                            "path": "/home/runner/work/web-component-library/web-component-library/packages/webcomponents/src/components/table/table.tsx",
+                            "id": "src/components/table/table.tsx::TableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "rowData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableProps['rowData']",
+                    "resolved": "any[]",
+                    "references": {
+                        "TableProps": {
+                            "location": "local",
+                            "path": "/home/runner/work/web-component-library/web-component-library/packages/webcomponents/src/components/table/table.tsx",
+                            "id": "src/components/table/table.tsx::TableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "columnData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableProps['columnData']",
+                    "resolved": "(string | string[])[]",
+                    "references": {
+                        "TableProps": {
+                            "location": "local",
+                            "path": "/home/runner/work/web-component-library/web-component-library/packages/webcomponents/src/components/table/table.tsx",
+                            "id": "src/components/table/table.tsx::TableProps"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "paging": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableProps['paging']",
+                    "resolved": "ExtendedPagingInfo",
+                    "references": {
+                        "TableProps": {
+                            "location": "local",
+                            "path": "/home/runner/work/web-component-library/web-component-library/packages/webcomponents/src/components/table/table.tsx",
+                            "id": "src/components/table/table.tsx::TableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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/packages/webcomponents/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,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "rowClickHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(e: any) => any",
+                    "resolved": "(e: any) => any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "errorMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "TableProps['errorMessage']",
-          "resolved": "string",
-          "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": "error-message",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "rowData": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "TableProps['rowData']",
-          "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": ""
-        },
-        "defaultValue": "[]"
-      },
-      "columnData": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "TableProps['columnData']",
-          "resolved": "(string | string[])[]",
-          "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": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "paging": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "TableProps['paging']",
-          "resolved": "ExtendedPagingInfo",
-          "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": ""
-        },
-        "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,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "rowClickHandler": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(e: any) => any",
-          "resolved": "(e: any) => any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      }
-    };
-  }
+        };
+    }
 }

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

@@ -2,57 +2,73 @@ import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Table } from "../table";
 describe('justifi-table', () => {
-  it('does not render properly without columnData', async () => {
-    const page = await newSpecPage({
-      components: [Table],
-      html: `<justifi-table></justifi-table>`,
+    it('enters loading state when loading is true', async () => {
+        const page = await newSpecPage({
+            components: [Table],
+            template: () => h("justifi-table", { columnData: ['test', 'test'], loading: true })
+        });
+        const loading = page.root.shadowRoot.querySelector('.loading-state');
+        expect(loading).toBeTruthy();
+        const loadingSpinner = page.root.shadowRoot.querySelector('.spinner-border');
+        expect(loadingSpinner).toBeTruthy();
+        const error = await page.root.shadowRoot.querySelector('.error-state');
+        expect(error).toBeNull();
     });
-    const error = page.root.shadowRoot.querySelector('[data-test-id="empty-error-state"]');
-    expect(error).toBeTruthy();
-  });
-  it('stops loading', async () => {
-    const page = await newSpecPage({
-      components: [Table],
-      template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false })
+    it('renders the empty state when no data is passed', async () => {
+        const page = await newSpecPage({
+            components: [Table],
+            template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false })
+        });
+        const empty = page.root.shadowRoot.querySelector('.empty-state');
+        expect(empty).toBeTruthy();
+        const emptyStateMessage = empty.innerHTML;
+        expect(emptyStateMessage).toBe('No results');
+        const error = await page.root.shadowRoot.querySelector('.error-state');
+        expect(error).toBeNull();
     });
-    const loading = page.root.shadowRoot.querySelector('.loading-state');
-    expect(loading).toBeNull();
-  });
-  it('renders the state and displays error message passed', async () => {
-    const ERROR_TEXT = 'error-123';
-    const page = await newSpecPage({
-      components: [Table],
-      template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false, errorMessage: ERROR_TEXT })
+    it('renders the state and displays error message passed', async () => {
+        const ERROR_TEXT = 'error-123';
+        const page = await newSpecPage({
+            components: [Table],
+            template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false, errorMessage: ERROR_TEXT })
+        });
+        const loading = page.root.shadowRoot.querySelector('.loading-state');
+        expect(loading).toBeNull();
+        const error = page.root.shadowRoot.querySelector('.error-state');
+        expect(error).toBeTruthy();
+        const errorText = error.innerHTML;
+        expect(errorText).toBe(`An unexpected error occurred: ${ERROR_TEXT}`);
     });
-    const error = page.root.shadowRoot.querySelector('.error-state');
-    expect(error).not.toBeNull();
-    const errorText = error.innerHTML;
-    expect(errorText).toBe(`An unexpected error occurred: ${ERROR_TEXT}`);
-  });
-  it('renders the pagination bar when pagination is passed', async () => {
-    const PAG = {
-      amount: 25,
-      start_cursor: '',
-      end_cursor: '',
-      has_previous: false,
-      has_next: false,
-      handleClickNext: () => { },
-      handleClickPrevious: () => { }
-    };
-    const page = await newSpecPage({
-      components: [Table],
-      template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false, paging: PAG })
+    it('renders the pagination bar when pagination is passed', async () => {
+        const PAG = {
+            amount: 50,
+            start_cursor: '',
+            end_cursor: '',
+            has_previous: false,
+            has_next: true,
+            handleClickNext: () => { },
+            handleClickPrevious: () => { }
+        };
+        const page = await newSpecPage({
+            components: [Table],
+            template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false, paging: PAG })
+        });
+        const paginationBar = page.root.shadowRoot.querySelector('[part="pagination-bar"]');
+        expect(paginationBar).toBeTruthy();
     });
-    const error = page.root.shadowRoot.querySelector('[part="pagination-bar"]');
-    expect(error).not.toBeNull();
-  });
-  it('has an ID for each row', async () => {
-    const page = await newSpecPage({
-      components: [Table],
-      template: () => h("justifi-table", { entityId: ['123'], rowData: [['test']], columnData: ['test', 'test'], loading: false })
+    it('has an ID for each row', async () => {
+        const page = await newSpecPage({
+            components: [Table],
+            template: () => h("justifi-table", { entityId: ['123'], rowData: [['test']], columnData: ['test', 'test'], loading: false })
+        });
+        const row = page.root.shadowRoot.querySelector('[data-row-entity-id]');
+        expect(row).toBeTruthy();
+        expect(row.dataset.rowEntityId).toBe('123');
+        const loading = page.root.shadowRoot.querySelector('.loading-state');
+        expect(loading).toBeNull();
+        const empty = page.root.shadowRoot.querySelector('.empty-state');
+        expect(empty).toBeNull();
+        const error = await page.root.shadowRoot.querySelector('.error-state');
+        expect(error).toBeNull();
     });
-    const row = page.root.shadowRoot.querySelector('[data-row-entity-id]');
-    expect(row).not.toBeNull();
-    expect(row.dataset.rowEntityId).toBe('123');
-  });
 });

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

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const LoadingState = (columnSpan) => (h("tr", null, h("td", { class: "loading-state", part: "loading-state-cell", colSpan: columnSpan, style: { textAlign: 'center' } }, h("div", { part: "loading-state-spinner", class: "spinner-border", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")))));
+export const EmptyState = (columnSpan) => (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: columnSpan, style: { textAlign: 'center' } }, "No results")));
+export const ErrorState = (columnSpan, errorMessage) => (h("tr", null, h("td", { class: "error-state", part: "error-state", colSpan: columnSpan, style: { textAlign: 'center' } }, "An unexpected error occurred: ", errorMessage)));