@justifi/webcomponents 0.5.0 → 1.0.0

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### 1.0.0
+> 24 April 2023
+
+- Fix broken prop controller in Storybook UI for card-form component
+- rename variable `validationStrategy` and prop `validation-strategy` to `validationMode` and `validation-mode` respectively
+
+#### 0.6.1
+> 24 April 2023
+
+- Remove hardcoded `iframeOrigin` from `PaymentForm` story
+
 #### 0.6.0
 > 21 April 2023
 

package/dist/cjs/justifi-bank-account-form.cjs.entry.js

@@ -10,7 +10,7 @@ const BankAccountForm = class {
     this.bankAccountFormReady = index.createEvent(this, "bankAccountFormReady", 7);
     this.bankAccountFormTokenize = index.createEvent(this, "bankAccountFormTokenize", 7);
     this.bankAccountFormValidate = index.createEvent(this, "bankAccountFormValidate", 7);
-    this.validationStrategy = undefined;
+    this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.internalStyleOverrides = undefined;
@@ -50,7 +50,7 @@ const BankAccountForm = class {
         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', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get watchers() { return {
     "styleOverrides": ["parseStyleOverrides"]

package/dist/cjs/justifi-card-form.cjs.entry.js

@@ -10,7 +10,7 @@ const CardForm = class {
     this.cardFormReady = index.createEvent(this, "cardFormReady", 7);
     this.cardFormTokenize = index.createEvent(this, "cardFormTokenize", 7);
     this.cardFormValidate = index.createEvent(this, "cardFormValidate", 7);
-    this.validationStrategy = undefined;
+    this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
@@ -51,7 +51,7 @@ const CardForm = class {
         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', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get watchers() { return {
     "styleOverrides": ["parseStyleOverrides"]

package/dist/cjs/justifi-payment-method-form.cjs.entry.js

@@ -22,7 +22,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "0.5.0";
+const version = "1.0.0";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module$1 = "dist/index.js";
@@ -118,7 +118,7 @@ const PaymentMethodForm = class {
     this.paymentMethodFormReady = index.createEvent(this, "paymentMethodFormReady", 7);
     this.paymentMethodFormTokenize = index.createEvent(this, "paymentMethodFormTokenize", 7);
     this.paymentMethodFormType = undefined;
-    this.paymentMethodFormValidationStrategy = undefined;
+    this.paymentMethodFormValidationMode = undefined;
     this.paymentMethodStyleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
@@ -198,8 +198,8 @@ const PaymentMethodForm = class {
     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}`);

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["justifi-payment-form.cjs",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2.cjs",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1025,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return index.bootstrapLazy([["justifi-payment-form.cjs",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"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"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationMode":[1025,"validation-mode"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2.cjs",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationMode":[1025,"payment-method-form-validation-mode"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
   });
 };
 

package/dist/cjs/webcomponents.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["justifi-payment-form.cjs",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2.cjs",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1025,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return index.bootstrapLazy([["justifi-payment-form.cjs",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"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"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationMode":[1025,"validation-mode"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2.cjs",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationMode":[1025,"payment-method-form-validation-mode"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
 });

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

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
 export class BankAccountForm {
   constructor() {
-    this.validationStrategy = undefined;
+    this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.internalStyleOverrides = undefined;
@@ -41,12 +41,12 @@ export class BankAccountForm {
         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', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get is() { return "justifi-bank-account-form"; }
   static get properties() {
     return {
-      "validationStrategy": {
+      "validationMode": {
         "type": "string",
         "mutable": true,
         "complexType": {
@@ -60,7 +60,7 @@ export class BankAccountForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "validation-strategy",
+        "attribute": "validation-mode",
         "reflect": false
       },
       "styleOverrides": {

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

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
 export class CardForm {
   constructor() {
-    this.validationStrategy = undefined;
+    this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
@@ -42,12 +42,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', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get is() { return "justifi-card-form"; }
   static get properties() {
     return {
-      "validationStrategy": {
+      "validationMode": {
         "type": "string",
         "mutable": true,
         "complexType": {
@@ -61,7 +61,7 @@ export class CardForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "validation-strategy",
+        "attribute": "validation-mode",
         "reflect": false
       },
       "styleOverrides": {

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: [
@@ -91,16 +118,28 @@ const storyStyleOverrides = {
     "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 +155,7 @@ Embedded.decorators = [
 ];
 export const Styled = Template.bind({});
 Styled.args = {
-  styleOverrides: storyStyleOverrides
+  styleOverrides: storyStyleOverrides,
 };
 export const Completed = Template.bind({});
 Completed.play = async ({ canvasElement, step }) => {

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

@@ -13,8 +13,6 @@ const Template = (args) => {
       const paymentForm = document.querySelector('justifi-payment-form');
       const submitButton = document.querySelector('#submit-button');
 
-      paymentForm.iframeOrigin = 'http://localhost:3003/v2';
-
       submitButton?.addEventListener('click', async () => {
         const tokenizeResponse = await paymentForm.submit({
           clientId: '${args.clientId}',

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

@@ -4,7 +4,7 @@ import packageJson from '../../../package.json';
 export class PaymentMethodForm {
   constructor() {
     this.paymentMethodFormType = undefined;
-    this.paymentMethodFormValidationStrategy = undefined;
+    this.paymentMethodFormValidationMode = undefined;
     this.paymentMethodStyleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
@@ -84,8 +84,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 +125,7 @@ export class PaymentMethodForm {
         "attribute": "payment-method-form-type",
         "reflect": false
       },
-      "paymentMethodFormValidationStrategy": {
+      "paymentMethodFormValidationMode": {
         "type": "string",
         "mutable": true,
         "complexType": {
@@ -139,7 +139,7 @@ export class PaymentMethodForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "payment-method-form-validation-strategy",
+        "attribute": "payment-method-form-validation-mode",
         "reflect": false
       },
       "paymentMethodStyleOverrides": {

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

@@ -8,7 +8,7 @@ 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;
@@ -48,13 +48,13 @@ 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', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   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],

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

@@ -8,7 +8,7 @@ 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.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
@@ -49,13 +49,13 @@ 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', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get watchers() { return {
     "styleOverrides": ["parseStyleOverrides"]
   }; }
 }, [0, "justifi-card-form", {
-    "validationStrategy": [1025, "validation-strategy"],
+    "validationMode": [1025, "validation-mode"],
     "styleOverrides": [1025, "style-overrides"],
     "iframeOrigin": [1025, "iframe-origin"],
     "singleLine": [4, "single-line"],

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

@@ -18,7 +18,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "0.5.0";
+const version = "1.0.0";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module = "dist/index.js";
@@ -115,7 +115,7 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.paymentMethodFormReady = createEvent(this, "paymentMethodFormReady", 7);
     this.paymentMethodFormTokenize = createEvent(this, "paymentMethodFormTokenize", 7);
     this.paymentMethodFormType = undefined;
-    this.paymentMethodFormValidationStrategy = undefined;
+    this.paymentMethodFormValidationMode = undefined;
     this.paymentMethodStyleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
@@ -195,8 +195,8 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     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}`);
@@ -212,7 +212,7 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   static get style() { return paymentMethodFormCss; }
 }, [0, "justifi-payment-method-form", {
     "paymentMethodFormType": [1, "payment-method-form-type"],
-    "paymentMethodFormValidationStrategy": [1025, "payment-method-form-validation-strategy"],
+    "paymentMethodFormValidationMode": [1025, "payment-method-form-validation-mode"],
     "paymentMethodStyleOverrides": [16],
     "iframeOrigin": [1, "iframe-origin"],
     "singleLine": [4, "single-line"],

package/dist/esm/justifi-bank-account-form.entry.js

@@ -6,7 +6,7 @@ const BankAccountForm = class {
     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;
@@ -46,7 +46,7 @@ const BankAccountForm = class {
         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', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get watchers() { return {
     "styleOverrides": ["parseStyleOverrides"]

package/dist/esm/justifi-card-form.entry.js

@@ -6,7 +6,7 @@ const CardForm = class {
     this.cardFormReady = createEvent(this, "cardFormReady", 7);
     this.cardFormTokenize = createEvent(this, "cardFormTokenize", 7);
     this.cardFormValidate = createEvent(this, "cardFormValidate", 7);
-    this.validationStrategy = undefined;
+    this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
@@ -47,7 +47,7 @@ const CardForm = class {
         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', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get watchers() { return {
     "styleOverrides": ["parseStyleOverrides"]

package/dist/esm/justifi-payment-method-form.entry.js

@@ -18,7 +18,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "0.5.0";
+const version = "1.0.0";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module = "dist/index.js";
@@ -114,7 +114,7 @@ const PaymentMethodForm = class {
     this.paymentMethodFormReady = createEvent(this, "paymentMethodFormReady", 7);
     this.paymentMethodFormTokenize = createEvent(this, "paymentMethodFormTokenize", 7);
     this.paymentMethodFormType = undefined;
-    this.paymentMethodFormValidationStrategy = undefined;
+    this.paymentMethodFormValidationMode = undefined;
     this.paymentMethodStyleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
@@ -194,8 +194,8 @@ const PaymentMethodForm = class {
     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}`);

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["justifi-payment-form",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1025,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return bootstrapLazy([["justifi-payment-form",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"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"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationMode":[1025,"validation-mode"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationMode":[1025,"payment-method-form-validation-mode"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
   });
 };
 

package/dist/esm/webcomponents.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["justifi-payment-form",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1025,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return bootstrapLazy([["justifi-payment-form",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form",[[0,"justifi-bank-account-form",{"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"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationMode":[1025,"validation-mode"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationMode":[1025,"payment-method-form-validation-mode"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"singleLine":[4,"single-line"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
 });

package/dist/types/components/bank-account-form/bank-account-form.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Theme } from '../payment-method-form/theme';
 export declare class BankAccountForm {
-  validationStrategy: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+  validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
   styleOverrides?: string;
   iframeOrigin?: string;
   internalStyleOverrides: Theme;

package/dist/types/components/card-form/card-form.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Theme } from '../payment-method-form/theme';
 export declare class CardForm {
-  validationStrategy: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+  validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
   styleOverrides?: string;
   iframeOrigin?: string;
   singleLine: boolean;

package/dist/types/components/card-form/card-form.stories.d.ts

@@ -1,6 +1,35 @@
 declare const _default: {
   title: string;
   component: string;
+  argTypes: {
+    iframeOrigin: {
+      control: string;
+      table: {
+        category: string;
+      };
+    };
+    singleLine: {
+      control: string;
+      table: {
+        category: string;
+      };
+    };
+    styleOverrides: {
+      control: string;
+      table: {
+        category: string;
+      };
+    };
+    validationMode: {
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        category: string;
+      };
+    };
+  };
   parameters: {
     actions: {
       handles: string[];

package/dist/types/components/payment-method-form/payment-method-form.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { Theme } from './theme';
 export declare class PaymentMethodForm {
   paymentMethodFormType: 'card' | 'bankAccount';
-  paymentMethodFormValidationStrategy: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+  paymentMethodFormValidationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
   paymentMethodStyleOverrides: Theme | undefined;
   iframeOrigin?: string;
   singleLine: boolean;

package/dist/types/components.d.ts

@@ -15,7 +15,7 @@ export namespace Components {
         "styleOverrides"?: string;
         "tokenize": (clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
         "validate": () => Promise<any>;
-        "validationStrategy": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "validationMode": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiBillingForm {
         "fill": (fields: BillingFormFields) => Promise<void>;
@@ -29,7 +29,7 @@ export namespace Components {
         "styleOverrides"?: string;
         "tokenize": (clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
         "validate": () => Promise<any>;
-        "validationStrategy": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "validationMode": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiPaymentForm {
         "bankAccount"?: boolean;
@@ -41,7 +41,7 @@ export namespace Components {
     interface JustifiPaymentMethodForm {
         "iframeOrigin"?: string;
         "paymentMethodFormType": 'card' | 'bankAccount';
-        "paymentMethodFormValidationStrategy": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "paymentMethodFormValidationMode": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
         "paymentMethodStyleOverrides": Theme | undefined;
         "singleLine": boolean;
         "tokenize": (clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
@@ -167,7 +167,7 @@ declare namespace LocalJSX {
         "onBankAccountFormTokenize"?: (event: JustifiBankAccountFormCustomEvent<{ data: any }>) => void;
         "onBankAccountFormValidate"?: (event: JustifiBankAccountFormCustomEvent<{ data: { isValid: boolean } }>) => void;
         "styleOverrides"?: string;
-        "validationStrategy"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "validationMode"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiBillingForm {
         "legend"?: string;
@@ -179,7 +179,7 @@ declare namespace LocalJSX {
         "onCardFormValidate"?: (event: JustifiCardFormCustomEvent<{ data: { isValid: boolean } }>) => void;
         "singleLine"?: boolean;
         "styleOverrides"?: string;
-        "validationStrategy"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "validationMode"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiPaymentForm {
         "bankAccount"?: boolean;
@@ -191,7 +191,7 @@ declare namespace LocalJSX {
         "onPaymentMethodFormReady"?: (event: JustifiPaymentMethodFormCustomEvent<any>) => void;
         "onPaymentMethodFormTokenize"?: (event: JustifiPaymentMethodFormCustomEvent<{ data: any }>) => void;
         "paymentMethodFormType"?: 'card' | 'bankAccount';
-        "paymentMethodFormValidationStrategy"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "paymentMethodFormValidationMode"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
         "paymentMethodStyleOverrides"?: Theme | undefined;
         "singleLine"?: boolean;
     }

package/dist/webcomponents/p-72eafd07.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as i}from"./p-9a8abfcb.js";const r=class{constructor(i){t(this,i),this.bankAccountFormReady=e(this,"bankAccountFormReady",7),this.bankAccountFormTokenize=e(this,"bankAccountFormTokenize",7),this.bankAccountFormValidate=e(this,"bankAccountFormValidate",7),this.validationMode=void 0,this.styleOverrides=void 0,this.iframeOrigin=void 0,this.internalStyleOverrides=void 0}readyHandler(t){this.bankAccountFormReady.emit(t)}tokenizeHandler(t){this.bankAccountFormTokenize.emit(t)}validateHandler(t){this.bankAccountFormValidate.emit(t)}componentWillLoad(){this.parseStyleOverrides()}parseStyleOverrides(){if(this.styleOverrides){const t=JSON.parse(this.styleOverrides);this.internalStyleOverrides=t}}async tokenize(...t){if(!this.childRef)throw new Error("Cannot call tokenize");return this.childRef.tokenize(...t)}async validate(){if(!this.childRef)throw new Error("Cannot call validate");return this.childRef.validate()}render(){return i("justifi-payment-method-form",{ref:t=>{t&&(this.childRef=t)},"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",paymentMethodStyleOverrides:this.internalStyleOverrides})}static get watchers(){return{styleOverrides:["parseStyleOverrides"]}}};export{r as justifi_bank_account_form}

package/dist/webcomponents/p-a9df9278.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as e}from"./p-9a8abfcb.js";const r=class{constructor(e){t(this,e),this.cardFormReady=i(this,"cardFormReady",7),this.cardFormTokenize=i(this,"cardFormTokenize",7),this.cardFormValidate=i(this,"cardFormValidate",7),this.validationMode=void 0,this.styleOverrides=void 0,this.iframeOrigin=void 0,this.singleLine=void 0,this.internalStyleOverrides=void 0}readyHandler(t){this.cardFormReady.emit(t)}tokenizeHandler(t){this.cardFormTokenize.emit(t)}validateHandler(t){this.cardFormValidate.emit(t)}componentWillLoad(){this.parseStyleOverrides()}parseStyleOverrides(){if(this.styleOverrides){const t=JSON.parse(this.styleOverrides);this.internalStyleOverrides=t}}async tokenize(...t){if(!this.childRef)throw new Error("Cannot call tokenize");return this.childRef.tokenize(...t)}async validate(){if(!this.childRef)throw new Error("Cannot call validate");return this.childRef.validate()}render(){return e("justifi-payment-method-form",{ref:t=>{t&&(this.childRef=t)},"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",paymentMethodStyleOverrides:this.internalStyleOverrides})}static get watchers(){return{styleOverrides:["parseStyleOverrides"]}}};export{r as justifi_card_form}

package/dist/webcomponents/p-d71908ff.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as i,H as s}from"./p-9a8abfcb.js";const a={card:{ready:"justifi.card.ready",tokenize:"justifi.card.tokenize",validate:"justifi.card.validate",resize:"justifi.card.resize",styleOverrides:"justifi.card.styleOverrides"},bankAccount:{ready:"justifi.bankAccount.ready",tokenize:"justifi.bankAccount.tokenize",validate:"justifi.bankAccount.validate",resize:"justifi.bankAccount.resize",styleOverrides:"justifi.bankAccount.styleOverrides"}},r=class{constructor(i){t(this,i),this.paymentMethodFormReady=e(this,"paymentMethodFormReady",7),this.paymentMethodFormTokenize=e(this,"paymentMethodFormTokenize",7),this.paymentMethodFormType=void 0,this.paymentMethodFormValidationMode=void 0,this.paymentMethodStyleOverrides=void 0,this.iframeOrigin=void 0,this.singleLine=void 0,this.height=55}connectedCallback(){window.addEventListener("message",this.dispatchMessageEvent.bind(this))}disconnectedCallback(){window.removeEventListener("message",this.dispatchMessageEvent.bind(this))}componentShouldUpdate(){this.sendStyleOverrides()}sendStyleOverrides(){this.paymentMethodStyleOverrides&&this.postMessage(a[this.paymentMethodFormType].styleOverrides,{styleOverrides:this.paymentMethodStyleOverrides})}dispatchMessageEvent(t){const e=t.data,i=e.eventType,s=e.data;i===a[this.paymentMethodFormType].ready&&this.paymentMethodFormReady.emit(s),i===a[this.paymentMethodFormType].resize&&(this.height=s.height)}postMessage(t,e){this.iframeElement&&this.iframeElement.contentWindow.postMessage(Object.assign({eventType:t},e),"*")}async postMessageWithResponseListener(t,e){return new Promise((i=>{const s=e=>{e.data.eventType===t&&(window.removeEventListener("message",s),i(e.data.data))};window.addEventListener("message",s),this.postMessage(t,e)}))}async tokenize(t,e,i){return this.postMessageWithResponseListener(a[this.paymentMethodFormType].tokenize,{clientId:t,componentVersion:"1.0.0",paymentMethodMetadata:e,account:i})}async validate(){return this.postMessageWithResponseListener(a[this.paymentMethodFormType].validate)}composeQueryParams(t){return t.map((e=>e===t[0]?`?${e}`:`&${e}`)).join("")}getIframeSrc(){let t=`${this.iframeOrigin||"https://js.justifi.ai/v2"}/${this.paymentMethodFormType}`,e=[];return this.paymentMethodFormValidationMode&&e.push(`validationMode=${this.paymentMethodFormValidationMode}`),this.singleLine&&e.push(`singleLine=${this.singleLine}`),t.concat(this.composeQueryParams(e))}render(){return i(s,null,i("iframe",{id:`justifi-payment-method-form-${this.paymentMethodFormType}`,src:this.getIframeSrc(),ref:t=>this.iframeElement=t,height:this.height}))}static get watchers(){return{paymentMethodStyleOverrides:["sendStyleOverrides"]}}};r.style=":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";export{r as justifi_payment_method_form}

package/dist/webcomponents/webcomponents.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-9a8abfcb.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-81e20318",[[1,"justifi-payment-form",{bankAccount:[4,"bank-account"],card:[4],iframeOrigin:[1,"iframe-origin"],selectedPaymentMethodType:[32],allowedPaymentMethodTypes:[32],fillBillingForm:[64],submit:[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["p-5aec1d06",[[0,"justifi-bank-account-form",{validationStrategy:[1025,"validation-strategy"],styleOverrides:[1025,"style-overrides"],iframeOrigin:[1025,"iframe-origin"],internalStyleOverrides:[32],tokenize:[64],validate:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-1c7556c1",[[0,"justifi-card-form",{validationStrategy:[1025,"validation-strategy"],styleOverrides:[1025,"style-overrides"],iframeOrigin:[1025,"iframe-origin"],singleLine:[4,"single-line"],internalStyleOverrides:[32],tokenize:[64],validate:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-f25081d7",[[1,"justifi-payments-list",{accountId:[1,"account-id"],auth:[16],payments:[32]}]]],["p-ad6ad202",[[1,"select-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],options:[16],internalValue:[32]}],[1,"text-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],internalValue:[32]}]]],["p-8f9a69d2",[[1,"justifi-billing-form",{legend:[1],billingFields:[32],billingFieldsErrors:[32],fill:[64],validate:[64],getValues:[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{paymentMethodTypes:[16],selectedPaymentMethodType:[1,"selected-payment-method-type"]}]]],["p-1e59f98e",[[0,"justifi-payment-method-form",{paymentMethodFormType:[1,"payment-method-form-type"],paymentMethodFormValidationStrategy:[1025,"payment-method-form-validation-strategy"],paymentMethodStyleOverrides:[16],iframeOrigin:[1,"iframe-origin"],singleLine:[4,"single-line"],height:[32],tokenize:[64],validate:[64]}]]]],e)));
+import{p as e,b as t}from"./p-9a8abfcb.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-81e20318",[[1,"justifi-payment-form",{bankAccount:[4,"bank-account"],card:[4],iframeOrigin:[1,"iframe-origin"],selectedPaymentMethodType:[32],allowedPaymentMethodTypes:[32],fillBillingForm:[64],submit:[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["p-72eafd07",[[0,"justifi-bank-account-form",{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"]]]]],["p-a9df9278",[[0,"justifi-card-form",{validationMode:[1025,"validation-mode"],styleOverrides:[1025,"style-overrides"],iframeOrigin:[1025,"iframe-origin"],singleLine:[4,"single-line"],internalStyleOverrides:[32],tokenize:[64],validate:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-f25081d7",[[1,"justifi-payments-list",{accountId:[1,"account-id"],auth:[16],payments:[32]}]]],["p-ad6ad202",[[1,"select-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],options:[16],internalValue:[32]}],[1,"text-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],internalValue:[32]}]]],["p-8f9a69d2",[[1,"justifi-billing-form",{legend:[1],billingFields:[32],billingFieldsErrors:[32],fill:[64],validate:[64],getValues:[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{paymentMethodTypes:[16],selectedPaymentMethodType:[1,"selected-payment-method-type"]}]]],["p-d71908ff",[[0,"justifi-payment-method-form",{paymentMethodFormType:[1,"payment-method-form-type"],paymentMethodFormValidationMode:[1025,"payment-method-form-validation-mode"],paymentMethodStyleOverrides:[16],iframeOrigin:[1,"iframe-origin"],singleLine:[4,"single-line"],height:[32],tokenize:[64],validate:[64]}]]]],e)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justifi/webcomponents",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "JustiFi Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -69,4 +69,4 @@
     "storybook": "^7.0.4"
   },
   "license": "MIT"
-}
+}

package/dist/webcomponents/p-1c7556c1.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as e}from"./p-9a8abfcb.js";const r=class{constructor(e){t(this,e),this.cardFormReady=i(this,"cardFormReady",7),this.cardFormTokenize=i(this,"cardFormTokenize",7),this.cardFormValidate=i(this,"cardFormValidate",7),this.validationStrategy=void 0,this.styleOverrides=void 0,this.iframeOrigin=void 0,this.singleLine=void 0,this.internalStyleOverrides=void 0}readyHandler(t){this.cardFormReady.emit(t)}tokenizeHandler(t){this.cardFormTokenize.emit(t)}validateHandler(t){this.cardFormValidate.emit(t)}componentWillLoad(){this.parseStyleOverrides()}parseStyleOverrides(){if(this.styleOverrides){const t=JSON.parse(this.styleOverrides);this.internalStyleOverrides=t}}async tokenize(...t){if(!this.childRef)throw new Error("Cannot call tokenize");return this.childRef.tokenize(...t)}async validate(){if(!this.childRef)throw new Error("Cannot call validate");return this.childRef.validate()}render(){return e("justifi-payment-method-form",{ref:t=>{t&&(this.childRef=t)},"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})}static get watchers(){return{styleOverrides:["parseStyleOverrides"]}}};export{r as justifi_card_form}

package/dist/webcomponents/p-1e59f98e.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as i,H as s}from"./p-9a8abfcb.js";const a={card:{ready:"justifi.card.ready",tokenize:"justifi.card.tokenize",validate:"justifi.card.validate",resize:"justifi.card.resize",styleOverrides:"justifi.card.styleOverrides"},bankAccount:{ready:"justifi.bankAccount.ready",tokenize:"justifi.bankAccount.tokenize",validate:"justifi.bankAccount.validate",resize:"justifi.bankAccount.resize",styleOverrides:"justifi.bankAccount.styleOverrides"}},r=class{constructor(i){t(this,i),this.paymentMethodFormReady=e(this,"paymentMethodFormReady",7),this.paymentMethodFormTokenize=e(this,"paymentMethodFormTokenize",7),this.paymentMethodFormType=void 0,this.paymentMethodFormValidationStrategy=void 0,this.paymentMethodStyleOverrides=void 0,this.iframeOrigin=void 0,this.singleLine=void 0,this.height=55}connectedCallback(){window.addEventListener("message",this.dispatchMessageEvent.bind(this))}disconnectedCallback(){window.removeEventListener("message",this.dispatchMessageEvent.bind(this))}componentShouldUpdate(){this.sendStyleOverrides()}sendStyleOverrides(){this.paymentMethodStyleOverrides&&this.postMessage(a[this.paymentMethodFormType].styleOverrides,{styleOverrides:this.paymentMethodStyleOverrides})}dispatchMessageEvent(t){const e=t.data,i=e.eventType,s=e.data;i===a[this.paymentMethodFormType].ready&&this.paymentMethodFormReady.emit(s),i===a[this.paymentMethodFormType].resize&&(this.height=s.height)}postMessage(t,e){this.iframeElement&&this.iframeElement.contentWindow.postMessage(Object.assign({eventType:t},e),"*")}async postMessageWithResponseListener(t,e){return new Promise((i=>{const s=e=>{e.data.eventType===t&&(window.removeEventListener("message",s),i(e.data.data))};window.addEventListener("message",s),this.postMessage(t,e)}))}async tokenize(t,e,i){return this.postMessageWithResponseListener(a[this.paymentMethodFormType].tokenize,{clientId:t,componentVersion:"0.5.0",paymentMethodMetadata:e,account:i})}async validate(){return this.postMessageWithResponseListener(a[this.paymentMethodFormType].validate)}composeQueryParams(t){return t.map((e=>e===t[0]?`?${e}`:`&${e}`)).join("")}getIframeSrc(){let t=`${this.iframeOrigin||"https://js.justifi.ai/v2"}/${this.paymentMethodFormType}`,e=[];return this.paymentMethodFormValidationStrategy&&e.push(`validationMode=${this.paymentMethodFormValidationStrategy}`),this.singleLine&&e.push(`singleLine=${this.singleLine}`),t.concat(this.composeQueryParams(e))}render(){return i(s,null,i("iframe",{id:`justifi-payment-method-form-${this.paymentMethodFormType}`,src:this.getIframeSrc(),ref:t=>this.iframeElement=t,height:this.height}))}static get watchers(){return{paymentMethodStyleOverrides:["sendStyleOverrides"]}}};r.style=":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";export{r as justifi_payment_method_form}

package/dist/webcomponents/p-5aec1d06.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as i}from"./p-9a8abfcb.js";const r=class{constructor(i){t(this,i),this.bankAccountFormReady=e(this,"bankAccountFormReady",7),this.bankAccountFormTokenize=e(this,"bankAccountFormTokenize",7),this.bankAccountFormValidate=e(this,"bankAccountFormValidate",7),this.validationStrategy=void 0,this.styleOverrides=void 0,this.iframeOrigin=void 0,this.internalStyleOverrides=void 0}readyHandler(t){this.bankAccountFormReady.emit(t)}tokenizeHandler(t){this.bankAccountFormTokenize.emit(t)}validateHandler(t){this.bankAccountFormValidate.emit(t)}componentWillLoad(){this.parseStyleOverrides()}parseStyleOverrides(){if(this.styleOverrides){const t=JSON.parse(this.styleOverrides);this.internalStyleOverrides=t}}async tokenize(...t){if(!this.childRef)throw new Error("Cannot call tokenize");return this.childRef.tokenize(...t)}async validate(){if(!this.childRef)throw new Error("Cannot call validate");return this.childRef.validate()}render(){return i("justifi-payment-method-form",{ref:t=>{t&&(this.childRef=t)},"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})}static get watchers(){return{styleOverrides:["parseStyleOverrides"]}}};export{r as justifi_bank_account_form}