@justifi/webcomponents 4.17.0 → 4.18.0

package/dist/collection/components/checkout/checkout-core.js

@@ -1,9 +1,10 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { formatCurrency } from "../../utils/utils";
 import { config } from "../../../config";
 import { Checkout } from "../../api/Checkout";
 import { ComponentErrorSeverity } from "../../api/ComponentError";
 import { insuranceValues, insuranceValuesOn, validateInsuranceValues } from "../insurance/insurance-state";
+import StyledHost from "../../utils/styled-host/styled-host";
 export class CheckoutCore {
     constructor() {
         this.completeCheckout = async (payment) => {
@@ -123,18 +124,18 @@ export class CheckoutCore {
         return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h("justifi-skeleton", { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
     }
     render() {
-        return (h(Host, { key: 'b4eca3c8ce6642cc307df9bf0954d8db13ec3791' }, h("div", { key: '652bb4e5b2b4ec189d293630d31a3c1d8f345a7e', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '6bb0869d4632dd8937e5077dd84732f9091342d0', class: "col-12 mb-4" }, h("h2", { key: 'bd8d0d02f5a59ec9a5629808fea21dc3e922407a', class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.summary), h("div", { key: '81b1c5e141fa49da91e257eb40243e27f2c55f50', class: "col-12" }, h("slot", { key: '438606a898983e51141c62e7fe7ab209eadfa2a2', name: "insurance" })), h("div", { key: '0932dbfb2f6c57aed73f56b3563c189e76b1aa69', class: "col-12" }, h("h2", { key: 'd96345a9941679990d0e379293eb960751ef4063', class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { key: 'cfcb5db0857f670008d5f71f3fccd53b1d05c91d', class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { key: 'f9f06327db4ec89b0db943de0e6d3c983d33ab55', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '18392f4a553848f123910bb10501821b550e0abe', class: "col-12" }, h("div", { key: '31f6e5b2267ab507021b285becdd2961035ffe53', class: "d-flex justify-content-end" }, h("button", { key: '4dc7c5af2ca0d3766a2e3371da9b241e3260a351', type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, part: "pay-button", class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
+        return (h(StyledHost, { key: '2b96ee13916f7da0c872ba6f72223368b2c666e3' }, h("div", { key: 'c9b10b32f8b3c69fef559b6ff9753efad3ed1fef', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '2bce2147ecb9b18d5d3b60843a0af77b2fc4bcb2', class: "col-12" }, h("h2", { key: '690fe9231ec98d3500497c27ae73ff0ed25549ef', class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.summary), h("div", { key: '719ba6b07d282b18e85a8ef330c21f30a1caf921', class: "col-12" }, h("slot", { key: 'd75c873384397b080e17dfcb7571e29eacd4c298', name: "insurance" })), h("div", { key: '8a72d01adba931e56bc685aa4d8bc53b1db91bdc', class: "col-12 mt-4" }, h("h2", { key: 'b09d2c310b22c01287d8783ca82b4108b0e18868', class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { key: '00b969e4d3ea8fbfa0325aae334862a485cd117b', class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { key: 'a952ad0a2070926eb6d73fa86b9fd7c9b9f82748', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: 'aec96d897f66e146940c133bfe2be046dbe83a34', class: "col-12" }, h("div", { key: '5b5adba09d08b6381f3fe8b84a494433f58be556', class: "d-flex justify-content-end" }, h("button", { key: '4048bd514eebcabca392d2f33691491ed9be7037', type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, part: "pay-button", class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["checkout-core.scss"]
+            "$": ["checkout-core.css", "header.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["checkout-core.css"]
+            "$": ["checkout-core.css", "header.css"]
         };
     }
     static get properties() {

package/dist/collection/components/checkout/form-check-input.css

@@ -0,0 +1,20 @@
+.form-check-input,
+label {
+  cursor: pointer;
+}
+
+.form-check-input {
+  background-color: var(--jfi-radio-button-background-color);
+  border-color: var(--jfi-radio-button-border-color);
+}
+
+.form-check-input:checked,
+.form-check-input:checked:focus {
+  background-color: var(--jfi-radio-button-background-color-selected);
+  border-color: var(--jfi-radio-button-border-color-selected);
+}
+
+.form-check-input:focus {
+  border-color: var(--jfi-radio-button-border-color-focus);
+  box-shadow: var(--jfi-radio-button-box-shadow-focus);
+}

package/dist/collection/components/checkout/header.css

@@ -0,0 +1,4 @@
+.jfi-header {
+  color: var(--jfi-header-color);
+  border-bottom: var(--jfi-header-border);
+}

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

@@ -69,7 +69,7 @@ export class NewPaymentMethod {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '7a9d21ea2d343fbbf56de456bb0275f25e7538a1', class: "payment-method" }, h("div", { key: '84ed7ef64a6cc1d6936b182fd4139e8dceb497ec', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '9dd41da85d45145f6054a28e216c530dd6a140e8', 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: '7e1a273a1ca12f07c9b4ee8a5c6eebcf713362e8', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h("div", { key: '450c5e6cb4d59d63733c78dff2aa2d59fe2ac579', class: "payment-method" }, h("div", { key: '6fc5d18cbf1d6287e5b29859ceb56e36088ad43a', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '508d561fb7bba38e7fc0b91c519b9e2aa7529e2d', 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: 'bc34b7f590107caa9f99e7fff8741cbbbe6c93e5', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
     static get is() { return "justifi-new-payment-method"; }
     static get properties() {
@@ -136,7 +136,7 @@ export class NewPaymentMethod {
                         "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"
                         }
                     }
                 },