npm - @justifi/webcomponents - Versions diffs - 4.5.0 → 4.5.1 - Mend

@justifi/webcomponents 4.5.0 → 4.5.1

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 (133) hide show

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;;;;;;EAsC1B,YAAY,CAAC,KAAkB;IAC7B,OAAO,CAAC,IAAI,CAAC,yGAAyG,CAAC,CAAC;IACxH,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACzB,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,+MAA+M,CAChN,CAAC;IACF,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3C,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,+MAA+M,CAChN,CAAC;IACF,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~~;;KAEG~~;EAEH,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 iframe has loaded\n * @event justifi-bank-account-form#ready\n /\n @Event() ready: 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 console.warn(`The 'bankAccountFormReady' event is deprecated in the next major release and will be renamed to 'ready'`);\n this.bankAccountFormReady.emit(event);\n this.ready.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n console.warn(\n `The 'bankAccountFormTokenize' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\n this.bankAccountFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n console.warn(\n `The 'bankAccountFormValidate' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\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"]}
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;;;;;;EAsC1B,YAAY,CAAC,KAAkB;IAC7B,OAAO,CAAC,IAAI,CAAC,yGAAyG,CAAC,CAAC;IACxH,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACzB,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,+MAA+M,CAChN,CAAC;IACF,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3C,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,+MAA+M,CAChN,CAAC;IACF,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;;;KAGG;EAEH,KAAK,CAAC,MAAM;IACV,OAAO,CAAC,IAAI,CACV,wKAAwK,CACzK,CAAC;IACF,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 iframe has loaded\n * @event justifi-bank-account-form#ready\n /\n @Event() ready: 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 console.warn(`The 'bankAccountFormReady' event is deprecated in the next major release and will be renamed to 'ready'`);\n this.bankAccountFormReady.emit(event);\n this.ready.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n console.warn(\n `The 'bankAccountFormTokenize' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\n this.bankAccountFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n console.warn(\n `The 'bankAccountFormValidate' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\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 * @deprecated This method will be removed in future releases.\n */\n @Method()\n async resize(): Promise<void> {\n console.warn(\n `The 'resize' method is deprecated and will be removed in the next major release. Please refer to the documentation for the migration process and alternative approach.`,\n );\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

@@ -52,9 +52,17 @@ export default {
         defaultValue: CSSVars,
       },
     },
+    'resize': {
+      description: 'Deprecated: This method will be removed in future releases.',
+      table: {
+        category: 'methods',
+      },
+    },
   },
   decorators: [
     story => `
+      <!-- Deprecated Notice -->
+      <p style="color: red; font-family: 'Roboto Mono', monospace;">Note: The 'resize' method is deprecated and will be removed in future releases.</p>
       ${story()}
       <script>${addEvents()}</script>
     `,

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCf,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,iBAAiB,GAAG,KAAK,EAAE,QAA2C,EAAE,EAAE;EAC9E,MAAM,QAAQ,CAAC,MAAM,EAAE,CAAC;AAC1B,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,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,sBAAsB,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;CAgBnB,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-load-google-font: 'Roboto Mono:wght@200;400;700;900&family=Agdasima';\n--jfi-layout-font-family: Roboto Mono;\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"]}
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-load-google-font: 'Roboto Mono:wght@200;400;700;900&family=Agdasima';\n--jfi-layout-font-family: Roboto Mono;\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 'resize': {\n description: 'Deprecated: This method will be removed in future releases.',\n table: {\n category: 'methods',\n },\n },\n },\n decorators: [\n story => `\n <!-- Deprecated Notice -->\n <p style=\"color: red; font-family: 'Roboto Mono', monospace;\">Note: The 'resize' method is deprecated and will be removed in future releases.</p>\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

@@ -39,8 +39,10 @@ export class CardForm {
   }
   /**
    *  Manually resizes the iframe to fit the contents of the iframe
+   *  @deprecated This method will be removed in future releases.
    */
   async resize() {
+    console.warn(`The 'resize' method is deprecated and will be removed in the next major release. Please refer to the documentation for the migration process and alternative approach.`);
     if (!this.childRef) {
       throw new Error('Cannot call validate');
     }
@@ -256,7 +258,10 @@ export class CardForm {
         },
         "docs": {
           "text": "Manually resizes the iframe to fit the contents of the iframe",
-          "tags": []
+          "tags": [{
+              "name": "deprecated",
+              "text": "This method will be removed in future releases."
+            }]
         }
       }
     };

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;;;EA+BnC,YAAY,CAAC,KAAkB;IAC7B,OAAO,CAAC,IAAI,CAAC,kGAAkG,CAAC,CAAC;IACjH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACzB,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,wMAAwM,CACzM,CAAC;IACF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,wMAAwM,CACzM,CAAC;IACF,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~~;;KAEG~~;EAEH,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\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 iframe has loaded\n * @event justifi-card-form#ready\n /\n\n @Event() ready: 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 console.warn(`The 'cardFormReady' event is deprecated in the next major release and will be renamed to 'ready'`);\n this.cardFormReady.emit(event);\n this.ready.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n console.warn(\n `The 'cardFormTokenize' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\n this.cardFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n console.warn(\n `The 'cardFormValidate' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\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"]}
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;;;EA+BnC,YAAY,CAAC,KAAkB;IAC7B,OAAO,CAAC,IAAI,CAAC,kGAAkG,CAAC,CAAC;IACjH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACzB,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,wMAAwM,CACzM,CAAC;IACF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,wMAAwM,CACzM,CAAC;IACF,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;;;KAGG;EAEH,KAAK,CAAC,MAAM;IACV,OAAO,CAAC,IAAI,CACV,wKAAwK,CACzK,CAAC;IACF,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\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 iframe has loaded\n * @event justifi-card-form#ready\n /\n\n @Event() ready: 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 console.warn(`The 'cardFormReady' event is deprecated in the next major release and will be renamed to 'ready'`);\n this.cardFormReady.emit(event);\n this.ready.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n console.warn(\n `The 'cardFormTokenize' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\n this.cardFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n console.warn(\n `The 'cardFormValidate' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\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 * @deprecated This method will be removed in future releases.\n */\n @Method()\n async resize(): Promise<void> {\n console.warn(\n `The 'resize' method is deprecated and will be removed in the next major release. Please refer to the documentation for the migration process and alternative approach.`,\n );\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

@@ -10,9 +10,17 @@ export default {
         category: 'props',
       },
     },
+    'resize': {
+      description: 'Deprecated: This method will be removed in future releases.',
+      table: {
+        category: 'methods',
+      },
+    },
   },
   decorators: [
     story => `
+      <!-- Deprecated Notice -->
+      <p style="color: red; font-family: 'Roboto Mono', monospace;">Note: The 'resize' method is deprecated and will be removed in future releases.</p>
       ${story()}
       <script>${addEvents()}</script>
     `,

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~~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","sourcesContent":["interface CardFormStoryArgs {\n 'iframe-origin': string;\n 'single-line': boolean;\n 'validation-mode': string;\n 'css-variables': string;\n}\n\nconst isDev = process.env.NODE_ENV === 'development';\n\nexport default {\n title: 'Components/CardForm',\n component: 'justifi-card-form',\n argTypes: {\n 'iframe-origin': {\n control: 'text',\n table: {\n disable: isDev ? false : true,\n category: 'props',\n },\n },\n },\n decorators: [\n story => `\n ${story()}\n <script>${addEvents()}</script>\n `,\n ],\n};\n\nconst handleValidateClick = async (cardForm: HTMLJustifiCardFormElement) => {\n const valid = await cardForm.validate();\n console.log(valid);\n};\nconst handleTokenizeClick = async (cardForm: HTMLJustifiCardFormElement, paymentMethodData) => {\n const tokenizeResponse = await cardForm.tokenize('CLIENT_ID', paymentMethodData);\n console.log(tokenizeResponse);\n};\nconst handleResizeClick = async (cardForm: HTMLJustifiCardFormElement) => {\n await cardForm.resize();\n};\nconst handleReady = () => {\n console.log('card form is ready');\n const cardForm = document.querySelector('justifi-card-form') as HTMLJustifiCardFormElement;\n const validateBtn = document.querySelector('#validate-btn');\n const tokenizeBtn = document.querySelector('#tokenize-btn');\n const resizeBtn = document.querySelector('#resize-btn');\n validateBtn?.addEventListener('click', () => {\n handleValidateClick(cardForm);\n });\n tokenizeBtn?.addEventListener('click', () => {\n handleTokenizeClick(cardForm, {});\n });\n resizeBtn?.addEventListener('click', () => {\n handleResizeClick(cardForm);\n });\n};\n\nconst addEvents = () => {\n addEventListener('cardFormReady', handleReady);\n};\n\nconst FormButtons = `\n <style>\n .button-bar {\n display: flex;\n aligin-items: center;\n padding: 10px;\n }\n .button-bar button {\n margin-right: 10px;\n border-radius: 3px;\n border: 1px solid black;\n }\n </style>\n <div class=\"button-bar\">\n <button id=\"validate-btn\">Validate</button>\n <button id=\"tokenize-btn\">Tokenize</button>\n <button id=\"resize-btn\">Resize</button>\n </div>`;\n\nconst Template = (args: CardFormStoryArgs) => {\n const includeButtons = true;\n\n return `\n <div>\n <style>\n :root {\n ${args['css-variables'] \|\| ''}\n }\n </style>\n <justifi-card-form\n data-testid=\"card-form-iframe\"\n validation-mode='${args['validation-mode'] \|\| 'onSubmit'}'\n iframe-origin='${args['iframe-origin'] \|\| ''}'\n single-line='${args['single-line']}'\n />\n </div>\n ${includeButtons ? FormButtons : ''}\n `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n 'validation-mode': 'onSubmit',\n 'single-line': false,\n};\n\nexport const SingleLine = Template.bind({});\nSingleLine.args = {\n 'single-line': true,\n};\n\nconst styledVariables = `\n --jfi-load-google-font: 'Inter:wght@200;400;700;900&family=Agdasima';\n --jfi-layout-font-family: Agdasima;\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: 100;\n --jfi-form-label-font-family: Inter;\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 'single-line': false,\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;IACD,QAAQ,EAAE;MACR,WAAW,EAAE,6DAA6D;MAC1E,KAAK,EAAE;QACL,QAAQ,EAAE,SAAS;OACpB;KACF;GACF;EACD,UAAU,EAAE;IACV,KAAK,CAAC,EAAE,CAAC;;;QAGL,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCvB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,aAAa,EAAE,KAAK;EACpB,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 'resize': {\n description: 'Deprecated: This method will be removed in future releases.',\n table: {\n category: 'methods',\n },\n },\n },\n decorators: [\n story => `\n <!-- Deprecated Notice -->\n <p style=\"color: red; font-family: 'Roboto Mono', monospace;\">Note: The 'resize' method is deprecated and will be removed in future releases.</p>\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-load-google-font: 'Inter:wght@200;400;700;900&family=Agdasima';\n --jfi-layout-font-family: Agdasima;\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: 100;\n --jfi-form-label-font-family: Inter;\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 'single-line': false,\n 'css-variables': styledVariables,\n};\n"]}

package/dist/collection/components/payment-method-form/payment-method-form.css CHANGED Viewed

@@ -6,3 +6,8 @@ justifi-payment-method-form iframe {
   border: none;
   width: 100%;
 }
+iframe {
+  width: 1px;
+  min-width: 100%;
+}

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import iFrameResize from "iframe-resizer/js/iframeResizer";
 import { MessageEventType } from "./message-event-types";
 import packageJson from "../../../package.json";
 import getComputedTheme from "./get-computed-theme";
@@ -9,7 +10,6 @@ export class PaymentMethodForm {
     this.paymentMethodFormValidationMode = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
-    this.height = 55;
   }
   connectedCallback() {
     window.addEventListener('message', this.dispatchMessageEvent.bind(this));
@@ -17,10 +17,6 @@ export class PaymentMethodForm {
   disconnectedCallback() {
     window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
   }
-  componentShouldUpdate() {
-    this.sendStyleOverrides();
-    this.resize();
-  }
   sendStyleOverrides() {
     if (this.computedTheme) {
       this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
@@ -33,14 +29,14 @@ export class PaymentMethodForm {
     if (messageType === MessageEventType[this.paymentMethodFormType].ready) {
       this.paymentMethodFormReady.emit(messageData);
     }
-    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {
-      this.height = messageData.height;
-    }
   }
   postMessage(eventType, payload) {
     var _a, _b;
     (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(Object.assign({ eventType: eventType }, payload), this.iframeOrigin || process.env.IFRAME_ORIGIN || '*');
   }
+  async resize() {
+    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
+  }
   async postMessageWithResponseListener(eventType, payload) {
     return new Promise(resolve => {
       const responseListener = (event) => {
@@ -66,9 +62,6 @@ export class PaymentMethodForm {
   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]) {
@@ -93,9 +86,11 @@ export class PaymentMethodForm {
     return iframeSrc.concat(this.composeQueryParams(paramsList));
   }
   render() {
-    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => (this.iframeElement = el), height: this.height, onLoad: () => {
+    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
+        this.iframeElement = el;
+      }, onLoad: () => {
+        iFrameResize({ log: true }, this.iframeElement);
         this.sendStyleOverrides();
-        this.resize();
       } })));
   }
   static get is() { return "justifi-payment-method-form"; }
@@ -181,11 +176,6 @@ export class PaymentMethodForm {
       }
     };
   }
-  static get states() {
-    return {
-      "height": {}
-    };
-  }
   static get events() {
     return [{
         "method": "paymentMethodFormReady",
@@ -221,6 +211,23 @@ export class PaymentMethodForm {
   }
   static get methods() {
     return {
+      "resize": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "tokenize": {
         "complexType": {
           "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<CreatePaymentMethodResponse>",
@@ -268,23 +275,6 @@ export class PaymentMethodForm {
           "text": "",
           "tags": []
         }
-      },
-      "resize": {
-        "complexType": {
-          "signature": "() => Promise<any>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<any>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
       }
     };
   }

package/dist/collection/components/payment-method-form/payment-method-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"payment-method-form.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/payment-method-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAgB,MAAM,EAAE,~~KAAK~~,~~EAAE~~,MAAM,~~eAAe~~,CAAC;~~AAC7F~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AAQpD,MAAM,OAAO,iBAAiB;;~~IAYpB~~,kBAAa,GAAU,gBAAgB,EAAE,CAAC~~;;;;;kBAFxB~~,~~EAAE;;EAM5B,~~iBAAiB;IACf,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;EAC3E,CAAC;EAED,oBAAoB;IAClB,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;EAC9E,CAAC;EAED,~~qBAAqB;IACnB,IAAI,CAAC,~~kBAAkB~~,EAAE,CAAC~~;~~IAC1B,IAAI,CAAC,MAAM,EAAE,CAAC;EAChB,CAAC;EAED,kBAAkB;~~IAChB,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,cAAc,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;KACvH;EACH,CAAC;EAEO,oBAAoB,CAAC,YAA0B;IACrD,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC;IACzC,MAAM,WAAW,GAAG,cAAc,CAAC,SAAS,CAAC;IAC7C,MAAM,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC;IAExC,IAAI,WAAW,KAAK,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,KAAK,EAAE;MACtE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC/C;~~IAED,IAAI,WAAW,KAAK,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,MAAM,EAAE;MACvE,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;KAClC;~~EACH,CAAC;EAEO,WAAW,CAAC,SAAiB,EAAE,OAAa;;IAClD,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,aAAa,0CAAE,WAAW,iBAAG,SAAS,EAAE,SAAS,IAAK,OAAO,GAAI,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,IAAI,GAAG,CAAC,CAAC;EAC9I,CAAC;EAEO,KAAK,CAAC,+BAA+B,CAAC,SAAiB,EAAE,OAAa;IAC5E,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;MAC3B,MAAM,gBAAgB,GAAG,CAAC,KAAmB,EAAE,EAAE;QAC/C,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,KAAK,SAAS;UAAE,OAAO;QAC/C,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;QACxD,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAC3B,CAAC,CAAC;MACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;MACrD,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;EACL,CAAC;EAGD,KAAK,CAAC,QAAQ,CAAC,QAAgB,EAAE,qBAA0B,EAAE,OAAgB;IAC3E,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,QAAQ,CAAC;IACxE,MAAM,OAAO,GAAG;MACd,QAAQ,EAAE,QAAQ;MAClB,gBAAgB,EAAE,WAAW,CAAC,OAAO;MACrC,qBAAqB,EAAE,qBAAqB;MAC5C,OAAO,EAAE,OAAO;KACjB,CAAC;IAEF,OAAO,IAAI,CAAC,+BAA+B,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;EAClE,CAAC;EAGD,KAAK,CAAC,QAAQ;IACZ,OAAO,IAAI,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,QAAQ,CAAC,CAAC;EACrG,CAAC;~~EAGD,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;EACxE,CAAC;~~EAEO,kBAAkB,CAAC,MAAgB;IACzC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;MACrC,IAAI,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE;QACvB,OAAO,CAAC,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC,CAAC;OAC9B;WAAM;QACL,OAAO,CAAC,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC,CAAC;OAC9B;IACH,CAAC,CAAC,CAAC;IACH,OAAO,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAC9B,CAAC;EAEO,YAAY;IAClB,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,IAAI,0BAA0B,CAAC;IAClG,IAAI,SAAS,GAAG,GAAG,YAAY,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAChE,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,IAAI,CAAC,+BAA+B,EAAE;MACxC,UAAU,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,+BAA+B,EAAE,CAAC,CAAC;KAC3E;IACD,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,UAAU,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;KAClD;IAED,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC;EAC/D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,cACE,EAAE,EAAE,+BAA+B,IAAI,CAAC,qBAAqB,EAAE,EAC/D,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,EACxB,GAAG,EAAE,EAAE,CAAC,EAAE,~~CAAC,CAAC,~~IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,~~EACzD~~,MAAM,EAAE,~~IAAI~~,~~CAAC~~,~~MAAM~~,~~EACnB~~,~~MAAM,~~EAAE,GAAG,EAAE~~;UACX~~,IAAI,CAAC,~~kBAAkB~~,~~EAAE~~,CAAC;~~UAC1B~~,IAAI,CAAC,~~MAAM~~,EAAE,CAAC;~~QAChB~~,CAAC,GACO,CACL,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["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 this.resize();\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 }, this.iframeOrigin \|\| process.env.IFRAME_ORIGIN \|\| '*');\n }\n\n private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n return new Promise(resolve => {\n const responseListener = (event: MessageEvent) => {\n if (event.data.eventType !== eventType) return;\n window.removeEventListener('message', responseListener);\n resolve(event.data.data);\n };\n window.addEventListener('message', responseListener);\n this.postMessage(eventType, payload);\n });\n }\n\n @Method()\n async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n const payload = {\n clientId: clientId,\n componentVersion: packageJson.version,\n paymentMethodMetadata: paymentMethodMetadata,\n account: account,\n };\n\n return this.postMessageWithResponseListener(eventType, payload);\n }\n\n @Method()\n async validate(): Promise<any> {\n return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n }\n\n ~~@Method()\n async resize(): Promise<any> {\n this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\n }\n\n~~ private composeQueryParams(values: string[]) {\n const queryParams = values.map(value => {\n if (value === values[0]) {\n return (value = `?${value}`);\n } else {\n return (value = `&${value}`);\n }\n });\n return queryParams.join('');\n }\n\n private getIframeSrc() {\n const iframeOrigin = this.iframeOrigin \|\| process.env.IFRAME_ORIGIN \|\| 'https://js.justifi.ai/v2';\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 onLoad={() => {\n this.~~sendStyleOverrides(~~);\n this.~~resize~~();\n }}\n ></iframe>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"payment-method-form.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/payment-method-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Host, Prop, h, EventEmitter, Method } from '@stencil/core';\nimport iFrameResize from 'iframe-resizer/js/iframeResizer';\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\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 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\n private postMessage(eventType: string, payload?: any) {\n this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, this.iframeOrigin \|\| process.env.IFRAME_ORIGIN \|\| '*');\n }\n\n @Method()\n async resize(): Promise<any> {\n this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\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 = this.iframeOrigin \|\| process.env.IFRAME_ORIGIN \|\| 'https://js.justifi.ai/v2';\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 => {\n this.iframeElement = el as HTMLIFrameElement;\n }}\n onLoad={() => {\n iFrameResize({ log: true }, this.iframeElement);\n this.sendStyleOverrides();\n }}\n ></iframe>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/payment-method-form/test/payment-method-form.spec.js CHANGED Viewed

@@ -9,7 +9,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
-      <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+      <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
     </justifi-payment-method-form>
   `);
   });
@@ -20,7 +20,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
-      <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+      <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
     </justifi-payment-method-form>
   `);
   });
@@ -31,7 +31,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
-      <iframe height="55" id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount"></iframe>
+      <iframe id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount"></iframe>
     </justifi-payment-method-form>
   `);
   });
@@ -42,7 +42,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe height="55" id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onChange"></iframe>
+        <iframe id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onChange"></iframe>
       </justifi-payment-method-form>
     `);
   });
@@ -53,7 +53,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe height="55" id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onBlur"></iframe>
+        <iframe id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onBlur"></iframe>
       </justifi-payment-method-form>
     `);
   });
@@ -64,7 +64,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+        <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
       </justifi-payment-method-form>
     `);
   });
@@ -75,7 +75,7 @@ describe('justifi-payment-method-form', () => {
     });
     expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card?singleLine=true"></iframe>
+        <iframe id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card?singleLine=true"></iframe>
       </justifi-payment-method-form>
     `);
   });

package/dist/collection/components/payment-method-form/test/payment-method-form.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"payment-method-form.spec.js","sourceRoot":"","sources":["../../../../../src/components/payment-method-form/test/payment-method-form.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { PaymentMethodForm } from '../payment-method-form';\n\ndescribe('justifi-payment-method-form', () => {\n it('renders an iframe', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n });\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe ~~height=\"55\"~~ id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a card iframe when paymentMethodFormType is card', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n });\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe ~~height=\"55\"~~ id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a bank iframe when paymentMethodFormType is bank', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\"></justifi-payment-method-form>,\n });\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe ~~height=\"55\"~~ id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onChange\"></justifi-payment-method-form>,\n });\n\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe ~~height=\"55\"~~ id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onChange\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onBlur\"></justifi-payment-method-form>,\n });\n\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe ~~height=\"55\"~~ id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onBlur\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" iframeOrigin=\"https://js.justifi.ai/v2\"></justifi-payment-method-form>,\n });\n\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe ~~height=\"55\"~~ id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" singleLine={true}></justifi-payment-method-form>,\n });\n\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe ~~height=\"55\"~~ id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card?singleLine=true\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n});\n"]}
1	+ {"version":3,"file":"payment-method-form.spec.js","sourceRoot":"","sources":["../../../../../src/components/payment-method-form/test/payment-method-form.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { PaymentMethodForm } from '../payment-method-form';\n\ndescribe('justifi-payment-method-form', () => {\n it('renders an iframe', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n });\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a card iframe when paymentMethodFormType is card', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n });\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a bank iframe when paymentMethodFormType is bank', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\"></justifi-payment-method-form>,\n });\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onChange\"></justifi-payment-method-form>,\n });\n\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onChange\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onBlur\"></justifi-payment-method-form>,\n });\n\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onBlur\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" iframeOrigin=\"https://js.justifi.ai/v2\"></justifi-payment-method-form>,\n });\n\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n\n it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {\n const page = await newSpecPage({\n components: [PaymentMethodForm],\n template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" singleLine={true}></justifi-payment-method-form>,\n });\n\n expect(page.root).toEqualHtml(`\n <justifi-payment-method-form>\n <iframe id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card?singleLine=true\"></iframe>\n </justifi-payment-method-form>\n `);\n });\n});\n"]}

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

@@ -46,8 +46,10 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
   }
   /**
    *  Manually resizes the iframe to fit the contents of the iframe
+   *  @deprecated This method will be removed in future releases.
    */
   async resize() {
+    console.warn(`The 'resize' method is deprecated and will be removed in the next major release. Please refer to the documentation for the migration process and alternative approach.`);
     if (!this.childRef) {
       throw new Error('Cannot call validate');
     }

package/dist/components/justifi-bank-account-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"justifi-bank-account-form.js","mappings":";;;MAQa,eAAe;;;;;;;;;;;;EAsC1B,YAAY,CAAC,KAAkB;IAC7B,OAAO,CAAC,IAAI,CAAC,yGAAyG,CAAC,CAAC;IACxH,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACxB;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,+MAA+M,CAChN,CAAC;IACF,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,+MAA+M,CAChN,CAAC;IACF,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,QACE,mCACE,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":[],"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 iframe has loaded\n * @event justifi-bank-account-form#ready\n /\n @Event() ready: 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 console.warn(`The 'bankAccountFormReady' event is deprecated in the next major release and will be renamed to 'ready'`);\n this.bankAccountFormReady.emit(event);\n this.ready.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n console.warn(\n `The 'bankAccountFormTokenize' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\n this.bankAccountFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n console.warn(\n `The 'bankAccountFormValidate' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\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}
1	+ {"file":"justifi-bank-account-form.js","mappings":";;;MAQa,eAAe;;;;;;;;;;;;EAsC1B,YAAY,CAAC,KAAkB;IAC7B,OAAO,CAAC,IAAI,CAAC,yGAAyG,CAAC,CAAC;IACxH,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACxB;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,+MAA+M,CAChN,CAAC;IACF,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1C;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,+MAA+M,CAChN,CAAC;IACF,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;;;;;EAOD,MAAM,MAAM;IACV,OAAO,CAAC,IAAI,CACV,wKAAwK,CACzK,CAAC;IACF,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,QACE,mCACE,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":[],"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 iframe has loaded\n * @event justifi-bank-account-form#ready\n /\n @Event() ready: 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 console.warn(`The 'bankAccountFormReady' event is deprecated in the next major release and will be renamed to 'ready'`);\n this.bankAccountFormReady.emit(event);\n this.ready.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n console.warn(\n `The 'bankAccountFormTokenize' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\n this.bankAccountFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n console.warn(\n `The 'bankAccountFormValidate' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\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 * @deprecated This method will be removed in future releases.\n */\n @Method()\n async resize(): Promise<void> {\n console.warn(\n `The 'resize' method is deprecated and will be removed in the next major release. Please refer to the documentation for the migration process and alternative approach.`,\n );\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/components/justifi-card-form.js CHANGED Viewed

@@ -47,8 +47,10 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLEle
   }
   /**
    *  Manually resizes the iframe to fit the contents of the iframe
+   *  @deprecated This method will be removed in future releases.
    */
   async resize() {
+    console.warn(`The 'resize' method is deprecated and will be removed in the next major release. Please refer to the documentation for the migration process and alternative approach.`);
     if (!this.childRef) {
       throw new Error('Cannot call validate');
     }

package/dist/components/justifi-card-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"justifi-card-form.js","mappings":";;;MAQa,QAAQ;;;;;;;;;;sBAcW,KAAK;;;EA+BnC,YAAY,CAAC,KAAkB;IAC7B,OAAO,CAAC,IAAI,CAAC,kGAAkG,CAAC,CAAC;IACjH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACxB;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,wMAAwM,CACzM,CAAC;IACF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,wMAAwM,CACzM,CAAC;IACF,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,QACE,mCACE,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":[],"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\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 iframe has loaded\n * @event justifi-card-form#ready\n /\n\n @Event() ready: 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 console.warn(`The 'cardFormReady' event is deprecated in the next major release and will be renamed to 'ready'`);\n this.cardFormReady.emit(event);\n this.ready.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n console.warn(\n `The 'cardFormTokenize' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\n this.cardFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n console.warn(\n `The 'cardFormValidate' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\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}
1	+ {"file":"justifi-card-form.js","mappings":";;;MAQa,QAAQ;;;;;;;;;;sBAcW,KAAK;;;EA+BnC,YAAY,CAAC,KAAkB;IAC7B,OAAO,CAAC,IAAI,CAAC,kGAAkG,CAAC,CAAC;IACjH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACxB;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,wMAAwM,CACzM,CAAC;IACF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,wMAAwM,CACzM,CAAC;IACF,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;;;;;EAOD,MAAM,MAAM;IACV,OAAO,CAAC,IAAI,CACV,wKAAwK,CACzK,CAAC;IACF,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,QACE,mCACE,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":[],"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\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 iframe has loaded\n * @event justifi-card-form#ready\n /\n\n @Event() ready: 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 console.warn(`The 'cardFormReady' event is deprecated in the next major release and will be renamed to 'ready'`);\n this.cardFormReady.emit(event);\n this.ready.emit(event);\n }\n\n @Listen('paymentMethodFormTokenize')\n tokenizeHandler(event: { data: any }) {\n console.warn(\n `The 'cardFormTokenize' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\n this.cardFormTokenize.emit(event);\n }\n\n @Listen('paymentMethodFormValidate')\n validateHandler(event: { data: any }) {\n console.warn(\n `The 'cardFormValidate' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n );\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 * @deprecated This method will be removed in future releases.\n */\n @Method()\n async resize(): Promise<void> {\n console.warn(\n `The 'resize' method is deprecated and will be removed in the next major release. Please refer to the documentation for the migration process and alternative approach.`,\n );\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}