@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/collection/ui-components/form/form-control-file-v2.js

@@ -0,0 +1,177 @@
+import { Host, h, } from "@stencil/core";
+export class FileInput {
+    constructor() {
+        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 }))));
+    }
+    static get is() { return "form-control-file-v2"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "name": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "help-text",
+                "reflect": false
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-text",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "multiple",
+                "reflect": false
+            },
+            "inputHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(name: string, value: string) => void",
+                    "resolved": "(name: string, value: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "files": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "formControlInput",
+                "name": "formControlInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "formControlBlur",
+                "name": "formControlBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/ui-components/form/form-control-file.js

@@ -1,4 +1,6 @@
 import { Host, h, } from "@stencil/core";
+import { FormControlErrorText } from "../../ui-components";
+import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
 export class FileInput {
     constructor() {
         this.handleFormControlInput = (event) => {
@@ -18,6 +20,7 @@ export class FileInput {
         };
         this.files = undefined;
         this.fileString = undefined;
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -30,8 +33,24 @@ export class FileInput {
     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 }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {
@@ -181,7 +200,8 @@ export class FileInput {
     static get states() {
         return {
             "files": {},
-            "fileString": {}
+            "fileString": {},
+            "isFocused": {}
         };
     }
     static get events() {

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

@@ -1,6 +1,8 @@
 import { Host, h, } from "@stencil/core";
 import IMask from "imask";
 import { CURRENCY_MASK } from "../../utils/form-input-masks";
+import { FormControlErrorText, FormControlHelpText } from "../../ui-components";
+import { inputDisabled, inputFocused, inputGroup, inputInvalid, label, text } from "../../styles/parts";
 export class MonetaryInput {
     constructor() {
         this.imask = null;
@@ -26,6 +28,7 @@ export class MonetaryInput {
                 this.imask.value = String(newValue);
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -46,8 +49,24 @@ export class MonetaryInput {
         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 is() { return "form-control-monetary"; }
     static get properties() {
@@ -189,6 +208,11 @@ export class MonetaryInput {
             }
         };
     }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "formControlInput",

package/dist/collection/ui-components/form/form-control-number-masked.js

@@ -1,5 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import IMask from "imask";
+import { FormControlErrorText } from "../../ui-components";
+import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
 export class NumberInputMasked {
     constructor() {
         this.imask = null;
@@ -28,6 +30,7 @@ export class NumberInputMasked {
                 this.imask.value = String(newValue);
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -51,8 +54,23 @@ export class NumberInputMasked {
             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 is() { return "form-control-number-masked"; }
     static get properties() {
@@ -193,6 +211,11 @@ export class NumberInputMasked {
             }
         };
     }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "formControlInput",

package/dist/collection/ui-components/form/form-control-number.js

@@ -1,4 +1,6 @@
 import { Host, h, } from "@stencil/core";
+import { FormControlErrorText, FormControlHelpText } from "../../ui-components";
+import { input, inputFocused, inputInvalid, inputInvalidAndFocused, label } from "../../styles/parts";
 export class NumberInput {
     constructor() {
         this.handleFormControlInput = (event) => {
@@ -13,6 +15,7 @@ export class NumberInput {
                 inputElement.value = newValue || '';
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -27,8 +30,23 @@ export class NumberInput {
     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 }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {
@@ -152,6 +170,11 @@ export class NumberInput {
             }
         };
     }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "formControlInput",

package/dist/collection/ui-components/form/form-control-radio.js

@@ -1,32 +1,43 @@
 import { Host, h, } from "@stencil/core";
+import { inputRadio, inputRadioChecked, inputRadioCheckedFocused, inputRadioFocused, inputRadioInvalid, label } from "../../styles/parts";
 export class RadioInput {
     constructor() {
         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 is() { return "form-control-radio"; }
     static get properties() {
@@ -66,11 +77,11 @@ export class RadioInput {
                 "reflect": false
             },
             "value": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -99,24 +110,22 @@ export class RadioInput {
                 "attribute": "help-text",
                 "reflect": false
             },
-            "errorText": {
-                "type": "string",
+            "inputHandler": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "(name: string, value: string) => void",
+                    "resolved": "(name: string, value: string) => void",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
-                },
-                "attribute": "error-text",
-                "reflect": false
+                }
             },
-            "defaultChecked": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -125,20 +134,20 @@ export class RadioInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "default-checked",
+                "attribute": "disabled",
                 "reflect": false
             },
-            "inputHandler": {
-                "type": "unknown",
+            "errorText": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "(name: string, value: boolean) => void",
-                    "resolved": "(name: string, value: boolean) => void",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -146,9 +155,11 @@ export class RadioInput {
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "attribute": "error-text",
+                "reflect": false
             },
-            "disabled": {
+            "checked": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -162,11 +173,16 @@ export class RadioInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "attribute": "checked",
                 "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "formControlInput",
@@ -200,10 +216,4 @@ export class RadioInput {
                 }
             }];
     }
-    static get watchers() {
-        return [{
-                "propName": "defaultChecked",
-                "methodName": "handleDefaultValueChange"
-            }];
-    }
 }

package/dist/collection/ui-components/form/form-control-select.js

@@ -1,4 +1,6 @@
 import { Host, h, } from "@stencil/core";
+import { FormControlErrorText } from "../../ui-components";
+import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
 export class SelectInput {
     constructor() {
         this.handleFormControlInput = (event) => {
@@ -10,6 +12,7 @@ export class SelectInput {
         this.updateInput = (newValue) => {
             this.selectElement.value = newValue;
         };
+        this.isFocused = false;
         this.name = undefined;
         this.label = undefined;
         this.options = undefined;
@@ -25,9 +28,25 @@ export class SelectInput {
     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 is() { return "form-control-select"; }
     static get properties() {
@@ -166,6 +185,11 @@ export class SelectInput {
             }
         };
     }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "formControlInput",