npm - @justifi/webcomponents - Versions diffs - 4.2.1-rc.4 → 4.4.0 - Mend

@justifi/webcomponents 4.2.1-rc.4 → 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/esm/justifi-payment-method-form.entry.js.map CHANGED Viewed

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