npm - @justifi/webcomponents - Versions diffs - 4.0.6 → 4.2.0 - Mend

@justifi/webcomponents 4.0.6 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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}
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;;;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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}
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;;;;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 CHANGED Viewed

@@ -22,7 +22,7 @@ const MessageEventType = {
 };
 const name = "@justifi/webcomponents";
-const version = "4.0.6";
+const version = "4.2.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]) {

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

	@@ -1 +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}
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 @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 = 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"AAOA,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AAErD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,mBAAmB;EAC9B,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;EACD,UAAU,EAAE;IACV,KAAK,CAAC,EAAE,CAAC;QACL,KAAK,EAAE;gBACC,SAAS,EAAE;KACtB;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACzE,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,QAAoC,EAAE,iBAAiB,EAAE,EAAE;EAC5F,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,oBAAoB,CAAC,CAAC;EAClC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAA+B,CAAC;EAC3F,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,eAAe,EAAE,WAAW,CAAC,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG~~;;;;;;;;;;;;;;;;SAgBX~~,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAuB,EAAE,EAAE;EAC3C,MAAM,cAAc,GAAG,IAAI,CAAC;EAE5B,OAAO;;;;UAIC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;;;;;2BAKV,IAAI,CAAC,iBAAiB,CAAC,IAAI,UAAU;yBACvC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;uBAC7B,IAAI,CAAC,aAAa,CAAC;;;MAGpC,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;GACpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,iBAAiB,EAAE,UAAU;EAC7B,aAAa,EAAE,KAAK;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;EAChB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,eAAe,GAAG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BvB~~,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,eAAe,EAAE,eAAe;CACjC,CAAC","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"]}
1	+ {"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"AAOA,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AAErD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,mBAAmB;EAC9B,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;EACD,UAAU,EAAE;IACV,KAAK,CAAC,EAAE,CAAC;QACL,KAAK,EAAE;gBACC,SAAS,EAAE;KACtB;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACzE,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,QAAoC,EAAE,iBAAiB,EAAE,EAAE;EAC5F,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,iBAAiB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACvE,MAAM,QAAQ,CAAC,MAAM,EAAE,CAAC;AAC1B,CAAC,CAAC;AACF,MAAM,WAAW,GAAG,GAAG,EAAE;EACvB,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;EAClC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAA+B,CAAC;EAC3F,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACxD,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;EACH,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IACxC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;EAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;EACrB,gBAAgB,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;SAiBX,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAuB,EAAE,EAAE;EAC3C,MAAM,cAAc,GAAG,IAAI,CAAC;EAE5B,OAAO;;;;UAIC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;;;;;2BAKV,IAAI,CAAC,iBAAiB,CAAC,IAAI,UAAU;yBACvC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;uBAC7B,IAAI,CAAC,aAAa,CAAC;;;MAGpC,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;GACpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,iBAAiB,EAAE,UAAU;EAC7B,aAAa,EAAE,KAAK;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;EAChB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,eAAe,EAAE,eAAe;CACjC,CAAC","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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"]}