@justifi/webcomponents 4.7.4 → 4.7.6

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7471ed60.js';
-import { c as config } from './config-ceb0f902.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-62b8aa8a.js';
+import { c as config } from './config-476c7241.js';
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
@@ -1473,31 +1473,28 @@ var iframeResizer = createCommonjsModule(function (module) {
 });
 
 const MessageEventType = {
-  card: {
-    ready: 'justifi.card.ready',
-    tokenize: 'justifi.card.tokenize',
-    validate: 'justifi.card.validate',
-    resize: 'justifi.card.resize',
-    styleOverrides: 'justifi.card.styleOverrides',
-  },
-  bankAccount: {
-    ready: 'justifi.bankAccount.ready',
-    tokenize: 'justifi.bankAccount.tokenize',
-    validate: 'justifi.bankAccount.validate',
-    resize: 'justifi.bankAccount.resize',
-    styleOverrides: 'justifi.bankAccount.styleOverrides',
-  },
+    card: {
+        ready: 'justifi.card.ready',
+        tokenize: 'justifi.card.tokenize',
+        validate: 'justifi.card.validate',
+        resize: 'justifi.card.resize',
+        styleOverrides: 'justifi.card.styleOverrides',
+    },
+    bankAccount: {
+        ready: 'justifi.bankAccount.ready',
+        tokenize: 'justifi.bankAccount.tokenize',
+        validate: 'justifi.bankAccount.validate',
+        resize: 'justifi.bankAccount.resize',
+        styleOverrides: 'justifi.bankAccount.styleOverrides',
+    },
 };
 
 const name = "@justifi/webcomponents";
-const version = "4.7.4";
+const version = "4.7.6";
 const description = "JustiFi Web Components";
-const main = "dist/index.cjs.js";
-const module = "dist/components/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 main = "dist/module/index.js";
+const module = "dist/module/index.js";
+const types = "./dist/types/index.d.ts";
 const repository = {
 	type: "git",
 	url: "git+https://github.com/justifi-tech/web-component-library.git"
@@ -1507,19 +1504,17 @@ const publishConfig = {
 	registry: "https://registry.npmjs.org"
 };
 const files = [
-	"dist/",
-	"loader/"
+	"dist/"
 ];
 const scripts = {
 	build: "stencil build --docs",
-	start: "concurrently --restart-tries 3 -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"npm run start-stencil\" \"npm run storybook\"",
-	"start-stencil": "stencil build --watch",
+	dev: "stencil build --watch",
+	lint: "eslint . --max-warnings 0",
+	clean: "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+	generate: "stencil generate",
 	test: "stencil test --spec",
 	"test:watch": "stencil test --spec --watchAll",
-	"test:e2e": "stencil test --e2e",
-	generate: "stencil generate",
-	storybook: "storybook dev -p 6006 --quiet",
-	"build-storybook": "storybook build -o ../docs"
+	"test:e2e": "stencil test --e2e"
 };
 const dependencies = {
 	"@stencil/core": "^4.0.5",
@@ -1538,33 +1533,16 @@ const devDependencies = {
 	"@babel/preset-env": "^7.21.5",
 	"@babel/preset-react": "^7.18.6",
 	"@babel/preset-typescript": "^7.21.5",
-	"@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
-	"@stencil/angular-output-target": "^0.7.1",
-	"@stencil/react-output-target": "^0.5.3",
 	"@stencil/sass": "^3.0.1",
 	"@stencil/store": "^2.0.8",
-	"@stencil/vue-output-target": "^0.8.6",
-	"@storybook/addon-actions": "^7.0.4",
-	"@storybook/addon-essentials": "^7.0.4",
-	"@storybook/addon-interactions": "^7.0.4",
-	"@storybook/addon-links": "^7.0.4",
-	"@storybook/html": "^7.0.4",
-	"@storybook/html-webpack5": "^7.0.4",
-	"@storybook/jest": "^0.1.0",
-	"@storybook/testing-library": "^0.1.0",
 	"@types/jest": "27.0.3",
 	"@types/node": "^20.1.4",
 	"@types/react": "^18.0.37",
 	"@types/react-dom": "^18.0.11",
-	concurrently: "^7.6.0",
 	dotenv: "^16.3.1",
 	jest: "^27.4.5",
 	"jest-cli": "^27.4.5",
-	puppeteer: "^21.0.0",
-	react: "^18.2.0",
-	"react-dom": "^18.2.0",
-	"rollup-plugin-replace": "^2.2.0",
-	storybook: "^7.0.4"
+	puppeteer: "^21.0.0"
 };
 const license = "MIT";
 const gitHead = "507bac1d941eae6e1f56e185ecd9bc9d22637783";
@@ -1574,11 +1552,7 @@ const packageJson = {
 	description: description,
 	main: main,
 	module: module,
-	es2015: es2015,
-	es2017: es2017,
 	types: types,
-	collection: collection,
-	"collection:main": "dist/collection/index.js",
 	repository: repository,
 	homepage: homepage,
 	publishConfig: publishConfig,
@@ -1591,150 +1565,159 @@ const packageJson = {
 };
 
 const getComputedTheme = () => {
-  const computedStyles = getComputedStyle(document.body);
-  const computedTheme = {
-    loadGoogleFont: computedStyles.getPropertyValue('--jfi-load-google-font'),
-    layout: {
-      fontFamily: computedStyles.getPropertyValue('--jfi-layout-font-family'),
-      padding: computedStyles.getPropertyValue('--jfi-layout-padding'),
-      formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),
-      formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),
-    },
-    formControl: {
-      backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),
-      borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),
-      borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),
-      borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),
-      borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),
-      borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),
-      borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),
-      borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),
-      borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),
-      borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),
-      borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),
-      boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),
-      boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),
-      boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),
-      boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),
-      color: computedStyles.getPropertyValue('--jfi-form-control-color'),
-      colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),
-      fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),
-      fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),
-      lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),
-      margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),
-      padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),
-    },
-    formLabel: {
-      color: computedStyles.getPropertyValue('--jfi-form-label-color'),
-      fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),
-      fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),
-      fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),
-      margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),
-    },
-    errorMessage: {
-      color: computedStyles.getPropertyValue('--jfi-error-message-color'),
-      margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),
-      fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),
-    },
-  };
-  return computedTheme;
+    const computedStyles = getComputedStyle(document.body);
+    const computedTheme = {
+        loadGoogleFont: computedStyles.getPropertyValue('--jfi-load-google-font'),
+        layout: {
+            fontFamily: computedStyles.getPropertyValue('--jfi-layout-font-family'),
+            padding: computedStyles.getPropertyValue('--jfi-layout-padding'),
+            formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),
+            formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),
+        },
+        formControl: {
+            backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),
+            borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),
+            borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),
+            borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),
+            borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),
+            borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),
+            borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),
+            borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),
+            borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),
+            borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),
+            borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),
+            boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),
+            boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),
+            boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),
+            boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),
+            color: computedStyles.getPropertyValue('--jfi-form-control-color'),
+            colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),
+            fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),
+            fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),
+            lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),
+            margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),
+            padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),
+        },
+        formLabel: {
+            color: computedStyles.getPropertyValue('--jfi-form-label-color'),
+            fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),
+            fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),
+            fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),
+            margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),
+        },
+        errorMessage: {
+            color: computedStyles.getPropertyValue('--jfi-error-message-color'),
+            margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),
+            fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),
+        },
+    };
+    return computedTheme;
 };
 
 const paymentMethodFormCss = ":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}iframe{width:1px;min-width:100%}";
 
 const PaymentMethodForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.paymentMethodFormReady = createEvent(this, "paymentMethodFormReady", 7);
-    this.paymentMethodFormTokenize = createEvent(this, "paymentMethodFormTokenize", 7);
-    this.computedTheme = getComputedTheme();
-    this.paymentMethodFormType = undefined;
-    this.paymentMethodFormValidationMode = undefined;
-    this.iframeOrigin = undefined;
-    this.singleLine = undefined;
-  }
-  connectedCallback() {
-    window.addEventListener('message', this.dispatchMessageEvent.bind(this));
-  }
-  disconnectedCallback() {
-    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
-  }
-  sendStyleOverrides() {
-    if (this.computedTheme) {
-      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.paymentMethodFormReady = createEvent(this, "paymentMethodFormReady", 7);
+        this.paymentMethodFormValidated = createEvent(this, "paymentMethodFormValidated", 7);
+        this.paymentMethodFormTokenized = createEvent(this, "paymentMethodFormTokenized", 7);
+        this.computedTheme = getComputedTheme();
+        this.paymentMethodFormType = undefined;
+        this.paymentMethodFormValidationMode = undefined;
+        this.iframeOrigin = undefined;
+        this.singleLine = undefined;
+    }
+    connectedCallback() {
+        window.addEventListener('message', this.dispatchMessageEvent.bind(this));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
+    }
+    sendStyleOverrides() {
+        if (this.computedTheme) {
+            this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
+        }
     }
-  }
-  dispatchMessageEvent(messageEvent) {
-    const messagePayload = messageEvent.data;
-    const messageType = messagePayload.eventType;
-    const messageData = messagePayload.data;
-    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {
-      this.paymentMethodFormReady.emit(messageData);
+    dispatchMessageEvent(messageEvent) {
+        const messagePayload = messageEvent.data;
+        const messageType = messagePayload.eventType;
+        const messageData = messagePayload.data;
+        if (messageType === MessageEventType[this.paymentMethodFormType].ready) {
+            this.paymentMethodFormReady.emit(messageData);
+        }
+        if (messageType === MessageEventType[this.paymentMethodFormType].tokenize) {
+            this.paymentMethodFormTokenized.emit(messageData);
+        }
+        if (messageType === MessageEventType[this.paymentMethodFormType].validate) {
+            this.paymentMethodFormValidated.emit(messageData);
+        }
     }
-  }
-  postMessage(eventType, payload) {
-    var _a, _b;
-    (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(Object.assign({ eventType: eventType }, payload), config.iframeOrigin );
-  }
-  async resize() {
-    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
-  }
-  async postMessageWithResponseListener(eventType, payload) {
-    return new Promise(resolve => {
-      const responseListener = (event) => {
-        if (event.data.eventType !== eventType)
-          return;
-        window.removeEventListener('message', responseListener);
-        resolve(event.data.data);
-      };
-      window.addEventListener('message', responseListener);
-      this.postMessage(eventType, payload);
-    });
-  }
-  async tokenize(clientId, paymentMethodMetadata, account) {
-    const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
-    const payload = {
-      clientId: clientId,
-      componentVersion: packageJson.version,
-      paymentMethodMetadata: paymentMethodMetadata,
-      account: account,
-    };
-    return this.postMessageWithResponseListener(eventType, payload);
-  }
-  async validate() {
-    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
-  }
-  composeQueryParams(values) {
-    const queryParams = values.map(value => {
-      if (value === values[0]) {
-        return (value = `?${value}`);
-      }
-      else {
-        return (value = `&${value}`);
-      }
-    });
-    return queryParams.join('');
-  }
-  getIframeSrc() {
-    const iframeOrigin = config.iframeOrigin;
-    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
-    let paramsList = [];
-    if (this.paymentMethodFormValidationMode) {
-      paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);
+    postMessage(eventType, payload) {
+        var _a, _b;
+        (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(Object.assign({ eventType: eventType }, payload), config.iframeOrigin );
+    }
+    async resize() {
+        this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
+    }
+    async postMessageWithResponseListener(eventType, payload) {
+        return new Promise(resolve => {
+            const responseListener = (event) => {
+                if (event.data.eventType !== eventType)
+                    return;
+                window.removeEventListener('message', responseListener);
+                resolve(event.data.data);
+            };
+            window.addEventListener('message', responseListener);
+            this.postMessage(eventType, payload);
+        });
     }
-    if (this.singleLine) {
-      paramsList.push(`singleLine=${this.singleLine}`);
+    async tokenize(clientId, paymentMethodMetadata, account) {
+        const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
+        const payload = {
+            clientId: clientId,
+            componentVersion: packageJson.version,
+            paymentMethodMetadata: paymentMethodMetadata,
+            account: account,
+        };
+        return this.postMessageWithResponseListener(eventType, payload);
+    }
+    async validate() {
+        return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
+    }
+    composeQueryParams(values) {
+        const queryParams = values.map(value => {
+            if (value === values[0]) {
+                return (value = `?${value}`);
+            }
+            else {
+                return (value = `&${value}`);
+            }
+        });
+        return queryParams.join('');
+    }
+    getIframeSrc() {
+        const iframeOrigin = config.iframeOrigin;
+        let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
+        let paramsList = [];
+        if (this.paymentMethodFormValidationMode) {
+            paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);
+        }
+        if (this.singleLine) {
+            paramsList.push(`singleLine=${this.singleLine}`);
+        }
+        return iframeSrc.concat(this.composeQueryParams(paramsList));
+    }
+    render() {
+        return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
+                this.iframeElement = el;
+            }, onLoad: () => {
+                iframeResizer({
+                    scrollbars: false,
+                }, this.iframeElement);
+                this.sendStyleOverrides();
+            } })));
     }
-    return iframeSrc.concat(this.composeQueryParams(paramsList));
-  }
-  render() {
-    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
-        this.iframeElement = el;
-      }, onLoad: () => {
-        iframeResizer(this.iframeElement);
-        this.sendStyleOverrides();
-      } })));
-  }
 };
 PaymentMethodForm.style = paymentMethodFormCss;