@justifi/webcomponents 0.2.0 → 0.2.1

package/dist/cjs/justifi-bank-account-form.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3947d225.js');
+const index = require('./index-ca2cd154.js');
 
 const BankAccountForm = class {
   constructor(hostRef) {

package/dist/cjs/justifi-billing-form.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3947d225.js');
+const index = require('./index-ca2cd154.js');
 
 /**
  * Based on Kendo UI Core expression code <https://github.com/telerik/kendo-ui-core#license-information>

package/dist/cjs/justifi-card-form.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3947d225.js');
+const index = require('./index-ca2cd154.js');
 
 const CardForm = class {
   constructor(hostRef) {

package/dist/cjs/justifi-payment-form.cjs.entry.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca2cd154.js');
+
+const PaymentForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.validationStrategy = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("form", null, index.h("slot", null))));
+  }
+};
+
+exports.justifi_payment_form = PaymentForm;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3947d225.js');
+const index = require('./index-ca2cd154.js');
 
 const MessageEventType = {
   card: {
@@ -21,6 +21,87 @@ const MessageEventType = {
   }
 };
 
+const name = "@justifi/webcomponents";
+const version = "0.2.1";
+const description = "JustiFi Web Components";
+const main = "dist/index.cjs.js";
+const module$1 = "dist/index.js";
+const es2015 = "dist/esm/index.mjs";
+const es2017 = "dist/esm/index.mjs";
+const types = "dist/types/index.d.ts";
+const collection = "dist/collection/collection-manifest.json";
+const unpkg = "dist/stencil-webcomponents/stencil-webcomponents.esm.js";
+const repository = {
+	type: "git",
+	url: "git+https://github.com/justifi-tech/web-component-library.git"
+};
+const publishConfig = {
+	registry: "https://registry.npmjs.org"
+};
+const files = [
+	"dist/",
+	"loader/"
+];
+const scripts = {
+	"auto-changelog": "auto-changelog",
+	release: "release-it --no-npm",
+	build: "stencil build --docs",
+	start: "concurrently -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"yarn run start-stencil\" \"yarn run storybook\"",
+	"start-stencil": "stencil build --watch --serve --no-open",
+	test: "stencil test --spec --e2e",
+	"test:watch": "stencil test --spec --e2e --watchAll",
+	generate: "stencil generate",
+	storybook: "start-storybook -p 6006",
+	"build-storybook": "build-storybook"
+};
+const dependencies = {
+	"@stencil/core": "^2.13.0",
+	"@stencil/react-output-target": "^0.3.1",
+	"date-fns": "^2.29.3",
+	"dinero.js": "^1.9.1",
+	uuid: "^9.0.0",
+	yup: "^1.0.0"
+};
+const devDependencies = {
+	"@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
+	"@storybook/addon-actions": "^6.5.16",
+	"@storybook/addon-essentials": "^6.5.16",
+	"@storybook/addon-interactions": "^6.5.16",
+	"@storybook/addon-links": "^6.5.16",
+	"@storybook/builder-webpack4": "^6.5.16",
+	"@storybook/html": "^6.5.16",
+	"@storybook/manager-webpack4": "^6.5.16",
+	"@storybook/testing-library": "^0.0.13",
+	"@types/jest": "^27.0.3",
+	"auto-changelog": "^2.4.0",
+	concurrently: "^7.6.0",
+	jest: "^27.4.5",
+	"jest-cli": "^27.4.5",
+	puppeteer: "^10.0.0",
+	"release-it": "^15.6.0"
+};
+const license = "MIT";
+const packageJson = {
+	name: name,
+	version: version,
+	description: description,
+	main: main,
+	module: module$1,
+	es2015: es2015,
+	es2017: es2017,
+	types: types,
+	collection: collection,
+	"collection:main": "dist/collection/index.js",
+	unpkg: unpkg,
+	repository: repository,
+	publishConfig: publishConfig,
+	files: files,
+	scripts: scripts,
+	dependencies: dependencies,
+	devDependencies: devDependencies,
+	license: license
+};
+
 const paymentMethodFormCss = ":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";
 
 const PaymentMethodForm = class {
@@ -80,8 +161,9 @@ const PaymentMethodForm = class {
     const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
     const payload = {
       clientId: clientId,
+      componentVersion: packageJson.version,
       paymentMethodMetadata: paymentMethodMetadata,
-      account: account
+      account: account,
     };
     return this.postMessageWithResponseListener(eventType, payload);
   }

package/dist/cjs/justifi-payments-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3947d225.js');
+const index = require('./index-ca2cd154.js');
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3947d225.js');
+const index = require('./index-ca2cd154.js');
 
 /*
- Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,9 +14,8 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["justifi-billing-form.cjs",[[1,"justifi-billing-form",{"billingFields":[32],"billingFieldsErrors":[32],"validate":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]]], options);
+  return index.bootstrapLazy([["justifi-billing-form.cjs",[[1,"justifi-billing-form",{"billingFields":[32],"billingFieldsErrors":[32],"validate":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payment-form.cjs",[[4,"justifi-payment-form",{"validationStrategy":[1,"validation-strategy"]}]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
   });
 };
 
-exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;

package/dist/cjs/select-input_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3947d225.js');
+const index = require('./index-ca2cd154.js');
 
 const selectInputCss = ":host{display:block}label{display:block}";
 

package/dist/cjs/webcomponents.cjs.js

@@ -1,11 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-3947d225.js');
+const index = require('./index-ca2cd154.js');
 
 /*
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('webcomponents.cjs.js', document.baseURI).href));
@@ -17,7 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["justifi-billing-form.cjs",[[1,"justifi-billing-form",{"billingFields":[32],"billingFieldsErrors":[32],"validate":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]]], options);
+  return index.bootstrapLazy([["justifi-billing-form.cjs",[[1,"justifi-billing-form",{"billingFields":[32],"billingFieldsErrors":[32],"validate":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payment-form.cjs",[[4,"justifi-payment-form",{"validationStrategy":[1,"validation-strategy"]}]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
 });
-
-exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "./components/bank-account-form/bank-account-form.js",
     "./components/billing-form/billing-form.js",
     "./components/card-form/card-form.js",
+    "./components/payment-form/payment-form.js",
     "./components/payment-method-form/payment-method-form.js",
     "./components/payments-list/payments-list.js",
     "./components/select-input/select-input.js",
@@ -10,8 +11,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.3",
-    "typescriptVersion": "4.9.4"
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
   },
   "collections": [],
   "bundles": []

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

@@ -0,0 +1,132 @@
+export default {
+  title: 'Components/CardForm',
+  component: 'justifi-card-form',
+  parameters: {
+    actions: {
+      handles: [
+        'cardFormReady',
+        'cardFormValidate',
+        'cardFormTokenize'
+      ],
+    },
+  },
+  decorators: [
+    (story) => `
+      ${story()}
+      <script>${addEvents()}</script>
+    `,
+  ],
+};
+const paymentMethodData = {
+  name: 'John Doe',
+};
+// IMPORTANT:
+// Only use named functions when binding to event handlers. Otherwise, they will be bound multiple times
+// Going forward, we could create a decorator that binds events
+const handleValidateClick = () => {
+  const cardForm = document.querySelector('justifi-card-form');
+  cardForm.validate();
+  console.log('validate');
+};
+const handleTokenizeClick = async () => {
+  const cardForm = document.querySelector('justifi-card-form');
+  const tokenizeResponse = await cardForm.tokenize('CLIENT_ID', paymentMethodData);
+  console.log(tokenizeResponse);
+};
+const handleReadyClick = () => {
+  const validateBtn = document.querySelector('#validate-btn');
+  const tokenizeBtn = document.querySelector('#tokenize-btn');
+  validateBtn === null || validateBtn === void 0 ? void 0 : validateBtn.addEventListener('click', handleValidateClick);
+  tokenizeBtn === null || tokenizeBtn === void 0 ? void 0 : tokenizeBtn.addEventListener('click', handleTokenizeClick);
+};
+const addEvents = () => {
+  addEventListener('cardFormReady', handleReadyClick);
+};
+// This should be abstracted away, included as a decorator and styled properly
+const buttons = `
+  <style>
+    .button-bar {
+      display: flex;
+      aligin-items: center;
+      padding: 10px;
+    }
+    .button-bar button {
+      margin-right: 10px;
+    }
+  </style>
+  <div class="button-bar">
+    <button id="validate-btn">Validate</button>
+    <button id="tokenize-btn">Tokenize</button>
+  </div>
+`;
+const storyStyleOverrides = {
+  "layout": {
+    "padding": "100px",
+    "formControlSpacingHorizontal": ".5rem",
+    "formControlSpacingVertical": "1rem"
+  },
+  "formLabel": {
+    "fontWeight": "700",
+    "fontFamily": "sans-serif",
+    "margin": "0 0 .5rem 0"
+  },
+  "formControl": {
+    "backgroundColor": "#00F4F6",
+    "backgroundColorHover": "#EEEEF5",
+    "borderColor": "rgba(0, 0, 0, 0.42)",
+    "borderColorHover": "rgba(0, 0, 0, 0.62)",
+    "borderColorFocus": "#fccc32",
+    "borderColorError": "#C12727",
+    "borderWidth": "0px",
+    "borderBottomWidth": "1px",
+    "borderRadius": "40px 4px 0 0",
+    "borderStyle": "solid",
+    "boxShadowErrorFocus": "none",
+    "boxShadowFocus": "none",
+    "color": "#212529",
+    "fontSize": "1rem",
+    "fontWeight": "400",
+    "lineHeight": "2",
+    "margin": "0",
+    "padding": ".5rem .875rem"
+  },
+  "errorMessage": {
+    "color": "#C12727",
+    "margin": ".25rem 0 0 0",
+    "fontSize": ".875rem"
+  }
+};
+const Template = ({ includeButtons, styleOverrides }) => {
+  const parsedStyleOverrides = styleOverrides ? JSON.stringify(styleOverrides) : null;
+  // The <div> here should be replaced by a `display` property in the cardForm potentially
+  return (`
+    <div>
+      <justifi-card-form style-overrides='${parsedStyleOverrides || ''}' />
+    </div>
+    ${includeButtons ? buttons : ''}
+  `);
+};
+export const Basic = Template.bind({});
+Basic.args = {
+  includeButtons: true
+};
+export const Embedded = Template.bind({});
+Embedded.args = {
+  includeButtons: true
+};
+Embedded.decorators = [
+  (story) => `
+    <style>
+      #wrapper {
+        background-color: #aaaaaa;
+      }
+    </style>
+    <div id="wrapper" style="width: 50%;">
+      ${story()}
+    </div>
+  `,
+];
+export const Styled = Template.bind({});
+Styled.args = {
+  styleOverrides: storyStyleOverrides
+};

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

@@ -0,0 +1,31 @@
+import { h, Host } from '@stencil/core';
+export class PaymentForm {
+  constructor() {
+    this.validationStrategy = undefined;
+  }
+  render() {
+    return (h(Host, null, h("form", null, h("slot", null))));
+  }
+  static get is() { return "justifi-payment-form"; }
+  static get properties() {
+    return {
+      "validationStrategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all'",
+          "resolved": "\"all\" | \"onBlur\" | \"onChange\" | \"onSubmit\" | \"onTouched\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "validation-strategy",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -1,5 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { MessageEventType } from './message-event-types';
+import packageJson from '../../../package.json';
 export class PaymentMethodForm {
   constructor() {
     this.paymentMethodFormType = undefined;
@@ -54,8 +55,9 @@ export class PaymentMethodForm {
     const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
     const payload = {
       clientId: clientId,
+      componentVersion: packageJson.version,
       paymentMethodMetadata: paymentMethodMetadata,
-      account: account
+      account: account,
     };
     return this.postMessageWithResponseListener(eventType, payload);
   }

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@
 export { BankAccountForm as JustifiBankAccountForm } from '../types/components/bank-account-form/bank-account-form';
 export { BillingForm as JustifiBillingForm } from '../types/components/billing-form/billing-form';
 export { CardForm as JustifiCardForm } from '../types/components/card-form/card-form';
+export { PaymentForm as JustifiPaymentForm } from '../types/components/payment-form/payment-form';
 export { PaymentMethodForm as JustifiPaymentMethodForm } from '../types/components/payment-method-form/payment-method-form';
 export { PaymentsList as JustifiPaymentsList } from '../types/components/payments-list/payments-list';
 export { SelectInput as SelectInput } from '../types/components/select-input/select-input';
@@ -19,15 +20,6 @@ export { TextInput as TextInput } from '../types/components/text-input/text-inpu
  */
 export declare const setAssetPath: (path: string) => void;
 
-/**
- * Used to specify a nonce value that corresponds with an application's CSP.
- * When set, the nonce will be added to all dynamically created script and style tags at runtime.
- * Alternatively, the nonce value can be set on a meta tag in the DOM head
- * (<meta name="csp-nonce" content="{ nonce value here }" />) which
- * will result in the same behavior.
- */
-export declare const setNonce: (nonce: string) => void
-
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

package/dist/components/index.js

@@ -1,7 +1,8 @@
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 export { JustifiBankAccountForm, defineCustomElement as defineCustomElementJustifiBankAccountForm } from './justifi-bank-account-form.js';
 export { JustifiBillingForm, defineCustomElement as defineCustomElementJustifiBillingForm } from './justifi-billing-form.js';
 export { JustifiCardForm, defineCustomElement as defineCustomElementJustifiCardForm } from './justifi-card-form.js';
+export { JustifiPaymentForm, defineCustomElement as defineCustomElementJustifiPaymentForm } from './justifi-payment-form.js';
 export { JustifiPaymentMethodForm, defineCustomElement as defineCustomElementJustifiPaymentMethodForm } from './justifi-payment-method-form.js';
 export { JustifiPaymentsList, defineCustomElement as defineCustomElementJustifiPaymentsList } from './justifi-payments-list.js';
 export { SelectInput, defineCustomElement as defineCustomElementSelectInput } from './select-input.js';

package/dist/components/justifi-payment-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JustifiPaymentForm extends Components.JustifiPaymentForm, HTMLElement {}
+export const JustifiPaymentForm: {
+  prototype: JustifiPaymentForm;
+  new (): JustifiPaymentForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,32 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const PaymentForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.validationStrategy = undefined;
+  }
+  render() {
+    return (h(Host, null, h("form", null, h("slot", null))));
+  }
+}, [4, "justifi-payment-form", {
+    "validationStrategy": [1, "validation-strategy"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["justifi-payment-form"];
+  components.forEach(tagName => { switch (tagName) {
+    case "justifi-payment-form":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PaymentForm);
+      }
+      break;
+  } });
+}
+
+const JustifiPaymentForm = PaymentForm;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiPaymentForm, defineCustomElement };

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

@@ -17,6 +17,87 @@ const MessageEventType = {
   }
 };
 
+const name = "@justifi/webcomponents";
+const version = "0.2.1";
+const description = "JustiFi Web Components";
+const main = "dist/index.cjs.js";
+const module = "dist/index.js";
+const es2015 = "dist/esm/index.mjs";
+const es2017 = "dist/esm/index.mjs";
+const types = "dist/types/index.d.ts";
+const collection = "dist/collection/collection-manifest.json";
+const unpkg = "dist/stencil-webcomponents/stencil-webcomponents.esm.js";
+const repository = {
+	type: "git",
+	url: "git+https://github.com/justifi-tech/web-component-library.git"
+};
+const publishConfig = {
+	registry: "https://registry.npmjs.org"
+};
+const files = [
+	"dist/",
+	"loader/"
+];
+const scripts = {
+	"auto-changelog": "auto-changelog",
+	release: "release-it --no-npm",
+	build: "stencil build --docs",
+	start: "concurrently -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"yarn run start-stencil\" \"yarn run storybook\"",
+	"start-stencil": "stencil build --watch --serve --no-open",
+	test: "stencil test --spec --e2e",
+	"test:watch": "stencil test --spec --e2e --watchAll",
+	generate: "stencil generate",
+	storybook: "start-storybook -p 6006",
+	"build-storybook": "build-storybook"
+};
+const dependencies = {
+	"@stencil/core": "^2.13.0",
+	"@stencil/react-output-target": "^0.3.1",
+	"date-fns": "^2.29.3",
+	"dinero.js": "^1.9.1",
+	uuid: "^9.0.0",
+	yup: "^1.0.0"
+};
+const devDependencies = {
+	"@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
+	"@storybook/addon-actions": "^6.5.16",
+	"@storybook/addon-essentials": "^6.5.16",
+	"@storybook/addon-interactions": "^6.5.16",
+	"@storybook/addon-links": "^6.5.16",
+	"@storybook/builder-webpack4": "^6.5.16",
+	"@storybook/html": "^6.5.16",
+	"@storybook/manager-webpack4": "^6.5.16",
+	"@storybook/testing-library": "^0.0.13",
+	"@types/jest": "^27.0.3",
+	"auto-changelog": "^2.4.0",
+	concurrently: "^7.6.0",
+	jest: "^27.4.5",
+	"jest-cli": "^27.4.5",
+	puppeteer: "^10.0.0",
+	"release-it": "^15.6.0"
+};
+const license = "MIT";
+const packageJson = {
+	name: name,
+	version: version,
+	description: description,
+	main: main,
+	module: module,
+	es2015: es2015,
+	es2017: es2017,
+	types: types,
+	collection: collection,
+	"collection:main": "dist/collection/index.js",
+	unpkg: unpkg,
+	repository: repository,
+	publishConfig: publishConfig,
+	files: files,
+	scripts: scripts,
+	dependencies: dependencies,
+	devDependencies: devDependencies,
+	license: license
+};
+
 const paymentMethodFormCss = ":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";
 
 const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -77,8 +158,9 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
     const payload = {
       clientId: clientId,
+      componentVersion: packageJson.version,
       paymentMethodMetadata: paymentMethodMetadata,
-      account: account
+      account: account,
     };
     return this.postMessageWithResponseListener(eventType, payload);
   }