@justifi/webcomponents 4.2.2 → 4.4.0

package/dist/collection/components/select-input/select-input.js

@@ -1,11 +1,11 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class SelectInput {
   constructor() {
     this.name = undefined;
     this.label = undefined;
     this.defaultValue = undefined;
     this.error = undefined;
-    this.options = undefined;
+    this.options = [];
     this.internalValue = '';
   }
   onInput(event) {
@@ -14,7 +14,7 @@ export class SelectInput {
     this.fieldReceivedInput.emit({ name: name, value: target.value });
   }
   render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), h("select", { name: this.name, onInput: event => this.onInput(event), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), h("select", { name: this.name, onInput: event => this.onInput(event), part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
   }
   static get is() { return "select-input"; }
   static get encapsulation() { return "shadow"; }
@@ -111,7 +111,8 @@ export class SelectInput {
         "docs": {
           "tags": [],
           "text": ""
-        }
+        },
+        "defaultValue": "[]"
       }
     };
   }

package/dist/collection/components/select-input/select-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-input.js","sourceRoot":"","sources":["../../../../src/components/select-input/select-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,WAAW;;;;;;;yBAOG,EAAE;;EAE3B,OAAO,CAAC,KAAK;IACX,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;EACpE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B;MAC3C,aAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,IACnC,IAAI,CAAC,KAAK,CACL;MACR,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACrC,IAAI,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,aAAa,IAE3D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC1B,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,IAAG,MAAM,CAAC,KAAK,CAAU,CACrD,CAAC,CACK;MACR,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Host, Prop, h, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'select-input',\n  styleUrl: 'select-input.scss',\n  shadow: true,\n})\nexport class SelectInput {\n  @Prop() name: string;\n  @Prop() label: string;\n  @Prop() defaultValue: string;\n  @Prop() error: string;\n  @Prop() options: { label: string; value: string }[];\n  @Event() fieldReceivedInput: EventEmitter<{ name: string; value: string }>;\n  @State() internalValue = '';\n\n  onInput(event) {\n    const target = event.target;\n    const name = target.getAttribute('name');\n    this.fieldReceivedInput.emit({ name: name, value: target.value });\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <label part=\"label\" class=\"form-label\">\n          {this.label}\n        </label>\n        <select\n          name={this.name}\n          onInput={event => this.onInput(event)}\n          part={`input ${this.error && 'input-invalid'}`}\n          class={this.error ? 'form-select is-invalid' : 'form-select'}\n        >\n          {this.options.map(option => (\n            <option value={option.value}>{option.label}</option>\n          ))}\n        </select>\n        {this.error && <div class=\"invalid-feedback\">{this.error}</div>}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"select-input.js","sourceRoot":"","sources":["../../../../src/components/select-input/select-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,WAAW;;;;;;mBAKgC,EAAE;yBAE/B,EAAE;;EAE3B,OAAO,CAAC,KAAK;IACX,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;EACpE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B;MAC3C,aAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,IACnC,IAAI,CAAC,KAAK,CACL;MACR,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACrC,IAAI,EAAE,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,EAClD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,aAAa,IAE3D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC1B,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,IAAG,MAAM,CAAC,KAAK,CAAU,CACrD,CAAC,CACK;MACR,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Host, Prop, h, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'select-input',\n  styleUrl: 'select-input.scss',\n  shadow: true,\n})\nexport class SelectInput {\n  @Prop() name: string;\n  @Prop() label: string;\n  @Prop() defaultValue: string;\n  @Prop() error: string;\n  @Prop() options: { label: string; value: string }[] = [];\n  @Event() fieldReceivedInput: EventEmitter<{ name: string; value: string }>;\n  @State() internalValue = '';\n\n  onInput(event) {\n    const target = event.target;\n    const name = target.getAttribute('name');\n    this.fieldReceivedInput.emit({ name: name, value: target.value });\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <label part=\"label\" class=\"form-label\">\n          {this.label}\n        </label>\n        <select\n          name={this.name}\n          onInput={event => this.onInput(event)}\n          part={`input${this.error ? ' input-invalid' : ''}`}\n          class={this.error ? 'form-select is-invalid' : 'form-select'}\n        >\n          {this.options.map(option => (\n            <option value={option.value}>{option.label}</option>\n          ))}\n        </select>\n        {this.error && <div class=\"invalid-feedback\">{this.error}</div>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,36 +1,80 @@
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-import { SelectInput } from '../select-input';
+import { newSpecPage } from "@stencil/core/testing";
+import { SelectInput } from "../select-input";
 describe('select-input', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newSpecPage({
+      components: [SelectInput],
+      html: `<select-input></select-input>`,
+    });
+  });
   it('renders', async () => {
-    const page = await newSpecPage({
+    page.root.options = [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+    ];
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+    <select-input exportparts="label,input,input-invalid">
+      <mock:shadow-root>
+        <label part="label" class="form-label"></label>
+        <select class="form-select" part="input">
+          <option value="option1">
+            Option 1
+          </option>
+          <option value="option2">
+            Option 2
+          </option>
+        </select>
+      </mock:shadow-root>
+    </select-input>
+  `);
+  });
+  it('renders with props', async () => {
+    const { root } = await newSpecPage({
       components: [SelectInput],
-      template: () => (h("select-input", { options: [
-          {
-            label: 'Option 1',
-            value: 'option1',
-          },
-          {
-            label: 'Option 2',
-            value: 'option2',
-          },
-        ] })),
+      html: `<select-input name="test" label="Test Label"></select-input>`,
     });
+    root.options = [{ label: 'Option 1', value: '1' }];
+    await page.waitForChanges();
+    expect(root).toEqualHtml(`
+    <select-input exportparts="label,input,input-invalid" label="Test Label" name="test">
+      <mock:shadow-root>
+        <label part="label" class="form-label">Test Label</label>
+        <select class="form-select" name="test" part="input">
+          <option value="1">
+            Option 1
+          </option>
+        </select>
+      </mock:shadow-root>
+    </select-input>
+  `);
+  });
+  it('emits event on input', async () => {
+    page.root.name = 'test';
+    page.root.options = [{ label: 'Option 1', value: '1' }];
+    await page.waitForChanges();
+    const fieldReceivedInputHandler = jest.fn();
+    page.root.addEventListener('fieldReceivedInput', fieldReceivedInputHandler);
+    const select = page.root.shadowRoot.querySelector('select');
+    select.value = '1';
+    select.dispatchEvent(new Event('input'));
+    expect(fieldReceivedInputHandler).toHaveBeenCalled();
+  });
+  it('renders with error', async () => {
+    page.root.error = 'Test Error';
+    await page.waitForChanges();
     expect(page.root).toEqualHtml(`
-      <select-input>
-        <mock:shadow-root>
-          <label></label>
-          <select>
-            <option value="option1">
-              Option 1
-            </option>
-            <option value="option2">
-              Option 2
-            </option>
-          </select>
-        </mock:shadow-root>
-      </select-input>
-    `);
+    <select-input exportparts="label,input,input-invalid">
+      <mock:shadow-root>
+        <label part="label" class="form-label"></label>
+        <select class="form-select is-invalid" part="input input-invalid"></select>
+        <div class="invalid-feedback">
+          Test Error
+        </div>
+      </mock:shadow-root>
+    </select-input>
+  `);
   });
 });
 //# sourceMappingURL=select-input.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-input.spec.js","sourceRoot":"","sources":["../../../../../src/components/select-input/test/select-input.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;EAC5B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,oBACE,OAAO,EAAE;UACP;YACE,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,SAAS;WACjB;UACD;YACE,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,SAAS;WACjB;SACF,GACa,CACjB;KACF,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\n\nimport { newSpecPage } from '@stencil/core/testing';\nimport { SelectInput } from '../select-input';\n\ndescribe('select-input', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SelectInput],\n      template: () => (\n        <select-input\n          options={[\n            {\n              label: 'Option 1',\n              value: 'option1',\n            },\n            {\n              label: 'Option 2',\n              value: 'option2',\n            },\n          ]}\n        ></select-input>\n      ),\n    });\n    expect(page.root).toEqualHtml(`\n      <select-input>\n        <mock:shadow-root>\n          <label></label>\n          <select>\n            <option value=\"option1\">\n              Option 1\n            </option>\n            <option value=\"option2\">\n              Option 2\n            </option>\n          </select>\n        </mock:shadow-root>\n      </select-input>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"select-input.spec.js","sourceRoot":"","sources":["../../../../../src/components/select-input/test/select-input.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;EAC5B,IAAI,IAAc,CAAC;EAEnB,UAAU,CAAC,KAAK,IAAI,EAAE;IACpB,IAAI,GAAG,MAAM,WAAW,CAAC;MACvB,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE,+BAA+B;KACtC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG;MAClB,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;MACvC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;KACxC,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;GAc/B,CAAC,CAAC;EACH,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;IAClC,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,WAAW,CAAC;MACjC,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE,8DAA8D;KACrE,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;IACnD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;GAW1B,CAAC,CAAC;EACH,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;IACxD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,yBAAyB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAC5C,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,yBAAyB,CAAC,CAAC;IAC5E,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC5D,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;IACnB,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,MAAM,CAAC,yBAAyB,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACvD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;IAClC,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;IAC/B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;GAU/B,CAAC,CAAC;EACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { SpecPage, newSpecPage } from '@stencil/core/testing';\nimport { SelectInput } from '../select-input';\n\ndescribe('select-input', () => {\n  let page: SpecPage;\n\n  beforeEach(async () => {\n    page = await newSpecPage({\n      components: [SelectInput],\n      html: `<select-input></select-input>`,\n    });\n  });\n\n  it('renders', async () => {\n    page.root.options = [\n      { label: 'Option 1', value: 'option1' },\n      { label: 'Option 2', value: 'option2' },\n    ];\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n    <select-input exportparts=\"label,input,input-invalid\">\n      <mock:shadow-root>\n        <label part=\"label\" class=\"form-label\"></label>\n        <select class=\"form-select\" part=\"input\">\n          <option value=\"option1\">\n            Option 1\n          </option>\n          <option value=\"option2\">\n            Option 2\n          </option>\n        </select>\n      </mock:shadow-root>\n    </select-input>\n  `);\n  });\n\n  it('renders with props', async () => {\n    const { root } = await newSpecPage({\n      components: [SelectInput],\n      html: `<select-input name=\"test\" label=\"Test Label\"></select-input>`,\n    });\n\n    root.options = [{ label: 'Option 1', value: '1' }];\n    await page.waitForChanges();\n\n    expect(root).toEqualHtml(`\n    <select-input exportparts=\"label,input,input-invalid\" label=\"Test Label\" name=\"test\">\n      <mock:shadow-root>\n        <label part=\"label\" class=\"form-label\">Test Label</label>\n        <select class=\"form-select\" name=\"test\" part=\"input\">\n          <option value=\"1\">\n            Option 1\n          </option>\n        </select>\n      </mock:shadow-root>\n    </select-input>\n  `);\n  });\n\n  it('emits event on input', async () => {\n    page.root.name = 'test';\n    page.root.options = [{ label: 'Option 1', value: '1' }];\n    await page.waitForChanges();\n\n    const fieldReceivedInputHandler = jest.fn();\n    page.root.addEventListener('fieldReceivedInput', fieldReceivedInputHandler);\n    const select = page.root.shadowRoot.querySelector('select');\n    select.value = '1';\n    select.dispatchEvent(new Event('input'));\n    expect(fieldReceivedInputHandler).toHaveBeenCalled();\n  });\n\n  it('renders with error', async () => {\n    page.root.error = 'Test Error';\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n    <select-input exportparts=\"label,input,input-invalid\">\n      <mock:shadow-root>\n        <label part=\"label\" class=\"form-label\"></label>\n        <select class=\"form-select is-invalid\" part=\"input input-invalid\"></select>\n        <div class=\"invalid-feedback\">\n          Test Error\n        </div>\n      </mock:shadow-root>\n    </select-input>\n  `);\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"]}