@justifi/webcomponents 4.17.0 → 4.18.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: 'b432005ef4b36d46f54ed57f22f070d7cbfffe11' }, (_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: '9492361a8c6d1b0cc29638811ddf41fb2e0e4a8c', class: "mt-4 form-check" }, h("input", { key: 'ef0b68d5daf26ec3c273839d79a66c03a6ae2af7', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "form-check-input" }), h("label", { key: '4dbd3b1501c8de8feedf738d73eb6e3e7fa2ad3a', 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: '534f00b35ee4eda915babee7a12e4e08467f85e0' }, h("div", { key: 'a4a584ec84fc8d227c40f7a783e502f1d71eb94a', class: "payment-method" }, h("div", { key: '2df6119670eb7f9499a68b243af86d26e11e4f90', class: "payment-method-header p-3", onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'd25e191a695d04657a84a364cd60544f593f470d', 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: '80f658216d46b048f5cb857b96a7c5a8f86c4e85', 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: 'ca426a40641b5f7d8bf325e31d4dbcab982359aa', class: "payment-method" }, h("script", { key: '2e1d43d57f815b5e451f625907b5490a825ad0df', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '122decb5b21d0480b5528bc425a50465a4667f18', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'f3546c71f0d845d2d341617255b6f3180f7c3faf', 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: 'f9f5683a8f2c9a662ae07264e8458e2d74b2057b', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '0367a351c9c5045a7a7264b0053e735816ab2b9c' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '5ca343cd874dc339ee9e6e23a0dcea9aa2e69ff4' }, h("span", { key: '780a3d63a7c32b791d3e1c6d1bcc8ebb33dcedc3' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: '85b902b4dfead7f935b571201605d51120303038' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: 'ead969304aa372477953a9f1159893c43ded914f', 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 "../../utils/styled-host/styled-host";
 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: '636b56646441cc0588b3eb1ae44a371a36274d5c', 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-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: 'f2aacad037f8f87113058e9f2e30eb87206bfbe3', exportparts: "label,input,input-group-input,input-group-text,input-invalid" }, h("div", { key: '3bc32c7abb0f277bf3b49ca9f67c1207ffcc7d9a', class: "form-group d-flex flex-column" }, h("label", { key: 'ccfb24981f1423c376d9146bf48f53f8ecb3a964', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("div", { key: 'acb22641d9c7b7aea3ba9d04527958a08cc5138f', class: "input-group" }, h("span", { key: 'fc2b1f6ad3332b464fa55c5a72fca2b4d6652d6c', class: "input-group-text", part: "input-group-text" }, "$"), h("input", { key: '39aee063f8a381251ee424a9e1488341e3dbbab5', 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: 'f9e05bb145ee2e33b92132ba3564c56412ea705e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e92a7992598bd13c61d9f8cbce17fce999b9924d', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

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: 'c84e3a681d35e62474e6b34b2a54edcae47370d2' }, 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() {