@justifi/webcomponents 0.0.14 → 0.2.0

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

@@ -25,8 +25,10 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.parseStyleOverrides();
   }
   parseStyleOverrides() {
-    const parsedStyleOverrides = JSON.parse(this.styleOverrides);
-    this.internalStyleOverrides = parsedStyleOverrides;
+    if (this.styleOverrides) {
+      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+      this.internalStyleOverrides = parsedStyleOverrides;
+    }
   }
   async tokenize(...args) {
     if (!this.childRef) {

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

@@ -73,10 +73,10 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       this.postMessage(eventType, payload);
     });
   }
-  async tokenize(clientKey, paymentMethodMetadata, account) {
+  async tokenize(clientId, paymentMethodMetadata, account) {
     const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
     const payload = {
-      clientKey: clientKey,
+      clientId: clientId,
       paymentMethodMetadata: paymentMethodMetadata,
       account: account
     };

package/dist/components/select-input.d.ts

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

package/dist/components/select-input.js

@@ -0,0 +1,6 @@
+import { S as SelectInput$1, d as defineCustomElement$1 } from './select-input2.js';
+
+const SelectInput = SelectInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SelectInput, defineCustomElement };

package/dist/components/select-input2.js

@@ -0,0 +1,52 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const selectInputCss = ":host{display:block}label{display:block}";
+
+const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.fieldReceivedInput = createEvent(this, "fieldReceivedInput", 7);
+    this.name = undefined;
+    this.label = undefined;
+    this.defaultValue = undefined;
+    this.error = undefined;
+    this.options = undefined;
+    this.internalValue = '';
+  }
+  onInput(event) {
+    const target = event.target;
+    const name = target.getAttribute('name');
+    this.fieldReceivedInput.emit({ name: name, value: target.value });
+  }
+  ;
+  render() {
+    return (h(Host, null, h("label", null, this.label), h("select", { name: this.name, onInput: (event) => this.onInput(event) }, this.options.map((option) => {
+      return (h("option", { value: option.value }, option.label));
+    })), this.error && h("div", { style: { color: 'red' } }, this.error)));
+  }
+  static get style() { return selectInputCss; }
+}, [1, "select-input", {
+    "name": [1],
+    "label": [1],
+    "defaultValue": [1, "default-value"],
+    "error": [1],
+    "options": [16],
+    "internalValue": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["select-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "select-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SelectInput);
+      }
+      break;
+  } });
+}
+
+export { SelectInput as S, defineCustomElement as d };

package/dist/components/text-input.d.ts

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

package/dist/components/text-input.js

@@ -0,0 +1,6 @@
+import { T as TextInput$1, d as defineCustomElement$1 } from './text-input2.js';
+
+const TextInput = TextInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TextInput, defineCustomElement };

package/dist/components/text-input2.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const textInputCss = ":host{display:block}label{display:block}";
+
+const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.fieldReceivedInput = createEvent(this, "fieldReceivedInput", 7);
+    this.name = undefined;
+    this.label = undefined;
+    this.defaultValue = undefined;
+    this.error = undefined;
+    this.internalValue = '';
+  }
+  onInput(event) {
+    const target = event.target;
+    const name = target.getAttribute('name');
+    this.fieldReceivedInput.emit({ name: name, value: target.value });
+  }
+  ;
+  render() {
+    return (h(Host, null, h("label", null, this.label), h("input", { name: this.name, type: "text", onInput: (event) => this.onInput(event), value: this.internalValue || this.defaultValue }), this.error && h("div", { style: { color: 'red' } }, this.error)));
+  }
+  static get style() { return textInputCss; }
+}, [1, "text-input", {
+    "name": [1],
+    "label": [1],
+    "defaultValue": [1, "default-value"],
+    "error": [1],
+    "internalValue": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "text-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TextInput);
+      }
+      break;
+  } });
+}
+
+export { TextInput as T, defineCustomElement as d };

package/dist/esm/{index-c1f569bd.js → index-0bcf33c4.js}

@@ -291,7 +291,7 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
 const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (oldValue !== newValue) {
         let isProp = isMemberInElement(elm, memberName);
-        memberName.toLowerCase();
+        let ln = memberName.toLowerCase();
         if (memberName === 'class') {
             const classList = elm.classList;
             const oldClasses = parseClassList(oldValue);
@@ -299,12 +299,76 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
                 newValue(elm);
             }
         }
+        else if ((!isProp ) &&
+            memberName[0] === 'o' &&
+            memberName[1] === 'n') {
+            // Event Handlers
+            // so if the member name starts with "on" and the 3rd characters is
+            // a capital letter, and it's not already a member on the element,
+            // then we're assuming it's an event listener
+            if (memberName[2] === '-') {
+                // on- prefixed events
+                // allows to be explicit about the dom event to listen without any magic
+                // under the hood:
+                // <my-cmp on-click> // listens for "click"
+                // <my-cmp on-Click> // listens for "Click"
+                // <my-cmp on-ionChange> // listens for "ionChange"
+                // <my-cmp on-EVENTS> // listens for "EVENTS"
+                memberName = memberName.slice(3);
+            }
+            else if (isMemberInElement(win, ln)) {
+                // standard event
+                // the JSX attribute could have been "onMouseOver" and the
+                // member name "onmouseover" is on the window's prototype
+                // so let's add the listener "mouseover", which is all lowercased
+                memberName = ln.slice(2);
+            }
+            else {
+                // custom event
+                // the JSX attribute could have been "onMyCustomEvent"
+                // so let's trim off the "on" prefix and lowercase the first character
+                // and add the listener "myCustomEvent"
+                // except for the first character, we keep the event name case
+                memberName = ln[2] + memberName.slice(3);
+            }
+            if (oldValue) {
+                plt.rel(elm, memberName, oldValue, false);
+            }
+            if (newValue) {
+                plt.ael(elm, memberName, newValue, false);
+            }
+        }
         else {
             // Set property if it exists and it's not a SVG
             const isComplex = isComplexType(newValue);

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

@@ -0,0 +1,55 @@
+import { r as registerInstance, c as createEvent, h } from './index-0bcf33c4.js';
+
+const BankAccountForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bankAccountFormReady = createEvent(this, "bankAccountFormReady", 7);
+    this.bankAccountFormTokenize = createEvent(this, "bankAccountFormTokenize", 7);
+    this.bankAccountFormValidate = createEvent(this, "bankAccountFormValidate", 7);
+    this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
+  }
+  readyHandler(event) {
+    this.bankAccountFormReady.emit(event);
+  }
+  tokenizeHandler(event) {
+    this.bankAccountFormTokenize.emit(event);
+  }
+  validateHandler(event) {
+    this.bankAccountFormValidate.emit(event);
+  }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    if (this.styleOverrides) {
+      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+      this.internalStyleOverrides = parsedStyleOverrides;
+    }
+  }
+  async tokenize(...args) {
+    if (!this.childRef) {
+      throw new Error('Cannot call tokenize');
+    }
+    return this.childRef.tokenize(...args);
+  }
+  async validate() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.validate();
+  }
+  render() {
+    return (h("justifi-payment-method-form", { ref: el => {
+        if (el) {
+          this.childRef = el;
+        }
+      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+  }
+  static get watchers() { return {
+    "styleOverrides": ["parseStyleOverrides"]
+  }; }
+};
+
+export { BankAccountForm as justifi_bank_account_form };