npm - @justifi/webcomponents - Versions diffs - 4.2.2 → 4.4.0 - Mend

@justifi/webcomponents 4.2.2 → 4.4.0

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

Files changed (380) hide show

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

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