@justifi/webcomponents 4.2.2 → 4.5.0

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

@@ -1,5 +1,6 @@
-import { h, Host } from '@stencil/core';
-import { PaymentMethodTypes } from '../../api';
+import { h, Host } from "@stencil/core";
+import { PaymentMethodTypes } from "../../api";
+import { extractComputedFontsToLoad } from "../../utils/utils";
 export class PaymentForm {
   constructor() {
     this.bankAccount = undefined;
@@ -10,6 +11,7 @@ export class PaymentForm {
     this.accountId = undefined;
     this.submitButtonText = undefined;
     this.submitButtonEnabled = true;
+    this.hasLoadedFonts = false;
     this.isLoading = false;
     this.selectedPaymentMethodType = undefined;
     this.allowedPaymentMethodTypes = [];
@@ -25,6 +27,10 @@ export class PaymentForm {
       this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);
     }
     this.selectedPaymentMethodType = this.allowedPaymentMethodTypes[0];
+    if (!this.hasLoadedFonts) {
+      this.loadFontsOnParent();
+      this.hasLoadedFonts = true;
+    }
   }
   paymentMethodSelectedHandler(event) {
     const paymentMethodType = event.detail;
@@ -36,6 +42,18 @@ export class PaymentForm {
   async enableSubmitButton() {
     this.submitButtonEnabled = true;
   }
+  async loadFontsOnParent() {
+    const parent = document.body;
+    const fontsToLoad = extractComputedFontsToLoad();
+    if (!parent || !fontsToLoad) {
+      return null;
+    }
+    // This approach is needed to load the font in a parent of the component
+    const fonts = document.createElement('link');
+    fonts.rel = 'stylesheet';
+    fonts.href = `https://fonts.googleapis.com/css2?family=${fontsToLoad}&display=swap`;
+    parent.append(fonts);
+  }
   async submit(event) {
     event.preventDefault();
     if (!this.paymentMethodFormRef || !this.billingFormRef)
@@ -60,7 +78,7 @@ export class PaymentForm {
         if (el) {
           this.billingFormRef = el;
         }
-      } })), h("div", { class: "col-12" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
+      } })), h("slot", { name: 'insurance' }), h("div", { class: "col-12" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
       h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")) :
       this.submitButtonText || 'Submit')))));
   }
@@ -202,6 +220,7 @@ export class PaymentForm {
   static get states() {
     return {
       "submitButtonEnabled": {},
+      "hasLoadedFonts": {},
       "isLoading": {},
       "selectedPaymentMethodType": {},
       "allowedPaymentMethodTypes": {}
@@ -224,7 +243,8 @@ export class PaymentForm {
           "references": {
             "CreatePaymentMethodResponse": {
               "location": "import",
-              "path": "../payment-method-form/payment-method-responses"
+              "path": "../payment-method-form/payment-method-responses",
+              "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
             }
           }
         }
@@ -241,11 +261,13 @@ export class PaymentForm {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "BillingFormFields": {
               "location": "import",
-              "path": "../billing-form/billing-form-schema"
+              "path": "../billing-form/billing-form-schema",
+              "id": "src/components/billing-form/billing-form-schema.ts::BillingFormFields"
             }
           },
           "return": "Promise<void>"
@@ -261,7 +283,8 @@ export class PaymentForm {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -270,6 +293,23 @@ export class PaymentForm {
           "text": "",
           "tags": []
         }
+      },
+      "loadFontsOnParent": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"payment-form.js","sourceRoot":"","sources":["../../../../src/components/payment-form/payment-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\nimport { PaymentMethodTypes } from '../../api';\nimport { BillingFormFields } from '../billing-form/billing-form-schema';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\n\n@Component({\n  tag: 'justifi-payment-form',\n  styleUrl: 'payment-form.scss',\n  shadow: true,\n})\nexport class PaymentForm {\n  @Prop() bankAccount?: boolean;\n  @Prop() card?: boolean;\n  @Prop() email?: string;\n  @Prop() iframeOrigin?: string;\n  @Prop() clientId: string;\n  @Prop() accountId?: string;\n  @Prop() submitButtonText?: string;\n  @Event() submitted: EventEmitter<CreatePaymentMethodResponse>;\n  @State() submitButtonEnabled: boolean = true;\n  @State() isLoading: boolean = false;\n  @State() selectedPaymentMethodType: PaymentMethodTypes;\n  @State() allowedPaymentMethodTypes: PaymentMethodTypes[] = [];\n\n  private paymentMethodFormRef?: HTMLJustifiPaymentMethodFormElement;\n  private billingFormRef?: HTMLJustifiBillingFormElement;\n\n  connectedCallback() {\n    if (this.card) {\n      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);\n    }\n    if (this.bankAccount) {\n      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.bankAccount);\n    }\n    if (!this.allowedPaymentMethodTypes.length) {\n      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);\n    }\n    this.selectedPaymentMethodType = this.allowedPaymentMethodTypes[0];\n  }\n\n  @Listen('paymentMethodSelected')\n  paymentMethodSelectedHandler(event: CustomEvent) {\n    const paymentMethodType: PaymentMethodTypes = event.detail;\n    this.selectedPaymentMethodType = paymentMethodType;\n  }\n\n  @Method()\n  async fillBillingForm(fields: BillingFormFields) {\n    this.billingFormRef.fill(fields);\n  }\n\n  @Method()\n  async enableSubmitButton() {\n    this.submitButtonEnabled = true;\n  }\n\n  async submit(event) {\n    event.preventDefault();\n    if (!this.paymentMethodFormRef || !this.billingFormRef) return;\n\n    const billingFormValidation = await this.billingFormRef.validate();\n    const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();\n\n    if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid) return;\n\n    this.isLoading = true;\n\n    const billingFormFieldValues = await this.billingFormRef.getValues();\n    const paymentMethodData = { email: this.email, ...billingFormFieldValues };\n    const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);\n\n    this.submitted.emit(tokenizeResponse);\n    this.isLoading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <form class=\"row gy-3\">\n          {this.allowedPaymentMethodTypes.length > 1 && (\n            <div class=\"col-12\">\n              <justifi-payment-method-selector paymentMethodTypes={this.allowedPaymentMethodTypes} selectedPaymentMethodType={this.selectedPaymentMethodType} />\n            </div>\n          )}\n          <div class=\"col-12\">\n            <justifi-payment-method-form\n              payment-method-form-type={this.selectedPaymentMethodType}\n              iframe-origin={this.iframeOrigin}\n              ref={el => {\n                if (el) {\n                  this.paymentMethodFormRef = el;\n                }\n              }}\n            />\n          </div>\n          <div class=\"col-12\">\n            <justifi-billing-form\n              legend=\"Billing Info\"\n              ref={el => {\n                if (el) {\n                  this.billingFormRef = el;\n                }\n              }}\n            />\n          </div>\n          <div class=\"col-12\">\n            <button\n              type=\"submit\"\n              onClick={event => this.submit(event)}\n              disabled={!this.submitButtonEnabled || this.isLoading}\n              class={`btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`}\n            >\n              {\n                this.isLoading ?\n                <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                  <span class=\"visually-hidden\">Loading...</span>\n                </div> :\n                this.submitButtonText || 'Submit'\n              }\n            </button>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"payment-form.js","sourceRoot":"","sources":["../../../../src/components/payment-form/payment-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\nimport { PaymentMethodTypes } from '../../api';\nimport { BillingFormFields } from '../billing-form/billing-form-schema';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { extractComputedFontsToLoad } from '../../utils/utils';\n\n@Component({\n  tag: 'justifi-payment-form',\n  styleUrl: 'payment-form.scss',\n  shadow: true,\n})\nexport class PaymentForm {\n  @Prop() bankAccount?: boolean;\n  @Prop() card?: boolean;\n  @Prop() email?: string;\n  @Prop() iframeOrigin?: string;\n  @Prop() clientId: string;\n  @Prop() accountId?: string;\n  @Prop() submitButtonText?: string;\n  @Event() submitted: EventEmitter<CreatePaymentMethodResponse>;\n  @State() submitButtonEnabled: boolean = true;\n  @State() hasLoadedFonts: boolean = false;\n  @State() isLoading: boolean = false;\n  @State() selectedPaymentMethodType: PaymentMethodTypes;\n  @State() allowedPaymentMethodTypes: PaymentMethodTypes[] = [];\n\n  private paymentMethodFormRef?: HTMLJustifiPaymentMethodFormElement;\n  private billingFormRef?: HTMLJustifiBillingFormElement;\n\n  connectedCallback() {\n    if (this.card) {\n      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);\n    }\n    if (this.bankAccount) {\n      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.bankAccount);\n    }\n    if (!this.allowedPaymentMethodTypes.length) {\n      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);\n    }\n    this.selectedPaymentMethodType = this.allowedPaymentMethodTypes[0];\n\n    if (!this.hasLoadedFonts) {\n      this.loadFontsOnParent();\n      this.hasLoadedFonts = true;\n    }\n  }\n\n  @Listen('paymentMethodSelected')\n  paymentMethodSelectedHandler(event: CustomEvent) {\n    const paymentMethodType: PaymentMethodTypes = event.detail;\n    this.selectedPaymentMethodType = paymentMethodType;\n  }\n\n  @Method()\n  async fillBillingForm(fields: BillingFormFields) {\n    this.billingFormRef.fill(fields);\n  }\n\n  @Method()\n  async enableSubmitButton() {\n    this.submitButtonEnabled = true;\n  }\n\n  @Method()\n  async loadFontsOnParent() {\n\n    const parent = document.body;\n    const fontsToLoad = extractComputedFontsToLoad();\n    if (!parent || !fontsToLoad) {\n      return null;\n    }\n\n    // This approach is needed to load the font in a parent of the component\n    const fonts = document.createElement('link');\n    fonts.rel = 'stylesheet';\n    fonts.href = `https://fonts.googleapis.com/css2?family=${fontsToLoad}&display=swap`;\n\n    parent.append(fonts);\n  }\n\n  async submit(event) {\n    event.preventDefault();\n    if (!this.paymentMethodFormRef || !this.billingFormRef) return;\n\n    const billingFormValidation = await this.billingFormRef.validate();\n    const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();\n\n    if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid) return;\n\n    this.isLoading = true;\n\n    const billingFormFieldValues = await this.billingFormRef.getValues();\n    const paymentMethodData = { email: this.email, ...billingFormFieldValues };\n    const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);\n\n    this.submitted.emit(tokenizeResponse);\n    this.isLoading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <form class=\"row gy-3\">\n          {this.allowedPaymentMethodTypes.length > 1 && (\n            <div class=\"col-12\">\n              <justifi-payment-method-selector paymentMethodTypes={this.allowedPaymentMethodTypes} selectedPaymentMethodType={this.selectedPaymentMethodType} />\n            </div>\n          )}\n          <div class=\"col-12\">\n            <justifi-payment-method-form\n              payment-method-form-type={this.selectedPaymentMethodType}\n              iframe-origin={this.iframeOrigin}\n              ref={el => {\n                if (el) {\n                  this.paymentMethodFormRef = el;\n                }\n              }}\n            />\n          </div>\n          <div class=\"col-12\">\n            <justifi-billing-form\n              legend=\"Billing Info\"\n              ref={el => {\n                if (el) {\n                  this.billingFormRef = el;\n                }\n              }}\n            />\n          </div>\n          <slot name='insurance' />\n          <div class=\"col-12\">\n            <button\n              type=\"submit\"\n              onClick={event => this.submit(event)}\n              disabled={!this.submitButtonEnabled || this.isLoading}\n              class={`btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`}\n            >\n              {\n                this.isLoading ?\n                <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                  <span class=\"visually-hidden\">Loading...</span>\n                </div> :\n                this.submitButtonText || 'Submit'\n              }\n            </button>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -66,12 +66,13 @@ Styled.args = {
   'iframe-origin': '',
   'cssVariables': `
   --jfi-primary-color: #212529;
-
+  --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';
+  --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;
   --jfi-layout-padding: 4px;
   --jfi-layout-form-control-spacing-x: .5rem;
   --jfi-layout-form-control-spacing-y: 1rem;
   --jfi-form-label-font-weight: 700;
-  --jfi-form-label-font-family: sans-serif;
+  --jfi-form-label-font-family: Calibri, sans-serif;
   --jfi-form-label-margin: 0 0 .5rem 0;
   --jfi-form-control-background-color: #F4F4F6;
   --jfi-form-control-background-color-hover: #EEEEF5;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEf;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  --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';\n  --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;\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: Calibri, 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"]}