@justifi/webcomponents 4.11.0 → 4.12.0

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

@@ -0,0 +1,192 @@
+import { Host, h, } from "@stencil/core";
+export class DateInput {
+    constructor() {
+        this.handleFormControlInput = (event) => {
+            const target = event.target;
+            const name = target.getAttribute('name');
+            this.inputHandler(name, target.value);
+            this.formControlInput.emit(target.value);
+        };
+        this.label = undefined;
+        this.name = undefined;
+        this.error = undefined;
+        this.defaultValue = undefined;
+        this.inputHandler = undefined;
+        this.disabled = undefined;
+        this.date = undefined;
+    }
+    updateInput(value) {
+        this.dateInput.value = value;
+    }
+    componentDidLoad() {
+        this.updateInput(this.defaultValue);
+    }
+    handleDefaultValueChange(newValue) {
+        this.updateInput(newValue);
+    }
+    render() {
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { type: "date", ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onChange: this.handleFormControlInput, part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    }
+    static get is() { return "form-control-date"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-control-date.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-control-date.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error",
+                "reflect": false
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "default-value",
+                "reflect": false
+            },
+            "inputHandler": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-handler",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "date": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "formControlInput",
+                "name": "formControlInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "formControlBlur",
+                "name": "formControlBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "defaultValue",
+                "methodName": "handleDefaultValueChange"
+            }];
+    }
+}

package/dist/collection/components/payment-form/payment-method-selector.js

@@ -34,7 +34,7 @@ export class PaymentMethodSelector {
                 "mutable": false,
                 "complexType": {
                     "original": "PaymentMethodTypes",
-                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card",
+                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card | PaymentMethodTypes.sezzel",
                     "references": {
                         "PaymentMethodTypes": {
                             "location": "import",

package/dist/collection/components/payment-method-form/payment-method-form.js

@@ -98,7 +98,7 @@ export class PaymentMethodForm {
                 "mutable": false,
                 "complexType": {
                     "original": "PaymentMethodTypes",
-                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card",
+                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card | PaymentMethodTypes.sezzel",
                     "references": {
                         "PaymentMethodTypes": {
                             "location": "import",

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;
-}