@justifi/webcomponents 0.0.14 → 0.2.0

package/dist/collection/components/billing-form/state-options.js

@@ -0,0 +1,243 @@
+const StateOptions = [
+  {
+    label: 'Choose state',
+    value: ''
+  },
+  {
+    label: 'Alabama',
+    value: 'AL'
+  },
+  {
+    label: 'Alaska',
+    value: 'AK'
+  },
+  {
+    label: 'American Samoa',
+    value: 'AS'
+  },
+  {
+    label: 'Arizona',
+    value: 'AZ'
+  },
+  {
+    label: 'Arkansas',
+    value: 'AR'
+  },
+  {
+    label: 'California',
+    value: 'CA'
+  },
+  {
+    label: 'Colorado',
+    value: 'CO'
+  },
+  {
+    label: 'Connecticut',
+    value: 'CT'
+  },
+  {
+    label: 'Delaware',
+    value: 'DE'
+  },
+  {
+    label: 'District Of Columbia',
+    value: 'DC'
+  },
+  {
+    label: 'Federated States Of Micronesia',
+    value: 'FM'
+  },
+  {
+    label: 'Florida',
+    value: 'FL'
+  },
+  {
+    label: 'Georgia',
+    value: 'GA'
+  },
+  {
+    label: 'Guam',
+    value: 'GU'
+  },
+  {
+    label: 'Hawaii',
+    value: 'HI'
+  },
+  {
+    label: 'Idaho',
+    value: 'ID'
+  },
+  {
+    label: 'Illinois',
+    value: 'IL'
+  },
+  {
+    label: 'Indiana',
+    value: 'IN'
+  },
+  {
+    label: 'Iowa',
+    value: 'IA'
+  },
+  {
+    label: 'Kansas',
+    value: 'KS'
+  },
+  {
+    label: 'Kentucky',
+    value: 'KY'
+  },
+  {
+    label: 'Louisiana',
+    value: 'LA'
+  },
+  {
+    label: 'Maine',
+    value: 'ME'
+  },
+  {
+    label: 'Marshall Islands',
+    value: 'MH'
+  },
+  {
+    label: 'Maryland',
+    value: 'MD'
+  },
+  {
+    label: 'Massachusetts',
+    value: 'MA'
+  },
+  {
+    label: 'Michigan',
+    value: 'MI'
+  },
+  {
+    label: 'Minnesota',
+    value: 'MN'
+  },
+  {
+    label: 'Mississippi',
+    value: 'MS'
+  },
+  {
+    label: 'Missouri',
+    value: 'MO'
+  },
+  {
+    label: 'Montana',
+    value: 'MT'
+  },
+  {
+    label: 'Nebraska',
+    value: 'NE'
+  },
+  {
+    label: 'Nevada',
+    value: 'NV'
+  },
+  {
+    label: 'New Hampshire',
+    value: 'NH'
+  },
+  {
+    label: 'New Jersey',
+    value: 'NJ'
+  },
+  {
+    label: 'New Mexico',
+    value: 'NM'
+  },
+  {
+    label: 'New York',
+    value: 'NY'
+  },
+  {
+    label: 'North Carolina',
+    value: 'NC'
+  },
+  {
+    label: 'North Dakota',
+    value: 'ND'
+  },
+  {
+    label: 'Northern Mariana Islands',
+    value: 'MP'
+  },
+  {
+    label: 'Ohio',
+    value: 'OH'
+  },
+  {
+    label: 'Oklahoma',
+    value: 'OK'
+  },
+  {
+    label: 'Oregon',
+    value: 'OR'
+  },
+  {
+    label: 'Palau',
+    value: 'PW'
+  },
+  {
+    label: 'Pennsylvania',
+    value: 'PA'
+  },
+  {
+    label: 'Puerto Rico',
+    value: 'PR'
+  },
+  {
+    label: 'Rhode Island',
+    value: 'RI'
+  },
+  {
+    label: 'South Carolina',
+    value: 'SC'
+  },
+  {
+    label: 'South Dakota',
+    value: 'SD'
+  },
+  {
+    label: 'Tennessee',
+    value: 'TN'
+  },
+  {
+    label: 'Texas',
+    value: 'TX'
+  },
+  {
+    label: 'Utah',
+    value: 'UT'
+  },
+  {
+    label: 'Vermont',
+    value: 'VT'
+  },
+  {
+    label: 'Virgin Islands',
+    value: 'VI'
+  },
+  {
+    label: 'Virginia',
+    value: 'VA'
+  },
+  {
+    label: 'Washington',
+    value: 'WA'
+  },
+  {
+    label: 'West Virginia',
+    value: 'WV'
+  },
+  {
+    label: 'Wisconsin',
+    value: 'WI'
+  },
+  {
+    label: 'Wyoming',
+    value: 'WY'
+  }
+];
+export default StateOptions;

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

@@ -18,8 +18,10 @@ export class CardForm {
     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) {
@@ -136,7 +138,7 @@ export class CardForm {
     return {
       "tokenize": {
         "complexType": {
-          "signature": "(clientKey: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+          "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
           "parameters": [{
               "tags": [],
               "text": ""

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

@@ -50,10 +50,10 @@ export class PaymentMethodForm {
       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
     };
@@ -125,7 +125,7 @@ export class PaymentMethodForm {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "Theme",
+          "original": "Theme | undefined",
           "resolved": "Theme",
           "references": {
             "Theme": {
@@ -185,7 +185,7 @@ export class PaymentMethodForm {
     return {
       "tokenize": {
         "complexType": {
-          "signature": "(clientKey: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+          "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
           "parameters": [{
               "tags": [],
               "text": ""

package/dist/collection/components/select-input/select-input.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+label {
+  display: block;
+}

package/dist/collection/components/select-input/select-input.js

@@ -0,0 +1,144 @@
+import { Host, h } from '@stencil/core';
+export class SelectInput {
+  constructor() {
+    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 is() { return "select-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["select-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["select-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "defaultValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-value",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ label: string, value: string }[]",
+          "resolved": "{ label: string; value: string; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "internalValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "fieldReceivedInput",
+        "name": "fieldReceivedInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ name: string, value: string }",
+          "resolved": "{ name: string; value: string; }",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/text-input/text-input.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+label {
+  display: block;
+}

package/dist/collection/components/text-input/text-input.js

@@ -0,0 +1,126 @@
+import { Host, h } from '@stencil/core';
+export class TextInput {
+  constructor() {
+    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 is() { return "text-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["text-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["text-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "defaultValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-value",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "internalValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "fieldReceivedInput",
+        "name": "fieldReceivedInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ name: string, value: string }",
+          "resolved": "{ name: string; value: string; }",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/components/index.d.ts

@@ -1,8 +1,11 @@
 /* webcomponents custom elements */
 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 { 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';
+export { TextInput as TextInput } from '../types/components/text-input/text-input';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -1,5 +1,8 @@
 export { setAssetPath, setNonce, 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 { 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';
+export { TextInput, defineCustomElement as defineCustomElementTextInput } from './text-input.js';

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

@@ -25,8 +25,10 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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/justifi-billing-form.d.ts

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