@justifi/webcomponents 4.20.1 → 4.22.0

package/dist/collection/components/terminals-list/terminals-list.js

@@ -0,0 +1,209 @@
+import { h } from "@stencil/core";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
+import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { config } from "../../../config";
+import { TerminalService } from "../../api/services/terminal.service";
+import { makeGetTerminals } from "./get-terminals";
+import { SubAccountService } from "../../api/services/subaccounts.service";
+import { makeGetSubAccounts } from "../../api/get-subaccounts";
+import { StyledHost, tableExportedParts } from "../../ui-components";
+/**
+  * @exportedPart label: Label for inputs
+  * @exportedPart input: The input fields
+  * @exportedPart input-invalid: Invalid state for inputs
+  * @exportedPart table-head: Table head
+  * @exportedPart table-head-row: Head row
+  * @exportedPart table-head-cell: Individual head cell
+  * @exportedPart table-body: Body of the table
+  * @exportedPart table-row: Row of the table
+  * @exportedPart table-cell: Individual cell of the table
+  * @exportedPart loading-state-cell: Row for loading state
+  * @exportedPart loading-state-spinner: Spinner element for loading state
+  * @exportedPart error-state: Row for Error state
+  * @exportedPart empty-state: Row for Emtpy state
+  * @exportedPart pagination-bar: Pagination bar
+  * @exportedPart arrow: Both paging buttons
+  * @exportedPart arrow-left: Previous page button
+  * @exportedPart arrow-right: Next page button
+  * @exportedPart button-disabled: Disabled state for paging buttons
+  * @exportedPart previous-button-text: Text for Previous button
+  * @exportedPart next-button-text: Text for Next button
+*/
+export class TerminalsList {
+    constructor() {
+        this.handleErrorEvent = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
+        this.getTerminals = undefined;
+        this.getSubAccounts = undefined;
+        this.errorMessage = null;
+        this.accountId = undefined;
+        this.authToken = undefined;
+        this.apiOrigin = config.proxyApiOrigin;
+        this.columns = undefined;
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+        this.initializeGetData();
+    }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
+    propChanged() {
+        this.initializeGetData();
+    }
+    initializeGetData() {
+        this.initializeGetTerminals();
+        this.initializeGetSubAccounts();
+    }
+    initializeGetTerminals() {
+        if (this.accountId && this.authToken) {
+            this.getTerminals = makeGetTerminals({
+                id: this.accountId,
+                authToken: this.authToken,
+                service: new TerminalService(),
+                apiOrigin: this.apiOrigin
+            });
+        }
+        else {
+            this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: this.errorMessage,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    initializeGetSubAccounts() {
+        if (this.accountId && this.authToken) {
+            this.getSubAccounts = makeGetSubAccounts({
+                accountId: this.accountId,
+                authToken: this.authToken,
+                service: new SubAccountService(),
+                apiOrigin: this.apiOrigin
+            });
+        }
+    }
+    render() {
+        return (h(StyledHost, { key: 'b150133d9e787d0a4f32d92d9fb26df50391e632', exportparts: tableExportedParts }, h("terminals-list-core", { key: '59302d93d0a308c34aacabf7e5a006099eaff2d6', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+    }
+    static get is() { return "justifi-terminals-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "account-id",
+                "reflect": false
+            },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "apiOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "api-origin",
+                "reflect": false,
+                "defaultValue": "config.proxyApiOrigin"
+            },
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "columns",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "getTerminals": {},
+            "getSubAccounts": {},
+            "errorMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "accountId",
+                "methodName": "propChanged"
+            }, {
+                "propName": "authToken",
+                "methodName": "propChanged"
+            }];
+    }
+}
+;

package/dist/collection/components/terminals-list/terminals-status.js

@@ -0,0 +1,11 @@
+export const MapTerminalStatusToBadge = (status) => {
+    switch (status) {
+        case 'connected':
+            return "<span class='badge bg-success' title='This terminal is connected.'>Connected</span>";
+        case 'disconnected':
+            return "<span class='badge bg-danger' title='This terminal is disconnected.'>Disconnected</span>";
+        case 'unknown':
+            return "<span class='badge bg-secondary' title='The status of this terminal is unknown'>Unknown</span>";
+    }
+    ;
+};

package/dist/collection/components/terminals-list/terminals-table.js

@@ -0,0 +1,15 @@
+import { h } from "@stencil/core";
+import { MapTerminalStatusToBadge } from "./terminals-status";
+export const defaultColumnsKeys = 'nickname,provider_id,status';
+export const terminalTableColumns = {
+    nickname: () => (h("th", { part: "table-head-cell", scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
+    provider_id: () => (h("th", { part: "table-head-cell", scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
+    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
+    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each terminal" }, "Status")),
+};
+export const terminalTableCells = {
+    nickname: (value) => (h("td", null, value)),
+    provider_id: (value) => (h("td", null, value)),
+    sub_account_name: (value) => (h("td", null, value)),
+    status: (value) => (h("td", { innerHTML: MapTerminalStatusToBadge(value) })),
+};

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

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+
+justifi-payment-method-form {
+  display: block;
+  margin-left: calc(var(--jfi-layout-padding) * -1);
+  margin-right: calc(var(--jfi-layout-padding) * -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: 'ff19898ad40884372621978edd5a44aa4b0a3b53' }, h("style", { key: '9d1c65abf4971046c219312792d9836656dda63a' }, `
+        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: '50d1dabe33b1b0a3d9c82e8fb68e2aef1e81e549', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '1d1eae013b2e61dd8285c014f388d2c2d68406c5' }))));
+          `), 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() {
@@ -180,12 +180,16 @@ export class CustomPopper {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
+                    "original": "HTMLElement | SVGElement",
+                    "resolved": "HTMLElement | SVGElement",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
+                        },
+                        "SVGElement": {
+                            "location": "global",
+                            "id": "global::SVGElement"
                         }
                     }
                 },

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

@@ -6,7 +6,7 @@ export class Details {
         this.errorMessage = undefined;
     }
     render() {
-        return (h(StyledHost, { key: '00b10fc4e459688ae06147ef1535f03609ec35e4', 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: 'dd6aae6e43579e8f833b1f3f6a6227d2522d79ec', class: "d-flex gap-2" }, h("div", { key: '6decd268cf11d67c3f9e3c2b22e60cbdf328763a', class: "dropdown pb-3" }, h(Button, { key: 'af22247916f55da650da95006e3317316a4122f5', 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: '0516d664adf8feccb9dd9cb74023241867285bd6', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'd42f891b0b30fa152e03bfe3fbcb12da4707974b', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '77eb00715458275e6df23da973103046364f50aa' })))), h("div", { key: 'c9070c2d5ee453cf3a97908514877975c55813b8' }, h(Button, { key: '99b38ff5ac51ee21227832b2200f2dcdec40a70c', 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: '831f46bc595cb8fa23a72011ab766a5b9d966a55', exportparts: "label,input,input-invalid" }, h("div", { key: 'f38808e7af411589847eefe3efd814cf70cabd22', class: 'form-group d-flex flex-column' }, h("div", { key: 'c2384d67aec366c9ebd87e2e28583d160757e548', class: "form-check" }, h("input", { key: '44f8f4eb68834dd180935bee1e738603bb202cb3', 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: 'e497dbac02a6a1ee9dfb2163821479f366482fc0', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '07d0c510d2b2b3519e8ab429ff6cc744e75bd6fe', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2993d3a4f9956a7bd7d94265100bedd9b2488fef', 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() {