@justifi/webcomponents 4.23.1 → 5.0.0-rc-1

package/dist/module/form-control-number.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './form-control-error-text2.js';
-import { d as defineCustomElement$2 } from './form-control-help-text2.js';
+import { i as inputInvalidAndFocused, c as inputFocused, b as inputInvalid, d as input, l as label } from './parts.js';
+import { F as FormControlHelpText } from './form-control-help-text2.js';
+import { F as FormControlErrorText } from './form-control-error-text.js';
+import './details.js';
 
 const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends HTMLElement {
     constructor() {
@@ -20,6 +22,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
                 inputElement.value = newValue || '';
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -34,8 +37,23 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
+    get part() {
+        if (this.isFocused && this.errorText) {
+            return inputInvalidAndFocused;
+        }
+        if (this.isFocused) {
+            return inputFocused;
+        }
+        if (this.errorText) {
+            return inputInvalid;
+        }
+        return input;
+    }
     render() {
-        return (h(Host, { key: '3b2f42c3cd26fb238f2b728522608c9d37d087a9', exportparts: 'label,input,input-invalid' }, h("div", { key: '01a3382ef37353f3cad6d6ffb66ce2ff5f13b8de', class: 'form-group d-flex flex-column' }, h("label", { key: '981f1089d6ec68cda5c91ced9025b5ff021aad50', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'e1e2630c0d5921eb2c09f66495f534ac39f64f09', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h("form-control-help-text", { key: '8e2b99df6f3a2d5c3bca0903d0f74ff404a73cf8', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '03f12d2baa3aac08f460332a4867ab7ef8e82143', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '49da5c23574f5edac307f75d83285addee02d49f' }, h("div", { key: 'f12d88f53e7a1e97d3219b3cc4a2020295b7cb14', class: 'form-group d-flex flex-column' }, h("label", { key: '0c926aae68a9e42df7d8e7810a9de75d4db5f5e4', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '606c34cd4f4095b6bfd6c33bf46be8d8948d44ee', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '0cf682568468359ab5b2451b9746e02c7352ba08', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '8eedbb1669d0d776c61444fbb435dbdc0a297675', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -48,7 +66,8 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         "errorText": [1, "error-text"],
         "defaultValue": [1, "default-value"],
         "inputHandler": [16],
-        "disabled": [4]
+        "disabled": [4],
+        "isFocused": [32]
     }, undefined, {
         "defaultValue": ["handleDefaultValueChange"]
     }]);
@@ -56,23 +75,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-number", "form-control-error-text", "form-control-help-text"];
+    const components = ["form-control-number"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-number":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, NumberInput);
             }
             break;
-        case "form-control-error-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/module/form-control-radio2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './form-control-error-text2.js';
-import { d as defineCustomElement$1 } from './form-control-help-text2.js';
+import { E as inputRadioInvalid, F as inputRadioCheckedFocused, G as inputRadioChecked, H as inputRadioFocused, I as inputRadio, l as label } from './parts.js';
+import { d as defineCustomElement$1 } from './form-control-help-text3.js';
 
 const RadioInput = /*@__PURE__*/ proxyCustomElement(class RadioInput extends HTMLElement {
     constructor() {
@@ -11,61 +11,62 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class RadioInput extends HTM
         this.handleFormControlInput = (event) => {
             const target = event.target;
             const name = target.getAttribute('name');
-            this.inputHandler(name, target.checked);
-            this.formControlInput.emit({ name, value: target.value });
-        };
-        this.updateInput = (checked) => {
-            this.radioElement.checked = checked;
+            this.inputHandler(name, this.value);
+            this.formControlInput.emit({ name, value: this.value });
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.value = undefined;
         this.helpText = undefined;
-        this.errorText = undefined;
-        this.defaultChecked = undefined;
         this.inputHandler = undefined;
         this.disabled = undefined;
+        this.errorText = undefined;
+        this.checked = undefined;
     }
-    handleDefaultValueChange(checked) {
-        this.updateInput(checked);
-    }
-    componentDidLoad() {
-        this.updateInput(this.defaultChecked);
+    get part() {
+        if (this.errorText) {
+            return inputRadioInvalid;
+        }
+        if (this.isFocused && this.checked) {
+            return inputRadioCheckedFocused;
+        }
+        if (this.checked) {
+            return inputRadioChecked;
+        }
+        if (this.isFocused) {
+            return inputRadioFocused;
+        }
+        return inputRadio;
     }
     render() {
-        return (h(Host, { key: 'd06ffa17fb7ef51b08b8c0d52c6d83ec040a15a7', exportparts: "label,input,input-invalid" }, h("div", { key: '9dc89af6c7118dae09d29daa6739847ee11ba7ff', class: 'form-group d-flex flex-column' }, h("div", { key: 'fa028b5f9901ca403fe120bc16e9fb48e2a5c92d', class: "form-check" }, h("input", { key: '78222c89d2713c070b2d38be3bc7953cd5c18677', ref: el => (this.radioElement = el), type: "radio", id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input-radio ${this.errorText ? 'input-radio-invalid' : ''}`, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value }), h("label", { key: 'ef2c6c45bf587d87bad6883fe79622a648d80d80', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '28b32ee27148438b72bb909cc9cc309de936b158', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '8485f4d22f4bc0bb2238de5ab5bf7071203bac2b', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '79dc4556ca7a8e4bcb1485b9112579d45b0aa7f8', class: 'form-group d-flex flex-column' }, h("div", { key: '2e3a4b6f766e66949c29fb2221c5fb993ec21bc1', class: "form-check" }, h("input", { key: 'c6eb1f898ce5271e306dacb5a3cebaf91ccf9c3c', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: 'ca88d70ec21dac187445a32acb171263fe9f8b28', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '45ad5106aa41da3e2883456031d33b81be632eff', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '5cab198a27710fb8fee8902577dc288a8bd83e9c', errorText: this.errorText, name: this.name })));
     }
-    static get watchers() { return {
-        "defaultChecked": ["handleDefaultValueChange"]
-    }; }
 }, [0, "form-control-radio", {
         "label": [1],
         "name": [8],
-        "value": [8],
+        "value": [1],
         "helpText": [1, "help-text"],
-        "errorText": [1, "error-text"],
-        "defaultChecked": [4, "default-checked"],
         "inputHandler": [16],
-        "disabled": [4]
-    }, undefined, {
-        "defaultChecked": ["handleDefaultValueChange"]
+        "disabled": [4],
+        "errorText": [1, "error-text"],
+        "checked": [4],
+        "isFocused": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-radio", "form-control-error-text", "form-control-help-text"];
+    const components = ["form-control-radio", "form-control-help-text"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-radio":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, RadioInput);
             }
             break;
-        case "form-control-error-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();

package/dist/module/form-control-select2.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './custom-popper2.js';
-import { d as defineCustomElement$2 } from './form-control-error-text2.js';
+import { l as label, d as input, b as inputInvalid, z as inputDisabled, c as inputFocused } from './parts.js';
+import { F as FormControlErrorText } from './form-control-error-text.js';
+import './details.js';
+import { d as defineCustomElement$2 } from './custom-popper2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const SelectInput = /*@__PURE__*/ proxyCustomElement(class SelectInput extends HTMLElement {
@@ -18,6 +20,7 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class SelectInput extends H
         this.updateInput = (newValue) => {
             this.selectElement.value = newValue;
         };
+        this.isFocused = false;
         this.name = undefined;
         this.label = undefined;
         this.options = undefined;
@@ -33,9 +36,25 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class SelectInput extends H
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
+    get part() {
+        let part = input;
+        if (this.errorText) {
+            part = inputInvalid;
+        }
+        if (this.disabled) {
+            part = inputDisabled;
+        }
+        if (this.isFocused) {
+            part = inputFocused;
+        }
+        return part;
+    }
     render() {
         var _a;
-        return (h(Host, { key: '2825653443c2fdd8c6e059e03f9170fa0f293fe5', exportparts: "label,input,input-invalid" }, h("div", { key: '8eb3d38a99762d030b534cbb195e5f12da754ed4', class: "form-group d-flex flex-column" }, h("div", { key: 'ac41bf1269b5eec07e63eb9426d05684dac1aadc', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ba1cd374fdb460b72ed509366a469c6d0cf9779e', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '7e81054e6daa2b19cae341126d49085d9c083602', helpText: this.helpText })), h("select", { key: '8eea54929eddbc98e71c0d8175e54b7e284a9f63', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? '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)))), h("form-control-error-text", { key: 'e980065897e2c26b3f787dc576d4c5ffaeb7bdd3', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'f7c77b6bcef56ad9bee73f9bfcac24bea025893d' }, h("div", { key: 'f6a15dd79da5e8c6c41219e68a025cecdc12e7d8', class: "form-group d-flex flex-column" }, h("div", { key: '73bbe07c72a568a4c70e1f806fc6c53d78902b56', class: "d-flex align-items-start gap-2" }, h("label", { key: '79d749b1a0d818cb4b65468cc0b4fdfc9c76136f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '34f1dd32c494652df248c492990ad5bda62aa59d', helpText: this.helpText })), h("select", { key: '257d4cd10e37b1707a299ef1bce0e36102cad16b', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? '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)))), h(FormControlErrorText, { key: '8aba26a249c5fdcead2ace90d47cdb891e152dba', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
@@ -48,7 +67,8 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class SelectInput extends H
         "defaultValue": [1, "default-value"],
         "helpText": [1, "help-text"],
         "errorText": [1, "error-text"],
-        "disabled": [4]
+        "disabled": [4],
+        "isFocused": [32]
     }, undefined, {
         "defaultValue": ["handleDefaultValueChange"]
     }]);
@@ -56,7 +76,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-select", "custom-popper", "form-control-error-text", "form-control-tooltip"];
+    const components = ["form-control-select", "custom-popper", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-select":
             if (!customElements.get(tagName)) {
@@ -64,11 +84,6 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/form-control-text2.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './custom-popper2.js';
-import { d as defineCustomElement$2 } from './form-control-error-text2.js';
+import { b as inputInvalid, z as inputDisabled, c as inputFocused, d as input, l as label } from './parts.js';
+import { F as FormControlErrorText } from './form-control-error-text.js';
+import './details.js';
+import { d as defineCustomElement$2 } from './custom-popper2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLElement {
@@ -21,6 +23,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
                 inputElement.value = newValue || '';
             }
         };
+        this.isFocused = false;
         this.name = undefined;
         this.label = undefined;
         this.inputHandler = undefined;
@@ -37,8 +40,23 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
+    get part() {
+        if (this.errorText) {
+            return inputInvalid;
+        }
+        if (this.disabled) {
+            return inputDisabled;
+        }
+        if (this.isFocused) {
+            return inputFocused;
+        }
+        return input;
+    }
     render() {
-        return (h(Host, { key: '31f393afa67b52bea6b833a12be0bd06ce673bb2', exportparts: "label,input,input-invalid" }, h("div", { key: '14e875434e0f5c942623cbac1c338ef8775ed24d', class: "form-group d-flex flex-column" }, h("div", { key: '7c43ad5f89675b4db4b70e1e43a862e493ebeb30', class: "d-flex align-items-start gap-2" }, h("label", { key: '7d97de55470f39608349cf54225b927f9f029db8', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fd857b971360bf3bc87d902e28e15b17c1484bdd', helpText: this.helpText })), h("input", { key: 'ba0e1464cd736c8761cdee43715f9986480639c7', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? " input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h("form-control-error-text", { key: '31c1a57ce24a129a199864f20a0498957c2a43ea', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '1303fabdad4bbf9ec2cf02e8dacbcafed74d3b8f' }, h("div", { key: 'd5438a9fd0c6b197a23f546181c1c57342824f7b', class: "form-group d-flex flex-column" }, h("div", { key: 'df99160e9af69f44bc369e579de9219e10797114', class: "d-flex align-items-start gap-2" }, h("label", { key: '669a04f01feac1aa712b6d8d43576a2f2f352cef', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e2572600e8d8a64d2b5db676cf5e407921a280e9', helpText: this.helpText })), h("input", { key: '9bae401bab3d6183b0b1f5bcee0546a8cb8bb499', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '098d7991c5c68730eedcc19ad62424a84a9acc70', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -53,7 +71,8 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
         "errorText": [1, "error-text"],
         "maxLength": [2, "max-length"],
         "keyDownHandler": [16],
-        "disabled": [4]
+        "disabled": [4],
+        "isFocused": [32]
     }, undefined, {
         "defaultValue": ["handleDefaultValueChange"]
     }]);
@@ -61,7 +80,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-text", "custom-popper", "form-control-error-text", "form-control-tooltip"];
+    const components = ["form-control-text", "custom-popper", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-text":
             if (!customElements.get(tagName)) {
@@ -69,11 +88,6 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/form-control-textarea2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './form-control-error-text2.js';
-import { d as defineCustomElement$1 } from './form-control-help-text2.js';
+import { i as inputInvalidAndFocused, b as inputInvalid, c as inputFocused, z as inputDisabled, d as input, l as label } from './parts.js';
+import { d as defineCustomElement$1 } from './form-control-help-text3.js';
 
 const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLElement {
     constructor() {
@@ -15,11 +15,12 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
             this.formControlInput.emit({ name, value: target.value });
         };
         this.updateInput = (newValue) => {
-            const inputElement = this.el.querySelector('input');
+            const inputElement = this.el.querySelector('textarea');
             if (inputElement) {
                 inputElement.value = newValue || '';
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -36,8 +37,26 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
+    get part() {
+        if (this.isFocused && this.errorText) {
+            return inputInvalidAndFocused;
+        }
+        if (this.errorText) {
+            return inputInvalid;
+        }
+        if (this.isFocused) {
+            return inputFocused;
+        }
+        if (this.disabled) {
+            return inputDisabled;
+        }
+        return input;
+    }
     render() {
-        return (h(Host, { key: 'df50b59fa604d9411c904096342910fa7bda38c5', exportparts: "label,input,input-invalid" }, h("div", { key: '586ec64cf4e9fa5c557745225a24b500ccbe2479', class: "form-group d-flex flex-column" }, h("label", { key: 'eb2134c04fb7ed8e23606eaef6257767451fc4f1', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '786ba64947c1ecfc70bbca823490a227c9fcd544', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'a3d0c605439eb3f6dab7c61dc49c14dad0207623', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '0f0abe694c8b7a66378b447728a466407b51b082', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '2bf7205da9907d7e72c57bdb8cf7225ba79df6f8' }, h("div", { key: 'bba562087283e69f6bf30d644befa71f3e7edd82', class: "form-group d-flex flex-column" }, h("label", { key: '6337fd2a00e5feff788aa867fb357bb42ee76f0e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'fa0e759bb588317b24ea8ba9c554c93a8c5c8934', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'f03979b74b6cc7fd80b46345df805cf81f120dc5', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '5ab2c830a5f1345034e2c2abeca8d3e6e0a1a2ec', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -52,7 +71,8 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
         "maxLength": [2, "max-length"],
         "inputHandler": [16],
         "keyDownHandler": [16],
-        "disabled": [4]
+        "disabled": [4],
+        "isFocused": [32]
     }, undefined, {
         "defaultValue": ["handleDefaultValueChange"]
     }]);
@@ -60,18 +80,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-textarea", "form-control-error-text", "form-control-help-text"];
+    const components = ["form-control-textarea", "form-control-help-text"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-textarea":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TextInput);
             }
             break;
-        case "form-control-error-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();

package/dist/module/form-control-tooltip2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { A as tooltipIcon, B as tooltip, C as tooltipInner } from './parts.js';
 import { d as defineCustomElement$1 } from './custom-popper2.js';
 
 const TooltipComponent = /*@__PURE__*/ proxyCustomElement(class TooltipComponent extends HTMLElement {
@@ -19,7 +20,7 @@ const TooltipComponent = /*@__PURE__*/ proxyCustomElement(class TooltipComponent
         if (!this.helpText) {
             return null;
         }
-        return (h("div", { class: "tooltip-container" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-question-square tooltip-icon", viewBox: "0 0 16 16", ref: (el) => (this.anchorIcon = el), part: "tooltip-icon" }, h("path", { d: "M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" }), h("path", { d: "M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94" })), h("custom-popper", { trigger: "hover", placement: "top", anchorRef: this.anchorIcon }, h("div", { class: "tooltip bs-tooltip-top", part: "tooltip", role: "tooltip", ref: (el) => (this.tooltip = el) }, h("div", { class: "tooltip-inner", part: "tooltip-inner" }, this.helpText)))));
+        return (h("div", { class: "tooltip-container" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-question-square tooltip-icon", viewBox: "0 0 16 16", ref: (el) => (this.anchorIcon = el), part: tooltipIcon }, h("path", { d: "M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" }), h("path", { d: "M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94" })), h("custom-popper", { trigger: "hover", placement: "top", anchorRef: this.anchorIcon }, h("div", { class: "tooltip bs-tooltip-top", part: tooltip, role: "tooltip", ref: (el) => (this.tooltip = el) }, h("div", { class: "tooltip-inner", part: tooltipInner }, this.helpText)))));
     }
 }, [0, "form-control-tooltip", {
         "helpText": [1, "help-text"],

package/dist/module/form.js

@@ -3028,7 +3028,7 @@ class FormController {
     async validateAndSubmit(submitHandler, context) {
         const isValid = await this.validate(context || {});
         if (isValid) {
-            submitHandler();
+            submitHandler(this._values);
         }
     }
     setInitialValues(values) {

package/dist/module/generic-info-details2.js

@@ -2,9 +2,6 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { D as DetailSectionTitle, a as DetailItem } from './utils.js';
 import { s as snakeCaseToHumanReadable } from './utils2.js';
 
-const sharedBusinessDetailsCss = ".flex-1{flex:1}";
-const GenericInfoDetailsStyle0 = sharedBusinessDetailsCss;
-
 const GenericInfoDetails = /*@__PURE__*/ proxyCustomElement(class GenericInfoDetails extends HTMLElement {
     constructor() {
         super();
@@ -15,9 +12,8 @@ const GenericInfoDetails = /*@__PURE__*/ proxyCustomElement(class GenericInfoDet
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!this.business)
             return null;
-        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Business Generic Info 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: "Legal Name", value: (_a = this.business) === null || _a === void 0 ? void 0 : _a.legal_name }), h(DetailItem, { title: "Doing Business As (DBA)", value: (_b = this.business) === null || _b === void 0 ? void 0 : _b.doing_business_as }), h(DetailItem, { title: "Business Classification", value: snakeCaseToHumanReadable((_c = this.business) === null || _c === void 0 ? void 0 : _c.classification) }), h(DetailItem, { title: "Industry", value: (_d = this.business) === null || _d === void 0 ? void 0 : _d.industry })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Tax ID", value: (_e = this.business) === null || _e === void 0 ? void 0 : _e.tax_id }), h(DetailItem, { title: "Website URL", value: (_f = this.business) === null || _f === void 0 ? void 0 : _f.website_url }), h(DetailItem, { title: "Email Address", value: (_g = this.business) === null || _g === void 0 ? void 0 : _g.email }), h(DetailItem, { title: "Phone Number", value: (_h = this.business) === null || _h === void 0 ? void 0 : _h.phone }))))));
+        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Business Generic Info Details" }), h("div", { class: "d-table gap-2 w-100 mt-3" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Legal Name", value: (_a = this.business) === null || _a === void 0 ? void 0 : _a.legal_name }), h(DetailItem, { title: "Doing Business As (DBA)", value: (_b = this.business) === null || _b === void 0 ? void 0 : _b.doing_business_as }), h(DetailItem, { title: "Business Classification", value: snakeCaseToHumanReadable((_c = this.business) === null || _c === void 0 ? void 0 : _c.classification) }), h(DetailItem, { title: "Industry", value: (_d = this.business) === null || _d === void 0 ? void 0 : _d.industry })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Tax ID", value: (_e = this.business) === null || _e === void 0 ? void 0 : _e.tax_id }), h(DetailItem, { title: "Website URL", value: (_f = this.business) === null || _f === void 0 ? void 0 : _f.website_url }), h(DetailItem, { title: "Email Address", value: (_g = this.business) === null || _g === void 0 ? void 0 : _g.email }), h(DetailItem, { title: "Phone Number", value: (_h = this.business) === null || _h === void 0 ? void 0 : _h.phone }))))));
     }
-    static get style() { return GenericInfoDetailsStyle0; }
 }, [0, "generic-info-details", {
         "business": [16]
     }]);

package/dist/module/get-payout-csv.js

@@ -5,7 +5,7 @@ import './Payment.js';
 import './SubAccount.js';
 import { c as config } from './config.js';
 import { a as ComponentErrorSeverity } from './ComponentError.js';
-import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 
 class PayoutService {
     async fetchPayouts(accountId, authToken, params, apiOrigin) {

package/dist/module/get-subaccounts.js

@@ -5,7 +5,7 @@ import './Payment.js';
 import { S as SubAccount } from './SubAccount.js';
 import { c as config } from './config.js';
 import { a as ComponentErrorSeverity } from './ComponentError.js';
-import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 
 class SubAccountService {
     async fetchSubAccounts(accountId, authToken, params, apiOrigin) {

package/dist/module/gross-payment-chart-core2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as formatCurrency, d as formatDisplayDate } from './utils2.js';
-import { L as LoadingState, E as ErrorState } from './utils.js';
+import { E as ErrorState } from './utils.js';
+import { S as Spinner } from './spinner.js';
 
 /*!
  * @kurkle/color v0.3.2
@@ -10970,9 +10971,6 @@ const generateChartOptions = (total, dates, endDate) => {
     });
 };
 
-const grossPaymentChartCss = ":host{display:block}";
-const GrossPaymentChartCoreStyle0 = grossPaymentChartCss;
-
 Chart.register(plugin_colors, BarController, BarElement, CategoryScale, LinearScale, plugin_legend, plugin_tooltip, plugin_title);
 const GrossPaymentChartCore = /*@__PURE__*/ proxyCustomElement(class GrossPaymentChartCore extends HTMLElement {
     constructor() {
@@ -11042,13 +11040,12 @@ const GrossPaymentChartCore = /*@__PURE__*/ proxyCustomElement(class GrossPaymen
         }
     }
     render() {
-        return (h(Host, { key: '80dfc1ae805ac7e1d34222037de6f492feabf619' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: 'ac73fa9c5543c6c9b7170ccc99d1a48b2e1d28b5' }, this.loading && h(Spinner, { key: 'eb847368027fef8f004c913d0a09cf692f493ce3' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get watchers() { return {
         "getGrossPayment": ["propChanged"],
         "grossVolumeReport": ["grossVolumeReportChanged"]
     }; }
-    static get style() { return GrossPaymentChartCoreStyle0; }
 }, [0, "gross-payment-chart-core", {
         "getGrossPayment": [16],
         "grossVolumeReport": [32],

package/dist/module/header-1.js

@@ -0,0 +1,8 @@
+import { h } from '@stencil/core/internal/client';
+import { a as heading1 } from './parts.js';
+
+const Header1 = (props) => {
+    return h("h1", { class: `header-1 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading1 }, props.text);
+};
+
+export { Header1 as H };

package/dist/module/{payments-list-filters.d.ts → hidden-input.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface PaymentsListFilters extends Components.PaymentsListFilters, HTMLElement {}
-export const PaymentsListFilters: {
-    prototype: PaymentsListFilters;
-    new (): PaymentsListFilters;
+interface HiddenInput extends Components.HiddenInput, HTMLElement {}
+export const HiddenInput: {
+    prototype: HiddenInput;
+    new (): HiddenInput;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/module/hidden-input.js

@@ -0,0 +1,6 @@
+import { H as HiddenInput$1, d as defineCustomElement$1 } from './hidden-input2.js';
+
+const HiddenInput = HiddenInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HiddenInput, defineCustomElement };