@justifi/webcomponents 4.21.0 → 4.22.1

package/dist/collection/components/tokenize-payment-method/tokenize-payment-method.js

@@ -0,0 +1,276 @@
+import { h } from "@stencil/core";
+import { Button, StyledHost } from "../../ui-components";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import JustifiAnalytics from "../../api/Analytics";
+export class TokenizePaymentMethod {
+    constructor() {
+        this.authToken = undefined;
+        this.accountId = undefined;
+        this.paymentMethodGroupId = undefined;
+        this.isLoading = true;
+        this.submitButtonText = undefined;
+        this.disableCreditCard = undefined;
+        this.disableBankAccount = undefined;
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+        this.isLoading = false;
+    }
+    async tokenizePaymentMethod(event) {
+        event && event.preventDefault();
+        const tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
+        if (tokenizeResponse.error) {
+            this.errorEvent.emit({
+                errorCode: tokenizeResponse.error.code,
+                message: tokenizeResponse.error.message,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+        else if (tokenizeResponse.token) {
+            this.submitted.emit({ token: tokenizeResponse.token });
+        }
+    }
+    async fillBillingForm(fields) {
+        this.paymentMethodOptionsRef.fillBillingForm(fields);
+    }
+    render() {
+        return (h(StyledHost, { key: 'd6b961d57ad40a36a55db9f4a338f2e4659737b8' }, h("form", { key: '478202bc0e742f132df696e317a5d87b583a65c3' }, h("fieldset", { key: '565295af010636d9746c5a3466ce6b3bf4fe5ba2' }, h("div", { key: '95736fa3b125f6c389e80505842749d40eb50318', class: "row gy-3" }, h("div", { key: '086f7078ab5301c59ea3a1003162ebf82907b594', class: "col-12" }, h("justifi-payment-method-options", { key: '13d99aee101cd0dc9cdf52abf3e510a8ee490e82', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: '348afe48dbcb996b268bf9e6416f25540f9b2930', class: "col-12" }, h(Button, { key: '00baa2bd2b99a9a8329b9abaace0afac36ae094a', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button" }, this.submitButtonText || 'Submit')))))));
+    }
+    static get is() { return "justifi-tokenize-payment-method"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tokenize-payment-method.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tokenize-payment-method.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "account-id",
+                "reflect": false
+            },
+            "paymentMethodGroupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-method-group-id",
+                "reflect": false
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-loading",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "submitButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "submit-button-text",
+                "reflect": false
+            },
+            "disableCreditCard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-credit-card",
+                "reflect": false
+            },
+            "disableBankAccount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-bank-account",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ token: string }",
+                    "resolved": "{ token: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "tokenizePaymentMethod": {
+                "complexType": {
+                    "signature": "(event?: CustomEvent) => Promise<void>",
+                    "parameters": [{
+                            "name": "event",
+                            "type": "CustomEvent<any>",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CustomEvent": {
+                            "location": "global",
+                            "id": "global::CustomEvent"
+                        },
+                        "ComponentErrorCodes": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentErrorCodes"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "fillBillingForm": {
+                "complexType": {
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -81,7 +81,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: 'e426fcd8c6ed3026bd19b5f88d9fc8caea6dd2ad' }, h("style", { key: '2c6a3c8606f19df70d7fac866c60a1563456a20f' }, `
+        return (h("div", { key: '8a37af79ca05c760a65fde19686d0c2e796fbb0b' }, h("style", { key: '9a92807c0d688d1ddc86f05bcc39e34f1da2a939' }, `
           .popper-content {
             display: none;
           }
@@ -89,7 +89,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '3aafc7f4659c0b598586600cc44979c9b7425eae', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '2f338c682141c1610b265d8eca98a34678632c46' }))));
+          `), h("div", { key: 'fc9582fdc9d0b2e0ad115daad752796cd2bc4067', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '79ecc806af9caa4450969cd4b84868b59aa3f55b' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

package/dist/collection/{components → ui-components}/details/details.js

@@ -6,7 +6,7 @@ export class Details {
         this.errorMessage = undefined;
     }
     render() {
-        return (h(StyledHost, { key: '067f67765c63376d98b996fded17eb6418832d92', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
+        return (h(StyledHost, { key: 'c7c725936e4987ca76781b7edc73f1b67e00f21a', exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));

package/dist/collection/ui-components/filters/table-filters-menu.js

@@ -19,7 +19,7 @@ export class TableFiltersMenu {
         this.menu.classList.remove('show');
     }
     render() {
-        return (h("div", { key: 'aa914e16d2a733c8b7b6fee24225120d6901f0b5', class: "d-flex gap-2" }, h("div", { key: 'b53ff88da49d4060edfb1b96bf4577babf8e66f8', class: "dropdown pb-3" }, h(Button, { key: '176da3d69ae445dbc46e9c6602258ccb9bdeb515', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '562c6961a08e7b66518d9c2a283ddcb8a5787fa3', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '28d51e3aaa14f8208c9680b65058d3fd9f85f4d7', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: 'f00fb0dafac62c1a4283f1c2eb80c34dadaecd15' })))), h("div", { key: 'b8b9b9c7af5bfd7a20a34be4f28cda59a048f97a' }, h(Button, { key: '46746c3524824bf88120baf7e19c1687c3b8fa71', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'de116fd5406fcc4feb36df24f8fc3162b39567e8', class: "d-flex gap-2" }, h("div", { key: '07c7d885acc4816d28e3c2653d5e4c9a7ea42108', class: "dropdown pb-3" }, h(Button, { key: '34cee2bf49991340c4291c5014d17bfa9c3593d8', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '19640a1ab19bdda14398c4a76392584c6bf1e6d9', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'a72ce2a8ab9fc317236128980bd4bc9be92faf2c', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '008b23e2dc775ec59247df27379780d1ccdd81eb' })))), h("div", { key: '5b60c0821e4cfe5395c6eca11957e18446039cd7' }, h(Button, { key: '56d032309bdff48f6501ae6be6344860d008f481', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get is() { return "table-filters-menu"; }
     static get properties() {

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

@@ -25,7 +25,7 @@ export class CheckboxInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: 'c3d33e4a76472bb4143720251d1213a47642552c', exportparts: "label,input,input-invalid" }, h("div", { key: '68988cb5e01923e04917a83bd936dc76374c4f42', class: 'form-group d-flex flex-column' }, h("div", { key: '308d9016c2b542b82d3bebcdd2ea431ba537d165', class: "form-check" }, h("input", { key: '16dd03704fc680d380e648655fd1acd6fce3e75a', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input-checkbox ${this.errorText ? 'input-checkbox-invalid' : ''}`, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled }), h("label", { key: '4d344d2b87a29f87615f84127aa4209d3bbb5b6b', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '254147b71ed57277c010aaa9a38a4cc923634896', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3fac926a8a1c08a7fe8f97f4610fbbc97716f10e', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'c8edb4605eb989c6ace61a706eecdfaa2fdb312b', exportparts: "label,input,input-invalid" }, h("div", { key: '7e947fd7c2bb62d595b4573196c29e65c49a9fd2', class: 'form-group d-flex flex-column' }, h("div", { key: 'c436746afb9b635164d97787a2c016376293efe6', class: "form-check" }, h("input", { key: '1c49c239af1e8d40306ea9501811496fc4e4f363', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input-checkbox ${this.errorText ? 'input-checkbox-invalid' : ''}`, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled }), h("label", { key: 'c84eedc7331cfb4beaa2dacef387179d0d7b3edc', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: 'e7b88e259c2e8cfb11fce667d35d44770baa3283', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'ed6dbbb0cab64fac7b9fdf3927cdca135dcaef88', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

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

@@ -23,6 +23,7 @@ export class DateInput {
         this.disabled = undefined;
         this.filterTimeZone = false;
         this.showTime = undefined;
+        this.maxDate = this.currentDate;
     }
     handleDefaultValueChange(newValue) {
         if (this.filterTimeZone) {
@@ -32,7 +33,7 @@ export class DateInput {
             this.updateInput(newValue);
         }
     }
-    get maxDate() {
+    get currentDate() {
         if (!this.showTime) {
             return new Date().toISOString().split('T')[0];
         }
@@ -64,7 +65,7 @@ export class DateInput {
         return this.showTime ? localDate.toISOString().slice(0, 16) : localDate.toISOString().split('T')[0];
     }
     render() {
-        return (h(Host, { key: '2ee850cab24ab7d32cbd638299f59827b5b7e117', exportparts: "label,input,input-invalid" }, h("div", { key: 'cc898cb56cb32f86e9a9f2a8fb626c38394cf36f', class: "form-group d-flex flex-column" }, h("div", { key: 'de4f8f4da4d650eeced126625ddcad480714dc50', class: "d-flex gap-2" }, h("label", { key: '99a74827cb24033d33ce5e9b978c4ec7161590f4', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c9b2278afb165b5fc37dea2546f41912edb21567', helpText: this.helpText })), h("input", { key: 'af22c6198cb66961a3b4acf8486fdf034d65108c', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h("form-control-error-text", { key: 'cdb69d99d1736c8ba976170bb2baf28246939cfd', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'd3fe13284d2f08b951f12d16ea6a56492864991e', exportparts: "label,input,input-invalid" }, h("div", { key: '4823a873c5a8851b094ae59869014ffc6e603328', class: "form-group d-flex flex-column" }, h("div", { key: 'c2205441e85bfe202ae80660eafb4a3f0bae3f82', class: "d-flex gap-2" }, h("label", { key: 'c82d9599db4f54b647bf930e2a44b2f82b07876c', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'b2d8b21a6dba7f4e093081eb274e02d4484198e1', helpText: this.helpText })), h("input", { key: '579063f27122ec31f3818d3168060e43c51c1889', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h("form-control-error-text", { key: '75b7361712bbc65683b19a40398fa5b111b8b39b', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {
@@ -220,6 +221,24 @@ export class DateInput {
                 },
                 "attribute": "show-time",
                 "reflect": false
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-date",
+                "reflect": false,
+                "defaultValue": "this.currentDate"
             }
         };
     }

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

@@ -31,7 +31,7 @@ export class FileInput {
         this.fileInput = this.el.querySelector('input');
     }
     render() {
-        return (h(Host, { key: 'e55c4e61544191f12bccce66ed922357090f6a12', exportparts: "label,input,input-invalid" }, h("div", { key: 'ec8dd08ef6d99ae26a82ff891b25ae2d3892aea1', class: "form-group d-flex flex-column" }, h("div", { key: '8430c4a605b4869e6bb4f206d5cbd1588c4e983d', class: "d-flex align-items-start gap-2" }, h("label", { key: 'e9519f7c08040964b5594961b6c26ce14bbc2681', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '67ec6c6453976e2e6442e82ab94f94a5d0d91bb2', helpText: this.helpText })), h("input", { key: 'a25d7f66085730bcb2a0f749f744f0f6bd9fa76e', 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: '96b42ba795d86098932c1aeaf4d868cfce17895d', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'd3928cd6013d8e1bd23921a3d73b57de3a3f4c8f', exportparts: "label,input,input-invalid" }, h("div", { key: '5c15b542801ed84a4bdd43b7a7cb8f9a70ab5016', class: "form-group d-flex flex-column" }, h("div", { key: '1636d3a16f0da8047361cbaa87423d35e042de40', class: "d-flex align-items-start gap-2" }, h("label", { key: 'bfce95a71327cf8dd69aee4de8f1ff72c2ddcd97', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '2f6167da52618938b39e3917332a74ac3c19aba0', helpText: this.helpText })), h("input", { key: '1b06c50ddb2c1bec731ceca89cc2a19a7329e3cd', 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: '0f38dc541504c11d49afda08f5531d9612e4911d', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

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

@@ -47,7 +47,7 @@ export class MonetaryInput {
         (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (h(Host, { key: '6c95f96829b6cacc9d3fa975e1b9e81fa2011360', exportparts: "label,input,input-group-input,input-group-text,input-invalid" }, h("div", { key: 'e8343e6439d4a52d21991f9071caebb94789afdf', class: "form-group d-flex flex-column" }, h("label", { key: '5bff3a49dc18c407a8df5c96fd65720531bad45c', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '012e6cddda14b939c898df2c8422cd21f10e18fa', class: "input-group" }, h("span", { key: 'a7fa4827a93a925472271630a4667b64d1fa99c2', class: "input-group-text", part: "input-group-text" }, "$"), h("input", { key: 'd0e8c3f4e7466ab2115cbbe03bc9f81759f32c10', 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: '62f6cbc7dad3127d5461b8d003e9cf0a991373ff', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '465b5a31b6434b2afc40ff4cc6d29713e5840fe8', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '2a65acfea8e79d22dd09c7c116d80b12a2f2a47c', exportparts: "label,input,input-group-input,input-group-text,input-invalid" }, h("div", { key: '166dfb5c261c21d58db1a0e17d8bae149834c149', class: "form-group d-flex flex-column" }, h("label", { key: '1980871936440222e2b711ba2953d7b6287bf080', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '4cfb60bf946fa7e745c93b391997218122c551a0', class: "input-group" }, h("span", { key: '711357a32f9dc1fef77359f15ec3167a468d0463', class: "input-group-text", part: "input-group-text" }, "$"), h("input", { key: '2489cab2ecb61096f781d339363dad50404e3c67', 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: 'f7e89f0830ca0f453b02595303a245691f448d55', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '61f03f0d09027237ab3f5c7979981ddc3dc4c916', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

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

@@ -52,7 +52,7 @@ export class NumberInputMasked {
         }
     }
     render() {
-        return (h(Host, { key: 'ec5637a437fc6925f12ed0ff9653de16cebec6c8', exportparts: "label,input,input-invalid" }, h("div", { key: 'fa43aed393941aaa2c9aadf550e2528aca661c90', class: "form-group d-flex flex-column" }, h("div", { key: 'f97bc1662798dd0ac7a01050771f7e2d8b94d3c8', class: "d-flex align-items-start gap-2" }, h("label", { key: '75b17b73150c1c1ef3ca0489aa1dac45b86583b8', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'd1c35542ebf2c49de0abb0488dff23aad8238eaf', helpText: this.helpText })), h("input", { key: '3573366640ca5525b12cf086c92c000a25bfaf8b', 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: 'db11bee11d3f1f33ac03e8ed0f8687f0b9fff9cf', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'd22be5920cedfcbeb57164ba2d6909dc820fee6c', exportparts: "label,input,input-invalid" }, h("div", { key: '9ae430200ebdd26f5995dd2ccad7ad759d14ee11', class: "form-group d-flex flex-column" }, h("div", { key: '796880c67b2bd97977d09721f58357521cb76456', class: "d-flex align-items-start gap-2" }, h("label", { key: '8e4f342d1cebff5ba32b622448f759d83625d929', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '49b58ac4725e882732daefd29b3ce3c248fbe385', helpText: this.helpText })), h("input", { key: '566965701a60397807cc857813f839f56477dd81', 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: '783689f60c6aacab17be5a94a2b1abbd01232a42', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

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

@@ -28,7 +28,7 @@ export class NumberInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '5f7a94160460fd8a92d740899a7418c98b3178d0', exportparts: 'label,input,input-invalid' }, h("div", { key: 'c8386c9c72a721d53d33d3894615f7d8f127b1bf', class: 'form-group d-flex flex-column' }, h("label", { key: '754f8714d1d0e42c977dace41e79d0e7b21c7e39', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '4289872c0983d50ff89851aac2309b911e6348df', 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: '0de80b8d728865b8978a7daaf54315dbf422dced', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'b0cd9a78aa4c44dc7103c5d6ceced7258b197f16', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '2531e0e3e6ce1a477687be5f520f491256fb1841', exportparts: 'label,input,input-invalid' }, h("div", { key: '32df49f44e1a9737fbe62a6729007c048ed1ecac', class: 'form-group d-flex flex-column' }, h("label", { key: '33da2c09b1cf6b5d816bfa315061b4c5f211f0c5', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'a890c2d80dd744194f715ab148e6229d3bb524ac', 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: 'cb649de955887d02da58ab9934cadf5956cf7f8e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'db06fb4008f3f66b3b726f67bd58ae96bd152bd8', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

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

@@ -0,0 +1,209 @@
+import { Host, h, } from "@stencil/core";
+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.label = undefined;
+        this.name = undefined;
+        this.value = undefined;
+        this.helpText = undefined;
+        this.errorText = undefined;
+        this.defaultChecked = undefined;
+        this.inputHandler = undefined;
+        this.disabled = undefined;
+    }
+    handleDefaultValueChange(checked) {
+        this.updateInput(checked);
+    }
+    componentDidLoad() {
+        this.updateInput(this.defaultChecked);
+    }
+    render() {
+        return (h(Host, { key: '00ddff45ec5c4c37ddd90f7e8c43559356e23d6a', exportparts: "label,input,input-invalid" }, h("div", { key: '8a853ad5c99ee78111494dff4772ba6ece292f17', class: 'form-group d-flex flex-column' }, h("div", { key: 'bd0fa6c02ad9b3b5900f53bd520f9628bac13fad', class: "form-check" }, h("input", { key: '4318242ddc4ac275660dd8daac0b86d741d6cdf3', 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: 'ece1080c9d76c1459649ae80dcf894623955a61c', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '4862090450a3a9a2bab95a994d41bc54535007ec', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '6cc9c5629e0f4bc6c7307a7f0a6f1726717d50fe', errorText: this.errorText, name: this.name }))));
+    }
+    static get is() { return "form-control-radio"; }
+    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
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "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
+            },
+            "defaultChecked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "default-checked",
+                "reflect": false
+            },
+            "inputHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(name: string, value: boolean) => void",
+                    "resolved": "(name: string, value: boolean) => 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 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 watchers() {
+        return [{
+                "propName": "defaultChecked",
+                "methodName": "handleDefaultValueChange"
+            }];
+    }
+}