@justifi/webcomponents 0.0.7 → 0.0.9

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

@@ -0,0 +1,190 @@
+import { Host, h } from '@stencil/core';
+var DispatchedEventTypes;
+(function (DispatchedEventTypes) {
+  DispatchedEventTypes["blur"] = "blur";
+  DispatchedEventTypes["change"] = "change";
+  DispatchedEventTypes["ready"] = "ready";
+  DispatchedEventTypes["tokenize"] = "tokenize";
+})(DispatchedEventTypes || (DispatchedEventTypes = {}));
+export class PaymentMethodForm {
+  constructor() {
+    this.iframeOrigin = undefined;
+  }
+  connectedCallback() {
+    window.addEventListener('message', this.dispatchMessageEvent.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
+  }
+  dispatchMessageEvent(messageEvent) {
+    const messagePayload = messageEvent.data;
+    const messageType = messagePayload.eventType;
+    const messageData = messagePayload.data;
+    switch (messageType) {
+      case DispatchedEventTypes.ready:
+        this.paymentMethodFormReady.emit(messageData);
+        break;
+      case DispatchedEventTypes.change:
+        this.paymentMethodFormChange.emit(messageData);
+        break;
+      case DispatchedEventTypes.blur:
+        this.paymentMethodFormBlur.emit(messageData);
+        break;
+      default:
+        break;
+    }
+  }
+  triggerTokenization(clientKey, paymentMethodMetadata, account) {
+    if (this.iframeElement && this.iframeElement.contentWindow) {
+      this.iframeElement.contentWindow.postMessage({
+        eventType: DispatchedEventTypes.tokenize,
+        clientKey: clientKey,
+        paymentMethodMetadata: paymentMethodMetadata,
+        account: account
+      }, '*');
+    }
+  }
+  async tokenize(clientKey, paymentMethodMetadata, account) {
+    return new Promise((resolve) => {
+      const tokenizeEventListener = (event) => {
+        if (event.data.eventType !== DispatchedEventTypes.tokenize)
+          return;
+        window.removeEventListener('message', tokenizeEventListener);
+        resolve(event.data.data);
+      };
+      window.addEventListener('message', tokenizeEventListener);
+      this.triggerTokenization(clientKey, paymentMethodMetadata, account);
+    });
+  }
+  ;
+  render() {
+    return (h(Host, null, h("iframe", { id: "justifi-payment-method-form", src: this.iframeOrigin, ref: (el) => this.iframeElement = el })));
+  }
+  static get is() { return "justifi-payment-method-form"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["payment-method-form.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["payment-method-form.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "iframeOrigin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "iframe-origin",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "paymentMethodFormReady",
+        "name": "paymentMethodFormReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "paymentMethodFormChange",
+        "name": "paymentMethodFormChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "paymentMethodFormBlur",
+        "name": "paymentMethodFormBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "paymentMethodFormTokenize",
+        "name": "paymentMethodFormTokenize",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ data: any }",
+          "resolved": "{ data: any; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "tokenize": {
+        "complexType": {
+          "signature": "(clientKey: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "MessageEvent": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/index.js

@@ -1 +1,3 @@
-export * from './components';
+export { BankAccountForm } from './components/bank-account-form/bank-account-form';
+export { CardForm } from './components/card-form/card-form';
+export { PaymentsList } from './components/payments-list/payments-list';

package/dist/components/index.d.ts

@@ -1,5 +1,7 @@
 /* webcomponents custom elements */
+export { BankAccountForm as JustifiBankAccountForm } from '../types/components/bank-account-form/bank-account-form';
 export { CardForm as JustifiCardForm } from '../types/components/card-form/card-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';
 
 /**

package/dist/components/index.js

@@ -1,3 +1,5 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-export { JustifiCardForm, defineCustomElement as defineCustomElementJustifiCardForm } from './justifi-card-form.js';
-export { JustifiPaymentsList, defineCustomElement as defineCustomElementJustifiPaymentsList } from './justifi-payments-list.js';
+export { B as BankAccountForm, JustifiBankAccountForm, defineCustomElement as defineCustomElementJustifiBankAccountForm } from './justifi-bank-account-form.js';
+export { C as CardForm, JustifiCardForm, defineCustomElement as defineCustomElementJustifiCardForm } from './justifi-card-form.js';
+export { JustifiPaymentsList, P as PaymentsList, defineCustomElement as defineCustomElementJustifiPaymentsList } from './justifi-payments-list.js';
+export { JustifiPaymentMethodForm, defineCustomElement as defineCustomElementJustifiPaymentMethodForm } from './justifi-payment-method-form.js';

package/dist/components/justifi-bank-account-form.d.ts

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

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

@@ -0,0 +1,65 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './payment-method-form.js';
+
+const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.bankAccountFormReady = createEvent(this, "bankAccountFormReady", 7);
+    this.bankAccountFormChange = createEvent(this, "bankAccountFormChange", 7);
+    this.bankAccountFormBlur = createEvent(this, "bankAccountFormBlur", 7);
+    this.bankAccountFormTokenize = createEvent(this, "bankAccountFormTokenize", 7);
+    this.iframeOrigin = undefined;
+  }
+  readyHandler(event) {
+    this.bankAccountFormReady.emit(event);
+  }
+  changeHandler(event) {
+    this.bankAccountFormChange.emit(event);
+  }
+  blurHandler(event) {
+    this.bankAccountFormBlur.emit(event);
+  }
+  tokenizeHandler(event) {
+    this.bankAccountFormTokenize.emit(event);
+  }
+  async tokenize(...args) {
+    if (!this.childRef) {
+      throw new Error('Cannot call tokenize');
+    }
+    return this.childRef.tokenize(...args);
+  }
+  render() {
+    return (h("justifi-payment-method-form", { ref: el => {
+        if (el) {
+          this.childRef = el;
+        }
+      }, "iframe-origin": this.iframeOrigin || 'https://js.justifi.ai/bank-account', "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-change": this.bankAccountFormChange, "payment-method-form-blur": this.bankAccountFormBlur, "payment-method-form-tokenize": this.bankAccountFormTokenize }));
+  }
+}, [0, "justifi-bank-account-form", {
+    "iframeOrigin": [1, "iframe-origin"],
+    "tokenize": [64]
+  }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormChange", "changeHandler"], [0, "paymentMethodFormBlur", "blurHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["justifi-bank-account-form", "justifi-payment-method-form"];
+  components.forEach(tagName => { switch (tagName) {
+    case "justifi-bank-account-form":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BankAccountForm);
+      }
+      break;
+    case "justifi-payment-method-form":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const JustifiBankAccountForm = BankAccountForm;
+const defineCustomElement = defineCustomElement$1;
+
+export { BankAccountForm as B, JustifiBankAccountForm, defineCustomElement };

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

@@ -1,75 +1,33 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './payment-method-form.js';
 
-const cardFormCss = ":host{display:block}iframe{border:none;height:55px;width:100%}";
+const cardFormCss = "justifi-card-form iframe{height:55px}";
 
-var DispatchedEventTypes;
-(function (DispatchedEventTypes) {
-  DispatchedEventTypes["blur"] = "blur";
-  DispatchedEventTypes["change"] = "change";
-  DispatchedEventTypes["ready"] = "ready";
-  DispatchedEventTypes["tokenize"] = "tokenize";
-})(DispatchedEventTypes || (DispatchedEventTypes = {}));
 const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
     this.cardFormReady = createEvent(this, "cardFormReady", 7);
     this.cardFormChange = createEvent(this, "cardFormChange", 7);
     this.cardFormBlur = createEvent(this, "cardFormBlur", 7);
     this.cardFormTokenize = createEvent(this, "cardFormTokenize", 7);
     this.iframeOrigin = undefined;
   }
-  connectedCallback() {
-    window.addEventListener('message', this.dispatchMessageEvent.bind(this));
-  }
-  disconnectedCallback() {
-    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
-  }
-  dispatchMessageEvent(messageEvent) {
-    const messagePayload = messageEvent.data;
-    const messageType = messagePayload.eventType;
-    const messageData = messagePayload.data;
-    switch (messageType) {
-      case DispatchedEventTypes.ready:
-        this.cardFormReady.emit(messageData);
-        break;
-      case DispatchedEventTypes.change:
-        this.cardFormChange.emit(messageData);
-        break;
-      case DispatchedEventTypes.blur:
-        this.cardFormBlur.emit(messageData);
-        break;
-    }
-  }
-  triggerTokenization(clientKey, paymentMethodMetadata, account) {
-    if (this.iframeElement && this.iframeElement.contentWindow) {
-      this.iframeElement.contentWindow.postMessage({
-        eventType: DispatchedEventTypes.tokenize,
-        clientKey: clientKey,
-        paymentMethodMetadata: paymentMethodMetadata,
-        account: account
-      }, '*');
+  async tokenize(...args) {
+    if (!this.childRef) {
+      throw new Error('Cannot call tokenize');
     }
+    return this.childRef.tokenize(...args);
   }
-  async tokenize(clientKey, paymentMethodMetadata, account) {
-    return new Promise((resolve) => {
-      const tokenizeEventListener = (event) => {
-        if (event.data.eventType !== DispatchedEventTypes.tokenize)
-          return;
-        window.removeEventListener('message', tokenizeEventListener);
-        resolve(event.data.data);
-      };
-      window.addEventListener('message', tokenizeEventListener);
-      this.triggerTokenization(clientKey, paymentMethodMetadata, account);
-    });
-  }
-  ;
   render() {
-    return (h(Host, null, h("iframe", { id: "justifi-card-form", src: this.iframeOrigin || 'https://js.justifi.ai', ref: (el) => this.iframeElement = el })));
+    return (h("justifi-payment-method-form", { ref: el => {
+        if (el) {
+          this.childRef = el;
+        }
+      }, "iframe-origin": this.iframeOrigin || 'https://js.justifi.ai/card', "payment-method-form-ready": this.cardFormReady, "payment-method-form-change": this.cardFormChange, "payment-method-form-blur": this.cardFormBlur, "payment-method-form-tokenize": this.cardFormTokenize }));
   }
   static get style() { return cardFormCss; }
-}, [1, "justifi-card-form", {
+}, [0, "justifi-card-form", {
     "iframeOrigin": [1, "iframe-origin"],
     "tokenize": [64]
   }]);
@@ -77,17 +35,22 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["justifi-card-form"];
+  const components = ["justifi-card-form", "justifi-payment-method-form"];
   components.forEach(tagName => { switch (tagName) {
     case "justifi-card-form":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, CardForm);
       }
       break;
+    case "justifi-payment-method-form":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 
 const JustifiCardForm = CardForm;
 const defineCustomElement = defineCustomElement$1;
 
-export { JustifiCardForm, defineCustomElement };
+export { CardForm as C, JustifiCardForm, defineCustomElement };

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

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

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

@@ -0,0 +1,6 @@
+import { P as PaymentMethodForm, d as defineCustomElement$1 } from './payment-method-form.js';
+
+const JustifiPaymentMethodForm = PaymentMethodForm;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiPaymentMethodForm, defineCustomElement };

package/dist/components/justifi-payments-list.js

@@ -4250,4 +4250,4 @@ function defineCustomElement$1() {
 const JustifiPaymentsList = PaymentsList;
 const defineCustomElement = defineCustomElement$1;
 
-export { JustifiPaymentsList, defineCustomElement };
+export { JustifiPaymentsList, PaymentsList as P, defineCustomElement };

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

@@ -0,0 +1,89 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const paymentMethodFormCss = ":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";
+
+var DispatchedEventTypes;
+(function (DispatchedEventTypes) {
+  DispatchedEventTypes["blur"] = "blur";
+  DispatchedEventTypes["change"] = "change";
+  DispatchedEventTypes["ready"] = "ready";
+  DispatchedEventTypes["tokenize"] = "tokenize";
+})(DispatchedEventTypes || (DispatchedEventTypes = {}));
+const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.paymentMethodFormReady = createEvent(this, "paymentMethodFormReady", 7);
+    this.paymentMethodFormChange = createEvent(this, "paymentMethodFormChange", 7);
+    this.paymentMethodFormBlur = createEvent(this, "paymentMethodFormBlur", 7);
+    this.paymentMethodFormTokenize = createEvent(this, "paymentMethodFormTokenize", 7);
+    this.iframeOrigin = undefined;
+  }
+  connectedCallback() {
+    window.addEventListener('message', this.dispatchMessageEvent.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
+  }
+  dispatchMessageEvent(messageEvent) {
+    const messagePayload = messageEvent.data;
+    const messageType = messagePayload.eventType;
+    const messageData = messagePayload.data;
+    switch (messageType) {
+      case DispatchedEventTypes.ready:
+        this.paymentMethodFormReady.emit(messageData);
+        break;
+      case DispatchedEventTypes.change:
+        this.paymentMethodFormChange.emit(messageData);
+        break;
+      case DispatchedEventTypes.blur:
+        this.paymentMethodFormBlur.emit(messageData);
+        break;
+    }
+  }
+  triggerTokenization(clientKey, paymentMethodMetadata, account) {
+    if (this.iframeElement && this.iframeElement.contentWindow) {
+      this.iframeElement.contentWindow.postMessage({
+        eventType: DispatchedEventTypes.tokenize,
+        clientKey: clientKey,
+        paymentMethodMetadata: paymentMethodMetadata,
+        account: account
+      }, '*');
+    }
+  }
+  async tokenize(clientKey, paymentMethodMetadata, account) {
+    return new Promise((resolve) => {
+      const tokenizeEventListener = (event) => {
+        if (event.data.eventType !== DispatchedEventTypes.tokenize)
+          return;
+        window.removeEventListener('message', tokenizeEventListener);
+        resolve(event.data.data);
+      };
+      window.addEventListener('message', tokenizeEventListener);
+      this.triggerTokenization(clientKey, paymentMethodMetadata, account);
+    });
+  }
+  ;
+  render() {
+    return (h(Host, null, h("iframe", { id: "justifi-payment-method-form", src: this.iframeOrigin, ref: (el) => this.iframeElement = el })));
+  }
+  static get style() { return paymentMethodFormCss; }
+}, [0, "justifi-payment-method-form", {
+    "iframeOrigin": [1, "iframe-origin"],
+    "tokenize": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["justifi-payment-method-form"];
+  components.forEach(tagName => { switch (tagName) {
+    case "justifi-payment-method-form":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PaymentMethodForm);
+      }
+      break;
+  } });
+}
+
+export { PaymentMethodForm as P, defineCustomElement as d };

package/dist/esm/{index-2324c14b.js → index-e279d85e.js}

@@ -695,6 +695,15 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
     let promise;
+    if (isInitialLoad) {
+        {
+            hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
+            if (hostRef.$queuedListeners$) {
+                hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
+                hostRef.$queuedListeners$ = null;
+            }
+        }
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -1101,6 +1110,10 @@ const connectedCallback = (elm) => {
             }
         }
         else {
+            // not the first time this has connected
+            // reattach any event listeners to the host
+            // since they would have been removed when disconnected
+            addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
             // fire off connectedCallback() on component instance
             fireConnectedCallback(hostRef.$lazyInstance$);
         }
@@ -1111,6 +1124,12 @@ const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
         const instance = hostRef.$lazyInstance$ ;
+        {
+            if (hostRef.$rmListeners$) {
+                hostRef.$rmListeners$.map((rmListener) => rmListener());
+                hostRef.$rmListeners$ = undefined;
+            }
+        }
         {
             safeCall(instance, 'disconnectedCallback');
         }
@@ -1140,6 +1159,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
+            {
+                cmpMeta.$listeners$ = compactMeta[3];
+            }
             {
                 cmpMeta.$watchers$ = {};
             }
@@ -1208,6 +1230,35 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
+const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+    if (listeners) {
+        listeners.map(([flags, name, method]) => {
+            const target = elm;
+            const handler = hostListenerProxy(hostRef, method);
+            const opts = hostListenerOpts(flags);
+            plt.ael(target, name, handler, opts);
+            (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+        });
+    }
+};
+const hostListenerProxy = (hostRef, methodName) => (ev) => {
+    try {
+        {
+            if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
+                // instance is ready, let's call it's member method for this event
+                hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+            }
+        }
+    }
+    catch (e) {
+        consoleError(e);
+    }
+};
+// prettier-ignore
+const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1226,6 +1277,7 @@ const registerHost = (elm, cmpMeta) => {
         elm['s-p'] = [];
         elm['s-rc'] = [];
     }
+    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
     return hostRefs.set(elm, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;

package/dist/esm/index.js

@@ -1 +1,2 @@
-
+export { B as BankAccountForm, C as CardForm, P as PaymentsList } from './payments-list-91eba70b.js';
+import './index-e279d85e.js';