@justifi/webcomponents 4.9.1 → 4.10.0

package/dist/collection/components/business-forms/schemas/business-identity-schema.js

@@ -0,0 +1,35 @@
+import { object, string } from "yup";
+import { identityAddressSchema } from "./business-address-schema";
+export const phoneRegex = /^[0-9]+$/;
+export const representativeSchema = object({
+    name: string().required('Enter representative name'),
+    email: string()
+        .email('Enter valid representative email')
+        .required('Enter representative email'),
+    phone: string()
+        .required('Enter representative phone number')
+        .matches(phoneRegex, 'Phone number must contain only numbers')
+        .min(10, 'Phone number must contain 10 digits')
+        .max(10, 'Phone number must contain 10 digits'),
+    dob_day: string().required('Enter representative birth day'),
+    dob_month: string().required('Enter representative birth month'),
+    dob_year: string().required('Enter representative birth year'),
+    identification_number: string(),
+    address: identityAddressSchema,
+});
+export const ownerSchema = object({
+    name: string().required('Enter owner name'),
+    email: string()
+        .email('Enter valid owner email')
+        .required('Enter owner email'),
+    phone: string()
+        .required('Enter owner phone number')
+        .matches(phoneRegex, 'Phone number must contain only numbers')
+        .min(10, 'Phone number must contain 10 digits')
+        .max(10, 'Phone number must contain 10 digits'),
+    dob_day: string().required('Enter owner birth day'),
+    dob_month: string().required('Enter owner birth month'),
+    dob_year: string().required('Enter owner birth year'),
+    identification_number: string(),
+    address: identityAddressSchema,
+});

package/dist/collection/components/business-forms/schemas/business-owners-schema.js

@@ -0,0 +1,16 @@
+import { object, string, boolean } from "yup";
+import { identityAddressSchema } from "./business-address-schema";
+export const ownerSchema = object({
+    name: string().required('Enter owner name'),
+    title: string().required('Enter owner title'),
+    email: string()
+        .email('Enter valid owner email')
+        .required('Enter owner email'),
+    phone: string().required('Enter owner phone number'),
+    dob_day: string().required('Enter owner birth day'),
+    dob_month: string().required('Enter owner birth month'),
+    dob_year: string().required('Enter owner birth year'),
+    identification_number: string(),
+    is_owner: boolean(),
+    address: identityAddressSchema,
+});

package/dist/collection/components/business-forms/utils/business-form-select-options.js

@@ -0,0 +1,80 @@
+export const BusinessTypeOptions = [
+    {
+        label: 'Choose business type',
+        value: '',
+    },
+    {
+        label: 'Individual',
+        value: 'individual',
+    },
+    {
+        label: 'For Profit',
+        value: 'for_profit',
+    },
+    {
+        label: 'Non Profit',
+        value: 'non_profit',
+    },
+    {
+        label: 'Government Entity',
+        value: 'government_entity',
+    },
+];
+export const BusinessStructureOptions = [
+    {
+        label: 'Choose business structure',
+        value: '',
+    },
+    {
+        label: 'Sole Proprietorship',
+        value: 'sole_proprietorship',
+    },
+    {
+        label: 'LLC (Single)',
+        value: 'single_llc',
+    },
+    {
+        label: 'LLC (Multiple)',
+        value: 'multi_llc',
+    },
+    {
+        label: 'Private Partnership',
+        value: 'private_partnership',
+    },
+    {
+        label: 'Private Corporation',
+        value: 'private_corporation',
+    },
+    {
+        label: 'Unincorporated Association',
+        value: 'unincorporated_association',
+    },
+    {
+        label: 'Public Partnership',
+        value: 'public_partnership',
+    },
+    {
+        label: 'Public Corporation',
+        value: 'public_corporation',
+    },
+    {
+        label: 'Incorporated',
+        value: 'incorporated',
+    },
+    {
+        label: 'Unincorporated',
+        value: 'unincorporated',
+    },
+    {
+        label: 'Government Unit',
+        value: 'government_unit',
+    },
+    {
+        label: 'Government Instrumentality',
+        value: 'government_instrumentality',
+    },
+    {
+        label: 'Tax Exempt Government Instrumentality',
+        value: 'tax_exempt_government_instrumentality',
+    },
+];

package/dist/collection/components/business-forms/utils/business-form-types.js

@@ -0,0 +1,17 @@
+export var BusinessFormServerErrors;
+(function (BusinessFormServerErrors) {
+    BusinessFormServerErrors["fetchData"] = "Error retrieving business data";
+    BusinessFormServerErrors["patchData"] = "Error updating business data";
+})(BusinessFormServerErrors || (BusinessFormServerErrors = {}));
+export var BusinessFormClickActions;
+(function (BusinessFormClickActions) {
+    BusinessFormClickActions["nextStep"] = "nextStep";
+    BusinessFormClickActions["previousStep"] = "previousStep";
+    BusinessFormClickActions["submit"] = "submit";
+})(BusinessFormClickActions || (BusinessFormClickActions = {}));
+export var OwnerFormServerErrors;
+(function (OwnerFormServerErrors) {
+    OwnerFormServerErrors["fetchData"] = "Error retrieving owner data";
+    OwnerFormServerErrors["patchData"] = "Error updating owner data";
+    OwnerFormServerErrors["postData"] = "Error adding owner data";
+})(OwnerFormServerErrors || (OwnerFormServerErrors = {}));

package/dist/collection/components/business-forms/utils/payload-parsers.js

@@ -0,0 +1,37 @@
+// These props should not be sent to the server
+// This function is for the larger business form. 
+export const parseBusiness = (values, initialValues) => {
+    var _a;
+    parseCoreInfo(values);
+    parseAddressInfo(values.legal_address);
+    parseIdentityInfo(values.representative);
+    ((_a = initialValues.owners) === null || _a === void 0 ? void 0 : _a.length) && delete values.owners;
+    return values;
+};
+// These functions are for the stepped business form.
+export const parseCoreInfo = (values) => {
+    delete values.id;
+    delete values.documents;
+    delete values.bank_accounts;
+    delete values.product_categories;
+    delete values.created_at;
+    delete values.updated_at;
+    return values;
+};
+export const parseAddressInfo = (values) => {
+    delete values.id;
+    delete values.created_at;
+    delete values.updated_at;
+    return values;
+};
+export const parseIdentityInfo = (values) => {
+    delete values.id;
+    delete values.documents;
+    delete values.created_at;
+    delete values.updated_at;
+    delete values.address.id;
+    delete values.address.created_at;
+    delete values.address.updated_at;
+    delete values.business_id;
+    return values;
+};

package/dist/collection/components/form/form-control-datepart.js

@@ -7,7 +7,7 @@ export class DatePartInput {
         this.name = undefined;
         this.error = undefined;
         this.defaultValue = undefined;
-        this.type = undefined;
+        this.type = 'day';
         this.inputHandler = undefined;
         this.disabled = undefined;
     }
@@ -15,45 +15,49 @@ export class DatePartInput {
         this.updateInput(newValue);
     }
     componentDidLoad() {
-        if (this.textInput) {
-            let maskOptions;
-            switch (this.type) {
-                case 'day':
-                    maskOptions = { mask: Number, min: 1, max: 31 };
-                    break;
-                case 'month':
-                    maskOptions = { mask: Number, min: 1, max: 12 };
-                    break;
-                case 'year':
-                    maskOptions = {
-                        mask: Number,
-                        min: 1900,
-                        max: new Date().getFullYear(),
-                    };
-                    break;
-                default:
-                    throw new Error('Invalid type prop');
-            }
-            this.imask = IMask(this.textInput, maskOptions);
-            this.imask.on('accept', () => {
-                const rawValue = this.imask.unmaskedValue;
-                this.inputHandler(this.name, rawValue);
-            });
-            this.textInput.addEventListener('blur', () => {
-                this.formControlBlur.emit();
-            });
-            this.updateInput(this.defaultValue);
+        this.initializeMask();
+        this.updateInput(this.defaultValue);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    initializeMask() {
+        if (!this.textInput) {
+            return;
         }
+        let maskOptions;
+        switch (this.type) {
+            default:
+            case 'day':
+                maskOptions = { mask: Number, min: 1, max: 31 };
+                break;
+            case 'month':
+                maskOptions = { mask: Number, min: 1, max: 12 };
+                break;
+            case 'year':
+                maskOptions = {
+                    mask: Number,
+                    min: 1900,
+                    max: new Date().getFullYear(),
+                };
+                break;
+        }
+        this.imask = IMask(this.textInput, maskOptions);
+        this.imask.on('accept', () => {
+            const rawValue = this.imask.unmaskedValue;
+            this.inputHandler(this.name, rawValue);
+            this.formControlInput.emit({ name: this.name, value: rawValue });
+        });
+        this.textInput.addEventListener('blur', () => {
+            this.formControlBlur.emit();
+        });
     }
     updateInput(newValue) {
         if (this.imask) {
             this.imask.value = String(newValue);
         }
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
-    }
     render() {
         return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
     }
@@ -154,7 +158,8 @@ export class DatePartInput {
                     "text": ""
                 },
                 "attribute": "type",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'day'"
             },
             "inputHandler": {
                 "type": "unknown",

package/dist/collection/components/form/form-control-monetary.js

@@ -13,29 +13,31 @@ export class MonetaryInput {
         this.updateInput(newValue);
     }
     componentDidLoad() {
-        if (this.textInput) {
-            this.imask = IMask(this.textInput, {
-                mask: Number,
-                scale: 2,
-                thousandsSeparator: ',',
-                padFractionalZeros: true,
-                normalizeZeros: true,
-                radix: '.',
-            });
-            this.imask.on('accept', () => {
-                const rawValue = this.imask.unmaskedValue;
-                this.inputHandler(this.name, rawValue);
-            });
-            this.textInput.addEventListener('blur', () => {
-                this.formControlBlur.emit();
-            });
-        }
+        this.initializeIMask();
         this.updateInput(this.defaultValue);
     }
     disconnectedCallback() {
         var _a;
         (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
     }
+    initializeIMask() {
+        if (!this.textInput)
+            return;
+        this.imask = IMask(this.textInput, {
+            mask: Number,
+            scale: 2,
+            thousandsSeparator: ',',
+            padFractionalZeros: true,
+            normalizeZeros: true,
+            radix: '.',
+        });
+        this.imask.on('accept', () => {
+            const rawValue = this.imask.unmaskedValue;
+            this.inputHandler(this.name, rawValue);
+            this.formControlInput.emit({ name: this.name, value: rawValue });
+        });
+        this.textInput.addEventListener('blur', () => this.formControlBlur.emit());
+    }
     updateInput(newValue) {
         if (this.imask) {
             this.imask.value = String(newValue);
@@ -76,11 +78,11 @@ export class MonetaryInput {
                 "reflect": false
             },
             "name": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/form/form-control-number.js

@@ -22,6 +22,7 @@ export class NumberInput {
         const target = event.target;
         const name = target.getAttribute('name');
         this.inputHandler(name, target.value);
+        this.formControlInput.emit({ name, value: target.value });
     }
     componentDidLoad() {
         this.updateInput(this.defaultValue);

package/dist/collection/components/form/form-control-select.js

@@ -19,12 +19,14 @@ export class SelectInput {
         const target = event.target;
         const name = target.getAttribute('name');
         this.inputHandler(name, target.value);
+        this.formControlInput.emit(target.value);
     }
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { ref: el => (this.selectElement = el), id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        var _a;
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { ref: el => (this.selectElement = el), id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error ? 'input-invalid' : ''}`, class: this.error ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "form-control-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form-control-text.js

@@ -22,12 +22,13 @@ export class TextInput {
         const target = event.target;
         const name = target.getAttribute('name');
         this.inputHandler(name, target.value);
+        this.formControlInput.emit(target.value);
     }
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'} ${this.disabled && 'input-disabled'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "form-control-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/test/form-control-datepart.spec.js

@@ -0,0 +1,88 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { DatePartInput } from "../form-control-datepart";
+import * as IMaskPackage from "imask";
+jest.mock('imask', () => ({
+    default: jest.fn().mockImplementation(() => ({
+        on: jest.fn(),
+        destroy: jest.fn(),
+        value: '',
+        unmaskedValue: '',
+    })),
+}));
+const IMaskSpy = jest.spyOn(IMaskPackage, 'default');
+afterEach(() => {
+    jest.clearAllMocks();
+});
+describe('form-control-datepart', () => {
+    it('renders correctly with default props', async () => {
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart label="Date Part" name="datepart"></form-control-datepart>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should initialize IMask with correct options for "day" type', async () => {
+        await newSpecPage({
+            components: [DatePartInput],
+            html: '<form-control-datepart type="day"></form-control-datepart>',
+        });
+        expect(IMaskSpy).toHaveBeenCalled();
+        expect(IMaskSpy.mock.calls[0][1]).toEqual({ mask: Number, min: 1, max: 31 });
+    });
+    it('should initialize IMask with correct options for "month" type', async () => {
+        // Clear mocks to reset the calls count
+        jest.clearAllMocks();
+        await newSpecPage({
+            components: [DatePartInput],
+            html: '<form-control-datepart type="month"></form-control-datepart>',
+        });
+        expect(IMaskSpy).toHaveBeenCalled();
+        expect(IMaskSpy.mock.calls[0][1]).toEqual({ mask: Number, min: 1, max: 12 });
+    });
+    it('should initialize IMask with correct options for "year" type', async () => {
+        // Clear mocks to reset the calls count
+        jest.clearAllMocks();
+        await newSpecPage({
+            components: [DatePartInput],
+            html: '<form-control-datepart type="year"></form-control-datepart>',
+        });
+        expect(IMaskSpy).toHaveBeenCalled();
+        expect(IMaskSpy.mock.calls[0][1]).toEqual({ mask: Number, min: 1900, max: new Date().getFullYear() });
+    });
+    it('emits formControlBlur on input blur', async () => {
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart></form-control-datepart>`,
+        });
+        const blurSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('blur', { bubbles: true }));
+        await page.waitForChanges();
+        expect(blurSpy).toHaveBeenCalled();
+    });
+    it('calls inputHandler and emits formControlInput on user input', async () => {
+        const inputHandlerMock = jest.fn();
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart type="day" name="day"></form-control-datepart>`,
+        });
+        page.rootInstance.inputHandler = inputHandlerMock;
+        await page.waitForChanges();
+        const inputSpy = jest.fn();
+        page.win.addEventListener('formControlInput', inputSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '15'; // Assuming 'day' type for simplicity
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        await page.waitForChanges();
+        expect(inputHandlerMock).toHaveBeenCalledWith('day', '15');
+        expect(inputSpy).toHaveBeenCalled();
+    });
+    it('displays error message correctly', async () => {
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart error="Error message"></form-control-datepart>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/form/test/form-control-monetary.spec.js

@@ -0,0 +1,69 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { MonetaryInput } from "../form-control-monetary";
+describe('form-control-monetary', () => {
+    it('renders correctly with default props', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary></form-control-monetary>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('handles props correctly', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `
+      <form-control-monetary
+        label="Amount"
+        name="amount"
+        error="Invalid amount"  
+        defaultValue="1000"
+      ></form-control-monetary>
+    `,
+        });
+        await page.waitForChanges();
+        const label = page.root.shadowRoot.querySelector('label');
+        const input = page.root.shadowRoot.querySelector('input');
+        const errorDiv = page.root.shadowRoot.querySelector('.invalid-feedback');
+        expect(label.textContent).toBe('Amount');
+        expect(input.getAttribute('name')).toBe('amount');
+        expect(errorDiv.textContent).toBe('Invalid amount');
+    });
+    it('calls inputHandler and emits formControlInput on user input', async () => {
+        const inputHandlerMock = jest.fn();
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary></form-control-monetary>`,
+        });
+        page.rootInstance.inputHandler = inputHandlerMock;
+        await page.waitForChanges();
+        const inputSpy = jest.fn();
+        page.win.addEventListener('formControlInput', inputSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '1234.56';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        await page.waitForChanges();
+        expect(inputHandlerMock).toHaveBeenCalled();
+        expect(inputSpy).toHaveBeenCalled();
+    });
+    it('emits formControlBlur on input blur', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary></form-control-monetary>`,
+        });
+        const blurSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('blur', { bubbles: true }));
+        await page.waitForChanges();
+        expect(blurSpy).toHaveBeenCalled();
+    });
+    it('displays error message when error prop is set', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary error="Invalid amount"></form-control-monetary>`,
+        });
+        const errorDiv = page.root.shadowRoot.querySelector('.invalid-feedback');
+        expect(errorDiv.textContent).toBe('Invalid amount');
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/form/test/form-control-number.spec.js

@@ -0,0 +1,77 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NumberInput } from "../form-control-number";
+describe('form-control-number', () => {
+    it('renders with default props', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age"></form-control-number>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders with an error message', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age" error="Invalid input"></form-control-number>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('handles the disabled state', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age" disabled></form-control-number>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('updates the input value when defaultValue changes', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age"></form-control-number>`,
+        });
+        let input = page.root.shadowRoot.querySelector('input');
+        expect(input.value).toBe(''); // Default should be empty
+        page.root.defaultValue = '30';
+        await page.waitForChanges();
+        input = page.root.shadowRoot.querySelector('input');
+        expect(input.value).toBe('30');
+    });
+    it('calls inputHandler on user input', async () => {
+        const inputHandlerMock = jest.fn();
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number name="age"></form-control-number>`,
+        });
+        page.rootInstance.inputHandler = inputHandlerMock;
+        await page.waitForChanges();
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '25';
+        await input.dispatchEvent(new Event('input', { bubbles: true }));
+        expect(inputHandlerMock).toHaveBeenCalledWith('age', '25');
+    });
+    it('emits formControlBlur on input blur', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number></form-control-number>`,
+        });
+        const blurSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        await input.dispatchEvent(new CustomEvent('blur'));
+        expect(blurSpy).toHaveBeenCalled();
+    });
+    it('emits formControlInput on input', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number name="age"></form-control-number>`,
+        });
+        page.rootInstance.inputHandler = jest.fn();
+        await page.waitForChanges();
+        const inputSpy = jest.fn();
+        page.win.addEventListener('formControlInput', inputSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '25';
+        const mockEvent = new Event('input', { bubbles: true });
+        Object.defineProperty(mockEvent, 'target', { value: input, enumerable: true });
+        await input.dispatchEvent(mockEvent);
+        expect(inputSpy).toHaveBeenCalled();
+    });
+});