@justifi/webcomponents 0.6.1 → 2.0.0

package/dist/collection/components/card-form/card-form.js

@@ -1,11 +1,9 @@
 import { h } from '@stencil/core';
 export class CardForm {
   constructor() {
-    this.validationStrategy = undefined;
-    this.styleOverrides = undefined;
+    this.validationMode = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
-    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -16,15 +14,6 @@ export class CardForm {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
-  componentWillLoad() {
-    this.parseStyleOverrides();
-  }
-  parseStyleOverrides() {
-    if (this.styleOverrides) {
-      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
-      this.internalStyleOverrides = parsedStyleOverrides;
-    }
-  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -42,12 +31,12 @@ export class CardForm {
         if (el) {
           this.childRef = el;
         }
-      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "card", "single-line": this.singleLine, "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "card", "single-line": this.singleLine, "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-mode": this.validationMode || 'onSubmit' }));
   }
   static get is() { return "justifi-card-form"; }
   static get properties() {
     return {
-      "validationStrategy": {
+      "validationMode": {
         "type": "string",
         "mutable": true,
         "complexType": {
@@ -61,24 +50,7 @@ export class CardForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "validation-strategy",
-        "reflect": false
-      },
-      "styleOverrides": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "style-overrides",
+        "attribute": "validation-mode",
         "reflect": false
       },
       "iframeOrigin": {
@@ -117,11 +89,6 @@ export class CardForm {
       }
     };
   }
-  static get states() {
-    return {
-      "internalStyleOverrides": {}
-    };
-  }
   static get events() {
     return [{
         "method": "cardFormReady",
@@ -215,12 +182,6 @@ export class CardForm {
       }
     };
   }
-  static get watchers() {
-    return [{
-        "propName": "styleOverrides",
-        "methodName": "parseStyleOverrides"
-      }];
-  }
   static get listeners() {
     return [{
         "name": "paymentMethodFormReady",

package/dist/collection/components/card-form/card-form.stories.js

@@ -2,7 +2,34 @@ import { userEvent, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 export default {
   title: 'Components/CardForm',
-  component: 'justifi-card-form',
+  component: 'justifi-payment-method-form',
+  argTypes: {
+    iframeOrigin: {
+      control: 'text',
+      table: {
+        category: 'Props'
+      }
+    },
+    singleLine: {
+      control: 'boolean',
+      table: {
+        category: 'Props'
+      }
+    },
+    styleOverrides: {
+      control: 'object',
+      table: {
+        category: 'Props'
+      }
+    },
+    validationMode: {
+      control: { type: 'select' },
+      options: ['onSubmit', 'onBlur', 'onChange', 'onTouched', 'all'],
+      table: {
+        category: 'Props'
+      }
+    }
+  },
   parameters: {
     actions: {
       handles: [
@@ -54,53 +81,28 @@ const FormButtons = `
     <button id="tokenize-btn">Tokenize</button>
   </div>
 `;
-const storyStyleOverrides = {
-  "layout": {
-    "padding": "100px",
-    "formControlSpacingHorizontal": ".5rem",
-    "formControlSpacingVertical": "1rem"
-  },
-  "formLabel": {
-    "fontWeight": "700",
-    "fontFamily": "sans-serif",
-    "margin": "0 0 .5rem 0"
-  },
-  "formControl": {
-    "backgroundColor": "#00F4F6",
-    "backgroundColorHover": "#EEEEF5",
-    "borderColor": "rgba(0, 0, 0, 0.42)",
-    "borderColorHover": "rgba(0, 0, 0, 0.62)",
-    "borderColorFocus": "#fccc32",
-    "borderColorError": "#C12727",
-    "borderWidth": "0px",
-    "borderBottomWidth": "1px",
-    "borderRadius": "40px 4px 0 0",
-    "borderStyle": "solid",
-    "boxShadowErrorFocus": "none",
-    "boxShadowFocus": "none",
-    "color": "#212529",
-    "fontSize": "1rem",
-    "fontWeight": "400",
-    "lineHeight": "2",
-    "margin": "0",
-    "padding": ".5rem .875rem"
-  },
-  "errorMessage": {
-    "color": "#C12727",
-    "margin": ".25rem 0 0 0",
-    "fontSize": ".875rem"
-  }
-};
-const Template = ({ includeButtons = true, styleOverrides }) => {
-  const parsedStyleOverrides = styleOverrides ? JSON.stringify(styleOverrides) : null;
+const Template = (args) => {
+  const parsedStyleOverrides = args.styleOverrides ? JSON.stringify(args.styleOverrides) : null;
+  const includeButtons = true;
   return (`
     <div>
-      <justifi-card-form data-testid="card-form-iframe" style-overrides='${parsedStyleOverrides || ''}' />
+      <justifi-card-form 
+        data-testid="card-form-iframe" 
+        validation-mode='${args.validationMode || 'onSubmit'}'
+        style-overrides='${parsedStyleOverrides || ''}' 
+        iframe-origin='${args.iframeOrigin || ''}'
+        single-line='${args.singleLine}'
+      />
     </div>
     ${includeButtons ? FormButtons : ''}
   `);
 };
 export const Basic = Template.bind({});
+Basic.args = {
+  iframeOrigin: '',
+  singleLine: false,
+  validationMode: 'onSubmit'
+};
 export const Embedded = Template.bind({});
 Embedded.decorators = [
   (story) => `
@@ -116,7 +118,38 @@ Embedded.decorators = [
 ];
 export const Styled = Template.bind({});
 Styled.args = {
-  styleOverrides: storyStyleOverrides
+  cssVariables: (`
+  --jfi-layout-padding: 0;
+  --jfi-layout-form-control-spacing-x: .5rem;
+  --jfi-layout-form-control-spacing-y: 1rem;
+  --jfi-form-label-font-weight: 700;
+  --jfi-form-label-font-family: sans-serif;
+  --jfi-form-label-margin: 0 0 .5rem 0;
+  --jfi-form-control-background-color: #F4F4F6;
+  --jfi-form-control-background-color-hover: #EEEEF5;
+  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);
+  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);
+  --jfi-form-control-border-color-focus: #fccc32;
+  --jfi-form-control-border-color-error: #C12727;
+  --jfi-form-control-border-top-width: 0;
+  --jfi-form-control-border-left-width: 0;
+  --jfi-form-control-border-bottom-width: 1px;
+  --jfi-form-control-border-right-width: 0;
+  --jfi-form-control-border-radius: 4px 4px 0 0;
+  --jfi-form-control-border-style: solid;
+  --jfi-form-control-box-shadow-focus: none;
+  --jfi-form-control-box-shadow-error-focus: none;
+  --jfi-form-control-border-style: solid;
+  --jfi-form-control-color: #212529;
+  --jfi-form-control-font-size: 1rem;
+  --jfi-form-control-font-weight: 400;
+  --jfi-form-control-line-height: 2;
+  --jfi-form-control-margin: 0;
+  --jfi-form-control-padding: .5rem .875rem;
+  --jfi-error-message-color: #C12727;
+  --jfi-error-message-margin: .25rem 0 0 0;
+  --jfi-error-message-font-size: .875rem;
+  `)
 };
 export const Completed = Template.bind({});
 Completed.play = async ({ canvasElement, step }) => {

package/dist/collection/components/payment-form/payment-form.css

@@ -1550,4 +1550,51 @@ progress {
   line-height: 1.5;
   color: #212529;
   display: block;
+}
+
+justifi-payment-method-form {
+  display: block;
+  margin-left: calc(var(--jfi-layout-padding) * -1);
+  margin-right: calc(var(--jfi-layout-padding) * -1);
+}
+
+*::part(label) {
+  color: var(--jfi-form-label-color);
+  font-family: var(--jfi-form-label-font-family);
+  font-weight: var(--jfi-form-label-font-weight);
+  font-size: var(--jfi-form-label-font-size);
+  margin: var(--jfi-form-label-margin);
+}
+
+*::part(input) {
+  background-color: var(--jfi-form-control-background-color);
+  border-color: var(--jfi-form-control-border-color);
+  border-width: var(--jfi-form-control-border-width);
+  border-bottom-width: var(--jfi-form-control-border-bottom-width);
+  border-bottom-width: var(--jfi-form-control-border-left-width);
+  border-bottom-width: var(--jfi-form-control-border-right-width);
+  border-top-width: var(--jfi-form-control-border-top-width);
+  border-radius: var(--jfi-form-control-border-radius);
+  border-style: var(--jfi-form-control-border-style);
+  box-shadow: var(--jfi-form-control-box-shadow);
+  color: var(--jfi-form-control-color);
+  font-size: var(--jfi-form-control-font-size);
+  font-weight: var(--jfi-form-control-font-weight);
+  line-height: var(--jfi-form-control-line-height);
+  margin: var(--jfi-form-control-margin);
+  padding: var(--jfi-form-control-padding);
+}
+*::part(input):focus {
+  color: var(--jfi-form-control-color-focus);
+  border-color: var(--jfi-form-control-border-color-focus);
+  box-shadow: var(--jfi-form-control-box-shadow-focus);
+}
+
+*::part(input-invalid) {
+  border-color: var(--jfi-form-control-border-color-error);
+  box-shadow: var(--jfi-form-control-box-shadow-error);
+}
+*::part(input-invalid):focus {
+  border-color: var(--jfi-form-control-border-color-error);
+  box-shadow: var(--jfi-form-control-box-shadow-error-focus);
 }

package/dist/collection/components/payment-form/payment-method-selector.js

@@ -13,7 +13,7 @@ export class PaymentMethodSelector {
   }
   render() {
     return (h("div", { class: "form-check" }, this.paymentMethodTypes.map((paymentMethodType) => {
-      return (h("div", null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "form-check-input" }), h("label", { htmlFor: paymentMethodType }, PaymentMethodLabels[paymentMethodType])));
+      return (h("div", null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "form-check-input" }), h("label", { htmlFor: paymentMethodType, class: "form-check-label" }, PaymentMethodLabels[paymentMethodType])));
     })));
   }
   ;

package/dist/collection/components/payment-method-form/get-computed-theme.js

@@ -0,0 +1,48 @@
+const getComputedTheme = () => {
+  const computedStyles = getComputedStyle(document.body);
+  const computedTheme = {
+    layout: {
+      padding: computedStyles.getPropertyValue('--jfi-layout-padding'),
+      formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),
+      formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),
+    },
+    formControl: {
+      backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),
+      borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),
+      borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),
+      borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),
+      borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),
+      borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),
+      borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),
+      borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),
+      borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),
+      borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),
+      borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),
+      boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),
+      boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),
+      boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),
+      boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),
+      color: computedStyles.getPropertyValue('--jfi-form-control-color'),
+      colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),
+      fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),
+      fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),
+      lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),
+      margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),
+      padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),
+    },
+    formLabel: {
+      color: computedStyles.getPropertyValue('--jfi-form-label-color'),
+      fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),
+      fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),
+      fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),
+      margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),
+    },
+    errorMessage: {
+      color: computedStyles.getPropertyValue('--jfi-error-message-color'),
+      margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),
+      fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),
+    }
+  };
+  return computedTheme;
+};
+export default getComputedTheme;

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

@@ -1,11 +1,12 @@
 import { Host, h } from '@stencil/core';
 import { MessageEventType } from './message-event-types';
 import packageJson from '../../../package.json';
+import getComputedTheme from './get-computed-theme';
 export class PaymentMethodForm {
   constructor() {
+    this.computedTheme = getComputedTheme();
     this.paymentMethodFormType = undefined;
-    this.paymentMethodFormValidationStrategy = undefined;
-    this.paymentMethodStyleOverrides = undefined;
+    this.paymentMethodFormValidationMode = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
     this.height = 55;
@@ -20,8 +21,8 @@ export class PaymentMethodForm {
     this.sendStyleOverrides();
   }
   sendStyleOverrides() {
-    if (this.paymentMethodStyleOverrides) {
-      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.paymentMethodStyleOverrides });
+    if (this.computedTheme) {
+      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
     }
   }
   dispatchMessageEvent(messageEvent) {
@@ -84,8 +85,8 @@ export class PaymentMethodForm {
     const iframeOrigin = this.iframeOrigin || productionIframeOrigin;
     let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
     let paramsList = [];
-    if (this.paymentMethodFormValidationStrategy) {
-      paramsList.push(`validationMode=${this.paymentMethodFormValidationStrategy}`);
+    if (this.paymentMethodFormValidationMode) {
+      paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);
     }
     if (this.singleLine) {
       paramsList.push(`singleLine=${this.singleLine}`);
@@ -125,7 +126,7 @@ export class PaymentMethodForm {
         "attribute": "payment-method-form-type",
         "reflect": false
       },
-      "paymentMethodFormValidationStrategy": {
+      "paymentMethodFormValidationMode": {
         "type": "string",
         "mutable": true,
         "complexType": {
@@ -139,29 +140,9 @@ export class PaymentMethodForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "payment-method-form-validation-strategy",
+        "attribute": "payment-method-form-validation-mode",
         "reflect": false
       },
-      "paymentMethodStyleOverrides": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Theme | undefined",
-          "resolved": "Theme",
-          "references": {
-            "Theme": {
-              "location": "import",
-              "path": "./theme"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
       "iframeOrigin": {
         "type": "string",
         "mutable": false,
@@ -281,10 +262,4 @@ export class PaymentMethodForm {
       }
     };
   }
-  static get watchers() {
-    return [{
-        "propName": "paymentMethodStyleOverrides",
-        "methodName": "sendStyleOverrides"
-      }];
-  }
 }

package/dist/collection/components/select-input/select-input.js

@@ -15,7 +15,7 @@ export class SelectInput {
   }
   ;
   render() {
-    return (h(Host, null, h("label", { class: "form-label" }, this.label), h("select", { name: this.name, onInput: (event) => this.onInput(event), class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map((option) => h("option", { value: option.value }, option.label))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    return (h(Host, { exportparts: "input,label" }, h("label", { part: "label", class: "form-label" }, this.label), h("select", { name: this.name, onInput: (event) => this.onInput(event), part: "input", class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map((option) => h("option", { value: option.value }, option.label))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
   }
   static get is() { return "select-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-input/text-input.js

@@ -14,7 +14,7 @@ export class TextInput {
   }
   ;
   render() {
-    return (h(Host, null, h("label", { class: "form-label" }, this.label), h("input", { name: this.name, type: "text", onInput: (event) => this.onInput(event), value: this.internalValue || this.defaultValue, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    return (h(Host, { exportparts: "input,label" }, h("label", { part: "label", class: "form-label" }, this.label), h("input", { name: this.name, type: "text", onInput: (event) => this.onInput(event), value: this.internalValue || this.defaultValue, part: "input", class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
   }
   static get is() { return "text-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/components/billing-form.js

@@ -2150,7 +2150,7 @@ const BillingForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.billingFields;
   }
   render() {
-    return (h(Host, null, h("fieldset", null, this.legend && this.legendBlock, h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("text-input", { name: "address_line1", label: "Street Address", defaultValue: this.billingFields.address_line1, error: this.billingFieldsErrors.address_line1 })), h("div", { class: "col-12" }, h("text-input", { name: "address_line2", label: "Apartment, Suite, etc. (optional)", defaultValue: this.billingFields.address_line2, error: this.billingFieldsErrors.address_line2 })), h("div", { class: "col-12" }, h("text-input", { name: "address_city", label: "City", defaultValue: this.billingFields.address_city, error: this.billingFieldsErrors.address_city })), h("div", { class: "col-12" }, h("select-input", { name: "address_state", label: "State", options: StateOptions, defaultValue: this.billingFields.address_state, error: this.billingFieldsErrors.address_state })), h("div", { class: "col-12" }, h("text-input", { name: "address_postal_code", label: "ZIP", defaultValue: this.billingFields.address_postal_code, error: this.billingFieldsErrors.address_postal_code }))))));
+    return (h(Host, { exportparts: "input,label" }, h("fieldset", null, this.legend && this.legendBlock, h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("text-input", { name: "address_line1", label: "Street Address", defaultValue: this.billingFields.address_line1, error: this.billingFieldsErrors.address_line1 })), h("div", { class: "col-12" }, h("text-input", { name: "address_line2", label: "Apartment, Suite, etc. (optional)", defaultValue: this.billingFields.address_line2, error: this.billingFieldsErrors.address_line2 })), h("div", { class: "col-12" }, h("text-input", { name: "address_city", label: "City", defaultValue: this.billingFields.address_city, error: this.billingFieldsErrors.address_city })), h("div", { class: "col-12" }, h("select-input", { name: "address_state", label: "State", options: StateOptions, defaultValue: this.billingFields.address_state, error: this.billingFieldsErrors.address_state })), h("div", { class: "col-12" }, h("text-input", { name: "address_postal_code", label: "ZIP", defaultValue: this.billingFields.address_postal_code, error: this.billingFieldsErrors.address_postal_code }))))));
   }
   static get style() { return billingFormCss; }
 }, [1, "justifi-billing-form", {

package/dist/components/justifi-bank-account-form.js

@@ -8,10 +8,9 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.bankAccountFormReady = createEvent(this, "bankAccountFormReady", 7);
     this.bankAccountFormTokenize = createEvent(this, "bankAccountFormTokenize", 7);
     this.bankAccountFormValidate = createEvent(this, "bankAccountFormValidate", 7);
-    this.validationStrategy = undefined;
+    this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
-    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
@@ -22,15 +21,6 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   validateHandler(event) {
     this.bankAccountFormValidate.emit(event);
   }
-  componentWillLoad() {
-    this.parseStyleOverrides();
-  }
-  parseStyleOverrides() {
-    if (this.styleOverrides) {
-      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
-      this.internalStyleOverrides = parsedStyleOverrides;
-    }
-  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -48,16 +38,12 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         if (el) {
           this.childRef = el;
         }
-      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-mode": this.validationMode || 'onSubmit' }));
   }
-  static get watchers() { return {
-    "styleOverrides": ["parseStyleOverrides"]
-  }; }
 }, [0, "justifi-bank-account-form", {
-    "validationStrategy": [1025, "validation-strategy"],
+    "validationMode": [1025, "validation-mode"],
     "styleOverrides": [1025, "style-overrides"],
     "iframeOrigin": [1025, "iframe-origin"],
-    "internalStyleOverrides": [32],
     "tokenize": [64],
     "validate": [64]
   }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"], [0, "paymentMethodFormValidate", "validateHandler"]]]);

package/dist/components/justifi-card-form.js

@@ -8,11 +8,9 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.cardFormReady = createEvent(this, "cardFormReady", 7);
     this.cardFormTokenize = createEvent(this, "cardFormTokenize", 7);
     this.cardFormValidate = createEvent(this, "cardFormValidate", 7);
-    this.validationStrategy = undefined;
-    this.styleOverrides = undefined;
+    this.validationMode = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
-    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -23,15 +21,6 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
-  componentWillLoad() {
-    this.parseStyleOverrides();
-  }
-  parseStyleOverrides() {
-    if (this.styleOverrides) {
-      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
-      this.internalStyleOverrides = parsedStyleOverrides;
-    }
-  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -49,17 +38,12 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         if (el) {
           this.childRef = el;
         }
-      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "card", "single-line": this.singleLine, "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "card", "single-line": this.singleLine, "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-mode": this.validationMode || 'onSubmit' }));
   }
-  static get watchers() { return {
-    "styleOverrides": ["parseStyleOverrides"]
-  }; }
 }, [0, "justifi-card-form", {
-    "validationStrategy": [1025, "validation-strategy"],
-    "styleOverrides": [1025, "style-overrides"],
+    "validationMode": [1025, "validation-mode"],
     "iframeOrigin": [1025, "iframe-origin"],
     "singleLine": [4, "single-line"],
-    "internalStyleOverrides": [32],
     "tokenize": [64],
     "validate": [64]
   }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"], [0, "paymentMethodFormValidate", "validateHandler"]]]);