@justifi/webcomponents 0.0.15 → 0.2.1

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 {
@@ -73,12 +154,13 @@ 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,
+      componentVersion: packageJson.version,
       paymentMethodMetadata: paymentMethodMetadata,
-      account: account
+      account: account,
     };
     return this.postMessageWithResponseListener(eventType, payload);
   }

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 };