@justifi/webcomponents 4.12.2 → 4.13.0-rc.1

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

@@ -1,5 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import IMask from "imask";
+import { CURRENCY_MASK } from "../../utils/form-input-masks";
 export class MonetaryInput {
     constructor() {
         this.imask = null;
@@ -8,6 +9,7 @@ export class MonetaryInput {
         this.error = undefined;
         this.defaultValue = undefined;
         this.inputHandler = undefined;
+        this.maskOptions = CURRENCY_MASK.DECIMAL;
     }
     handleDefaultValueChange(newValue) {
         this.updateInput(newValue);
@@ -23,14 +25,7 @@ export class MonetaryInput {
     initializeIMask() {
         if (!this.textInput)
             return;
-        this.imask = IMask(this.textInput, {
-            mask: Number,
-            scale: 2,
-            thousandsSeparator: ',',
-            padFractionalZeros: true,
-            normalizeZeros: true,
-            radix: '.',
-        });
+        this.imask = IMask(this.textInput, this.maskOptions);
         this.imask.on('accept', () => {
             const rawValue = this.imask.unmaskedValue;
             this.inputHandler(this.name, rawValue);
@@ -44,18 +39,18 @@ export class MonetaryInput {
         }
     }
     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" }), 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("div", { class: "input-group mb-3" }, h("span", { class: "input-group-text" }, "$"), 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 monetary is-invalid' : 'form-control monetary', type: "text" }), this.error && h("div", { class: "invalid-feedback" }, this.error))));
     }
     static get is() { return "form-control-monetary"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["form-control-number.scss"]
+            "$": ["form-control-monetary.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["form-control-number.css"]
+            "$": ["form-control-monetary.css"]
         };
     }
     static get properties() {
@@ -142,6 +137,24 @@ export class MonetaryInput {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "maskOptions": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mask-options",
+                "reflect": false,
+                "defaultValue": "CURRENCY_MASK.DECIMAL"
             }
         };
     }

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

@@ -0,0 +1,84 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { FileInput } from "../form-control-file";
+describe('form-control-file', () => {
+    it('renders with default props', async () => {
+        const page = await newSpecPage({
+            components: [FileInput],
+            html: `<form-control-file label="Select a file" name="user ID"></form-control-file>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        expect(page.rootInstance.label).toBe('Select a file');
+        expect(page.rootInstance.name).toBe('user ID');
+    });
+    it('renders with all props provided', async () => {
+        const page = await newSpecPage({
+            components: [FileInput],
+            html: `
+        <form-control-file
+          label="Select a file"
+          name="email"
+          error="No file selected"
+          disabled
+        ></form-control-file>
+      `,
+        });
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        expect(page.rootInstance.label).toBe('Select a file');
+        expect(inputElement.disabled).toBeTruthy();
+    });
+    it('handles user input correctly', async () => {
+        const page = await newSpecPage({
+            components: [FileInput],
+            html: `<form-control-file></form-control-file>`,
+        });
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        const testValue = 'Hello, World!';
+        inputElement.value = testValue;
+        await inputElement.dispatchEvent(new Event('input'));
+        expect(inputElement.value).toBe(testValue);
+    });
+    it('emits formControlInput event on input', async () => {
+        const page = await newSpecPage({
+            components: [FileInput],
+            html: `<form-control-file></form-control-file>`,
+        });
+        // Set a mock inputHandler to prevent it from being undefined
+        page.rootInstance.inputHandler = jest.fn();
+        const inputEventSpy = jest.fn();
+        page.root.addEventListener('formControlInput', inputEventSpy);
+        await page.waitForChanges();
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        inputElement.value = 'Hello, World!';
+        inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        await page.waitForChanges();
+        expect(inputEventSpy).toHaveBeenCalled();
+    });
+    it('emits formControlBlur event on blur', async () => {
+        const page = await newSpecPage({
+            components: [FileInput],
+            html: `<form-control-file></form-control-file>`,
+        });
+        const blurEventSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurEventSpy);
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        inputElement.dispatchEvent(new Event('blur'));
+        expect(blurEventSpy).toHaveBeenCalled();
+    });
+    it('disables input when disabled prop is true', async () => {
+        const page = await newSpecPage({
+            components: [FileInput],
+            html: `<form-control-file disabled></form-control-file>`,
+        });
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        expect(inputElement.disabled).toBeTruthy();
+    });
+    it('shows error and applies error styling when error prop is provided', async () => {
+        const page = await newSpecPage({
+            components: [FileInput],
+            html: `<form-control-file error="This field is required."></form-control-file>`,
+        });
+        const shadowRoot = page.root.shadowRoot;
+        expect(shadowRoot.querySelector('.invalid-feedback').textContent).toBe('This field is required.');
+        expect(shadowRoot.querySelector('.form-control').classList.contains('is-invalid')).toBeTruthy();
+    });
+});

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

@@ -1,5 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { MonetaryInput } from "../form-control-monetary";
+import { CURRENCY_MASK } from "../../../utils/form-input-masks";
 describe('form-control-monetary', () => {
     it('renders correctly with default props', async () => {
         const page = await newSpecPage({
@@ -17,6 +18,7 @@ describe('form-control-monetary', () => {
         name="amount"
         error="Invalid amount"  
         defaultValue="1000"
+        maskOptions=${CURRENCY_MASK.DECIMAL}
       ></form-control-monetary>
     `,
         });
@@ -32,7 +34,7 @@ describe('form-control-monetary', () => {
         const inputHandlerMock = jest.fn();
         const page = await newSpecPage({
             components: [MonetaryInput],
-            html: `<form-control-monetary></form-control-monetary>`,
+            html: `<form-control-monetary maskOptions=${CURRENCY_MASK.DECIMAL}></form-control-monetary>`,
         });
         page.rootInstance.inputHandler = inputHandlerMock;
         await page.waitForChanges();
@@ -48,7 +50,7 @@ describe('form-control-monetary', () => {
     it('emits formControlBlur on input blur', async () => {
         const page = await newSpecPage({
             components: [MonetaryInput],
-            html: `<form-control-monetary></form-control-monetary>`,
+            html: `<form-control-monetary maskOptions=${CURRENCY_MASK.DECIMAL}></form-control-monetary>`,
         });
         const blurSpy = jest.fn();
         page.win.addEventListener('formControlBlur', blurSpy);
@@ -60,7 +62,7 @@ describe('form-control-monetary', () => {
     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>`,
+            html: `<form-control-monetary error="Invalid amount" maskOptions=${CURRENCY_MASK.DECIMAL}></form-control-monetary>`,
         });
         const errorDiv = page.root.shadowRoot.querySelector('.invalid-feedback');
         expect(errorDiv.textContent).toBe('Invalid amount');

package/dist/collection/components/refund-form/refund-form.js

@@ -3,6 +3,7 @@ import RefundFormSchema from "./refund-form-schema";
 import { Api } from "../../api";
 import { FormController } from "../form/form";
 import { config } from "../../../config";
+import { CURRENCY_MASK } from "../../utils/form-input-masks";
 export class RefundForm {
     constructor() {
         this.authToken = undefined;
@@ -73,7 +74,7 @@ export class RefundForm {
     }
     render() {
         var _a;
-        return (h(Host, null, h("h1", null, "Refund"), this.refundInfoText && (h("div", { class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { class: "m-0", innerHTML: this.refundInfoText }))), h("form", { onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { class: "form-group" }, h("form-control-monetary", { name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', inputHandler: (name, value) => this.handleInput(name, value), error: this.errors.amount })), h("div", { class: "form-group" }, h("form-control-text", { name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), error: this.errors.notes })), this.withButton && (h("div", { class: "form-group d-flex flex-row-reverse" }, h("button", { type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(Host, null, h("h1", null, "Refund"), this.refundInfoText && (h("div", { class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { class: "m-0", innerHTML: this.refundInfoText }))), h("form", { onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { class: "form-group" }, h("form-control-monetary", { name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), error: this.errors.amount })), h("div", { class: "form-group" }, h("form-control-text", { name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), error: this.errors.notes })), this.withButton && (h("div", { class: "form-group d-flex flex-row-reverse" }, h("button", { type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
     }
     static get is() { return "justifi-refund-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,3 +3,18 @@ export const PHONE_MASKS = {
 };
 export const TAX_ID_MASKS = { US: '00-0000000' };
 export const SSN_MASK = '000-00-0000';
+export const CURRENCY_MASK = {
+    WHOLE: {
+        mask: Number,
+        thousandsSeparator: ',',
+        normalizeZeros: true,
+    },
+    DECIMAL: {
+        mask: Number,
+        scale: 2,
+        thousandsSeparator: ',',
+        padFractionalZeros: true,
+        normalizeZeros: true,
+        radix: '.',
+    }
+};