@justifi/webcomponents 2.0.1 → 2.0.2

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

@@ -13,6 +13,7 @@ const BankAccountForm = class {
     this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
@@ -23,12 +24,18 @@ const BankAccountForm = class {
   validateHandler(event) {
     this.bankAccountFormValidate.emit(event);
   }
+  /**
+   *  Makes a tokenization request to the iframe
+  */
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  /**
+   *  Runs a validation on the form and shows errors if any
+  */
   async validate() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');

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

@@ -12,7 +12,8 @@ const CardForm = class {
     this.cardFormValidate = index.createEvent(this, "cardFormValidate", 7);
     this.validationMode = undefined;
     this.iframeOrigin = undefined;
-    this.singleLine = undefined;
+    this.singleLine = false;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -23,12 +24,18 @@ const CardForm = class {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
+  /**
+   *  Makes a tokenization request to the iframe
+  */
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  /**
+   *  Runs a validation on the form and shows errors if any
+  */
   async validate() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');

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

@@ -22,7 +22,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "2.0.1";
+const version = "2.0.2";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module$1 = "dist/index.js";

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",{"validationMode":[1025,"validation-mode"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"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"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"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"],"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"],"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"],"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",{"validationMode":[1025,"validation-mode"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"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"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"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"],"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"],"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"],"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

@@ -4,6 +4,7 @@ export class BankAccountForm {
     this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
@@ -14,12 +15,18 @@ export class BankAccountForm {
   validateHandler(event) {
     this.bankAccountFormValidate.emit(event);
   }
+  /**
+   *  Makes a tokenization request to the iframe
+  */
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  /**
+   *  Runs a validation on the form and shows errors if any
+  */
   async validate() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');
@@ -48,7 +55,7 @@ export class BankAccountForm {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "When to trigger validation of the form."
         },
         "attribute": "validation-mode",
         "reflect": false
@@ -65,7 +72,7 @@ export class BankAccountForm {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "JSON formatted styles"
         },
         "attribute": "style-overrides",
         "reflect": false
@@ -82,13 +89,18 @@ export class BankAccountForm {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "URL for the rendered iFrame. End-users need not use this."
         },
         "attribute": "iframe-origin",
         "reflect": false
       }
     };
   }
+  static get states() {
+    return {
+      "internalStyleOverrides": {}
+    };
+  }
   static get events() {
     return [{
         "method": "bankAccountFormReady",
@@ -97,8 +109,11 @@ export class BankAccountForm {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "event",
+              "text": "justifi-bank-account-form#bankAccountFormReady"
+            }],
+          "text": "Triggered when iframe has loaded"
         },
         "complexType": {
           "original": "any",
@@ -112,8 +127,11 @@ export class BankAccountForm {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "event",
+              "text": "justifi-bank-account-form#bankAccountFormTokenize"
+            }],
+          "text": "Triggered when the tokenize method is called on the component"
         },
         "complexType": {
           "original": "{ data: any }",
@@ -127,8 +145,11 @@ export class BankAccountForm {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "event",
+              "text": "justifi-bank-account-form#bankAccountFormValidate"
+            }],
+          "text": "Triggered when the validate method is called on the component"
         },
         "complexType": {
           "original": "{ data: { isValid: boolean } }",
@@ -160,7 +181,7 @@ export class BankAccountForm {
           "return": "Promise<any>"
         },
         "docs": {
-          "text": "",
+          "text": "Makes a tokenization request to the iframe",
           "tags": []
         }
       },
@@ -176,7 +197,7 @@ export class BankAccountForm {
           "return": "Promise<any>"
         },
         "docs": {
-          "text": "",
+          "text": "Runs a validation on the form and shows errors if any",
           "tags": []
         }
       }

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

@@ -3,7 +3,8 @@ export class CardForm {
   constructor() {
     this.validationMode = undefined;
     this.iframeOrigin = undefined;
-    this.singleLine = undefined;
+    this.singleLine = false;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -14,12 +15,18 @@ export class CardForm {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
+  /**
+   *  Makes a tokenization request to the iframe
+  */
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  /**
+   *  Runs a validation on the form and shows errors if any
+  */
   async validate() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');
@@ -48,7 +55,7 @@ export class CardForm {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "When to trigger validation of the form."
         },
         "attribute": "validation-mode",
         "reflect": false
@@ -65,7 +72,7 @@ export class CardForm {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "URL for the rendered iFrame. End-users need not use this."
         },
         "attribute": "iframe-origin",
         "reflect": false
@@ -82,13 +89,19 @@ export class CardForm {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Boolean indicating if the Card Form should render in a single line"
         },
         "attribute": "single-line",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "internalStyleOverrides": {}
+    };
+  }
   static get events() {
     return [{
         "method": "cardFormReady",
@@ -97,8 +110,11 @@ export class CardForm {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "event",
+              "text": "justifi-card-form#cardFormReady"
+            }],
+          "text": "Triggered when iframe has loaded"
         },
         "complexType": {
           "original": "any",
@@ -112,8 +128,11 @@ export class CardForm {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "event",
+              "text": "justifi-card-form#cardFormTokenize"
+            }],
+          "text": "Triggered when the tokenize method is called on the component"
         },
         "complexType": {
           "original": "{ data: any }",
@@ -127,8 +146,11 @@ export class CardForm {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "event",
+              "text": "justifi-card-form#cardFormTokenize"
+            }],
+          "text": "Triggered when the validate method is called on the component"
         },
         "complexType": {
           "original": "{ data: { isValid: boolean } }",
@@ -160,23 +182,23 @@ export class CardForm {
           "return": "Promise<any>"
         },
         "docs": {
-          "text": "",
+          "text": "Makes a tokenization request to the iframe",
           "tags": []
         }
       },
       "validate": {
         "complexType": {
-          "signature": "() => Promise<any>",
+          "signature": "() => Promise<{ isValid: boolean; }>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<any>"
+          "return": "Promise<{ isValid: boolean; }>"
         },
         "docs": {
-          "text": "",
+          "text": "Runs a validation on the form and shows errors if any",
           "tags": []
         }
       }

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

@@ -1,37 +1,17 @@
 import { userEvent, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
+const isDev = process.env.NODE_ENV === 'development';
 export default {
   title: 'Components/CardForm',
-  component: 'justifi-payment-method-form',
+  component: 'justifi-card-form',
   argTypes: {
-    iframeOrigin: {
+    'iframe-origin': {
       control: 'text',
       table: {
-        category: 'Props'
+        disable: isDev ? false : true,
+        category: 'props',
       }
     },
-    singleLine: {
-      control: 'boolean',
-      table: {
-        category: 'Props'
-      }
-    },
-    validationMode: {
-      control: { type: 'select' },
-      options: ['onSubmit', 'onBlur', 'onChange', 'onTouched', 'all'],
-      table: {
-        category: 'Props'
-      }
-    }
-  },
-  parameters: {
-    actions: {
-      handles: [
-        'cardFormReady',
-        'cardFormValidate',
-        'cardFormTokenize'
-      ],
-    },
   },
   decorators: [
     (story) => `
@@ -68,27 +48,28 @@ const FormButtons = `
     }
     .button-bar button {
       margin-right: 10px;
+      border-radius: 3px;
+      border: 1px solid black;
     }
   </style>
   <div class="button-bar">
     <button id="validate-btn">Validate</button>
     <button id="tokenize-btn">Tokenize</button>
-  </div>
-`;
+  </div>`;
 const Template = (args) => {
   const includeButtons = true;
   return (`
     <div>
       <style>
       :root {
-        ${args.cssVariables}
+        ${args['css-variables'] || ''}
       }
       </style>
-      <justifi-card-form 
-        data-testid="card-form-iframe" 
-        validation-mode='${args.validationMode || 'onSubmit'}'
-        iframe-origin='${args.iframeOrigin || ''}'
-        single-line='${args.singleLine}'
+      <justifi-card-form
+        data-testid="card-form-iframe"
+        validation-mode='${args['validation-mode'] || 'onSubmit'}'
+        iframe-origin='${args['iframe-origin'] || ''}'
+        single-line='${args['single-line']}'
       />
     </div>
     ${includeButtons ? FormButtons : ''}
@@ -96,23 +77,9 @@ const Template = (args) => {
 };
 export const Basic = Template.bind({});
 Basic.args = {
-  iframeOrigin: '',
-  singleLine: false,
-  validationMode: 'onSubmit'
+  'validation-mode': 'onSubmit',
+  'single-line': false,
 };
-export const Embedded = Template.bind({});
-Embedded.decorators = [
-  (story) => `
-    <style>
-      #wrapper {
-        background-color: #aaaaaa;
-      }
-    </style>
-    <div id="wrapper" style="width: 50%;">
-      ${story()}
-    </div>
-  `,
-];
 export const Styled = Template.bind({});
 Styled.args = {
   cssVariables: (`

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

@@ -11,6 +11,7 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
@@ -21,12 +22,18 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   validateHandler(event) {
     this.bankAccountFormValidate.emit(event);
   }
+  /**
+   *  Makes a tokenization request to the iframe
+  */
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  /**
+   *  Runs a validation on the form and shows errors if any
+  */
   async validate() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');
@@ -44,6 +51,7 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "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

@@ -10,7 +10,8 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.cardFormValidate = createEvent(this, "cardFormValidate", 7);
     this.validationMode = undefined;
     this.iframeOrigin = undefined;
-    this.singleLine = undefined;
+    this.singleLine = false;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -21,12 +22,18 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
+  /**
+   *  Makes a tokenization request to the iframe
+  */
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  /**
+   *  Runs a validation on the form and shows errors if any
+  */
   async validate() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');
@@ -44,6 +51,7 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "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"]]]);

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

@@ -18,7 +18,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "2.0.1";
+const version = "2.0.2";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module = "dist/index.js";

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

@@ -9,6 +9,7 @@ const BankAccountForm = class {
     this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
@@ -19,12 +20,18 @@ const BankAccountForm = class {
   validateHandler(event) {
     this.bankAccountFormValidate.emit(event);
   }
+  /**
+   *  Makes a tokenization request to the iframe
+  */
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  /**
+   *  Runs a validation on the form and shows errors if any
+  */
   async validate() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');

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

@@ -8,7 +8,8 @@ const CardForm = class {
     this.cardFormValidate = createEvent(this, "cardFormValidate", 7);
     this.validationMode = undefined;
     this.iframeOrigin = undefined;
-    this.singleLine = undefined;
+    this.singleLine = false;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -19,12 +20,18 @@ const CardForm = class {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
+  /**
+   *  Makes a tokenization request to the iframe
+  */
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
     }
     return this.childRef.tokenize(...args);
   }
+  /**
+   *  Runs a validation on the form and shows errors if any
+  */
   async validate() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');

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

@@ -18,7 +18,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "2.0.1";
+const version = "2.0.2";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module = "dist/index.js";

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",{"validationMode":[1025,"validation-mode"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationMode":[1025,"validation-mode"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"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"],"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"],"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"],"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",{"validationMode":[1025,"validation-mode"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form",[[0,"justifi-card-form",{"validationMode":[1025,"validation-mode"],"iframeOrigin":[1025,"iframe-origin"],"singleLine":[4,"single-line"],"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"],"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"],"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"],"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,12 +1,35 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Theme } from '../payment-method-form/theme';
 export declare class BankAccountForm {
+  /**
+   * When to trigger validation of the form.
+   */
   validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+  /**
+   * JSON formatted styles
+   */
   styleOverrides?: string;
+  /**
+   * URL for the rendered iFrame. End-users need not use this.
+   */
   iframeOrigin?: string;
-  bankAccountFormReady: EventEmitter;
+  internalStyleOverrides: Theme;
+  /**
+   * Triggered when iframe has loaded
+   * @event justifi-bank-account-form#bankAccountFormReady
+  */
+  bankAccountFormReady: EventEmitter<any>;
+  /**
+   * Triggered when the tokenize method is called on the component
+   * @event justifi-bank-account-form#bankAccountFormTokenize
+  */
   bankAccountFormTokenize: EventEmitter<{
     data: any;
   }>;
+  /**
+   * Triggered when the validate method is called on the component
+   * @event justifi-bank-account-form#bankAccountFormValidate
+  */
   bankAccountFormValidate: EventEmitter<{
     data: {
       isValid: boolean;
@@ -20,7 +43,13 @@ export declare class BankAccountForm {
     data: any;
   }): void;
   private childRef?;
+  /**
+   *  Makes a tokenization request to the iframe
+  */
   tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<any>;
+  /**
+   *  Runs a validation on the form and shows errors if any
+  */
   validate(): Promise<any>;
   render(): any;
 }

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

@@ -1,12 +1,35 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Theme } from '../payment-method-form/theme';
 export declare class CardForm {
+  /**
+   * When to trigger validation of the form.
+   */
   validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+  /**
+   * URL for the rendered iFrame. End-users need not use this.
+   */
   iframeOrigin?: string;
+  /**
+   * Boolean indicating if the Card Form should render in a single line
+   */
   singleLine: boolean;
+  internalStyleOverrides: Theme;
+  /**
+   * Triggered when iframe has loaded
+   * @event justifi-card-form#cardFormReady
+  */
   cardFormReady: EventEmitter;
+  /**
+   * Triggered when the tokenize method is called on the component
+   * @event justifi-card-form#cardFormTokenize
+  */
   cardFormTokenize: EventEmitter<{
     data: any;
   }>;
+  /**
+   * Triggered when the validate method is called on the component
+   * @event justifi-card-form#cardFormTokenize
+  */
   cardFormValidate: EventEmitter<{
     data: {
       isValid: boolean;
@@ -20,7 +43,15 @@ export declare class CardForm {
     data: any;
   }): void;
   private childRef?;
+  /**
+   *  Makes a tokenization request to the iframe
+  */
   tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<any>;
-  validate(): Promise<any>;
+  /**
+   *  Runs a validation on the form and shows errors if any
+  */
+  validate(): Promise<{
+    isValid: boolean;
+  }>;
   render(): any;
 }

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

@@ -2,37 +2,17 @@ declare const _default: {
   title: string;
   component: string;
   argTypes: {
-    iframeOrigin: {
+    'iframe-origin': {
       control: string;
       table: {
+        disable: boolean;
         category: string;
       };
     };
-    singleLine: {
-      control: string;
-      table: {
-        category: string;
-      };
-    };
-    validationMode: {
-      control: {
-        type: string;
-      };
-      options: string[];
-      table: {
-        category: string;
-      };
-    };
-  };
-  parameters: {
-    actions: {
-      handles: string[];
-    };
   };
   decorators: ((story: any) => string)[];
 };
 export default _default;
 export declare const Basic: any;
-export declare const Embedded: any;
 export declare const Styled: any;
 export declare const Completed: any;

package/dist/types/components.d.ts

@@ -10,10 +10,25 @@ import { ValidationError } from "yup";
 import { PaymentMethodTypes } from "./api";
 export namespace Components {
     interface JustifiBankAccountForm {
+        /**
+          * URL for the rendered iFrame. End-users need not use this.
+         */
         "iframeOrigin"?: string;
+        /**
+          * JSON formatted styles
+         */
         "styleOverrides"?: string;
+        /**
+          * Makes a tokenization request to the iframe
+         */
         "tokenize": (clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
+        /**
+          * Runs a validation on the form and shows errors if any
+         */
         "validate": () => Promise<any>;
+        /**
+          * When to trigger validation of the form.
+         */
         "validationMode": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiBillingForm {
@@ -23,10 +38,25 @@ export namespace Components {
         "validate": () => Promise<{ isValid: boolean; }>;
     }
     interface JustifiCardForm {
+        /**
+          * URL for the rendered iFrame. End-users need not use this.
+         */
         "iframeOrigin"?: string;
+        /**
+          * Boolean indicating if the Card Form should render in a single line
+         */
         "singleLine": boolean;
+        /**
+          * Makes a tokenization request to the iframe
+         */
         "tokenize": (clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
-        "validate": () => Promise<any>;
+        /**
+          * Runs a validation on the form and shows errors if any
+         */
+        "validate": () => Promise<{ isValid: boolean; }>;
+        /**
+          * When to trigger validation of the form.
+         */
         "validationMode": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiPaymentForm {
@@ -159,22 +189,64 @@ declare global {
 }
 declare namespace LocalJSX {
     interface JustifiBankAccountForm {
+        /**
+          * URL for the rendered iFrame. End-users need not use this.
+         */
         "iframeOrigin"?: string;
+        /**
+          * Triggered when iframe has loaded
+          * @event justifi-bank-account-form#bankAccountFormReady
+         */
         "onBankAccountFormReady"?: (event: JustifiBankAccountFormCustomEvent<any>) => void;
+        /**
+          * Triggered when the tokenize method is called on the component
+          * @event justifi-bank-account-form#bankAccountFormTokenize
+         */
         "onBankAccountFormTokenize"?: (event: JustifiBankAccountFormCustomEvent<{ data: any }>) => void;
+        /**
+          * Triggered when the validate method is called on the component
+          * @event justifi-bank-account-form#bankAccountFormValidate
+         */
         "onBankAccountFormValidate"?: (event: JustifiBankAccountFormCustomEvent<{ data: { isValid: boolean } }>) => void;
+        /**
+          * JSON formatted styles
+         */
         "styleOverrides"?: string;
+        /**
+          * When to trigger validation of the form.
+         */
         "validationMode"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiBillingForm {
         "legend"?: string;
     }
     interface JustifiCardForm {
+        /**
+          * URL for the rendered iFrame. End-users need not use this.
+         */
         "iframeOrigin"?: string;
+        /**
+          * Triggered when iframe has loaded
+          * @event justifi-card-form#cardFormReady
+         */
         "onCardFormReady"?: (event: JustifiCardFormCustomEvent<any>) => void;
+        /**
+          * Triggered when the tokenize method is called on the component
+          * @event justifi-card-form#cardFormTokenize
+         */
         "onCardFormTokenize"?: (event: JustifiCardFormCustomEvent<{ data: any }>) => void;
+        /**
+          * Triggered when the validate method is called on the component
+          * @event justifi-card-form#cardFormTokenize
+         */
         "onCardFormValidate"?: (event: JustifiCardFormCustomEvent<{ data: { isValid: boolean } }>) => void;
+        /**
+          * Boolean indicating if the Card Form should render in a single line
+         */
         "singleLine"?: boolean;
+        /**
+          * When to trigger validation of the form.
+         */
         "validationMode"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiPaymentForm {

package/dist/webcomponents/p-632dab44.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as o}from"./p-48c17d38.js";const e=class{constructor(o){t(this,o),this.bankAccountFormReady=i(this,"bankAccountFormReady",7),this.bankAccountFormTokenize=i(this,"bankAccountFormTokenize",7),this.bankAccountFormValidate=i(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)}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 o("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"})}};export{e as justifi_bank_account_form}

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

@@ -0,0 +1 @@
+import{r as t,c as i,h as e}from"./p-48c17d38.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.iframeOrigin=void 0,this.singleLine=!1,this.internalStyleOverrides=void 0}readyHandler(t){this.cardFormReady.emit(t)}tokenizeHandler(t){this.cardFormTokenize.emit(t)}validateHandler(t){this.cardFormValidate.emit(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"})}};export{r as justifi_card_form}

package/dist/webcomponents/{p-e3de1db1.entry.js → p-f7aa93bc.entry.js}

@@ -1 +1 @@
-import{r as o,c as r,h as t,H as i}from"./p-48c17d38.js";const e={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"}},s=class{constructor(t){o(this,t),this.paymentMethodFormReady=r(this,"paymentMethodFormReady",7),this.paymentMethodFormTokenize=r(this,"paymentMethodFormTokenize",7),this.computedTheme=(()=>{const o=getComputedStyle(document.body);return{layout:{padding:o.getPropertyValue("--jfi-layout-padding"),formControlSpacingHorizontal:o.getPropertyValue("--jfi-layout-form-control-spacing-x"),formControlSpacingVertical:o.getPropertyValue("--jfi-layout-form-control-spacing-y")},formControl:{backgroundColor:o.getPropertyValue("--jfi-form-control-background-color"),borderColor:o.getPropertyValue("--jfi-form-control-border-color"),borderColorFocus:o.getPropertyValue("--jfi-form-control-border-color-focus"),borderColorError:o.getPropertyValue("--jfi-form-control-border-color-error"),borderWidth:o.getPropertyValue("--jfi-form-control-border-width"),borderBottomWidth:o.getPropertyValue("--jfi-form-control-border-bottom-width"),borderLeftWidth:o.getPropertyValue("--jfi-form-control-border-left-width"),borderRightWidth:o.getPropertyValue("--jfi-form-control-border-right-width"),borderTopWidth:o.getPropertyValue("--jfi-form-control-border-top-width"),borderRadius:o.getPropertyValue("--jfi-form-control-border-radius"),borderStyle:o.getPropertyValue("--jfi-form-control-border-style"),boxShadow:o.getPropertyValue("--jfi-form-control-box-shadow"),boxShadowError:o.getPropertyValue("--jfi-form-control-box-shadow-error"),boxShadowErrorFocus:o.getPropertyValue("--jfi-form-control-box-shadow-error-focus"),boxShadowFocus:o.getPropertyValue("--jfi-form-control-box-shadow-focus"),color:o.getPropertyValue("--jfi-form-control-color"),colorFocus:o.getPropertyValue("--jfi-form-control-color-focus"),fontSize:o.getPropertyValue("--jfi-form-control-font-size"),fontWeight:o.getPropertyValue("--jfi-form-control-font-weight"),lineHeight:o.getPropertyValue("--jfi-form-control-line-height"),margin:o.getPropertyValue("--jfi-form-control-margin"),padding:o.getPropertyValue("--jfi-form-control-padding")},formLabel:{color:o.getPropertyValue("--jfi-form-label-color"),fontFamily:o.getPropertyValue("--jfi-form-label-font-family"),fontSize:o.getPropertyValue("--jfi-form-label-font-size"),fontWeight:o.getPropertyValue("--jfi-form-label-font-weight"),margin:o.getPropertyValue("--jfi-form-label-margin")},errorMessage:{color:o.getPropertyValue("--jfi-error-message-color"),margin:o.getPropertyValue("--jfi-error-message-margin"),fontSize:o.getPropertyValue("--jfi-error-message-font-size")}}})(),this.paymentMethodFormType=void 0,this.paymentMethodFormValidationMode=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.computedTheme&&this.postMessage(e[this.paymentMethodFormType].styleOverrides,{styleOverrides:this.computedTheme})}dispatchMessageEvent(o){const r=o.data,t=r.eventType,i=r.data;t===e[this.paymentMethodFormType].ready&&this.paymentMethodFormReady.emit(i),t===e[this.paymentMethodFormType].resize&&(this.height=i.height)}postMessage(o,r){this.iframeElement&&this.iframeElement.contentWindow.postMessage(Object.assign({eventType:o},r),"*")}async postMessageWithResponseListener(o,r){return new Promise((t=>{const i=r=>{r.data.eventType===o&&(window.removeEventListener("message",i),t(r.data.data))};window.addEventListener("message",i),this.postMessage(o,r)}))}async tokenize(o,r,t){return this.postMessageWithResponseListener(e[this.paymentMethodFormType].tokenize,{clientId:o,componentVersion:"2.0.1",paymentMethodMetadata:r,account:t})}async validate(){return this.postMessageWithResponseListener(e[this.paymentMethodFormType].validate)}composeQueryParams(o){return o.map((r=>r===o[0]?`?${r}`:`&${r}`)).join("")}getIframeSrc(){let o=`${this.iframeOrigin||"https://js.justifi.ai/v2"}/${this.paymentMethodFormType}`,r=[];return this.paymentMethodFormValidationMode&&r.push(`validationMode=${this.paymentMethodFormValidationMode}`),this.singleLine&&r.push(`singleLine=${this.singleLine}`),o.concat(this.composeQueryParams(r))}render(){return t(i,null,t("iframe",{id:`justifi-payment-method-form-${this.paymentMethodFormType}`,src:this.getIframeSrc(),ref:o=>this.iframeElement=o,height:this.height}))}};s.style=":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";export{s as justifi_payment_method_form}
+import{r as o,c as r,h as t,H as i}from"./p-48c17d38.js";const e={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"}},s=class{constructor(t){o(this,t),this.paymentMethodFormReady=r(this,"paymentMethodFormReady",7),this.paymentMethodFormTokenize=r(this,"paymentMethodFormTokenize",7),this.computedTheme=(()=>{const o=getComputedStyle(document.body);return{layout:{padding:o.getPropertyValue("--jfi-layout-padding"),formControlSpacingHorizontal:o.getPropertyValue("--jfi-layout-form-control-spacing-x"),formControlSpacingVertical:o.getPropertyValue("--jfi-layout-form-control-spacing-y")},formControl:{backgroundColor:o.getPropertyValue("--jfi-form-control-background-color"),borderColor:o.getPropertyValue("--jfi-form-control-border-color"),borderColorFocus:o.getPropertyValue("--jfi-form-control-border-color-focus"),borderColorError:o.getPropertyValue("--jfi-form-control-border-color-error"),borderWidth:o.getPropertyValue("--jfi-form-control-border-width"),borderBottomWidth:o.getPropertyValue("--jfi-form-control-border-bottom-width"),borderLeftWidth:o.getPropertyValue("--jfi-form-control-border-left-width"),borderRightWidth:o.getPropertyValue("--jfi-form-control-border-right-width"),borderTopWidth:o.getPropertyValue("--jfi-form-control-border-top-width"),borderRadius:o.getPropertyValue("--jfi-form-control-border-radius"),borderStyle:o.getPropertyValue("--jfi-form-control-border-style"),boxShadow:o.getPropertyValue("--jfi-form-control-box-shadow"),boxShadowError:o.getPropertyValue("--jfi-form-control-box-shadow-error"),boxShadowErrorFocus:o.getPropertyValue("--jfi-form-control-box-shadow-error-focus"),boxShadowFocus:o.getPropertyValue("--jfi-form-control-box-shadow-focus"),color:o.getPropertyValue("--jfi-form-control-color"),colorFocus:o.getPropertyValue("--jfi-form-control-color-focus"),fontSize:o.getPropertyValue("--jfi-form-control-font-size"),fontWeight:o.getPropertyValue("--jfi-form-control-font-weight"),lineHeight:o.getPropertyValue("--jfi-form-control-line-height"),margin:o.getPropertyValue("--jfi-form-control-margin"),padding:o.getPropertyValue("--jfi-form-control-padding")},formLabel:{color:o.getPropertyValue("--jfi-form-label-color"),fontFamily:o.getPropertyValue("--jfi-form-label-font-family"),fontSize:o.getPropertyValue("--jfi-form-label-font-size"),fontWeight:o.getPropertyValue("--jfi-form-label-font-weight"),margin:o.getPropertyValue("--jfi-form-label-margin")},errorMessage:{color:o.getPropertyValue("--jfi-error-message-color"),margin:o.getPropertyValue("--jfi-error-message-margin"),fontSize:o.getPropertyValue("--jfi-error-message-font-size")}}})(),this.paymentMethodFormType=void 0,this.paymentMethodFormValidationMode=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.computedTheme&&this.postMessage(e[this.paymentMethodFormType].styleOverrides,{styleOverrides:this.computedTheme})}dispatchMessageEvent(o){const r=o.data,t=r.eventType,i=r.data;t===e[this.paymentMethodFormType].ready&&this.paymentMethodFormReady.emit(i),t===e[this.paymentMethodFormType].resize&&(this.height=i.height)}postMessage(o,r){this.iframeElement&&this.iframeElement.contentWindow.postMessage(Object.assign({eventType:o},r),"*")}async postMessageWithResponseListener(o,r){return new Promise((t=>{const i=r=>{r.data.eventType===o&&(window.removeEventListener("message",i),t(r.data.data))};window.addEventListener("message",i),this.postMessage(o,r)}))}async tokenize(o,r,t){return this.postMessageWithResponseListener(e[this.paymentMethodFormType].tokenize,{clientId:o,componentVersion:"2.0.2",paymentMethodMetadata:r,account:t})}async validate(){return this.postMessageWithResponseListener(e[this.paymentMethodFormType].validate)}composeQueryParams(o){return o.map((r=>r===o[0]?`?${r}`:`&${r}`)).join("")}getIframeSrc(){let o=`${this.iframeOrigin||"https://js.justifi.ai/v2"}/${this.paymentMethodFormType}`,r=[];return this.paymentMethodFormValidationMode&&r.push(`validationMode=${this.paymentMethodFormValidationMode}`),this.singleLine&&r.push(`singleLine=${this.singleLine}`),o.concat(this.composeQueryParams(r))}render(){return t(i,null,t("iframe",{id:`justifi-payment-method-form-${this.paymentMethodFormType}`,src:this.getIframeSrc(),ref:o=>this.iframeElement=o,height:this.height}))}};s.style=":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";export{s as justifi_payment_method_form}

package/dist/webcomponents/webcomponents.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-48c17d38.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-33fa7295",[[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-3d53bd97",[[0,"justifi-bank-account-form",{validationMode:[1025,"validation-mode"],styleOverrides:[1025,"style-overrides"],iframeOrigin:[1025,"iframe-origin"],tokenize:[64],validate:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-884b845d",[[0,"justifi-card-form",{validationMode:[1025,"validation-mode"],iframeOrigin:[1025,"iframe-origin"],singleLine:[4,"single-line"],tokenize:[64],validate:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-57d070c8",[[1,"justifi-payments-list",{accountId:[1,"account-id"],auth:[16],payments:[32]}]]],["p-5301972d",[[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-388b2c5f",[[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-e3de1db1",[[0,"justifi-payment-method-form",{paymentMethodFormType:[1,"payment-method-form-type"],paymentMethodFormValidationMode:[1025,"payment-method-form-validation-mode"],iframeOrigin:[1,"iframe-origin"],singleLine:[4,"single-line"],height:[32],tokenize:[64],validate:[64]}]]]],e)));
+import{p as e,b as t}from"./p-48c17d38.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-33fa7295",[[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-632dab44",[[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-af8d98bb",[[0,"justifi-card-form",{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"]]]]],["p-57d070c8",[[1,"justifi-payments-list",{accountId:[1,"account-id"],auth:[16],payments:[32]}]]],["p-5301972d",[[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-388b2c5f",[[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-f7aa93bc",[[0,"justifi-payment-method-form",{paymentMethodFormType:[1,"payment-method-form-type"],paymentMethodFormValidationMode:[1025,"payment-method-form-validation-mode"],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": "2.0.1",
+  "version": "2.0.2",
   "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-3d53bd97.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as o}from"./p-48c17d38.js";const e=class{constructor(o){t(this,o),this.bankAccountFormReady=i(this,"bankAccountFormReady",7),this.bankAccountFormTokenize=i(this,"bankAccountFormTokenize",7),this.bankAccountFormValidate=i(this,"bankAccountFormValidate",7),this.validationMode=void 0,this.styleOverrides=void 0,this.iframeOrigin=void 0}readyHandler(t){this.bankAccountFormReady.emit(t)}tokenizeHandler(t){this.bankAccountFormTokenize.emit(t)}validateHandler(t){this.bankAccountFormValidate.emit(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 o("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"})}};export{e as justifi_bank_account_form}

package/dist/webcomponents/p-884b845d.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as e}from"./p-48c17d38.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.iframeOrigin=void 0,this.singleLine=void 0}readyHandler(t){this.cardFormReady.emit(t)}tokenizeHandler(t){this.cardFormTokenize.emit(t)}validateHandler(t){this.cardFormValidate.emit(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"})}};export{r as justifi_card_form}