@justifi/webcomponents 4.17.0 → 4.19.0

package/dist/collection/components/checkout/payment-method-options.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { config } from "../../../config";
 import { PaymentMethodTypes } from "../../api/Payment";
 import { PaymentMethodOption } from "./payment-method-option-utils";
@@ -59,7 +59,7 @@ export class PaymentMethodOptions {
     }
     render() {
         var _a;
-        return (h("div", { key: '6dd0b7072f2e9ee81fafb2526fa9e4b5d170b804' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '86e309b90ab00f530dd803b00e5aab511f92300f' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
@@ -90,12 +90,12 @@ export class PaymentMethodOptions {
     static get is() { return "justifi-payment-method-options"; }
     static get originalStyleUrls() {
         return {
-            "$": ["payment-method-options.scss"]
+            "$": ["payment-method-options.css", "form-check-input.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["payment-method-options.css"]
+            "$": ["payment-method-options.css", "form-check-input.css"]
         };
     }
     static get properties() {

package/dist/collection/components/checkout/save-new-payment-method.js

@@ -9,7 +9,7 @@ export class SaveNewPaymentMethod {
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: '2de6df80b2da83b29a9adb8b1a94d6326200567b', class: "mt-4 d-flex align-items-center" }, h("input", { key: 'ad5bac37f404ed7abf754d7ed87b58a80f04150e', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "me-2" }), h("label", { key: 'cc860c51e9a9efdb95cdaf974723b2538204d6a0', class: 'checkbox-label' }, "Save new payment method")));
+        return (h("div", { key: 'f22a132a518a98786c8486e08c9a65050f3c5ea0', class: "mt-4 form-check" }, h("input", { key: '6f1392f9dd29a9761f5942b0a40e05a899858ada', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "form-check-input" }), h("label", { key: 'e6e5908ba70ece8ea19370a04104d88d17237fc7', class: "form-check-label" }, "Save new payment method")));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get states() {

package/dist/collection/components/checkout/saved-payment-method.js

@@ -20,7 +20,7 @@ export class SavedPaymentMethod {
     ;
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Fragment, { key: '5dda9656eaaa1419566414393447ac77507ea3a8' }, h("div", { key: 'c6eeb3bfa46658e67edb10c4144aa605a7291c8f', class: "payment-method" }, h("div", { key: '51c5fa5a49bc9192f7863f135aa97f45f7e0d121', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '25f9048dd3b7c627fc0df1a3a2e26b9ba9dae42b', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '629311044d83b839bb78a8383b240b87351a309b', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
+        return (h(Fragment, { key: '9c2174123f1675d60bc48d8109821c0bc2ad7682' }, h("div", { key: '07bffce2603110d44f38ffb2f57a60f07faddb3b', class: "payment-method" }, h("div", { key: 'f489d3a05db45c2b2581bc8f0fc093afed453d91', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '70681612520aa621c39a017b72b25a7dd3211282', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: 'a58e14ae9d199b0e0eb01b4c0a4a8bd9c8fec41d', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, CardBrandLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.brand], " *", (_e = this.paymentMethodOption) === null || _e === void 0 ? void 0 :
             _e.acct_last_four)))));
     }
     static get is() { return "justifi-saved-payment-method"; }
@@ -54,7 +54,7 @@ export class SavedPaymentMethod {
                         "PaymentMethodOption": {
                             "location": "import",
                             "path": "./payment-method-option-utils",
-                            "id": "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption"
+                            "id": "src/components/checkout/payment-method-option-utils.ts::PaymentMethodOption"
                         }
                     }
                 },

package/dist/collection/components/checkout/sezzle-payment-method.js

@@ -65,7 +65,7 @@ export class SezzlePaymentMethod {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'ccb94a3389d6622f156ee9310c4de64c45526cea', class: "payment-method" }, h("script", { key: 'af6ab6f27dea70522142082cabfc21fa46517487', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: 'd411456241653d9f3d5821cc2bf2d4df340326e0', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '1666ded908064d72d211faffb9193e7c1b3c16d9', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '3182111d9f1d855d808c557ff17b49db4d1da398', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '9ea4a25704e7a6fbe0c33ad52f61f794cef98c1b' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '7f5a43b15a9141e9c459dbef03ec1d1770c8fc89' }, h("span", { key: '731ef282ffe005258a2ea57e554c0710f10e33c2' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: '87b61f76c3c309f5730dbc8e119ccb6264d2a519' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: 'b24080d4434f25bae07a17dc8e93546a2f3aa00b', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
+        return (h("div", { key: '4deca512311cd98d358c7099141b15538857a4e5', class: "payment-method" }, h("script", { key: '94b232291153bba85efebb101e7e6e816857da96', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '7cd9052ae6613fe7f187f3a51b7d6ac7087fdeb1', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '1e15e6c2ddced23b049e2559da27532f9be94fb5', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '0a3637002ef373c05424d6769b070d9db0e66ce8', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '6398e2f00088edf8a1a3699e149760744dda4cb1' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: 'bfd33da875aa5e9f5b649ac8fc7aa5758393b6e8' }, h("span", { key: 'c07fd5d32fe897a45a67140e2cb81b1f4d537c4a' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: '2b11e4aa6389a4b98cd003c031aed8f01ec8a4df' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: '90cf3bfa1f0d36c8d4719f164d436407d7fc692b', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
     }
     static get is() { return "justifi-sezzle-payment-method"; }
     static get properties() {
@@ -149,7 +149,7 @@ export class SezzlePaymentMethod {
                         "PaymentMethodOption": {
                             "location": "import",
                             "path": "./payment-method-option-utils",
-                            "id": "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption"
+                            "id": "src/components/checkout/payment-method-option-utils.ts::PaymentMethodOption"
                         }
                     }
                 },

package/dist/collection/components/details/details.js

@@ -1,27 +1,18 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { ErrorState } from "./utils";
+import { StyledHost } from "../../ui-components";
 export class Details {
     constructor() {
         this.errorMessage = undefined;
     }
     render() {
-        return (h(Host, { key: '2d6ed5cb3c548d10c9a7de29b2b1b3a94f60133f', 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: '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 ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));
     }
     static get is() { return "justifi-details"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["./details.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["details.css"]
-        };
-    }
     static get properties() {
         return {
             "errorMessage": {

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

@@ -25,7 +25,7 @@ export class CheckboxInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '727dd3a3e8024aae9540885f677f2aebca05f4f0', exportparts: "label,input,input-invalid" }, h("div", { key: '8d523339b9f03b078333d4380d03db9d1005bb5d', class: 'form-group d-flex flex-column' }, h("div", { key: 'e1b85ac05cf6a578d7f78a017d2ae85da9fd0b14', class: "form-check" }, h("input", { key: 'd5c111ba29f7035a6213555f7d876ae042badd2f', 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: '604dc0bba4a0fe0a7171cfed95649a5600d3890f', class: "form-check-label", htmlFor: this.name }, this.label)), h("form-control-help-text", { key: '2779d04d33657d493b17864fa96b8b5c6ab5c4da', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '27b6ba8589b8fb9adbfb1792efd36bd4af4338d2', errorText: this.errorText, name: this.name }))));
+        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 }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

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

@@ -25,7 +25,7 @@ export class DateInput {
         this.dateInput.value = value;
     }
     render() {
-        return (h(Host, { key: '477163306527f6b607c43e63ec4a38aaac5a4780', exportparts: "label,input,input-invalid" }, h("label", { key: '3174cbb24f2bd74e59e28dc6a31e224a0e2ab47d', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'de908daeee9db445c1369b75c536bcf33cb9f4e9', type: "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 }), h("form-control-help-text", { key: 'ea51242481f4a9894d55871d23aeaf4013112e24', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2db99a325bd6d691c0fdcbf3965535266329506f', errorText: this.errorText, name: this.name })));
+        return (h(Host, { key: 'fa61a426a5a070d951fa425ae42a59add69a9d96', exportparts: "label,input,input-invalid" }, h("label", { key: 'e7679e6a66277a130414b59421b01d1f8e328cf2', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'b3fb4afd3181fec3eef3dfb851ab8965cb7bbfe7', type: "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 }), h("form-control-help-text", { key: 'dbc9ac76d75521a7d1ee5cc34393471521ffa1c2', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '0f9731278250bde69dd7dee9a7b44e339d919774', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

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

@@ -31,7 +31,7 @@ export class FileInput {
         this.fileInput = this.el.querySelector('input');
     }
     render() {
-        return (h(Host, { key: '2219dfef80cb3ef71148fbc4d2d29df6583d6779', exportparts: "label,input,input-invalid" }, h("div", { key: '18d059b17b226815a97cf1be429857bd93e43115', class: "form-group d-flex flex-column" }, h("label", { key: '91adf40d0dd7559888b7c37eeee40f363628bada', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '6aa37be009cce396e2f1268429c94b812d48167e', 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-help-text", { key: 'd4241aceb5a40b2dfedebc9658b128231d43fcc0', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'af7dd8c90ea83f2f99f24100e97c9147f787aadf', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'ed29128c1c4c811aa030697347adb88e0143b031', exportparts: "label,input,input-invalid" }, h("div", { key: '6c924bdbbccae8e98a382a92e54c5b9c288de8d4', class: "form-group d-flex flex-column" }, h("label", { key: 'dbacccea94e39815737683495e3df83b514b79af', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'a7eef53c9fff54eace8c6960b8c62a833d30bfa3', 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-help-text", { key: 'a5abacb92bdb3fb59d0a2265114e858540f2c4b7', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '6eeeef347237d363d3bc6616d58f19a7f0be7e3c', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

package/dist/collection/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: 'db55365b80d790ecdd9388bd80068be4d024fcbb', exportparts: "label,input,input-invalid" }, h("div", { key: 'badef12431b67dd5c8de702cc978237fffaad16a', class: "form-group d-flex flex-column" }, h("label", { key: 'c187a982531ea45e674e74a77aad65e3cf4d8e1c', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '61d58986d9369907e9732f1540ce0f914d16cda8', class: "input-group" }, h("span", { key: '883f4851ddb76c62b514bdd2399f06415f201995', class: "input-group-text" }, "$"), h("input", { key: 'af5a0b3239f664f1ed82c2534f667b38adda245a', 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 monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h("form-control-help-text", { key: 'f0e59b47f55772a3c7a008ee32475d16415163af', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'fd9b43f2a028e0ca00df298000bb933c0cb10b7f', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '8797b3aa5c6a30f472d51e2b9437b6158b0566fc', exportparts: "label,input,input-group-input,input-group-text,input-invalid" }, h("div", { key: '0d3e068cf104aec3f6250f5cd6c00a9342928fe8', class: "form-group d-flex flex-column" }, h("label", { key: '0e86db7c0d981bdae74c51dd75bf5579d07b4793', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '8fc773de3995bb37e6fa00b34d8d9e2deaef4bbd', class: "input-group" }, h("span", { key: '83860eac764be9eeea31302d60525fb56af9dc1d', class: "input-group-text", part: "input-group-text" }, "$"), h("input", { key: 'b8c655c0b8eeb6ec328eeaed651773c293aa3100', 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: 'b3f142b9c67a792a96b597bdaf91fd3abe1b7ce3', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'daefe97a15bde309c397a506de6cda9a0376323b', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

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

@@ -10,8 +10,11 @@ export class NumberInputMasked {
                 mask: this.mask,
             });
             this.imask.on('accept', () => {
-                const rawValue = this.imask.unmaskedValue;
-                this.inputHandler(this.name, rawValue);
+                var _a;
+                const rawValue = (_a = this.imask) === null || _a === void 0 ? void 0 : _a.unmaskedValue;
+                if (rawValue !== undefined) {
+                    this.inputHandler(this.name, rawValue);
+                }
             });
             this.textInput.addEventListener('blur', () => this.formControlBlur.emit());
         };
@@ -35,6 +38,7 @@ export class NumberInputMasked {
         this.disabled = undefined;
     }
     handleDefaultValueChange(newValue) {
+        this.initializeIMask();
         this.updateInput(newValue);
     }
     disconnectedCallback() {
@@ -42,11 +46,13 @@ export class NumberInputMasked {
         (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     componentDidLoad() {
-        this.initializeIMask();
-        this.updateInput(this.defaultValue);
+        if (this.textInput) {
+            this.initializeIMask();
+            this.updateInput(this.defaultValue);
+        }
     }
     render() {
-        return (h(Host, { key: '781c4f77fe5b5b4f39c2d44868814ada72ce67c9', exportparts: "label,input,input-invalid" }, h("div", { key: '9c3ed0d13b883e3d2dc302225f25a00414088ef6', class: "form-group d-flex flex-column" }, h("label", { key: '0782f2936175944dd54e5497e54d2389c35c94bc', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '8feee613f2f83e8cb0ac34a4939fd65b5c14729a', 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-help-text", { key: 'dbdf33259fd04b1488b299216eb550960068c553', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '8a148bb9a29f322fb21acbfd8597a1e89433056a', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'e0a59308376055c019233f3d4649c9a37af963d2', exportparts: "label,input,input-invalid" }, h("div", { key: '52d9440421342fed6a4f97b57586a43d517ded7d', class: "form-group d-flex flex-column" }, h("label", { key: '8302a9fa1111d3b72600304cd0b1fb2c6239d895', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '86653c7b7f4efb9609bae2ecf69bd5e396bd342b', 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-help-text", { key: '71d4d44ff91d06229ccc22e70bc92e0a2050da90', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'b7d42462ae9165acbde68cf59da07eb956a91fd6', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

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

@@ -28,7 +28,7 @@ export class NumberInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: 'da1318fae566f16be182c710840df84a60ccf707', exportparts: 'label,input,input-invalid' }, h("div", { key: 'de12c73d81be1a797c7efd482adef5e648d2947b', class: 'form-group d-flex flex-column' }, h("label", { key: '95113ea706e25074512e948ae041ac121af6c181', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '03d3cf05f76c6dd4ec2b00d486f31045dd36dc12', 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: 'ac4d21a4d723c80bff561364858f2dfba3c704b6', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '7f474f8d69bf555a2e6c517772e79d35a7bd32b2', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'dd43d75b327c05e75b453b954346c6ffcd85a2f5', exportparts: 'label,input,input-invalid' }, h("div", { key: '5215f62251bd89be493ddffe46bf0c466b42e314', class: 'form-group d-flex flex-column' }, h("label", { key: 'f0409970f8d43bcdef92b81363cc24aa1bb691a0', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '9c6a5899e64ba1a8af6af80c63b6a0895351da63', 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: 'cd7b4a724427383cafc04137f6feca473695b020', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '04748d3c5b1067b0312a2b7c36369e2a21a7215f', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

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

@@ -27,7 +27,7 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'abc80a7f20c59c99a3468f199142bc01ba7883cb', exportparts: "label,input,input-invalid" }, h("div", { key: 'd34ec19e40c33bd16b1e03e2bfac07dd6dd1a3a8', class: "form-group d-flex flex-column" }, h("label", { key: '43adfb46f3bf2e72e50d2bab17b909fec8693c2a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: 'eacb07490715f8041cfa6cd4fab91959d5b6bfae', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h("form-control-help-text", { key: '5ec5ba6ca4e0503ffdbddb95e70444bbf8b169b7', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'bd90d61ca9aa0c52d351e336febc9f3d2e501355', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '99449e3724103b12af7f2a4573831961074a484a', exportparts: "label,input,input-invalid" }, h("div", { key: 'd73e89d43da9968b687afece24794d9472fec6b5', class: "form-group d-flex flex-column" }, h("label", { key: '6964c55858fc3cf96a137e1061c7f66831105348', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: '5b1a09a607ad9638915f5e70f2164f6010020438', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h("form-control-help-text", { key: '62d862921d463c98e56888293c878624f7311548', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '0b1c4d4752965fb058208c72c7f1c3872d1e0561', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

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

@@ -30,7 +30,7 @@ export class TextInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '7b3c980cbad27b29bc87dd4eaa8a23398c8b244c', exportparts: "label,input,input-invalid" }, h("div", { key: 'fa49688c206721f177d2c57b42103ffcd139dde7', class: "form-group d-flex flex-column" }, h("label", { key: '596b8cae71f32769d82fa5e77df11daa172fcce9', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '44ec6ef8e306c5d25190dec87926ba382665f2ca', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '888e0abf5f3687266784eda12428cb219321f964', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '902a8e06659e63cb35002b5eef8b3f987df8fb44', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '1194532f81831734543bad80860da14f8a5ad856', exportparts: "label,input,input-invalid" }, h("div", { key: '296538cf90b62f8041e21620aa06b4074f68b71a', class: "form-group d-flex flex-column" }, h("label", { key: '7c009ce96124e58f9657dba2565ef298225f10f7', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '4b33cb700aecf4d0a359366ba2e0d248c602d904', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '7a279d72bb262fcb044b5b0cc31703878ce9f444', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '00bea288a99f626806697a98b6dca3f3298dc0b3', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

package/dist/collection/components/form/utils.js

@@ -1,5 +1,3 @@
-import { h } from "@stencil/core";
-export const LoadingSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
 export const numberOnlyHandler = (e) => {
     var _a;
     const specialKeys = ['Backspace', 'Tab', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Delete'];

package/dist/collection/components/gross-payment-chart/gross-payment-chart-core.js

@@ -68,12 +68,12 @@ export class GrossPaymentChartCore {
         }
     }
     render() {
-        return (h(Host, { key: '73822a13a814d0d6e687d0ac4904023776f02c9c' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: '463d7e132e647e1da6dc5ad5ea54abf95a60e715' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get is() { return "gross-payment-chart-core"; }
     static get originalStyleUrls() {
         return {
-            "$": ["gross-payment-chart.scss"]
+            "$": ["gross-payment-chart.css"]
         };
     }
     static get styleUrls() {