@justifi/webcomponents 5.4.4 → 5.6.0

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

@@ -3,6 +3,7 @@ import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
 export class TextInput {
     constructor() {
+        this.isFocused = false;
         this.handleFormControlInput = (event) => {
             const target = event.target;
             const name = target.getAttribute('name');
@@ -15,16 +16,6 @@ export class TextInput {
                 inputElement.value = newValue || '';
             }
         };
-        this.isFocused = false;
-        this.name = undefined;
-        this.label = undefined;
-        this.inputHandler = undefined;
-        this.defaultValue = undefined;
-        this.helpText = undefined;
-        this.errorText = undefined;
-        this.maxLength = undefined;
-        this.keyDownHandler = undefined;
-        this.disabled = undefined;
     }
     handleDefaultValueChange(newValue) {
         this.updateInput(newValue);
@@ -45,16 +36,17 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '1dec875457354695f83386e1644e60590c12779e' }, h("div", { key: '78f295fddd56b9696077ad3a2fcb766b9b6135bd', class: "form-group d-flex flex-column" }, h("div", { key: '5c758bbca8097ec33596366638adff845f4f7b46', class: "d-flex align-items-start gap-2" }, h("label", { key: '31576778adaf535b52584b1643e1cae3699e76c4', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '328deeda6bbedb37624aad6730d7dd3a9dcc0f1a', helpText: this.helpText })), h("input", { key: 'ac141a2e464e1b0caf10c1434f03744c4e2c557c', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '1b48bf6cbd4ef2b115c7d070310a625f1dfbe814' }, h("div", { key: '2c814160dc94ba70d0a75551ba5c95ba90a011e4', class: "form-group d-flex flex-column" }, h("div", { key: '3d40c1b9f590b2275f43fb16fa4c6d0986760f9a', class: "d-flex align-items-start gap-2" }, h("label", { key: '51ec736c062308443301decbc8c58a4912a55264', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1266b937707fbf83666c61ce6fca593f02d45b18', helpText: this.helpText })), h("input", { key: 'd70668313e3240e998b9c890ef7ab2fb47cb3552', 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: '2e826f44513b7f1c8a2eb40cf6141f3e34509ec7', errorText: this.errorText, name: this.name }))));
+            }, 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: 'e7b268ed1c6c638b319f01b9a211d5bbc930d2ef', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {
         return {
             "name": {
                 "type": "any",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -67,11 +59,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -84,11 +78,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "inputHandler": {
                 "type": "unknown",
+                "attribute": "input-handler",
                 "mutable": false,
                 "complexType": {
                     "original": "(name: string, value: string) => void",
@@ -100,10 +96,13 @@ export class TextInput {
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "defaultValue": {
                 "type": "string",
+                "attribute": "default-value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -116,11 +115,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "default-value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -133,11 +134,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "help-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -150,11 +153,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "maxLength": {
                 "type": "number",
+                "attribute": "max-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -167,11 +172,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-length",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "keyDownHandler": {
                 "type": "unknown",
+                "attribute": "key-down-handler",
                 "mutable": false,
                 "complexType": {
                     "original": "(event: any) => void",
@@ -183,10 +190,13 @@ export class TextInput {
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -199,7 +209,8 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { input, inputDisabled, inputFocused, inputInvalid, inputInvalidAndFocused, label } from "../../styles/parts";
 export class TextInput {
     constructor() {
+        this.isFocused = false;
         this.handleFormControlInput = (event) => {
             const target = event.target;
             const name = target.getAttribute('name');
@@ -14,16 +15,6 @@ export class TextInput {
                 inputElement.value = newValue || '';
             }
         };
-        this.isFocused = false;
-        this.label = undefined;
-        this.name = undefined;
-        this.helpText = undefined;
-        this.errorText = undefined;
-        this.defaultValue = undefined;
-        this.maxLength = undefined;
-        this.inputHandler = undefined;
-        this.keyDownHandler = undefined;
-        this.disabled = undefined;
     }
     handleDefaultValueChange(newValue) {
         this.updateInput(newValue);
@@ -47,16 +38,17 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '140be8b4dc7d31be7bc6cfae5d1d86bdf777e7a1' }, h("div", { key: '8348dbe04bb617081b7fad50238f1bf3a55ae9e2', class: "form-group d-flex flex-column" }, h("label", { key: '4257e23df7cae41e5af09ba3ecbc1d7418c9ed49', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '2a49a82756de35be6981c8e4bb1f19be17239fa5', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '8036cca60e80d20316c602a4b4e975fdaf216878' }, h("div", { key: '400a24d0fdd5305f033428c7e3d4fd1d70e1a6c2', class: "form-group d-flex flex-column" }, h("label", { key: '8a501e7d0610489e6825a610f6203ced59e87a83', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'd360db0694aa4181b1e158909897f2ffcc3be962', 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: 'd9dbc241c4bf6b556cd225b4727ffc894f78a695', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'befc53a62981b67120907b95cdf2ce94e5abf9aa', errorText: this.errorText, name: this.name }))));
+            }, 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: '6b1941ef4a7a6b2f97c1d24c4047a4ddf0df4006', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '5dbfb0d0b25ea1e1af7ad7d034853467962c1bf3', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -69,11 +61,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "name": {
                 "type": "any",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -86,11 +80,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -103,11 +99,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "help-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -120,11 +118,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "defaultValue": {
                 "type": "string",
+                "attribute": "default-value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -137,11 +137,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "default-value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "maxLength": {
                 "type": "number",
+                "attribute": "max-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -154,11 +156,13 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-length",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "inputHandler": {
                 "type": "unknown",
+                "attribute": "input-handler",
                 "mutable": false,
                 "complexType": {
                     "original": "(name: string, value: string) => void",
@@ -170,10 +174,13 @@ export class TextInput {
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "keyDownHandler": {
                 "type": "unknown",
+                "attribute": "key-down-handler",
                 "mutable": false,
                 "complexType": {
                     "original": "(event: any) => void",
@@ -185,10 +192,13 @@ export class TextInput {
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -201,7 +211,8 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -1,10 +1,6 @@
 import { h } from "@stencil/core";
 import { alertDanger } from "../../../../styles/parts";
 export class FormAlert {
-    constructor() {
-        this.text = undefined;
-        this.hideAlert = undefined;
-    }
     render() {
         if (!this.text) {
             return null;
@@ -19,6 +15,7 @@ export class FormAlert {
         return {
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -31,11 +28,13 @@ export class FormAlert {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "hideAlert": {
                 "type": "boolean",
+                "attribute": "hide-alert",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -48,7 +47,8 @@ export class FormAlert {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "hide-alert",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -1,9 +1,5 @@
 import { h } from "@stencil/core";
 export class FormControlHelpText {
-    constructor() {
-        this.helpText = undefined;
-        this.name = undefined;
-    }
     render() {
         if (!this.helpText) {
             return null;
@@ -15,6 +11,7 @@ export class FormControlHelpText {
         return {
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -27,11 +24,13 @@ export class FormControlHelpText {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "help-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -44,7 +43,8 @@ export class FormControlHelpText {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -1,11 +1,6 @@
 import { h } from "@stencil/core";
 import { tooltip, tooltipIcon, tooltipInner } from "../../../../styles/parts";
 export class TooltipComponent {
-    constructor() {
-        this.anchorIcon = undefined;
-        this.tooltip = undefined;
-        this.helpText = undefined;
-    }
     show() {
         this.tooltip.classList.add('show');
     }
@@ -23,6 +18,7 @@ export class TooltipComponent {
         return {
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -35,7 +31,8 @@ export class TooltipComponent {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "help-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -73,7 +73,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'bd707d25b1b5f0a870ff6c778291cf008ecd212b' }, h("input", { key: '639af920d20d2d5e9c2791c251f00368137c7798', 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' } })));
+        return (h(Host, { key: '170a3d6232e5ecee555da05387d127b56b07f7df' }, h("input", { key: '8acef653371ebbe45c624f8ea233b9c9c6c40714', 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() {

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

@@ -8,6 +8,8 @@ import { MessageEventType } from "../../components/checkout/message-event-types"
 import { input, inputFocused, inputInvalid, inputInvalidAndFocused, label } from "../../styles/parts";
 export class IframeInput {
     constructor() {
+        this.isFocused = false;
+        this.isValid = true;
         this.dispatchMessageEvent = (event) => {
             const { eventType, data } = event.data;
             if ((data === null || data === void 0 ? void 0 : data.id) !== this.inputId) {
@@ -20,12 +22,6 @@ export class IframeInput {
                 this.isFocused = false;
             }
         };
-        this.isFocused = false;
-        this.isValid = true;
-        this.errorText = undefined;
-        this.inputId = undefined;
-        this.label = undefined;
-        this.iframeOrigin = undefined;
     }
     disconnectedCallback() {
         this.frameService.removeMessageListener(this.dispatchMessageEvent);
@@ -81,10 +77,10 @@ export class IframeInput {
         return params;
     }
     render() {
-        return (h(Host, { key: '0c7696f592d079436b8a91d33474f74de2922917', class: "form-group d-flex flex-column" }, h("div", { key: '947cd055eb77e78ec719da130fab97ca093e4954', style: {
+        return (h(Host, { key: 'a5f275ef30181f08abf56b7d7967cb8fe8062890', class: "form-group d-flex flex-column" }, h("div", { key: 'b3c1f25b51b2780008a976545722b8ecc570bc36', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '59dfc89fb0ffb5163b9ea6c7eef12b1ff5bab5d2', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'cad88a50d0381285a1c125e1331c3e401327554d', 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: 'bf4af4cc965ddd4376b5780ea53824cb268c1952', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '6df0b61a71bfe35981bd91f14a28e55d85fc3d43', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '759f070e743795d9e92ee10389157cc8946aba51', 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: 'def8ba2e7721262374e8ff101edc4b495ecad24a', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -94,13 +90,14 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: '785e5ad09f32240299116d906f5a5dbf3f03ed5e', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '4d4203df343a2b0c0f4b9fcbfd841d30d5939612', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {
         return {
             "inputId": {
                 "type": "string",
+                "attribute": "input-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -113,11 +110,13 @@ export class IframeInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "input-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -130,11 +129,13 @@ export class IframeInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "iframeOrigin": {
                 "type": "string",
+                "attribute": "iframe-origin",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -147,7 +148,8 @@ export class IframeInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "iframe-origin",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

package/dist/collection/ui-components/pagination-menu/pagination-menu.js

@@ -20,6 +20,7 @@ export class PaginationMenu {
         return {
             "paging": {
                 "type": "unknown",
+                "attribute": "paging",
                 "mutable": false,
                 "complexType": {
                     "original": "PaginationProps['paging']",
@@ -38,10 +39,13 @@ export class PaginationMenu {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "ExtendedPagingDefaults"
             },
             "params": {
                 "type": "unknown",
+                "attribute": "params",
                 "mutable": false,
                 "complexType": {
                     "original": "PaginationProps['params']",
@@ -60,6 +64,8 @@ export class PaginationMenu {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "{}"
             }
         };

package/dist/collection/utils/utils.js

@@ -166,3 +166,11 @@ export function formatPhoneNumber(number) {
     let formatted = cleaned.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
     return formatted;
 }
+export function generateId(length = 10) {
+    const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}

package/dist/docs.d.ts

@@ -316,6 +316,14 @@ export interface JsonDocsProp {
    * ```
    */
   required: boolean;
+  /**
+   * `true` if the prop has a `get()`. `false` otherwise
+   */
+  getter: boolean;
+  /**
+   * `true` if the prop has a `set()`. `false` otherwise
+   */
+  setter: boolean;
 }
 export interface JsonDocsMethod {
   name: string;