@justifi/webcomponents 4.23.0 → 5.0.0-rc-1

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

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+const formControlHelpText = require('./form-control-help-text-b6f7ae6e.js');
+const formControlErrorText = require('./form-control-error-text-a2fd5fc1.js');
+
+const CheckboxInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.formControlInput = index.createEvent(this, "formControlInput", 7);
+        this.formControlBlur = index.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 parts.inputCheckboxInvalid;
+        }
+        if (this.isFocused && this.checked) {
+            return parts.inputCheckboxCheckedFocused;
+        }
+        if (this.isFocused) {
+            return parts.inputCheckboxFocused;
+        }
+        if (this.checked) {
+            return parts.inputCheckboxChecked;
+        }
+        return parts.inputCheckbox;
+    }
+    render() {
+        return (index.h(index.Host, { key: '1aedf7dc7572040d5d1accb6fce84c42c12e2889' }, index.h("div", { key: '454a062fd481093d4b4a5769c3b2a79b61f07c20', class: 'form-group d-flex flex-column' }, index.h("div", { key: '087e692e098975b4a78ecbdfee50f183787b1f9e', class: "form-check" }, index.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 }), index.h("label", { key: '02ce674c833c5b2795d1d041bc1e7d9fe351f514', class: "form-check-label", htmlFor: this.name, part: parts.label }, this.label)), index.h(formControlHelpText.FormControlHelpText, { key: 'aab32007a08af39b4fa4314eba5e7e2b2ff57d31', helpText: this.helpText, name: this.name }), index.h(formControlErrorText.FormControlErrorText, { key: 'cf906dec9c1f2763156fa0becf4389a728a14b39', errorText: this.errorText, name: this.name }))));
+    }
+};
+
+exports.form_control_checkbox = CheckboxInput;

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

@@ -2,7 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb499e95.js');
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+const formControlErrorText = require('./form-control-error-text-a2fd5fc1.js');
 
 const DateInput = class {
     constructor(hostRef) {
@@ -14,6 +16,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;
@@ -41,8 +44,24 @@ const DateInput = class {
     updateInput(value) {
         this.dateInput.value = value;
     }
+    get part() {
+        let part = parts.input;
+        if (this.errorText) {
+            part = parts.inputInvalid;
+        }
+        if (this.disabled) {
+            part = parts.inputDisabled;
+        }
+        if (this.isFocused) {
+            part = parts.inputFocused;
+        }
+        return part;
+    }
     render() {
-        return (index.h(index.Host, { key: '29a793e97ef8cc6bd532ce6f86e31028e6a3a783', exportparts: "label,input,input-invalid" }, index.h("div", { key: '32487660602957a69c9cd82625bd019335e76124', class: "form-group d-flex flex-column" }, index.h("div", { key: '5d45a740e61f328cb0bec179117b97ea9449bc03', class: "d-flex gap-2" }, index.h("label", { key: 'ba01fd2ce1f8f8cfa3a0599b21c01071eb6400a0', part: "label", class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'aeaaf6caa4b4999ec1ecd419f4699aceb72d6cb1', helpText: this.helpText })), index.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 }), index.h("form-control-error-text", { key: '02338706e4d55074014d8e177c27c002181a93e6', errorText: this.errorText, name: this.name }))));
+        return (index.h(index.Host, { key: '238d6dc419c36dafa07e03e0b16dc8e18c620894' }, index.h("div", { key: 'e4dec93ad672ad2e8599851e0fc541b5a4fb21a0', class: "form-group d-flex flex-column" }, index.h("div", { key: '51cf231ffd7f8d7253ee67d85211d6e01b082ae9', class: "d-flex gap-2" }, index.h("label", { key: '23b2f623f5d019b87150061f848aebd32f54c164', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '3bd071cb30d9b52a60a1210bf49b96f2283f80dd', helpText: this.helpText })), index.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 }), index.h(formControlErrorText.FormControlErrorText, { key: 'e06413cc8b9d57f1a89efad44c3b93c82078f5b6', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]

package/dist/cjs/form-control-error-text-a2fd5fc1.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+
+const FormControlErrorText = (props) => {
+    const { errorText, name } = props;
+    if (!errorText) {
+        return null;
+    }
+    return (index.h("small", { class: 'form-text text-danger', id: `form-error-text-${name}`, part: parts.textDanger }, errorText));
+};
+
+exports.FormControlErrorText = FormControlErrorText;

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

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+
+const FileInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.formControlInput = index.createEvent(this, "formControlInput", 7);
+        this.formControlBlur = index.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 (index.h(index.Host, { key: '0ff92310d25c06e1fa0271f4dcb1f2c3f9af6bc9', exportparts: "label,input,input-invalid" }, index.h("div", { key: 'c07d1173914b8f4a474656108219502dcd356798', class: "form-group d-flex flex-column" }, index.h("div", { key: 'cc37bcfa3d65f4dc8b1d6f6b43b52a2282398b29', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '5a042d4b42b5372ca465c3636dfedec7beea91f0', part: "label", class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '2b227a49d2e65d2b4a5d4248a5d1dbc234a8aaf0', helpText: this.helpText })), index.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() }), index.h("form-control-error-text", { key: 'e650ab21dce572c1ed4c20f6d5f64253a39d5420', errorText: this.errorText, name: this.name }))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+const TextInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.formControlInput = index.createEvent(this, "formControlInput", 7);
+        this.formControlBlur = index.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 parts.inputInvalidAndFocused;
+        }
+        if (this.errorText) {
+            return parts.inputInvalid;
+        }
+        if (this.isFocused) {
+            return parts.inputFocused;
+        }
+        if (this.disabled) {
+            return parts.inputDisabled;
+        }
+        return parts.input;
+    }
+    render() {
+        return (index.h(index.Host, { key: '2bf7205da9907d7e72c57bdb8cf7225ba79df6f8' }, index.h("div", { key: 'bba562087283e69f6bf30d644befa71f3e7edd82', class: "form-group d-flex flex-column" }, index.h("label", { key: '6337fd2a00e5feff788aa867fb357bb42ee76f0e', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.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 }), index.h("form-control-help-text", { key: 'f03979b74b6cc7fd80b46345df805cf81f120dc5', helpText: this.helpText, name: this.name }), index.h("form-control-error-text", { key: '5ab2c830a5f1345034e2c2abeca8d3e6e0a1a2ec', errorText: this.errorText, name: this.name }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "defaultValue": ["handleDefaultValueChange"]
+    }; }
+};
+
+exports.form_control_file_v2 = FileInput;
+exports.form_control_textarea = TextInput;

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

@@ -2,7 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb499e95.js');
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+const formControlErrorText = require('./form-control-error-text-a2fd5fc1.js');
 
 const FileInput = class {
     constructor(hostRef) {
@@ -27,6 +29,7 @@ const FileInput = class {
         };
         this.files = undefined;
         this.fileString = undefined;
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -39,8 +42,24 @@ const FileInput = class {
     componentDidLoad() {
         this.fileInput = this.el.querySelector('input');
     }
+    get part() {
+        let part = parts.input;
+        if (this.errorText) {
+            part = parts.inputInvalid;
+        }
+        if (this.disabled) {
+            part = parts.inputDisabled;
+        }
+        if (this.isFocused) {
+            part = parts.inputFocused;
+        }
+        return part;
+    }
     render() {
-        return (index.h(index.Host, { key: 'e67b1c78293ee490ff9f468e98533c2eed03a14a', exportparts: "label,input,input-invalid" }, index.h("div", { key: '373c4ccfdbdd49f00bfe3673bb284930706f7842', class: "form-group d-flex flex-column" }, index.h("div", { key: '93d7524b79cc2a537f4ccc6bea300182ddd31f40', class: "d-flex align-items-start gap-2" }, index.h("label", { key: 'f5619fd58b973b31c8ea47b52715ede5f5891283', part: "label", class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'fd0979253100c2e3efbb30a6fd698b756cf42bbe', helpText: this.helpText })), index.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() }), index.h("form-control-error-text", { key: '0aef8ab535103ef7a0b8f7df3b23508985559072', errorText: this.errorText, name: this.name }))));
+        return (index.h(index.Host, { key: 'fe114fda9b6ad4863b1c770721a0740571b7fc97' }, index.h("div", { key: '75a98a14cb2a1d6b75d6652122a38955a75824d5', class: "form-group d-flex flex-column" }, index.h("div", { key: '888de79af6f8a11cc60b4caf106ae06ad8279493', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '9db2a6b00f02b89cab1784749e2d0043a71ece6c', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '6a2e7377ee731403185d47a45d6e6e5c7287f05f', helpText: this.helpText })), index.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();
+            } }), index.h(formControlErrorText.FormControlErrorText, { key: 'fa1ac29957babba015d0a18eb07d5dba8d550fc8', errorText: this.errorText, name: this.name }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/form-control-help-text-b6f7ae6e.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+
+const FormControlHelpText = (props) => {
+    const { helpText, name } = props;
+    if (!helpText) {
+        return null;
+    }
+    return (index.h("small", { class: 'form-text text-muted', id: `form-help-text-${name}`, part: parts.text }, helpText));
+};
+
+exports.FormControlHelpText = FormControlHelpText;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb499e95.js');
+const index = require('./index-5b9a3b5f.js');
 
 const FormControlHelpText = class {
     constructor(hostRef) {

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

@@ -2,9 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb499e95.js');
+const index = require('./index-5b9a3b5f.js');
 const index$1 = require('./index-750475a3.js');
 const formInputMasks = require('./form-input-masks-0879c139.js');
+const parts = require('./parts-811ddb9c.js');
+const formControlHelpText = require('./form-control-help-text-b6f7ae6e.js');
+const formControlErrorText = require('./form-control-error-text-a2fd5fc1.js');
 
 const MonetaryInput = class {
     constructor(hostRef) {
@@ -34,6 +37,7 @@ const MonetaryInput = class {
                 this.imask.value = String(newValue);
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -54,8 +58,24 @@ const MonetaryInput = class {
         var _a;
         (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
     }
+    get part() {
+        let part = parts.inputGroup;
+        if (this.errorText) {
+            part = parts.inputInvalid;
+        }
+        if (this.disabled) {
+            part = parts.inputDisabled;
+        }
+        if (this.isFocused) {
+            part = parts.inputFocused;
+        }
+        return part;
+    }
     render() {
-        return (index.h(index.Host, { key: '27e8570c7ddb6747f8b78fdf0222747022b2e4b2', exportparts: "label,input,input-group-input,input-group-text,input-invalid" }, index.h("div", { key: '1ee22eda4b9f5b5ddf42f1d15d4ec3ee084e967e', class: "form-group d-flex flex-column" }, index.h("label", { key: '73930260feaeca6edab8b9947da211358474b680', part: "label", class: "form-label", htmlFor: this.name }, this.label), index.h("div", { key: '7da2e46e0538563151f4603bfbeee22a447e7310', class: "input-group" }, index.h("span", { key: '3209947bf3c65c2ecfd3b56a0da27d663b444742', class: "input-group-text", part: "input-group-text" }, "$"), index.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 })), index.h("form-control-help-text", { key: 'af50f5b6f8f9ce1ac80be790f64dfbcd5067f5aa', helpText: this.helpText, name: this.name }), index.h("form-control-error-text", { key: '2d134789d103c82c545c97428e6a4e4da1c0e099', errorText: this.errorText, name: this.name }))));
+        return (index.h(index.Host, { key: '88ef65f78570c7351c159e89fab22c453bdaa1ec' }, index.h("div", { key: '1e7cfe678ff76dcd4833626f6cdb8f278ff65236', class: "form-group d-flex flex-column" }, index.h("label", { key: 'd3ac3a07988ebd57dd5c58ad2ffdba7399daf3e5', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("div", { key: '382697de0c28754de0355fb819365869007c8c20', class: "input-group" }, index.h("span", { key: 'cf6f813dfcf45dd2c4c1a9b08360a0a70908d52e', class: "input-group-text", part: parts.text }, "$"), index.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 })), index.h(formControlHelpText.FormControlHelpText, { key: '5fc015ef8bc059be448a3d8667125e0502d1f519', helpText: this.helpText, name: this.name }), index.h(formControlErrorText.FormControlErrorText, { key: 'e79f133b65fc016c6d8d940a631f6dd6694038d4', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]

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

@@ -2,8 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb499e95.js');
+const index = require('./index-5b9a3b5f.js');
 const index$1 = require('./index-750475a3.js');
+const parts = require('./parts-811ddb9c.js');
+const formControlErrorText = require('./form-control-error-text-a2fd5fc1.js');
 const stateOptions = require('./state-options-4fbcb48a.js');
 const utils = require('./utils-bc03ca40.js');
 
@@ -38,6 +40,7 @@ const NumberInputMasked = class {
                 this.imask.value = String(newValue);
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -61,8 +64,23 @@ const NumberInputMasked = class {
             this.updateInput(this.defaultValue);
         }
     }
+    get part() {
+        if (this.errorText) {
+            return parts.inputInvalid;
+        }
+        if (this.disabled) {
+            return parts.inputDisabled;
+        }
+        if (this.isFocused) {
+            return parts.inputFocused;
+        }
+        return parts.input;
+    }
     render() {
-        return (index.h(index.Host, { key: '2347d776d2ca3dba7c4c331bbeb3d4e359268704', exportparts: "label,input,input-invalid" }, index.h("div", { key: '16d437f201888fdef6148630e5afc75ee7c36bae', class: "form-group d-flex flex-column" }, index.h("div", { key: 'd776ff7c160cbba0436ec36e20cb0c81edbc380f', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '8c6664087dc2593870380341cf51fc5511a95e35', part: "label", class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '1495842c0cd7117c50c62888cf90e001a4e15756', helpText: this.helpText })), index.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 }), index.h("form-control-error-text", { key: '7e2485e91f263e8a970b91628adf945eb3280c2d', errorText: this.errorText, name: this.name }))));
+        return (index.h(index.Host, { key: 'e4b85378d57333a4408c941f49fde3a074128173' }, index.h("div", { key: 'c93d07e39bfbf1bfbc4ae424861a3b0a582a8d32', class: "form-group d-flex flex-column" }, index.h("div", { key: '0ea90b20800bf4c24e61e28e25575a77db7d42ef', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '96ba0eb2bd01f4d9a5ab249ae718e4b699cc1497', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'ea12ab4a5b24d7baf2480f0a3a9e9ea2b792e144', helpText: this.helpText })), index.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 }), index.h(formControlErrorText.FormControlErrorText, { key: '46fe5efdc607c8ffacbc9e7a061e6af9eb06d0a9', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
@@ -86,7 +104,7 @@ const IdentityAddressForm = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (index.h(index.Host, { key: '5d9d020cdb5f9e0c422098f82fbd9b1c237515f2', exportparts: "label,input,input-invalid" }, index.h("div", { key: '280b3308698d51c8f3e60124f0433e12ff585abe', class: "row gy-3" }, index.h("div", { key: 'c31ef56c52561e2acaed2dac868117f6171a09cb', class: "col-12 col-md-8" }, index.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." })), index.h("div", { key: 'cd62d3f1ea062f67ab71ced663954b172fa3c4ed', class: "col-12 col-md-4" }, index.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 })), index.h("div", { key: '5e2cf9ef49d42c736d8004e5063377a962857b35', class: "col-12" }, index.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 })), index.h("div", { key: 'ab8c048e274784406a8a872650e68791d3aa5844', class: "col-12 col-md-6" }, index.h("form-control-select", { key: '76db258faf7a4b30f7f1b6c6e975e5ea7e7c61d6', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: stateOptions.StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), index.h("div", { key: '8bd2661ad3e579a52f91ce58c6be680d9955584b', class: "col-12 col-md-6" }, index.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: utils.numberOnlyHandler, inputHandler: this.inputHandler })), index.h("div", { key: '93be2db05699edaa12981e0d96a9626ecc169030', class: "col-12" }, index.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 (index.h(index.Host, { key: 'f656800204764998e856bc6e424d5b925556f74c' }, index.h("div", { key: '414d5507b883730806e43e7ee6b019eb1790b881', class: "row gy-3" }, index.h("div", { key: '20581fd2b6e19efeb59fb34d196da8d831961da7', class: "col-12 col-md-8" }, index.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." })), index.h("div", { key: 'e1725384142b69f39412cbdb01d9d036b1e13dc3', class: "col-12 col-md-4" }, index.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 })), index.h("div", { key: 'e5afde1beebbf0b23558b028ee06baebf15704ce', class: "col-12" }, index.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 })), index.h("div", { key: '75fa447f21b17cc42853fd0c6cf01e94c04a6fa5', class: "col-12 col-md-6" }, index.h("form-control-select", { key: '5c0acedaea09564d0936c8d4facd45162658a204', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: stateOptions.StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), index.h("div", { key: '6f2a269d614a16786cdc2675bf004afe2500a4b2', class: "col-12 col-md-6" }, index.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: utils.numberOnlyHandler, inputHandler: this.inputHandler })), index.h("div", { key: 'de7ad3baaaed9d197cbf8c68e77c92e45ebeb384', class: "col-12" }, index.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/cjs/form-control-number.cjs.entry.js

@@ -2,7 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb499e95.js');
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+const formControlHelpText = require('./form-control-help-text-b6f7ae6e.js');
+const formControlErrorText = require('./form-control-error-text-a2fd5fc1.js');
 
 const NumberInput = class {
     constructor(hostRef) {
@@ -21,6 +24,7 @@ const NumberInput = class {
                 inputElement.value = newValue || '';
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -35,8 +39,23 @@ const NumberInput = class {
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
+    get part() {
+        if (this.isFocused && this.errorText) {
+            return parts.inputInvalidAndFocused;
+        }
+        if (this.isFocused) {
+            return parts.inputFocused;
+        }
+        if (this.errorText) {
+            return parts.inputInvalid;
+        }
+        return parts.input;
+    }
     render() {
-        return (index.h(index.Host, { key: '3b2f42c3cd26fb238f2b728522608c9d37d087a9', exportparts: 'label,input,input-invalid' }, index.h("div", { key: '01a3382ef37353f3cad6d6ffb66ce2ff5f13b8de', class: 'form-group d-flex flex-column' }, index.h("label", { key: '981f1089d6ec68cda5c91ced9025b5ff021aad50', part: "label", class: "form-label", htmlFor: this.name }, this.label), index.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 }), index.h("form-control-help-text", { key: '8e2b99df6f3a2d5c3bca0903d0f74ff404a73cf8', helpText: this.helpText, name: this.name }), index.h("form-control-error-text", { key: '03f12d2baa3aac08f460332a4867ab7ef8e82143', errorText: this.errorText, name: this.name }))));
+        return (index.h(index.Host, { key: '49da5c23574f5edac307f75d83285addee02d49f' }, index.h("div", { key: 'f12d88f53e7a1e97d3219b3cc4a2020295b7cb14', class: 'form-group d-flex flex-column' }, index.h("label", { key: '0c926aae68a9e42df7d8e7810a9de75d4db5f5e4', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.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 }), index.h(formControlHelpText.FormControlHelpText, { key: '0cf682568468359ab5b2451b9746e02c7352ba08', helpText: this.helpText, name: this.name }), index.h(formControlErrorText.FormControlErrorText, { key: '8eedbb1669d0d776c61444fbb435dbdc0a297675', errorText: this.errorText, name: this.name }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb499e95.js');
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
 
 const RadioInput = class {
     constructor(hostRef) {
@@ -12,33 +13,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 parts.inputRadioInvalid;
+        }
+        if (this.isFocused && this.checked) {
+            return parts.inputRadioCheckedFocused;
+        }
+        if (this.checked) {
+            return parts.inputRadioChecked;
+        }
+        if (this.isFocused) {
+            return parts.inputRadioFocused;
+        }
+        return parts.inputRadio;
     }
     render() {
-        return (index.h(index.Host, { key: 'd06ffa17fb7ef51b08b8c0d52c6d83ec040a15a7', exportparts: "label,input,input-invalid" }, index.h("div", { key: '9dc89af6c7118dae09d29daa6739847ee11ba7ff', class: 'form-group d-flex flex-column' }, index.h("div", { key: 'fa028b5f9901ca403fe120bc16e9fb48e2a5c92d', class: "form-check" }, index.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 }), index.h("label", { key: 'ef2c6c45bf587d87bad6883fe79622a648d80d80', class: "form-check-label", htmlFor: this.name }, this.label)), index.h("form-control-help-text", { key: '28b32ee27148438b72bb909cc9cc309de936b158', helpText: this.helpText, name: this.name }), index.h("form-control-error-text", { key: '8485f4d22f4bc0bb2238de5ab5bf7071203bac2b', errorText: this.errorText, name: this.name }))));
+        return (index.h(index.Host, { key: '79dc4556ca7a8e4bcb1485b9112579d45b0aa7f8', class: 'form-group d-flex flex-column' }, index.h("div", { key: '2e3a4b6f766e66949c29fb2221c5fb993ec21bc1', class: "form-check" }, index.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 }), index.h("label", { key: 'ca88d70ec21dac187445a32acb171263fe9f8b28', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: parts.label }, this.label)), index.h("form-control-help-text", { key: '45ad5106aa41da3e2883456031d33b81be632eff', helpText: this.helpText, name: this.name }), index.h("form-control-error-text", { key: '5cab198a27710fb8fee8902577dc288a8bd83e9c', errorText: this.errorText, name: this.name })));
     }
-    static get watchers() { return {
-        "defaultChecked": ["handleDefaultValueChange"]
-    }; }
 };
 
 exports.form_control_radio = RadioInput;