@justifi/webcomponents 4.2.2 → 4.5.0

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

@@ -0,0 +1,215 @@
+import { Host, h } from "@stencil/core";
+import { pagingDefaults } from "../table/table-utils";
+const ExtendedPagingDefaults = Object.assign(Object.assign({}, pagingDefaults), { onPrev: () => { }, onNext: () => { } });
+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 payments to show")));
+    };
+    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.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.entityId = undefined;
+    this.rowClickHandler = undefined;
+  }
+  showEmptyState() {
+    return this.rowData ? this.rowData.length < 1 : true;
+  }
+  render() {
+    var _a, _b, _c;
+    return (h(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      " }, this.columnData ?
+      h("table", { class: "table table-hover" }, h("thead", { class: "table-head sticky-top", part: "table-head" }, h("tr", { class: "table-light", 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 }, this.paginationBar()))))
+      :
+        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"
+            }
+          }
+        },
+        "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"
+      },
+      "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": ""
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,59 @@
+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>`,
+    });
+    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 })
+    });
+    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 })
+    });
+    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,
+      onPrev: () => { },
+      onNext: () => { }
+    };
+    const page = await newSpecPage({
+      components: [Table],
+      template: () => h("justifi-table", { columnData: ['test', 'test'], loading: false, paging: PAG })
+    });
+    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 })
+    });
+    const row = page.root.shadowRoot.querySelector('[data-row-entity-id]');
+    expect(row).not.toBeNull();
+    expect(row.dataset.rowEntityId).toBe('123');
+  });
+});
+//# sourceMappingURL=table.spec.js.map

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

@@ -0,0 +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"]}

package/dist/collection/components/text-input/test/text-input.spec.js

@@ -1,5 +1,5 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TextInput } from '../text-input';
+import { newSpecPage } from "@stencil/core/testing";
+import { TextInput } from "../text-input";
 describe('text-input', () => {
   it('renders', async () => {
     const page = await newSpecPage({
@@ -7,13 +7,55 @@ describe('text-input', () => {
       html: `<text-input></text-input>`,
     });
     expect(page.root).toEqualHtml(`
-      <text-input>
+      <text-input exportparts="label,input,input-invalid">
         <mock:shadow-root>
-          <label></label>
-          <input type="text">
+          <label class="form-label" part="label"></label>
+          <input class="form-control" part="input" type="text">
         </mock:shadow-root>
       </text-input>
     `);
   });
+  it('renders with values', async () => {
+    const page = await newSpecPage({
+      components: [TextInput],
+      html: `<text-input name="test" label="Test" default-value="Hello"></text-input>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <text-input name="test" label="Test" default-value="Hello" exportparts="label,input,input-invalid">
+        <mock:shadow-root>
+          <label class="form-label" part="label">Test</label>
+          <input class="form-control" name="test" part="input" type="text" value="Hello">
+        </mock:shadow-root>
+      </text-input>
+    `);
+  });
+  it('renders with error', async () => {
+    const page = await newSpecPage({
+      components: [TextInput],
+      html: `<text-input error="Something went wrong"></text-input>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <text-input error="Something went wrong" exportparts="label,input,input-invalid">
+        <mock:shadow-root>
+          <label class="form-label" part="label"></label>
+          <input class="form-control is-invalid" part="input input-invalid" type="text">
+          <div class="invalid-feedback">Something went wrong</div>
+        </mock:shadow-root>
+      </text-input>
+    `);
+  });
+  it('emits fieldReceivedInput event on input', async () => {
+    const page = await newSpecPage({
+      components: [TextInput],
+      html: `<text-input name="test" label="Test" default-value="Hello"></text-input>`,
+    });
+    const input = page.root.shadowRoot.querySelector('input');
+    let receivedEvent = null;
+    page.root.addEventListener('fieldReceivedInput', e => (receivedEvent = e));
+    input.value = 'Updated text';
+    input.dispatchEvent(new Event('input'));
+    await page.waitForChanges();
+    expect(receivedEvent.detail).toEqual({ name: 'test', value: 'Updated text' });
+  });
 });
 //# sourceMappingURL=text-input.spec.js.map

package/dist/collection/components/text-input/test/text-input.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.spec.js","sourceRoot":"","sources":["../../../../../src/components/text-input/test/text-input.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,2BAA2B;KAClC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { TextInput } from '../text-input';\n\ndescribe('text-input', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [TextInput],\n      html: `<text-input></text-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <text-input>\n        <mock:shadow-root>\n          <label></label>\n          <input type=\"text\">\n        </mock:shadow-root>\n      </text-input>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"text-input.spec.js","sourceRoot":"","sources":["../../../../../src/components/text-input/test/text-input.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,2BAA2B;KAClC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;IACnC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,0EAA0E;KACjF,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;IAClC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,wDAAwD;KAC/D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;IACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,0EAA0E;KACjF,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1D,IAAI,aAAa,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC;IAE3E,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;IAC7B,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAExC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,CAAC;EAChF,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { TextInput } from '../text-input';\n\ndescribe('text-input', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [TextInput],\n      html: `<text-input></text-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <text-input exportparts=\"label,input,input-invalid\">\n        <mock:shadow-root>\n          <label class=\"form-label\" part=\"label\"></label>\n          <input class=\"form-control\" part=\"input\" type=\"text\">\n        </mock:shadow-root>\n      </text-input>\n    `);\n  });\n\n  it('renders with values', async () => {\n    const page = await newSpecPage({\n      components: [TextInput],\n      html: `<text-input name=\"test\" label=\"Test\" default-value=\"Hello\"></text-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <text-input name=\"test\" label=\"Test\" default-value=\"Hello\" exportparts=\"label,input,input-invalid\">\n        <mock:shadow-root>\n          <label class=\"form-label\" part=\"label\">Test</label>\n          <input class=\"form-control\" name=\"test\" part=\"input\" type=\"text\" value=\"Hello\">\n        </mock:shadow-root>\n      </text-input>\n    `);\n  });\n\n  it('renders with error', async () => {\n    const page = await newSpecPage({\n      components: [TextInput],\n      html: `<text-input error=\"Something went wrong\"></text-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <text-input error=\"Something went wrong\" exportparts=\"label,input,input-invalid\">\n        <mock:shadow-root>\n          <label class=\"form-label\" part=\"label\"></label>\n          <input class=\"form-control is-invalid\" part=\"input input-invalid\" type=\"text\">\n          <div class=\"invalid-feedback\">Something went wrong</div>\n        </mock:shadow-root>\n      </text-input>\n    `);\n  });\n\n  it('emits fieldReceivedInput event on input', async () => {\n    const page = await newSpecPage({\n      components: [TextInput],\n      html: `<text-input name=\"test\" label=\"Test\" default-value=\"Hello\"></text-input>`,\n    });\n\n    const input = page.root.shadowRoot.querySelector('input');\n    let receivedEvent = null;\n    page.root.addEventListener('fieldReceivedInput', e => (receivedEvent = e));\n\n    input.value = 'Updated text';\n    input.dispatchEvent(new Event('input'));\n\n    await page.waitForChanges();\n    expect(receivedEvent.detail).toEqual({ name: 'test', value: 'Updated text' });\n  });\n});\n"]}