@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

package/dist/collection/ui-components/form/form-control-text.js

@@ -1,4 +1,6 @@
 import { Host, h, } from "@stencil/core";
+import { FormControlErrorText } from "../../ui-components";
+import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
 export class TextInput {
     constructor() {
         this.handleFormControlInput = (event) => {
@@ -13,6 +15,7 @@ export class TextInput {
                 inputElement.value = newValue || '';
             }
         };
+        this.isFocused = false;
         this.name = undefined;
         this.label = undefined;
         this.inputHandler = undefined;
@@ -29,8 +32,23 @@ export class TextInput {
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
+    get part() {
+        if (this.errorText) {
+            return inputInvalid;
+        }
+        if (this.disabled) {
+            return inputDisabled;
+        }
+        if (this.isFocused) {
+            return inputFocused;
+        }
+        return input;
+    }
     render() {
-        return (h(Host, { key: '31f393afa67b52bea6b833a12be0bd06ce673bb2', exportparts: "label,input,input-invalid" }, h("div", { key: '14e875434e0f5c942623cbac1c338ef8775ed24d', class: "form-group d-flex flex-column" }, h("div", { key: '7c43ad5f89675b4db4b70e1e43a862e493ebeb30', class: "d-flex align-items-start gap-2" }, h("label", { key: '7d97de55470f39608349cf54225b927f9f029db8', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fd857b971360bf3bc87d902e28e15b17c1484bdd', helpText: this.helpText })), h("input", { key: 'ba0e1464cd736c8761cdee43715f9986480639c7', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? " input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h("form-control-error-text", { key: '31c1a57ce24a129a199864f20a0498957c2a43ea', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '1303fabdad4bbf9ec2cf02e8dacbcafed74d3b8f' }, h("div", { key: 'd5438a9fd0c6b197a23f546181c1c57342824f7b', class: "form-group d-flex flex-column" }, h("div", { key: 'df99160e9af69f44bc369e579de9219e10797114', class: "d-flex align-items-start gap-2" }, h("label", { key: '669a04f01feac1aa712b6d8d43576a2f2f352cef', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e2572600e8d8a64d2b5db676cf5e407921a280e9', helpText: this.helpText })), h("input", { key: '9bae401bab3d6183b0b1f5bcee0546a8cb8bb499', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '098d7991c5c68730eedcc19ad62424a84a9acc70', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {
@@ -186,6 +204,11 @@ export class TextInput {
             }
         };
     }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "formControlInput",

package/dist/collection/ui-components/form/form-control-textarea.js

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { input, inputDisabled, inputFocused, inputInvalid, inputInvalidAndFocused, label } from "../../styles/parts";
 export class TextInput {
     constructor() {
         this.handleFormControlInput = (event) => {
@@ -8,11 +9,12 @@ export class TextInput {
             this.formControlInput.emit({ name, value: target.value });
         };
         this.updateInput = (newValue) => {
-            const inputElement = this.el.querySelector('input');
+            const inputElement = this.el.querySelector('textarea');
             if (inputElement) {
                 inputElement.value = newValue || '';
             }
         };
+        this.isFocused = false;
         this.label = undefined;
         this.name = undefined;
         this.helpText = undefined;
@@ -29,8 +31,26 @@ export class TextInput {
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
+    get part() {
+        if (this.isFocused && this.errorText) {
+            return inputInvalidAndFocused;
+        }
+        if (this.errorText) {
+            return inputInvalid;
+        }
+        if (this.isFocused) {
+            return inputFocused;
+        }
+        if (this.disabled) {
+            return inputDisabled;
+        }
+        return input;
+    }
     render() {
-        return (h(Host, { key: 'df50b59fa604d9411c904096342910fa7bda38c5', exportparts: "label,input,input-invalid" }, h("div", { key: '586ec64cf4e9fa5c557745225a24b500ccbe2479', class: "form-group d-flex flex-column" }, h("label", { key: 'eb2134c04fb7ed8e23606eaef6257767451fc4f1', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '786ba64947c1ecfc70bbca823490a227c9fcd544', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'a3d0c605439eb3f6dab7c61dc49c14dad0207623', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '0f0abe694c8b7a66378b447728a466407b51b082', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '2bf7205da9907d7e72c57bdb8cf7225ba79df6f8' }, h("div", { key: 'bba562087283e69f6bf30d644befa71f3e7edd82', class: "form-group d-flex flex-column" }, h("label", { key: '6337fd2a00e5feff788aa867fb357bb42ee76f0e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'fa0e759bb588317b24ea8ba9c554c93a8c5c8934', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'f03979b74b6cc7fd80b46345df805cf81f120dc5', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '5ab2c830a5f1345034e2c2abeca8d3e6e0a1a2ec', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {
@@ -186,6 +206,11 @@ export class TextInput {
             }
         };
     }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "formControlInput",

package/dist/collection/ui-components/form/form-helpers/form-alert/form-alert.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { alertDanger } from "../../../../styles/parts";
 export class FormAlert {
     constructor() {
         this.text = undefined;
@@ -11,7 +12,7 @@ export class FormAlert {
         if (this.hideAlert) {
             return null;
         }
-        return (h("div", { class: 'alert alert-danger d-flex align-items-center', role: 'alert' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", class: "bi bi-exclamation-triangle-fill flex-shrink-0 me-2", viewBox: "0 0 16 16", role: "img", "aria-label": "Warning:" }, h("path", { d: "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" })), h("div", null, this.text)));
+        return (h("div", { class: 'alert alert-danger d-flex align-items-center', role: 'alert', part: alertDanger }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", class: "bi bi-exclamation-triangle-fill flex-shrink-0 me-2", viewBox: "0 0 16 16", role: "img", "aria-label": "Warning:" }, h("path", { d: "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" })), h("div", null, this.text)));
     }
     static get is() { return "form-alert"; }
     static get properties() {

package/dist/collection/ui-components/form/form-helpers/form-control-error-text.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+import { textDanger } from "../../../styles/parts";
+export const FormControlErrorText = (props) => {
+    const { errorText, name } = props;
+    if (!errorText) {
+        return null;
+    }
+    return (h("small", { class: 'form-text text-danger', id: `form-error-text-${name}`, part: textDanger }, errorText));
+};

package/dist/collection/ui-components/form/form-helpers/form-control-help-text.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+import { text } from "../../../styles/parts";
+export const FormControlHelpText = (props) => {
+    const { helpText, name } = props;
+    if (!helpText) {
+        return null;
+    }
+    return (h("small", { class: 'form-text text-muted', id: `form-help-text-${name}`, part: text }, helpText));
+};

package/dist/collection/ui-components/form/form-helpers/form-control-tooltip/form-control-tooltip.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { tooltip, tooltipIcon, tooltipInner } from "../../../../styles/parts";
 export class TooltipComponent {
     constructor() {
         this.anchorIcon = undefined;
@@ -15,7 +16,7 @@ export class TooltipComponent {
         if (!this.helpText) {
             return null;
         }
-        return (h("div", { class: "tooltip-container" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-question-square tooltip-icon", viewBox: "0 0 16 16", ref: (el) => (this.anchorIcon = el), part: "tooltip-icon" }, h("path", { d: "M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" }), h("path", { d: "M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94" })), h("custom-popper", { trigger: "hover", placement: "top", anchorRef: this.anchorIcon }, h("div", { class: "tooltip bs-tooltip-top", part: "tooltip", role: "tooltip", ref: (el) => (this.tooltip = el) }, h("div", { class: "tooltip-inner", part: "tooltip-inner" }, this.helpText)))));
+        return (h("div", { class: "tooltip-container" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-question-square tooltip-icon", viewBox: "0 0 16 16", ref: (el) => (this.anchorIcon = el), part: tooltipIcon }, h("path", { d: "M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" }), h("path", { d: "M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94" })), h("custom-popper", { trigger: "hover", placement: "top", anchorRef: this.anchorIcon }, h("div", { class: "tooltip bs-tooltip-top", part: tooltip, role: "tooltip", ref: (el) => (this.tooltip = el) }, h("div", { class: "tooltip-inner", part: tooltipInner }, this.helpText)))));
     }
     static get is() { return "form-control-tooltip"; }
     static get properties() {

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

@@ -70,7 +70,7 @@ export class FormController {
     async validateAndSubmit(submitHandler, context) {
         const isValid = await this.validate(context || {});
         if (isValid) {
-            submitHandler();
+            submitHandler(this._values);
         }
     }
     setInitialValues(values) {

package/dist/collection/ui-components/form/hidden-input.js

@@ -0,0 +1,85 @@
+import { h, Host } from "@stencil/core";
+import { iframeInputStylesSet } from "./iframe-input-styles-state";
+import { input, inputFocused, inputInvalid, inputInvalidAndFocused } from "../../styles/parts";
+export class HiddenInput {
+    constructor() {
+        this.isFocused = false;
+        this.errorText = '';
+    }
+    async componentDidLoad() {
+        const fontStyles = await this.getBaseFontStyles();
+        iframeInputStylesSet('fontStyles', fontStyles);
+        const focusedStyles = await this.getFocusedStyles();
+        iframeInputStylesSet('focused', focusedStyles);
+        const focusedAndInvalidStyles = await this.getFocusedAndInvalidStyles();
+        iframeInputStylesSet('focusedAndInvalid', focusedAndInvalidStyles);
+    }
+    async getBaseFontStyles() {
+        return new Promise((resolve, _reject) => {
+            setTimeout(() => {
+                const computedStyles = getComputedStyle(this.hiddenInput);
+                const styles = {
+                    fontFamily: computedStyles.fontFamily,
+                    fontSize: computedStyles.fontSize,
+                    fontWeight: computedStyles.fontWeight,
+                    lineHeight: computedStyles.lineHeight,
+                    margin: computedStyles.margin,
+                    padding: computedStyles.padding,
+                    color: computedStyles.color,
+                };
+                resolve(styles);
+            }, 500);
+        });
+    }
+    ;
+    async getFocusedStyles() {
+        return new Promise((resolve, _reject) => {
+            this.hiddenInput.focus();
+            setTimeout(() => {
+                this.hiddenInput.blur();
+                let computedStyles = getComputedStyle(this.hiddenInput);
+                resolve({
+                    boxShadow: computedStyles.boxShadow,
+                    border: computedStyles.border,
+                });
+            }, 500);
+        });
+    }
+    async getFocusedAndInvalidStyles() {
+        return new Promise((resolve, _reject) => {
+            this.hiddenInput.focus();
+            this.errorText = 'Error';
+            setTimeout(() => {
+                const computedStyles = getComputedStyle(this.hiddenInput);
+                const styles = {
+                    boxShadow: computedStyles.boxShadow,
+                    border: computedStyles.border,
+                };
+                this.hiddenInput.blur();
+                resolve(styles);
+            }, 500);
+        });
+    }
+    get part() {
+        if (this.isFocused && this.errorText) {
+            return inputInvalidAndFocused;
+        }
+        if (this.errorText) {
+            return inputInvalid;
+        }
+        if (this.isFocused) {
+            return inputFocused;
+        }
+        return input;
+    }
+    render() {
+        return (h(Host, { key: '61734f69c30d37c98e3896c8407225dbe49fe3a2' }, h("input", { key: 'eda00a901e028a09ccd793b1fbc4136a048a0aad', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+    }
+    static get is() { return "hidden-input"; }
+    static get states() {
+        return {
+            "isFocused": {},
+            "errorText": {}
+        };
+    }
+}

package/dist/collection/ui-components/form/iframe-input-styles-state.js

@@ -0,0 +1,21 @@
+import { createStore } from "@stencil/store";
+const iframeInputStylesStore = createStore({
+    focused: {
+        boxShadow: '',
+        border: '',
+    },
+    focusedAndInvalid: {
+        boxShadow: '',
+        border: '',
+    },
+    fontStyles: {
+        fontFamily: '',
+        fontSize: '',
+        fontWeight: '',
+        lineHeight: '',
+        margin: '',
+        padding: '',
+    },
+});
+const { state: iframeInputStyles, on: iframeInputStylesOn, set: iframeInputStylesSet, } = iframeInputStylesStore;
+export { iframeInputStylesStore, iframeInputStyles, iframeInputStylesOn, iframeInputStylesSet, };

package/dist/collection/ui-components/form/iframe-input.js

@@ -0,0 +1,215 @@
+import { h, Host } from "@stencil/core";
+import iFrameResize from "iframe-resizer/js/iframeResizer";
+import { FrameCommunicationService } from "../../utils/frame-comunication-service";
+import { FormControlErrorText } from "./form-helpers/form-control-error-text";
+import packageJson from "../../../package.json";
+import { iframeInputStyles } from "./iframe-input-styles-state";
+import { MessageEventType } from "../../components/checkout/message-event-types";
+import { input, inputFocused, inputInvalid, inputInvalidAndFocused, label } from "../../styles/parts";
+export class IframeInput {
+    constructor() {
+        this.dispatchMessageEvent = (event) => {
+            const { eventType, data } = event.data;
+            if ((data === null || data === void 0 ? void 0 : data.id) !== this.inputId) {
+                return;
+            }
+            if (eventType === 'focused') {
+                this.isFocused = true;
+            }
+            if (eventType === 'blurred') {
+                this.isFocused = false;
+            }
+        };
+        this.isFocused = false;
+        this.isValid = true;
+        this.errorText = undefined;
+        this.iframeLoaded = false;
+        this.inputId = undefined;
+        this.label = undefined;
+        this.iframeOrigin = undefined;
+    }
+    disconnectedCallback() {
+        this.frameService.removeMessageListener(this.dispatchMessageEvent);
+    }
+    async validate() {
+        const response = await this.frameService
+            .postMessageWithResponseListener(MessageEventType.validate);
+        this.isValid = response.isValid;
+        this.errorText = response.error.message;
+        return response;
+    }
+    async tokenize(clientId, paymentMethodMetadata, account) {
+        return this.frameService.postMessageWithResponseListener(MessageEventType.tokenize, {
+            clientId,
+            paymentMethodMetadata,
+            account,
+            componentVersion: packageJson.version,
+        });
+    }
+    initializeFrameCommunicationService() {
+        var _a;
+        this.frameService = new FrameCommunicationService(this.iframeElement, this.iframeOrigin);
+        (_a = this.frameService) === null || _a === void 0 ? void 0 : _a.addMessageListener(this.dispatchMessageEvent);
+    }
+    get part() {
+        if (this.isFocused && !this.isValid) {
+            return inputInvalidAndFocused;
+        }
+        if (!this.isValid) {
+            return inputInvalid;
+        }
+        if (this.isFocused) {
+            return inputFocused;
+        }
+        return input;
+    }
+    get style() {
+        if (this.isFocused) {
+            if (!this.isValid) {
+                return iframeInputStyles.focusedAndInvalid;
+            }
+            return iframeInputStyles.focused;
+        }
+        return null;
+    }
+    get urlParams() {
+        // map the iframeInputStyles.fontStyles properties to the urlParams 
+        // and encode each property with btoa
+        const encodedObject = Object.fromEntries(Object
+            .entries(iframeInputStyles.fontStyles)
+            .map(([key, value]) => [key, btoa(String(value))]));
+        const params = new URLSearchParams(encodedObject).toString();
+        return params;
+    }
+    render() {
+        return (h(Host, { key: 'c0eca45af47958837580cc400e923135db070e75', class: "form-group d-flex flex-column" }, h("div", { key: '374d757e67e81deec4d7e20255710d5256983cb6', style: {
+                visibility: this.iframeLoaded ? 'visible' : 'hidden',
+                height: this.iframeLoaded ? 'auto' : '0',
+            } }, h("label", { key: '6054db3876710458e93dd8a11f7354d737e737d2', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '2ccc97c83798026666fc0abc4d23e6d83b19b2fa', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: 'c71d778eaf2008ee4a2b237842e1dbec7abf5d43', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+                this.iframeElement = el;
+                this.initializeFrameCommunicationService();
+            }, width: "100%", onLoad: () => {
+                iFrameResize({
+                    log: false,
+                    onResized: () => {
+                        this.iframeLoaded = true;
+                    }
+                }, this.iframeElement);
+            } })), h(FormControlErrorText, { key: '6f756711fccec14a52fa55e9faf0638546e80f77', errorText: this.errorText, name: this.inputId }))));
+    }
+    static get is() { return "iframe-input"; }
+    static get properties() {
+        return {
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-id",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "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 states() {
+        return {
+            "isFocused": {},
+            "isValid": {},
+            "errorText": {},
+            "iframeLoaded": {}
+        };
+    }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+                    "parameters": [{
+                            "name": "clientId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "paymentMethodMetadata",
+                            "type": "any",
+                            "docs": ""
+                        }, {
+                            "name": "account",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/ui-components/headers/header-1.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+import { heading1 } from "../../styles/parts";
+export const Header1 = (props) => {
+    return h("h1", { class: `header-1 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading1 }, props.text);
+};

package/dist/collection/ui-components/headers/header-2.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+import { heading2 } from "../../styles/parts";
+export const Header2 = (props) => {
+    return h("h2", { class: `header-2 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading2 }, props.text);
+};

package/dist/collection/ui-components/headers/header-3.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+import { heading3 } from "../../styles/parts";
+export const Header3 = (props) => {
+    return h("h3", { class: `header-3 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading3 }, props.text);
+};

package/dist/collection/ui-components/index.js

@@ -6,3 +6,9 @@ export * from './table-empty-state';
 export * from './table-error-state';
 export * from './table-loading-state';
 export * from './skeleton';
+export * from './headers/header-1';
+export * from './headers/header-2';
+export * from './headers/header-3';
+export * from './form/form-helpers/form-control-help-text';
+export * from './form/form-helpers/form-control-error-text';
+export * from './details/details';

package/dist/collection/ui-components/skeleton.js

@@ -1,39 +1,9 @@
 import { h } from "@stencil/core";
-// This component relies on "src/styles/animations.css" 
-// where it is defined the pulsation animation.
-// Because of shadow-dom, it's not possible to add it to the root.css.
-// Don't forget to include this file in the `styleUrls` 
-// property of the web component that will render the Skeleton
-export const Skeleton = ({ component = 'div', height, width, variant = 'text', componentClassName, styles = {}, }) => {
-    const getVariantStyle = () => {
-        if (variant === 'text') {
-            return {
-                marginTop: 0,
-                marginBottom: 0,
-                height: 'auto',
-                transformOrigin: '0 55%',
-                transform: 'scale(1, 0.60)',
-                borderRadius: '4px/6.67px',
-                '::before': {
-                    content: '"\\00a0"',
-                },
-            };
-        }
-        else if (variant === 'circular') {
-            return {
-                borderRadius: '50%',
-            };
-        }
-        else if (variant === 'rounded') {
-            return {
-                borderRadius: '4px',
-            };
-        }
-        return {};
-    };
-    const combinedStyle = Object.assign(Object.assign(Object.assign({}, styles), getVariantStyle()), { width,
+import { skeleton } from "../styles/parts";
+export const Skeleton = ({ component = 'div', height, width, className, styles = {}, }) => {
+    const combinedStyle = Object.assign(Object.assign({}, styles), { width,
         height });
     const TagType = component;
-    return (h(TagType, { class: componentClassName, style: combinedStyle, part: "skeleton" }));
+    return (h(TagType, { class: `${className} skeleton`, style: combinedStyle, part: skeleton, "aria-hidden": "true" }));
 };
 export default Skeleton;

package/dist/collection/ui-components/spinner.js

@@ -0,0 +1,6 @@
+import { h } from "@stencil/core";
+import { loadingSpinner } from "../styles/parts";
+const Spinner = () => {
+    return (h("div", { class: "d-flex justify-content-center" }, h("div", { class: "spinner-border", role: "status", part: loadingSpinner }, h("span", { class: "visually-hidden" }, "Loading..."))));
+};
+export default Spinner;

package/dist/collection/ui-components/table/event-types.js

@@ -0,0 +1,6 @@
+export var TableClickActions;
+(function (TableClickActions) {
+    TableClickActions["row"] = "tableRow";
+    TableClickActions["next"] = "nextPage";
+    TableClickActions["previous"] = "previousPage";
+})(TableClickActions || (TableClickActions = {}));

package/dist/collection/ui-components/table-empty-state.js

@@ -1,8 +1,9 @@
 import { h } from "@stencil/core";
+import { tableEmpty } from "../styles/parts";
 export const TableEmptyState = (props) => {
     const { columnSpan, isEmpty } = props;
     if (!columnSpan || !isEmpty) {
         return null;
     }
-    return (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: columnSpan, style: { textAlign: 'center' } }, "No results")));
+    return (h("tr", null, h("td", { class: "empty-state", part: tableEmpty, colSpan: columnSpan, style: { textAlign: 'center' } }, "No results")));
 };

package/dist/collection/ui-components/table-error-state.js

@@ -1,8 +1,9 @@
 import { h } from "@stencil/core";
+import { tableError } from "../styles/parts";
 export const TableErrorState = (props) => {
     const { columnSpan, errorMessage } = props;
     if (!columnSpan || !errorMessage) {
         return null;
     }
-    return (h("tr", null, h("td", { class: "error-state", part: "error-state", colSpan: columnSpan, "data-test-id": "table-error-state", style: { textAlign: 'center' } }, "An unexpected error occurred: ", errorMessage)));
+    return (h("tr", null, h("td", { class: "error-state", part: tableError, colSpan: columnSpan, "data-test-id": "table-error-state", style: { textAlign: 'center' } }, "An unexpected error occurred: ", errorMessage)));
 };

package/dist/collection/ui-components/table-loading-state.js

@@ -1,8 +1,10 @@
 import { h } from "@stencil/core";
+import Spinner from "./spinner";
+import { tableCell } from "../styles/parts";
 export const TableLoadingState = (props) => {
     const { columnSpan, isLoading } = props;
     if (!columnSpan || !isLoading) {
         return null;
     }
-    return (h("tr", null, h("td", { class: "loading-state", part: "loading-state-cell", colSpan: columnSpan, style: { textAlign: 'center' } }, h("div", { part: "loading-state-spinner", class: "spinner-border", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")))));
+    return (h("tr", null, h("td", { class: "loading-state", part: tableCell, colSpan: columnSpan, style: { textAlign: 'center' } }, h(Spinner, null))));
 };

package/dist/collection/utils/table.js

@@ -3,8 +3,8 @@ export class Table {
         return this.columnKeys.map((key) => this.tableColumns[key]());
     }
     get rowData() {
-        return this.collection.map((dataEntry) => {
-            return this.columnKeys.map((key) => this.tableCells[key](dataEntry[key]));
+        return this.collection.map((dataEntry, index) => {
+            return this.columnKeys.map((key) => this.tableCells[key](dataEntry[key], index));
         });
     }
     set collectionData(collection) {