@justifi/webcomponents 4.23.1 → 5.0.0-rc-1

package/dist/esm/form-control-checkbox.entry.js

@@ -0,0 +1,53 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-29fcfdf5.js';
+import { M as inputCheckboxInvalid, N as inputCheckboxCheckedFocused, O as inputCheckboxFocused, P as inputCheckboxChecked, Q as inputCheckbox, l as label } from './parts-186d437f.js';
+import { F as FormControlHelpText } from './form-control-help-text-a2fc3617.js';
+import { F as FormControlErrorText } from './form-control-error-text-3b2553b5.js';
+
+const CheckboxInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.formControlInput = createEvent(this, "formControlInput", 7);
+        this.formControlBlur = createEvent(this, "formControlBlur", 7);
+        this.handleFormControlInput = (event) => {
+            event.preventDefault();
+            const target = event.target;
+            const name = target.getAttribute('name');
+            this.inputHandler(name, target.checked);
+            this.formControlInput.emit({ name, value: target.value });
+        };
+        this.updateInput = (newValue) => {
+            this.checkboxElement.checked = newValue;
+        };
+        this.isFocused = false;
+        this.label = undefined;
+        this.name = undefined;
+        this.helpText = undefined;
+        this.errorText = undefined;
+        this.checked = undefined;
+        this.inputHandler = undefined;
+        this.disabled = undefined;
+    }
+    get part() {
+        if (this.errorText) {
+            return inputCheckboxInvalid;
+        }
+        if (this.isFocused && this.checked) {
+            return inputCheckboxCheckedFocused;
+        }
+        if (this.isFocused) {
+            return inputCheckboxFocused;
+        }
+        if (this.checked) {
+            return inputCheckboxChecked;
+        }
+        return inputCheckbox;
+    }
+    render() {
+        return (h(Host, { key: '1aedf7dc7572040d5d1accb6fce84c42c12e2889' }, h("div", { key: '454a062fd481093d4b4a5769c3b2a79b61f07c20', class: 'form-group d-flex flex-column' }, h("div", { key: '087e692e098975b4a78ecbdfee50f183787b1f9e', class: "form-check" }, h("input", { key: 'cf71f2abd44da0cf0bed71f102af6ead74b34bf2', ref: el => (this.checkboxElement = el), type: "checkbox", 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-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: '02ce674c833c5b2795d1d041bc1e7d9fe351f514', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'aab32007a08af39b4fa4314eba5e7e2b2ff57d31', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'cf906dec9c1f2763156fa0becf4389a728a14b39', errorText: this.errorText, name: this.name }))));
+    }
+};
+
+export { CheckboxInput as form_control_checkbox };

package/dist/esm/form-control-date.entry.js

@@ -1,4 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-57431c24.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-29fcfdf5.js';
+import { l as label, c as input, b as inputInvalid, D as inputDisabled, a as inputFocused } from './parts-186d437f.js';
+import { F as FormControlErrorText } from './form-control-error-text-3b2553b5.js';
 
 const DateInput = class {
     constructor(hostRef) {
@@ -10,6 +12,7 @@ const DateInput = class {
             this.inputHandler(this.name, dateValue);
             this.formControlInput.emit({ name: this.name, value: dateValue });
         };
+        this.isFocused = false;
         this.name = undefined;
         this.label = undefined;
         this.inputHandler = undefined;
@@ -37,8 +40,24 @@ const DateInput = class {
     updateInput(value) {
         this.dateInput.value = value;
     }
+    get part() {
+        let part = input;
+        if (this.errorText) {
+            part = inputInvalid;
+        }
+        if (this.disabled) {
+            part = inputDisabled;
+        }
+        if (this.isFocused) {
+            part = inputFocused;
+        }
+        return part;
+    }
     render() {
-        return (h(Host, { key: '29a793e97ef8cc6bd532ce6f86e31028e6a3a783', exportparts: "label,input,input-invalid" }, h("div", { key: '32487660602957a69c9cd82625bd019335e76124', class: "form-group d-flex flex-column" }, h("div", { key: '5d45a740e61f328cb0bec179117b97ea9449bc03', class: "d-flex gap-2" }, h("label", { key: 'ba01fd2ce1f8f8cfa3a0599b21c01071eb6400a0', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'aeaaf6caa4b4999ec1ecd419f4699aceb72d6cb1', helpText: this.helpText })), h("input", { key: 'af713ff971ca5b8c046199ff1252db40649a8f94', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), 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', disabled: this.disabled, max: this.maxDate }), h("form-control-error-text", { key: '02338706e4d55074014d8e177c27c002181a93e6', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '238d6dc419c36dafa07e03e0b16dc8e18c620894' }, h("div", { key: 'e4dec93ad672ad2e8599851e0fc541b5a4fb21a0', class: "form-group d-flex flex-column" }, h("div", { key: '51cf231ffd7f8d7253ee67d85211d6e01b082ae9', class: "d-flex gap-2" }, h("label", { key: '23b2f623f5d019b87150061f848aebd32f54c164', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3bd071cb30d9b52a60a1210bf49b96f2283f80dd', helpText: this.helpText })), h("input", { key: '10dc76f79b4cdc831195ab037369d9be10e6108b', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = 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-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: 'e06413cc8b9d57f1a89efad44c3b93c82078f5b6', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]

package/dist/esm/form-control-error-text-3b2553b5.js

@@ -0,0 +1,12 @@
+import { h } from './index-29fcfdf5.js';
+import { d as textDanger } from './parts-186d437f.js';
+
+const FormControlErrorText = (props) => {
+    const { errorText, name } = props;
+    if (!errorText) {
+        return null;
+    }
+    return (h("small", { class: 'form-text text-danger', id: `form-error-text-${name}`, part: textDanger }, errorText));
+};
+
+export { FormControlErrorText as F };

package/dist/esm/form-control-file-v2_2.entry.js

@@ -0,0 +1,85 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-29fcfdf5.js';
+import { i as inputInvalidAndFocused, b as inputInvalid, a as inputFocused, D as inputDisabled, c as input, l as label } from './parts-186d437f.js';
+
+const FileInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.formControlInput = createEvent(this, "formControlInput", 7);
+        this.formControlBlur = createEvent(this, "formControlBlur", 7);
+        this.files = undefined;
+        this.label = undefined;
+        this.name = undefined;
+        this.helpText = undefined;
+        this.errorText = undefined;
+        this.multiple = undefined;
+        this.inputHandler = undefined;
+        this.disabled = undefined;
+    }
+    render() {
+        return (h(Host, { key: '0ff92310d25c06e1fa0271f4dcb1f2c3f9af6bc9', exportparts: "label,input,input-invalid" }, h("div", { key: 'c07d1173914b8f4a474656108219502dcd356798', class: "form-group d-flex flex-column" }, h("div", { key: 'cc37bcfa3d65f4dc8b1d6f6b43b52a2282398b29', class: "d-flex align-items-start gap-2" }, h("label", { key: '5a042d4b42b5372ca465c3636dfedec7beea91f0', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '2b227a49d2e65d2b4a5d4248a5d1dbc234a8aaf0', helpText: this.helpText })), h("input", { key: '9c81ac8b2fe6742959d7502b99b43bd192efecd3', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit() }), h("form-control-error-text", { key: 'e650ab21dce572c1ed4c20f6d5f64253a39d5420', errorText: this.errorText, name: this.name }))));
+    }
+    get el() { return getElement(this); }
+};
+
+const TextInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.formControlInput = createEvent(this, "formControlInput", 7);
+        this.formControlBlur = createEvent(this, "formControlBlur", 7);
+        this.handleFormControlInput = (event) => {
+            const target = event.target;
+            const name = target.getAttribute('name');
+            this.inputHandler(name, target.value);
+            this.formControlInput.emit({ name, value: target.value });
+        };
+        this.updateInput = (newValue) => {
+            const inputElement = this.el.querySelector('textarea');
+            if (inputElement) {
+                inputElement.value = newValue || '';
+            }
+        };
+        this.isFocused = false;
+        this.label = undefined;
+        this.name = undefined;
+        this.helpText = undefined;
+        this.errorText = undefined;
+        this.defaultValue = undefined;
+        this.maxLength = undefined;
+        this.inputHandler = undefined;
+        this.keyDownHandler = undefined;
+        this.disabled = undefined;
+    }
+    handleDefaultValueChange(newValue) {
+        this.updateInput(newValue);
+    }
+    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: '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 getElement(this); }
+    static get watchers() { return {
+        "defaultValue": ["handleDefaultValueChange"]
+    }; }
+};
+
+export { FileInput as form_control_file_v2, TextInput as form_control_textarea };

package/dist/esm/form-control-file.entry.js

@@ -1,4 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-57431c24.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-29fcfdf5.js';
+import { l as label, c as input, b as inputInvalid, D as inputDisabled, a as inputFocused } from './parts-186d437f.js';
+import { F as FormControlErrorText } from './form-control-error-text-3b2553b5.js';
 
 const FileInput = class {
     constructor(hostRef) {
@@ -23,6 +25,7 @@ const FileInput = class {
         };
         this.files = undefined;
         this.fileString = undefined;
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -35,8 +38,24 @@ const FileInput = class {
     componentDidLoad() {
         this.fileInput = this.el.querySelector('input');
     }
+    get part() {
+        let part = input;
+        if (this.errorText) {
+            part = inputInvalid;
+        }
+        if (this.disabled) {
+            part = inputDisabled;
+        }
+        if (this.isFocused) {
+            part = inputFocused;
+        }
+        return part;
+    }
     render() {
-        return (h(Host, { key: 'e67b1c78293ee490ff9f468e98533c2eed03a14a', exportparts: "label,input,input-invalid" }, h("div", { key: '373c4ccfdbdd49f00bfe3673bb284930706f7842', class: "form-group d-flex flex-column" }, h("div", { key: '93d7524b79cc2a537f4ccc6bea300182ddd31f40', class: "d-flex align-items-start gap-2" }, h("label", { key: 'f5619fd58b973b31c8ea47b52715ede5f5891283', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fd0979253100c2e3efbb30a6fd698b756cf42bbe', helpText: this.helpText })), h("input", { key: '8185ccf0fdae02ec7c8cfd6d6cdedfe80f012f4e', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onBlur: () => this.formControlBlur.emit() }), h("form-control-error-text", { key: '0aef8ab535103ef7a0b8f7df3b23508985559072', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'fe114fda9b6ad4863b1c770721a0740571b7fc97' }, h("div", { key: '75a98a14cb2a1d6b75d6652122a38955a75824d5', class: "form-group d-flex flex-column" }, h("div", { key: '888de79af6f8a11cc60b4caf106ae06ad8279493', class: "d-flex align-items-start gap-2" }, h("label", { key: '9db2a6b00f02b89cab1784749e2d0043a71ece6c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '6a2e7377ee731403185d47a45d6e6e5c7287f05f', helpText: this.helpText })), h("input", { key: '4528e49dfa270f8fd72ad58669767558f63389a4', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            } }), h(FormControlErrorText, { key: 'fa1ac29957babba015d0a18eb07d5dba8d550fc8', errorText: this.errorText, name: this.name }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/form-control-help-text-a2fc3617.js

@@ -0,0 +1,12 @@
+import { h } from './index-29fcfdf5.js';
+import { t as text } from './parts-186d437f.js';
+
+const FormControlHelpText = (props) => {
+    const { helpText, name } = props;
+    if (!helpText) {
+        return null;
+    }
+    return (h("small", { class: 'form-text text-muted', id: `form-help-text-${name}`, part: text }, helpText));
+};
+
+export { FormControlHelpText as F };

package/dist/esm/form-control-help-text.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-57431c24.js';
+import { r as registerInstance, h } from './index-29fcfdf5.js';
 
 const FormControlHelpText = class {
     constructor(hostRef) {

package/dist/esm/form-control-monetary.entry.js

@@ -1,6 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-57431c24.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-29fcfdf5.js';
 import { I as IMask } from './index-d9a73ce3.js';
 import { C as CURRENCY_MASK } from './form-input-masks-0e18300f.js';
+import { l as label, t as text, E as inputGroup, b as inputInvalid, D as inputDisabled, a as inputFocused } from './parts-186d437f.js';
+import { F as FormControlHelpText } from './form-control-help-text-a2fc3617.js';
+import { F as FormControlErrorText } from './form-control-error-text-3b2553b5.js';
 
 const MonetaryInput = class {
     constructor(hostRef) {
@@ -30,6 +33,7 @@ const MonetaryInput = class {
                 this.imask.value = String(newValue);
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -50,8 +54,24 @@ const MonetaryInput = class {
         var _a;
         (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
     }
+    get part() {
+        let part = inputGroup;
+        if (this.errorText) {
+            part = inputInvalid;
+        }
+        if (this.disabled) {
+            part = inputDisabled;
+        }
+        if (this.isFocused) {
+            part = inputFocused;
+        }
+        return part;
+    }
     render() {
-        return (h(Host, { key: '27e8570c7ddb6747f8b78fdf0222747022b2e4b2', exportparts: "label,input,input-group-input,input-group-text,input-invalid" }, h("div", { key: '1ee22eda4b9f5b5ddf42f1d15d4ec3ee084e967e', class: "form-group d-flex flex-column" }, h("label", { key: '73930260feaeca6edab8b9947da211358474b680', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '7da2e46e0538563151f4603bfbeee22a447e7310', class: "input-group" }, h("span", { key: '3209947bf3c65c2ecfd3b56a0da27d663b444742', class: "input-group-text", part: "input-group-text" }, "$"), h("input", { key: 'ba3d0b0a55ba25a9b7315fc9e95e408073b47cf5', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input input-group-input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h("form-control-help-text", { key: 'af50f5b6f8f9ce1ac80be790f64dfbcd5067f5aa', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2d134789d103c82c545c97428e6a4e4da1c0e099', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '88ef65f78570c7351c159e89fab22c453bdaa1ec' }, h("div", { key: '1e7cfe678ff76dcd4833626f6cdb8f278ff65236', class: "form-group d-flex flex-column" }, h("label", { key: 'd3ac3a07988ebd57dd5c58ad2ffdba7399daf3e5', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '382697de0c28754de0355fb819365869007c8c20', class: "input-group" }, h("span", { key: 'cf6f813dfcf45dd2c4c1a9b08360a0a70908d52e', class: "input-group-text", part: text }, "$"), h("input", { key: '47e21184a0b08b8e64ae9974610df777537b9789', ref: el => (this.textInput = 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-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: '5fc015ef8bc059be448a3d8667125e0502d1f519', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'e79f133b65fc016c6d8d940a631f6dd6694038d4', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]

package/dist/esm/form-control-number-masked_2.entry.js

@@ -1,5 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-57431c24.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-29fcfdf5.js';
 import { I as IMask } from './index-d9a73ce3.js';
+import { b as inputInvalid, D as inputDisabled, a as inputFocused, c as input, l as label } from './parts-186d437f.js';
+import { F as FormControlErrorText } from './form-control-error-text-3b2553b5.js';
 import { S as StateOptions } from './state-options-a356fb11.js';
 import { n as numberOnlyHandler } from './utils-20cdf321.js';
 
@@ -34,6 +36,7 @@ const NumberInputMasked = class {
                 this.imask.value = String(newValue);
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -57,8 +60,23 @@ const NumberInputMasked = class {
             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: '2347d776d2ca3dba7c4c331bbeb3d4e359268704', exportparts: "label,input,input-invalid" }, h("div", { key: '16d437f201888fdef6148630e5afc75ee7c36bae', class: "form-group d-flex flex-column" }, h("div", { key: 'd776ff7c160cbba0436ec36e20cb0c81edbc380f', class: "d-flex align-items-start gap-2" }, h("label", { key: '8c6664087dc2593870380341cf51fc5511a95e35', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1495842c0cd7117c50c62888cf90e001a4e15756', helpText: this.helpText })), h("input", { key: 'f2468b56ba6f1e7482c5437ce728a4dc39db966b', ref: el => (this.textInput = el), 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: "text", disabled: this.disabled }), h("form-control-error-text", { key: '7e2485e91f263e8a970b91628adf945eb3280c2d', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'e4b85378d57333a4408c941f49fde3a074128173' }, h("div", { key: 'c93d07e39bfbf1bfbc4ae424861a3b0a582a8d32', class: "form-group d-flex flex-column" }, h("div", { key: '0ea90b20800bf4c24e61e28e25575a77db7d42ef', class: "d-flex align-items-start gap-2" }, h("label", { key: '96ba0eb2bd01f4d9a5ab249ae718e4b699cc1497', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ea12ab4a5b24d7baf2480f0a3a9e9ea2b792e144', helpText: this.helpText })), h("input", { key: '46e7d3817e1556ab91101085c41af284cdc14e24', ref: el => (this.textInput = 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-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '46fe5efdc607c8ffacbc9e7a061e6af9eb06d0a9', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
@@ -82,7 +100,7 @@ const IdentityAddressForm = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (h(Host, { key: '5d9d020cdb5f9e0c422098f82fbd9b1c237515f2', exportparts: "label,input,input-invalid" }, h("div", { key: '280b3308698d51c8f3e60124f0433e12ff585abe', class: "row gy-3" }, h("div", { key: 'c31ef56c52561e2acaed2dac868117f6171a09cb', class: "col-12 col-md-8" }, h("form-control-text", { key: 'a53eb44a3b6ab0044ba1746025293fa5be1cd469', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler, helpText: "\u200B\u200BEnter your address exactly as stated on your driver's license. No PO Boxes." })), h("div", { key: 'cd62d3f1ea062f67ab71ced663954b172fa3c4ed', class: "col-12 col-md-4" }, h("form-control-text", { key: '24b4e359217b92c9d010c23f0a670f32a969c36e', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: '5e2cf9ef49d42c736d8004e5063377a962857b35', class: "col-12" }, h("form-control-text", { key: 'b408fca949adc1e1f96ad1ab01d8265ef427cd18', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: 'ab8c048e274784406a8a872650e68791d3aa5844', class: "col-12 col-md-6" }, h("form-control-select", { key: '76db258faf7a4b30f7f1b6c6e975e5ea7e7c61d6', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: '8bd2661ad3e579a52f91ce58c6be680d9955584b', class: "col-12 col-md-6" }, h("form-control-text", { key: 'd8a2f3552e25bc57d8f09e61ee78f7f5a33e4bc7', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '93be2db05699edaa12981e0d96a9626ecc169030', class: "col-12" }, h("form-control-select", { key: '5f99c15b72cec36dc3b895c4dadce328f4503f6a', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
+        return (h(Host, { key: 'f656800204764998e856bc6e424d5b925556f74c' }, h("div", { key: '414d5507b883730806e43e7ee6b019eb1790b881', class: "row gy-3" }, h("div", { key: '20581fd2b6e19efeb59fb34d196da8d831961da7', class: "col-12 col-md-8" }, h("form-control-text", { key: '8cbdb2cd9e68a68344c58ca024dbdc45b04dd2b4', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler, helpText: "\u200B\u200BEnter your address exactly as stated on your driver's license. No PO Boxes." })), h("div", { key: 'e1725384142b69f39412cbdb01d9d036b1e13dc3', class: "col-12 col-md-4" }, h("form-control-text", { key: 'c90910fff750cae3133e84f01af76260d13c6848', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: 'e5afde1beebbf0b23558b028ee06baebf15704ce', class: "col-12" }, h("form-control-text", { key: '972d1fb59ee22fa414c46e9d913de9f9fafa3e75', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: '75fa447f21b17cc42853fd0c6cf01e94c04a6fa5', class: "col-12 col-md-6" }, h("form-control-select", { key: '5c0acedaea09564d0936c8d4facd45162658a204', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: '6f2a269d614a16786cdc2675bf004afe2500a4b2', class: "col-12 col-md-6" }, h("form-control-text", { key: '713c45106b050b6d92e2335b0a574c6f2538050a', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: 'de7ad3baaaed9d197cbf8c68e77c92e45ebeb384', class: "col-12" }, h("form-control-select", { key: 'a3283696fc83f3f891888588a313c70af989b04d', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
             // just for now so we skip handling country specificities
             disabled: true })))));
     }

package/dist/esm/form-control-number.entry.js

@@ -1,4 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-57431c24.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-29fcfdf5.js';
+import { i as inputInvalidAndFocused, a as inputFocused, b as inputInvalid, c as input, l as label } from './parts-186d437f.js';
+import { F as FormControlHelpText } from './form-control-help-text-a2fc3617.js';
+import { F as FormControlErrorText } from './form-control-error-text-3b2553b5.js';
 
 const NumberInput = class {
     constructor(hostRef) {
@@ -17,6 +20,7 @@ const NumberInput = class {
                 inputElement.value = newValue || '';
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -31,8 +35,23 @@ const NumberInput = class {
     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 getElement(this); }
     static get watchers() { return {

package/dist/esm/form-control-radio.entry.js

@@ -1,4 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-57431c24.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-29fcfdf5.js';
+import { H as inputRadioInvalid, I as inputRadioCheckedFocused, J as inputRadioChecked, K as inputRadioFocused, L as inputRadio, l as label } from './parts-186d437f.js';
 
 const RadioInput = class {
     constructor(hostRef) {
@@ -8,33 +9,40 @@ const RadioInput = class {
         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"]
-    }; }
 };
 
 export { RadioInput as form_control_radio };

package/dist/esm/form-control-select_3.entry.js

@@ -0,0 +1,139 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-29fcfdf5.js';
+import { l as label, c as input, b as inputInvalid, D as inputDisabled, a as inputFocused, R as tooltip, S as tooltipInner, T as tooltipIcon } from './parts-186d437f.js';
+import { F as FormControlErrorText } from './form-control-error-text-3b2553b5.js';
+
+const SelectInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.formControlInput = createEvent(this, "formControlInput", 7);
+        this.formControlBlur = createEvent(this, "formControlBlur", 7);
+        this.handleFormControlInput = (event) => {
+            const target = event.target;
+            const name = target.getAttribute('name');
+            this.inputHandler(name, target.value);
+            this.formControlInput.emit(target.value);
+        };
+        this.updateInput = (newValue) => {
+            this.selectElement.value = newValue;
+        };
+        this.isFocused = false;
+        this.name = undefined;
+        this.label = undefined;
+        this.options = undefined;
+        this.inputHandler = undefined;
+        this.defaultValue = undefined;
+        this.helpText = undefined;
+        this.errorText = undefined;
+        this.disabled = undefined;
+    }
+    handleDefaultValueChange(newValue) {
+        this.updateInput(newValue);
+    }
+    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: '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"]
+    }; }
+};
+
+const TextInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.formControlInput = createEvent(this, "formControlInput", 7);
+        this.formControlBlur = createEvent(this, "formControlBlur", 7);
+        this.handleFormControlInput = (event) => {
+            const target = event.target;
+            const name = target.getAttribute('name');
+            this.inputHandler(name, target.value);
+            this.formControlInput.emit({ name, value: target.value });
+        };
+        this.updateInput = (newValue) => {
+            const inputElement = this.el.querySelector('input');
+            if (inputElement) {
+                inputElement.value = newValue || '';
+            }
+        };
+        this.isFocused = false;
+        this.name = undefined;
+        this.label = undefined;
+        this.inputHandler = undefined;
+        this.defaultValue = undefined;
+        this.helpText = undefined;
+        this.errorText = undefined;
+        this.maxLength = undefined;
+        this.keyDownHandler = undefined;
+        this.disabled = undefined;
+    }
+    handleDefaultValueChange(newValue) {
+        this.updateInput(newValue);
+    }
+    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: '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 getElement(this); }
+    static get watchers() { return {
+        "defaultValue": ["handleDefaultValueChange"]
+    }; }
+};
+
+const TooltipComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.anchorIcon = undefined;
+        this.tooltip = undefined;
+        this.helpText = undefined;
+    }
+    show() {
+        this.tooltip.classList.add('show');
+    }
+    hide() {
+        this.tooltip.classList.remove('show');
+    }
+    render() {
+        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: 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)))));
+    }
+};
+
+export { SelectInput as form_control_select, TextInput as form_control_text, TooltipComponent as form_control_tooltip };