@justifi/webcomponents 5.3.1 → 5.3.3

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

@@ -2,13 +2,12 @@ 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 { makeGetTerminals } from "../../actions/terminal/get-terminals";
 import { SubAccountService } from "../../api/services/subaccounts.service";
-import { makeGetSubAccounts } from "../../api/get-subaccounts";
 import { StyledHost } from "../../ui-components";
 import { defaultColumnsKeys } from "./terminals-table";
+import { makeGetSubAccounts } from "../../actions/sub-account/get-subaccounts";
 export class TerminalsList {
     constructor() {
         this.handleErrorEvent = (event) => {
@@ -20,7 +19,7 @@ export class TerminalsList {
         this.errorMessage = null;
         this.accountId = undefined;
         this.authToken = undefined;
-        this.apiOrigin = config.proxyApiOrigin;
+        this.apiOrigin = PROXY_API_ORIGIN;
         this.columns = defaultColumnsKeys;
     }
     componentWillLoad() {
@@ -67,7 +66,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '79168b27873e1b6e7d6bfded80b646d2a95292e0' }, h("terminals-list-core", { key: '2dfbc1d923cb83cc10039b4344629db17f754fbc', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '1534781e6264057b7c780e6b44f4a7a66a561296' }, h("terminals-list-core", { key: '8c0fb664d5ebe4fedcf6e45046e931adffb9d381', 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"; }
@@ -123,7 +122,7 @@ export class TerminalsList {
                 },
                 "attribute": "api-origin",
                 "reflect": false,
-                "defaultValue": "config.proxyApiOrigin"
+                "defaultValue": "PROXY_API_ORIGIN"
             },
             "columns": {
                 "type": "string",

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

@@ -4,7 +4,7 @@ import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
 export const defaultColumnsKeys = 'nickname,provider_id,status';
 export const terminalTableColumns = {
     nickname: () => (h("th", { part: tableHeadCell, scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
-    provider_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
+    provider_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The serial number / provider ID of the terminal" }, "Serial Number")),
     sub_account_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
     status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each terminal" }, "Status")),
 };

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

@@ -1,9 +1,8 @@
 import { h } from "@stencil/core";
 import { Button, StyledHost } from "../../ui-components";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import JustifiAnalytics from "../../api/Analytics";
-import { config } from "../../../config";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api";
 export class TokenizePaymentMethod {
     constructor() {
         this.authToken = undefined;
@@ -14,7 +13,7 @@ export class TokenizePaymentMethod {
         this.disableBankAccount = undefined;
         this.hideSubmitButton = undefined;
         this.hideCardBillingForm = undefined;
-        this.iframeOrigin = config.iFrameOrigin;
+        this.iframeOrigin = IFRAME_ORIGIN;
         this.isLoading = false;
     }
     componentWillLoad() {
@@ -24,8 +23,9 @@ export class TokenizePaymentMethod {
     async tokenizePaymentMethod(event) {
         event && event.preventDefault();
         this.isLoading = true;
+        let tokenizeResponse;
         try {
-            const tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
+            tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
             if (tokenizeResponse.error) {
                 this.errorEvent.emit({
                     errorCode: tokenizeResponse.error.code,
@@ -33,26 +33,26 @@ export class TokenizePaymentMethod {
                     severity: ComponentErrorSeverity.ERROR,
                 });
             }
-            else if (tokenizeResponse.token) {
-                this.submitEvent.emit({ response: tokenizeResponse });
-            }
         }
         catch (error) {
-            this.errorEvent.emit({
+            const errorData = {
                 errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                 message: error.message,
                 severity: ComponentErrorSeverity.ERROR,
-            });
+            };
+            this.errorEvent.emit(errorData);
         }
         finally {
+            this.submitEvent.emit({ response: tokenizeResponse });
             this.isLoading = false;
+            return tokenizeResponse;
         }
     }
     async fillBillingForm(fields) {
         this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     render() {
-        return (h(StyledHost, { key: '0ddf067ee86437aa9e860da496daf9ae2b3b5cef' }, h("form", { key: '1416581ae33fdc1e3a4afee8340b5427c2ec3b8d' }, h("fieldset", { key: '1229cbac7d660a8b526f69781ee879783b119d8a' }, h("div", { key: 'ce2fa29a82caeb792caa35e7497afde46886a6a6', class: "row gy-3" }, h("div", { key: 'afdcc686fd93057ab2b44776b94d668f26f5de7c', class: "col-12" }, h("justifi-payment-method-options", { key: '5dd4d7243d930daf99acef4d730faabbfc8080c0', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, authToken: this.authToken, "account-id": this.accountId, iframeOrigin: this.iframeOrigin })), h("div", { key: '375d26a56c451018a78891157bd598437ca65fb7', class: "col-12" }, h(Button, { key: 'aa0ab5b00f58e6f8f9c6ae951cdd756ff37481ef', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText || 'Submit')))))));
+        return (h(StyledHost, { key: 'ac989aa84f6262ff1b72a88fc7c4ebb0e62175dc' }, h("form", { key: '482ebf3ca3ac67738fdd0243de8d29ad66754313' }, h("fieldset", { key: 'e563783b34d570bafd1788949a486454ce70ab4a' }, h("div", { key: 'a42f5625f5d0860153f4260aa9c5f76f4afcad06', class: "row gy-3" }, h("div", { key: 'f64bb331c9922be711bfdd9a50d76530773867c0', class: "col-12" }, h("justifi-payment-method-options", { key: 'dc23821a9130ee6435c92e20574a0bf056e1c29c', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, authToken: this.authToken, "account-id": this.accountId, iframeOrigin: this.iframeOrigin })), h("div", { key: '29ec96487c4a5d54c4883c4cfe4a6ee4a309042f', class: "col-12" }, h(Button, { key: 'fe116e392e79debf6a858c993ba11a21d417d998', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText || 'Submit')))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get encapsulation() { return "shadow"; }
@@ -210,7 +210,7 @@ export class TokenizePaymentMethod {
                 },
                 "attribute": "iframe-origin",
                 "reflect": false,
-                "defaultValue": "config.iFrameOrigin"
+                "defaultValue": "IFRAME_ORIGIN"
             }
         };
     }
@@ -236,8 +236,8 @@ export class TokenizePaymentMethod {
                     "references": {
                         "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentEvents",
-                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorEvent"
                         }
                     }
                 }
@@ -257,8 +257,8 @@ export class TokenizePaymentMethod {
                     "references": {
                         "ComponentSubmitEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentEvents",
-                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentSubmitEvent"
                         }
                     }
                 }
@@ -268,7 +268,7 @@ export class TokenizePaymentMethod {
         return {
             "tokenizePaymentMethod": {
                 "complexType": {
-                    "signature": "(event?: CustomEvent) => Promise<void>",
+                    "signature": "(event?: CustomEvent) => Promise<PaymentMethodPayload>",
                     "parameters": [{
                             "name": "event",
                             "type": "CustomEvent<any>",
@@ -279,17 +279,22 @@ export class TokenizePaymentMethod {
                             "location": "global",
                             "id": "global::Promise"
                         },
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "../checkout/payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
+                        },
                         "CustomEvent": {
                             "location": "global",
                             "id": "global::CustomEvent"
                         },
                         "ComponentErrorCodes": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentErrorCodes"
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorCodes"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<PaymentMethodPayload>"
                 },
                 "docs": {
                     "text": "",
@@ -311,8 +316,8 @@ export class TokenizePaymentMethod {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::BillingFormFields"
+                            "path": "../billing-forms/billing-form-schema",
+                            "id": "src/components/billing-forms/billing-form-schema.ts::BillingFormFields"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/styles/parts.js

@@ -74,6 +74,9 @@ export const badgeDark = `${badge} badge-dark`;
 export const dropdownMenu = `dropdown-menu ${text}`;
 // Radio List Item
 export const radioListItem = `radio-list-item ${text}`;
+// Bootstrap list-group
+export const listGroup = `list-group ${text} ${backgroundColor}`;
+export const listGroupItem = `list-group-item ${text} ${backgroundColor}`;
 // Skeleton
 export const skeleton = `skeleton`;
 // Component specific
@@ -83,6 +86,7 @@ export const billingForm = `billing-form`;
 export const checkoutSummary = `checkout-summary`;
 // Filters
 export const filterMenu = `filter-menu`;
+// Payments List Filters
 export const paymentsListFilterMenu = `${filterMenu} payments-list-filter-menu`;
 export const paymentsListFilterParam = `payments-list-filter-param`;
 export const paymentIdPaymentsListFilterParam = `${paymentsListFilterParam} payment-id-payments-list-filter-param`;
@@ -90,3 +94,18 @@ export const terminalIdPaymentsListFilterParam = `${paymentsListFilterParam} ter
 export const paymentStatusPaymentsListFilterParam = `${paymentsListFilterParam} payment-status-payments-list-filter-param`;
 export const createdAfterPaymentsListFilterParam = `${paymentsListFilterParam} created-after-payments-list-filter-param`;
 export const createdBeforePaymentsListFilterParam = `${paymentsListFilterParam} created-before-payments-list-filter-param`;
+// Payouts List Filters
+export const payoutsListFilterMenu = `${filterMenu} payouts-list-filter-menu`;
+export const payoutsListFilterParam = `payouts-list-filter-param`;
+export const createdAfterPayoutsListFilterParam = `${payoutsListFilterParam} created-after-payouts-list-filter-param`;
+export const createdBeforePayoutsListFilterParam = `${payoutsListFilterParam} created-before-payouts-list-filter-param`;
+// Checkouts List Filters
+export const checkoutsListFilterMenu = `${filterMenu} checkouts-list-filter-menu`;
+export const checkoutsListFilterParam = `checkouts-list-filter-param`;
+export const statusCheckoutsListFilterParam = `${checkoutsListFilterParam} checkout-status-checkouts-list-filter-param`;
+export const paymentModeCheckoutsListFilterParam = `${checkoutsListFilterParam} payment-mode-checkouts-list-filter-param`;
+// Terminals List Filters
+export const terminalsListFilterMenu = `${filterMenu} terminals-list-filter-menu`;
+export const terminalsListFilterParam = `terminals-list-filter-param`;
+export const terminalIdTerminalsListFilterParam = `${terminalsListFilterParam} terminal-id-terminals-list-filter-param`;
+export const terminalStatusTerminalsListFilterParam = `${terminalsListFilterParam} terminal-status-terminals-list-filter-param`;

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: 'd59371a35f7215a7e93678b3e8ed37a7900ae294' }, h("style", { key: '70630b46ad7933447a8ed41d3dc7f304600be42a' }, `
+        return (h("div", { key: '1b95226961006ba80bb96911078f7cde90f32def' }, h("style", { key: '3b20790da8600b3835e5874acab8cd49a741dbfa' }, `
           .popper-content {
             display: none;
           }
@@ -89,7 +89,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '94b22314d2bcf4ac41ab3239758b2421945de604', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '5c6af2fbf398b3377323f1a78b394ef5eb702463' }))));
+          `), h("div", { key: '05d166976a3aa254c1d0722c272bd9b0adc24862', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '95d3a563a9d7a1598ec35c8042a9a1088070a4bc' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

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

@@ -23,7 +23,7 @@ export class TableFiltersMenu {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: 'd45f459f317d7a5c10083e4d6c7a1855e606ccff', class: "d-flex gap-2" }, h("div", { key: 'cd9625444bf3e4a084508a52f2f4ee52ec108602', class: "dropdown pb-3" }, h(Button, { key: '328dfff010a31a5e49a6a893bd9a8b49ebc44a6a', 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: '591b15ad81d875d9f0249978394281ee134dd63f', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'dbab8762dddfaa425e13d8f6ca9993ee1811a404', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: 'b4c174ce6d565e7cadcd3ce62af69eaaeac5054c' })))), h("div", { key: '1daabbe4fa3551640c075ee20e39b2c9363bf59a' }, h(Button, { key: 'b09b43e46ad9b40797efd06ede82044c8a6e25df', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'b55be2aa2f9d4677989da12bb114f620a9ec2e45', class: "d-flex gap-2" }, h("div", { key: 'dffb2be68ead3abb60a8740869e48bb48bbf558c', class: "dropdown pb-3" }, h(Button, { key: '2e7b2d3afc80963abfe9c8c2690a61b911a1b747', 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: '9e2b1b988bc5440f18d26c5b8402f5e30e73cdad', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '573161a7515d1b16665138ba739133379b9b6850', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '9597e79f125e1e41c343fa3d2d583b5cf7ab9c31' })))), h("div", { key: '67ed29ac8e10f3ae1380514ae1a1e1e8aed7d9b6' }, h(Button, { key: '9b3dc6176c11226e82ecb1f9f88705ad40bf6e32', 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/ui-components/form/form-control-checkbox.js

@@ -38,10 +38,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: '6ea0ca6e03a956c5c11e6b6b67802a8344e6f3d8' }, h("div", { key: '87a7a3e9d34992d992464b8d6fe8ba712ff32865', class: 'form-group d-flex flex-column' }, h("div", { key: 'e3da6c3971c74163e914f53c9b5a480dbac2759b', class: "form-check" }, h("input", { key: '01af0856f7e2ad919790a7ec8896cb06e3329452', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '8161ae3e7ce79824b21b97647b403646dd7d2db8' }, h("div", { key: 'e1aae62dd392cf208c342d727182a4b98dcabbbc', class: 'form-group d-flex flex-column' }, h("div", { key: '582178c2b18f6d535f692d2b1f16e71555bb6f2e', class: "form-check" }, h("input", { key: '531a98078cee60acc5c8838a3ea7ea43c84fe846', 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: '069d3ee70d0cc1c48092407055e8666a1156e7c6', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'bbc6d2e5fdef899236c07738bfa15b51b02c6912', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '456e4ad15ab35e4b68102abfcd058e2d16ac0232', 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: '8a12404a24a3b1c4cbec230444436c80faeba2d8', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '8cda3874473523f86dadc9e1e3dfb3e4448f3a6f', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '951395dc28c0af8d35aa8c8f38011204a82eb008', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

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

@@ -50,10 +50,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: 'a2e8ffbb23d128699730acd686fc06ce0ade5270' }, h("div", { key: 'd43b72838047707022bd3527b610eec234af6cd9', class: "form-group d-flex flex-column" }, h("div", { key: '416954342c2113ff1f4fc77cf714852e0bb66527', class: "d-flex gap-2" }, h("label", { key: 'e0c366b390fbb3ef8d183b5ca71935b8274a0b22', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e4aa76ce751db6fa45a8f11f8026e68102f484f4', helpText: this.helpText })), h("input", { key: '4022e4c857527cffb19b747815acad73c81025d4', 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: 'c1add6b2191a1b3263c12bcbf5d0be368df38dab' }, h("div", { key: '34be414bc3a4499a8fef8de45855ecc1e00edcd4', class: "form-group d-flex flex-column" }, h("div", { key: 'f5198a9aabd0e12c0f1597ac357a433a84ce56a6', class: "d-flex gap-2" }, h("label", { key: '084a1eb6ddfd7b728e0c5402c995b1f561e9cc7d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '0328133482e9cc0f3082aa41c143fd21e95ee8ee', helpText: this.helpText })), h("input", { key: '59cbf8ccd7d2a08f38f07c73b1b457eb109d1571', 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: '31c0122e9737c704b087dbb2a4791fd7965be3c7', 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: 'd71b3de2d560c4a44a3a00a7e5f28d9bfc5843b1', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

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

@@ -11,7 +11,7 @@ export class FileInput {
         this.disabled = undefined;
     }
     render() {
-        return (h(Host, { key: '421617186e463989ce9534004e9b59df81f223ed', exportparts: "label,input,input-invalid" }, h("div", { key: 'f3ac5c496a289e0211a249396546e9d6a1840b28', class: "form-group d-flex flex-column" }, h("div", { key: '8f732b62f40a4351462804a6753e235153679cb9', class: "d-flex align-items-start gap-2" }, h("label", { key: 'b8cebb65d6d238253c8710785745cd82419fe9cf', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '10abec154ebc5960a0f72cb2608dbc7b8ea08378', helpText: this.helpText })), h("input", { key: '3df4d0b69f18f4c266a9af0260ec9c7b422d5c7b', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit() }), h("form-control-error-text", { key: 'd657e89c7c9780db8e1c610383054c082fa77822', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '68bfcee3ae8e8baa627c2e03731de655f7a29ef5', exportparts: "label,input,input-invalid" }, h("div", { key: 'a63ff9900d7612d933e35a0fd95335e8abc45ea7', class: "form-group d-flex flex-column" }, h("div", { key: '74124ffdbf2ac3c28299a78469f387c494140db5', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ec6c237392b1b520a5aab9c6f6a9cb328613e663', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '60f734ebac8d88e2e2775deb0433e2dfe3002402', helpText: this.helpText })), h("input", { key: '2859f4d46dcd5a666017fdb6ae0f10a266bdea4a', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit() }), h("form-control-error-text", { key: 'c667c4882412d5d43b60beae55e3ebab2c43f07d', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file-v2"; }
     static get properties() {

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

@@ -47,10 +47,10 @@ export class FileInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '4950c97a276963d0b666313b5eb2047cd05ffe0f' }, h("div", { key: 'f09de9c091824da6e385e9129c007ea3ddefea7a', class: "form-group d-flex flex-column" }, h("div", { key: 'c853c5997df0a9a3b0789712abcbf25c1bc50884', class: "d-flex align-items-start gap-2" }, h("label", { key: 'e5c17b93898fdf7e2244f3a5549fdd3ddcc2bab8', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '131ac4f66a6bae82f53473f36448780090f28a71', helpText: this.helpText })), h("input", { key: 'cf8374ebefcbe18b73d853c96b703652869ea0af', 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: '09e633d625a1f8f2233d80e8b999fcd7e4a16f62' }, h("div", { key: 'b788fd0963c0ab62d0f7e236fb47ea86430b522e', class: "form-group d-flex flex-column" }, h("div", { key: '1e7a11e13ec3c386c9f30b5cd38c3afa99c88da5', class: "d-flex align-items-start gap-2" }, h("label", { key: '45cd0d97ae44c32b4d1e0d87187ac1871511c319', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'd312e4f181dfb18c0b86048960ec0a333760f290', helpText: this.helpText })), h("input", { key: '73ff59959c75dc99cccddde819ebbeb6bc1de4ab', 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: 'd5ac4a7e8b5f70fd0cb63e9358bb372a3167ab5e', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: 'cb9c8bd4f623ebd82bdbd9725805f6038b0e1f8c', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

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

@@ -63,10 +63,10 @@ export class MonetaryInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '467e85f7211d67d6daabfcc8a3531b7ba2a15cb4' }, h("div", { key: '5566df3c8d8f9507acc27a7e47d9c79528928e8f', class: "form-group d-flex flex-column" }, h("label", { key: '5cee3c6dcc1d4e41184d4ad7185b8a8c50f9175a', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: 'e111a7617526080c1d9e2051ff7476a768c8681e', class: "input-group" }, h("span", { key: '359a79709cad258033ee44ca6c4c320be1a85ce4', class: "input-group-text", part: text }, "$"), h("input", { key: '32dda535adca1021e46badb63d8ba064c936bd2f', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'c7a92629b644f797bc0c199b66f2b3a7802e24af' }, h("div", { key: 'b21ec4bd76d52d6ebe23de04748b344529bd5e91', class: "form-group d-flex flex-column" }, h("label", { key: 'c1a4d2c44d19a81ea594c36c8ce537956e32f8be', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '3c7858f3b1bff3d304e2d6ef4613570307abb031', class: "input-group" }, h("span", { key: '57f667463d22682820a688ff4583429203d35c88', class: "input-group-text", part: text }, "$"), h("input", { key: '8027bd97c1e8974089b9438972e449c9fe00e984', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: '560b1ef9506257d411d9d08e4a984195f1c3b948', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '7f4243a3d36cdd86129dca92e925e82917825d12', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: '2b983d18e5544d78015ce9d9f15ac0fba9991193', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '1cbf33304b3243fed47f2d6cc5459010d9502347', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

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

@@ -67,10 +67,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: 'b99a11bcbe47c9cd1ec7f52ff081b56c7c56fa9a' }, h("div", { key: '2d549b26a4d88b4653a9433de7e0ab6b07aa8f8a', class: "form-group d-flex flex-column" }, h("div", { key: 'a923b55bc2d2bd9d0097ffa452fe46816870aa18', class: "d-flex align-items-start gap-2" }, h("label", { key: 'af645e990ec448bad5d1b8fe2b6b415fb062c129', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3bbeaa5fff2964e1f635aab612e1f9b8fa1929d7', helpText: this.helpText })), h("input", { key: 'f1fe3e4749703f7658164e9bb31c500db9699cbf', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: '84b2b9707b77df0865ca506c3c974f9974f698e3' }, h("div", { key: '6817ba99efccf056fa28535db39a672cdb18bc0a', class: "form-group d-flex flex-column" }, h("div", { key: '2f0f64dc35352659740292397f82f6490f32b6ee', class: "d-flex align-items-start gap-2" }, h("label", { key: 'f5eff8109b6403b2cdc53e6c0a23538ef3dcb817', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '633b66f6d99fea7688652fa6e5f11e0d68666f69', helpText: this.helpText })), h("input", { key: '3df0af7941cb957ddf3df89f3216a2d3187e1e9d', 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: '9574288a9424638ee0f72731848813863dffe718', 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: '9d634135126b399aea1071fd5cc53784728b01c1', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

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

@@ -43,10 +43,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '020f9486c87d1ab1f4ecbba08ef8febf889dfbe4' }, h("div", { key: '81d7f8149f287e21c0b41c351defdd528e892218', class: 'form-group d-flex flex-column' }, h("label", { key: 'c2f0799869b0bd31494b85d6cf5db9d0faffbee9', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'ddad27d6112be528bc94ef3f567674ea36453b59', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '8c60e7494ce6878f591699baa07e5a5d562090b4' }, h("div", { key: '49c2ebe33aa6317c5960ab8a1cc1d8998e06ff9e', class: 'form-group d-flex flex-column' }, h("label", { key: '9132628d047ad3c2b243e87b013b77f367aef274', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '25d4df4f8bc7eafde56f8b6aaf77eac3acd78035', 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: '5a9fc892d50613e7a436e1425f8b90df7e110328', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '9cc21eab8ed0579a31fe4aae543e1ae521127725', 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: '47d213b459ddfb9d9704d217f82e0d30d3166465', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '4835e71589d825d56d36ef99b00fdd877690a04d', 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

@@ -34,10 +34,10 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: '51d99ae29bb26e36a3f2540e6ebbbe0e99a49889', class: 'form-group d-flex flex-column' }, h("div", { key: '0ac89070efef01fe3ee76144f2177db9a55497ef', class: "form-check" }, h("input", { key: 'ef109f542471bb8599590614fce2dec13c932572', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'dd02a226957e079505a8149565e42883eb0c63e8', class: 'form-group d-flex flex-column' }, h("div", { key: '8951df4569607dc68808b57423566dd1d60caa0c', class: "form-check" }, h("input", { key: '7b2e93768b210191dbb3aa9cf81e2520ffaac5ff', 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: 'aa2a71abec10a6f01961a539f0890f162dfeb10c', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '67e5b9fb761adef49988f62f72018fe838c7b0df', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e1b4b9c055869524f4b97da177389322fde6736a', 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: 'fd413c400f607c07d704cfe56d7e304082027d5c', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '4e7cc2ac52d39092be5e46f1a2df1a7d31f380eb', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '420052233ae56f98712559707a4372644f915aec', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {

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

@@ -43,10 +43,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9842d5b2a2069292ded1b960bc024d7995a6d58e' }, h("div", { key: 'b4b5fe37f88661d2f592864adb16ae997a38b484', class: "form-group d-flex flex-column" }, h("div", { key: 'f70c40c7e4bdd58b985ac9b6e76fbf48ff15261e', class: "d-flex align-items-start gap-2" }, h("label", { key: '6b1d9e1f3b22e702962c1d23a057f08222af5e1a', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fae7835adde280a8c4f48f3c9b169240aac3672d', helpText: this.helpText })), h("select", { key: 'bee75d1bb56ed104473efcad7d8c432b50bfbb38', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'f55283c73225466b10cec78e6e5ff1c268142d1b' }, h("div", { key: '48beb377ca664b867598f8e472a3bb4825aecf9b', class: "form-group d-flex flex-column" }, h("div", { key: '13debfb6a725d7f247eb5601e3361a3964b826e9', class: "d-flex align-items-start gap-2" }, h("label", { key: '15ac64fb03a5c1cb8f55c18bd7eb41d66328e599', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3d8b43ed6e997234f7c64daf41b2286bec93340e', helpText: this.helpText })), h("select", { key: '1c3eb5699a0b76c694a02fe50e8070483b2960e6', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: 'f5df46552aa8124b344260bca05bd02c695d0fe6', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: 'd223fd1fad44de99812b0e3a3429e3931b798c2c', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

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

@@ -45,10 +45,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'f742a9b9375efe75d2621e0a333e569e52c5290d' }, h("div", { key: '42ce4c0edaa8a081617ca7d23faa963b2e0909f7', class: "form-group d-flex flex-column" }, h("div", { key: 'aaa00bd55270e8fefe70acb6bfc3c5f5d2e30225', class: "d-flex align-items-start gap-2" }, h("label", { key: '5f5ca7cf669041fb67d560d73b45fd5c0a3e70c2', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ad501482251bb1b1ad927ad5e58bbb30900f35e9', helpText: this.helpText })), h("input", { key: 'dcccf1c182a8d9e8cb8dea09f622d85099b97013', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'd84e000c15b64815eb0f8eb2e1e1f774fd786956' }, h("div", { key: 'fc751f6b2da9d20bee791e854a2bb7d3f9ce7456', class: "form-group d-flex flex-column" }, h("div", { key: '6853a85e1dced30edb8b84070d7dc16b65e47ce6', class: "d-flex align-items-start gap-2" }, h("label", { key: '5c020f8419308ceac4c00220ce9df8fac8ce1f0f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '81662d978c47c8d3e10342cb2b2a005af4ecf608', helpText: this.helpText })), h("input", { key: '14fd9610e3a92e0b6125ab41a5878268a7cc3157', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: 'b8b968c0a8b56839e43caa61bf317270a78bdbf4', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: 'be05bd72e34afa9c8b4dd42cb5eda4fb6407224d', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

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

@@ -47,10 +47,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '5ff0ae9958d65d09da3b4faad03b1bc3644433ac' }, h("div", { key: '9cc21c5487cddf7ca4c3dce0f915a2db295396bb', class: "form-group d-flex flex-column" }, h("label", { key: '8dd963da4101aca20b38e586d627d4bbdae89e63', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'afaf7959901a52f8073fab64a6352c08a60f6ea1', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'beabdb77220c0ad180cf1e0143521ce03fea1eb5' }, h("div", { key: '16e2375d19c75d34c7f1ad1eb1a3a5920fa4ba08', class: "form-group d-flex flex-column" }, h("label", { key: 'dbe6e6816c5b500363964c771654d772bb25de62', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'b7c5f64138c846756051bd4984152ad382f24dba', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '466f7f20f5af124d1b3b9f7761abff49a9845b48', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'd65f09910e8631992d42a6b21f55897e26e57ba7', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '65ef4b15eda7ac206e935aa13b8ed30000af23d8', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3fa530e3c915efdb63776a0146356873cf8e1e6a', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {

package/dist/collection/ui-components/form/hidden-input.js

@@ -73,7 +73,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '21c26d386f4e23af0e0ef069ad0263e252c8c15b' }, h("input", { key: '70bb1f6c7c5e94a96fddfe82d1831df12771f0af', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+        return (h(Host, { key: '7bfd14ae6eb04d3bccb6f95398213655bc5c1073' }, h("input", { key: 'a40b6c6b2fd4e217af572f2032b158cc0ad603d2', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
     }
     static get is() { return "hidden-input"; }
     static get states() {

package/dist/collection/ui-components/form/iframe-input.js

@@ -23,7 +23,6 @@ export class IframeInput {
         this.isFocused = false;
         this.isValid = true;
         this.errorText = undefined;
-        this.iframeLoaded = false;
         this.inputId = undefined;
         this.label = undefined;
         this.iframeOrigin = undefined;
@@ -82,20 +81,20 @@ export class IframeInput {
         return params;
     }
     render() {
-        return (h(Host, { key: '00956724f4d6e72b09c2c469613a6362a3c7cdec', class: "form-group d-flex flex-column" }, h("div", { key: 'e6605bd5ef7356c21701b0856a133758720a36d6', style: {
+        return (h(Host, { key: '871d71c6240e94e24f7ccc4c4ec8225b4123d865', class: "form-group d-flex flex-column" }, h("div", { key: '0a1d98cba0960599d29db3c269bb8b458cdfddc8', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: 'f52a782a9f1bbca4a8a6e36da1948611ab834e54', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'b88199f3de1b52a0aed4d61c0448c293964a7279', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '218aa6d48b12c1fc78f04a1556f0a32738c20df4', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: 'bfd2e61b544db648cada7a52b45809bebf5722a8', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '53e9f9a29e07edcdcbb00b023ba0f24d09d852ab', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '2adc709c4094c44181dd83906763b4809b3f168b', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
                 iFrameResize({
                     log: false,
                     onResized: () => {
-                        this.iframeLoaded = true;
+                        this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: 'f6e57608fc771ca78e39618455dfe57cd40a655a', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: 'c54bafd097b1e3e896901252d3520bfdfe5c71b6', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {
@@ -157,10 +156,27 @@ export class IframeInput {
         return {
             "isFocused": {},
             "isValid": {},
-            "errorText": {},
-            "iframeLoaded": {}
+            "errorText": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "iframeLoaded",
+                "name": "iframeLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get methods() {
         return {
             "validate": {