@justifi/webcomponents 4.0.6 → 4.2.0-rc.0

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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).
 
+#### 4.2.0
+
+> 27 June 2023
+
+- Add `resize` method to `CardForm` and `BankAccount` form
+
 #### 4.1.6
 
 > 23 June 2023

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

@@ -41,6 +41,15 @@ const BankAccountForm = class {
     }
     return this.childRef.validate();
   }
+  /**
+  *  Manually resizes the iframe to fit the contents of the iframe
+  */
+  async resize() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.resize();
+  }
   render() {
     return (index.h("justifi-payment-method-form", { ref: el => {
         if (el) {

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

@@ -1 +1 @@
-{"file":"justifi-bank-account-form.entry.cjs.js","mappings":";;;;;;MAQa,eAAe;;;;;;;;;;EAgC1B,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACvC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;EAED,MAAM;IACJ,QACEA,yCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,aAAa,+BACX,IAAI,CAAC,oBAAoB,kCACtB,IAAI,CAAC,uBAAuB,yCACrB,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH;;;;;","names":["h"],"sources":["./src/components/bank-account-form/bank-account-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Listen, Method, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-bank-account-form',\n  shadow: false,\n})\nexport class BankAccountForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-bank-account-form#bankAccountFormReady\n   */\n  @Event() bankAccountFormReady: EventEmitter<any>;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-bank-account-form#bankAccountFormTokenize\n   */\n  @Event() bankAccountFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-bank-account-form#bankAccountFormValidate\n   */\n  @Event() bankAccountFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    this.bankAccountFormReady.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    this.bankAccountFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    this.bankAccountFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate() {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"bankAccount\"\n        payment-method-form-ready={this.bankAccountFormReady}\n        payment-method-form-tokenize={this.bankAccountFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"justifi-bank-account-form.entry.cjs.js","mappings":";;;;;;MAQa,eAAe;;;;;;;;;;EAgC1B,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACvC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;;;;EAMD,MAAM,MAAM;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;GAC/B;EAED,MAAM;IACJ,QACEA,yCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,aAAa,+BACX,IAAI,CAAC,oBAAoB,kCACtB,IAAI,CAAC,uBAAuB,yCACrB,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH;;;;;","names":["h"],"sources":["./src/components/bank-account-form/bank-account-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Listen, Method, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-bank-account-form',\n  shadow: false,\n})\nexport class BankAccountForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-bank-account-form#bankAccountFormReady\n   */\n  @Event() bankAccountFormReady: EventEmitter<any>;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-bank-account-form#bankAccountFormTokenize\n   */\n  @Event() bankAccountFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-bank-account-form#bankAccountFormValidate\n   */\n  @Event() bankAccountFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    this.bankAccountFormReady.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    this.bankAccountFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    this.bankAccountFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate() {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  /**\n  *  Manually resizes the iframe to fit the contents of the iframe\n  */\n  @Method()\n  async resize(): Promise<void> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.resize();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"bankAccount\"\n        payment-method-form-ready={this.bankAccountFormReady}\n        payment-method-form-tokenize={this.bankAccountFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"],"version":3}

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

@@ -42,6 +42,15 @@ const CardForm = class {
     }
     return this.childRef.validate();
   }
+  /**
+    *  Manually resizes the iframe to fit the contents of the iframe
+    */
+  async resize() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.resize();
+  }
   render() {
     return (index.h("justifi-payment-method-form", { ref: el => {
         if (el) {

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

@@ -1 +1 @@
-{"file":"justifi-card-form.entry.cjs.js","mappings":";;;;;;MAQa,QAAQ;;;;;;;;sBAcW,KAAK;;;EAuBnC,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;EAED,MAAM;IACJ,QACEA,yCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH;;;;;","names":["h"],"sources":["./src/components/card-form/card-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-card-form',\n  shadow: false,\n})\nexport class CardForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  /**\n   * Boolean indicating if the Card Form should render in a single line\n   */\n  @Prop() singleLine: boolean = false;\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-card-form#cardFormReady\n   */\n\n  @Event() cardFormReady: EventEmitter;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    this.cardFormReady.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    this.cardFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    this.cardFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate(): Promise<{ isValid: boolean }> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"card\"\n        single-line={this.singleLine}\n        payment-method-form-ready={this.cardFormReady}\n        payment-method-form-tokenize={this.cardFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"justifi-card-form.entry.cjs.js","mappings":";;;;;;MAQa,QAAQ;;;;;;;;sBAcW,KAAK;;;EAuBnC,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;;;;EAQD,MAAM,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;GACxC;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;GACjC;;;;EAMD,MAAM,MAAM;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;GAC/B;EAED,MAAM;IACJ,QACEA,yCACE,GAAG,EAAE,EAAE;QACL,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;OACF,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,EACF;GACH;;;;;","names":["h"],"sources":["./src/components/card-form/card-form.tsx"],"sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-card-form',\n  shadow: false,\n})\nexport class CardForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  /**\n   * Boolean indicating if the Card Form should render in a single line\n   */\n  @Prop() singleLine: boolean = false;\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-card-form#cardFormReady\n   */\n\n  @Event() cardFormReady: EventEmitter;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    this.cardFormReady.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    this.cardFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    this.cardFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate(): Promise<{ isValid: boolean }> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  /**\n    *  Manually resizes the iframe to fit the contents of the iframe\n    */\n  @Method()\n  async resize(): Promise<void> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.resize();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"card\"\n        single-line={this.singleLine}\n        payment-method-form-ready={this.cardFormReady}\n        payment-method-form-tokenize={this.cardFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"],"version":3}

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

@@ -22,7 +22,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "4.0.6";
+const version = "4.2.0-rc.0";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module$1 = "dist/components/index.js";
@@ -236,6 +236,9 @@ const PaymentMethodForm = class {
   async validate() {
     return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
   }
+  async resize() {
+    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
+  }
   composeQueryParams(values) {
     const queryParams = values.map(value => {
       if (value === values[0]) {
@@ -248,7 +251,7 @@ const PaymentMethodForm = class {
     return queryParams.join('');
   }
   getIframeSrc() {
-    const iframeOrigin = undefined;
+    const iframeOrigin = this.iframeOrigin || undefined;
     let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
     let paramsList = [];
     if (this.paymentMethodFormValidationMode) {

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

@@ -1 +1 @@
-{"file":"justifi-payment-method-form.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/payment-method-form/message-event-types.ts","./src/components/payment-method-form/get-computed-theme.ts","./src/components/payment-method-form/payment-method-form.css?tag=justifi-payment-method-form","./src/components/payment-method-form/payment-method-form.tsx"],"sourcesContent":["export const MessageEventType = {\n  card: {\n    ready: 'justifi.card.ready',\n    tokenize: 'justifi.card.tokenize',\n    validate: 'justifi.card.validate',\n    resize: 'justifi.card.resize',\n    styleOverrides: 'justifi.card.styleOverrides',\n  },\n  bankAccount: {\n    ready: 'justifi.bankAccount.ready',\n    tokenize: 'justifi.bankAccount.tokenize',\n    validate: 'justifi.bankAccount.validate',\n    resize: 'justifi.bankAccount.resize',\n    styleOverrides: 'justifi.bankAccount.styleOverrides',\n  },\n};\n","import { Theme } from './theme';\n\nconst getComputedTheme = () => {\n  const computedStyles = getComputedStyle(document.body);\n\n  const computedTheme: Theme = {\n    layout: {\n      padding: computedStyles.getPropertyValue('--jfi-layout-padding'),\n      formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),\n      formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),\n    },\n    formControl: {\n      backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),\n      borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),\n      borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),\n      borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),\n      borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),\n      borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),\n      borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),\n      borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),\n      borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),\n      borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),\n      borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),\n      boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),\n      boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),\n      boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),\n      boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),\n      color: computedStyles.getPropertyValue('--jfi-form-control-color'),\n      colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),\n      lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),\n      margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),\n      padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),\n    },\n    formLabel: {\n      color: computedStyles.getPropertyValue('--jfi-form-label-color'),\n      fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),\n      margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),\n    },\n    errorMessage: {\n      color: computedStyles.getPropertyValue('--jfi-error-message-color'),\n      margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),\n      fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),\n    },\n  };\n\n  return computedTheme;\n};\n\nexport default getComputedTheme;\n",":host {\n  display: block;\n}\n\njustifi-payment-method-form iframe {\n  border: none;\n  width: 100%;\n}\n","import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n  tag: 'justifi-payment-method-form',\n  styleUrl: 'payment-method-form.css',\n  shadow: false,\n})\nexport class PaymentMethodForm {\n  @Prop() paymentMethodFormType: 'card' | 'bankAccount';\n  @Prop({\n    mutable: true,\n  })\n  paymentMethodFormValidationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n  @Prop() iframeOrigin?: string;\n  @Prop() singleLine: boolean;\n  @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n  @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n  @State() height: number = 55;\n\n  private computedTheme: Theme = getComputedTheme();\n\n  iframeElement!: HTMLIFrameElement;\n\n  connectedCallback() {\n    window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  componentShouldUpdate() {\n    this.sendStyleOverrides();\n  }\n\n  sendStyleOverrides() {\n    if (this.computedTheme) {\n      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n    }\n  }\n\n  private dispatchMessageEvent(messageEvent: MessageEvent) {\n    const messagePayload = messageEvent.data;\n    const messageType = messagePayload.eventType;\n    const messageData = messagePayload.data;\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n      this.paymentMethodFormReady.emit(messageData);\n    }\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n      this.height = messageData.height;\n    }\n  }\n\n  private postMessage(eventType: string, payload?: any) {\n    this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n  }\n\n  private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n    return new Promise(resolve => {\n      const responseListener = (event: MessageEvent) => {\n        if (event.data.eventType !== eventType) return;\n        window.removeEventListener('message', responseListener);\n        resolve(event.data.data);\n      };\n      window.addEventListener('message', responseListener);\n      this.postMessage(eventType, payload);\n    });\n  }\n\n  @Method()\n  async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n    const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n    const payload = {\n      clientId: clientId,\n      componentVersion: packageJson.version,\n      paymentMethodMetadata: paymentMethodMetadata,\n      account: account,\n    };\n\n    return this.postMessageWithResponseListener(eventType, payload);\n  }\n\n  @Method()\n  async validate(): Promise<any> {\n    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n  }\n\n  private composeQueryParams(values: string[]) {\n    const queryParams = values.map(value => {\n      if (value === values[0]) {\n        return (value = `?${value}`);\n      } else {\n        return (value = `&${value}`);\n      }\n    });\n    return queryParams.join('');\n  }\n\n  private getIframeSrc() {\n    const iframeOrigin = process.env.IFRAME_ORIGIN;\n    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n    let paramsList = [];\n    if (this.paymentMethodFormValidationMode) {\n      paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n    }\n    if (this.singleLine) {\n      paramsList.push(`singleLine=${this.singleLine}`);\n    }\n\n    return iframeSrc.concat(this.composeQueryParams(paramsList));\n  }\n\n  render() {\n    return (\n      <Host>\n        <iframe\n          id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n          src={this.getIframeSrc()}\n          ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n          height={this.height}\n        ></iframe>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"justifi-payment-method-form.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/payment-method-form/message-event-types.ts","./src/components/payment-method-form/get-computed-theme.ts","./src/components/payment-method-form/payment-method-form.css?tag=justifi-payment-method-form","./src/components/payment-method-form/payment-method-form.tsx"],"sourcesContent":["export const MessageEventType = {\n  card: {\n    ready: 'justifi.card.ready',\n    tokenize: 'justifi.card.tokenize',\n    validate: 'justifi.card.validate',\n    resize: 'justifi.card.resize',\n    styleOverrides: 'justifi.card.styleOverrides',\n  },\n  bankAccount: {\n    ready: 'justifi.bankAccount.ready',\n    tokenize: 'justifi.bankAccount.tokenize',\n    validate: 'justifi.bankAccount.validate',\n    resize: 'justifi.bankAccount.resize',\n    styleOverrides: 'justifi.bankAccount.styleOverrides',\n  },\n};\n","import { Theme } from './theme';\n\nconst getComputedTheme = () => {\n  const computedStyles = getComputedStyle(document.body);\n\n  const computedTheme: Theme = {\n    layout: {\n      padding: computedStyles.getPropertyValue('--jfi-layout-padding'),\n      formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),\n      formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),\n    },\n    formControl: {\n      backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),\n      borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),\n      borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),\n      borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),\n      borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),\n      borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),\n      borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),\n      borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),\n      borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),\n      borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),\n      borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),\n      boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),\n      boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),\n      boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),\n      boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),\n      color: computedStyles.getPropertyValue('--jfi-form-control-color'),\n      colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),\n      lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),\n      margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),\n      padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),\n    },\n    formLabel: {\n      color: computedStyles.getPropertyValue('--jfi-form-label-color'),\n      fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),\n      margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),\n    },\n    errorMessage: {\n      color: computedStyles.getPropertyValue('--jfi-error-message-color'),\n      margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),\n      fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),\n    },\n  };\n\n  return computedTheme;\n};\n\nexport default getComputedTheme;\n",":host {\n  display: block;\n}\n\njustifi-payment-method-form iframe {\n  border: none;\n  width: 100%;\n}\n","import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n  tag: 'justifi-payment-method-form',\n  styleUrl: 'payment-method-form.css',\n  shadow: false,\n})\nexport class PaymentMethodForm {\n  @Prop() paymentMethodFormType: 'card' | 'bankAccount';\n  @Prop({\n    mutable: true,\n  })\n  paymentMethodFormValidationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n  @Prop() iframeOrigin?: string;\n  @Prop() singleLine: boolean;\n  @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n  @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n  @State() height: number = 55;\n\n  private computedTheme: Theme = getComputedTheme();\n\n  iframeElement!: HTMLIFrameElement;\n\n  connectedCallback() {\n    window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  componentShouldUpdate() {\n    this.sendStyleOverrides();\n  }\n\n  sendStyleOverrides() {\n    if (this.computedTheme) {\n      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n    }\n  }\n\n  private dispatchMessageEvent(messageEvent: MessageEvent) {\n    const messagePayload = messageEvent.data;\n    const messageType = messagePayload.eventType;\n    const messageData = messagePayload.data;\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n      this.paymentMethodFormReady.emit(messageData);\n    }\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n      this.height = messageData.height;\n    }\n  }\n\n  private postMessage(eventType: string, payload?: any) {\n    this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n  }\n\n  private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n    return new Promise(resolve => {\n      const responseListener = (event: MessageEvent) => {\n        if (event.data.eventType !== eventType) return;\n        window.removeEventListener('message', responseListener);\n        resolve(event.data.data);\n      };\n      window.addEventListener('message', responseListener);\n      this.postMessage(eventType, payload);\n    });\n  }\n\n  @Method()\n  async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n    const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n    const payload = {\n      clientId: clientId,\n      componentVersion: packageJson.version,\n      paymentMethodMetadata: paymentMethodMetadata,\n      account: account,\n    };\n\n    return this.postMessageWithResponseListener(eventType, payload);\n  }\n\n  @Method()\n  async validate(): Promise<any> {\n    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n  }\n\n  @Method()\n  async resize(): Promise<any> {\n    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\n  }\n\n  private composeQueryParams(values: string[]) {\n    const queryParams = values.map(value => {\n      if (value === values[0]) {\n        return (value = `?${value}`);\n      } else {\n        return (value = `&${value}`);\n      }\n    });\n    return queryParams.join('');\n  }\n\n  private getIframeSrc() {\n    const iframeOrigin = this.iframeOrigin || process.env.IFRAME_ORIGIN;\n    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n    let paramsList = [];\n    if (this.paymentMethodFormValidationMode) {\n      paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n    }\n    if (this.singleLine) {\n      paramsList.push(`singleLine=${this.singleLine}`);\n    }\n\n    return iframeSrc.concat(this.composeQueryParams(paramsList));\n  }\n\n  render() {\n    return (\n      <Host>\n        <iframe\n          id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n          src={this.getIframeSrc()}\n          ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n          height={this.height}\n        ></iframe>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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],"email":[1],"iframeOrigin":[1,"iframe-origin"],"clientId":[1,"client-id"],"accountId":[1,"account-id"],"submitButtonText":[1,"submit-button-text"],"submitButtonEnabled":[32],"isLoading":[32],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"enableSubmitButton":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-business-address.cjs",[[1,"justifi-business-address",{"businessAddress":[32],"businessAddressErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-business-info.cjs",[[1,"justifi-business-info",{"authToken":[1,"auth-token"],"businessId":[1,"business-id"],"businessInfoPrefillData":[32],"businessInfo":[32],"businessInfoFieldsErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["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]}]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationMode":[1025,"validation-mode"],"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"]]],[1,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]]], options);
+  return index.bootstrapLazy([["justifi-payment-form.cjs",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"email":[1],"iframeOrigin":[1,"iframe-origin"],"clientId":[1,"client-id"],"accountId":[1,"account-id"],"submitButtonText":[1,"submit-button-text"],"submitButtonEnabled":[32],"isLoading":[32],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"enableSubmitButton":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-business-address.cjs",[[1,"justifi-business-address",{"businessAddress":[32],"businessAddressErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-business-info.cjs",[[1,"justifi-business-info",{"authToken":[1,"auth-token"],"businessId":[1,"business-id"],"businessInfoPrefillData":[32],"businessInfo":[32],"businessInfoFieldsErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["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],"resize":[64]}]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationMode":[1025,"validation-mode"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64],"resize":[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],"resize":[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"]]],[1,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]]], options);
   });
 };
 

package/dist/cjs/webcomponents.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["justifi-payment-form.cjs",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"email":[1],"iframeOrigin":[1,"iframe-origin"],"clientId":[1,"client-id"],"accountId":[1,"account-id"],"submitButtonText":[1,"submit-button-text"],"submitButtonEnabled":[32],"isLoading":[32],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"enableSubmitButton":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-business-address.cjs",[[1,"justifi-business-address",{"businessAddress":[32],"businessAddressErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-business-info.cjs",[[1,"justifi-business-info",{"authToken":[1,"auth-token"],"businessId":[1,"business-id"],"businessInfoPrefillData":[32],"businessInfo":[32],"businessInfoFieldsErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["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]}]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationMode":[1025,"validation-mode"],"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"]]],[1,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]]], options);
+  return index.bootstrapLazy([["justifi-payment-form.cjs",[[1,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"email":[1],"iframeOrigin":[1,"iframe-origin"],"clientId":[1,"client-id"],"accountId":[1,"account-id"],"submitButtonText":[1,"submit-button-text"],"submitButtonEnabled":[32],"isLoading":[32],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"enableSubmitButton":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-business-address.cjs",[[1,"justifi-business-address",{"businessAddress":[32],"businessAddressErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-business-info.cjs",[[1,"justifi-business-info",{"authToken":[1,"auth-token"],"businessId":[1,"business-id"],"businessInfoPrefillData":[32],"businessInfo":[32],"businessInfoFieldsErrors":[32],"submit":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["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],"resize":[64]}]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationMode":[1025,"validation-mode"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64],"resize":[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],"resize":[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"]]],[1,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -32,6 +32,15 @@ export class BankAccountForm {
     }
     return this.childRef.validate();
   }
+  /**
+  *  Manually resizes the iframe to fit the contents of the iframe
+  */
+  async resize() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.resize();
+  }
   render() {
     return (h("justifi-payment-method-form", { ref: el => {
         if (el) {
@@ -186,6 +195,22 @@ export class BankAccountForm {
           "text": "Runs a validation on the form and shows errors if any",
           "tags": []
         }
+      },
+      "resize": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Manually resizes the iframe to fit the contents of the iframe",
+          "tags": []
+        }
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"bank-account-form.js","sourceRoot":"","sources":["../../../../src/components/bank-account-form/bank-account-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAgB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ/F,MAAM,OAAO,eAAe;;;;;;EAgC1B,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACxC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3C,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3C,CAAC;EAID;;KAEG;EAEH,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;EAClC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,mCACE,GAAG,EAAE,EAAE,CAAC,EAAE;QACR,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;MACH,CAAC,mBACc,IAAI,CAAC,YAAY,8BACP,aAAa,+BACX,IAAI,CAAC,oBAAoB,kCACtB,IAAI,CAAC,uBAAuB,yCACrB,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,CACH,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Listen, Method, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-bank-account-form',\n  shadow: false,\n})\nexport class BankAccountForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-bank-account-form#bankAccountFormReady\n   */\n  @Event() bankAccountFormReady: EventEmitter<any>;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-bank-account-form#bankAccountFormTokenize\n   */\n  @Event() bankAccountFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-bank-account-form#bankAccountFormValidate\n   */\n  @Event() bankAccountFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    this.bankAccountFormReady.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    this.bankAccountFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    this.bankAccountFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate() {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"bankAccount\"\n        payment-method-form-ready={this.bankAccountFormReady}\n        payment-method-form-tokenize={this.bankAccountFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"bank-account-form.js","sourceRoot":"","sources":["../../../../src/components/bank-account-form/bank-account-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAgB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ/F,MAAM,OAAO,eAAe;;;;;;EAgC1B,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACxC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3C,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3C,CAAC;EAID;;KAEG;EAEH,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;EAClC,CAAC;EAED;;IAEE;EAEF,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;EAChC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,mCACE,GAAG,EAAE,EAAE,CAAC,EAAE;QACR,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;MACH,CAAC,mBACc,IAAI,CAAC,YAAY,8BACP,aAAa,+BACX,IAAI,CAAC,oBAAoB,kCACtB,IAAI,CAAC,uBAAuB,yCACrB,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,CACH,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Listen, Method, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-bank-account-form',\n  shadow: false,\n})\nexport class BankAccountForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-bank-account-form#bankAccountFormReady\n   */\n  @Event() bankAccountFormReady: EventEmitter<any>;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-bank-account-form#bankAccountFormTokenize\n   */\n  @Event() bankAccountFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-bank-account-form#bankAccountFormValidate\n   */\n  @Event() bankAccountFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    this.bankAccountFormReady.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    this.bankAccountFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    this.bankAccountFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate() {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  /**\n  *  Manually resizes the iframe to fit the contents of the iframe\n  */\n  @Method()\n  async resize(): Promise<void> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.resize();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"bankAccount\"\n        payment-method-form-ready={this.bankAccountFormReady}\n        payment-method-form-tokenize={this.bankAccountFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
 const isDev = process.env.NODE_ENV === 'development';
 const CSSVars = `
---jfi-layout-padding: 0;
+--jfi-layout-padding: 4px;
 --jfi-layout-form-control-spacing-x: .5rem;
 --jfi-layout-form-control-spacing-y: 1rem;
 --jfi-form-label-font-weight: 700;
@@ -18,6 +18,7 @@ const CSSVars = `
 --jfi-form-control-border-right-width: 0;
 --jfi-form-control-border-radius: 4px 4px 0 0;
 --jfi-form-control-border-style: solid;
+--jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 --jfi-form-control-box-shadow-focus: none;
 --jfi-form-control-box-shadow-error-focus: none;
 --jfi-form-control-border-style: solid;
@@ -65,17 +66,24 @@ const handleTokenizeClick = async (bankForm, paymentMethodData) => {
   const tokenizeResponse = await bankForm.tokenize('CLIENT_ID', paymentMethodData);
   console.log(tokenizeResponse);
 };
+const handleResizeClick = async (bankForm) => {
+  await bankForm.resize();
+};
 const handleReady = () => {
   console.log('bank account form is ready');
   const bankForm = document.querySelector('justifi-bank-account-form');
   const validateBtn = document.querySelector('#validate-btn');
   const tokenizeBtn = document.querySelector('#tokenize-btn');
+  const resizeBtn = document.querySelector('#resize-btn');
   validateBtn === null || validateBtn === void 0 ? void 0 : validateBtn.addEventListener('click', () => {
     handleValidateClick(bankForm);
   });
   tokenizeBtn === null || tokenizeBtn === void 0 ? void 0 : tokenizeBtn.addEventListener('click', () => {
     handleTokenizeClick(bankForm, {});
   });
+  resizeBtn === null || resizeBtn === void 0 ? void 0 : resizeBtn.addEventListener('click', () => {
+    handleResizeClick(bankForm);
+  });
 };
 const addEvents = () => {
   addEventListener('bankAccountFormReady', handleReady);
@@ -94,6 +102,7 @@ const FormButtons = `
   <div class="button-bar">
     <button id="validate-btn">Validate</button>
     <button id="tokenize-btn">Tokenize</button>
+    <button id="resize-btn">Resize</button>
   </div>
 `;
 const Template = (args) => {

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

@@ -1 +1 @@
-{"version":3,"file":"bank-account-form.stories.js","sourceRoot":"","sources":["../../../../src/components/bank-account-form/bank-account-form.stories.ts"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AACrD,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Bf,CAAC;AAEF,eAAe;EACb,KAAK,EAAE,4BAA4B;EACnC,SAAS,EAAE,2BAA2B;EACtC,QAAQ,EAAE;IACR,eAAe,EAAE;MACf,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QAC7B,QAAQ,EAAE,OAAO;OAClB;KACF;IACD,eAAe,EAAE;MACf,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,OAAO;OACtB;KACF;GACF;EACD,UAAU,EAAE;IACV,KAAK,CAAC,EAAE,CAAC;QACL,KAAK,EAAE;gBACC,SAAS,EAAE;KACtB;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAA2C,EAAE,EAAE;EAChF,MAAM,KAAK,GAAG,MAAM,QAAQ,CAAC,QAAQ,EAAE,CAAC;EACxC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAA2C,EAAE,iBAAsB,EAAE,EAAE;EACxG,MAAM,gBAAgB,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;EACjF,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAChC,CAAC,CAAC;AACF,MAAM,WAAW,GAAG,GAAG,EAAE;EACvB,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;EAC1C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,2BAA2B,CAAsC,CAAC;EAC1G,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,mBAAmB,CAAC,QAAQ,CAAC,CAAC;EAChC,CAAC,CAAC,CAAC;EACH,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,mBAAmB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;EACrB,gBAAgB,CAAC,sBAAsB,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;CAenB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAS,EAAE,EAAE;EAC7B,OAAO;;;;UAIC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;;;;;2BAKV,IAAI,CAAC,iBAAiB,CAAC,IAAI,UAAU;yBACvC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;;;MAG9C,WAAW;GACd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,eAAe,EAAE,OAAO;CACzB,CAAC","sourcesContent":["const isDev = process.env.NODE_ENV === 'development';\nconst CSSVars = `\n--jfi-layout-padding: 0;\n--jfi-layout-form-control-spacing-x: .5rem;\n--jfi-layout-form-control-spacing-y: 1rem;\n--jfi-form-label-font-weight: 700;\n--jfi-form-label-font-family: sans-serif;\n--jfi-form-label-margin: 0 0 .5rem 0;\n--jfi-form-control-background-color: #F4F4F6;\n--jfi-form-control-background-color-hover: #EEEEF5;\n--jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n--jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n--jfi-form-control-border-color-focus: #fccc32;\n--jfi-form-control-border-color-error: #C12727;\n--jfi-form-control-border-top-width: 0;\n--jfi-form-control-border-left-width: 0;\n--jfi-form-control-border-bottom-width: 1px;\n--jfi-form-control-border-right-width: 0;\n--jfi-form-control-border-radius: 4px 4px 0 0;\n--jfi-form-control-border-style: solid;\n--jfi-form-control-box-shadow-focus: none;\n--jfi-form-control-box-shadow-error-focus: none;\n--jfi-form-control-border-style: solid;\n--jfi-form-control-color: #212529;\n--jfi-form-control-font-size: 1rem;\n--jfi-form-control-font-weight: 400;\n--jfi-form-control-line-height: 2;\n--jfi-form-control-margin: 0;\n--jfi-form-control-padding: .5rem .875rem;\n--jfi-error-message-color: #C12727;\n--jfi-error-message-margin: .25rem 0 0 0;\n--jfi-error-message-font-size: .875rem;\n`;\n\nexport default {\n  title: 'Components/BankAccountForm',\n  component: 'justifi-bank-account-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\n    'css-variables': {\n      control: 'text',\n      table: {\n        category: 'props',\n        defaultValue: CSSVars,\n      },\n    },\n  },\n  decorators: [\n    story => `\n      ${story()}\n      <script>${addEvents()}</script>\n    `,\n  ],\n};\n\nconst handleValidateClick = async (bankForm: HTMLJustifiBankAccountFormElement) => {\n  const valid = await bankForm.validate();\n  console.log(valid);\n};\nconst handleTokenizeClick = async (bankForm: HTMLJustifiBankAccountFormElement, paymentMethodData: any) => {\n  const tokenizeResponse = await bankForm.tokenize('CLIENT_ID', paymentMethodData);\n  console.log(tokenizeResponse);\n};\nconst handleReady = () => {\n  console.log('bank account form is ready');\n  const bankForm = document.querySelector('justifi-bank-account-form') as HTMLJustifiBankAccountFormElement;\n  const validateBtn = document.querySelector('#validate-btn');\n  const tokenizeBtn = document.querySelector('#tokenize-btn');\n  validateBtn?.addEventListener('click', () => {\n    handleValidateClick(bankForm);\n  });\n  tokenizeBtn?.addEventListener('click', () => {\n    handleTokenizeClick(bankForm, {});\n  });\n};\n\nconst addEvents = () => {\n  addEventListener('bankAccountFormReady', handleReady);\n};\n\nconst FormButtons = `\n  <style>\n    .button-bar {\n      display: flex;\n      aligin-items: center;\n      padding: 10px;\n    }\n    .button-bar button {\n      margin-right: 10px;\n    }\n  </style>\n  <div class=\"button-bar\">\n    <button id=\"validate-btn\">Validate</button>\n    <button id=\"tokenize-btn\">Tokenize</button>\n  </div>\n`;\n\nconst Template = (args: any) => {\n  return `\n    <div>\n      <style>\n      :root {\n        ${args['css-variables'] || ''}\n      }\n      </style>\n      <justifi-bank-account-form\n        data-testid=\"bank-account-form-iframe\"\n        validation-mode='${args['validation-mode'] || 'onSubmit'}'\n        iframe-origin='${args['iframe-origin'] || ''}'\n      />\n    </div>\n    ${FormButtons}\n  `;\n};\n\nexport const Basic = Template.bind({});\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'css-variables': CSSVars,\n};\n"]}
+{"version":3,"file":"bank-account-form.stories.js","sourceRoot":"","sources":["../../../../src/components/bank-account-form/bank-account-form.stories.ts"],"names":[],"mappings":"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","sourcesContent":["const isDev = process.env.NODE_ENV === 'development';\nconst CSSVars = `\n--jfi-layout-padding: 4px;\n--jfi-layout-form-control-spacing-x: .5rem;\n--jfi-layout-form-control-spacing-y: 1rem;\n--jfi-form-label-font-weight: 700;\n--jfi-form-label-font-family: sans-serif;\n--jfi-form-label-margin: 0 0 .5rem 0;\n--jfi-form-control-background-color: #F4F4F6;\n--jfi-form-control-background-color-hover: #EEEEF5;\n--jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n--jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n--jfi-form-control-border-color-focus: #fccc32;\n--jfi-form-control-border-color-error: #C12727;\n--jfi-form-control-border-top-width: 0;\n--jfi-form-control-border-left-width: 0;\n--jfi-form-control-border-bottom-width: 1px;\n--jfi-form-control-border-right-width: 0;\n--jfi-form-control-border-radius: 4px 4px 0 0;\n--jfi-form-control-border-style: solid;\n--jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n--jfi-form-control-box-shadow-focus: none;\n--jfi-form-control-box-shadow-error-focus: none;\n--jfi-form-control-border-style: solid;\n--jfi-form-control-color: #212529;\n--jfi-form-control-font-size: 1rem;\n--jfi-form-control-font-weight: 400;\n--jfi-form-control-line-height: 2;\n--jfi-form-control-margin: 0;\n--jfi-form-control-padding: .5rem .875rem;\n--jfi-error-message-color: #C12727;\n--jfi-error-message-margin: .25rem 0 0 0;\n--jfi-error-message-font-size: .875rem;\n`;\n\nexport default {\n  title: 'Components/BankAccountForm',\n  component: 'justifi-bank-account-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\n    'css-variables': {\n      control: 'text',\n      table: {\n        category: 'props',\n        defaultValue: CSSVars,\n      },\n    },\n  },\n  decorators: [\n    story => `\n      ${story()}\n      <script>${addEvents()}</script>\n    `,\n  ],\n};\n\nconst handleValidateClick = async (bankForm: HTMLJustifiBankAccountFormElement) => {\n  const valid = await bankForm.validate();\n  console.log(valid);\n};\nconst handleTokenizeClick = async (bankForm: HTMLJustifiBankAccountFormElement, paymentMethodData: any) => {\n  const tokenizeResponse = await bankForm.tokenize('CLIENT_ID', paymentMethodData);\n  console.log(tokenizeResponse);\n};\nconst handleResizeClick = async (bankForm: HTMLJustifiBankAccountFormElement) => {\n  await bankForm.resize();\n};\nconst handleReady = () => {\n  console.log('bank account form is ready');\n  const bankForm = document.querySelector('justifi-bank-account-form') as HTMLJustifiBankAccountFormElement;\n  const validateBtn = document.querySelector('#validate-btn');\n  const tokenizeBtn = document.querySelector('#tokenize-btn');\n  const resizeBtn = document.querySelector('#resize-btn');\n  validateBtn?.addEventListener('click', () => {\n    handleValidateClick(bankForm);\n  });\n  tokenizeBtn?.addEventListener('click', () => {\n    handleTokenizeClick(bankForm, {});\n  });\n  resizeBtn?.addEventListener('click', () => {\n    handleResizeClick(bankForm);\n  });\n};\n\nconst addEvents = () => {\n  addEventListener('bankAccountFormReady', handleReady);\n};\n\nconst FormButtons = `\n  <style>\n    .button-bar {\n      display: flex;\n      aligin-items: center;\n      padding: 10px;\n    }\n    .button-bar button {\n      margin-right: 10px;\n    }\n  </style>\n  <div class=\"button-bar\">\n    <button id=\"validate-btn\">Validate</button>\n    <button id=\"tokenize-btn\">Tokenize</button>\n    <button id=\"resize-btn\">Resize</button>\n  </div>\n`;\n\nconst Template = (args: any) => {\n  return `\n    <div>\n      <style>\n      :root {\n        ${args['css-variables'] || ''}\n      }\n      </style>\n      <justifi-bank-account-form\n        data-testid=\"bank-account-form-iframe\"\n        validation-mode='${args['validation-mode'] || 'onSubmit'}'\n        iframe-origin='${args['iframe-origin'] || ''}'\n      />\n    </div>\n    ${FormButtons}\n  `;\n};\n\nexport const Basic = Template.bind({});\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'css-variables': CSSVars,\n};\n"]}

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

@@ -33,6 +33,15 @@ export class CardForm {
     }
     return this.childRef.validate();
   }
+  /**
+    *  Manually resizes the iframe to fit the contents of the iframe
+    */
+  async resize() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.resize();
+  }
   render() {
     return (h("justifi-payment-method-form", { ref: el => {
         if (el) {
@@ -205,6 +214,22 @@ export class CardForm {
           "text": "Runs a validation on the form and shows errors if any",
           "tags": []
         }
+      },
+      "resize": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Manually resizes the iframe to fit the contents of the iframe",
+          "tags": []
+        }
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"card-form.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAgB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ/F,MAAM,OAAO,QAAQ;;;;sBAcW,KAAK;;;EAuBnC,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACjC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAID;;KAEG;EAEH,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;EAClC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,mCACE,GAAG,EAAE,EAAE,CAAC,EAAE;QACR,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;MACH,CAAC,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,CACH,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-card-form',\n  shadow: false,\n})\nexport class CardForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  /**\n   * Boolean indicating if the Card Form should render in a single line\n   */\n  @Prop() singleLine: boolean = false;\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-card-form#cardFormReady\n   */\n\n  @Event() cardFormReady: EventEmitter;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    this.cardFormReady.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    this.cardFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    this.cardFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate(): Promise<{ isValid: boolean }> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"card\"\n        single-line={this.singleLine}\n        payment-method-form-ready={this.cardFormReady}\n        payment-method-form-tokenize={this.cardFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"card-form.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAgB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ/F,MAAM,OAAO,QAAQ;;;;sBAcW,KAAK;;;EAuBnC,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACjC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAID;;KAEG;EAEH,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;EAClC,CAAC;EAED;;MAEI;EAEJ,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;EAChC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,mCACE,GAAG,EAAE,EAAE,CAAC,EAAE;QACR,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;MACH,CAAC,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,CACH,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-card-form',\n  shadow: false,\n})\nexport class CardForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  /**\n   * Boolean indicating if the Card Form should render in a single line\n   */\n  @Prop() singleLine: boolean = false;\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-card-form#cardFormReady\n   */\n\n  @Event() cardFormReady: EventEmitter;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    this.cardFormReady.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    this.cardFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    this.cardFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate(): Promise<{ isValid: boolean }> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  /**\n    *  Manually resizes the iframe to fit the contents of the iframe\n    */\n  @Method()\n  async resize(): Promise<void> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.resize();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"card\"\n        single-line={this.singleLine}\n        payment-method-form-ready={this.cardFormReady}\n        payment-method-form-tokenize={this.cardFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"]}

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

@@ -26,17 +26,24 @@ const handleTokenizeClick = async (cardForm, paymentMethodData) => {
   const tokenizeResponse = await cardForm.tokenize('CLIENT_ID', paymentMethodData);
   console.log(tokenizeResponse);
 };
+const handleResizeClick = async (cardForm) => {
+  await cardForm.resize();
+};
 const handleReady = () => {
   console.log('card form is ready');
   const cardForm = document.querySelector('justifi-card-form');
   const validateBtn = document.querySelector('#validate-btn');
   const tokenizeBtn = document.querySelector('#tokenize-btn');
+  const resizeBtn = document.querySelector('#resize-btn');
   validateBtn === null || validateBtn === void 0 ? void 0 : validateBtn.addEventListener('click', () => {
     handleValidateClick(cardForm);
   });
   tokenizeBtn === null || tokenizeBtn === void 0 ? void 0 : tokenizeBtn.addEventListener('click', () => {
     handleTokenizeClick(cardForm, {});
   });
+  resizeBtn === null || resizeBtn === void 0 ? void 0 : resizeBtn.addEventListener('click', () => {
+    handleResizeClick(cardForm);
+  });
 };
 const addEvents = () => {
   addEventListener('cardFormReady', handleReady);
@@ -57,6 +64,7 @@ const FormButtons = `
   <div class="button-bar">
     <button id="validate-btn">Validate</button>
     <button id="tokenize-btn">Tokenize</button>
+    <button id="resize-btn">Resize</button>
   </div>`;
 const Template = (args) => {
   const includeButtons = true;
@@ -87,7 +95,7 @@ SingleLine.args = {
   'single-line': true,
 };
 const styledVariables = `
---jfi-layout-padding: 0;
+  --jfi-layout-padding: 4px;
   --jfi-layout-form-control-spacing-x: .5rem;
   --jfi-layout-form-control-spacing-y: 1rem;
   --jfi-form-label-font-weight: 700;
@@ -105,6 +113,7 @@ const styledVariables = `
   --jfi-form-control-border-right-width: 0;
   --jfi-form-control-border-radius: 4px 4px 0 0;
   --jfi-form-control-border-style: solid;
+  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   --jfi-form-control-box-shadow-focus: none;
   --jfi-form-control-box-shadow-error-focus: none;
   --jfi-form-control-border-style: solid;

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

@@ -1 +1 @@
-{"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"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","sourcesContent":["interface CardFormStoryArgs {\n  'iframe-origin': string;\n  'single-line': boolean;\n  'validation-mode': string;\n  'css-variables': string;\n}\n\nconst isDev = process.env.NODE_ENV === 'development';\n\nexport default {\n  title: 'Components/CardForm',\n  component: 'justifi-card-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\n  },\n  decorators: [\n    story => `\n      ${story()}\n      <script>${addEvents()}</script>\n    `,\n  ],\n};\n\nconst handleValidateClick = async (cardForm: HTMLJustifiCardFormElement) => {\n  const valid = await cardForm.validate();\n  console.log(valid);\n};\nconst handleTokenizeClick = async (cardForm: HTMLJustifiCardFormElement, paymentMethodData) => {\n  const tokenizeResponse = await cardForm.tokenize('CLIENT_ID', paymentMethodData);\n  console.log(tokenizeResponse);\n};\nconst handleReady = () => {\n  console.log('card form is ready');\n  const cardForm = document.querySelector('justifi-card-form') as HTMLJustifiCardFormElement;\n  const validateBtn = document.querySelector('#validate-btn');\n  const tokenizeBtn = document.querySelector('#tokenize-btn');\n  validateBtn?.addEventListener('click', () => {\n    handleValidateClick(cardForm);\n  });\n  tokenizeBtn?.addEventListener('click', () => {\n    handleTokenizeClick(cardForm, {});\n  });\n};\n\nconst addEvents = () => {\n  addEventListener('cardFormReady', handleReady);\n};\n\nconst FormButtons = `\n  <style>\n    .button-bar {\n      display: flex;\n      aligin-items: center;\n      padding: 10px;\n    }\n    .button-bar button {\n      margin-right: 10px;\n      border-radius: 3px;\n      border: 1px solid black;\n    }\n  </style>\n  <div class=\"button-bar\">\n    <button id=\"validate-btn\">Validate</button>\n    <button id=\"tokenize-btn\">Tokenize</button>\n  </div>`;\n\nconst Template = (args: CardFormStoryArgs) => {\n  const includeButtons = true;\n\n  return `\n    <div>\n      <style>\n      :root {\n        ${args['css-variables'] || ''}\n      }\n      </style>\n      <justifi-card-form\n        data-testid=\"card-form-iframe\"\n        validation-mode='${args['validation-mode'] || 'onSubmit'}'\n        iframe-origin='${args['iframe-origin'] || ''}'\n        single-line='${args['single-line']}'\n      />\n    </div>\n    ${includeButtons ? FormButtons : ''}\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  'validation-mode': 'onSubmit',\n  'single-line': false,\n};\n\nexport const SingleLine = Template.bind({});\nSingleLine.args = {\n  'single-line': true,\n};\n\nconst styledVariables = `\n--jfi-layout-padding: 0;\n  --jfi-layout-form-control-spacing-x: .5rem;\n  --jfi-layout-form-control-spacing-y: 1rem;\n  --jfi-form-label-font-weight: 700;\n  --jfi-form-label-font-family: sans-serif;\n  --jfi-form-label-margin: 0 0 .5rem 0;\n  --jfi-form-control-background-color: #F4F4F6;\n  --jfi-form-control-background-color-hover: #EEEEF5;\n  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n  --jfi-form-control-border-color-focus: #fccc32;\n  --jfi-form-control-border-color-error: #C12727;\n  --jfi-form-control-border-top-width: 0;\n  --jfi-form-control-border-left-width: 0;\n  --jfi-form-control-border-bottom-width: 1px;\n  --jfi-form-control-border-right-width: 0;\n  --jfi-form-control-border-radius: 4px 4px 0 0;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-box-shadow-focus: none;\n  --jfi-form-control-box-shadow-error-focus: none;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-color: #212529;\n  --jfi-form-control-font-size: 1rem;\n  --jfi-form-control-font-weight: 400;\n  --jfi-form-control-line-height: 2;\n  --jfi-form-control-margin: 0;\n  --jfi-form-control-padding: .5rem .875rem;\n  --jfi-error-message-color: #C12727;\n  --jfi-error-message-margin: .25rem 0 0 0;\n  --jfi-error-message-font-size: .875rem;\n`;\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'css-variables': styledVariables,\n};\n"]}
+{"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"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","sourcesContent":["interface CardFormStoryArgs {\n  'iframe-origin': string;\n  'single-line': boolean;\n  'validation-mode': string;\n  'css-variables': string;\n}\n\nconst isDev = process.env.NODE_ENV === 'development';\n\nexport default {\n  title: 'Components/CardForm',\n  component: 'justifi-card-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\n  },\n  decorators: [\n    story => `\n      ${story()}\n      <script>${addEvents()}</script>\n    `,\n  ],\n};\n\nconst handleValidateClick = async (cardForm: HTMLJustifiCardFormElement) => {\n  const valid = await cardForm.validate();\n  console.log(valid);\n};\nconst handleTokenizeClick = async (cardForm: HTMLJustifiCardFormElement, paymentMethodData) => {\n  const tokenizeResponse = await cardForm.tokenize('CLIENT_ID', paymentMethodData);\n  console.log(tokenizeResponse);\n};\nconst handleResizeClick = async (cardForm: HTMLJustifiCardFormElement) => {\n  await cardForm.resize();\n};\nconst handleReady = () => {\n  console.log('card form is ready');\n  const cardForm = document.querySelector('justifi-card-form') as HTMLJustifiCardFormElement;\n  const validateBtn = document.querySelector('#validate-btn');\n  const tokenizeBtn = document.querySelector('#tokenize-btn');\n  const resizeBtn = document.querySelector('#resize-btn');\n  validateBtn?.addEventListener('click', () => {\n    handleValidateClick(cardForm);\n  });\n  tokenizeBtn?.addEventListener('click', () => {\n    handleTokenizeClick(cardForm, {});\n  });\n  resizeBtn?.addEventListener('click', () => {\n    handleResizeClick(cardForm);\n  });\n};\n\nconst addEvents = () => {\n  addEventListener('cardFormReady', handleReady);\n};\n\nconst FormButtons = `\n  <style>\n    .button-bar {\n      display: flex;\n      aligin-items: center;\n      padding: 10px;\n    }\n    .button-bar button {\n      margin-right: 10px;\n      border-radius: 3px;\n      border: 1px solid black;\n    }\n  </style>\n  <div class=\"button-bar\">\n    <button id=\"validate-btn\">Validate</button>\n    <button id=\"tokenize-btn\">Tokenize</button>\n    <button id=\"resize-btn\">Resize</button>\n  </div>`;\n\nconst Template = (args: CardFormStoryArgs) => {\n  const includeButtons = true;\n\n  return `\n    <div>\n      <style>\n      :root {\n        ${args['css-variables'] || ''}\n      }\n      </style>\n      <justifi-card-form\n        data-testid=\"card-form-iframe\"\n        validation-mode='${args['validation-mode'] || 'onSubmit'}'\n        iframe-origin='${args['iframe-origin'] || ''}'\n        single-line='${args['single-line']}'\n      />\n    </div>\n    ${includeButtons ? FormButtons : ''}\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  'validation-mode': 'onSubmit',\n  'single-line': false,\n};\n\nexport const SingleLine = Template.bind({});\nSingleLine.args = {\n  'single-line': true,\n};\n\nconst styledVariables = `\n  --jfi-layout-padding: 4px;\n  --jfi-layout-form-control-spacing-x: .5rem;\n  --jfi-layout-form-control-spacing-y: 1rem;\n  --jfi-form-label-font-weight: 700;\n  --jfi-form-label-font-family: sans-serif;\n  --jfi-form-label-margin: 0 0 .5rem 0;\n  --jfi-form-control-background-color: #F4F4F6;\n  --jfi-form-control-background-color-hover: #EEEEF5;\n  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n  --jfi-form-control-border-color-focus: #fccc32;\n  --jfi-form-control-border-color-error: #C12727;\n  --jfi-form-control-border-top-width: 0;\n  --jfi-form-control-border-left-width: 0;\n  --jfi-form-control-border-bottom-width: 1px;\n  --jfi-form-control-border-right-width: 0;\n  --jfi-form-control-border-radius: 4px 4px 0 0;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  --jfi-form-control-box-shadow-focus: none;\n  --jfi-form-control-box-shadow-error-focus: none;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-color: #212529;\n  --jfi-form-control-font-size: 1rem;\n  --jfi-form-control-font-weight: 400;\n  --jfi-form-control-line-height: 2;\n  --jfi-form-control-margin: 0;\n  --jfi-form-control-padding: .5rem .875rem;\n  --jfi-error-message-color: #C12727;\n  --jfi-error-message-margin: .25rem 0 0 0;\n  --jfi-error-message-font-size: .875rem;\n`;\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'css-variables': styledVariables,\n};\n"]}

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

@@ -67,7 +67,7 @@ Styled.args = {
   'cssVariables': `
   --jfi-primary-color: #212529;
 
-  --jfi-layout-padding: 0;
+  --jfi-layout-padding: 4px;
   --jfi-layout-form-control-spacing-x: .5rem;
   --jfi-layout-form-control-spacing-y: 1rem;
   --jfi-form-label-font-weight: 700;
@@ -85,6 +85,7 @@ Styled.args = {
   --jfi-form-control-border-right-width: 0;
   --jfi-form-control-border-radius: 4px 4px 0 0;
   --jfi-form-control-border-style: solid;
+  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   --jfi-form-control-box-shadow-focus: none;
   --jfi-form-control-box-shadow-error-focus: none;
   --jfi-form-control-border-style: solid;

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

@@ -1 +1 @@
-{"version":3,"file":"payment-form.stories.js","sourceRoot":"","sources":["../../../../src/components/payment-form/payment-form.stories.ts"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AAYrD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,sBAAsB;EACjC,QAAQ,EAAE;IACR,eAAe,EAAE;MACf,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QAC7B,QAAQ,EAAE,OAAO;OAClB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA0B,EAAE,EAAE;EAC9C,wFAAwF;EACxF,OAAO;;;eAGM,IAAI,CAAC,IAAI;wBACA,IAAI,CAAC,cAAc,CAAC;iBAC3B,IAAI,CAAC,KAAK;qBACN,IAAI,CAAC,WAAW,CAAC;sBAChB,IAAI,CAAC,YAAY,CAAC;8BACV,IAAI,CAAC,oBAAoB,CAAC;yBAC/B,IAAI,CAAC,eAAe,CAAC;;;;;UAKpC,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;GAexB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,cAAc,EAAE,IAAI;EACpB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,WAAW,EAAE,EAAE;EACf,YAAY,EAAE,EAAE;EAChB,oBAAoB,EAAE,EAAE;EACxB,eAAe,EAAE,EAAE;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,cAAc,EAAE,IAAI;EACpB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,WAAW,EAAE,EAAE;EACf,YAAY,EAAE,EAAE;EAChB,oBAAoB,EAAE,EAAE;EACxB,eAAe,EAAE,EAAE;EACnB,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEf;CACF,CAAC","sourcesContent":["const isDev = process.env.NODE_ENV === 'development';\n\ninterface PaymentFormStoryArgs {\n  'bank-account': boolean;\n  'card': boolean;\n  'email': string;\n  'client-id': string;\n  'account-id': string;\n  'submit-button-text': string;\n  'cssVariables': string;\n}\n\nexport default {\n  title: 'Components/PaymentForm',\n  component: 'justifi-payment-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\n  },\n};\n\nconst Template = (args: PaymentFormStoryArgs) => {\n  // The <div> here should be replaced by a `display` property in the cardForm potentially\n  return `\n    <div>\n      <justifi-payment-form\n        card=${args.card}\n        bank-account='${args['bank-account']}'\n        email='${args.email}'\n        client-id='${args['client-id']}'\n        account-id='${args['account-id']}'\n        submit-button-text='${args['submit-button-text']}'\n        iframe-origin='${args['iframe-origin']}'\n      />\n    </div>\n    <style>\n      :root {\n        ${args.cssVariables}\n      }\n    </style>\n    <script>\n    (async () => {\n      await customElements.whenDefined('justifi-payment-form');\n      const paymentForm = document.querySelector('justifi-payment-form');\n      paymentForm.addEventListener('submitted', async (event) => {\n        // here is where you would submit a payment with the token\n        console.log(event.detail);\n        // after the payment succeeds or fails, the form submit button can be enabled again\n        await paymentForm.enableSubmitButton();\n      });\n    })()\n    </script>\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  'bank-account': true,\n  'card': true,\n  'email': '',\n  'client-id': '',\n  'account-id': '',\n  'submit-button-text': '',\n  'iframe-origin': '',\n};\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'bank-account': true,\n  'card': true,\n  'email': '',\n  'client-id': '',\n  'account-id': '',\n  'submit-button-text': '',\n  'iframe-origin': '',\n  'cssVariables': `\n  --jfi-primary-color: #212529;\n\n  --jfi-layout-padding: 0;\n  --jfi-layout-form-control-spacing-x: .5rem;\n  --jfi-layout-form-control-spacing-y: 1rem;\n  --jfi-form-label-font-weight: 700;\n  --jfi-form-label-font-family: sans-serif;\n  --jfi-form-label-margin: 0 0 .5rem 0;\n  --jfi-form-control-background-color: #F4F4F6;\n  --jfi-form-control-background-color-hover: #EEEEF5;\n  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n  --jfi-form-control-border-color-focus: #fccc32;\n  --jfi-form-control-border-color-error: #C12727;\n  --jfi-form-control-border-top-width: 0;\n  --jfi-form-control-border-left-width: 0;\n  --jfi-form-control-border-bottom-width: 1px;\n  --jfi-form-control-border-right-width: 0;\n  --jfi-form-control-border-radius: 4px 4px 0 0;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-box-shadow-focus: none;\n  --jfi-form-control-box-shadow-error-focus: none;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-color: #212529;\n  --jfi-form-control-font-size: 1rem;\n  --jfi-form-control-font-weight: 400;\n  --jfi-form-control-line-height: 2;\n  --jfi-form-control-margin: 0;\n  --jfi-form-control-padding: .5rem .875rem;\n  --jfi-error-message-color: #C12727;\n  --jfi-error-message-margin: .25rem 0 0 0;\n  --jfi-error-message-font-size: .875rem;\n\n  --jfi-submit-button-color: white;\n  --jfi-submit-button-background-color: #3F3F47;\n  --jfi-submit-button-border-color: var(--jfi-primary-color);\n  --jfi-submit-button-padding: 0.375rem 0.75rem;\n  --jfi-submit-button-font-size: 1rem;\n  --jfi-submit-button-border-radius: 1px;\n  --jfi-submit-button-color-hover: white;\n  --jfi-submit-button-background-color-hover: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-hover: var(--jfi-primary-color);\n  --jfi-submit-button-color-focus: white;\n  --jfi-submit-button-background-color-focus: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-focus: var(--jfi-primary-color);\n  --jfi-submit-button-color-active: white;\n  --jfi-submit-button-background-color-active: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-active: var(--jfi-primary-color);\n  --jfi-submit-button-width: 100%;\n  --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n\n  --jfi-radio-button-color: var(--jfi-primary-color);\n  --jfi-radio-button-background-color: transparent;\n  --jfi-radio-button-color-selected: white;\n  --jfi-radio-button-background-color-selected: var(--jfi-primary-color);\n  --jfi-radio-button-border-color: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-selected: var(--jfi-primary-color);\n  --jfi-radio-button-padding: 0.375rem 0.75rem;\n  --jfi-radio-button-font-size: 1rem;\n  --jfi-radio-button-color-hover: var(--jfi-primary-color);\n  --jfi-radio-button-color-selected-hover: white;\n  --jfi-radio-button-background-color-hover: transparent;\n  --jfi-radio-button-background-color-selected-hover: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-selected-hover: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-hover: var(--jfi-primary-color);\n  --jfi-radio-button-group-width: 100%;\n  `,\n};\n"]}
+{"version":3,"file":"payment-form.stories.js","sourceRoot":"","sources":["../../../../src/components/payment-form/payment-form.stories.ts"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AAYrD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,sBAAsB;EACjC,QAAQ,EAAE;IACR,eAAe,EAAE;MACf,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QAC7B,QAAQ,EAAE,OAAO;OAClB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA0B,EAAE,EAAE;EAC9C,wFAAwF;EACxF,OAAO;;;eAGM,IAAI,CAAC,IAAI;wBACA,IAAI,CAAC,cAAc,CAAC;iBAC3B,IAAI,CAAC,KAAK;qBACN,IAAI,CAAC,WAAW,CAAC;sBAChB,IAAI,CAAC,YAAY,CAAC;8BACV,IAAI,CAAC,oBAAoB,CAAC;yBAC/B,IAAI,CAAC,eAAe,CAAC;;;;;UAKpC,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;GAexB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,cAAc,EAAE,IAAI;EACpB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,WAAW,EAAE,EAAE;EACf,YAAY,EAAE,EAAE;EAChB,oBAAoB,EAAE,EAAE;EACxB,eAAe,EAAE,EAAE;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,cAAc,EAAE,IAAI;EACpB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,WAAW,EAAE,EAAE;EACf,YAAY,EAAE,EAAE;EAChB,oBAAoB,EAAE,EAAE;EACxB,eAAe,EAAE,EAAE;EACnB,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEf;CACF,CAAC","sourcesContent":["const isDev = process.env.NODE_ENV === 'development';\n\ninterface PaymentFormStoryArgs {\n  'bank-account': boolean;\n  'card': boolean;\n  'email': string;\n  'client-id': string;\n  'account-id': string;\n  'submit-button-text': string;\n  'cssVariables': string;\n}\n\nexport default {\n  title: 'Components/PaymentForm',\n  component: 'justifi-payment-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\n  },\n};\n\nconst Template = (args: PaymentFormStoryArgs) => {\n  // The <div> here should be replaced by a `display` property in the cardForm potentially\n  return `\n    <div>\n      <justifi-payment-form\n        card=${args.card}\n        bank-account='${args['bank-account']}'\n        email='${args.email}'\n        client-id='${args['client-id']}'\n        account-id='${args['account-id']}'\n        submit-button-text='${args['submit-button-text']}'\n        iframe-origin='${args['iframe-origin']}'\n      />\n    </div>\n    <style>\n      :root {\n        ${args.cssVariables}\n      }\n    </style>\n    <script>\n    (async () => {\n      await customElements.whenDefined('justifi-payment-form');\n      const paymentForm = document.querySelector('justifi-payment-form');\n      paymentForm.addEventListener('submitted', async (event) => {\n        // here is where you would submit a payment with the token\n        console.log(event.detail);\n        // after the payment succeeds or fails, the form submit button can be enabled again\n        await paymentForm.enableSubmitButton();\n      });\n    })()\n    </script>\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  'bank-account': true,\n  'card': true,\n  'email': '',\n  'client-id': '',\n  'account-id': '',\n  'submit-button-text': '',\n  'iframe-origin': '',\n};\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'bank-account': true,\n  'card': true,\n  'email': '',\n  'client-id': '',\n  'account-id': '',\n  'submit-button-text': '',\n  'iframe-origin': '',\n  'cssVariables': `\n  --jfi-primary-color: #212529;\n\n  --jfi-layout-padding: 4px;\n  --jfi-layout-form-control-spacing-x: .5rem;\n  --jfi-layout-form-control-spacing-y: 1rem;\n  --jfi-form-label-font-weight: 700;\n  --jfi-form-label-font-family: sans-serif;\n  --jfi-form-label-margin: 0 0 .5rem 0;\n  --jfi-form-control-background-color: #F4F4F6;\n  --jfi-form-control-background-color-hover: #EEEEF5;\n  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n  --jfi-form-control-border-color-focus: #fccc32;\n  --jfi-form-control-border-color-error: #C12727;\n  --jfi-form-control-border-top-width: 0;\n  --jfi-form-control-border-left-width: 0;\n  --jfi-form-control-border-bottom-width: 1px;\n  --jfi-form-control-border-right-width: 0;\n  --jfi-form-control-border-radius: 4px 4px 0 0;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  --jfi-form-control-box-shadow-focus: none;\n  --jfi-form-control-box-shadow-error-focus: none;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-color: #212529;\n  --jfi-form-control-font-size: 1rem;\n  --jfi-form-control-font-weight: 400;\n  --jfi-form-control-line-height: 2;\n  --jfi-form-control-margin: 0;\n  --jfi-form-control-padding: .5rem .875rem;\n  --jfi-error-message-color: #C12727;\n  --jfi-error-message-margin: .25rem 0 0 0;\n  --jfi-error-message-font-size: .875rem;\n\n  --jfi-submit-button-color: white;\n  --jfi-submit-button-background-color: #3F3F47;\n  --jfi-submit-button-border-color: var(--jfi-primary-color);\n  --jfi-submit-button-padding: 0.375rem 0.75rem;\n  --jfi-submit-button-font-size: 1rem;\n  --jfi-submit-button-border-radius: 1px;\n  --jfi-submit-button-color-hover: white;\n  --jfi-submit-button-background-color-hover: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-hover: var(--jfi-primary-color);\n  --jfi-submit-button-color-focus: white;\n  --jfi-submit-button-background-color-focus: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-focus: var(--jfi-primary-color);\n  --jfi-submit-button-color-active: white;\n  --jfi-submit-button-background-color-active: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-active: var(--jfi-primary-color);\n  --jfi-submit-button-width: 100%;\n  --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n\n  --jfi-radio-button-color: var(--jfi-primary-color);\n  --jfi-radio-button-background-color: transparent;\n  --jfi-radio-button-color-selected: white;\n  --jfi-radio-button-background-color-selected: var(--jfi-primary-color);\n  --jfi-radio-button-border-color: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-selected: var(--jfi-primary-color);\n  --jfi-radio-button-padding: 0.375rem 0.75rem;\n  --jfi-radio-button-font-size: 1rem;\n  --jfi-radio-button-color-hover: var(--jfi-primary-color);\n  --jfi-radio-button-color-selected-hover: white;\n  --jfi-radio-button-background-color-hover: transparent;\n  --jfi-radio-button-background-color-selected-hover: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-selected-hover: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-hover: var(--jfi-primary-color);\n  --jfi-radio-button-group-width: 100%;\n  `,\n};\n"]}