@justifi/webcomponents 4.10.0 → 4.12.0

package/dist/collection/components/payouts-list/get-payouts.js

@@ -1,7 +1,8 @@
 import { Payout } from "../../api";
-import { getErrorMessage } from "../../api/services/utils";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
 export const makeGetPayouts = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
-    var _a;
+    var _a, _b;
     try {
         const response = await service.fetchPayouts(id, authToken, params);
         if (!response.error) {
@@ -10,11 +11,22 @@ export const makeGetPayouts = ({ id, authToken, service }) => async ({ params, o
             onSuccess({ payouts, pagingInfo });
         }
         else {
-            const responseError = getErrorMessage(response.error);
-            return onError(responseError);
+            const error = getErrorMessage(response.error);
+            const code = getErrorCode((_b = response.error) === null || _b === void 0 ? void 0 : _b.code);
+            return onError({
+                error,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        return onError(error.message || error);
+        const message = getErrorMessage(error);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: message,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };

package/dist/collection/components/payouts-list/payouts-list-core.js

@@ -54,8 +54,13 @@ export class PayoutsListCore {
                 this.paging = pagingInfo;
                 this.loading = false;
             },
-            onError: (errorMessage) => {
-                this.errorMessage = errorMessage;
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity
+                });
                 this.loading = false;
             },
         });
@@ -167,6 +172,27 @@ export class PayoutsListCore {
                         }
                     }
                 }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
             }];
     }
     static get watchers() {

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

@@ -3,6 +3,7 @@ import { tableExportedParts } from "../table/exported-parts";
 import { PayoutService } from "../../api/services/payout.service";
 import { makeGetPayouts } from "./get-payouts";
 import { ErrorState } from "../details/utils";
+import { ComponentErrorCodes } from "../../api/ComponentError";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -24,6 +25,10 @@ import { ErrorState } from "../details/utils";
 */
 export class PayoutsList {
     constructor() {
+        this.handleOnError = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.accountId = undefined;
         this.authToken = undefined;
         this.getPayouts = undefined;
@@ -45,13 +50,17 @@ export class PayoutsList {
         }
         else {
             this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: 'Account ID and Auth Token are required',
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts })));
+        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts, "onError-event": this.handleOnError })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -99,6 +108,30 @@ export class PayoutsList {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "accountId",

package/dist/collection/components/payouts-list/test/get-payouts.spec.js

@@ -1,7 +1,7 @@
 import { Payout } from "../../../api";
 import { PayoutService } from "../../../api/services/payout.service";
 import { makeGetPayouts } from "../get-payouts";
-import mockResponse from "../../../api/mockData/mockPayoutsSuccess.json";
+import mockResponse from "../../../../../../mockData/mockPayoutsSuccess.json";
 describe('makeGetPayouts', () => {
     const mockId = '123';
     const mockAuthToken = 'token';
@@ -43,7 +43,11 @@ describe('makeGetPayouts', () => {
             service: mockServiceInstance,
         });
         await getPayouts({ params: mockParams, onSuccess, onError });
-        expect(onError).toHaveBeenCalledWith('Error fetching payouts');
+        expect(onError).toHaveBeenCalledWith({
+            code: 'fetch-error',
+            error: 'Error fetching payouts',
+            severity: 'error',
+        });
         expect(onSuccess).not.toHaveBeenCalled();
     });
     it('should call onError with an error message on API failure', async () => {
@@ -58,7 +62,11 @@ describe('makeGetPayouts', () => {
             service: mockServiceInstance,
         });
         await getPayouts({ params: mockParams, onSuccess, onError });
-        expect(onError).toHaveBeenCalledWith('Error fetching payouts');
+        expect(onError).toHaveBeenCalledWith({
+            code: 'fetch-error',
+            error: 'Error fetching payouts',
+            severity: 'error',
+        });
         expect(onSuccess).not.toHaveBeenCalled();
     });
 });

package/dist/collection/components/payouts-list/test/payouts-list-core.spec.js

@@ -1,8 +1,9 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Table } from "../../table/table";
 import { PaginationMenu } from "../../pagination-menu/pagination-menu";
 import { PayoutsListCore } from "../payouts-list-core";
-import mockSuccessResponse from "../../../api/mockData/mockPayoutsSuccess.json";
+import mockSuccessResponse from "../../../../../../mockData/mockPayoutsSuccess.json";
 import { makeGetPayouts } from "../get-payouts";
 const mockPayoutsResponse = mockSuccessResponse;
 describe('payouts-list-core', () => {
@@ -10,19 +11,15 @@ describe('payouts-list-core', () => {
         const mockPayoutService = {
             fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
         };
-        const page = await newSpecPage({
-            components: [PayoutsListCore, Table, PaginationMenu],
-            html: `
-        <payouts-list-core></payouts-list-core>
-      `,
-        });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPayouts = makeGetPayouts({
+        const getPayouts = makeGetPayouts({
             id: '123',
             authToken: '123',
             service: mockPayoutService
         });
-        page.rootInstance.fetchData();
+        const page = await newSpecPage({
+            components: [PayoutsListCore, Table, PaginationMenu],
+            template: () => h("payouts-list-core", { getPayouts: getPayouts }),
+        });
         await page.waitForChanges();
         const justifiTable = page.root.querySelector('justifi-table');
         const shadowRoot = justifiTable.shadowRoot;
@@ -41,11 +38,8 @@ describe('payouts-list-core', () => {
         });
         const page = await newSpecPage({
             components: [PayoutsListCore, Table, PaginationMenu],
-            html: '<payouts-list-core></payouts-list-core>',
+            template: () => h("payouts-list-core", { getPayouts: getPayouts }),
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPayouts = getPayouts;
-        page.rootInstance.fetchData();
         await page.waitForChanges();
         const justifiTable = page.root.querySelector('justifi-table');
         const shadowRoot = justifiTable.shadowRoot;
@@ -53,21 +47,42 @@ describe('payouts-list-core', () => {
         expect(error).toBeTruthy();
         expect(page.root).toMatchSnapshot();
     });
-    it('emits payout-row-clicked event on row click', async () => {
+    it('emits an error event on failed data fetch', async () => {
         const mockPayoutService = {
-            fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
+            fetchPayouts: jest.fn().mockRejectedValue(new Error('Fetch error'))
         };
+        const getPayouts = makeGetPayouts({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockPayoutService
+        });
+        const errorSpy = jest.fn();
         const page = await newSpecPage({
             components: [PayoutsListCore, Table, PaginationMenu],
-            html: '<payouts-list-core></payouts-list-core>',
+            template: () => h("payouts-list-core", { getPayouts: getPayouts, "onError-event": errorSpy }),
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPayouts = makeGetPayouts({
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Fetch error',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits payout-row-clicked event on row click', async () => {
+        const mockPayoutService = {
+            fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
+        };
+        const getPayouts = makeGetPayouts({
             id: '123',
             authToken: '123',
             service: mockPayoutService
         });
-        page.rootInstance.fetchData();
+        const page = await newSpecPage({
+            components: [PayoutsListCore, Table, PaginationMenu],
+            template: () => h("payouts-list-core", { getPayouts: getPayouts }),
+        });
         await page.waitForChanges();
         const rowClickedHandler = jest.fn();
         page.win.addEventListener('payout-row-clicked', rowClickedHandler);
@@ -83,22 +98,20 @@ describe('payouts-list-core', () => {
         const mockPayoutService = {
             fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
         };
-        const page = await newSpecPage({
-            components: [PayoutsListCore, Table, PaginationMenu],
-            html: `<payouts-list-core></payouts-list-core>`,
-        });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPayouts = makeGetPayouts({
+        const getPayouts = makeGetPayouts({
             id: '123',
             authToken: '123',
             service: mockPayoutService
         });
-        page.rootInstance.fetchData();
+        const page = await newSpecPage({
+            components: [PayoutsListCore, Table, PaginationMenu],
+            template: () => h("payouts-list-core", { getPayouts: getPayouts }),
+        });
         await page.waitForChanges();
         page.rootInstance.handleClickNext('nextCursor');
         await page.waitForChanges();
-        // The mock function should be called 3 times: once for the initial load, twice for when mockGetPayouts is set and later after the pagination interaction
-        expect(mockPayoutService.fetchPayouts).toHaveBeenCalledTimes(3);
+        // The mock function should be called 2 times: once for the initial load and later after the pagination interaction
+        expect(mockPayoutService.fetchPayouts).toHaveBeenCalledTimes(2);
         const updatedParams = page.rootInstance.params;
         expect(updatedParams.after_cursor).toBe('nextCursor');
     });

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

@@ -1,6 +1,9 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { PayoutsList } from "../payouts-list";
 import { PayoutsListCore } from "../payouts-list-core";
+import { PayoutService } from "../../../api/services/payout.service";
+jest.mock('../../../api/services/payout.service');
 describe('payouts-list', () => {
     it('renders an error message when accountId and authToken are not provided', async () => {
         const page = await newSpecPage({
@@ -26,4 +29,34 @@ describe('payouts-list', () => {
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits an error event when accountId and authToken are not provided', async () => {
+        const onErrorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [PayoutsList, PayoutsListCore],
+            template: () => h("justifi-payouts-list", { "onError-event": onErrorSpy }),
+        });
+        await page.waitForChanges();
+        expect(onErrorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'missing-props',
+                message: 'Account ID and Auth Token are required',
+            },
+        }));
+    });
+    it('emits an error event when fetch fails', async () => {
+        PayoutService.prototype.fetchPayouts = jest.fn().mockRejectedValue(new Error('Fetch error'));
+        const onErrorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [PayoutsList, PayoutsListCore],
+            template: () => (h("justifi-payouts-list", { "account-id": "abc", "auth-token": "abc", "onError-event": onErrorSpy })),
+        });
+        await page.waitForChanges();
+        expect(onErrorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Fetch error',
+                severity: 'error',
+            },
+        }));
+    });
 });

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

@@ -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,invalid-feedback" }, 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", part: "invalid-feedback" }, this.error)));
     }
     static get is() { return "select-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ describe('select-input', () => {
         ];
         await page.waitForChanges();
         expect(page.root).toEqualHtml(`
-    <select-input exportparts="label,input,input-invalid">
+    <select-input exportparts="label,input,input-invalid,invalid-feedback">
       <mock:shadow-root>
         <label part="label" class="form-label"></label>
         <select class="form-select" part="input">
@@ -38,7 +38,7 @@ describe('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">
+    <select-input exportparts="label,input,input-invalid,invalid-feedback" 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">
@@ -65,11 +65,11 @@ describe('select-input', () => {
         page.root.error = 'Test Error';
         await page.waitForChanges();
         expect(page.root).toEqualHtml(`
-    <select-input exportparts="label,input,input-invalid">
+    <select-input exportparts="label,input,input-invalid,invalid-feedback">
       <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">
+        <div class="invalid-feedback" part="invalid-feedback">
           Test Error
         </div>
       </mock:shadow-root>

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

@@ -1,13 +1,13 @@
 import { Host, h } from "@stencil/core";
 import { DetailItem, DetailSectionTitle } from "../../details/utils";
-import { formatLegalAddress, snakeCaseToHumanReadable } from "../../../utils/utils";
+import { formatLegalAddress } from "../../../utils/utils";
 export class SubaccountMerchantDetails {
     constructor() {
         this.onboardingData = undefined;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
-        return (h(Host, null, h("div", { class: 'p-2' }, h(DetailSectionTitle, { sectionTitle: 'Merchant Details' }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Doing Business As', value: (_d = (_c = (_b = (_a = this.onboardingData) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.business_details) === null || _c === void 0 ? void 0 : _c.doing_business_as) === null || _d === void 0 ? void 0 : _d.name }), h(DetailItem, { title: 'Website', value: (_g = (_f = (_e = this.onboardingData) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.business_details) === null || _g === void 0 ? void 0 : _g.url }), h(DetailItem, { title: 'Business Email', value: (_k = (_j = (_h = this.onboardingData) === null || _h === void 0 ? void 0 : _h.payload) === null || _j === void 0 ? void 0 : _j.business_details) === null || _k === void 0 ? void 0 : _k.email }), h(DetailItem, { title: 'Phone Number', value: (_o = (_m = (_l = this.onboardingData) === null || _l === void 0 ? void 0 : _l.payload) === null || _m === void 0 ? void 0 : _m.business_details) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: 'Address', value: ((_r = (_q = (_p = this.onboardingData) === null || _p === void 0 ? void 0 : _p.payload) === null || _q === void 0 ? void 0 : _q.business_details) === null || _r === void 0 ? void 0 : _r.legal) ? `${formatLegalAddress((_u = (_t = (_s = this.onboardingData) === null || _s === void 0 ? void 0 : _s.payload) === null || _t === void 0 ? void 0 : _t.business_details) === null || _u === void 0 ? void 0 : _u.legal)}` : '' })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Business Structure', value: ((_x = (_w = (_v = this.onboardingData) === null || _v === void 0 ? void 0 : _v.payload) === null || _w === void 0 ? void 0 : _w.business_details) === null || _x === void 0 ? void 0 : _x.structure) ? snakeCaseToHumanReadable((_0 = (_z = (_y = this.onboardingData) === null || _y === void 0 ? void 0 : _y.payload) === null || _z === void 0 ? void 0 : _z.business_details) === null || _0 === void 0 ? void 0 : _0.structure) : '' }), h(DetailItem, { title: 'Business Type', value: (_3 = (_2 = (_1 = this.onboardingData) === null || _1 === void 0 ? void 0 : _1.payload) === null || _2 === void 0 ? void 0 : _2.business_details) === null || _3 === void 0 ? void 0 : _3.type })))))));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        return (h(Host, null, h("div", { class: 'p-2' }, h(DetailSectionTitle, { sectionTitle: 'Merchant Details' }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Doing Business As', value: (_d = (_c = (_b = (_a = this.onboardingData) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.business_details) === null || _c === void 0 ? void 0 : _c.doing_business_as) === null || _d === void 0 ? void 0 : _d.name }), h(DetailItem, { title: 'Website', value: (_g = (_f = (_e = this.onboardingData) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.business_details) === null || _g === void 0 ? void 0 : _g.url }), h(DetailItem, { title: 'Business Email', value: (_k = (_j = (_h = this.onboardingData) === null || _h === void 0 ? void 0 : _h.payload) === null || _j === void 0 ? void 0 : _j.business_details) === null || _k === void 0 ? void 0 : _k.email }), h(DetailItem, { title: 'Phone Number', value: (_o = (_m = (_l = this.onboardingData) === null || _l === void 0 ? void 0 : _l.payload) === null || _m === void 0 ? void 0 : _m.business_details) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: 'Address', value: ((_r = (_q = (_p = this.onboardingData) === null || _p === void 0 ? void 0 : _p.payload) === null || _q === void 0 ? void 0 : _q.business_details) === null || _r === void 0 ? void 0 : _r.legal) ? `${formatLegalAddress((_u = (_t = (_s = this.onboardingData) === null || _s === void 0 ? void 0 : _s.payload) === null || _t === void 0 ? void 0 : _t.business_details) === null || _u === void 0 ? void 0 : _u.legal)}` : '' })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: 'Business Type', value: (_x = (_w = (_v = this.onboardingData) === null || _v === void 0 ? void 0 : _v.payload) === null || _w === void 0 ? void 0 : _w.business_details) === null || _x === void 0 ? void 0 : _x.type })))))));
     }
     static get is() { return "subaccount-merchant-details"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ describe('text-input', () => {
             html: `<text-input></text-input>`,
         });
         expect(page.root).toEqualHtml(`
-      <text-input exportparts="label,input,input-invalid">
+      <text-input exportparts="label,input,input-invalid,invalid-feedback">
         <mock:shadow-root>
           <label class="form-label" part="label"></label>
           <input class="form-control" part="input" type="text">
@@ -21,7 +21,7 @@ describe('text-input', () => {
             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">
+      <text-input name="test" label="Test" default-value="Hello" exportparts="label,input,input-invalid,invalid-feedback">
         <mock:shadow-root>
           <label class="form-label" part="label">Test</label>
           <input class="form-control" name="test" part="input" type="text" value="Hello">
@@ -35,11 +35,11 @@ describe('text-input', () => {
             html: `<text-input error="Something went wrong"></text-input>`,
         });
         expect(page.root).toEqualHtml(`
-      <text-input error="Something went wrong" exportparts="label,input,input-invalid">
+      <text-input error="Something went wrong" exportparts="label,input,input-invalid,invalid-feedback">
         <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>
+          <div class="invalid-feedback" part="invalid-feedback">Something went wrong</div>
         </mock:shadow-root>
       </text-input>
     `);

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

@@ -13,7 +13,7 @@ export class TextInput {
         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("input", { name: this.name, type: "text", onInput: event => this.onInput(event), value: this.internalValue || this.defaultValue, part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        return (h(Host, { exportparts: "label,input,input-invalid,invalid-feedback" }, h("label", { part: "label", class: "form-label" }, this.label), h("input", { name: this.name, type: "text", onInput: event => this.onInput(event), value: this.internalValue || this.defaultValue, part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && h("div", { class: "invalid-feedback", part: "invalid-feedback" }, this.error)));
     }
     static get is() { return "text-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/form-input-masks.js

@@ -1,4 +1,4 @@
 export const PHONE_MASKS = {
     US: '(000) 000-0000',
 };
-export const TAX_ID_MASKS = { US: '00-000000000' };
+export const TAX_ID_MASKS = { US: '00-0000000' };

package/dist/collection/utils/utils.js

@@ -1,6 +1,5 @@
 import { format } from "date-fns";
 import Dinero from "dinero.js";
-import StateOptions from "./state-options";
 export const RegExZip = /^\d{5}/;
 export function formatCurrency(amount, withSymbol = true) {
     if (!amount)
@@ -204,7 +203,3 @@ export async function loadFontsOnParent() {
 export function isEmptyObject(obj) {
     return Object.keys(obj).length === 0 && obj.constructor === Object;
 }
-export function getStateAbbreviation(stateName) {
-    const state = StateOptions.find(s => s.label === stateName);
-    return state ? state.value : stateName;
-}