@justifi/webcomponents 6.7.2 → 6.8.0

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

@@ -4,6 +4,9 @@ import { inputCheckbox, inputCheckboxChecked, inputCheckboxCheckedFocused, input
 export class CheckboxInput {
     constructor() {
         this.isFocused = false;
+        this.errorText = '';
+        this.inputHandler = () => { };
+        this.disabled = false;
         this.handleFormControlInput = (event) => {
             event.preventDefault();
             const target = event.target;
@@ -31,10 +34,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: 'b21aecbedc9eabe175a7c49de7289e7f514a2dca' }, h("div", { key: '7ce9735adb9b351864381ae4966e5344be8cb2de', class: 'form-group d-flex flex-column' }, h("div", { key: 'b99004c99627c2ffdc31c098d3ae956f391fbae3', class: "form-check" }, h("input", { key: 'f0e2bb106393a2eff4f172eac1c1e97aa8a184e2', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '56962751d91674cfeb2716ba90bb9e9751ea4f66' }, h("div", { key: 'e3bb3cac2bf8ae03fc72558b3c00ef32ee56f61d', class: 'form-group d-flex flex-column' }, h("div", { key: '7be82e8be1da073c8f0e5ca7d609ce1d29c82c5e', class: "form-check" }, h("input", { key: 'f6b5f0ed365937feeb6ee0d885c55a27f21eaec0', 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: '18911a1180bd64375104fdbb3ba9a89f822e33cb', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '4d0d0df3bf3cbaf1314e37cbb24b5ba61446d1f7', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '5270fa11eecdc61c155a9eeacb83781d7b2445d8', errorText: this.errorText, name: this.name }))));
+            }, 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: 'dda8703d86506cdd5a3b3549f3c54296830ff20f', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'a4260e0cc463ad937128d46a3eb251191319473d', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'de41ad6865a3d0414fa850ee5439cc11abf31f4f', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {
@@ -47,7 +50,7 @@ export class CheckboxInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -66,7 +69,7 @@ export class CheckboxInput {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -113,7 +116,8 @@ export class CheckboxInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "error-text"
+                "attribute": "error-text",
+                "defaultValue": "''"
             },
             "checked": {
                 "type": "boolean",
@@ -123,7 +127,7 @@ export class CheckboxInput {
                     "resolved": "boolean",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -143,13 +147,14 @@ export class CheckboxInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "() => { }"
             },
             "disabled": {
                 "type": "boolean",
@@ -160,7 +165,7 @@ export class CheckboxInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -168,7 +173,8 @@ export class CheckboxInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -42,10 +42,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '488832557ae8112639435cdc76233db84267066d' }, h("div", { key: 'daeae634334b1b15421ba7b3794950c96cb99d9d', class: "form-group d-flex flex-column" }, h("div", { key: 'f5dfa500d0bcea5dc434914e275466b60ef3b764', class: "d-flex gap-2" }, h("label", { key: '58985478033b8909f7c90dc95e02907a9403901f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e7937af44fb79a9c4c3cde98ddaa57fc97d9dfa9', helpText: this.helpText })), h("input", { key: '636a3aee2edd091ac988c4294fa5966c9305003c', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'af231bc296d7bd79a01ed4c1f78b6bba1b1027c4' }, h("div", { key: '47b148201af9e18546284492a668a6720e10a015', class: "form-group d-flex flex-column" }, h("div", { key: 'e0b7c6f48baeb022018039391479007efe9b1dc9', class: "d-flex gap-2" }, h("label", { key: '26133591445cecd41c72cf69e694b7116d8a0ea5', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '822ad6405b38887385c374f9646c9512b59d7e5a', helpText: this.helpText })), h("input", { key: 'ea928f636ea90f1bebfca9df9049bcde26ffdbfe', 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: 'd796894d861cbdbbe6415d2236153edabceb3a63', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '66c1cac66140950abb0cb6bf550d86dfee7e2b6d', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {
@@ -58,7 +58,7 @@ export class DateInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -77,7 +77,7 @@ export class DateInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -96,7 +96,7 @@ export class DateInput {
                     "resolved": "(name: string, value: string) => void",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

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

@@ -1,8 +1,13 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "./form-helpers/form-control-error-text";
 export class FileInput {
+    constructor() {
+        this.errorText = '';
+        this.inputHandler = () => { };
+        this.disabled = false;
+    }
     render() {
-        return (h(Host, { key: '17cd92cd095bef638fa7f9df47267019b13ce421', exportparts: "label,input,input-invalid" }, h("div", { key: '036155730cb27b8c751c1d7c60b9113db1d20525', class: "form-group d-flex flex-column" }, h("div", { key: '09654b1abea93cf763be9d04edc15b544748ab23', class: "d-flex align-items-start gap-2" }, h("label", { key: 'bb8abe4e719e40ca83da8dc15e581fb52f1a5fd5', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '599e5a958b5905ba4de825ea7923c2cf376f6d37', helpText: this.helpText })), h("input", { key: '0a6bd85a915f5017c5645037e03e56512372a478', 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(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: 'af1ebc0ca32c321bf4f68128f0be341368209405', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'fa58417927e8c0a4be71047c133d00ff544cbeb5', exportparts: "label,input,input-invalid" }, h("div", { key: '99167d13386b858ae940cf03015139dd1d676b4e', class: "form-group d-flex flex-column" }, h("div", { key: '33f821ca2473a4e9233e91aee0fb47aced0bdfd4', class: "d-flex align-items-start gap-2" }, h("label", { key: 'd883b7a1a000d638ad0f1d594d314c62509259a9', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '020594f1fec84e5789fbc7f16b41777613d2f5d4', helpText: this.helpText })), h("input", { key: '841064420ca58f24d65d33e4a3a92732bcc7028c', 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(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: '6d703a1e7418695b6d62bb643dd3a8088bdbed30', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file-v2"; }
     static get properties() {
@@ -15,7 +20,7 @@ export class FileInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -34,7 +39,7 @@ export class FileInput {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -81,7 +86,8 @@ export class FileInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "error-text"
+                "attribute": "error-text",
+                "defaultValue": "''"
             },
             "multiple": {
                 "type": "boolean",
@@ -111,13 +117,14 @@ export class FileInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "() => { }"
             },
             "disabled": {
                 "type": "boolean",
@@ -128,7 +135,7 @@ export class FileInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -136,7 +143,8 @@ export class FileInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -4,6 +4,9 @@ import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../s
 export class FileInput {
     constructor() {
         this.isFocused = false;
+        this.errorText = '';
+        this.inputHandler = () => { };
+        this.disabled = false;
         this.handleFormControlInput = (event) => {
             const target = event.target;
             const name = target.getAttribute('name');
@@ -37,10 +40,10 @@ export class FileInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '95a6b4192008faa7a9e0e012dda864d3a62c15dd' }, h("div", { key: '34d5ffd4bc5ab846c1c60487bd6ffe14d5de620e', class: "form-group d-flex flex-column" }, h("div", { key: 'd6c2b6d31464540a698b711e01fc7d3da6fa5210', class: "d-flex align-items-start gap-2" }, h("label", { key: '64105650845148fe40ae8730de602eb90f4aa5b0', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '5683cd62fa425e340e68267091f188dbacad5d33', helpText: this.helpText })), h("input", { key: 'dec6fca61cc0a50f3604e25990326faec0498fe2', 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: () => {
+        return (h(Host, { key: '430da302c06fb83a93c10bbf8d9b62ff89fc9e5e' }, h("div", { key: '2235fd7e9ef83839a5c9644828580cb1727cb3cc', class: "form-group d-flex flex-column" }, h("div", { key: 'e899430b50cd692e76b4992d01df4ab5ef754ff4', class: "d-flex align-items-start gap-2" }, h("label", { key: '41a257c0c9064ababe2167522690678627d574ec', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '734a6dbf61d1f04920b01e8d9024c29bc8cf0967', helpText: this.helpText })), h("input", { key: '6bbe60077bbff7c427cb84883f91489ae58abbd1', 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: '31b57ac83f65fddac21f749e5655a43b9d01c73e', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '4b0ed448a2f7fd8e76d21abdaa47662f847bca7f', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {
@@ -53,7 +56,7 @@ export class FileInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -72,7 +75,7 @@ export class FileInput {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -119,7 +122,8 @@ export class FileInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "error-text"
+                "attribute": "error-text",
+                "defaultValue": "''"
             },
             "multiple": {
                 "type": "boolean",
@@ -154,7 +158,7 @@ export class FileInput {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -174,13 +178,14 @@ export class FileInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "() => { }"
             },
             "disabled": {
                 "type": "boolean",
@@ -191,7 +196,7 @@ export class FileInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -199,7 +204,8 @@ export class FileInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -42,10 +42,10 @@ export class MonetaryInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '26420a8cfbf1b2e121a62971060603aa83cf3e70' }, h("div", { key: '59c4042f4b6c7c0116af7b2cf3194924be87d8b5', class: "form-group d-flex flex-column" }, h("label", { key: '37454ea79c867986b12aa1b0acb63041e10c47d9', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '005a9bafecbcf6de1629f56562a6fb2588749ef5', name: this.name, helpText: this.helpText }), h("div", { key: 'd1a12b4c4e444b788e8a96a23c1ca12c3b02f90e', class: "input-group" }, h("span", { key: 'e4100991c98e073d559a4378340288829bca8e63', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: 'b14b182e5df0eb3cf7a5fd4abd7eda4969e9413c', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'e83c01fe72f78306203ff6662c47f2db56f9e5eb' }, h("div", { key: '2763732191437c92edd551b75da1eeb2fc03d079', class: "form-group d-flex flex-column" }, h("label", { key: '923fbb823f00a52308d3e7450a136dcbb1c1b214', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '3f3dc06c3cea6478ebe66d0ae0c36532a2c9de26', name: this.name, helpText: this.helpText }), h("div", { key: 'ed01d39c77eccced675f08626cfaf19d0bbd6e65', class: "input-group" }, h("span", { key: 'b29263f7ff45ba093d3c3f1bf256e19002d64bcb', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '4a842881767f8bacba8330b2b20e33c51ca6eeb3', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '4fd052b178da46d734bdbd88f063dd1ed021d47e', errorText: this.errorText, name: this.name }))));
+            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '828447aed9364496041d38539bf9446a8055d709', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {
@@ -58,7 +58,7 @@ export class MonetaryInput {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -77,7 +77,7 @@ export class MonetaryInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -96,7 +96,7 @@ export class MonetaryInput {
                     "resolved": "(name: string, value: string) => void",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

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

@@ -6,6 +6,8 @@ export class NumberInputMasked {
     constructor() {
         this.imask = null;
         this.isFocused = false;
+        this.inputHandler = () => { };
+        this.disabled = false;
         this.initializeIMask = () => {
             if (!this.textInput)
                 return;
@@ -61,10 +63,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '19208aa7aae72ea0492dcb2d46651bb80b6ab133' }, h("div", { key: '93aea8b9cede9bec9c4f5959dd3cb22065bd684f', class: "form-group d-flex flex-column" }, h("div", { key: '8782f39a557f2f1fb14accea192d5677256c5752', class: "d-flex align-items-start gap-2" }, h("label", { key: '0abdc2776f59ddb560e404b7ce05200cec8d1082', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '649166a60116190c3e06039825e1a87d1b01b100', helpText: this.helpText })), h("input", { key: '862ea2874c2f1f33c12b5e8afcb49e903731e3d9', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: 'b9cd5f622f3473b22f48ee939884199f4102aa02' }, h("div", { key: 'c7ac55bf53f9b069a0f1997faee9df04b5efc48f', class: "form-group d-flex flex-column" }, h("div", { key: '344f29000db4d633073536530f3fd312a7c65000', class: "d-flex align-items-start gap-2" }, h("label", { key: 'c58e246347c2bb8da3dafa10aeca23290ebdcbd2', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '7a32bf62aea68cca9a86f07e28ca58a0f386fdf4', helpText: this.helpText })), h("input", { key: '033f6ab25c31f4386733195a281de935b39aa7e5', 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: '01ecae80e5d67d45a2c954ededea51d1db41aafc', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '9238f8d110a09bed1f5172991ed951399ea520b3', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {
@@ -77,7 +79,7 @@ export class NumberInputMasked {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -96,7 +98,7 @@ export class NumberInputMasked {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -153,7 +155,7 @@ export class NumberInputMasked {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -173,13 +175,14 @@ export class NumberInputMasked {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "() => { }"
             },
             "mask": {
                 "type": "string",
@@ -189,7 +192,7 @@ export class NumberInputMasked {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -209,7 +212,7 @@ export class NumberInputMasked {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -217,7 +220,8 @@ export class NumberInputMasked {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -4,6 +4,7 @@ import { input, inputFocused, inputInvalid, inputInvalidAndFocused, label } from
 export class NumberInput {
     constructor() {
         this.isFocused = false;
+        this.disabled = false;
         this.handleFormControlInput = (event) => {
             const target = event.target;
             const name = target.getAttribute('name');
@@ -36,10 +37,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '7f35cfd267eb699289ef853e2304b57001ee5d72' }, h("div", { key: 'b1904621266ded431837e3eff9c0f7c34118f6da', class: 'form-group d-flex flex-column' }, h("label", { key: '6b2f9ca05973be1dc766368c27c54a33de6456b0', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'cab982efea26e96dfc027401fd2fc6de8dab454f', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '6f21df9000033747331d4f8633ad8ee9cf02ec98' }, h("div", { key: 'd55ae7c8e2cb411909f82373933e7607bd786ae2', class: 'form-group d-flex flex-column' }, h("label", { key: '1d984246cbda85fdf6a7e2d5b534c39361a0b479', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '80aa0ddaf5be104c3a60e7700ac23e2c53c42d76', 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: '1bd6b915860a46baba35b74d9f2c260aa5b4e757', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'ef91eda0e16195dbc6a59998cff4a43c16f8d8fc', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '1163face94f9b1bbe59c53f8ddad4d7ef0c58945', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '1db87aa5f5a07c3e19f9d674835cb48f222ad18a', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {
@@ -52,7 +53,7 @@ export class NumberInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -71,7 +72,7 @@ export class NumberInput {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -128,7 +129,7 @@ export class NumberInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -147,7 +148,7 @@ export class NumberInput {
                     "resolved": "(name: string, value: string) => void",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -165,7 +166,7 @@ export class NumberInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -173,7 +174,8 @@ export class NumberInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -3,6 +3,9 @@ import { inputRadio, inputRadioChecked, inputRadioCheckedFocused, inputRadioFocu
 export class RadioInput {
     constructor() {
         this.isFocused = false;
+        this.inputHandler = () => { };
+        this.disabled = false;
+        this.errorText = '';
         this.handleFormControlInput = (event) => {
             const target = event.target;
             const name = target.getAttribute('name');
@@ -26,10 +29,10 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: '27b69f35b1d6688d8af70bf7c948c9d6c6f89542', class: 'form-group d-flex flex-column' }, h("div", { key: 'c9a9b47923347a9b627fb774ae6dcc19487a6095', class: "form-check" }, h("input", { key: '90191fd15fe832e57254b7f62e5e86f21aeb4103', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '8cb1ec6909bc2cf40e12a9571c2eafccf26b11ae', class: 'form-group d-flex flex-column' }, h("div", { key: 'c87254a83f9e5c025d956b1267430481eddc8611', class: "form-check" }, h("input", { key: 'c688c8ee6fb43bc1766196c54f097b6f020682dc', 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: 'd28e591fab27605e20132fd7d4d7a03fd50635d3', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '633a53fe3a4aa0f736fb8c6c195ab17ff874fe13', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'f5ea298d6d8c2acb44d314c0a8182bb953381130', errorText: this.errorText, name: this.name })));
+            }, 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: '4a73f2c14311e08485bd8da49fb46dea05e50e26', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: 'e1e539af6cf24db6dd6411eea872a174a5a4e80c', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'fa206e7d1300cc9ef5386efb26e5a2d4eedab149', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {
@@ -42,7 +45,7 @@ export class RadioInput {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -61,7 +64,7 @@ export class RadioInput {
                     "resolved": "any",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -80,7 +83,7 @@ export class RadioInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -119,13 +122,14 @@ export class RadioInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "() => { }"
             },
             "disabled": {
                 "type": "boolean",
@@ -136,7 +140,7 @@ export class RadioInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -144,7 +148,8 @@ export class RadioInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
             "errorText": {
                 "type": "string",
@@ -155,7 +160,7 @@ export class RadioInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -163,7 +168,8 @@ export class RadioInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "error-text"
+                "attribute": "error-text",
+                "defaultValue": "''"
             },
             "checked": {
                 "type": "boolean",
@@ -173,7 +179,7 @@ export class RadioInput {
                     "resolved": "boolean",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],